@opaz/ui-components v0.1.41

OPAZ UI Components

OPAZ React UI component library.

Table of Contents

• Installation
• Usage
  • Using Components
  • CSS Styling
• Available Components
• Development
  • Local Development
  • Running Storybook
  • What to Do When a Component Is Not Developed
• Publishing Process
  • Versioning
  • Publishing to npm
• License

Installation

Install the package from npm:

# Using npm
npm install @opaz/ui-components

# Using yarn
yarn add @opaz/ui-components

# Using pnpm
pnpm add @opaz/ui-components

Usage

Using Components

Then import and use the components:

import { Button, Card, Input } from '@opaz/ui-components';

function App() {
  return (
    <div>
      <Card>
        <h2>Login</h2>
        <Input placeholder="Email" type="email" />
        <Button>Submit</Button>
      </Card>
    </div>
  );
}

CSS Styling

The component library is built with Tailwind CSS. You can customize the components by using Tailwind's utility classes or by overriding the component styles in your own CSS.

Available Components

The library includes components from our design system

Development

Local Development

For local development, follow these steps:

1. In the UI component library repository:

# Start the build in watch mode
npm run build:watch

# Link the package locally
npm link

2. In your target project where you want to use the components:

# Link to the locally developed package
npm link @opaz/ui-components

Now you can import and use the components from your local development version. Any changes you make to the component library will be automatically rebuilt, and your target project will use those updated components.

Running Storybook

To preview and test the components in isolation, you can use Storybook. Follow these steps to run Storybook locally:

1. Install dependencies:

   npm install

2. Start Storybook:

   npm run storybook

3. Access Storybook:

   Once the server starts, open your browser and navigate to:

   http://localhost:6006

   Here, you can view and interact with all the available components.

Notes for Storybook

• If you add a new component, make sure to create a corresponding .stories.tsx file in the src/stories directory to document and test the component.
• Use Storybook controls to dynamically test component props and behaviors.

What to Do When a Component Is Not Developed

If you need a component that doesn't exist in the library yet, consider these options:

1. Request the component: Reach out to the UI library team with requirements for the needed component.

2. Contribute: Develop the component yourself following the library's patterns and guidelines, then submit it for review by the UI library team.

3. Temporary solution: Create a local version of the component in your project while waiting for the official implementation.

Publishing Process

Versioning

We follow Semantic Versioning (SemVer) for this library:

• Patch releases (0.0.x): Bug fixes and minor changes that don't affect the API
• Minor releases (0.x.0): New features added in a backward-compatible manner
• Major releases (x.0.0): Breaking changes to the API

Publishing to npm

To publish a new version of the library to npm, follow these steps:

1. Verify your npm login status:

   # Check if you're already logged in
   npm whoami
   
   # If not logged in or need to switch accounts, use
   npm adduser

2. Update the version number in package.json:

   # For a patch release
   npm version patch
   
   # For a minor release
   npm version minor
   
   # For a major release
   npm version major

3. Publish the package to npm:

   npm publish --access public

4. Verify the publication by checking the npm page:

   https://www.npmjs.com/package/@opaz/ui-components

Notes for Publishing

• Make sure you have the appropriate permissions to publish to the @opaz organization on npm.
• The prepublishOnly script in package.json will automatically run the build process before publishing.
• Always test the package locally before publishing.

License

Nortal ISC