@szum-tech/design-system 1.5.6 → 1.6.0
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 +9 -9
- package/components/Icons/index.d.ts +7 -0
- package/components/Icons/index.js +7 -0
- package/components/Icons/index.mjs +5 -0
- package/package.json +57 -56
- package/theme/global.css +1 -1
package/README.md
CHANGED
|
@@ -23,17 +23,17 @@ Szum-Tech Design System is available as an [npm package](https://www.npmjs.com/p
|
|
|
23
23
|
|
|
24
24
|
```shell
|
|
25
25
|
npm install @szum-tech/design-system
|
|
26
|
-
npm install -D tailwindcss
|
|
26
|
+
npm install -D tailwindcss
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
**yarn:**
|
|
30
30
|
|
|
31
31
|
```shell
|
|
32
32
|
yarn add @szum-tech/design-system
|
|
33
|
-
yarn add -D tailwindcss
|
|
33
|
+
yarn add -D tailwindcss
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
## Configuration
|
|
36
|
+
## Configuration
|
|
37
37
|
|
|
38
38
|
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:
|
|
39
39
|
|
|
@@ -56,7 +56,7 @@ module.exports = {
|
|
|
56
56
|
};
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
-
### 2. Import theme styles to CSS file with Tailwind directives
|
|
59
|
+
### 2. Import theme styles to CSS file with Tailwind directives
|
|
60
60
|
|
|
61
61
|
> 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))
|
|
62
62
|
|
|
@@ -70,22 +70,22 @@ module.exports = {
|
|
|
70
70
|
|
|
71
71
|
## Getting started
|
|
72
72
|
|
|
73
|
-
### Theme Provider
|
|
73
|
+
### Theme Provider
|
|
74
74
|
|
|
75
75
|
`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.
|
|
76
76
|
|
|
77
77
|
Here is an example of a basic app using `ThemeProvider` component:
|
|
78
78
|
|
|
79
79
|
```jsx
|
|
80
|
-
import * as React from
|
|
81
|
-
import { ThemeProvider } from
|
|
80
|
+
import * as React from "react";
|
|
81
|
+
import { ThemeProvider } from "@szum-tech/design-system";
|
|
82
82
|
|
|
83
|
-
function Providers({children}) {
|
|
83
|
+
function Providers({ children }) {
|
|
84
84
|
return <ThemeProvider>{children}</ThemeProvider>;
|
|
85
85
|
}
|
|
86
86
|
```
|
|
87
87
|
|
|
88
|
-
## Documentation
|
|
88
|
+
## Documentation
|
|
89
89
|
|
|
90
90
|
[Szum-Tech Design System](https://janszewczyk.github.io/design-system)
|
|
91
91
|
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
|
|
5
|
+
function t(o){return jsxRuntime.jsxs("svg",{viewBox:"0 0 18 18",xmlns:"http://www.w3.org/2000/svg",...o,children:[jsxRuntime.jsx("path",{d:"M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z",fillRule:"evenodd",fillOpacity:"1",fill:"#4285f4",stroke:"none"}),jsxRuntime.jsx("path",{d:"M9.003 18c2.43 0 4.467-.806 5.956-2.18L12.05 13.56c-.806.54-1.836.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z",fillRule:"evenodd",fillOpacity:"1",fill:"#34a853",stroke:"none"}),jsxRuntime.jsx("path",{d:"M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z",fillRule:"evenodd",fillOpacity:"1",fill:"#fbbc05",stroke:"none"}),jsxRuntime.jsx("path",{d:"M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.428 0 9.002 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z",fillRule:"evenodd",fillOpacity:"1",fill:"#ea4335",stroke:"none"})]})}
|
|
6
|
+
|
|
7
|
+
exports.GoogleIcon = t;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
function t(o){return jsxs("svg",{viewBox:"0 0 18 18",xmlns:"http://www.w3.org/2000/svg",...o,children:[jsx("path",{d:"M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z",fillRule:"evenodd",fillOpacity:"1",fill:"#4285f4",stroke:"none"}),jsx("path",{d:"M9.003 18c2.43 0 4.467-.806 5.956-2.18L12.05 13.56c-.806.54-1.836.86-3.047.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z",fillRule:"evenodd",fillOpacity:"1",fill:"#34a853",stroke:"none"}),jsx("path",{d:"M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z",fillRule:"evenodd",fillOpacity:"1",fill:"#fbbc05",stroke:"none"}),jsx("path",{d:"M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.428 0 9.002 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z",fillRule:"evenodd",fillOpacity:"1",fill:"#ea4335",stroke:"none"})]})}
|
|
4
|
+
|
|
5
|
+
export { t as GoogleIcon };
|
package/package.json
CHANGED
|
@@ -1,17 +1,66 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
2
|
+
"name": "@szum-tech/design-system",
|
|
3
|
+
"version": "1.6.0",
|
|
4
|
+
"description": "Szum-Tech design system with tailwindcss support",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"szum-tech",
|
|
7
|
+
"Szum-Tech",
|
|
8
|
+
"tailwindcss",
|
|
9
|
+
"react",
|
|
10
|
+
"javascript",
|
|
11
|
+
"theme",
|
|
12
|
+
"typescript",
|
|
13
|
+
"react-components",
|
|
14
|
+
"storybook",
|
|
15
|
+
"design-system",
|
|
16
|
+
"semantic-release"
|
|
17
|
+
],
|
|
18
|
+
"homepage": "https://github.com/JanSzewczyk/design-system#readme",
|
|
3
19
|
"bugs": {
|
|
4
20
|
"url": "https://github.com/JanSzewczyk/design-system/issues"
|
|
5
21
|
},
|
|
6
|
-
"
|
|
22
|
+
"repository": {
|
|
23
|
+
"type": "git",
|
|
24
|
+
"url": "git+https://github.com/JanSzewczyk/design-system.git"
|
|
25
|
+
},
|
|
26
|
+
"license": "MIT",
|
|
27
|
+
"author": "Jan Szewczyk (Szum-Tech)",
|
|
28
|
+
"sideEffects": false,
|
|
29
|
+
"main": "./index.js",
|
|
30
|
+
"module": "./index.mjs",
|
|
31
|
+
"types": "./index.d.ts",
|
|
32
|
+
"files": [
|
|
33
|
+
"index.*",
|
|
34
|
+
"components/**",
|
|
35
|
+
"hooks/**",
|
|
36
|
+
"contexts/**",
|
|
37
|
+
"theme/**"
|
|
38
|
+
],
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "tsup && cpy './src/theme/global.css' './theme' --flat",
|
|
41
|
+
"clean": "rm -rf node_modules && yarn clear:build",
|
|
42
|
+
"clear:build": "rm -rf components && rm -rf contexts && rm -rf hooks && rm -rf theme && rm -rf index.*",
|
|
43
|
+
"dev": "concurrently \"npm run dev:css\" \"npm run dev:build\"",
|
|
44
|
+
"dev:build": "tsup",
|
|
45
|
+
"dev:css": "tailwindcss -w -i src/theme/global.css -o src/styles/default.css",
|
|
46
|
+
"prettier:check": "prettier --check .",
|
|
47
|
+
"prettier:write": "prettier --write .",
|
|
48
|
+
"semantic-release": "semantic-release",
|
|
49
|
+
"storybook": "storybook dev -p 6006 -s public",
|
|
50
|
+
"storybook:build": "storybook build --docs",
|
|
51
|
+
"storybook:prebuild": "tailwindcss -i src/theme/global.css -o src/styles/default.css",
|
|
52
|
+
"storybook:serve": "serve storybook-static",
|
|
53
|
+
"type-check": "tsc --noEmit"
|
|
54
|
+
},
|
|
7
55
|
"dependencies": {
|
|
8
|
-
"@
|
|
56
|
+
"@tailwindcss/container-queries": "^0.1.0",
|
|
9
57
|
"class-variance-authority": "^0.4.0",
|
|
10
58
|
"tailwind-scrollbar": "^3.0.0",
|
|
11
59
|
"tailwindcss": "^3.2.7"
|
|
12
60
|
},
|
|
13
61
|
"devDependencies": {
|
|
14
62
|
"@babel/core": "^7.19.6",
|
|
63
|
+
"@heroicons/react": "^2.0.16",
|
|
15
64
|
"@storybook/addon-a11y": "^7.0.0-beta.47",
|
|
16
65
|
"@storybook/addon-actions": "^7.0.0-beta.47",
|
|
17
66
|
"@storybook/addon-docs": "^7.0.0-beta.47",
|
|
@@ -23,11 +72,10 @@
|
|
|
23
72
|
"@storybook/react": "^7.0.0-beta.47",
|
|
24
73
|
"@storybook/react-vite": "^7.0.0-beta.47",
|
|
25
74
|
"@storybook/theming": "^7.0.0-beta.47",
|
|
75
|
+
"@szum-tech/prettier-config": "^1.1.1",
|
|
26
76
|
"@szum-tech/semantic-release-preset": "^1.3.0",
|
|
27
|
-
"@tailwindcss/container-queries": "^0.1.0",
|
|
28
77
|
"@testing-library/react": "^13.4.0",
|
|
29
78
|
"@testing-library/user-event": "^14.4.3",
|
|
30
|
-
"@types/prettier": "^2.7.1",
|
|
31
79
|
"@types/react": "^18.0.24",
|
|
32
80
|
"@types/react-dom": "^18.0.8",
|
|
33
81
|
"@types/semantic-release": "^17.2.4",
|
|
@@ -37,7 +85,7 @@
|
|
|
37
85
|
"concurrently": "^7.6.0",
|
|
38
86
|
"cpy-cli": "^4.2.0",
|
|
39
87
|
"postcss": "^8.4.18",
|
|
40
|
-
"prettier": "^2.7
|
|
88
|
+
"prettier": "^2.8.7",
|
|
41
89
|
"prettier-plugin-tailwindcss": "^0.1.13",
|
|
42
90
|
"react": "^18.2.0",
|
|
43
91
|
"react-docgen": "^5.4.3",
|
|
@@ -52,58 +100,11 @@
|
|
|
52
100
|
"typescript": "^4.9.5",
|
|
53
101
|
"vite": "^4.1.2"
|
|
54
102
|
},
|
|
55
|
-
"files": [
|
|
56
|
-
"index.*",
|
|
57
|
-
"components/**",
|
|
58
|
-
"hooks/**",
|
|
59
|
-
"contexts/**",
|
|
60
|
-
"theme/**"
|
|
61
|
-
],
|
|
62
|
-
"homepage": "https://github.com/JanSzewczyk/design-system#readme",
|
|
63
|
-
"keywords": [
|
|
64
|
-
"szum-tech",
|
|
65
|
-
"Szum-Tech",
|
|
66
|
-
"tailwindcss",
|
|
67
|
-
"react",
|
|
68
|
-
"javascript",
|
|
69
|
-
"theme",
|
|
70
|
-
"typescript",
|
|
71
|
-
"react-components",
|
|
72
|
-
"storybook",
|
|
73
|
-
"design-system",
|
|
74
|
-
"semantic-release"
|
|
75
|
-
],
|
|
76
|
-
"license": "MIT",
|
|
77
|
-
"main": "./index.js",
|
|
78
|
-
"name": "@szum-tech/design-system",
|
|
79
|
-
"module": "./index.mjs",
|
|
80
|
-
"publishConfig": {
|
|
81
|
-
"access": "public"
|
|
82
|
-
},
|
|
83
|
-
"repository": {
|
|
84
|
-
"type": "git",
|
|
85
|
-
"url": "git+https://github.com/JanSzewczyk/design-system.git"
|
|
86
|
-
},
|
|
87
|
-
"scripts": {
|
|
88
|
-
"build": "tsup && cpy './src/theme/global.css' './theme' --flat",
|
|
89
|
-
"typecheck": "tsc --noEmit",
|
|
90
|
-
"clean": "rm -rf node_modules && yarn clear:build",
|
|
91
|
-
"clear:build": "rm -rf components && rm -rf contexts && rm -rf hooks && rm -rf theme && rm -rf index.*",
|
|
92
|
-
"dev": "concurrently \"npm run dev:css\" \"npm run dev:build\"",
|
|
93
|
-
"dev:build": "tsup src/index.tsx --format esm,cjs --watch --dts --external react,react-dom",
|
|
94
|
-
"dev:css": "tailwindcss -w -i src/theme/global.css -o src/styles/default.css",
|
|
95
|
-
"semantic-release": "semantic-release",
|
|
96
|
-
"storybook": "storybook dev -p 6006 -s public",
|
|
97
|
-
"storybook:prebuild": "tailwindcss -i src/theme/global.css -o src/styles/default.css",
|
|
98
|
-
"storybook:build": "storybook build --docs",
|
|
99
|
-
"storybook:serve": "serve storybook-static"
|
|
100
|
-
},
|
|
101
|
-
"sideEffects": false,
|
|
102
|
-
"types": "./index.d.ts",
|
|
103
|
-
"version": "1.5.6",
|
|
104
103
|
"peerDependencies": {
|
|
105
|
-
"@tailwindcss/container-queries": "^0.1.0",
|
|
106
104
|
"react": "^18.2.0",
|
|
107
105
|
"tailwindcss": "^3.2.7"
|
|
106
|
+
},
|
|
107
|
+
"publishConfig": {
|
|
108
|
+
"access": "public"
|
|
108
109
|
}
|
|
109
110
|
}
|