@kroo-web/design-system 1.0.16 → 1.0.18
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 +44 -0
- package/dist/cjs/index.d.ts +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/product/components/Button/button.stories.d.ts +8 -0
- package/dist/cjs/product/components/Button/button.test.d.ts +1 -0
- package/dist/cjs/product/components/Button/index.d.ts +19 -0
- package/dist/cjs/product/components/Form/index.d.ts +4 -0
- package/dist/cjs/product/components/NumberField/index.d.ts +15 -0
- package/dist/cjs/product/components/NumberField/numberField.stories.d.ts +6 -0
- package/dist/cjs/product/components/NumberField/numberField.test.d.ts +1 -0
- package/dist/cjs/product/components/RadioGroup/index.d.ts +16 -0
- package/dist/cjs/product/components/RadioGroup/radioGroup.stories.d.ts +13 -0
- package/dist/cjs/product/components/Range/index.d.ts +12 -0
- package/dist/cjs/product/components/Range/range.stories.d.ts +6 -0
- package/dist/cjs/product/components/Select/index.d.ts +25 -0
- package/dist/cjs/product/components/Select/select.stories.d.ts +6 -0
- package/dist/cjs/product/components/Select/select.test.d.ts +1 -0
- package/dist/cjs/product/components/TextField/index.d.ts +5 -7
- package/dist/cjs/product/components/TextField/textField.stories.d.ts +10 -0
- package/dist/cjs/product/components/TextField/textField.test.d.ts +1 -0
- package/dist/cjs/product/components/Typography/index.d.ts +7 -0
- package/dist/cjs/product/components/Typography/typography.stories.d.ts +12 -0
- package/dist/cjs/product/components/Typography/typography.test.d.ts +1 -0
- package/dist/cjs/product/components/index.d.ts +7 -1
- package/dist/cjs/types/PolymorphicWithoutRef.d.ts +7 -0
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/product/components/Button/button.stories.d.ts +8 -0
- package/dist/esm/product/components/Button/button.test.d.ts +1 -0
- package/dist/esm/product/components/Button/index.d.ts +19 -0
- package/dist/esm/product/components/Form/index.d.ts +4 -0
- package/dist/esm/product/components/NumberField/index.d.ts +15 -0
- package/dist/esm/product/components/NumberField/numberField.stories.d.ts +6 -0
- package/dist/esm/product/components/NumberField/numberField.test.d.ts +1 -0
- package/dist/esm/product/components/RadioGroup/index.d.ts +16 -0
- package/dist/esm/product/components/RadioGroup/radioGroup.stories.d.ts +13 -0
- package/dist/esm/product/components/Range/index.d.ts +12 -0
- package/dist/esm/product/components/Range/range.stories.d.ts +6 -0
- package/dist/esm/product/components/Select/index.d.ts +25 -0
- package/dist/esm/product/components/Select/select.stories.d.ts +6 -0
- package/dist/esm/product/components/Select/select.test.d.ts +1 -0
- package/dist/esm/product/components/TextField/index.d.ts +5 -7
- package/dist/esm/product/components/TextField/textField.stories.d.ts +10 -0
- package/dist/esm/product/components/TextField/textField.test.d.ts +1 -0
- package/dist/esm/product/components/Typography/index.d.ts +7 -0
- package/dist/esm/product/components/Typography/typography.stories.d.ts +12 -0
- package/dist/esm/product/components/Typography/typography.test.d.ts +1 -0
- package/dist/esm/product/components/index.d.ts +7 -1
- package/dist/esm/types/PolymorphicWithoutRef.d.ts +7 -0
- package/dist/styles/tokens/product.css +121 -3
- package/dist/types.d.ts +97 -8
- package/package.json +24 -10
- package/README.MD +0 -17
package/README.md
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# Kroo Web Component Lib / Design system
|
|
2
|
+
|
|
3
|
+
## Usage
|
|
4
|
+
|
|
5
|
+
First, install the package with whatever flavour of package manager that you would like.
|
|
6
|
+
|
|
7
|
+
### Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @kroo-web/design-system -S
|
|
11
|
+
```
|
|
12
|
+
or
|
|
13
|
+
```bash
|
|
14
|
+
yarn add @kroo-web/design-system -S
|
|
15
|
+
```
|
|
16
|
+
or
|
|
17
|
+
```bash
|
|
18
|
+
pnpm add @kroo-web/design-system -S
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Tokens
|
|
22
|
+
|
|
23
|
+
Next, add the following the highest up in your application, usually in the `App.js` or `index.js` file.
|
|
24
|
+
|
|
25
|
+
This adds the tokens used in the design system to the root of the application. (the css modules come prebundled in the build this step is only for the tokens and odd global styles included in the design system).
|
|
26
|
+
|
|
27
|
+
```jsx
|
|
28
|
+
import '@kroo-web/design-system/dist/styles/global.css';
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
That's all folks! You can now use the components in the design system in your application.
|
|
32
|
+
|
|
33
|
+
```jsx
|
|
34
|
+
import { TextField } from '@kroo-web/design-system';
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## Next Steps
|
|
39
|
+
|
|
40
|
+
This sways more on the side of component library rather than a design system due to the lack of tokens and living documentation. However, next steps would be to create a seperate package called @kroo-web/tokens allowing us to version the tokens and use them in the design system.
|
|
41
|
+
|
|
42
|
+
We could also use Token Studio with Figma to enable the designers to have control over the tokens allowing them to change the design system and see the changes in the design system in real time.
|
|
43
|
+
|
|
44
|
+
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './product/components';
|