@xola/ui-kit 2.0.0-1 → 2.0.0-100

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/index.css CHANGED
@@ -1,67 +1,82 @@
1
1
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");
2
+ @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap");
2
3
 
3
4
  @tailwind base;
4
5
  @tailwind components;
5
6
  @tailwind utilities;
6
7
 
7
- html {
8
- /* Never change this default! */
9
- font-size: 14px;
10
- }
8
+ @layer base {
9
+ html {
10
+ /* Never change this default! */
11
+ @apply text-black text-base;
12
+ }
11
13
 
12
- button:focus {
13
- @apply outline-none;
14
- }
14
+ a {
15
+ @apply text-primary hover:underline;
16
+ }
15
17
 
16
- h1 {
17
- @apply text-2xl; /* 24px */
18
- @apply font-bold;
19
- @apply leading-p1 tracking-tightest;
20
- }
18
+ button:focus {
19
+ @apply outline-none;
20
+ }
21
21
 
22
- h2 {
23
- @apply text-xl; /* 21px */
24
- @apply font-bold;
25
- @apply leading-p1 tracking-tightest;
26
- }
22
+ h1 {
23
+ @apply text-2xl; /* 24px */
24
+ @apply font-bold;
25
+ @apply leading-p1 tracking-tightest;
26
+ }
27
27
 
28
- h3 {
29
- @apply text-lg; /* 18px */
30
- @apply font-bold;
31
- @apply tracking-tightest;
32
- }
28
+ h2 {
29
+ @apply text-xl; /* 21px */
30
+ @apply font-bold;
31
+ @apply leading-p1 tracking-tightest;
32
+ }
33
33
 
34
- h4 {
35
- @apply text-md; /* 16 px */
36
- @apply leading-p2 tracking-tightest;
37
- }
34
+ h3 {
35
+ @apply text-lg; /* 18px */
36
+ @apply font-bold;
37
+ @apply tracking-tightest;
38
+ }
38
39
 
39
- h5 {
40
- @apply text-base; /* 14 px */
41
- @apply leading-p2 tracking-tightest;
42
- }
40
+ h4 {
41
+ @apply text-md; /* 16 px */
42
+ @apply leading-p2 tracking-tightest;
43
+ }
43
44
 
44
- h6 {
45
- @apply text-sm; /* 14 px */
46
- @apply leading-p3 tracking-tightest;
47
- }
45
+ h5 {
46
+ @apply text-base; /* 14 px */
47
+ @apply leading-p2 tracking-tightest;
48
+ }
48
49
 
49
- .p1 {
50
- @apply text-md; /* 16px */
51
- @apply leading-p1 tracking-tightest;
52
- }
50
+ h6 {
51
+ @apply text-sm; /* 14 px */
52
+ @apply leading-p3 tracking-tightest;
53
+ }
53
54
 
54
- .p2 {
55
- @apply text-base; /* 14px */
56
- @apply leading-p2 tracking-tightest;
57
- }
55
+ .p1 {
56
+ @apply text-md; /* 16px */
57
+ @apply leading-p1 tracking-tightest;
58
+ }
58
59
 
59
- .p3 {
60
- @apply text-sm; /* 12px */
61
- @apply leading-p3 tracking-tightest;
62
- }
60
+ .p2 {
61
+ @apply text-base; /* 14px */
62
+ @apply leading-p2 tracking-tightest;
63
+ }
64
+
65
+ .p3 {
66
+ @apply text-sm; /* 12px */
67
+ @apply leading-p3 tracking-tightest;
68
+ }
69
+
70
+ .ui-badge .icon {
71
+ position: relative;
72
+ top: -1px;
73
+ }
74
+
75
+ sup {
76
+ top: -7px;
77
+ }
63
78
 
64
- .badge .icon {
65
- position: relative;
66
- top: -1px;
79
+ .font-bold {
80
+ @apply antialiased;
81
+ }
67
82
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xola/ui-kit",
3
- "version": "2.0.0-1",
3
+ "version": "2.0.0-100",
4
4
  "description": "Xola UI Kit",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -9,65 +9,82 @@
9
9
  "tailwind.config.js",
10
10
  "postcss.config.js"
11
11
  ],
12
- "main": "./build/ui-kit.umd.js",
13
- "module": "./build/ui-kit.es.js",
12
+ "main": "build/ui-kit.umd.js",
13
+ "module": "build/ui-kit.mjs",
14
+ "types": "index.d.ts",
14
15
  "scripts": {
15
- "prepare": "vite build",
16
- "start": "start-storybook -p 6006 -s public",
17
- "dev": "start-storybook -p 6006 -s public --no-manager-cache",
18
- "storybook": "start-storybook -p 6006 -s public",
19
- "build": "vite build",
20
- "build:storybook": "build-storybook -s public",
21
- "xola-lint": "xola-lint",
22
- "lint": "xola-lint src",
23
- "lint:report": "xola-lint --reporter=json src > eslint_report.json && echo 'ESLint report saved to eslint_report.json'",
16
+ "prepare": "node scripts/prepare && vite build",
17
+ "start": "node scripts/prepare && start-storybook -p 6006 -s public",
18
+ "dev": "node scripts/prepare && start-storybook -p 6006 -s public --no-manager-cache",
19
+ "storybook": "node scripts/prepare && start-storybook -p 6006 -s public",
20
+ "build": "node scripts/prepare && vite build",
21
+ "watch": "npm run build -- --watch",
22
+ "clean": "rm -rf node_modules/.vite",
23
+ "build:storybook": "node scripts/prepare && build-storybook -s public",
24
+ "lint": "xola-lint --ignore src/stories src",
25
+ "lint:fix": "xola-lint --ignore src/stories src --fix",
26
+ "lint:report": "xola-lint --ignore src/stories src --reporter=json src > eslint_report.json && echo 'ESLint report saved to eslint_report.json'",
24
27
  "format": "prettier --write src",
25
- "test": "xola-lint && jest"
28
+ "test": "xola-lint && jest",
29
+ "chromatic": "chromatic --exit-zero-on-changes --build-script-name build:storybook"
26
30
  },
27
31
  "dependencies": {
28
- "@headlessui/react": "^1.2.0",
29
- "@tailwindcss/forms": "^0.3.3",
30
- "@tippyjs/react": "^4.2.5",
32
+ "@headlessui/react": "^1.4.0",
33
+ "@tailwindcss/forms": "^0.4.0",
34
+ "@tailwindcss/line-clamp": "^0.3.1",
35
+ "@tippyjs/react": "^4.2.6",
31
36
  "clsx": "^1.1.1",
32
- "downshift": "^6.1.3",
37
+ "dayjs": "^1.10.7",
38
+ "downshift": "^6.1.5",
33
39
  "get-user-locale": "^1.4.0",
34
- "google-libphonenumber": "^3.2.21",
35
- "mathjs": "^9.4.2",
40
+ "google-libphonenumber": "^3.2.22",
41
+ "nouislider-react": "^3.4.1",
36
42
  "prop-types": "^15.7.2",
37
- "react-hotkeys-hook": "^3.3.1",
38
- "tippy.js": "^6.3.1"
43
+ "react-day-picker": "^7.4.10",
44
+ "react-hot-toast": "^2.1.0",
45
+ "react-hotkeys-hook": "^3.4.0",
46
+ "react-json-view": "^1.21.3",
47
+ "react-select": "^5.1.0",
48
+ "storybook-addon-designs": "^6.3.1",
49
+ "tippy.js": "^6.3.1",
50
+ "typescript": "4.7"
39
51
  },
40
52
  "devDependencies": {
41
- "@babel/core": "^7.14.6",
42
- "@babel/preset-env": "^7.14.5",
43
- "@storybook/addon-actions": "^6.2.9",
44
- "@storybook/addon-essentials": "^6.2.9",
45
- "@storybook/addon-links": "^6.2.9",
53
+ "@babel/core": "^7.14.8",
54
+ "@babel/preset-env": "^7.15.6",
55
+ "@storybook/addon-actions": "^6.5.10",
56
+ "@storybook/addon-essentials": "^6.5.10",
57
+ "@storybook/addon-links": "^6.5.10",
46
58
  "@storybook/addon-postcss": "^2.0.0",
47
- "@storybook/addons": "^6.2.9",
48
- "@storybook/react": "^6.2.9",
49
- "@storybook/theming": "^6.2.9",
50
- "@xola/jslint": "0.0.2",
51
- "autoprefixer": "^10.2.6",
52
- "babel-jest": "^27.0.2",
59
+ "@storybook/addons": "^6.5.10",
60
+ "@storybook/react": "^6.5.10",
61
+ "@storybook/theming": "^6.5.10",
62
+ "@xola/jslint": "^2.1.2",
63
+ "autoprefixer": "^10.4.5",
64
+ "babel-jest": "^27.2.0",
53
65
  "babel-loader": "^8.2.2",
54
- "jest": "^27.0.4",
66
+ "chromatic": "^6.11.4",
67
+ "jest": "^27.2.0",
55
68
  "lodash": "^4.17.21",
56
- "postcss": "^8.3.4",
57
- "prettier": "^2.3.1",
69
+ "postcss": "^8.4.5",
70
+ "prettier": "^2.7.1",
71
+ "prettier-plugin-tailwindcss": "^0.1.13",
58
72
  "react": "^17.0.2",
59
73
  "react-dom": "^17.0.2",
60
74
  "storybook-css-modules-preset": "^1.1.1",
61
- "tailwindcss": "^2.1.4",
62
- "vite": "^2.3.7"
75
+ "tailwindcss": "^3.1.8",
76
+ "vite": "^3.0.8"
63
77
  },
64
78
  "peerDependencies": {
65
- "autoprefixer": "^10.2.5",
79
+ "autoprefixer": "^10.3.1",
66
80
  "lodash": "^4.17.21",
67
- "postcss": "^8.2.10",
81
+ "postcss": "^8.3.6",
68
82
  "react": "^17.0.2",
69
83
  "react-dom": "^17.0.2",
70
- "tailwindcss": "^2.1.1"
84
+ "tailwindcss": "^3.0.18"
85
+ },
86
+ "engines": {
87
+ "node": ">=16"
71
88
  },
72
89
  "prettier": {
73
90
  "semi": true,
@@ -77,6 +94,7 @@
77
94
  "bracketSpacing": true,
78
95
  "useTabs": false,
79
96
  "arrowParens": "always",
97
+ "bracketSameLine": false,
80
98
  "tabWidth": 4
81
99
  }
82
100
  }
