@clubmed/trident-ui 1.0.0-alpha.34 → 1.0.0-alpha.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.0.0-alpha.34",
+  "version": "1.0.0-alpha.36",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -26,6 +26,27 @@
     "./style.css": "./styles/index.css",
     "./tailwind": "./tailwind/tailwind.preset.js",
     "./package.json": "./package.json",
+    "./atoms/Icons": {
+      "types": "./atoms/Icons/index.d.ts",
+      "import": "./atoms/Icons/index.js",
+      "default": "./atoms/Icons/index.js"
+    },
+    "./atoms/Icons/svg": {
+      "types": "./atoms/Icons/svg/index.d.ts",
+      "import": "./atoms/Icons/svg/index.js",
+      "default": "./atoms/Icons/svg/index.js"
+    },
+    "./atoms/Icons/svg-use": {
+      "types": "./atoms/Icons/svg-use/index.d.ts",
+      "import": "./atoms/Icons/svg-use/index.js",
+      "default": "./atoms/Icons/svg-use/index.js"
+    },
+    "./atoms/Icons/fonts": {
+      "types": "./atoms/Icons/fonts/index.d.ts",
+      "import": "./atoms/Icons/fonts/index.js",
+      "default": "./atoms/Icons/fonts/index.js"
+    },
+    "./fonts/*": "./fonts/*",
     "./atoms/*": {
       "types": "./atoms/*.d.ts",
       "import": "./atoms/*.js",
@@ -53,9 +74,11 @@
     }
   },
   "scripts": {
+    "predev": "npm run build:icons",
     "dev": "storybook dev -p 6006",
-    "build": "npm run build:icons && vite build && npm run build:icons font",
-    "build:storybook": "storybook build",
+    "prebuild": "npm run build:icons",
+    "build": "vite build && npm run build:icons font",
+    "build:storybook": "npm run build:icons && storybook build",
     "lint": "eslint . --report-unused-disable-directives",
     "lint:fix": "eslint . --fix",
     "prettier:write": "prettier . --write --ignore-unknown",
@@ -63,8 +86,7 @@
     "test:dev": "vitest watch",
     "test:update": "vitest -u",
     "prepare": "husky",
-    "build:icons": "NODE_NO_WARNINGS=1 node --loader ts-node/esm ./tools/icons/index.ts",
-    "postinstall": "npm run build:icons"
+    "build:icons": "NODE_NO_WARNINGS=1 node --loader ts-node/esm ./tools/icons/index.ts"
   },
   "peerDependencies": {
     "react": ">=17.0.2",
@@ -82,19 +104,19 @@
     "@commitlint/cli": "18.6.1",
     "@commitlint/config-conventional": "18.6.2",
     "@netsells/storybook-mockdate": "^0.3.2",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-actions": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/addon-mdx-gfm": "^7.6.10",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-viewport": "^7.6.12",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/react": "^7.6.10",
-    "@storybook/react-vite": "^7.6.10",
-    "@storybook/test": "^7.6.10",
-    "@svgr/rollup": "^8.1.0",
+    "@storybook/addon-a11y": "8.0.6",
+    "@storybook/addon-actions": "8.0.6",
+    "@storybook/addon-essentials": "8.0.6",
+    "@storybook/addon-interactions": "8.0.6",
+    "@storybook/addon-links": "8.0.6",
+    "@storybook/addon-mdx-gfm": "8.0.6",
+    "@storybook/addon-styling": "1.3.7",
+    "@storybook/addon-viewport": "8.0.6",
+    "@storybook/blocks": "8.0.6",
+    "@storybook/react": "8.0.6",
+    "@storybook/react-vite": "8.0.6",
+    "@storybook/test": "8.0.6",
+    "@svgr/rollup": "8.1.0",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
@@ -127,14 +149,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "storybook": "^7.6.3",
+    "storybook": "8.0.6",
     "svgtofont": "^4.2.0",
     "tailwindcss": "^3.3.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
     "vite": "^5.0.0",
-    "vite-plugin-static-copy": "1.0.1",
     "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-static-copy": "1.0.1",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.0.1"
   },

