Package - Shared

Shared package used by microfrontends and microservices in the beacon commerce platform proof of concept.

Publishing

To publish the package, run the following command:

npm publish

To increment package version, run the following command:

npm verion <major|minor|patch>

Storybook

To view the components I'm using Storybook.

npm run storybook:dev

Components

1. HeaderComponent

This is a React functional component that renders an AppBar with links. The links change based on the environment (development/production).

Props: No props are required.

Usage:

import { HeaderComponent } from 'bcp-poc-package-shared';

<HeaderComponent />

2. FooterComponent

This is a React functional component that renders a footer with a title, description, and company details.

Props:

• title: The title displayed in the footer.
• description: A short description displayed below the title.
• companyName: The name of the company.
• companyUrl: The company's website URL.

Usage:

import { FooterComponent } from 'bcp-poc-package-shared';

<FooterComponent
  title="Footer Title"
  description="This is a footer description"
  companyName="Beacon"
  companyUrl="https://www.becn.com"
/>

3. ButtonComponent

This is a React functional component that renders a button with customizable text, href, and variant.

Props:

• text: The text displayed on the button.
• href (optional): The URL the button will navigate to.
• variant (optional): The visual style of the button. Can be one of "text", "outlined", or "contained". Defaults to "contained".

Usage:

import { ButtonComponent } from 'bcp-poc-package-shared';

<ButtonComponent
  text="Click me!"
  href="https://www.example.com"
  variant="outlined"
/>

Services

1. log

A simple service function to log messages to the console.

Usage:

import { log } from 'bcp-poc-package-shared';

log("This is a message.");