npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@preply/navigation

v5.7.0

Published

Preply navigation components

Downloads

11,993

Readme

Overview

This package contains main navigation components used across the pages: header and navigation menu (aka 'black' menu)

Data being displayed

This package is using live data from your active user profile on your localhost environment.

If you want to see the different states of the navigation (i.e for an Approved tutor vs an Applicant one) you can login into different profiles and then see changes reflected in Storybook.

REBRAND local dev

It's been a mess and I'd appreciate if anyone could solve this properly but after a couple of days of wrangling with @preply/shared and navigation I see no other viable option to work on this.

Do yarn add file:../../../yarn-workspace/packages/shared

don't commit yarn.lock changes

yarn --ignore-optional doesn't work as intended (it's literally bugged) so it's no use to install it as optional dependency

uncomment rebrand related lines in .storybook/config.js and /src/Navigation.stories.tsx

This is a temporary setup until FE platform figures out how to run these together or rebrand components are moved to DS.

Build & run

Docker mode

Build

docker-compose run --rm main yarn build

:warning: This doesn't work from docker so far. Propbably need to try storybook-docker or smth

Start storybook

docker-compose up

Local mode

Prerequisites

  • Our project depends on a particular version of NodeJS to run (both locally and on CI). Refer to nvmrc to find the actual version. Use nvm to easily switch the version of NodeJS.
  • We use yarn, so you'll need to run yarn in the project folder before starting to work on it. Installing deps via npm install won't work.

Start storybook

yarn storybook

Test with Preply-Space

You have a few options to test the Navigation library in the context of Preply-Space, npm pack, npm/yarn link, and yalc. Here is an example with yalc for a quick start guide.

  1. yarn global add yalc

  2. Use the following bash scripts to run and clean:

    1. Run the following cmd in the navigation folder. That's it, now go test your changes.
      yarn dev && yalc publish && cd ../../preply-space && yalc add @preply/navigation && yarn start
      Yarn dev might take quite some time, (ranging between 2 and 11 minutes, so stay patient even if the terminal seems stuck) Rerun this command to fetch new changes if needed.
    2. When done testing ensure to clean up the extra files.
      cd ../../preply-space && yalc remove @preply/navigation

Test with monolith:

  1. Build

    yarn dev
  2. Install or link the local version of @preply/navigation in the monolith:

    • Locall installation - use npm pack
    • Linking - use yarn link/npm link; altho mixing of npm and yarn may work unstable, so the recommended way for convenience is to use yalc

Go to http://localhost:9001

Log in

  1. Click "Log in" and use the login/password option.
  2. Start preply-space locally, impersonate there, and it should log in the Navigation's storybook as well.

More info: Slack.

Codestyle

Refer to the ESLint in Preply: How to for a detailed guide on how we pursue the same codestyle within different projects at Preply.

:bulb: You’ll need to install dependencies in the repo root by running yarn there to enable linting via CLI.

Monitoring / Alerting

Errors from this service are reported to Sentry under client-pkgs project.

To filter errors that are only related to this service use source tag.

Release

Follow this readme

Usage

yarn add @preply/navigation -E
import { Header, NavigationMenu, NavigationConfig } from `@preply/navigation`

<NavigationConfig {...props}>
    <Header />
    {includeNavMenu && <NavigationMenu />}
</NavigationConfig>

In order to prevent page jumping while the Header is being rendered, you might need to wrap it into a placeholder with 70px height

Props

language: string - current page language currentPath: string - current router path options: NavigationOptions [Optional] - configuration options: apiHost: string - GraphQL API host url (e.g. http://localhost)

TODO

  • [ ] Contribute to @preply/ui to create Select and Notification components and replace those temp ones copypasted into here
  • [ ] Get rid of redux (it's a legacy stuff and being used only for fetching lessons in a single place)

How to add a new notification

The piece of code responsible for rendering notifications is located in ./src/components/Header/notifications/index.tsx.

The component in charge of rendering the notifications once is open is NotificationList.

All the bell notifications are listed within

NotificationList.customSystemMessage: (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];

Currently, there are some notifications that if available to be seen, will expand automatically the bell notification display, view popupVisible.

Currently, there are also some notifications that even if they are available, the bell notification display will not be opened BUT there will be a badge indicating there is a bell notification, for instance allNotificationsCount.

Currently, some notifications use query and mutation calls to the server to get and give information with respect to the visibility, status, and perhaps content of a particular notification. For instance, see the Certificate Notification (under an experiment as well):

Most, if not all of the bell notification components are using the direct implementation of ./src/components/Header/notifications/NotificationItem/index.tsx as the parent component where they compose the notification.

An example for the usage of NotificationItem can be found in ./src/components/Header/notifications/KidsSearch/index.tsx

For more information on the different bell notifications, please refer to Confluence