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.
Files changed (138) hide show
  1. package/CHANGELOG.md +13 -2
  2. package/README.md +96 -95
  3. package/dist/Kit/Ant/index.d.ts +68 -68
  4. package/dist/Kit/App/index.d.ts +0 -1
  5. package/dist/Kit/App/index.js +4 -3
  6. package/dist/Kit/DataDisplay/Collapse/index.js +1 -1
  7. package/dist/Kit/DataDisplay/Empty/index.js +1 -1
  8. package/dist/Kit/DataDisplay/Error/index.js +2 -2
  9. package/dist/Kit/DataDisplay/Image/index.js +22 -8
  10. package/dist/Kit/DataDisplay/ItemCard/index.js +1 -1
  11. package/dist/Kit/DataDisplay/ItemList/index.js +2 -2
  12. package/dist/Kit/DataDisplay/RedirectCard/index.js +1 -1
  13. package/dist/Kit/DataDisplay/Tabs/index.js +1 -1
  14. package/dist/Kit/DataDisplay/Tag/index.js +1 -1
  15. package/dist/Kit/DataDisplay/Tree/index.js +1 -1
  16. package/dist/Kit/DataDisplay/index.js +4 -4
  17. package/dist/Kit/DataEntry/AutoComplete/index.js +2 -2
  18. package/dist/Kit/DataEntry/Checkbox/index.js +1 -1
  19. package/dist/Kit/DataEntry/ColorPicker/index.js +2 -2
  20. package/dist/Kit/DataEntry/DatePicker/index.js +1 -1
  21. package/dist/Kit/DataEntry/Input/index.js +2 -2
  22. package/dist/Kit/DataEntry/InputNumber/index.js +19 -15
  23. package/dist/Kit/DataEntry/InputWrapper/index.js +1 -1
  24. package/dist/Kit/DataEntry/Radio/index.js +2 -2
  25. package/dist/Kit/DataEntry/Rate/index.js +1 -1
  26. package/dist/Kit/DataEntry/RichText/EditorContentCharacterCount/index.d.ts +3 -0
  27. package/dist/Kit/DataEntry/RichText/EditorContentCharacterCount/index.js +16 -0
  28. package/dist/Kit/DataEntry/RichText/EditorContentCharacterCount/types.d.ts +8 -0
  29. package/dist/Kit/DataEntry/RichText/MenuBar/ButtonTooltip/index.d.ts +3 -0
  30. package/dist/Kit/DataEntry/RichText/MenuBar/ButtonTooltip/index.js +17 -0
  31. package/dist/Kit/DataEntry/RichText/MenuBar/ButtonTooltip/types.d.ts +3 -0
  32. package/dist/Kit/DataEntry/RichText/MenuBar/FontSizeSelect/index.d.ts +3 -0
  33. package/dist/Kit/DataEntry/RichText/MenuBar/FontSizeSelect/index.js +19 -0
  34. package/dist/Kit/DataEntry/RichText/MenuBar/FontSizeSelect/types.d.ts +17 -0
  35. package/dist/Kit/DataEntry/RichText/MenuBar/FontStylesButtons/index.d.ts +3 -0
  36. package/dist/Kit/DataEntry/RichText/MenuBar/FontStylesButtons/index.js +8 -0
  37. package/dist/Kit/DataEntry/RichText/MenuBar/FontStylesButtons/types.d.ts +5 -0
  38. package/dist/Kit/DataEntry/RichText/MenuBar/IndentListButtons/index.d.ts +3 -0
  39. package/dist/Kit/DataEntry/RichText/MenuBar/IndentListButtons/index.js +8 -0
  40. package/dist/Kit/DataEntry/RichText/MenuBar/IndentListButtons/types.d.ts +5 -0
  41. package/dist/Kit/DataEntry/RichText/MenuBar/LinkButton/LinkModal.d.ts +3 -0
  42. package/dist/Kit/DataEntry/RichText/MenuBar/LinkButton/getLinkMarkAtCursor.d.ts +3 -0
  43. package/dist/Kit/DataEntry/RichText/MenuBar/LinkButton/index.d.ts +3 -0
  44. package/dist/Kit/DataEntry/RichText/MenuBar/LinkButton/index.js +9 -0
  45. package/dist/Kit/DataEntry/RichText/MenuBar/LinkButton/types.d.ts +23 -0
  46. package/dist/Kit/DataEntry/RichText/MenuBar/ListButtons/index.d.ts +3 -0
  47. package/dist/Kit/DataEntry/RichText/MenuBar/ListButtons/index.js +8 -0
  48. package/dist/Kit/DataEntry/RichText/MenuBar/ListButtons/types.d.ts +5 -0
  49. package/dist/Kit/DataEntry/RichText/MenuBar/TextAlignButtons/index.d.ts +3 -0
  50. package/dist/Kit/DataEntry/RichText/MenuBar/TextAlignButtons/index.js +8 -0
  51. package/dist/Kit/DataEntry/RichText/MenuBar/TextAlignButtons/types.d.ts +5 -0
  52. package/dist/Kit/DataEntry/RichText/MenuBar/UndoRedoButtons/index.d.ts +3 -0
  53. package/dist/Kit/DataEntry/RichText/MenuBar/UndoRedoButtons/index.js +8 -0
  54. package/dist/Kit/DataEntry/RichText/MenuBar/UndoRedoButtons/types.d.ts +5 -0
  55. package/dist/Kit/DataEntry/RichText/MenuBar/getButtonActiveClass.d.ts +2 -0
  56. package/dist/Kit/DataEntry/RichText/MenuBar/index.d.ts +3 -0
  57. package/dist/Kit/DataEntry/RichText/MenuBar/index.js +13 -0
  58. package/dist/Kit/DataEntry/RichText/MenuBar/types.d.ts +5 -0
  59. package/dist/Kit/DataEntry/RichText/index.d.ts +3 -0
  60. package/dist/Kit/DataEntry/RichText/index.js +25 -0
  61. package/dist/Kit/DataEntry/RichText/types.d.ts +24 -0
  62. package/dist/Kit/DataEntry/Select/index.js +2 -2
  63. package/dist/Kit/DataEntry/Slider/index.js +1 -1
  64. package/dist/Kit/DataEntry/Switch/index.js +1 -1
  65. package/dist/Kit/DataEntry/index.d.ts +1 -0
  66. package/dist/Kit/DataEntry/index.js +16 -15
  67. package/dist/Kit/Feedback/Alert/Alert.d.ts +4 -0
  68. package/dist/Kit/Feedback/Alert/AlertDetails.d.ts +4 -0
  69. package/dist/Kit/Feedback/Alert/index.d.ts +2 -3
  70. package/dist/Kit/Feedback/Alert/index.js +49 -21
  71. package/dist/Kit/Feedback/Alert/types.d.ts +23 -2
  72. package/dist/Kit/Feedback/Modal/index.js +1 -1
  73. package/dist/Kit/Feedback/Notification/index.js +1 -1
  74. package/dist/Kit/Feedback/Skeleton/index.js +1 -1
  75. package/dist/Kit/Feedback/SnackBar/index.js +1 -1
  76. package/dist/Kit/Feedback/index.js +2 -2
  77. package/dist/Kit/General/Typography/index.js +1 -1
  78. package/dist/Kit/Layout/Grid/Col.d.ts +1 -2
  79. package/dist/Kit/Layout/Grid/Row.d.ts +1 -2
  80. package/dist/Kit/Layout/Grid/index.js +7 -2
  81. package/dist/Kit/Layout/Grid/types.d.ts +7 -38
  82. package/dist/Kit/Layout/PageLayout/index.js +1 -1
  83. package/dist/Kit/Layout/index.js +10 -9
  84. package/dist/Kit/Navigation/Header/index.js +1 -1
  85. package/dist/Kit/Navigation/Menu/index.js +1 -1
  86. package/dist/Kit/Navigation/PageHeader/index.js +1 -1
  87. package/dist/Kit/Navigation/SideMenu/index.js +2 -2
  88. package/dist/Kit/Navigation/index.js +3 -3
  89. package/dist/Kit/index.js +153 -152
  90. package/dist/assets/InputWrapper.css +1 -1
  91. package/dist/assets/index10.css +1 -1
  92. package/dist/assets/index11.css +1 -1
  93. package/dist/assets/index19.css +1 -1
  94. package/dist/assets/index24.css +1 -1
  95. package/dist/assets/index25.css +1 -1
  96. package/dist/assets/index26.css +1 -1
  97. package/dist/assets/index27.css +1 -1
  98. package/dist/assets/index28.css +1 -1
  99. package/dist/assets/index29.css +1 -1
  100. package/dist/assets/index3.css +1 -1
  101. package/dist/assets/index30.css +1 -1
  102. package/dist/assets/index31.css +1 -0
  103. package/dist/assets/index4.css +1 -1
  104. package/dist/assets/index5.css +1 -1
  105. package/dist/assets/index6.css +1 -1
  106. package/dist/assets/index7.css +1 -1
  107. package/dist/assets/index8.css +1 -1
  108. package/dist/assets/index9.css +1 -1
  109. package/dist/chunks/{InputWrapper.tJodbKzs.js → InputWrapper.RBqyXNPY.js} +3 -3
  110. package/dist/chunks/{KitNotification.m5Z-BPRz.js → KitNotification.Upa9d8P8.js} +1 -1
  111. package/dist/chunks/index._m3_6N04.js +1089 -0
  112. package/dist/chunks/useKitLocale.96CdK3og.js +11 -0
  113. package/dist/index.es.js +143 -141
  114. package/dist/index.umd.js +5 -47
  115. package/dist/theme/theme-context.d.ts +0 -1
  116. package/dist/translation/en-US/components/Alert/index.d.ts +2 -0
  117. package/dist/translation/en-US/components/Alert/index.js +6 -0
  118. package/dist/translation/en-US/components/DataEntry/RichText/index.d.ts +2 -0
  119. package/dist/translation/en-US/components/DataEntry/RichText/index.js +30 -0
  120. package/dist/translation/en-US/general/index.js +3 -1
  121. package/dist/translation/en-US/index.js +13 -9
  122. package/dist/translation/fr-FR/components/DataEntry/RichText/index.d.ts +2 -0
  123. package/dist/translation/fr-FR/components/DataEntry/RichText/index.js +30 -0
  124. package/dist/translation/fr-FR/components/Feedback/Alert/index.d.ts +2 -0
  125. package/dist/translation/fr-FR/components/Feedback/Alert/index.js +6 -0
  126. package/dist/translation/fr-FR/general/index.js +3 -1
  127. package/dist/translation/fr-FR/index.js +7 -3
  128. package/dist/translation/types/components/DataEntry/RichText/index.d.ts +27 -0
  129. package/dist/translation/types/components/Feedback/Alert/index.d.ts +3 -0
  130. package/dist/translation/types/general/index.d.ts +2 -0
  131. package/dist/translation/types/index.d.ts +4 -0
  132. package/package.json +16 -2
  133. package/dist/Kit/Layout/Grid/Grid.d.ts +0 -3
  134. package/dist/Kit/Layout/Grid/GridContext.d.ts +0 -10
  135. package/dist/Kit/Layout/Grid/GridStyle.d.ts +0 -8
  136. package/dist/Kit/Layout/Grid/useGridContext.d.ts +0 -1
  137. package/dist/chunks/index.1blqoZQ8.js +0 -963
  138. 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
