elseware UI

Component Imports Structure

// External
import { ReactNode } from "react";

// Internal
import { cn } from "@/utils";

// Types
import { BaseComponentProps } from "@/interfaces";
import { Variant, Shape, Size } from "@/types";

// Data
import {
  shapes,
  variants,
  borderVariants,
  avatarSizes,
} from "@/data/styles";

Copy the following and define the component imports accordingly

// External

// Internal

// Types

// Data

Folder Hierarchy

• components: Base UI primitives (buttons, inputs, modals, etc.)
• compositions: Composite reusable structures built from primitives
• data: Metadata used on the components/compositions
• layouts: Page layouts that can be used to quickly structure the page formats
• styles: Tailwind/CSS stylings
• types: Custom react types
• utils: Reusable utility functions and hooks

Setup

Install the dependendecies via npm i.

Run Storybook

To test the components and its features start storybook using npm run dev.

Build

Run npm run build to build the UI framework.

Publishing to npm

Publishing a New Version

1. Update the version number:

   • Before publishing a new version, update the version in package.json following semantic versioning.
   • Example:

     {
       "name": "elseware-ui",
       "version": "1.0.1",
       ...
     }

2. Build the UI Framework:

   • Run the following command to ensure your changes are built and ready to be published:

     npm run build

3. Login to npm:

   • If you're not already logged in to npm, log in using:

     npm login

4. Publish the package:

   • To publish the package, run the following command:

     npm publish --access public

   • Make sure the package name in package.json is unique and does not conflict with other packages on npm.

Unpublishing an Older Version

If you need to unpublish a specific version of the package:

1. Unpublish a specific version:

   • To unpublish a specific version of your package (e.g., 1.0.0), run:

     npm unpublish [email protected]

2. Unpublish the entire package:

   • If you need to unpublish the entire package, you can run the following command (not recommended for public packages):

     npm unpublish elseware-ui --force

   Note: Be cautious when using --force as npm restricts package unpublishing for packages that are older than 72 hours to avoid breaking dependencies.