pentatrion-design 0.3.0 → 1.0.0

package/.github/workflows/deploy-storybook.yml

@@ -20,12 +20,10 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9
-
+        # pnpm version is specified in the package.json packageManager section
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: pnpm
 
       - name: Setup Pages

package/.local/package copy 2.json

@@ -0,0 +1,142 @@
+{
+  "name": "pentatrion-design",
+  "version": "0.2.4",
+  "description": "",
+  "keywords": [],
+  "author": "Hugues Tavernier",
+  "license": "ISC",
+  "private": true,
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./src/index.ts",
+    "./types": "./src/types.ts",
+    "./components/autocomplete": "./src/components/autocomplete/index.ts",
+    "./components/badge": "./src/components/badge/index.ts",
+    "./components/button": "./src/components/button/index.ts",
+    "./components/card": "./src/components/card/index.ts",
+    "./components/code": "./src/components/code/index.ts",
+    "./components/context-menu": "./src/components/context/index.ts",
+    "./components/dialog": "./src/components/dialog/index.ts",
+    "./components/dropdown-menu": "./src/components/dropdown/index.ts",
+    "./components/dropdown-menu-nested": "./src/components/dropdown/index.ts",
+    "./components/flash": "./src/components/flash/index.ts",
+    "./components/highlight": "./src/components/highlight/index.ts",
+    "./components/href": "./src/components/href/index.ts",
+    "./components/input": "./src/components/input/index.ts",
+    "./components/input-field": "./src/components/input/index.ts",
+    "./components/loader": "./src/components/loader/index.ts",
+    "./components/modal": "./src/components/modal/index.ts",
+    "./components/notification": "./src/components/notification/index.ts",
+    "./components/popover": "./src/components/popover/index.ts",
+    "./components/portal": "./src/components/portal/index.ts",
+    "./components/resize-area": "./src/components/resize/index.ts",
+    "./components/scroll": "./src/components/scroll/index.ts",
+    "./components/select": "./src/components/select/index.ts",
+    "./components/snack": "./src/components/snack/index.ts",
+    "./components/sortable": "./src/components/sortable/index.ts",
+    "./components/steps": "./src/components/steps/index.ts",
+    "./components/table": "./src/components/table/index.ts",
+    "./components/tabs": "./src/components/tabs/index.ts",
+    "./components/textarea": "./src/components/textarea/index.ts",
+    "./components/tooltip": "./src/components/tooltip/index.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./lib": "./src/lib/index.ts",
+    "./redux/notification": "./src/redux/notification/index.ts",
+    "./tailwind": "./src/tailwind/index.ts"
+  },
+  "scripts": {
+    "dev:tsc": "tsc -w -p tsconfig.build.json",
+    "dev:alias": "tsc-alias -w -p tsconfig.build.json",
+    "dev": "run-p dev:tsc dev:alias",
+    "build:tsc": "tsc -p tsconfig.build.json",
+    "build:alias": "tsc-alias -p tsconfig.build.json",
+    "build:package": "node generate-public-package.js",
+    "build": "run-s build:tsc build:alias build:package",
+    "storybook": "storybook dev -p 6007",
+    "storybook-build": "storybook build",
+    "fontello": "fontello",
+    "lint:check": "eslint",
+    "tsc:check": "tsc --noEmit -p tsconfig.build.json",
+    "test": "vitest",
+    "test-run": "vitest --run",
+    "ci": "pnpm lint:check && pnpm tsc:check && pnpm test-run"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@floating-ui/react-dom": "^2.1.0",
+    "@react-spring/web": "^9.7.3",
+    "@reduxjs/toolkit": "^2.2.5",
+    "@storybook/addon-actions": "^8.1.9",
+    "@storybook/addon-docs": "^8.1.9",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-interactions": "^8.1.9",
+    "@storybook/addon-links": "^8.1.9",
+    "@storybook/addon-themes": "^8.1.9",
+    "@storybook/blocks": "^8.1.9",
+    "@storybook/manager-api": "^8.1.9",
+    "@storybook/react": "^8.1.9",
+    "@storybook/react-vite": "^8.1.9",
+    "@storybook/test": "^8.1.9",
+    "@storybook/theming": "^8.1.9",
+    "@storybook/types": "^8.1.9",
+    "@tailwindcss/typography": "^0.5.13",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/geojson": "^7946.0.14",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "@use-gesture/react": "^10.3.1",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "fuse.js": "^7.0.0",
+    "jsdom": "^24.1.0",
+    "maplibre-gl": "^4.4.0",
+    "npm-run-all": "^4.1.5",
+    "pentatrion-fontello-cli": "^0.0.5",
+    "postcss": "^8.4.38",
+    "postcss-input-range": "^5.0.0",
+    "postcss-load-config": "^5.1.0",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.4",
+    "react-redux": "^9.1.2",
+    "storybook": "^8.1.9",
+    "tailwindcss": "^3.4.4",
+    "tsc-alias": "^1.8.10",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.17",
+    "clsx": "^2.1.1",
+    "pentatrion-design": "link:",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-polymorphic-types": "^2.0.0",
+    "react-sortablejs": "^6.1.4"
+  },
+  "peerDependencies": {
+    "@reduxjs/toolkit": "*",
+    "react-redux": "*",
+    "tailwindcss": "*"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "volta": {
+    "node": "20.14.0"
+  }
+}

