@szum-tech/design-system 1.1.2 → 1.1.3
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 +97 -0
- package/package.json +9 -4
package/README.md
CHANGED
|
@@ -1,2 +1,99 @@
|
|
|
1
1
|
# Szum-Tech Design System
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
[](https://github.com/JanSzewczyk/design-system/pulls)
|
|
5
|
+
[](https://github.com/JanSzewczyk/design-system/issues)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
[](https://github.com/JanSzewczyk/design-system/actions/workflows/publish.yml)
|
|
9
|
+
[](https://github.com/JanSzewczyk/design-system/actions/workflows/gh-deploy.yml)
|
|
10
|
+
|
|
11
|
+
[](https://www.npmjs.com/package/@szum-tech/design-system)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
[](https://github.com/JanSzewczyk/design-system/blob/main/LICENSE)
|
|
15
|
+
|
|
16
|
+
Design system supported by [tailwindcss](https://tailwindcss.com/) library, it allows the creation of applications supporting light and dark themes, shares UI React Components and a color palette in compliance with the Szum-Tech standards.
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
Szum-Tech Design System is available as an [npm package](https://www.npmjs.com/package/@szum-tech/design-system).
|
|
21
|
+
|
|
22
|
+
**npm:**
|
|
23
|
+
|
|
24
|
+
```sh
|
|
25
|
+
npm install @szum-tech/design-system
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**yarn:**
|
|
29
|
+
|
|
30
|
+
```sh
|
|
31
|
+
yarn add @szum-tech/design-system
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Configuration
|
|
35
|
+
|
|
36
|
+
After installing the [@szum-tech/design-system](https://www.npmjs.com/package/@szum-tech/design-system) package in accordance with paragraph [Installation](#Installation), during [Tailwind initialization](https://tailwindcss.com/docs/installation), follow these steps:
|
|
37
|
+
|
|
38
|
+
### 1. Add preset to `tailwind.config.js` file
|
|
39
|
+
|
|
40
|
+
> Add path to `@szum-tech/design-system` UI Components files and add preset file to Tailwind configuration
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
/** @type {import('tailwindcss').Config} */
|
|
44
|
+
module.exports = {
|
|
45
|
+
content: [
|
|
46
|
+
"...",
|
|
47
|
+
"./node_modules/@szum-tech/design-system/**/*.{js,ts,jsx,tsx}"
|
|
48
|
+
],
|
|
49
|
+
theme: {
|
|
50
|
+
extend: {}
|
|
51
|
+
},
|
|
52
|
+
plugins: [],
|
|
53
|
+
presets: [require("@szum-tech/design-system/tailwind-preset")]
|
|
54
|
+
};
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### 2. Import theme styles to CSS file with Tailwind directives
|
|
58
|
+
|
|
59
|
+
> Import CSS file from `@szum-tech/design-system/theme` with colors palette for dark and light theme and default styles (see file with [theme styles](https://github.com/JanSzewczyk/design-system/blob/main/src/theme/global.css))
|
|
60
|
+
|
|
61
|
+
```css
|
|
62
|
+
@import "@szum-tech/design-system/theme/global.css";
|
|
63
|
+
|
|
64
|
+
@tailwind base;
|
|
65
|
+
@tailwind components;
|
|
66
|
+
@tailwind utilities;
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Getting started
|
|
70
|
+
|
|
71
|
+
### Theme Provider
|
|
72
|
+
|
|
73
|
+
`ThemeProvider` relies on the [context feature of React](https://reactjs.org/docs/context.html) to handle theme mode and pass it to components, so you need to make sure `ThemeProvider` is the parent of the components you are trying to customize.
|
|
74
|
+
|
|
75
|
+
Here is an example of a basic app using `ThemeProvider` component:
|
|
76
|
+
|
|
77
|
+
```jsx
|
|
78
|
+
import * as React from 'react';
|
|
79
|
+
import { ThemeProvider } from '@szum-tech/design-system';
|
|
80
|
+
|
|
81
|
+
function Providers({children}) {
|
|
82
|
+
return <ThemeProvider>{children}</ThemeProvider>;
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
## Documentation
|
|
89
|
+
|
|
90
|
+
[Szum-Tech Design System](https://janszewczyk.github.io/design-system)
|
|
91
|
+
|
|
92
|
+
## Changelog
|
|
93
|
+
|
|
94
|
+
The [changelog](https://github.com/JanSzewczyk/design-system/blob/main/CHANGELOG.md) is regularly updated to reflect what's changed in each new release.
|
|
95
|
+
|
|
96
|
+
## License
|
|
97
|
+
|
|
98
|
+
This project is licensed under the terms of the
|
|
99
|
+
[MIT license](https://github.com/JanSzewczyk/design-system/blob/main/LICENSE).
|
package/package.json
CHANGED
|
@@ -56,10 +56,15 @@
|
|
|
56
56
|
"keywords": [
|
|
57
57
|
"szum-tech",
|
|
58
58
|
"Szum-Tech",
|
|
59
|
-
"szum-tech design system",
|
|
60
59
|
"tailwindcss",
|
|
61
|
-
"
|
|
62
|
-
"
|
|
60
|
+
"react",
|
|
61
|
+
"javascript",
|
|
62
|
+
"theme",
|
|
63
|
+
"typescript",
|
|
64
|
+
"react-components",
|
|
65
|
+
"storybook",
|
|
66
|
+
"design-system",
|
|
67
|
+
"semantic-release"
|
|
63
68
|
],
|
|
64
69
|
"license": "MIT",
|
|
65
70
|
"main": "./dist/index.js",
|
|
@@ -87,7 +92,7 @@
|
|
|
87
92
|
},
|
|
88
93
|
"sideEffects": false,
|
|
89
94
|
"types": "./dist/index.d.ts",
|
|
90
|
-
"version": "1.1.
|
|
95
|
+
"version": "1.1.3",
|
|
91
96
|
"dependencies": {
|
|
92
97
|
"tailwind-scrollbar": "^2.0.1"
|
|
93
98
|
}
|