@caseparts-org/caseblocks 0.0.1

package/dist/organisms/ChipSelector/ChipSelector.stories.js

@@ -0,0 +1,51 @@
+import { jsx as i } from "react/jsx-runtime";
+import { ChipSelector as t } from "./ChipSelector.js";
+const a = {
+  title: "Case Parts/Organisms/ChipSelector",
+  component: t,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"]
+}, o = {
+  args: {
+    chips: [
+      { id: 1, text: "Chip 1", variant: "selectable", selected: !0 },
+      { id: 2, text: "Chip 2", variant: "selectable", selected: !0 },
+      { id: 3, text: "Chip 3", variant: "selectable", selected: !0 }
+    ],
+    onChipSelect: (e) => console.log(`Chip ${e} selected`),
+    onChipDismiss: (e) => console.log(`Chip ${e} dismissed`)
+  }
+}, c = {
+  render: () => /* @__PURE__ */ i(
+    t,
+    {
+      chips: [
+        {
+          id: 1,
+          text: "Selectable Chip",
+          variant: "selectable",
+          selected: !0
+        },
+        {
+          id: 1,
+          text: "Selectable Chip",
+          variant: "selectable",
+          selected: !1
+        },
+        { id: 2, text: "Dismissable Chip", variant: "dismissable" },
+        { id: 3, text: "Pill Chip", variant: "pill" }
+      ],
+      onChipSelect: (e) => console.log(`Chip ${e} selected`),
+      onChipDismiss: (e) => console.log(`Chip ${e} dismissed`)
+    }
+  )
+};
+export {
+  o as AllProps,
+  c as Variants,
+  a as default
+};

package/dist/organisms/MainNav/MainNav.d.ts

