Greenole Design System

The Greenole Design System is a React component library designed to create consistent and scalable user interfaces.
The library is constantly evolving, with new components and improvements being added over time.

Table of Contents

• Introduction
• Installation
• Usage
• Development
• Build & Publication
• Contributing
• License

Introduction

Greenole Design System gathers reusable components that follow a consistent visual identity.
It helps teams maintain design and usability standards across their React projects.

Note:
This library is in constant evolution. Existing components may be updated and new ones added over time.

Installation

To install the library in your React project, run:

npm install greenole-design-system

Note:
The library declares react and react-dom as peer dependencies, so ensure your project already has these installed.

Usage

After installation, you need to import both the CSS styles and the components:

1. Import the CSS styles

First, import the CSS file in your main application file (usually main.jsx, App.jsx, or index.js):

import 'greenole-design-system/dist/greenole.css';

2. Import and use components

Then you can import and use the library's components:

import React from 'react';
import { Typography } from 'greenole-design-system';

function App() {
  return (
    <div>
      <Typography variant="h1">
        The quick brown fox jumps over the lazy dog.
      </Typography>
      {/* Additional components will be added in the future */}
    </div>
  );
}

export default App;

Development

To contribute to or test the library locally:

1. Clone the repository:

   git clone https://github.com/your-username/greenole-design-system.git
   cd greenole-design-system

2. Install dependencies:

   npm install

3. Start the development environment using Vite:

   npm run dev

4. To view the documentation and components, we use Storybook:

   npm run storybook

   Storybook serves as the documentation and demo environment for the library's components.

Build & Publication

To generate the library bundle:

1. Run the build command:

   npm run build

   This will create the dist folder with both CommonJS and ESModule files, as well as type declarations (if configured).

2. To test locally in another project, use npm link:

   cd greenole-design-system
   npm link
   cd ../your-consumer-project
   npm link greenole-design-system

3. When ready to publish:

   npm login
   npm publish --access public

Publishing Storybook to GitHub Pages

1. Build the Storybook:

   npm run build-storybook

   This generates the static files for your Storybook.

2. Deploy to GitHub Pages:

   npm run deploy-storybook

   This will automatically push the built files to the configured branch (gh-pages).

   After that, you can access the updated Storybook at: Design System

Contributing

Contributions are welcome! If you would like to help evolve the Greenole Design System, follow these steps:

1. Fork the repository.
2. Create a branch for your feature (git checkout -b my-feature).
3. Commit your changes.
4. Open a pull request for review.