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

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 (7) hide show
  1. package/README.md +87 -31
  2. package/build/style.css +1 -1
  3. package/build/ui-kit.es.js +1 -1
  4. package/build/ui-kit.umd.js +1 -1
  5. package/index.css +5 -1
  6. package/package.json +42 -34
  7. package/tailwind.config.js +52 -10
package/index.css CHANGED
@@ -61,7 +61,11 @@ h6 {
61
61
  @apply leading-p3 tracking-tightest;
62
62
  }
63
63
 
64
- .badge .icon {
64
+ .ui-badge .icon {
65
65
  position: relative;
66
66
  top: -1px;
67
67
  }
68
+
69
+ .font-bold {
70
+ @apply antialiased;
71
+ }
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-13",
4
4
  "description": "Xola UI Kit",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -9,65 +9,73 @@
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.es.js",
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",
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",
22
24
  "lint": "xola-lint src",
25
+ "lint:fix": "xola-lint src --fix",
23
26
  "lint:report": "xola-lint --reporter=json src > eslint_report.json && echo 'ESLint report saved to eslint_report.json'",
24
27
  "format": "prettier --write src",
25
28
  "test": "xola-lint && jest"
26
29
  },
27
30
  "dependencies": {
28
- "@headlessui/react": "^1.2.0",
31
+ "@headlessui/react": "^1.4.0",
29
32
  "@tailwindcss/forms": "^0.3.3",
33
+ "@tailwindcss/line-clamp": "^0.2.1",
30
34
  "@tippyjs/react": "^4.2.5",
31
35
  "clsx": "^1.1.1",
32
- "downshift": "^6.1.3",
36
+ "dayjs": "^1.10.7",
37
+ "downshift": "^6.1.5",
33
38
  "get-user-locale": "^1.4.0",
34
- "google-libphonenumber": "^3.2.21",
35
- "mathjs": "^9.4.2",
39
+ "google-libphonenumber": "^3.2.22",
40
+ "mathjs": "^9.4.4",
36
41
  "prop-types": "^15.7.2",
37
- "react-hotkeys-hook": "^3.3.1",
42
+ "react-day-picker": "^7.4.10",
43
+ "react-hot-toast": "^2.1.0",
44
+ "react-hotkeys-hook": "^3.4.0",
45
+ "react-select": "^5.1.0",
38
46
  "tippy.js": "^6.3.1"
39
47
  },
40
48
  "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",
49
+ "@babel/core": "^7.14.8",
50
+ "@babel/preset-env": "^7.15.6",
51
+ "@storybook/addon-actions": "^6.3.10",
52
+ "@storybook/addon-essentials": "^6.3.10",
53
+ "@storybook/addon-links": "^6.3.10",
46
54
  "@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",
55
+ "@storybook/addons": "^6.3.10",
56
+ "@storybook/react": "^6.3.10",
57
+ "@storybook/theming": "^6.3.10",
58
+ "@xola/jslint": "^1.0.0",
59
+ "autoprefixer": "^10.3.1",
60
+ "babel-jest": "^27.2.0",
53
61
  "babel-loader": "^8.2.2",
54
- "jest": "^27.0.4",
62
+ "jest": "^27.2.0",
55
63
  "lodash": "^4.17.21",
56
- "postcss": "^8.3.4",
57
- "prettier": "^2.3.1",
64
+ "postcss": "^8.3.6",
65
+ "prettier": "^2.4.0",
58
66
  "react": "^17.0.2",
59
67
  "react-dom": "^17.0.2",
60
68
  "storybook-css-modules-preset": "^1.1.1",
61
- "tailwindcss": "^2.1.4",
62
- "vite": "^2.3.7"
69
+ "tailwindcss": "^2.2.15",
70
+ "vite": "^2.5.7"
63
71
  },
64
72
  "peerDependencies": {
65
- "autoprefixer": "^10.2.5",
73
+ "autoprefixer": "^10.3.1",
66
74
  "lodash": "^4.17.21",
67
- "postcss": "^8.2.10",
75
+ "postcss": "^8.3.6",
68
76
  "react": "^17.0.2",
69
77
  "react-dom": "^17.0.2",
70
- "tailwindcss": "^2.1.1"
78
+ "tailwindcss": "^2.2.7"
71
79
  },
