@preply/marketing-personas-widget

Description

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

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

Dev mode

Install dependencies

yarn

Start storybook

yarn storybook

To test as different user types, you have to perform an auth on STORYBOOK_API_HOST (default - stage40.preply.org)

To test with monolith:

1. Build

yarn dev

1. 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

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)