package/.local/package copy.json

@@ -0,0 +1,247 @@
+{
+  "name": "pentatrion-design",
+  "version": "0.2.4",
+  "description": "",
+  "keywords": [],
+  "author": "Hugues Tavernier",
+  "license": "ISC",
+  "private": true,
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./types": {
+      "default": "./types.js",
+      "types": "./types.d.ts"
+    },
+    "./hooks": {
+      "default": "./hooks/index.js",
+      "types": "./hooks/index.d.ts"
+    },
+    "./lib": {
+      "default": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    },
+    "./tailwind": {
+      "default": "./tailwind/index.js",
+      "types": "./tailwind/index.d.ts"
+    },
+    "./redux/notification": {
+      "default": "./redux/notification/index.js",
+      "types": "./redux/notification/index.d.ts"
+    },
+    "./components/autocomplete": {
+      "default": "./components/autocomplete/index.js",
+      "types": "./components/autocomplete/index.d.ts"
+    },
+    "./components/badge": {
+      "default": "./components/badge/index.js",
+      "types": "./components/badge/index.d.ts"
+    },
+    "./components/button": {
+      "default": "./components/button/index.js",
+      "types": "./components/button/index.d.ts"
+    },
+    "./components/card": {
+      "default": "./components/card/index.js",
+      "types": "./components/card/index.d.ts"
+    },
+    "./components/code": {
+      "default": "./components/code/index.js",
+      "types": "./components/code/index.d.ts"
+    },
+    "./components/context-menu": {
+      "default": "./components/context/index.js",
+      "types": "./components/context/index.d.ts"
+    },
+    "./components/dialog": {
+      "default": "./components/dialog/index.js",
+      "types": "./components/dialog/index.d.ts"
+    },
+    "./components/dropdown-menu": {
+      "default": "./components/dropdown/index.js",
+      "types": "./components/dropdown/index.d.ts"
+    },
+    "./components/dropdown-menu-nested": {
+      "default": "./components/dropdown/index.js",
+      "types": "./components/dropdown/index.d.ts"
+    },
+    "./components/flash": {
+      "default": "./components/flash/index.js",
+      "types": "./components/flash/index.d.ts"
+    },
+    "./components/highlight": {
+      "default": "./components/highlight/index.js",
+      "types": "./components/highlight/index.d.ts"
+    },
+    "./components/href": {
+      "default": "./components/href/index.js",
+      "types": "./components/href/index.d.ts"
+    },
+    "./components/input": {
+      "default": "./components/input/index.js",
+      "types": "./components/input/index.d.ts"
+    },
+    "./components/input-field": {
+      "default": "./components/input/index.js",
+      "types": "./components/input/index.d.ts"
+    },
+    "./components/loader": {
+      "default": "./components/loader/index.js",
+      "types": "./components/loader/index.d.ts"
+    },
+    "./components/modal": {
+      "default": "./components/modal/index.js",
+      "types": "./components/modal/index.d.ts"
+    },
+    "./components/notification": {
+      "default": "./components/notification/index.js",
+      "types": "./components/notification/index.d.ts"
+    },
+    "./components/popover": {
+      "default": "./components/popover/index.js",
+      "types": "./components/popover/index.d.ts"
+    },
+    "./components/portal": {
+      "default": "./components/portal/index.js",
+      "types": "./components/portal/index.d.ts"
+    },
+    "./components/resize-area": {
+      "default": "./components/resize/index.js",
+      "types": "./components/resize/index.d.ts"
+    },
+    "./components/scroll": {
+      "default": "./components/scroll/index.js",
+      "types": "./components/scroll/index.d.ts"
+    },
+    "./components/select": {
+      "default": "./components/select/index.js",
+      "types": "./components/select/index.d.ts"
+    },
+    "./components/snack": {
+      "default": "./components/snack/index.js",
+      "types": "./components/snack/index.d.ts"
+    },
+    "./components/sortable": {
+      "default": "./components/sortable/index.js",
+      "types": "./components/sortable/index.d.ts"
+    },
+    "./components/steps": {
+      "default": "./components/steps/index.js",
+      "types": "./components/steps/index.d.ts"
+    },
+    "./components/table": {
+      "default": "./components/table/index.js",
+      "types": "./components/table/index.d.ts"
+    },
+    "./components/tabs": {
+      "default": "./components/tabs/index.js",
+      "types": "./components/tabs/index.d.ts"
+    },
+    "./components/textarea": {
+      "default": "./components/textarea/index.js",
+      "types": "./components/textarea/index.d.ts"
+    },
+    "./components/tooltip": {
+      "default": "./components/tooltip/index.js",
+      "types": "./components/tooltip/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev:tsc": "tsc -w -p tsconfig.build.json",
+    "dev:alias": "tsc-alias -w -p tsconfig.build.json",
+    "dev": "run-p dev:tsc dev:alias",
+    "build:tsc": "tsc -p tsconfig.build.json",
+    "build:alias": "tsc-alias -p tsconfig.build.json",
+    "build:package": "node generate-public-package.js",
+    "build": "run-s build:tsc build:alias build:package",
+    "storybook": "storybook dev -p 6007",
+    "storybook-build": "storybook build",
+    "fontello": "fontello",
+    "lint:check": "eslint",
+    "tsc:check": "tsc --noEmit -p tsconfig.build.json",
+    "test": "vitest",
+    "test-run": "vitest --run",
+    "ci": "pnpm lint:check && pnpm tsc:check && pnpm test-run"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@floating-ui/react-dom": "^2.1.0",
+    "@react-spring/web": "^9.7.3",
+    "@reduxjs/toolkit": "^2.2.5",
+    "@storybook/addon-actions": "^8.1.9",
+    "@storybook/addon-docs": "^8.1.9",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-interactions": "^8.1.9",
+    "@storybook/addon-links": "^8.1.9",
+    "@storybook/addon-themes": "^8.1.9",
+    "@storybook/blocks": "^8.1.9",
+    "@storybook/manager-api": "^8.1.9",
+    "@storybook/react": "^8.1.9",
+    "@storybook/react-vite": "^8.1.9",
+    "@storybook/test": "^8.1.9",
+    "@storybook/theming": "^8.1.9",
+    "@storybook/types": "^8.1.9",
+    "@tailwindcss/typography": "^0.5.13",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/geojson": "^7946.0.14",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "@use-gesture/react": "^10.3.1",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "fuse.js": "^7.0.0",
+    "jsdom": "^24.1.0",
+    "maplibre-gl": "^4.4.0",
+    "npm-run-all": "^4.1.5",
+    "pentatrion-fontello-cli": "^0.0.5",
+    "postcss": "^8.4.38",
+    "postcss-input-range": "^5.0.0",
+    "postcss-load-config": "^5.1.0",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.4",
+    "react-redux": "^9.1.2",
+    "storybook": "^8.1.9",
+    "tailwindcss": "^3.4.4",
+    "tsc-alias": "^1.8.10",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.17",
+    "clsx": "^2.1.1",
+    "pentatrion-design": "link:",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-polymorphic-types": "^2.0.0",
+    "react-sortablejs": "^6.1.4"
+  },
+  "peerDependencies": {
+    "@reduxjs/toolkit": "*",
+    "react-redux": "*",
+    "tailwindcss": "*"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "volta": {
+    "node": "20.14.0"
+  }
+}