- - [Getting Started](#getting-started)
15
- - [Prerequisites](#prerequisites)
16
- - [Installation](#installation)
17
- - [Usage in a project](#usage-in-a-project)
18
- - [Development](#development)
19
- - [Code structure](#code-structure)
20
- - [Creating a component](#creating-a-component)
21
- - [Component code](#component-code)
22
- - [Component theming](#component-theming)
23
- - [Component documentation](#component-documentation)
24
- - [Nightly build](#nightly-build)
25
- - [Important](#important)
26
- - [Contributing](#contributing)
27
- - [Commit](#commit)
28
- - [Gitflow](#gitflow)
29
- - [Feature](#feature)
30
- - [Release](#release)
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
- * npm
37
+ - npm
39
38
 
40
39
  ```sh dark
41
40
  npm install npm@latest -g
42
41
  ```
43
42
 
44
- * yarn
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 "aristid-ds";
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 "aristid-ds";
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
- - 📁 aristid <span style="float: right;">(💡 Default theme use by `KitApp`)</span>
144
- - 📁 types <span style="float: right;">(💡 Themes types declaration)</span>
145
- - 📁 utils <span style="float: right;">(💡 All themes utils)</span>
146
- - 📁 theme-builder <span style="float: right;">(💡 Use to build active theme)</span>
147
- - 📁 tokens-mapper <span style="float: right;">(💡 Use to map our custom tokens with Antd tokens)</span>
148
- - theme-context.tsx
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
- - 📁 en-US <span style="float: right;">(💡 `en-US` custom tokens)</span>
151
- - 📁 fr-FR <span style="float: right;">(💡 `fr-FR` custom tokens)</span>
152
- - 📁 types <span style="float: right;">(💡 Translation types declaration)</span>
153
- - 📁 utils <span style="float: right;">(💡 All translation utils)</span>
154
- - locale-context.tsx
155
- - 📁 utils <span style="float: right;">(💡 All components utils)</span>
156
- - 📁 functions <span style="float: right;">(💡 Function use in several components)</span>
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
- - 📁 01-Design
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 <AntdTooltip {...tooltipProps} className={`${appId} ${styles['kit-tooltip']} ${tooltipProps.className ?? ''}`}/>;
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
- Every components **style** of the design system can be **override** by tokens.
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
- The `theme`folder is structure as same as the Kit folder.
247
- <br/>
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
- <br/>
254
- In this file, you have all the tokens type definition. The tokens follow some rules you can find here [TODO]
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
- 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.
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
- After that, go to file `src/theme/type/index.tsx`to add your component type. This files contains all components that can be override.
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
- 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.
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
- 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.
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
- <br/>
273
- Example of component mapper :
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
- After that, you have to add your component mapper to the global mapper in the file `src/theme/utils/tokens-mapper/index.tsx`.
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
- 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`.
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
- </br>
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
- This folder contains all required files to create component documentation.
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
- Create all examples needed in the documentation.
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
- 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.
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
- 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.
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
- When everything is setup, you have to run the tokens-generator script to generate all design tokens in the documentation.
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 | Description | Example |
500
- |---|---|---|
501
- | test | indicates any type of creation or alteration of test codes | Creation of unit tests |
502
- | feat | indicates the development of a new feature for the project. | Adding a service, functionality, endpoint, etc |
503
- | 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 |
504
- | 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… |
505
- | 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 |
506
- | 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 |
507
- | docs | used when there are changes in the project documentation | add information in the API documentation, change the README, etc |
508
- | build | used to indicate changes that affect the project build process or external dependencies | add/remove npm dependencies, etc… |
509
- | perf | indicates a change that improved system performance | change ForEach to While, etc… |
510
- | ci | used for changes in CI configuration files | Circle, Travis, BrowserStack, etc… |
511
- | revert | indicates the reversal of a previous commit |
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
- - main (💡 Stores the official release history)
528
- - develop (💡 Serves as an integration branch for features)
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
+ ```
@@ -1,68 +1,68 @@
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";
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';
@@ -6,5 +6,4 @@ export declare const KitApp: FunctionComponent<{
6
6
  locale?: IKitLocale;
7
7
  children?: ReactNode;
8
8
  id?: string;
9
- useMediaQueries?: boolean;
10
9
  }>;
@@ -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 k } from "../../chunks/index.1blqoZQ8.js";
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/index.qBmLATvd.js";
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
- k as KitApp
21
+ l as KitApp
21
22
  };
@@ -1,4 +1,4 @@
1
- import { b as e } from "../../../chunks/index.1blqoZQ8.js";
1
+ import { b as e } from "../../../chunks/index._m3_6N04.js";
2
2
  export {
3
3
  e as KitCollapse
4
4
  };
@@ -1,4 +1,4 @@
1
- import "../../../assets/index29.css";
1
+ import "../../../assets/index30.css";
2
2
  import { jsxs as e, jsx as a } from "react/jsx-runtime";
3
3
  import { Empty as m } from "antd";
4
4
  import { u } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
@@ -1,7 +1,7 @@
1
1
  import "react/jsx-runtime";
2
2
  import "react";
3
3
  import "antd";
4
- import "../../../chunks/index.qBmLATvd.js";
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.1blqoZQ8.js";
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";