DW Global Navigation

A package to load DWs global navigation onto any site and allow users to authenticate and pass tokens to the main site via Cookies.

Before you get started

Before starting make sure to following the following steps:

1. Install project dependencies, run:

npm install.

2. Link the npm package locally, run:

npm link NOTE: In some instances global access is required so try running the command with admin access: sudo npm link

3. Open another React project and link the package, run:

npm link dw-global-nav

4. A known error of npm link is the conflict of dependencies, to solve, in the package, run:

npm link ./path-to-second-react-project/node_modules/react

This will tell the package to use react from your project instead of its dependencies.

5. Import the package as if it was installed:

...
import DWGlobalNav from 'dw-global-nav';

...

<DWGlobalNav {...{
    onLogout: () => {
      console.log("onlogout")
    },
    onLogin: (tkn) => {
      console.log("onlogin", tkn)
    },
    onPracticeChange: (user_data) => {
      console.log("onPracticeChange", user_data)
    },
  }
} />

Local Development

To compile your code once, run

• npm run build.

To compile your code once and refresh on file change, run

• npm run start.

Properties

Option | Type | Default | Description ------ | ---- | ------- | ----------- theme | string | "light" | Defines styling of the component. Accepted values are light and & dark api_url | string | prod env api url | Declares what url to call to fetch user info after authentication auth_url | string | prod env auth url | Declares what url to call to connect to the authentication server orca_url | string | prod env orca url | Declares what url to navigate for settings and handling practice

Events

Option | Type | Default | Description ------ | ---- | ------- | ----------- onLogin | function | n/a | Triggered when the user is authenticated. onLogout | function | n/a | Triggered when the user logs out. onPracticeChange | function | n/a | Triggered when the user changes location manually.

How to publish

To publish your package to npm, make sure you're logged in the correct account by running

• npm login.

Update the package version accordingly by using

• npm version [patch | minor | major]

Finally run:

• npm run launch

This will automatically build and publish the project.

To use in a non-react project

Add the following script and html to your project

    <div id="dw_gn"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dw-global-nav@latest/dist/cdn.js" defer></script>

React and ReactDOM are currently necessary to import but we are trying to have them included as package dependencies and remove these imports in the future.

TODOs

1. Allow for local development without the use of a second project