@@ -0,0 +1,4 @@
+import { AccountProps } from '../../molecules/Account/Account';
+export interface MainNavProps extends React.HTMLAttributes<HTMLDivElement>, Pick<AccountProps, "account"> {
+}
+export declare function MainNav({ account }: MainNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/MainNav/MainNav.js

@@ -0,0 +1,103 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { Grid as s, Column as l } from "../../atoms/Grid/Grid.js";
+import { Flex as t } from "../../atoms/Flex/Flex.js";
+import { Text as a } from "../../atoms/Text/Text.js";
+import { Logo as m } from "../../molecules/Logo/Logo.js";
+import { Link as r } from "../../atoms/Link/Link.js";
+import { Icon as c } from "../../atoms/Icon/Icon.js";
+import { Separator as d } from "../../atoms/Separator/Separator.js";
+import { SearchBox as h } from "../../molecules/SearchBox/SearchBox.js";
+import { Account as f } from "../../molecules/Account/Account.js";
+import '../../assets/MainNav.css';const p = "_logoAndSearch_3a8de_1", _ = "_searchContainer_3a8de_7", u = "_menu_3a8de_25", I = "_chatIcon_3a8de_31", g = "_siteLink_3a8de_43", x = "_accountId_3a8de_51", N = "_menuIcon_3a8de_57", k = "_separator_3a8de_67", n = {
+  logoAndSearch: p,
+  searchContainer: _,
+  menu: u,
+  chatIcon: I,
+  siteLink: g,
+  accountId: x,
+  menuIcon: N,
+  separator: k
+};
+function j({ account: o }) {
+  return /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(l, { span: 12, children: /* @__PURE__ */ i(
+    t,
+    {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [
+        /* @__PURE__ */ i(
+          t,
+          {
+            flexDirection: ["column", "row", "row"],
+            alignItems: ["flex-start", "center", "center"],
+            className: n.logoAndSearch,
+            children: [
+              /* @__PURE__ */ e(m, {}),
+              /* @__PURE__ */ e("div", { className: n.searchContainer, children: /* @__PURE__ */ e(h, { action: "/search" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          t,
+          {
+            flexDirection: ["column", "row", "row"],
+            alignItems: "center",
+            className: n.menu,
+            children: [
+              /* @__PURE__ */ i(
+                t,
+                {
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: ["space-between", "flex-start", "flex-start"],
+                  children: [
+                    /* @__PURE__ */ e(
+                      c,
+                      {
+                        iconKey: "fa-kit fa-chat",
+                        className: n.chatIcon,
+                        title: "Live Chat",
+                        size: "lg"
+                      }
+                    ),
+                    /* @__PURE__ */ e(r, { href: "#", className: n.siteLink, hideAt: ["sm", "md"], children: /* @__PURE__ */ e(a, { size: "md", variant: "display", children: "Live Chat" }) }),
+                    /* @__PURE__ */ i(
+                      t,
+                      {
+                        flexDirection: "row",
+                        className: n.siteLinks,
+                        hideAt: ["sm", "md"],
+                        children: [
+                          /* @__PURE__ */ e(r, { href: "#", className: n.siteLink, children: /* @__PURE__ */ e(a, { size: "md", variant: "display", children: "Custom Parts" }) }),
+                          /* @__PURE__ */ e(r, { href: "#", className: n.siteLink, children: /* @__PURE__ */ e(a, { size: "md", variant: "display", children: "FAQ" }) }),
+                          /* @__PURE__ */ e(r, { href: "#", className: n.siteLink, children: /* @__PURE__ */ e(a, { size: "md", variant: "display", children: "About Us" }) })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ e(t, { flexDirection: "row", hideAt: "lg", className: n.menuIcon, children: /* @__PURE__ */ e(c, { iconKey: "fa-kit fa-bars", title: "Menu", size: "lg" }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ i(t, { flexDirection: "row", alignItems: "center", children: [
+                /* @__PURE__ */ e(f, { account: o, className: n.avatar }),
+                /* @__PURE__ */ e(d, { orientation: "vertical", className: n.separator }),
+                /* @__PURE__ */ e(
+                  c,
+                  {
+                    iconKey: "fa-kit fa-shoppingcart-empty",
+                    title: "Shopping Cart",
+                    size: "lg"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+export {
+  j as MainNav
+};

package/dist/organisms/MainNav/MainNav.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react';
+import { MainNav } from './MainNav';
+declare const meta: {
+    title: string;
+    component: typeof MainNav;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Unauthenticated: Story;
+export declare const Authenticated: Story;

package/dist/organisms/MainNav/MainNav.stories.js

@@ -0,0 +1,24 @@
+import { MainNav as t } from "./MainNav.js";
+const e = {
+  title: "Case Parts/Organisms/MainNav",
+  component: t,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  }
+}, n = {
+  args: {}
+}, s = {
+  args: {
+    account: {
+      name: "Ringo",
+      initials: "RS",
+      number: "123456789012"
+    }
+  }
+};
+export {
+  s as Authenticated,
+  n as Unauthenticated,
+  e as default
+};

package/dist/styles/tokens.css

@@ -0,0 +1,243 @@
+/* Exported from Figma on Feb 24, 2025, using the variables2css plugin. */
+/*  Note that Figma contains both Desktop and Mobile modes, but we only capture the Desktop ones. */
+
+/* Primitives */
+:root {
+  /* Desktop */
+  /* color */
+  --color-alerts-caution-tips: #ffd041;
+  --color-alerts-error-warning: #d40000;
+  --color-alerts-light-green: #f0f7f4;
+  --color-alerts-light-orange: #fdf0e9;
+  --color-alerts-light-red: #fdf2f2;
+  --color-alerts-light-teal-blue: #eaf2f9;
+  --color-alerts-light-yellow: #fff6d9;
+  --color-alerts-masked-edit-mode: #00bce2;
+  --color-alerts-success: #00aa00;
+  --color-alerts-warning: #f06721;
+  --color-brand-primary-primary-black: #000000;
+  --color-brand-primary-primary-pale-gray: #f7f7f7;
+  --color-brand-primary-primary-tangerine: #f06721;
+  --color-brand-primary-primary-teal-blue: #1380b1;
+  --color-brand-primary-white: #ffffff;
+  --color-brand-secondary-dark-green: #008800;
+  --color-brand-secondary-dark-orange: #d75c1e;
+  --color-brand-secondary-dark-red: #bb0000;
+  --color-brand-secondary-dark-teal-blue: #0e6da1;
+  --color-brand-secondary-dark-yellow: #e5a914;
+  --color-brand-secondary-lt-green: #f0f7f4;
+  --color-brand-secondary-lt-orange: #fdf0e9;
+  --color-brand-secondary-lt-red: #fdf2f2;
+  --color-brand-secondary-lt-teal-blue: #eaf2f9;
+  --color-brand-secondary-lt-yellow: #fff6d9;
+  --color-neutrals-neutral-1: #f6f6f6;
+  --color-neutrals-neutral-2: #dfdfdf;
+  --color-neutrals-neutral-3: #b2b2b2;
+  --color-neutrals-neutral-4: #707070;
+  --color-neutrals-neutral-5: #4a4a4a;
+  --color-neutrals-neutral-6: #2d2d2d;
+  --color-neutrals-text-disabled: #b2b2b2;
+  /* number */
+  --border-radius-none: 0rem;
+  --border-radius-xs: 0.125rem;
+  --border-radius-sm: 0.25rem;
+  --border-radius-md: 0.5rem;
+  --border-radius-lg: 0.75rem;
+  --font-size-xxs: 0.625rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 2rem;
+  --font-size-4xl: 2.5rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.5rem;
+  --font-weight-thin: 100;
+  --font-weight-extra-light: 200;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --grid-columns-full-width: 0.0625rem;
+  --grid-columns-2-column: 0.125rem;
+  --grid-columns-3-column: 0.1875rem;
+  --grid-columns-4-column: 0.25rem;
+  --grid-columns-6-column: 0.375rem;
+  --grid-columns-12-column: 0.75rem;
+
+  /* Column widths on mobile: not sure what to do with these, if anything.
+     We don't even use the column widths on desktop.
+  --grid-columns-12-column: 0rem;
+  --grid-columns-3-column: 0rem;
+  --grid-columns-6-column: 0rem;
+  --grid-columns-full-width: 0.0625rem;
+  --grid-columns-2-column: 0.125rem;
+  --grid-columns-4-column: 0.25rem;
+  */
+
+  --line-height-xxs: 0.75rem;
+  --line-height-xs: 0.875rem;
+  --line-height-sm: 1rem;
+  --line-height-md: 1.125rem;
+  --line-height-lg: 1.25rem;
+  --line-height-xl: 1.5rem;
+  --line-height-2xl: 2rem;
+  --line-height-3xl: 2.5rem;
+  --line-height-4xl: 3rem;
+  --line-height-5xl: 3.5rem;
+  --line-height-6xl: 4rem;
+  --spacing-0-125: 0.125rem;
+  --spacing-0-25: 0.25rem;
+  --spacing-0-5: 0.5rem;
+  --spacing-0-75: 0.75rem;
+  --spacing-1: 1rem;
+  --spacing-1-125: 1.125rem;
+  --spacing-1-25: 1.25rem;
+  --spacing-1-5: 1.5rem;
+  --spacing-2: 2rem;
+  --spacing-2-5: 2.5rem;
+  --spacing-3: 3rem;
+  --spacing-3-5: 3.5rem;
+  --spacing-4: 4rem;
+  --spacing-4-5: 4.5rem;
+  --spacing-5: 5rem;
+  --spacing-6: 6rem;
+  --spacing-7: 7rem;
+  --spacing-8: 8rem;
+}
+/* Tokens */
+:root {
+  /* Value */
+  /* color */
+  --border-border-black-box: var(--surface-surface-tertiary-btn);
+  --border-border-error-warning: var(--color-alerts-error-warning);
+  --border-border-help: var(--color-alerts-caution-tips);
+  --border-border-primary: var(--color-neutrals-neutral-2);
+  --border-border-primary-btn: var(--color-brand-primary-primary-teal-blue);
+  --border-border-primary-chit: var(--color-brand-primary-primary-teal-blue);
+  --border-border-secondary-btn: var(--color-neutrals-neutral-2);
+  --border-border-success: var(--color-alerts-success);
+  --border-border-warning: var(--color-alerts-warning);
+  --icons-icon-caution-tips: #ffd041;
+  --icons-icon-default: var(--color-brand-primary-primary-black);
+  --icons-icon-error-warning: var(--color-alerts-error-warning);
+  --icons-icon-invert: var(--color-brand-primary-primary-pale-gray);
+  --icons-icon-masked-edit-mode: #00bce2;
+  --icons-icon-primary: var(--color-neutrals-neutral-2);
+  --icons-icon-search: var(--color-neutrals-neutral-5);
+  --icons-icon-secondary: var(--color-brand-primary-primary-teal-blue);
+  --icons-icon-success: var(--color-alerts-success);
+  --icons-icon-warning: var(--color-brand-primary-primary-tangerine);
+  --icons-icon-white: var(--color-brand-primary-white);
+  --surface-surface-alert: var(--color-brand-primary-primary-tangerine);
+  --surface-surface-call-to-action-btn: var(
+    --color-brand-primary-primary-tangerine
+  );
+  --surface-surface-call-to-action-btn-focus: var(
+    --color-brand-secondary-dark-orange
+  );
+  --surface-surface-disabled-btn: var(--color-neutrals-neutral-2);
+  --surface-surface-disabled-btn-focus: var(--color-brand-primary-white);
+  --surface-surface-error-warning-btn: var(--color-alerts-error-warning);
+  --surface-surface-error-warning-btn-focus: var(
+    --color-brand-secondary-dark-red
+  );
+  --surface-surface-invert: var(--color-neutrals-neutral-6);
+  --surface-surface-page: var(--color-brand-primary-white);
+  --surface-surface-primary: var(--color-brand-primary-white);
+  --surface-surface-primary-btn: var(--color-brand-primary-primary-teal-blue);
+  --surface-surface-primary-btn-focus: var(
+    --color-brand-secondary-dark-teal-blue
+  );
+  --surface-surface-primary-chit: var(--color-brand-primary-primary-teal-blue);
+  --surface-surface-quaternary: var(--color-neutrals-neutral-5);
+  --surface-surface-search-bar: var(--color-neutrals-neutral-1);
+  --surface-surface-secondary: var(--color-neutrals-neutral-1);
+  --surface-surface-secondary-btn: var(--color-brand-primary-white);
+  --surface-surface-tertiary: var(--color-brand-primary-primary-black);
+  --surface-surface-tertiary-btn: var(--color-brand-primary-primary-black);
+  --surface-surface-tertiary-btn-focus: var(--color-brand-primary-white);
+  --surface-surface-text-links: var(--color-brand-primary-white);
+  --text-text-caution: var(--color-brand-primary-primary-tangerine);
+  --text-text-disabled: var(--color-neutrals-text-disabled);
+  --text-text-error-warning: var(--color-alerts-error-warning);
+  --text-text-invert: var(--color-neutrals-neutral-1);
+  --text-text-links: var(--color-brand-primary-primary-teal-blue);
+  --text-text-links-hover-press: var(--color-brand-secondary-dark-teal-blue);
+  --text-text-primary: var(--color-brand-primary-primary-black);
+  --text-text-quaternary: var(--color-neutrals-neutral-4);
+  --text-text-search-bar: var(--color-neutrals-neutral-4);
+  --text-text-secondary: var(--color-brand-primary-primary-teal-blue);
+  --text-text-success: var(--color-alerts-success);
+  --text-text-tertiary: var(--color-neutrals-neutral-2);
+  /* number */
+  --radius-radius-none: var(--border-radius-none);
+  --radius-radius-minimal: var(--border-radius-xs);
+  --radius-radius-btn: var(--border-radius-sm);
+  --radius-radius-md: var(--border-radius-md);
+  --radius-radius-lg: var(--border-radius-lg);
+  --spacing-spacing-none: 0rem;
+  --spacing-spacing-4xs: var(--spacing-0-125);
+  --spacing-spacing-3xs: var(--spacing-0-25);
+  --spacing-spacing-2xs: var(--spacing-0-5);
+  --spacing-spacing-1xs: var(--spacing-0-75);
+  --spacing-spacing-default: var(--spacing-1);
+  --spacing-spacing-sm: var(--spacing-1-25);
+  --spacing-spacing-md: var(--spacing-1-5);
+  --spacing-spacing-lg: var(--spacing-2);
+  --spacing-spacing-xl: var(--spacing-2-5);
+  --spacing-spacing-2xl: var(--spacing-3);
+  --spacing-spacing-3xl: var(--spacing-3-5);
+  --spacing-spacing-4xl: var(--spacing-4);
+  --spacing-spacing-5xl: var(--spacing-5);
+  --spacing-spacing-6xl: var(--spacing-6);
+  --spacing-spacing-7xl: var(--spacing-7);
+  --spacing-spacing-8xl: var(--spacing-8);
+}
+/* Typography Tokens */
+:root {
+  /* Mode 1 */
+  /* number */
+  --font-line-height-3xs: 0.625rem;
+  --font-line-height-2xs: 0.75rem;
+  --font-line-height-xs: 0.875rem;
+  --font-line-height-sm: 1rem;
+  --font-line-height-md: 1.125rem;
+  --font-line-height-lg: 1.25rem;
+  --font-line-height-xl: 1.5rem;
+  --font-line-height-2xl: 2rem;
+  --font-line-height-3xl: 2.5rem;
+  --font-line-height-4xl: 3rem;
+  --font-line-height-5xl: 3.5rem;
+  --font-line-height-6xl: 4rem;
+  --font-size-2xs: 0.625rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 2rem;
+  --font-size-4xl: 2.5rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.5rem;
+  --font-weight-thin: 100;
+  --font-weight-extra-light: 200;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  /* string */
+  --font-family-label: Roboto;
+  --font-family-body: Roboto;
+  --font-family-body-condensed: Roboto;
+  /* Intentional modification: figma has a hyphen instead of a space between the words Roboto & Condensed. */
+  --font-family-display: "Roboto Condensed";
+  --font-family-footnote-caption: Roboto-Italic;
+  --font-family-heading: Roboto;
+  --font-family-heading-condensed: "Roboto Condensed";
+}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@caseparts-org/caseblocks",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "module": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b ./tsconfig.lib.json && vite build",
+    "lint": "eslint .",
+    "format": "prettier . --write",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@fontsource-variable/roboto-condensed": "^5.1.1",
+    "@fontsource/roboto": "^5.1.0",
+    "clsx": "^2.1.1",
+    "csstype": "^3.1.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/js": "^9.13.0",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-onboarding": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^9.13.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^0.11.1",
+    "glob": "^11.0.0",
+    "globals": "^15.11.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.2.10",
+    "prettier": "3.4.2",
+    "storybook": "^8.4.5",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-static-copy": "^2.3.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  }
+}