@@ -8,6 +8,7 @@ const colors = {
8
8
  white: "#ffffff",
9
9
 
10
10
  gray: {
11
+ hover: "#F7F9FB",
11
12
  lighter: "#F0F2F4",
12
13
  light: "#E0E3E7",
13
14
  DEFAULT: "#BDC0C6",
@@ -20,47 +21,106 @@ const colors = {
20
21
  light: "#2979D0",
21
22
  DEFAULT: "#1352C6",
22
23
  dark: "#3467C4",
23
- darker: "#0E44A8", // TBD
24
+ darker: "#0E44A8",
25
+ },
26
+
27
+ turquoise: {
28
+ // TODO: We need other shades to match the scheme
29
+ DEFAULT: "#3FE2EE",
24
30
  },
25
31
 
26
32
  green: {
27
33
  lighter: "#E2FFEF",
34
+ lightish: "#C1F9D9",
28
35
  light: "#33E781",
29
36
  DEFAULT: "#27CE70",
30
37
  dark: "#23B965",
31
- darker: "#23B965", // TBD
38
+ darker: "#168848",
32
39
  },
33
40
 
34
41
  red: {
35
- lighter: "#FFEAEA",
42
+ lighter: "#FFF0F0",
43
+ lightish: "#FFE1E1",
36
44
  light: "#FFA1A1",
37
45
  DEFAULT: "#FF5A5A",
38
- dark: "#FF5A5A", // TBD
39
- darker: "#FF5A5A", // TBD
46
+ dark: "#E93737",
47
+ darker: "#CD1F1F",
40
48
  },
41
49
 
42
50
  yellow: {
43
51
  lighter: "#FFFAF0",
52
+ lightish: "#FFECC6",
44
53
  light: "#FFDB8E",
45
54
  DEFAULT: "#FFC03D",
46
- dark: "#FFC03D", // TBD
47
- darker: "#FFC03D", // TBD
55
+ dark: "#EBAA24",
56
+ darker: "#987122",
48
57
  },
49
58
 
50
59
  orange: {
51
60
  lighter: "#FFF1E7",
61
+ lightish: "#FFF1E7",
52
62
  light: "#FFB493",
53
63
  DEFAULT: "#FF9668",
54
- dark: "#FF9668", // TBD
55
- darker: "#FF9668", // TBD
64
+ dark: "#EC743F",
65
+ darker: "#ff7336", // Made up by Rushi till Barth gives us a color
56
66
  },
57
67
  };
58
68
 
69
+ const spacing = {
70
+ 0: "0px",
71
+ 0.25: "1px",
72
+ 0.5: "2px",
73
+ 0.75: "3px",
74
+ 1: "4px",
75
+ 1.5: "6px",
76
+ 2: "8px",
77
+ 2.5: "10px",
78
+ 3: "12px",
79
+ 3.5: "14px",
80
+ 4: "16px",
81
+ 4.5: "18px",
82
+ 5: "20px",
83
+ 6: "24px",
84
+ 7: "28px",
85
+ 7.5: "30px",
86
+ 8: "32px",
87
+ 9: "36px",
88
+ 10: "40px",
89
+ 11: "44px",
90
+ 12: "48px",
91
+ 14: "56px",
92
+ 15: "60px",
93
+ 16: "64px",
94
+ 20: "80px",
95
+ 24: "96px",
96
+ 25: "100px",
97
+ 28: "112px",
98
+ 30: "120px",
99
+ 32: "128px",
100
+ 36: "144px",
101
+ 40: "160px",
102
+ 44: "176px",
103
+ 48: "192px",
104
+ 50: "200px",
105
+ 52: "208px",
106
+ 56: "224px",
107
+ 60: "240px",
108
+ 64: "256px",
109
+ 65: "260px", // CODE REVIEW: Should switch to w-64 260px or use Barth's spacing here?
110
+ 72: "288px",
111
+ 75: "300px",
112
+ 80: "320px",
113
+ 82: "350px",
114
+ 96: "384px",
115
+ 100: "400px",
116
+ 105: "420px",
117
+ 125: "500px",
118
+ 150: "600px",
119
+ 140: "560px",
120
+ 200: "800px",
121
+ };
59
122
  module.exports = {
60
- mode: "jit",
61
- darkMode: false,
62
-
63
- purge: [
123
+ content: [
64
124
  "./src/**/*.js",
65
125
  "./src/**/*.jsx",
66
126
  "./src/**/*.ts",
@@ -69,6 +129,7 @@ module.exports = {
69
129
  ],
70
130
 
71
131
  theme: {
132
+ // Figma: https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%F0%9F%9B%A0-Xola-DS-Desktop-Master-%F0%9F%9B%A0?node-id=1885%3A51992
72
133
  colors: {
73
134
  ...colors,
74
135
 
@@ -81,48 +142,9 @@ module.exports = {
81
142
  caution: colors.orange,
82
143
  },
83
144
 
84
- spacing: {
85
- 0: "0px",
86
- px: "1px",
87
- 0.5: "2px",
88
- 0.75: "3px",
89
- 1: "4px",
90
- 1.5: "6px",
91
- 2: "8px",
92
- 2.5: "10px",
93
- 3: "12px",
94
- 3.5: "14px",
95
- 4: "16px",
96
- 5: "20px",
97
- 6: "24px",
98
- 7: "28px",
99
- 8: "32px",
100
- 9: "36px",
101
- 10: "40px",
102
- 11: "44px",
103
- 12: "48px",
104
- 14: "56px",
105
- 15: "60px",
106
- 16: "64px",
107
- 20: "80px",
108
- 24: "96px",
109
- 28: "112px",
110
- 32: "128px",
111
- 36: "144px",
112
- 40: "160px",
113
- 44: "176px",
114
- 48: "192px",
115
- 50: "200px",
116
- 52: "208px",
117
- 56: "224px",
118
- 60: "240px",
119
- 64: "256px",
120
- 72: "288px",
121
- 80: "320px",
122
- 82: "350px",
123
- 96: "384px",
124
- },
145
+ spacing,
125
146
 
147
+ // Figma: https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%F0%9F%9B%A0-Xola-DS-Desktop-Master-%F0%9F%9B%A0?node-id=1885%3A51905
126
148
  fontSize: {
127
149
  xs: "10px",
128
150
  sm: "12px", // Figma - Small, H6
@@ -134,15 +156,53 @@ module.exports = {
134
156
  "3xl": "38px", // Figma - H0
135
157
  },
136
158
 
159
+ borderRadius: {
160
+ none: "0px",
161
+ DEFAULT: "4px",
162
+ sm: "2px",
163
+ md: "6px",
164
+ lg: "8px",
165
+ xl: "12px",
166
+ "2xl": "16px",
167
+ full: "9999px",
168
+ },
169
+
170
+ // Figma: https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%F0%9F%9B%A0-Xola-DS-Desktop-Master-%F0%9F%9B%A0?node-id=1885%3A51905
137
171
  extend: {
138
172
  fontFamily: {
139
173
  sans: ["Inter", ...defaultTheme.fontFamily.sans],
174
+ mono: ["Roboto Mono", ...defaultTheme.fontFamily.mono],
140
175
  },
141
176
 
142
177
  // P1 - Big 16px 130%
143
178
  // P2 - Med 14px 130%
144
179
  // P3 - Small 12px 110%
145
180
  lineHeight: {
181
+ 0: "0px",
182
+ 0.25: "1px",
183
+ 0.5: "2px",
184
+ 0.75: "3px",
185
+ 1: "4px",
186
+ 1.5: "6px",
187
+ 2: "8px",
188
+ 2.5: "10px",
189
+ xs: "10px",
190
+ 3: "12px",
191
+ sm: "12px",
192
+ 3.5: "14px",
193
+ base: "14px",
194
+ 4: "16px",
195
+ md: "16px",
196
+ 4.5: "18px",
197
+ lg: "18px",
198
+ 5: "20px",
199
+ 6: "24px",
200
+ 7: "28px",
201
+ 8: "32px",
202
+ 9: "36px",
203
+ 10: "40px",
204
+ 11: "44px",
205
+ 12: "48px",
146
206
  p1: "130%",
147
207
  p2: "130%",
148
208
  p3: "110%",
@@ -151,10 +211,13 @@ module.exports = {
151
211
 
152
212
  letterSpacing: {
153
213
  tightest: "-.4px",
154
- // TODO: Other letter spacings are in EM and need to be coverted to px
214
+ // TODO: Other letter spacings are in EM and need to be converted to px
155
215
  },
216
+
217
+ minWidth: spacing,
218
+ maxWidth: spacing,
156
219
  },
157
220
  },
158
221
 
159
- plugins: [require("@tailwindcss/forms")],
222
+ plugins: [require("@tailwindcss/forms"), require("@tailwindcss/line-clamp")],
160
223
  };
Binary file
Binary file