@xola/ui-kit 2.0.0-10 → 2.0.0-101

package/index.css

@@ -1,71 +1,82 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap");
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-html {
-    /* Never change this default! */
-    font-size: 14px;
-}
+@layer base {
+    html {
+        /* Never change this default! */
+        @apply text-black text-base;
+    }
 
-button:focus {
-    @apply outline-none;
-}
+    a {
+        @apply text-primary hover:underline;
+    }
 
-h1 {
-    @apply text-2xl; /* 24px */
-    @apply font-bold;
-    @apply leading-p1 tracking-tightest;
-}
+    button:focus {
+        @apply outline-none;
+    }
 
-h2 {
-    @apply text-xl; /* 21px */
-    @apply font-bold;
-    @apply leading-p1 tracking-tightest;
-}
+    h1 {
+        @apply text-2xl; /* 24px */
+        @apply font-bold;
+        @apply leading-p1 tracking-tightest;
+    }
 
-h3 {
-    @apply text-lg; /* 18px */
-    @apply font-bold;
-    @apply tracking-tightest;
-}
+    h2 {
+        @apply text-xl; /* 21px */
+        @apply font-bold;
+        @apply leading-p1 tracking-tightest;
+    }
 
-h4 {
-    @apply text-md; /* 16 px */
-    @apply leading-p2 tracking-tightest;
-}
+    h3 {
+        @apply text-lg; /* 18px */
+        @apply font-bold;
+        @apply tracking-tightest;
+    }
 
-h5 {
-    @apply text-base; /* 14 px */
-    @apply leading-p2 tracking-tightest;
-}
+    h4 {
+        @apply text-md; /* 16 px */
+        @apply leading-p2 tracking-tightest;
+    }
 
-h6 {
-    @apply text-sm; /* 14 px */
-    @apply leading-p3 tracking-tightest;
-}
+    h5 {
+        @apply text-base; /* 14 px */
+        @apply leading-p2 tracking-tightest;
+    }
 
-.p1 {
-    @apply text-md; /* 16px */
-    @apply leading-p1 tracking-tightest;
-}
+    h6 {
+        @apply text-sm; /* 14 px */
+        @apply leading-p3 tracking-tightest;
+    }
 
-.p2 {
-    @apply text-base; /* 14px */
-    @apply leading-p2 tracking-tightest;
-}
+    .p1 {
+        @apply text-md; /* 16px */
+        @apply leading-p1 tracking-tightest;
+    }
 
-.p3 {
-    @apply text-sm; /* 12px */
-    @apply leading-p3 tracking-tightest;
-}
+    .p2 {
+        @apply text-base; /* 14px */
+        @apply leading-p2 tracking-tightest;
+    }
 
-.ui-badge .icon {
-    position: relative;
-    top: -1px;
-}
+    .p3 {
+        @apply text-sm; /* 12px */
+        @apply leading-p3 tracking-tightest;
+    }
+
+    .ui-badge .icon {
+        position: relative;
+        top: -1px;
+    }
+
+    sup {
+        top: -7px;
+    }
 
-.font-bold {
-    @apply antialiased;
+    .font-bold {
+        @apply antialiased;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.0.0-10",
+    "version": "2.0.0-101",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [
@@ -10,7 +10,7 @@
         "postcss.config.js"
     ],
     "main": "build/ui-kit.umd.js",
-    "module": "build/ui-kit.es.js",
+    "module": "build/ui-kit.mjs",
     "types": "index.d.ts",
     "scripts": {
         "prepare": "node scripts/prepare && vite build",
@@ -21,53 +21,59 @@
         "watch": "npm run build -- --watch",
         "clean": "rm -rf node_modules/.vite",
         "build:storybook": "node scripts/prepare && build-storybook -s public",
-        "lint": "xola-lint src",
-        "lint:fix": "xola-lint src --fix",
-        "lint:report": "xola-lint --reporter=json src > eslint_report.json && echo 'ESLint report saved to eslint_report.json'",
+        "lint": "xola-lint --ignore src/stories src",
+        "lint:fix": "xola-lint --ignore src/stories src --fix",
+        "lint:report": "xola-lint --ignore src/stories src --reporter=json src > eslint_report.json && echo 'ESLint report saved to eslint_report.json'",
         "format": "prettier --write src",
-        "test": "xola-lint && jest"
+        "test": "xola-lint && jest",
+        "chromatic": "chromatic --exit-zero-on-changes --build-script-name build:storybook"
     },
     "dependencies": {
         "@headlessui/react": "^1.4.0",
-        "@tailwindcss/forms": "^0.3.3",
-        "@tailwindcss/line-clamp": "^0.2.1",
-        "@tippyjs/react": "^4.2.5",
+        "@tailwindcss/forms": "^0.4.0",
+        "@tailwindcss/line-clamp": "^0.3.1",
+        "@tippyjs/react": "^4.2.6",
         "clsx": "^1.1.1",
         "dayjs": "^1.10.7",
         "downshift": "^6.1.5",
         "get-user-locale": "^1.4.0",
         "google-libphonenumber": "^3.2.22",
-        "mathjs": "^9.4.4",
+        "nouislider-react": "^3.4.1",
         "prop-types": "^15.7.2",
         "react-day-picker": "^7.4.10",
         "react-hot-toast": "^2.1.0",
         "react-hotkeys-hook": "^3.4.0",
-        "react-select": "^5.1.0",
-        "tippy.js": "^6.3.1"
+        "react-json-view": "^1.21.3",
+        "react-select": "^5.7.0",
+        "storybook-addon-designs": "^6.3.1",
+        "tippy.js": "^6.3.1",
+        "typescript": "4.7"
     },
     "devDependencies": {
         "@babel/core": "^7.14.8",
         "@babel/preset-env": "^7.15.6",
-        "@storybook/addon-actions": "^6.3.10",
-        "@storybook/addon-essentials": "^6.3.10",
-        "@storybook/addon-links": "^6.3.10",
+        "@storybook/addon-actions": "^6.5.10",
+        "@storybook/addon-essentials": "^6.5.10",
+        "@storybook/addon-links": "^6.5.10",
         "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/addons": "^6.3.10",
-        "@storybook/react": "^6.3.10",
-        "@storybook/theming": "^6.3.10",
-        "@xola/jslint": "^0.0.4",
-        "autoprefixer": "^10.3.1",
+        "@storybook/addons": "^6.5.10",
+        "@storybook/react": "^6.5.10",
+        "@storybook/theming": "^6.5.10",
+        "@xola/jslint": "^2.1.2",
+        "autoprefixer": "^10.4.5",
         "babel-jest": "^27.2.0",
         "babel-loader": "^8.2.2",
+        "chromatic": "^6.11.4",
         "jest": "^27.2.0",
         "lodash": "^4.17.21",
-        "postcss": "^8.3.6",
-        "prettier": "^2.4.0",
+        "postcss": "^8.4.5",
+        "prettier": "^2.7.1",
+        "prettier-plugin-tailwindcss": "^0.1.13",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "storybook-css-modules-preset": "^1.1.1",
-        "tailwindcss": "^2.2.15",
-        "vite": "^2.5.7"
+        "tailwindcss": "^3.1.8",
+        "vite": "^3.0.8"
     },
     "peerDependencies": {
         "autoprefixer": "^10.3.1",
@@ -75,7 +81,10 @@
         "postcss": "^8.3.6",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "tailwindcss": "^2.2.7"
+        "tailwindcss": "^3.0.18"
+    },
+    "engines": {
+        "node": ">=16"
     },
     "prettier": {
         "semi": true,
@@ -85,6 +94,7 @@
         "bracketSpacing": true,
         "useTabs": false,
         "arrowParens": "always",
+        "bracketSameLine": false,
         "tabWidth": 4
     }
 }

package/tailwind.config.js

@@ -8,6 +8,7 @@ const colors = {
     white: "#ffffff",
 
     gray: {
+        hover: "#F7F9FB",
         lighter: "#F0F2F4",
         light: "#E0E3E7",
         DEFAULT: "#BDC0C6",
@@ -23,32 +24,41 @@ const colors = {
         darker: "#0E44A8",
     },
 
+    turquoise: {
+        // TODO: We need other shades to match the scheme
+        DEFAULT: "#3FE2EE",
+    },
+
     green: {
         lighter: "#E2FFEF",
+        lightish: "#C1F9D9",
         light: "#33E781",
         DEFAULT: "#27CE70",
         dark: "#23B965",
-        darker: "#1B8E4E", // Made up by Rushi till Barth gives us a color
+        darker: "#168848",
     },
 
     red: {
-        lighter: "#FFEAEA",
+        lighter: "#FFF0F0",
+        lightish: "#FFE1E1",
         light: "#FFA1A1",
         DEFAULT: "#FF5A5A",
         dark: "#E93737",
-        darker: "#E51919", // Made up by Rushi till Barth gives us a color
+        darker: "#CD1F1F",
     },
 
     yellow: {
         lighter: "#FFFAF0",
+        lightish: "#FFECC6",
         light: "#FFDB8E",
         DEFAULT: "#FFC03D",
         dark: "#EBAA24",
-        darker: "#F0A200", // Made up by Rushi till Barth gives us a color
+        darker: "#987122",
     },
 
     orange: {
         lighter: "#FFF1E7",
+        lightish: "#FFF1E7",
         light: "#FFB493",
         DEFAULT: "#FF9668",
         dark: "#EC743F",
@@ -56,11 +66,61 @@ const colors = {
     },
 };
 
+const spacing = {
+    0: "0px",
+    0.25: "1px",
+    0.5: "2px",
+    0.75: "3px",
+    1: "4px",
+    1.5: "6px",
+    2: "8px",
+    2.5: "10px",
+    3: "12px",
+    3.5: "14px",
+    4: "16px",
+    4.5: "18px",
+    5: "20px",
+    6: "24px",
+    7: "28px",
+    7.5: "30px",
+    8: "32px",
+    9: "36px",
+    10: "40px",
+    11: "44px",
+    12: "48px",
+    14: "56px",
+    15: "60px",
+    16: "64px",
+    20: "80px",
+    24: "96px",
+    25: "100px",
+    28: "112px",
+    30: "120px",
+    32: "128px",
+    36: "144px",
+    40: "160px",
+    44: "176px",
+    48: "192px",
+    50: "200px",
+    52: "208px",
+    56: "224px",
+    60: "240px",
+    64: "256px",
+    65: "260px", // CODE REVIEW: Should switch to w-64 260px or use Barth's spacing here?
+    72: "288px",
+    75: "300px",
+    80: "320px",
+    82: "350px",
+    96: "384px",
+    100: "400px",
+    105: "420px",
+    125: "500px",
+    150: "600px",
+    140: "560px",
+    200: "800px",
+};
 module.exports = {
-    mode: "jit",
-    darkMode: false,
-
-    purge: [
+    content: [
         "./src/**/*.js",
         "./src/**/*.jsx",
         "./src/**/*.ts",
@@ -82,50 +142,7 @@ module.exports = {
             caution: colors.orange,
         },
 
-        spacing: {
-            0: "0px",
-            0.25: "1px",
-            0.5: "2px",
-            0.75: "3px",
-            1: "4px",
-            1.5: "6px",
-            2: "8px",
-            2.5: "10px",
-            3: "12px",
-            3.5: "14px",
-            4: "16px",
-            4.5: "18px",
-            5: "20px",
-            6: "24px",
-            7: "28px",
-            7.5: "30px",
-            8: "32px",
-            9: "36px",
-            10: "40px",
-            11: "44px",
-            12: "48px",
-            14: "56px",
-            15: "60px",
-            16: "64px",
-            20: "80px",
-            24: "96px",
-            25: "100px",
-            28: "112px",
-            32: "128px",
-            36: "144px",
-            40: "160px",
-            44: "176px",
-            48: "192px",
-            50: "200px",
-            52: "208px",
-            56: "224px",
-            60: "240px",
-            64: "256px",
-            72: "288px",
-            80: "320px",
-            82: "350px",
-            96: "384px",
-        },
+        spacing,
 
         // Figma: https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%F0%9F%9B%A0-Xola-DS-Desktop-Master-%F0%9F%9B%A0?node-id=1885%3A51905
         fontSize: {
@@ -154,6 +171,7 @@ module.exports = {
         extend: {
             fontFamily: {
                 sans: ["Inter", ...defaultTheme.fontFamily.sans],
+                mono: ["Roboto Mono", ...defaultTheme.fontFamily.mono],
             },
 
             // P1 - Big 16px 130%
@@ -193,8 +211,11 @@ module.exports = {
 
             letterSpacing: {
                 tightest: "-.4px",
-                // TODO: Other letter spacings are in EM and need to be coverted to px
+                // TODO: Other letter spacings are in EM and need to be converted to px
             },
+
+            minWidth: spacing,
+            maxWidth: spacing,
         },
     },