package/.local/tailwind copy/base-prose.css

@@ -0,0 +1,110 @@
+.prose {
+  p {
+    @apply mb-5 mt-0;
+  }
+  p:last-child {
+    @apply mb-0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply relative font-semibold text-gray-8;
+  }
+  h1 {
+    @apply mb-8 mt-0 text-h1;
+  }
+  h2 {
+    @apply mb-2 mt-6 text-h2;
+  }
+  h3 {
+    @apply mb-2 mt-6 text-h3;
+  }
+  h4 {
+    @apply mb-2 mt-6 text-h4;
+  }
+  h5 {
+    @apply mb-2 mt-6 text-h5;
+  }
+  h6 {
+    @apply mb-2 mt-6 text-h6;
+  }
+  img {
+    @apply my-8;
+  }
+  picture {
+    @apply my-8;
+  }
+  picture > img {
+    @apply my-0;
+  }
+  video {
+    @apply my-8;
+  }
+
+  code {
+    @apply text-body-sm font-bold;
+  }
+  code::before {
+    content: "`";
+  }
+  code::after {
+    content: "`";
+  }
+  pre {
+    @apply my-6 overflow-x-auto rounded-md bg-gray-1 py-4 pe-4 ps-4 text-body-sm;
+  }
+  ol {
+    @apply my-5 list-decimal ps-7;
+  }
+  ul {
+    @apply my-5 list-disc ps-6;
+  }
+  li {
+    @apply my-2;
+  }
+  ol > li {
+    @apply ps-1.5 marker:text-gray-5;
+  }
+  ul > li {
+    @apply ps-1.5 marker:text-gray-3;
+  }
+  blockquote {
+    @apply my-8 border-s-4 border-s-gray-3 ps-5 italic text-gray-8;
+  }
+  hr + * {
+    @apply mt-0;
+  }
+  h2 + * {
+    @apply mt-0;
+  }
+  h3 + * {
+    @apply mt-0;
+  }
+  h4 + * {
+    @apply mt-0;
+  }
+
+  figure {
+    @apply my-8;
+  }
+  figure > * {
+    @apply my-0;
+  }
+  figcaption {
+    @apply mt-3 text-body-sm;
+  }
+
+  a {
+    @apply text-gray-8 underline decoration-gray-8 visited:text-gray-8 hover:decoration-yellow-5 hover:decoration-2 active:text-yellow-5;
+  }
+  mark {
+    @apply bg-yellow-1 text-gray-8;
+  }
+  abbr {
+    @apply cursor-help underline decoration-dashed;
+  }
+}

