@j2-health/design-system 0.3.2 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@j2-health/design-system",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "type": "module",
   "description": "J2 Health shared React component library",
   "repository": {
@@ -24,6 +24,7 @@
     },
     "./style.css": "./dist/style.css",
     "./stylesheets/index.css": "./src/stylesheets/index.css",
+    "./stylesheets/tailwind.css": "./src/stylesheets/tailwind.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -47,63 +48,69 @@
     "start": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "NODE_OPTIONS='--no-deprecation' vitest run",
+    "test:tailwind": "node scripts/test-tailwind-consumers.mjs",
     "test:dev": "NODE_OPTIONS='--no-deprecation' vitest",
     "test:coverage": "NODE_OPTIONS='--no-deprecation' vitest run --coverage",
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@ant-design/icons": "^5.6.1",
-    "@highcharts/react": "^4.2.1",
+    "@ant-design/icons": "^6.3.4",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@highcharts/react": "^5.0.0",
     "@phosphor-icons/react": "^2.1.7",
-    "antd": "^5.21.2",
+    "antd": "^6.6.3",
     "classnames": "^2.5.1",
     "formik": "^2.4.6",
-    "formik-antd": "^3.0.0-beta.9",
-    "highcharts": "^12.5.0 || ^13.0.1",
+    "highcharts": "^13.0.1",
     "lodash": "^4.17.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.14"
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0",
+    "tailwindcss": "^3.4.14 || ^4.0.0"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5.6.1",
+    "@ant-design/icons": "^6.3.4",
     "@chromatic-com/storybook": "^5.3.0",
-    "@eslint/js": "^9.11.1",
-    "@highcharts/react": "^4.2.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@eslint/compat": "^2.1.1",
+    "@eslint/js": "^10.0.1",
+    "@highcharts/react": "^5.3.0",
     "@phosphor-icons/react": "^2.1.7",
     "@storybook/addon-docs": "^10.5.9",
     "@storybook/addon-links": "^10.3.0",
-    "@storybook/addon-onboarding": "^10.3.0",
     "@storybook/react-vite": "^10.3.0",
+    "@tailwindcss/postcss": "^4.3.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/lodash": "^4.17.14",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
     "@vitejs/plugin-react": "^4.3.2",
     "@vitest/coverage-v8": "^4.0.18",
-    "antd": "^5.21.2",
+    "antd": "^6.6.3",
     "autoprefixer": "^10.4.20",
     "classnames": "^2.5.1",
-    "eslint": "^9.39.0",
+    "eslint": "^10.11.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "eslint-plugin-storybook": "^10.5.10",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.7",
+    "eslint-plugin-storybook": "^10.6.0",
     "formik": "^2.4.6",
-    "formik-antd": "^3.0.0-beta.9",
     "globals": "^15.9.0",
     "happy-dom": "^20.9.0",
     "highcharts": "^13.0.1",
     "lodash": "^4.18.1",
     "postcss": "^8.5.28",
     "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "storybook": "^10.3.5",
-    "tailwindcss": "^3.4.14",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "semver": "^7.8.5",
+    "storybook": "^10.6.0",
+    "tailwindcss": "^4.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.15.0",
@@ -120,5 +127,10 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
+  },
+  "overrides": {
+    "eslint-plugin-react": {
+      "eslint": "$eslint"
+    }
   }
 }

package/src/stylesheets/base.css

