aristid-ds 9.0.0-e0ef209 → 10.0.0-0f7256f
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/CHANGELOG.md +13 -2
- package/README.md +96 -95
- package/dist/Kit/Ant/index.d.ts +68 -68
- package/dist/Kit/App/index.d.ts +0 -1
- package/dist/Kit/App/index.js +4 -3
- package/dist/Kit/DataDisplay/Collapse/index.js +1 -1
- package/dist/Kit/DataDisplay/Empty/index.js +1 -1
- package/dist/Kit/DataDisplay/Error/index.js +2 -2
- package/dist/Kit/DataDisplay/Image/index.js +22 -8
- package/dist/Kit/DataDisplay/ItemCard/index.js +1 -1
- package/dist/Kit/DataDisplay/ItemList/index.js +2 -2
- package/dist/Kit/DataDisplay/RedirectCard/index.js +1 -1
- package/dist/Kit/DataDisplay/Tabs/index.js +1 -1
- package/dist/Kit/DataDisplay/Tag/index.js +1 -1
- package/dist/Kit/DataDisplay/Tree/index.js +1 -1
- package/dist/Kit/DataDisplay/index.js +4 -4
- package/dist/Kit/DataEntry/AutoComplete/index.js +2 -2
- package/dist/Kit/DataEntry/Checkbox/index.js +1 -1
- package/dist/Kit/DataEntry/ColorPicker/index.js +2 -2
- package/dist/Kit/DataEntry/DatePicker/index.js +1 -1
- package/dist/Kit/DataEntry/Input/index.js +2 -2
- package/dist/Kit/DataEntry/InputNumber/index.js +19 -15
- package/dist/Kit/DataEntry/InputWrapper/index.js +1 -1
- package/dist/Kit/DataEntry/Radio/index.js +2 -2
- package/dist/Kit/DataEntry/Rate/index.js +1 -1
- package/dist/Kit/DataEntry/RichText/EditorContentCharacterCount/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/EditorContentCharacterCount/index.js +16 -0
- package/dist/Kit/DataEntry/RichText/EditorContentCharacterCount/types.d.ts +8 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/ButtonTooltip/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/ButtonTooltip/index.js +17 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/ButtonTooltip/types.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/FontSizeSelect/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/FontSizeSelect/index.js +19 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/FontSizeSelect/types.d.ts +17 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/FontStylesButtons/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/FontStylesButtons/index.js +8 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/FontStylesButtons/types.d.ts +5 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/IndentListButtons/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/IndentListButtons/index.js +8 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/IndentListButtons/types.d.ts +5 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/LinkButton/LinkModal.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/LinkButton/getLinkMarkAtCursor.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/LinkButton/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/LinkButton/index.js +9 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/LinkButton/types.d.ts +23 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/ListButtons/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/ListButtons/index.js +8 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/ListButtons/types.d.ts +5 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/TextAlignButtons/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/TextAlignButtons/index.js +8 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/TextAlignButtons/types.d.ts +5 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/UndoRedoButtons/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/UndoRedoButtons/index.js +8 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/UndoRedoButtons/types.d.ts +5 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/getButtonActiveClass.d.ts +2 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/index.js +13 -0
- package/dist/Kit/DataEntry/RichText/MenuBar/types.d.ts +5 -0
- package/dist/Kit/DataEntry/RichText/index.d.ts +3 -0
- package/dist/Kit/DataEntry/RichText/index.js +25 -0
- package/dist/Kit/DataEntry/RichText/types.d.ts +24 -0
- package/dist/Kit/DataEntry/Select/index.js +2 -2
- package/dist/Kit/DataEntry/Slider/index.js +1 -1
- package/dist/Kit/DataEntry/Switch/index.js +1 -1
- package/dist/Kit/DataEntry/index.d.ts +1 -0
- package/dist/Kit/DataEntry/index.js +16 -15
- package/dist/Kit/Feedback/Alert/Alert.d.ts +4 -0
- package/dist/Kit/Feedback/Alert/AlertDetails.d.ts +4 -0
- package/dist/Kit/Feedback/Alert/index.d.ts +2 -3
- package/dist/Kit/Feedback/Alert/index.js +49 -21
- package/dist/Kit/Feedback/Alert/types.d.ts +23 -2
- package/dist/Kit/Feedback/Modal/index.js +1 -1
- package/dist/Kit/Feedback/Notification/index.js +1 -1
- package/dist/Kit/Feedback/Skeleton/index.js +1 -1
- package/dist/Kit/Feedback/SnackBar/index.js +1 -1
- package/dist/Kit/Feedback/index.js +2 -2
- package/dist/Kit/General/Typography/index.js +1 -1
- package/dist/Kit/Layout/Grid/Col.d.ts +1 -2
- package/dist/Kit/Layout/Grid/Row.d.ts +1 -2
- package/dist/Kit/Layout/Grid/index.js +7 -2
- package/dist/Kit/Layout/Grid/types.d.ts +7 -38
- package/dist/Kit/Layout/PageLayout/index.js +1 -1
- package/dist/Kit/Layout/index.js +10 -9
- package/dist/Kit/Navigation/Header/index.js +1 -1
- package/dist/Kit/Navigation/Menu/index.js +1 -1
- package/dist/Kit/Navigation/PageHeader/index.js +1 -1
- package/dist/Kit/Navigation/SideMenu/index.js +2 -2
- package/dist/Kit/Navigation/index.js +3 -3
- package/dist/Kit/index.js +153 -152
- package/dist/assets/InputWrapper.css +1 -1
- package/dist/assets/index10.css +1 -1
- package/dist/assets/index11.css +1 -1
- package/dist/assets/index19.css +1 -1
- package/dist/assets/index24.css +1 -1
- package/dist/assets/index25.css +1 -1
- package/dist/assets/index26.css +1 -1
- package/dist/assets/index27.css +1 -1
- package/dist/assets/index28.css +1 -1
- package/dist/assets/index29.css +1 -1
- package/dist/assets/index3.css +1 -1
- package/dist/assets/index30.css +1 -1
- package/dist/assets/index31.css +1 -0
- package/dist/assets/index4.css +1 -1
- package/dist/assets/index5.css +1 -1
- package/dist/assets/index6.css +1 -1
- package/dist/assets/index7.css +1 -1
- package/dist/assets/index8.css +1 -1
- package/dist/assets/index9.css +1 -1
- package/dist/chunks/{InputWrapper.tJodbKzs.js → InputWrapper.RBqyXNPY.js} +3 -3
- package/dist/chunks/{KitNotification.m5Z-BPRz.js → KitNotification.Upa9d8P8.js} +1 -1
- package/dist/chunks/index._m3_6N04.js +1089 -0
- package/dist/chunks/useKitLocale.96CdK3og.js +11 -0
- package/dist/index.es.js +143 -141
- package/dist/index.umd.js +5 -47
- package/dist/theme/theme-context.d.ts +0 -1
- package/dist/translation/en-US/components/Alert/index.d.ts +2 -0
- package/dist/translation/en-US/components/Alert/index.js +6 -0
- package/dist/translation/en-US/components/DataEntry/RichText/index.d.ts +2 -0
- package/dist/translation/en-US/components/DataEntry/RichText/index.js +30 -0
- package/dist/translation/en-US/general/index.js +3 -1
- package/dist/translation/en-US/index.js +13 -9
- package/dist/translation/fr-FR/components/DataEntry/RichText/index.d.ts +2 -0
- package/dist/translation/fr-FR/components/DataEntry/RichText/index.js +30 -0
- package/dist/translation/fr-FR/components/Feedback/Alert/index.d.ts +2 -0
- package/dist/translation/fr-FR/components/Feedback/Alert/index.js +6 -0
- package/dist/translation/fr-FR/general/index.js +3 -1
- package/dist/translation/fr-FR/index.js +7 -3
- package/dist/translation/types/components/DataEntry/RichText/index.d.ts +27 -0
- package/dist/translation/types/components/Feedback/Alert/index.d.ts +3 -0
- package/dist/translation/types/general/index.d.ts +2 -0
- package/dist/translation/types/index.d.ts +4 -0
- package/package.json +16 -2
- package/dist/Kit/Layout/Grid/Grid.d.ts +0 -3
- package/dist/Kit/Layout/Grid/GridContext.d.ts +0 -10
- package/dist/Kit/Layout/Grid/GridStyle.d.ts +0 -8
- package/dist/Kit/Layout/Grid/useGridContext.d.ts +0 -1
- package/dist/chunks/index.1blqoZQ8.js +0 -963
- package/dist/chunks/index.qBmLATvd.js +0 -31
package/CHANGELOG.md
CHANGED
|
@@ -1,13 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
|
|
3
4
|
## [X.X.X](https://www.npmjs.com/package/aristid-ds/v/X.X.X) (202X-XX-XX)
|
|
4
5
|
|
|
6
|
+
## [10.0.0](https://www.npmjs.com/package/aristid-ds/v/10.0.0) (2024-10-03)
|
|
7
|
+
|
|
5
8
|
### ✨ Features
|
|
6
9
|
|
|
10
|
+
- **⚠️ Breaking change - Alert:**
|
|
11
|
+
- Update Alert component to make it toastable. Does not rely on Ant anymore. Props remains the same except `afterClose` and `banner` which are removed. (@evoiron)
|
|
12
|
+
- **⚠️ Breaking change - Grid:**
|
|
13
|
+
- Update KitRow and KitCol to use antd API (@Delmotte-Vincent)
|
|
14
|
+
- **⚠️ Breaking change - Grid:**
|
|
15
|
+
- Update KitRow and KitCol to use antd API (@Delmotte-Vincent)
|
|
7
16
|
- **New - PageLayout:**
|
|
8
|
-
|
|
9
17
|
- Add PageLayout component (@Delmotte-Vincent)
|
|
10
|
-
|
|
18
|
+
- **New - RichText:**
|
|
19
|
+
- Add RichText component based on `Tiptap` editor (@philippechevieux)
|
|
11
20
|
- **SideMenu:**
|
|
12
21
|
- Add `customContent` property to display a custom component depending on `open` side menu state (@philippechevieux)
|
|
13
22
|
- **ItemList:**
|
|
@@ -32,6 +41,8 @@
|
|
|
32
41
|
|
|
33
42
|
- **Table**:
|
|
34
43
|
- Fix checkbox hidden when ellipsis is true (@renaudamsellem)
|
|
44
|
+
- **Input Number**:
|
|
45
|
+
- Fix make onBlur and onFocus method overridable (@renaudamsellem)
|
|
35
46
|
|
|
36
47
|
### 📚 Documentation
|
|
37
48
|
|
package/README.md
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
ARiSTiD Design System Readme.
|
|
5
5
|
|
|
6
6
|
[Our Storybook](https://storybook.aristid.com/?path=/docs/design-icons--docs)
|
|
7
|
+
|
|
7
8
|
</div>
|
|
8
9
|
|
|
9
10
|
<hr>
|
|
@@ -11,41 +12,40 @@ ARiSTiD Design System Readme.
|
|
|
11
12
|
<details open className="toc-block">
|
|
12
13
|
<summary>Table of Contents</summary>
|
|
13
14
|
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
- [Hotfix](#hotfix)
|
|
32
|
-
</details>
|
|
33
|
-
<hr>
|
|
15
|
+
- [Getting Started](#getting-started)
|
|
16
|
+
- [Prerequisites](#prerequisites)
|
|
17
|
+
- [Installation](#installation)
|
|
18
|
+
- [Usage in a project](#usage-in-a-project)
|
|
19
|
+
- [Development](#development)
|
|
20
|
+
- [Code structure](#code-structure)
|
|
21
|
+
- [Creating a component](#creating-a-component)
|
|
22
|
+
- [Component code](#component-code)
|
|
23
|
+
- [Component theming](#component-theming)
|
|
24
|
+
- [Component documentation](#component-documentation)
|
|
25
|
+
- [Nightly build](#nightly-build)
|
|
26
|
+
- [Important](#important)
|
|
27
|
+
- [Contributing](#contributing)
|
|
28
|
+
- [Commit](#commit)
|
|
29
|
+
- [Gitflow](#gitflow) - [Feature](#feature) - [Release](#release) - [Hotfix](#hotfix)
|
|
30
|
+
</details>
|
|
31
|
+
<hr>
|
|
34
32
|
|
|
35
33
|
## Getting Started
|
|
34
|
+
|
|
36
35
|
### Prerequisites
|
|
37
36
|
|
|
38
|
-
|
|
37
|
+
- npm
|
|
39
38
|
|
|
40
39
|
```sh dark
|
|
41
40
|
npm install npm@latest -g
|
|
42
41
|
```
|
|
43
42
|
|
|
44
|
-
|
|
43
|
+
- yarn
|
|
45
44
|
|
|
46
45
|
```sh dark
|
|
47
46
|
npm install yarn -g
|
|
48
47
|
```
|
|
48
|
+
|
|
49
49
|
<br/>
|
|
50
50
|
|
|
51
51
|
### Installation
|
|
@@ -81,6 +81,7 @@ yarn storybook
|
|
|
81
81
|
### Usage in a project
|
|
82
82
|
|
|
83
83
|
1. How To Import
|
|
84
|
+
|
|
84
85
|
```sh dark
|
|
85
86
|
yarn add aristid-ds
|
|
86
87
|
```
|
|
@@ -96,11 +97,11 @@ The **KitApp** is an essential context for the proper functioning of the **desig
|
|
|
96
97
|
By default KitApp provides **Aristid Theme** but you can override to customize every component with theme tokens.
|
|
97
98
|
|
|
98
99
|
```jsx dark
|
|
99
|
-
import {KitApp} from
|
|
100
|
+
import {KitApp} from 'aristid-ds';
|
|
100
101
|
|
|
101
102
|
<KitApp>
|
|
102
103
|
<App />
|
|
103
|
-
</KitApp
|
|
104
|
+
</KitApp>;
|
|
104
105
|
```
|
|
105
106
|
|
|
106
107
|
> If you don't use KitApp, you'll get **missing styles / translation** and **errors** when using components.
|
|
@@ -110,14 +111,14 @@ import {KitApp} from "aristid-ds";
|
|
|
110
111
|
All components are exported directly from 'aristid-ds' package.
|
|
111
112
|
|
|
112
113
|
```jsx dark
|
|
113
|
-
import {KitButton, Kitcheckbox} from
|
|
114
|
+
import {KitButton, Kitcheckbox} from 'aristid-ds';
|
|
114
115
|
```
|
|
115
116
|
|
|
116
117
|
4. Theme
|
|
117
|
-
You can override default theme by passing a theme configuration to the props `theme` of `KitApp`. All tokens are available in the documentation of each components in the section `Design Tokens`. Your theme configuration can be ease by using the **Theme Editor** available in the storybook. You can `edit` and `export` a **ready to use** configuration.
|
|
118
|
+
You can override default theme by passing a theme configuration to the props `theme` of `KitApp`. All tokens are available in the documentation of each components in the section `Design Tokens`. Your theme configuration can be ease by using the **Theme Editor** available in the storybook. You can `edit` and `export` a **ready to use** configuration.
|
|
118
119
|
|
|
119
120
|
5. Internationalization
|
|
120
|
-
You can override default translation by passing translation configuration to the props `locale`of the `KitApp`. Major part of tokens are override by antd [cf Antd translation documentation](https://ant.design/docs/react/i18n) and the other part is design system tokens. You can fin them in the section `Translation Tokens` of each components.
|
|
121
|
+
You can override default translation by passing translation configuration to the props `locale`of the `KitApp`. Major part of tokens are override by antd [cf Antd translation documentation](https://ant.design/docs/react/i18n) and the other part is design system tokens. You can fin them in the section `Translation Tokens` of each components.
|
|
121
122
|
|
|
122
123
|
<br/>
|
|
123
124
|
|
|
@@ -140,41 +141,27 @@ You can override default translation by passing translation configuration to the
|
|
|
140
141
|
- 📁 Layout
|
|
141
142
|
- index.tsx
|
|
142
143
|
- 📁 theme <span style="float: right;">(💡 Theming code)</span>
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
144
|
+
- 📁 aristid <span style="float: right;">(💡 Default theme use by `KitApp`)</span>
|
|
145
|
+
- 📁 types <span style="float: right;">(💡 Themes types declaration)</span>
|
|
146
|
+
- 📁 utils <span style="float: right;">(💡 All themes utils)</span>
|
|
147
|
+
- 📁 theme-builder <span style="float: right;">(💡 Use to build active theme)</span>
|
|
148
|
+
- 📁 tokens-mapper <span style="float: right;">(💡 Use to map our custom tokens with Antd tokens)</span>
|
|
149
|
+
- theme-context.tsx
|
|
149
150
|
- 📁 translation <span style="float: right;">(💡 Translation code)</span>
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
151
|
+
- 📁 en-US <span style="float: right;">(💡 `en-US` custom tokens)</span>
|
|
152
|
+
- 📁 fr-FR <span style="float: right;">(💡 `fr-FR` custom tokens)</span>
|
|
153
|
+
- 📁 types <span style="float: right;">(💡 Translation types declaration)</span>
|
|
154
|
+
- 📁 utils <span style="float: right;">(💡 All translation utils)</span>
|
|
155
|
+
- locale-context.tsx
|
|
156
|
+
- 📁 utils <span style="float: right;">(💡 All components utils)</span>
|
|
157
|
+
- 📁 functions <span style="float: right;">(💡 Function use in several components)</span>
|
|
157
158
|
- index.tsx
|
|
158
159
|
- vite-env.d.ts
|
|
159
|
-
3. 📁 stories <span style="float: right;">(💡 Storybook documentation)</span>
|
|
160
|
-
|
|
161
|
-
- themeEditor.mdx <span style="float: right;">(💡 Live theme editor page)</span>
|
|
162
|
-
- 📁 02-Design System <span style="float: right;">(💡 Components folder)</span>
|
|
163
|
-
- 📁 01-General
|
|
164
|
-
- 📁 02-Layout
|
|
165
|
-
- 📁 03-Navigation
|
|
166
|
-
- 📁 04-DataEntry
|
|
167
|
-
- 📁 05-DataDisplay
|
|
168
|
-
- 📁 06-Feedback
|
|
169
|
-
- 📁 assets
|
|
170
|
-
- 📁 Root
|
|
171
|
-
- 📁 template
|
|
172
|
-
- index.tsx <span style="float: right;">(💡 Export all EditorTemplate for themeEditor.mdx)</span>
|
|
173
|
-
- tokens.tsx <span style="float: right;">(💡 Theme tokens generate by tokens-generator.js)</span>
|
|
174
|
-
- types.d.ts
|
|
175
|
-
<br/>
|
|
160
|
+
3. 📁 stories <span style="float: right;">(💡 Storybook documentation)</span> - 📁 01-Design - themeEditor.mdx <span style="float: right;">(💡 Live theme editor page)</span> - 📁 02-Design System <span style="float: right;">(💡 Components folder)</span> - 📁 01-General - 📁 02-Layout - 📁 03-Navigation - 📁 04-DataEntry - 📁 05-DataDisplay - 📁 06-Feedback - 📁 assets - 📁 Root - 📁 template - index.tsx <span style="float: right;">(💡 Export all EditorTemplate for themeEditor.mdx)</span> - tokens.tsx <span style="float: right;">(💡 Theme tokens generate by tokens-generator.js)</span> - types.d.ts
|
|
161
|
+
<br/>
|
|
176
162
|
|
|
177
163
|
### Creating a component
|
|
164
|
+
|
|
178
165
|
#### Component code
|
|
179
166
|
|
|
180
167
|
1. Create a new folder for the code of your component
|
|
@@ -203,11 +190,17 @@ import styles from './styles.module.scss';
|
|
|
203
190
|
|
|
204
191
|
export const KitTooltip: FunctionComponent<IKitTooltip> = tooltipProps => {
|
|
205
192
|
const {appId} = useKitTheme();
|
|
206
|
-
return
|
|
193
|
+
return (
|
|
194
|
+
<AntdTooltip
|
|
195
|
+
{...tooltipProps}
|
|
196
|
+
className={`${appId} ${styles['kit-tooltip']} ${tooltipProps.className ?? ''}`}
|
|
197
|
+
/>
|
|
198
|
+
);
|
|
207
199
|
};
|
|
208
200
|
|
|
209
201
|
KitTooltip.displayName = 'KitTooltip';
|
|
210
202
|
```
|
|
203
|
+
|
|
211
204
|
4. Ecample of `Tooltip/styles.module.scss`
|
|
212
205
|
|
|
213
206
|
```tsx dark
|
|
@@ -240,37 +233,38 @@ export {KitTooltip};
|
|
|
240
233
|
<br/>
|
|
241
234
|
|
|
242
235
|
### Component theming
|
|
243
|
-
|
|
236
|
+
|
|
237
|
+
Every components **style** of the design system can be **override** by tokens.
|
|
244
238
|
|
|
245
239
|
1. **Create a token file type**
|
|
246
|
-
|
|
247
|
-
|
|
240
|
+
The `theme`folder is structure as same as the Kit folder.
|
|
241
|
+
<br/>
|
|
248
242
|
|
|
249
243
|
```sh dark
|
|
250
244
|
mkdir DESIGN-SYSTEM/src/theme/type/components/DataDisplay/tooltip
|
|
251
245
|
```
|
|
252
246
|
|
|
253
|
-
|
|
254
|
-
|
|
247
|
+
<br/>
|
|
248
|
+
In this file, you have all the tokens type definition. The tokens follow some rules you can find here [TODO]
|
|
255
249
|
|
|
256
250
|
2. **Create a token file**
|
|
257
|
-
|
|
251
|
+
The token file is the definition of all tokens with their value. It exports a function that create the theme for the cmponent. You define this file in the `aristid` that is the default theme of the design system.
|
|
258
252
|
|
|
259
253
|
```sh dark
|
|
260
254
|
mkdir DESIGN-SYSTEM/src/theme/aristid/components/DataDisplay/tooltip
|
|
261
255
|
```
|
|
262
256
|
|
|
263
257
|
3. **Global theme type**
|
|
264
|
-
|
|
258
|
+
After that, go to file `src/theme/type/index.tsx`to add your component type. This files contains all components that can be override.
|
|
265
259
|
|
|
266
260
|
4. **Global theme**
|
|
267
|
-
|
|
261
|
+
You can now add your component in the `src/theme/aristid/index.tsx` and you add your component and the function that creates tokens defined in point 2.
|
|
268
262
|
|
|
269
263
|
5. **Component Antd mapper**
|
|
270
|
-
|
|
264
|
+
As we use both `antd` and `design system` tokens, we normalize all token to follow a same model. If your component uses antd tokens, you have to add a mapper in the `src/theme/utils/tokens-mapper` folder. This folder as the same folder structure as the rest of the application.
|
|
271
265
|
|
|
272
|
-
|
|
273
|
-
|
|
266
|
+
<br/>
|
|
267
|
+
Example of component mapper :
|
|
274
268
|
|
|
275
269
|
```tsx
|
|
276
270
|
// utils/tokens-mapper/DataDisplay/Tag
|
|
@@ -289,12 +283,12 @@ Every components **style** of the design system can be **override** by tokens.
|
|
|
289
283
|
```
|
|
290
284
|
|
|
291
285
|
6. **Global theme mapper**
|
|
292
|
-
|
|
286
|
+
After that, you have to add your component mapper to the global mapper in the file `src/theme/utils/tokens-mapper/index.tsx`.
|
|
293
287
|
|
|
294
288
|
7. **Theme consumption**
|
|
295
|
-
|
|
289
|
+
You can use the theme in your styled component by calling the hook `useKitTheme`. You can get the component theme by calling `theme.components.Tooltip`.
|
|
296
290
|
|
|
297
|
-
|
|
291
|
+
</br>
|
|
298
292
|
|
|
299
293
|
```tsx
|
|
300
294
|
const {theme} = useKitTheme();
|
|
@@ -309,7 +303,7 @@ Every components **style** of the design system can be **override** by tokens.
|
|
|
309
303
|
#### Component documentation
|
|
310
304
|
|
|
311
305
|
1. **Copy - Paste the template folder (stories/template)**
|
|
312
|
-
|
|
306
|
+
This folder contains all required files to create component documentation.
|
|
313
307
|
- `examples` : contains all the code of examples, index.tsx export all examples in the convenient format.
|
|
314
308
|
- `data.tsx`: contains the API data (Args, Template, ...)
|
|
315
309
|
- `Component.mdx` : file that contains the component documentation (usage / examples / api / tokens)
|
|
@@ -318,7 +312,7 @@ Every components **style** of the design system can be **override** by tokens.
|
|
|
318
312
|
</br>
|
|
319
313
|
|
|
320
314
|
2. **Implement examples**
|
|
321
|
-
|
|
315
|
+
Create all examples needed in the documentation.
|
|
322
316
|
|
|
323
317
|
```tsx
|
|
324
318
|
// basic.tsx
|
|
@@ -338,7 +332,7 @@ Every components **style** of the design system can be **override** by tokens.
|
|
|
338
332
|
</br>
|
|
339
333
|
|
|
340
334
|
3. **Export examples**
|
|
341
|
-
|
|
335
|
+
You have to export all of your examples in the index.tsx of the examples folder. It permits to export all files in the convenient format to be read by the custom canvas component.
|
|
342
336
|
|
|
343
337
|
```tsx
|
|
344
338
|
import Basic from './basic';
|
|
@@ -356,6 +350,7 @@ Every components **style** of the design system can be **override** by tokens.
|
|
|
356
350
|
</br>
|
|
357
351
|
|
|
358
352
|
4. **Modify Component.mdx**
|
|
353
|
+
|
|
359
354
|
- Rename Component in the file name by your component name (ex : Tooltip.mdx).
|
|
360
355
|
- Rename Component in the file by your component name.
|
|
361
356
|
- Complete all examples you want to display in documentation.
|
|
@@ -398,6 +393,7 @@ Every components **style** of the design system can be **override** by tokens.
|
|
|
398
393
|
</br>
|
|
399
394
|
|
|
400
395
|
5. **Modify Component.stories.tsx**
|
|
396
|
+
|
|
401
397
|
- Rename Component in the file name by your component name (ex : Tooltip.stories.tsx).
|
|
402
398
|
- Rename the meta object title attribute by the pass of the component (ex : title: 'Design System/DataDisplay/Tooltip'). The path specify where the component will be placed in the storybook.
|
|
403
399
|
- Replace KitComponent by your component (ex KitTooltip).
|
|
@@ -425,7 +421,7 @@ Every components **style** of the design system can be **override** by tokens.
|
|
|
425
421
|
```
|
|
426
422
|
|
|
427
423
|
6. **Import Component Theme Editor Template**
|
|
428
|
-
|
|
424
|
+
In the `data.tsx` file, you defined a `EditorTemplate`. It permits to modify in live all tokens and get a preview of the component. You have to import this Editor in the `stories/index.tsx`and add it inside the object that contains all theme editor that already exist.
|
|
429
425
|
|
|
430
426
|
```tsx
|
|
431
427
|
import {EditorTemplate as Tooltip} from './02-Design System/05-DataDisplay/Tooltip/data';
|
|
@@ -443,7 +439,7 @@ Every components **style** of the design system can be **override** by tokens.
|
|
|
443
439
|
```
|
|
444
440
|
|
|
445
441
|
7. **Design tokens generation**
|
|
446
|
-
|
|
442
|
+
When everything is setup, you have to run the tokens-generator script to generate all design tokens in the documentation.
|
|
447
443
|
|
|
448
444
|
```sh
|
|
449
445
|
node tokens-generator.js
|
|
@@ -451,19 +447,22 @@ Every components **style** of the design system can be **override** by tokens.
|
|
|
451
447
|
|
|
452
448
|
After the script run, section `Design Tokens` documentation is up to date with all design tokens.
|
|
453
449
|
|
|
454
|
-
|
|
455
450
|
## Nightly build
|
|
451
|
+
|
|
456
452
|
A nightly version of the package is published on daily basis on branch develop (assuming new commits have been pushed on develop branch). To use it just install the more recent next version :
|
|
457
453
|
|
|
458
454
|
```sh
|
|
459
455
|
yarn add aristid-ds@next
|
|
460
456
|
```
|
|
457
|
+
|
|
461
458
|
**Note:** Though it is useful to test upcoming feature, this version should **NEVER** be used in production
|
|
462
459
|
|
|
463
460
|
## Tests
|
|
461
|
+
|
|
464
462
|
Tests can be slow when using the Design system. It is caused by jsdom which heavily use Window.GetComputedStyle. To workaround this performance issue, you shoud update the version of jsdom used by you test library (typically jest) to 21.1.0 or even 24.0.0. To achieve this, update your projects package.json and add these lines:
|
|
465
463
|
|
|
466
464
|
if using yarn:
|
|
465
|
+
|
|
467
466
|
```sh
|
|
468
467
|
"resolutions": {
|
|
469
468
|
"jsdom": "21.1.0"
|
|
@@ -471,6 +470,7 @@ if using yarn:
|
|
|
471
470
|
```
|
|
472
471
|
|
|
473
472
|
if using npm and jest:
|
|
473
|
+
|
|
474
474
|
```sh
|
|
475
475
|
"overrides": {
|
|
476
476
|
"jest-environment-jsdom": {
|
|
@@ -480,6 +480,7 @@ if using npm and jest:
|
|
|
480
480
|
```
|
|
481
481
|
|
|
482
482
|
## Important
|
|
483
|
+
|
|
483
484
|
Every import of antd library should pass by `antd` or `ant/es`. `lib` import will lead to issues in the build process.
|
|
484
485
|
|
|
485
486
|
## Contributing
|
|
@@ -496,20 +497,19 @@ git commit -m "type[(component)] : message"
|
|
|
496
497
|
|
|
497
498
|
The type is telling us what change or iteration is being made. We have the following types:
|
|
498
499
|
|
|
499
|
-
| Type
|
|
500
|
-
|
|
501
|
-
| test
|
|
502
|
-
| feat
|
|
503
|
-
| refactor | used when there is a code refactoring that does not have any impact on the system logic/rules
|
|
504
|
-
| style
|
|
505
|
-
| fix
|
|
506
|
-
| chore
|
|
507
|
-
| docs
|
|
508
|
-
| build
|
|
509
|
-
| perf
|
|
510
|
-
| ci
|
|
511
|
-
| revert
|
|
512
|
-
|
|
500
|
+
| Type | Description | Example |
|
|
501
|
+
| -------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
|
502
|
+
| test | indicates any type of creation or alteration of test codes | Creation of unit tests |
|
|
503
|
+
| feat | indicates the development of a new feature for the project. | Adding a service, functionality, endpoint, etc |
|
|
504
|
+
| refactor | used when there is a code refactoring that does not have any impact on the system logic/rules | Code changes after a code review |
|
|
505
|
+
| style | used when there are code formatting and style changes that do not change the system in any way | Change the style-guide, change the lint convention, fix indentations, remove white spaces, remove comments, etc… |
|
|
506
|
+
| fix | used when correcting errors that are generating bugs in the system | Apply a handling for a function that is not behaving as expected and returning an error |
|
|
507
|
+
| chore | indicates changes to the project that do not affect the system or test files. These are developmental changes | Change rules for eslint, add prettier, add more file extensions to .gitignore |
|
|
508
|
+
| docs | used when there are changes in the project documentation | add information in the API documentation, change the README, etc |
|
|
509
|
+
| build | used to indicate changes that affect the project build process or external dependencies | add/remove npm dependencies, etc… |
|
|
510
|
+
| perf | indicates a change that improved system performance | change ForEach to While, etc… |
|
|
511
|
+
| ci | used for changes in CI configuration files | Circle, Travis, BrowserStack, etc… |
|
|
512
|
+
| revert | indicates the reversal of a previous commit |
|
|
513
513
|
|
|
514
514
|
Example :
|
|
515
515
|
|
|
@@ -524,8 +524,9 @@ git commit -m "style(Tooltip) : Change color on hover"
|
|
|
524
524
|
### Gitflow
|
|
525
525
|
|
|
526
526
|
We use Gitflow as Git branching model for this project. We have two branches to record our project history :
|
|
527
|
-
|
|
528
|
-
-
|
|
527
|
+
|
|
528
|
+
- main (💡 Stores the official release history)
|
|
529
|
+
- develop (💡 Serves as an integration branch for features)
|
|
529
530
|
|
|
530
531
|
📚 Based on this [article](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow).
|
|
531
532
|
|
|
@@ -579,4 +580,4 @@ Finishing a release
|
|
|
579
580
|
|
|
580
581
|
```sh
|
|
581
582
|
git flow hotfix finish fixTooltip
|
|
582
|
-
```
|
|
583
|
+
```
|
package/dist/Kit/Ant/index.d.ts
CHANGED
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
export { Affix as AntAffix } from
|
|
2
|
-
export { Alert as AntAlert } from
|
|
3
|
-
export { Anchor as AntAnchor } from
|
|
4
|
-
export { App as AntApp } from
|
|
5
|
-
export { AutoComplete as AntAutoComplete } from
|
|
6
|
-
export { Avatar as AntAvatar } from
|
|
7
|
-
export { BackTop as AntBackTop } from
|
|
8
|
-
export { Badge as AntBadge } from
|
|
9
|
-
export { Breadcrumb as AntBreadcrumb } from
|
|
10
|
-
export { Button as AntButton } from
|
|
11
|
-
export { Calendar as AntCalendar } from
|
|
12
|
-
export { Card as AntCard } from
|
|
13
|
-
export { Carousel as AntCarousel } from
|
|
14
|
-
export { Cascader as AntCascader } from
|
|
15
|
-
export { Checkbox as AntCheckbox } from
|
|
16
|
-
export { Col as AntCol } from
|
|
17
|
-
export { Collapse as AntCollapse } from
|
|
18
|
-
export { ColorPicker as AntColorPicker } from
|
|
19
|
-
export { ConfigProvider as AntConfigProvider } from
|
|
20
|
-
export { DatePicker as AntDatePicker } from
|
|
21
|
-
export { Descriptions as AntDescriptions } from
|
|
22
|
-
export { Divider as AntDivider } from
|
|
23
|
-
export { Drawer as AntDrawer } from
|
|
24
|
-
export { Dropdown as AntDropdown } from
|
|
25
|
-
export { Empty as AntEmpty } from
|
|
26
|
-
export { Flex as AntFlex } from
|
|
27
|
-
export { FloatButton as AntFloatButton } from
|
|
28
|
-
export { Form as AntForm } from
|
|
29
|
-
export { Grid as AntGrid } from
|
|
30
|
-
export { Image as AntImage } from
|
|
31
|
-
export { Input as AntInput } from
|
|
32
|
-
export { InputNumber as AntInputNumber } from
|
|
33
|
-
export { Layout as AntLayout } from
|
|
34
|
-
export { List as AntList } from
|
|
35
|
-
export { Mentions as AntMentions } from
|
|
36
|
-
export { Menu as AntMenu } from
|
|
37
|
-
export { Modal as AntModal } from
|
|
38
|
-
export { Pagination as AntPagination } from
|
|
39
|
-
export { Popconfirm as AntPopconfirm } from
|
|
40
|
-
export { Popover as AntPopover } from
|
|
41
|
-
export { Progress as AntProgress } from
|
|
42
|
-
export { QRCode as AntQRCode } from
|
|
43
|
-
export { Radio as AntRadio } from
|
|
44
|
-
export { Rate as AntRate } from
|
|
45
|
-
export { Result as AntResult } from
|
|
46
|
-
export { Row as AntRow } from
|
|
47
|
-
export { Segmented as AntSegmented } from
|
|
48
|
-
export { Select as AntSelect } from
|
|
49
|
-
export { Skeleton as AntSkeleton } from
|
|
50
|
-
export { Slider as AntSlider } from
|
|
51
|
-
export { Space as AntSpace } from
|
|
52
|
-
export { Spin as AntSpin } from
|
|
53
|
-
export { Statistic as AntStatistic } from
|
|
54
|
-
export { Steps as AntSteps } from
|
|
55
|
-
export { Switch as AntSwitch } from
|
|
56
|
-
export { Table as AntTable } from
|
|
57
|
-
export { Tabs as AntTabs } from
|
|
58
|
-
export { Tag as AntTag } from
|
|
59
|
-
export { TimePicker as AntTimePicker } from
|
|
60
|
-
export { Timeline as AntTimeline } from
|
|
61
|
-
export { Tooltip as AntTooltip } from
|
|
62
|
-
export { Tour as AntTour } from
|
|
63
|
-
export { Transfer as AntTransfer } from
|
|
64
|
-
export { Tree as AntTree } from
|
|
65
|
-
export { TreeSelect as AntTreeSelect } from
|
|
66
|
-
export { Typography as AntTypography } from
|
|
67
|
-
export { Upload as AntUpload } from
|
|
68
|
-
export { Watermark as AntWatermark } from
|
|
1
|
+
export { Affix as AntAffix } from 'antd';
|
|
2
|
+
export { Alert as AntAlert } from 'antd';
|
|
3
|
+
export { Anchor as AntAnchor } from 'antd';
|
|
4
|
+
export { App as AntApp } from 'antd';
|
|
5
|
+
export { AutoComplete as AntAutoComplete } from 'antd';
|
|
6
|
+
export { Avatar as AntAvatar } from 'antd';
|
|
7
|
+
export { BackTop as AntBackTop } from 'antd';
|
|
8
|
+
export { Badge as AntBadge } from 'antd';
|
|
9
|
+
export { Breadcrumb as AntBreadcrumb } from 'antd';
|
|
10
|
+
export { Button as AntButton } from 'antd';
|
|
11
|
+
export { Calendar as AntCalendar } from 'antd';
|
|
12
|
+
export { Card as AntCard } from 'antd';
|
|
13
|
+
export { Carousel as AntCarousel } from 'antd';
|
|
14
|
+
export { Cascader as AntCascader } from 'antd';
|
|
15
|
+
export { Checkbox as AntCheckbox } from 'antd';
|
|
16
|
+
export { Col as AntCol } from 'antd';
|
|
17
|
+
export { Collapse as AntCollapse } from 'antd';
|
|
18
|
+
export { ColorPicker as AntColorPicker } from 'antd';
|
|
19
|
+
export { ConfigProvider as AntConfigProvider } from 'antd';
|
|
20
|
+
export { DatePicker as AntDatePicker } from 'antd';
|
|
21
|
+
export { Descriptions as AntDescriptions } from 'antd';
|
|
22
|
+
export { Divider as AntDivider } from 'antd';
|
|
23
|
+
export { Drawer as AntDrawer } from 'antd';
|
|
24
|
+
export { Dropdown as AntDropdown } from 'antd';
|
|
25
|
+
export { Empty as AntEmpty } from 'antd';
|
|
26
|
+
export { Flex as AntFlex } from 'antd';
|
|
27
|
+
export { FloatButton as AntFloatButton } from 'antd';
|
|
28
|
+
export { Form as AntForm } from 'antd';
|
|
29
|
+
export { Grid as AntGrid } from 'antd';
|
|
30
|
+
export { Image as AntImage } from 'antd';
|
|
31
|
+
export { Input as AntInput } from 'antd';
|
|
32
|
+
export { InputNumber as AntInputNumber } from 'antd';
|
|
33
|
+
export { Layout as AntLayout } from 'antd';
|
|
34
|
+
export { List as AntList } from 'antd';
|
|
35
|
+
export { Mentions as AntMentions } from 'antd';
|
|
36
|
+
export { Menu as AntMenu } from 'antd';
|
|
37
|
+
export { Modal as AntModal } from 'antd';
|
|
38
|
+
export { Pagination as AntPagination } from 'antd';
|
|
39
|
+
export { Popconfirm as AntPopconfirm } from 'antd';
|
|
40
|
+
export { Popover as AntPopover } from 'antd';
|
|
41
|
+
export { Progress as AntProgress } from 'antd';
|
|
42
|
+
export { QRCode as AntQRCode } from 'antd';
|
|
43
|
+
export { Radio as AntRadio } from 'antd';
|
|
44
|
+
export { Rate as AntRate } from 'antd';
|
|
45
|
+
export { Result as AntResult } from 'antd';
|
|
46
|
+
export { Row as AntRow } from 'antd';
|
|
47
|
+
export { Segmented as AntSegmented } from 'antd';
|
|
48
|
+
export { Select as AntSelect } from 'antd';
|
|
49
|
+
export { Skeleton as AntSkeleton } from 'antd';
|
|
50
|
+
export { Slider as AntSlider } from 'antd';
|
|
51
|
+
export { Space as AntSpace } from 'antd';
|
|
52
|
+
export { Spin as AntSpin } from 'antd';
|
|
53
|
+
export { Statistic as AntStatistic } from 'antd';
|
|
54
|
+
export { Steps as AntSteps } from 'antd';
|
|
55
|
+
export { Switch as AntSwitch } from 'antd';
|
|
56
|
+
export { Table as AntTable } from 'antd';
|
|
57
|
+
export { Tabs as AntTabs } from 'antd';
|
|
58
|
+
export { Tag as AntTag } from 'antd';
|
|
59
|
+
export { TimePicker as AntTimePicker } from 'antd';
|
|
60
|
+
export { Timeline as AntTimeline } from 'antd';
|
|
61
|
+
export { Tooltip as AntTooltip } from 'antd';
|
|
62
|
+
export { Tour as AntTour } from 'antd';
|
|
63
|
+
export { Transfer as AntTransfer } from 'antd';
|
|
64
|
+
export { Tree as AntTree } from 'antd';
|
|
65
|
+
export { TreeSelect as AntTreeSelect } from 'antd';
|
|
66
|
+
export { Typography as AntTypography } from 'antd';
|
|
67
|
+
export { Upload as AntUpload } from 'antd';
|
|
68
|
+
export { Watermark as AntWatermark } from 'antd';
|
package/dist/Kit/App/index.d.ts
CHANGED
package/dist/Kit/App/index.js
CHANGED
|
@@ -2,14 +2,15 @@ import "react/jsx-runtime";
|
|
|
2
2
|
import "react";
|
|
3
3
|
import "antd";
|
|
4
4
|
import "../../chunks/SnackBarProvider.xMKXdZ88.js";
|
|
5
|
-
import { K as
|
|
5
|
+
import { K as l } from "../../chunks/index._m3_6N04.js";
|
|
6
6
|
import "../../theme/utils/tokens-mapper/index.js";
|
|
7
7
|
import "../../translation/utils/index.js";
|
|
8
|
-
import "../../chunks/
|
|
8
|
+
import "../../chunks/useKitLocale.96CdK3og.js";
|
|
9
9
|
import "../DataDisplay/Avatar/index.js";
|
|
10
10
|
import "../DataDisplay/Badge/index.js";
|
|
11
11
|
import "../DataDisplay/Empty/index.js";
|
|
12
12
|
import "../DataDisplay/IdCard/index.js";
|
|
13
|
+
import "../DataDisplay/Image/index.js";
|
|
13
14
|
import "../DataDisplay/Table/index.js";
|
|
14
15
|
import "../DataDisplay/Tabs/index.js";
|
|
15
16
|
import "../DataDisplay/Tree/index.js";
|
|
@@ -17,5 +18,5 @@ import "../DataDisplay/Tooltip/index.js";
|
|
|
17
18
|
import "../../chunks/useKitTheme.KSAU-Pdv.js";
|
|
18
19
|
import "classnames";
|
|
19
20
|
export {
|
|
20
|
-
|
|
21
|
+
l as KitApp
|
|
21
22
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import "antd";
|
|
4
|
-
import "../../../chunks/
|
|
4
|
+
import "../../../chunks/useKitLocale.96CdK3og.js";
|
|
5
5
|
import "../../../chunks/useKitTheme.KSAU-Pdv.js";
|
|
6
6
|
import "../../General/Button/index.js";
|
|
7
7
|
import "../../General/Typography/index.js";
|
|
@@ -13,7 +13,7 @@ import "color-string";
|
|
|
13
13
|
import "lodash/isEmpty";
|
|
14
14
|
import "classnames";
|
|
15
15
|
import "../../../chunks/styles.module.Q_QQjQdX.js";
|
|
16
|
-
import { c as n } from "../../../chunks/index.
|
|
16
|
+
import { c as n } from "../../../chunks/index._m3_6N04.js";
|
|
17
17
|
import "../../Feedback/Alert/index.js";
|
|
18
18
|
import "../../Feedback/Progress/index.js";
|
|
19
19
|
import "../../Feedback/Loader/index.js";
|