@comparaonline/navigation v1.1.2

Compara Navigation

This library of the monorepo is also published as an independent package to use the standalone navigation.

Its is highly recommended that imports inside this library to be kept as relative, not aliased imports, when calling files from other libraries of the monorepo, to not break the build process of the package.

Basic usage

Inside this monorepo

import { getNavigationConfig } from "@comparaonline/navigation/api";

...

const { menu: menuConfig, footer: footerConfig } = await getNavigationConfig();

...

<Menu {...menuConfig} />
<Footer {...footerConfig} />

If passed with no arguments getNavigationConfig will try to get the default options from the Next.js app being used.

Outside of the Next.js app, a custom getNavigationConfig could be passed to initialize the navigation element, for instance:

Outside, as a package

import { Menu } from "@comparaonline/navigation";

export const MenuApp = () => {
  const menuConfig = window.menuConfig;

  return (
    <>
      <Menu {...menuConfig} />
    </>
  );
};

or it can be used the internal config getter:

import { Menu, getNavigationConfig } from "@comparaonline/navigation";

export const MenuApp = async (options) => {
  const { menu: menuConfig } = await getNavigationConfig(options);

  return (
    <>
      <Menu {...menuConfig} />
    </>
  );
};

The getNavigationConfig options

To build the config in the packaged version, it should be passed an object with the below options:

{
  country: CountryCode;
  businessUnit: string | null;
  section?: string | null;
  // "blog" for instance, tells the fetch function which navigation retrieve
  useUserAccount: boolean;
  // to enable or not the user account menu
  enviroment?: string;
  messages?: Record<string, string>;
  // replaces the localized messages, needed when used as package
  searchCategories?: SearchCategory[];
  // add categories to show when the mobile search field is opened
}

The footer version of this object is the same, but doesn't need messages nor searchCategories.

Updating this package

This package to be publish, needs this command to be run

yarn build
yarn publish
# or
npm run build
npm publish

This command will execute the following sub-commands:

• rm -rf lib/* : Clean up the lib folder.
• mkdir -p lib : Create the lib folder to export the package.
• node ./scripts/copyMessages.cjs : Copy the messages from the different apps to enable using the business unit messages.
• NODE_ENV=production npx tailwind -o ./lib/style.css --minify : Build the style.css file based on tailwind.
• tsc : Transpile the Typescript files.
• node ./scripts/index.cjs : Copy and move some helpers to enable this package to run smoothly.