@@ -0,0 +1,322 @@
+:root {
+  --j2-blue-1: #fcfdff;
+  --j2-blue-2: #f6f9fe;
+  --j2-blue-3: #edf2fd;
+  --j2-blue-4: #e1eaff;
+  --j2-blue-5: #d2e0fd;
+  --j2-blue-6: #c1d2f8;
+  --j2-blue-7: #aac0ef;
+  --j2-blue-8: #8ba8e6;
+  --j2-blue-9: #253761;
+  --j2-blue-10: #364975;
+  --j2-blue-11: #5670aa;
+  --j2-blue-12: #20315b;
+
+  --j2-gray-1: #fdfdfb;
+  --j2-gray-2: #f9f9f7;
+  --j2-gray-3: #f0f0ed;
+  --j2-gray-4: #e9e9e4;
+  --j2-gray-5: #e2e2dc;
+  --j2-gray-6: #dadad2;
+  --j2-gray-7: #cfcfc8;
+  --j2-gray-8: #bcbcb4;
+  --j2-gray-9: #8d8d86;
+  --j2-gray-10: #82827c;
+  --j2-gray-11: #63635d;
+  --j2-gray-12: #20201b;
+
+  --j2-green-1: #fafefb;
+  --j2-green-2: #f5fbf5;
+  --j2-green-3: #e7f7e7;
+  --j2-green-4: #d7f2d8;
+  --j2-green-5: #c5eac6;
+  --j2-green-6: #ade0af;
+  --j2-green-7: #8dd191;
+  --j2-green-8: #6bb971;
+  --j2-green-9: #57a45e;
+  --j2-green-10: #4b9852;
+  --j2-green-11: #307e3a;
+  --j2-green-12: #1d3d20;
+
+  --j2-gold-1: #fefdfa;
+  --j2-gold-2: #fffae6;
+  --j2-gold-3: #fff2be;
+  --j2-gold-4: #ffe9a4;
+  --j2-gold-5: #ffdd81;
+  --j2-gold-6: #ffce57;
+  --j2-gold-7: #f3be4e;
+  --j2-gold-8: #e2a600;
+  --j2-gold-9: #ffcc39;
+  --j2-gold-10: #ffbf00;
+  --j2-gold-11: #9e6e00;
+  --j2-gold-12: #493918;
+
+  --j2-red-1: #fffcfc;
+  --j2-red-2: #fff7f7;
+  --j2-red-3: #feebeb;
+  --j2-red-4: #ffdcdc;
+  --j2-red-5: #ffcece;
+  --j2-red-6: #fbbebe;
+  --j2-red-7: #f2aaab;
+  --j2-red-8: #e89092;
+  --j2-red-9: #bf6c6f;
+  --j2-red-10: #b26063;
+  --j2-red-11: #a9585b;
+  --j2-red-12: #631a22;
+
+  --j2-color-text: var(--j2-gray-12);
+  --j2-color-text-secondary: var(--j2-gray-11);
+  --j2-color-text-tertiary: var(--j2-gray-11);
+  --j2-color-text-quaternary: var(--j2-gray-10);
+  --j2-color-text-heading: var(--j2-gray-12);
+  --j2-color-text-label: var(--j2-gray-11);
+  --j2-color-text-description: var(--j2-gray-11);
+  --j2-color-text-disabled: var(--j2-gray-10);
+  --j2-color-text-placeholder: var(--j2-gray-10);
+  --j2-color-icon: var(--j2-gray-11);
+  --j2-color-icon-hover: var(--j2-gray-12);
+  --j2-color-bg-layout: var(--j2-gray-2);
+  --j2-color-border: var(--j2-gray-7);
+  --j2-color-border-secondary: var(--j2-gray-6);
+  --j2-color-primary: var(--j2-blue-9);
+  --j2-color-success: var(--j2-green-9);
+  --j2-color-warning: var(--j2-gold-9);
+  --j2-color-info: var(--j2-blue-9);
+  --j2-color-error: var(--j2-red-9);
+  --j2-color-link: var(--j2-blue-9);
+  --j2-color-error-bg: var(--j2-red-2);
+  --j2-color-error-bg-hover: var(--j2-red-3);
+  --j2-color-error-border: var(--j2-red-7);
+  --j2-color-error-border-hover: var(--j2-red-8);
+  --j2-color-error-hover: var(--j2-red-10);
+  --j2-color-error-active: var(--j2-red-10);
+  --j2-color-error-text-hover: var(--j2-red-12);
+  --j2-color-error-text: var(--j2-red-11);
+  --j2-color-error-text-active: var(--j2-red-12);
+  --j2-color-link-hover: var(--j2-blue-10);
+  --j2-color-info-bg: var(--j2-blue-1);
+  --j2-color-info-bg-hover: var(--j2-blue-4);
+  --j2-color-info-border: var(--j2-blue-7);
+  --j2-color-info-border-hover: var(--j2-blue-8);
+  --j2-color-info-hover: var(--j2-blue-10);
+  --j2-color-info-active: var(--j2-blue-10);
+  --j2-color-info-text-hover: var(--j2-blue-11);
+  --j2-color-info-text: var(--j2-blue-12);
+  --j2-color-info-text-active: var(--j2-blue-11);
+  --j2-color-link-active: var(--j2-blue-10);
+  --j2-color-primary-bg: var(--j2-blue-1);
+  --j2-color-primary-bg-hover: var(--j2-blue-4);
+  --j2-color-primary-border: var(--j2-blue-7);
+  --j2-color-primary-border-hover: var(--j2-blue-8);
+  --j2-color-primary-hover: var(--j2-blue-10);
+  --j2-color-primary-active: var(--j2-blue-10);
+  --j2-color-primary-text-hover: var(--j2-blue-11);
+  --j2-color-primary-text: var(--j2-blue-12);
+  --j2-color-primary-text-active: var(--j2-blue-11);
+  --j2-color-success-bg: var(--j2-green-2);
+  --j2-color-success-bg-hover: var(--j2-green-3);
+  --j2-color-success-border: var(--j2-green-7);
+  --j2-color-success-border-hover: var(--j2-green-8);
+  --j2-color-success-hover: var(--j2-green-10);
+  --j2-color-success-active: var(--j2-green-10);
+  --j2-color-success-text-hover: var(--j2-green-12);
+  --j2-color-success-text: var(--j2-green-11);
+  --j2-color-success-text-active: var(--j2-green-12);
+  --j2-color-warning-bg: var(--j2-gold-2);
+  --j2-color-warning-bg-hover: var(--j2-gold-3);
+  --j2-color-warning-border: var(--j2-gold-7);
+  --j2-color-warning-border-hover: var(--j2-gold-8);
+  --j2-color-warning-hover: var(--j2-gold-10);
+  --j2-color-warning-active: var(--j2-gold-10);
+  --j2-color-warning-text-hover: var(--j2-gold-12);
+  --j2-color-warning-text: var(--j2-gold-11);
+  --j2-color-warning-text-active: var(--j2-gold-12);
+  --j2-control-item-bg-active: var(--j2-blue-1);
+  --j2-control-item-bg-active-hover: var(--j2-blue-4);
+  --j2-color-fill: rgba(0, 0, 0, 0.15);
+  --j2-color-fill-secondary: rgba(0, 0, 0, 0.06);
+  --j2-color-fill-tertiary: rgba(0, 0, 0, 0.04);
+  --j2-color-fill-quaternary: rgba(0, 0, 0, 0.02);
+  --j2-color-fill-content: rgba(0, 0, 0, 0.06);
+  --j2-color-fill-content-hover: rgba(0, 0, 0, 0.15);
+  --j2-color-bg-mask: rgba(32, 32, 27, 0.45);
+  --j2-color-bg-spotlight: rgba(32, 32, 27, 0.85);
+  --j2-color-bg-container-disabled: rgba(0, 0, 0, 0.04);
+  --j2-color-bg-text-active: rgba(0, 0, 0, 0.15);
+  --j2-color-bg-text-hover: rgba(0, 0, 0, 0.06);
+  --j2-color-fill-alter: rgba(0, 0, 0, 0.02);
+  --j2-color-split: rgba(0, 0, 0, 0.06);
+  --j2-color-error-outline: rgba(255, 38, 6, 0.06);
+  --j2-color-warning-outline: rgba(255, 215, 5, 0.1);
+  --j2-control-item-bg-active-disabled: rgba(0, 0, 0, 0.15);
+  --j2-control-item-bg-hover: rgba(0, 0, 0, 0.04);
+  --j2-control-outline: rgba(37, 55, 97, 0.1);
+  --j2-control-tmp-outline: rgba(0, 0, 0, 0.02);
+
+  --j2-font-family: Rubik, Roboto, sans-serif;
+  --j2-font-family-code: Rubik, Roboto, sans-serif;
+  --j2-font-size: 14px;
+  --j2-font-size-lg: 16px;
+  --j2-font-size-sm: 12px;
+  --j2-font-size-xs: 10px;
+  --j2-font-size-xl: 20px;
+  --j2-font-size-heading-1: 38px;
+  --j2-font-size-heading-2: 30px;
+  --j2-font-size-heading-3: 24px;
+  --j2-font-size-heading-4: 20px;
+  --j2-font-size-heading-5: 16px;
+  --j2-line-height: 1.5714285714285714;
+  --j2-line-height-xs: 1.6;
+  --j2-line-height-heading-1: 1.2105263157894737;
+  --j2-line-height-heading-2: 1.2666666666666666;
+  --j2-line-height-heading-3: 1.3333333333333333;
+  --j2-line-height-heading-4: 1.4;
+  --j2-line-height-heading-5: 1.5;
+  --j2-line-height-lg: 1.5;
+  --j2-line-height-sm: 1.6666666666666667;
+  --j2-font-size-icon: 12px;
+  --j2-font-weight-normal: 400;
+  --j2-font-weight-strong: 600;
+
+  --j2-border-radius: 8px;
+  --j2-border-radius-lg: 10px;
+  --j2-border-radius-sm: 6px;
+  --j2-border-radius-xs: 2px;
+
+  --j2-size-step: 4px;
+  --j2-size-unit: 4px;
+  --j2-control-interactive-size: 16px;
+  --j2-size: 16px;
+  --j2-size-lg: 24px;
+  --j2-size-md: 20px;
+  --j2-size-ms: 16px;
+  --j2-size-sm: 12px;
+  --j2-size-xl: 32px;
+  --j2-size-xs: 8px;
+  --j2-size-xxl: 48px;
+  --j2-control-height: 32px;
+  --j2-size-xxs: 4px;
+  --j2-control-height-lg: 40px;
+  --j2-control-height-sm: 24px;
+  --j2-control-height-xs: 16px;
+  --j2-line-width: 1px;
+  --j2-line-width-bold: 2px;
+  --j2-line-width-focus: 4px;
+  --j2-control-outline-width: 2px;
+  --j2-screen-lg: 992px;
+  --j2-screen-lg-max: 1199px;
+  --j2-screen-lg-min: 992px;
+  --j2-screen-md: 768px;
+  --j2-screen-md-max: 991px;
+  --j2-screen-md-min: 768px;
+  --j2-screen-sm: 576px;
+  --j2-screen-sm-max: 767px;
+  --j2-screen-sm-min: 576px;
+  --j2-screen-xl: 1200px;
+  --j2-screen-xl-max: 1599px;
+  --j2-screen-xl-min: 1200px;
+  --j2-screen-xs: 480px;
+  --j2-screen-xs-max: 575px;
+  --j2-screen-xs-min: 480px;
+  --j2-screen-xxl: 1600px;
+  --j2-screen-xxl-min: 1600px;
+  --j2-size-popup-arrow: 16px;
+  --j2-margin: 16px;
+  --j2-margin-lg: 24px;
+  --j2-margin-md: 20px;
+  --j2-margin-sm: 12px;
+  --j2-margin-xl: 32px;
+  --j2-margin-xs: 8px;
+  --j2-margin-xxl: 48px;
+  --j2-margin-xxs: 4px;
+  --j2-padding: 16px;
+  --j2-padding-lg: 24px;
+  --j2-padding-md: 20px;
+  --j2-padding-sm: 12px;
+  --j2-padding-xl: 32px;
+  --j2-padding-xs: 8px;
+  --j2-padding-xxs: 4px;
+  --j2-padding-content-horizontal: 16px;
+  --j2-padding-content-horizontal-lg: 24px;
+  --j2-padding-content-horizontal-sm: 16px;
+  --j2-padding-content-vertical: 12px;
+  --j2-padding-content-vertical-lg: 16px;
+  --j2-padding-content-vertical-sm: 8px;
+  --j2-control-padding-horizontal: 12px;
+  --j2-control-padding-horizontal-sm: 8px;
+
+  --j2-color-bg-elevated: #ffffff;
+
+  --j2-box-shadow: var(--ant-box-shadow);
+  --j2-box-shadow-secondary: var(--ant-box-shadow-secondary);
+  --j2-box-shadow-tertiary: var(--ant-box-shadow-tertiary);
+
+  font-family: var(--j2-font-family);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: var(--j2-font-family);
+}
+
+@layer base {
+  h1 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-1);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-1);
+    margin: 0;
+    color: var(--j2-color-primary);
+  }
+
+  h2 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-2);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-2);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+
+  h3 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-3);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-3);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+
+  h4 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-4);
+    font-weight: var(--j2-font-weight-strong);
+    line-height: var(--j2-line-height-heading-4);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+
+  h5 {
+    font-family: var(--j2-font-family);
+    font-size: var(--j2-font-size-heading-5);
+    font-weight: 500;
+    line-height: var(--j2-line-height-heading-5);
+    color: var(--j2-color-primary);
+    margin: 0;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/stylesheets/fonts.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');