Noon Supply Chain Design System

The Noon Supply Chain Design System is a reusable set of UI components built with React, TypeScript, and Tailwind CSS. It is designed to be easy to use and integrate into any React application, ensuring a consistent look and feel across your supply chain web applications.

Table of Contents

• Installation
• Usage
• Components
• Storybook
• Development
• Contributing
• License

Installation

To install the design system, run:

npm install noon_sc_design_system_web

or if you are using Yarn:

yarn add noon_sc_design_system_web

Usage

To use the components from the design system, you need to import them into your React project. Here is an example of how to use the Button component:

import React from 'react';
import { Button } from 'noon_sc_design_system_web';

const App = () => (
  <div>
    <Button label="Click me" onClick={() => alert('Button clicked!')} />
  </div>
);

export default App;

Components

Button

A customizable button component.

Props:

• label (string): The text to display on the button.
• onClick (function): The function to call when the button is clicked.

Example usage:

<Button label="Submit" onClick={handleSubmit} />

Input

A customizable input component.

Props:

• placeholder (string): The placeholder text for the input field.
• value (string): The value of the input field.
• onChange (function): The function to call when the input value changes.

Example usage:

<Input placeholder="Enter text" value={inputValue} onChange={handleInputChange} />

Storybook

We use Storybook for documenting and testing our components. To start Storybook locally, run:

npm run storybook

or if you are using Yarn:

yarn storybook

This will open Storybook in your default web browser. You can view all the available components and their usage examples.

Development

To contribute to the development of the design system, follow these steps:

1. Clone the repository:

git clone https://github.com/your-username/noon_sc_design_system_web.git

2. Navigate to the project directory:

cd noon_sc_design_system_web

3. Install the dependencies:

npm install

or if you are using Yarn:

yarn install

4. Start the development server:

npm run storybook

or if you are using Yarn:

yarn storybook

Contributing

We welcome contributions to the design system. If you have an idea for a new component or an improvement to an existing component, please open an issue or submit a pull request.

Guidelines

• Follow the existing code style.
• Write unit tests for your components.
• Document your components in Storybook.

License

This project is licensed under the MIT License. See the LICENSE file for more details.