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.

• Installation
• Usage
• Components
• Storybook
• Development
• Contributing
• License
• Maintainers and Responsibilities

To install the design system, run:

npm install @ahmedatefdev/noon_sc_design_system_web

or if you are using Yarn:

yarn add @ahmedatefdev/noon_sc_design_system_web

To use the components from the design system, import them into your React project. Example of using the Button component:

import React from 'react';
import { Button } from '@ahmedatefdev/noon_sc_design_system_web';

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

export default App;

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.

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.

We use Storybook to document and test our components. To start Storybook locally:

npm run storybook

or if using Yarn:

yarn storybook

Developers interested in contributing can follow these steps:

1. Clone the repository:

   git clone https://github.com/ahmedatefdev/noon_sc_design_system_web.git

2. Navigate to the project directory:

   cd noon_sc_design_system_web

3. Install dependencies:

   npm install

   or with Yarn:

   yarn install

4. Start the development server:

   npm run storybook

   or with Yarn:

   yarn storybook

Contributions are welcome! To contribute:

2. Create a new branch for your changes.
3. Make changes or add new features.
4. Commit your changes with clear commit messages.
5. Push the branch to the repo.
6. Submit a pull request with a clear description and link to any relevant issues.

• Adhere to the existing code style.
• Document new components in Storybook.

• Repository Managers: Responsible for reviewing and merging pull requests, managing releases, and maintaining the repository's health.
• Contributors: Expected to submit pull requests with adequate documentation and tests. Contributors should also participate in code reviews and discussions.

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

1. Maintainers and Responsibilities: This section clearly outlines the roles and expectations for both repository managers and contributors. This helps set clear boundaries and expectations for everyone involved.

2. Detailed Contribution Process: Expanded the "Contributing" section to include specific steps for how to contribute, making it easier for new contributors to get involved.

3. Development and Storybook Instructions: Detailed instructions for setting up a development environment and using Storybook, which are crucial for ensuring contributors can work effectively.

To develop a component or feature for the Noon Supply Chain Design System, follow these best practices:

1. Environment Setup:

   • Ensure you have Node.js and npm/yarn installed.
   • Clone the repository and install dependencies as described in the Development section.

2. Component Creation:

   • Create components within the src/components directory.
   • Use existing design tokens and styles to maintain consistency.
   • Components should be functional and utilize hooks if needed.

3. Testing:

   • ensure that your changes do not break existing functionality.

4. Documentation:

   • Document each component in Storybook by creating a .stories.tsx file in the same directory as the component.
   • Provide examples of different states and props configurations.

5. Peer Review:

   • Push your changes to your branch and create a pull request.
   • Request a review from one or more existing contributors.
   • Address any feedback and make necessary revisions before merging.

By following these guidelines, developers can ensure that their contributions are in line with the project's standards and are ready for integration into the main codebase.

To integrate the Noon Supply Chain Design System into your real applications, follow these steps:

1. Installation:

   • Install the design system package using npm or Yarn as shown in the Installation section.

2. Importing Components:

   • Import the components you need from the package like any other module.

   import '@ahmedatefdev/noon_sc_design_system_web/dist/styles.css';
   import { Button, Input } from '@ahmedatefdev/noon_sc_design_system_web';

3. Using Components:

   • Use the imported components in your React application.

   const App = () => (
     <div>
       <Button label="Save" onClick={handleSave} />
       <Input
         placeholder="Enter your name"
         value={name}
         onChange={handleChange}
       />
     </div>
   );

4. Customization:

   • Override styles using className or style props if customization is supported.
   • Use Tailwind CSS utility classes to adjust the appearance as needed.

5. Deployment:

   • Build your application using your standard build process.
   • Ensure all assets from the design system are included in the build output.

6. Maintenance:

   • Keep the design system package updated in your project.
   • Monitor changes and updates to the design system for any breaking changes or new features.

By following these steps, developers can seamlessly integrate and use the Noon Supply Chain Design System in their applications, ensuring consistency and quality in the user interface.