package/styles/globals.css

@@ -102,327 +102,4 @@
     @apply justify-between;
     @apply uppercase;
   }
-
-  /* SCROLLVIEWS */
-  .NativeScroller {
-    --arrows-margin: calc(12.5vw - 20px - 50px);
-  }
-
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-  }
-
-  .scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
-  .h-scroll-yellow {
-    overflow-y: hidden;
-    overflow-x: scroll;
-    scroll-behavior: smooth;
-    -ms-scroll-snap-type: x mandatory;
-    scroll-snap-type: x mandatory;
-    scrollbar-width: thin;
-    scrollbar-color: black #d8cdc1;
-    padding-bottom: 44px;
-    --scrollbar-margin: calc(12.5vw - 20px - 50px);
-  }
-
-  .h-scroll-yellow::-webkit-scrollbar {
-    height: 4px;
-  }
-
-  .h-scroll-yellow::-webkit-scrollbar-thumb {
-    @apply bg-saffron;
-    @apply rounded-pill;
-  }
-
-  .h-scroll-yellow::-webkit-scrollbar-track {
-    @apply rounded-pill;
-    background: transparent;
-    max-width: 1120px;
-    margin: 0 max(var(--scrollbar-margin), 20px);
-  }
-
-  .h-scroll-yellow::-webkit-scrollbar-track-piece {
-    @apply bg-pearl;
-    @apply rounded-pill;
-  }
-
-  .children-no-shrink > * {
-    @apply shrink-0;
-  }
-
-  /* CONTENT SLIDER */
-  .ContentSlider-item {
-    will-change: transform, filter;
-    transform: scale(var(--scale));
-    filter: contrast(calc(var(--opacity) / (2 - var(--opacity))))
-      brightness(calc(2 - var(--opacity)));
-    /* yeah we don't actually *want* to make the element transparent, we just want to make it look like it is, and this is the formula */
-  }
-
-  .force-white {
-    filter: brightness(0) saturate(100%) invert(100%);
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 2) {
-    grid-column-start: calc(2 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(3 + var(--groupOffset));
-    grid-row-end: 2;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 2) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 3) {
-    grid-column-start: calc(2 + var(--groupOffset));
-    grid-row-start: 2;
-    grid-column-end: calc(3 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 3) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 4) {
-    grid-column-start: calc(3 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(4 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 4) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 5) {
-    grid-column-start: calc(4 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(5 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 5) [data-name='Frame'] {
-    @apply aspect-vertical;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 6) {
-    grid-column-start: calc(5 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(6 + var(--groupOffset));
-    grid-row-end: 3;
-    transform: translateY(calc(-50% - 10px));
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 6) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 7) {
-    grid-column-start: calc(5 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(6 + var(--groupOffset));
-    grid-row-end: 3;
-    transform: translateY(calc(50% + 10px));
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 7) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 8) {
-    grid-column-start: calc(6 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(7 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 8) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 9) {
-    grid-column-start: calc(7 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(8 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout > *:nth-child(8n + 9) [data-name='Frame'] {
-    @apply aspect-vertical;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='2'] > *:nth-child(2) {
-    grid-column-start: 2;
-    grid-row-start: 1;
-    grid-column-end: 3;
-    grid-row-end: 2;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='2'] > *:nth-child(2) [data-name='Frame'] {
-    @apply aspect-vertical;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='3'] > *:nth-child(2) {
-    grid-column-start: 2;
-    grid-row-start: 1;
-    grid-column-end: 3;
-    grid-row-end: 2;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='3'] > *:nth-child(2) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='3'] > *:nth-child(3) {
-    grid-column-start: 2;
-    grid-row-start: 2;
-    grid-column-end: 3;
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='3'] > *:nth-child(3) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(2) {
-    grid-column-start: 2;
-    grid-row-start: 1;
-    grid-column-end: 3;
-    grid-row-end: 2;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(2) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(3) {
-    grid-column-start: 2;
-    grid-row-start: 2;
-    grid-column-end: 3;
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(3) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(4) {
-    grid-column-start: 3;
-    grid-row-start: 1;
-    grid-column-end: 4;
-    grid-row-end: 3;
-  }
-
-  .ProductInformationTabs-layout[data-children-count='4'] > *:nth-child(4) [data-name='Frame'] {
-    @apply aspect-vertical;
-  }
-
-  /* TABS */
-  .Tabs-focusIndicator {
-    transform: translateX(
-      calc(
-        var(--index) * -100% + var(--activeIndex) * 100% -
-          (4px * (var(--index) - var(--activeIndex)))
-      )
-    );
-  }
-
-  html[dir='rtl'] .Tabs-focusIndicator {
-    transform: translateX(
-      calc(
-        var(--index) * 100% + var(--activeIndex) * -100% +
-          (4px * (var(--index) - var(--activeIndex)))
-      )
-    );
-  }
-
-  .ProductDestinations-focusIndicator {
-    transform: translateX(calc(var(--index) * -100% + var(--activeIndex) * 100%));
-  }
-
-  html[dir='rtl'] .ProductDestinations-focusIndicator {
-    transform: translateX(calc(var(--index) * 100% + var(--activeIndex) * -100%));
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 2) {
-    grid-column-start: calc(2 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(3 + var(--groupOffset));
-    grid-row-end: 2;
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 2) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 3) {
-    grid-column-start: calc(2 + var(--groupOffset));
-    grid-row-start: 2;
-    grid-column-end: calc(3 + var(--groupOffset));
-    grid-row-end: 3;
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 3) [data-name='Frame'] {
-    @apply aspect-square;
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 4) {
-    grid-column-start: calc(3 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(4 + var(--groupOffset));
-    grid-row-end: 3;
-    transform: translateY(calc(-50% - 10px));
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 4) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 5) {
-    grid-column-start: calc(3 + var(--groupOffset));
-    grid-row-start: 1;
-    grid-column-end: calc(4 + var(--groupOffset));
-    grid-row-end: 3;
-    transform: translateY(calc(50% + 10px));
-  }
-
-  .ProductDestinations-layout > *:nth-child(4n + 5) [data-name='Frame'] {
-    @apply aspect-horizontal;
-  }
-
-  .tick {
-    -webkit-animation: tick 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-    animation: tick 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-    transform-style: preserve-3d;
-  }
-
-  .tock {
-    -webkit-animation: tock 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-    animation: tock 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards;
-    transform-style: preserve-3d;
-  }
-
-  @keyframes tick {
-    0% {
-      transform: rotateX(0deg);
-    }
-    100% {
-      transform: rotateX(-180deg);
-    }
-  }
-
-  @keyframes tock {
-    0% {
-      transform: rotateX(180deg);
-    }
-    100% {
-      transform: rotateX(0deg);
-    }
-  }
 }

package/atoms/Icons/svg/Actions/index.js

@@ -1,140 +0,0 @@
-import { lazy as e } from "react";
-import { registerSvgIcons as m } from "../SvgIconResolver.js";
-m("actions", [
-  {
-    name: "ArrowDefault",
-    withOrientation: !0,
-    element: e(() => import("../../../../ArrowDefault-BiqeV8PZ.js"))
-  },
-  {
-    name: "ArrowFilled",
-    withOrientation: !0,
-    element: e(() => import("../../../../ArrowFilled-k9TnBOwE.js"))
-  },
-  {
-    name: "ArrowOutlined",
-    withOrientation: !0,
-    element: e(() => import("../../../../ArrowOutlined-cWcTSrOH.js"))
-  },
-  {
-    name: "ArrowTail",
-    withOrientation: !0,
-    element: e(() => import("../../../../ArrowTail-CS-uzwPb.js"))
-  },
-  {
-    name: "CheckDefault",
-    element: e(() => import("../../../../CheckDefault-B0P_NN5g.js"))
-  },
-  {
-    name: "CheckFilled",
-    element: e(() => import("../../../../CheckFilled-CE6y7dBG.js"))
-  },
-  {
-    name: "CheckOutlined",
-    element: e(() => import("../../../../CheckOutlined-7mZHsoR-.js"))
-  },
-  {
-    name: "Clipboard",
-    element: e(() => import("../../../../Clipboard-CkbT20Cu.js"))
-  },
-  {
-    name: "Compare",
-    element: e(() => import("../../../../Compare-DeKr3XtK.js"))
-  },
-  {
-    name: "CrossDefault",
-    element: e(() => import("../../../../CrossDefault-D5SEO1Ue.js"))
-  },
-  {
-    name: "CrossFilled",
-    element: e(() => import("../../../../CrossFilled-7sdPQqyd.js"))
-  },
-  {
-    name: "CrossOutlined",
-    element: e(() => import("../../../../CrossOutlined-MknnAT2h.js"))
-  },
-  {
-    name: "Delete",
-    element: e(() => import("../../../../Delete-BjMr32Pg.js"))
-  },
-  {
-    name: "Download",
-    element: e(() => import("../../../../Download-Lq9c9TkL.js"))
-  },
-  {
-    name: "Edit",
-    element: e(() => import("../../../../Edit-DbzfF0dw.js"))
-  },
-  {
-    name: "Error",
-    element: e(() => import("../../../../Error-BfEIgIF7.js"))
-  },
-  {
-    name: "Expand",
-    element: e(() => import("../../../../Expand-h_S8qrr7.js"))
-  },
-  {
-    name: "HeartFilled",
-    element: e(() => import("../../../../HeartFilled-8fRnEiDP.js"))
-  },
-  {
-    name: "HeartOutlined",
-    element: e(() => import("../../../../HeartOutlined-XQv25lRB.js"))
-  },
-  {
-    name: "Information",
-    element: e(() => import("../../../../Information-DpUDpqmi.js"))
-  },
-  {
-    name: "MinusDefault",
-    element: e(() => import("../../../../MinusDefault-DnR1pygW.js"))
-  },
-  {
-    name: "MinusFilled",
-    element: e(() => import("../../../../MinusFilled-D2YjqecH.js"))
-  },
-  {
-    name: "MinusOutlined",
-    element: e(() => import("../../../../MinusOutlined-DGUgx9K_.js"))
-  },
-  {
-    name: "New",
-    element: e(() => import("../../../../New-Bq0Z2Sym.js"))
-  },
-  {
-    name: "PlusDefault",
-    element: e(() => import("../../../../PlusDefault-B5UkFiiW.js"))
-  },
-  {
-    name: "PlusFilled",
-    element: e(() => import("../../../../PlusFilled-BswWOlrV.js"))
-  },
-  {
-    name: "PlusOutlined",
-    element: e(() => import("../../../../PlusOutlined-CFAmW8tY.js"))
-  },
-  {
-    name: "Reduce",
-    element: e(() => import("../../../../Reduce-DyOKdeM_.js"))
-  },
-  {
-    name: "Reload",
-    element: e(() => import("../../../../Reload-DYIQpHzz.js"))
-  },
-  {
-    name: "Search",
-    element: e(() => import("../../../../Search-Bg4l7XhB.js"))
-  },
-  {
-    name: "Share",
-    element: e(() => import("../../../../Share-dc4d21Ya.js"))
-  },
-  {
-    name: "StarFilled",
-    element: e(() => import("../../../../StarFilled-B54CCecS.js"))
-  },
-  {
-    name: "StarOutlined",
-    element: e(() => import("../../../../StarOutlined-B5D3RwXQ.js"))
-  }
-]);