package/.local/tailwind copy/base.css

@@ -0,0 +1,131 @@
+html {
+  font-size: 16px;
+  line-height: 24px;
+  color-scheme: normal;
+}
+body {
+  @apply bg-gray-0 font-sans text-gray-7;
+}
+.light {
+  color-scheme: light;
+}
+.dark {
+  color-scheme: dark;
+}
+
+:focus-visible {
+  @apply rounded-sm outline outline-2 outline-offset-2 outline-yellow-5;
+}
+
+textarea[readonly],
+[aria-readonly="true"] {
+  @apply bg-gray-1;
+}
+:is(input, textarea)[readonly] {
+  color: rgb(var(--color-gray-6));
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+input[type="range"] {
+  background-color: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+
+  border: 0;
+  box-sizing: border-box;
+  border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+}
+input[type="range"]::-moz-range-thumb {
+  appearance: none;
+  border: 0;
+  box-sizing: border-box;
+  border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+}
+input[type="range"]::-ms-thumb {
+  appearance: none;
+  border: 0;
+  box-sizing: border-box;
+  border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+}
+
+mark {
+  @apply bg-yellow-1 text-gray-8;
+}
+
+abbr {
+  @apply cursor-help underline decoration-dashed;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+[data-color="yellow"] {
+  /**
+   * for readability 1 and 2 are gray
+   */
+  --color-custom-1: var(--color-gray-1);
+  --color-custom-2: var(--color-gray-2);
+  --color-custom-3: var(--color-yellow-3);
+  --color-custom-4: var(--color-yellow-4);
+  --color-custom-5: var(--color-yellow-5);
+  --color-custom-text: var(--color-yellow-text);
+}
+[data-color="gray"] {
+  --color-custom-1: var(--color-gray-1);
+  --color-custom-2: var(--color-gray-2);
+  --color-custom-3: var(--color-gray-3);
+  --color-custom-4: var(--color-gray-4);
+  --color-custom-5: var(--color-gray-5);
+  --color-custom-text: var(--color-gray-text);
+}
+[data-color="red"] {
+  --color-custom-1: var(--color-red-1);
+  --color-custom-2: var(--color-red-2);
+  --color-custom-3: var(--color-red-3);
+  --color-custom-4: var(--color-red-4);
+  --color-custom-5: var(--color-red-5);
+  --color-custom-text: var(--color-red-text);
+}
+[data-color="orange"] {
+  --color-custom-1: var(--color-orange-1);
+  --color-custom-2: var(--color-orange-2);
+  --color-custom-3: var(--color-orange-3);
+  --color-custom-4: var(--color-orange-4);
+  --color-custom-5: var(--color-orange-5);
+  --color-custom-text: var(--color-orange-text);
+}
+[data-color="green"] {
+  --color-custom-1: var(--color-green-1);
+  --color-custom-2: var(--color-green-2);
+  --color-custom-3: var(--color-green-3);
+  --color-custom-4: var(--color-green-4);
+  --color-custom-5: var(--color-green-5);
+  --color-custom-text: var(--color-green-text);
+}
+[data-color="blue"] {
+  --color-custom-1: var(--color-blue-1);
+  --color-custom-2: var(--color-blue-2);
+  --color-custom-3: var(--color-blue-3);
+  --color-custom-4: var(--color-blue-4);
+  --color-custom-5: var(--color-blue-5);
+  --color-custom-text: var(--color-blue-text);
+}