greenole-design-system 1.1.39 → 1.1.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +123 -123
- package/dist/greenole-design-system.cjs.js +38 -38
- package/dist/greenole-design-system.es.js +5 -4
- package/package.json +89 -89
package/README.md
CHANGED
|
@@ -1,124 +1,124 @@
|
|
|
1
|
-
# Greenole Design System
|
|
2
|
-
|
|
3
|
-
[](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
|
|
4
|
-
|
|
5
|
-
The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.
|
|
6
|
-
The library is constantly evolving, with new components and improvements being added over time.
|
|
7
|
-
|
|
8
|
-
## Table of Contents
|
|
9
|
-
|
|
10
|
-
- [Introduction](#introduction)
|
|
11
|
-
- [Installation](#installation)
|
|
12
|
-
- [Usage](#usage)
|
|
13
|
-
- [Development](#development)
|
|
14
|
-
- [Build & Publication](#build--publication)
|
|
15
|
-
- [Contributing](#contributing)
|
|
16
|
-
- [License](#license)
|
|
17
|
-
|
|
18
|
-
## Introduction
|
|
19
|
-
|
|
20
|
-
**Greenole Design System** gathers reusable components that follow a consistent visual identity.
|
|
21
|
-
It helps teams maintain design and usability standards across their React projects.
|
|
22
|
-
|
|
23
|
-
> **Note:**
|
|
24
|
-
> This library is in constant evolution. Existing components may be updated and new ones added over time.
|
|
25
|
-
|
|
26
|
-
## Installation
|
|
27
|
-
|
|
28
|
-
To install the library in your React project, run:
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
npm install greenole-design-system
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
> **Note:**
|
|
35
|
-
> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
|
|
36
|
-
|
|
37
|
-
## Usage
|
|
38
|
-
|
|
39
|
-
After installation, you need to import both the CSS styles and the components:
|
|
40
|
-
|
|
41
|
-
### 1. Import the CSS styles
|
|
42
|
-
|
|
43
|
-
First, import the CSS file in your main application file (usually `main.jsx`, `App.jsx`, or `index.js`):
|
|
44
|
-
|
|
45
|
-
```jsx
|
|
46
|
-
import 'greenole-design-system/dist/greenole.css';
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### 2. Import and use components
|
|
50
|
-
|
|
51
|
-
Then you can import and use the library's components:
|
|
52
|
-
|
|
53
|
-
```jsx
|
|
54
|
-
import React from 'react';
|
|
55
|
-
import { Typography } from 'greenole-design-system';
|
|
56
|
-
|
|
57
|
-
function App() {
|
|
58
|
-
return (
|
|
59
|
-
<div>
|
|
60
|
-
<Typography variant="h1">
|
|
61
|
-
The quick brown fox jumps over the lazy dog.
|
|
62
|
-
</Typography>
|
|
63
|
-
{/* Additional components will be added in the future */}
|
|
64
|
-
</div>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export default App;
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## Development
|
|
72
|
-
|
|
73
|
-
To contribute to or test the library locally:
|
|
74
|
-
|
|
75
|
-
1. Clone the repository:
|
|
76
|
-
```bash
|
|
77
|
-
git clone https://github.com/your-username/greenole-design-system.git
|
|
78
|
-
cd greenole-design-system
|
|
79
|
-
```
|
|
80
|
-
2. Install dependencies:
|
|
81
|
-
```bash
|
|
82
|
-
npm install
|
|
83
|
-
```
|
|
84
|
-
3. Start the development environment using Vite:
|
|
85
|
-
```bash
|
|
86
|
-
npm run dev
|
|
87
|
-
```
|
|
88
|
-
4. To view the documentation and components, we use **Storybook**:
|
|
89
|
-
```bash
|
|
90
|
-
npm run storybook
|
|
91
|
-
```
|
|
92
|
-
Storybook serves as the documentation and demo environment for the library's components.
|
|
93
|
-
|
|
94
|
-
## Build & Publication
|
|
95
|
-
|
|
96
|
-
To generate the library bundle:
|
|
97
|
-
|
|
98
|
-
1. Run the build command:
|
|
99
|
-
```bash
|
|
100
|
-
npm run build
|
|
101
|
-
```
|
|
102
|
-
This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
|
|
103
|
-
|
|
104
|
-
2. To test locally in another project, use `npm link`:
|
|
105
|
-
```bash
|
|
106
|
-
cd greenole-design-system
|
|
107
|
-
npm link
|
|
108
|
-
cd ../your-consumer-project
|
|
109
|
-
npm link greenole-design-system
|
|
110
|
-
```
|
|
111
|
-
3. When ready to publish:
|
|
112
|
-
```bash
|
|
113
|
-
npm login
|
|
114
|
-
npm publish --access public
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
## Contributing
|
|
118
|
-
|
|
119
|
-
Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
|
|
120
|
-
|
|
121
|
-
1. Fork the repository.
|
|
122
|
-
2. Create a branch for your feature (`git checkout -b my-feature`).
|
|
123
|
-
3. Commit your changes.
|
|
1
|
+
# Greenole Design System
|
|
2
|
+
|
|
3
|
+
[](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
|
|
4
|
+
|
|
5
|
+
The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.
|
|
6
|
+
The library is constantly evolving, with new components and improvements being added over time.
|
|
7
|
+
|
|
8
|
+
## Table of Contents
|
|
9
|
+
|
|
10
|
+
- [Introduction](#introduction)
|
|
11
|
+
- [Installation](#installation)
|
|
12
|
+
- [Usage](#usage)
|
|
13
|
+
- [Development](#development)
|
|
14
|
+
- [Build & Publication](#build--publication)
|
|
15
|
+
- [Contributing](#contributing)
|
|
16
|
+
- [License](#license)
|
|
17
|
+
|
|
18
|
+
## Introduction
|
|
19
|
+
|
|
20
|
+
**Greenole Design System** gathers reusable components that follow a consistent visual identity.
|
|
21
|
+
It helps teams maintain design and usability standards across their React projects.
|
|
22
|
+
|
|
23
|
+
> **Note:**
|
|
24
|
+
> This library is in constant evolution. Existing components may be updated and new ones added over time.
|
|
25
|
+
|
|
26
|
+
## Installation
|
|
27
|
+
|
|
28
|
+
To install the library in your React project, run:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install greenole-design-system
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
> **Note:**
|
|
35
|
+
> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
|
|
36
|
+
|
|
37
|
+
## Usage
|
|
38
|
+
|
|
39
|
+
After installation, you need to import both the CSS styles and the components:
|
|
40
|
+
|
|
41
|
+
### 1. Import the CSS styles
|
|
42
|
+
|
|
43
|
+
First, import the CSS file in your main application file (usually `main.jsx`, `App.jsx`, or `index.js`):
|
|
44
|
+
|
|
45
|
+
```jsx
|
|
46
|
+
import 'greenole-design-system/dist/greenole.css';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### 2. Import and use components
|
|
50
|
+
|
|
51
|
+
Then you can import and use the library's components:
|
|
52
|
+
|
|
53
|
+
```jsx
|
|
54
|
+
import React from 'react';
|
|
55
|
+
import { Typography } from 'greenole-design-system';
|
|
56
|
+
|
|
57
|
+
function App() {
|
|
58
|
+
return (
|
|
59
|
+
<div>
|
|
60
|
+
<Typography variant="h1">
|
|
61
|
+
The quick brown fox jumps over the lazy dog.
|
|
62
|
+
</Typography>
|
|
63
|
+
{/* Additional components will be added in the future */}
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export default App;
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Development
|
|
72
|
+
|
|
73
|
+
To contribute to or test the library locally:
|
|
74
|
+
|
|
75
|
+
1. Clone the repository:
|
|
76
|
+
```bash
|
|
77
|
+
git clone https://github.com/your-username/greenole-design-system.git
|
|
78
|
+
cd greenole-design-system
|
|
79
|
+
```
|
|
80
|
+
2. Install dependencies:
|
|
81
|
+
```bash
|
|
82
|
+
npm install
|
|
83
|
+
```
|
|
84
|
+
3. Start the development environment using Vite:
|
|
85
|
+
```bash
|
|
86
|
+
npm run dev
|
|
87
|
+
```
|
|
88
|
+
4. To view the documentation and components, we use **Storybook**:
|
|
89
|
+
```bash
|
|
90
|
+
npm run storybook
|
|
91
|
+
```
|
|
92
|
+
Storybook serves as the documentation and demo environment for the library's components.
|
|
93
|
+
|
|
94
|
+
## Build & Publication
|
|
95
|
+
|
|
96
|
+
To generate the library bundle:
|
|
97
|
+
|
|
98
|
+
1. Run the build command:
|
|
99
|
+
```bash
|
|
100
|
+
npm run build
|
|
101
|
+
```
|
|
102
|
+
This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
|
|
103
|
+
|
|
104
|
+
2. To test locally in another project, use `npm link`:
|
|
105
|
+
```bash
|
|
106
|
+
cd greenole-design-system
|
|
107
|
+
npm link
|
|
108
|
+
cd ../your-consumer-project
|
|
109
|
+
npm link greenole-design-system
|
|
110
|
+
```
|
|
111
|
+
3. When ready to publish:
|
|
112
|
+
```bash
|
|
113
|
+
npm login
|
|
114
|
+
npm publish --access public
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Contributing
|
|
118
|
+
|
|
119
|
+
Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
|
|
120
|
+
|
|
121
|
+
1. Fork the repository.
|
|
122
|
+
2. Create a branch for your feature (`git checkout -b my-feature`).
|
|
123
|
+
3. Commit your changes.
|
|
124
124
|
4. Open a pull request for review.
|