72
80
  "prettier": {
73
81
  "semi": true,
package/tailwind.config.js CHANGED
@@ -20,7 +20,7 @@ const colors = {
20
20
  light: "#2979D0",
21
21
  DEFAULT: "#1352C6",
22
22
  dark: "#3467C4",
23
- darker: "#0E44A8", // TBD
23
+ darker: "#0E44A8",
24
24
  },
25
25
 
26
26
  green: {
@@ -28,31 +28,31 @@ const colors = {
28
28
  light: "#33E781",
29
29
  DEFAULT: "#27CE70",
30
30
  dark: "#23B965",
31
- darker: "#23B965", // TBD
31
+ darker: "#1B8E4E", // Made up by Rushi till Barth gives us a color
32
32
  },
33
33
 
34
34
  red: {
35
35
  lighter: "#FFEAEA",
36
36
  light: "#FFA1A1",
37
37
  DEFAULT: "#FF5A5A",
38
- dark: "#FF5A5A", // TBD
39
- darker: "#FF5A5A", // TBD
38
+ dark: "#E93737",
39
+ darker: "#E51919", // Made up by Rushi till Barth gives us a color
40
40
  },
41
41
 
42
42
  yellow: {
43
43
  lighter: "#FFFAF0",
44
44
  light: "#FFDB8E",
45
45
  DEFAULT: "#FFC03D",
46
- dark: "#FFC03D", // TBD
47
- darker: "#FFC03D", // TBD
46
+ dark: "#EBAA24",
47
+ darker: "#F0A200", // Made up by Rushi till Barth gives us a color
48
48
  },
49
49
 
50
50
  orange: {
51
51
  lighter: "#FFF1E7",
52
52
  light: "#FFB493",
53
53
  DEFAULT: "#FF9668",
54
- dark: "#FF9668", // TBD
55
- darker: "#FF9668", // TBD
54
+ dark: "#EC743F",
55
+ darker: "#ff7336", // Made up by Rushi till Barth gives us a color
56
56
  },
57
57
  };
58
58
 
@@ -69,6 +69,7 @@ module.exports = {
69
69
  ],
70
70
 
71
71
  theme: {
72
+ // Figma: https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%F0%9F%9B%A0-Xola-DS-Desktop-Master-%F0%9F%9B%A0?node-id=1885%3A51992
72
73
  colors: {
73
74
  ...colors,
74
75
 
@@ -83,7 +84,7 @@ module.exports = {
83
84
 
84
85
  spacing: {
85
86
  0: "0px",
86
- px: "1px",
87
+ 0.25: "1px",
87
88
  0.5: "2px",
88
89
  0.75: "3px",
89
90
  1: "4px",
@@ -93,9 +94,11 @@ module.exports = {
93
94
  3: "12px",
94
95
  3.5: "14px",
95
96
  4: "16px",
97
+ 4.5: "18px",
96
98
  5: "20px",
97
99
  6: "24px",
98
100
  7: "28px",
101
+ 7.5: "30px",
99
102
  8: "32px",
100
103
  9: "36px",
101
104
  10: "40px",
@@ -106,6 +109,7 @@ module.exports = {
106
109
  16: "64px",
107
110
  20: "80px",
108
111
  24: "96px",
112
+ 25: "100px",
109
113
  28: "112px",
110
114
  32: "128px",
111
115
  36: "144px",
@@ -123,6 +127,7 @@ module.exports = {
123
127
  96: "384px",
124
128
  },
125
129
 
130
+ // Figma: https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%F0%9F%9B%A0-Xola-DS-Desktop-Master-%F0%9F%9B%A0?node-id=1885%3A51905
126
131
  fontSize: {
127
132
  xs: "10px",
128
133
  sm: "12px", // Figma - Small, H6
@@ -134,6 +139,18 @@ module.exports = {
134
139
  "3xl": "38px", // Figma - H0
135
140
  },
136
141
 
142
+ borderRadius: {
143
+ none: "0px",
144
+ DEFAULT: "4px",
145
+ sm: "2px",
146
+ md: "6px",
147
+ lg: "8px",
148
+ xl: "12px",
149
+ "2xl": "16px",
150
+ full: "9999px",
151
+ },
152
+
153
+ // Figma: https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%F0%9F%9B%A0-Xola-DS-Desktop-Master-%F0%9F%9B%A0?node-id=1885%3A51905
137
154
  extend: {
138
155
  fontFamily: {
139
156
  sans: ["Inter", ...defaultTheme.fontFamily.sans],
@@ -143,6 +160,31 @@ module.exports = {
143
160
  // P2 - Med 14px 130%
144
161
  // P3 - Small 12px 110%
145
162
  lineHeight: {
163
+ 0: "0px",
164
+ 0.25: "1px",
165
+ 0.5: "2px",
166
+ 0.75: "3px",
167
+ 1: "4px",
168
+ 1.5: "6px",
169
+ 2: "8px",
170
+ 2.5: "10px",
171
+ xs: "10px",
172
+ 3: "12px",
173
+ sm: "12px",
174
+ 3.5: "14px",
175
+ base: "14px",
176
+ 4: "16px",
177
+ md: "16px",
178
+ 4.5: "18px",
179
+ lg: "18px",
180
+ 5: "20px",
181
+ 6: "24px",
182
+ 7: "28px",
183
+ 8: "32px",
184
+ 9: "36px",
185
+ 10: "40px",
186
+ 11: "44px",
187
+ 12: "48px",
146
188
  p1: "130%",
147
189
  p2: "130%",
148
190
  p3: "110%",
@@ -156,5 +198,5 @@ module.exports = {
156
198
  },
157
199
  },
158
200
 
159
- plugins: [require("@tailwindcss/forms")],
201
+ plugins: [require("@tailwindcss/forms"), require("@tailwindcss/line-clamp")],
160
202
  };