shared-ui-elements

Collection of reusable components.

About

This project was created to share the UI, agnostic logics and theme throughout the core apps.

Getting Started

1. Make sure you have NodeJS and npm installed.

2. Install your dependencies

   cd path/to/shared-ui-elements
   npm install
   

3. Start Storybook

   npm run storybook # Runs storybook
   

Path import alias

This project utilizes alias only for the storybook implementation, the modules to be exposed in the package are not aliased since the package will be consumed by the core apps and they may not have the same alias configuration nor the same folder structure.

Adding dependencies

Ensure that new dependencies are added to both devDependencies and peerDependencies if required in the client's project.

When to Avoid Peer Dependencies

While most dependencies should be peer dependencies to avoid version conflicts and duplicate packages, there are specific cases where a dependency should be a direct dependency instead:

• When a third-party library encounters rendering errors due to its unique distribution method or packaging structure, making it incompatible with peer dependency resolution.

This exception helps prevent runtime errors and ensures consistent behavior across different client implementations.

Installing in Your Client Session

When installing the @verifiedinc/shared-ui-elements package, you have access to different export paths optimized for specific use cases.

Default ESM Export (Recommended)

The package’s default export path './' uses ECMAScript modules (ESM), providing an optimized build for modern JavaScript environments. This approach is recommended for most applications:

npm install @verifiedinc/shared-ui-elements

import { SomeComponent } from '@verifiedinc/shared-ui-elements';

This setup is efficient and works seamlessly with frameworks like Next.js, Vite, and other ESM-compatible environments.