@syscore/ui-library 1.1.11 → 1.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syscore/ui-library",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "description": "A comprehensive React component library built with Radix UI, Tailwind CSS, and TypeScript",
   "private": false,
   "type": "module",
@@ -82,7 +82,7 @@
     "express": "^4.18.2",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.539.0",
-    "motion": "^12.23.24",
+    "motion": "^12.29.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.8.1",
     "react-hook-form": "^7.0.0",

package/client/components/ui/StrategyTable.tsx

@@ -1,303 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import { UtilityChevronDown } from "../icons/UtilityChevronDown";
-
-// Define the concept colors matching Figma design
-export const conceptColors = {
-  mind: {
-    solid: "#0a5161",
-    light: "rgba(10,81,97,0.08)",
-    border: "rgba(10,81,97,0.16)",
-    prefix: "M",
-  },
-  community: {
-    solid: "#0f748a",
-    light: "rgba(15,116,138,0.12)",
-    border: "rgba(15,116,138,0.24)",
-    prefix: "C",
-  },
-  movement: {
-    solid: "#149ebd",
-    light: "rgba(20,158,189,0.12)",
-    border: "rgba(20,158,189,0.24)",
-    prefix: "V",
-  },
-  water: {
-    solid: "#39c9ea",
-    light: "rgba(57,201,234,0.12)",
-    border: "rgba(57,201,234,0.24)",
-    prefix: "W",
-  },
-  air: {
-    solid: "#87dff2",
-    light: "rgba(135,223,242,0.12)",
-    border: "rgba(135,223,242,0.24)",
-    prefix: "A",
-  },
-  light: {
-    solid: "#8aefdb",
-    light: "rgba(138,239,219,0.12)",
-    border: "rgba(138,239,219,0.24)",
-    prefix: "L",
-  },
-  thermalComfort: {
-    solid: "#3eddbf",
-    light: "rgba(62,221,191,0.12)",
-    border: "rgba(62,221,191,0.24)",
-    prefix: "T",
-  },
-  nourishment: {
-    solid: "#17aa8d",
-    light: "rgba(23,170,141,0.12)",
-    border: "rgba(23,170,141,0.24)",
-    prefix: "N",
-  },
-  sound: {
-    solid: "#0c705c",
-    light: "rgba(12,112,92,0.12)",
-    border: "rgba(12,112,92,0.24)",
-    prefix: "S",
-  },
-  materials: {
-    solid: "#0a4f41",
-    light: "rgba(10,79,65,0.08)",
-    border: "rgba(10,79,65,0.16)",
-    prefix: "X",
-  },
-} as const;
-
-export type ConceptType = keyof typeof conceptColors;
-
-export interface StrategyItem {
-  id: string;
-  code: string;
-  name: string;
-  score?: string;
-  hasTarget?: boolean;
-}
-
-export interface ThemeItem {
-  id: string;
-  code: string;
-  name: string;
-}
-
-export interface ConceptItem {
-  id: string;
-  type: ConceptType;
-  name: string;
-  icon: React.ReactNode;
-}
-
-export interface StrategyTableData {
-  concept: ConceptItem;
-  theme: ThemeItem;
-  strategies: StrategyItem[];
-}
-
-interface StrategyTableRowProps {
-  data: StrategyTableData;
-  isFirst?: boolean;
-  isLast?: boolean;
-  showConceptHeader?: boolean;
-  isExpanded?: boolean;
-}
-
-const StrategyTableRow: React.FC<StrategyTableRowProps> = ({
-  data,
-  isFirst = false,
-  isLast = false,
-  showConceptHeader = true,
-  isExpanded = true,
-}) => {
-  const { concept, theme, strategies } = data;
-  const colors = conceptColors[concept.type];
-
-  return (
-    <>
-      {/* Concept Row - always visible when showConceptHeader is true */}
-      {showConceptHeader && (
-        <div
-          className={cn(
-            "flex items-center gap-4 p-4 border border-[#DEDFE3] bg-[#FAFEFF]",
-            "border-b-0",
-            isFirst && "rounded-tl-[12px] rounded-tr-[12px]"
-          )}
-        >
-          {/* Icon */}
-          <div className="size-[48px] flex items-center justify-center shrink-0">
-            {concept.icon}
-          </div>
-
-          {/* Name */}
-          <div className="flex-1">
-            <span className="text-sm font-semibold text-[#282A31] uppercase tracking-[0.5px] leading-[14px]">
-              {concept.name}
-            </span>
-          </div>
-        </div>
-      )}
-
-      {/* Theme Row - only show if expanded */}
-      {isExpanded && (
-        <div className="flex items-center gap-4 p-4 border border-[#DEDFE3] bg-[#FAFEFF] border-b-0">
-          {/* Code Badge */}
-          <div
-            className="flex items-center justify-center h-8 w-12 rounded-[6px] shrink-0"
-            style={{ backgroundColor: colors.solid }}
-          >
-            <span className="text-sm font-semibold text-white leading-[19.6px]">
-              {theme.code}
-            </span>
-          </div>
-
-          {/* Name */}
-          <div className="flex-1">
-            <span className="text-base font-medium text-[#282A31] leading-[21px]">
-              {theme.name}
-            </span>
-          </div>
-        </div>
-      )}
-
-      {/* Strategy Rows - only show if expanded */}
-      {isExpanded && strategies.map((strategy, index) => {
-          const isLastStrategy = index === strategies.length - 1 && isLast;
-          const scoreParts = strategy.score?.split("–") || [];
-          const isRange = scoreParts.length > 1;
-          
-          return (
-            <div
-              key={strategy.id}
-              className={cn(
-                "flex items-center gap-4 pl-8 pr-4 py-4 border border-[#DEDFE3] bg-white",
-                "border-b-0",
-                isLastStrategy && "rounded-bl-[12px] rounded-br-[12px] border-b-0"
-              )}
-            >
-              {/* Code Badge */}
-              <div
-                className="flex items-center justify-center h-8 w-12 rounded-[6px] border shrink-0"
-                style={{
-                  backgroundColor: colors.light,
-                  borderColor: colors.border,
-                }}
-              >
-                <span
-                  className="text-sm font-semibold leading-[19.6px]"
-                  style={{ color: colors.solid }}
-                >
-                  {strategy.code}
-                </span>
-              </div>
-
-              {/* Name */}
-              <div className="flex-1">
-                <span className="text-base font-medium text-[#282A31] leading-[21px]">
-                  {strategy.name}
-                </span>
-              </div>
-
-              {/* Actions */}
-              <div className="flex items-center gap-4 shrink-0">
-                {strategy.hasTarget && (
-                  <div className="size-8 flex items-center justify-center">
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 14 14"
-                      fill="none"
-                      className="text-gray-400"
-                    >
-                      <circle
-                        cx="7"
-                        cy="7"
-                        r="6.25"
-                        stroke="currentColor"
-                        strokeWidth="1.5"
-                      />
-                      <circle
-                        cx="7"
-                        cy="7"
-                        r="3.5"
-                        stroke="currentColor"
-                        strokeWidth="1.5"
-                      />
-                      <circle cx="7" cy="7" r="1" fill="currentColor" />
-                    </svg>
-                  </div>
-                )}
-
-                {strategy.score && (
-                  <div className="flex items-end gap-[4px]">
-                    <span className="text-lg font-semibold text-[#282A31] leading-[25.2px]">
-                      {strategy.score}
-                    </span>
-                    <span className="text-xs font-semibold text-[#282A31] uppercase tracking-[0.5px] leading-[12px]">
-                      {isRange ? "PTS" : "PT"}
-                      {!isRange && <span className="text-transparent">S</span>}
-                    </span>
-                  </div>
-                )}
-              </div>
-            </div>
-          );
-        })}
-    </>
-  );
-};
-
-interface StrategyTableProps {
-  data: StrategyTableData[];
-  className?: string;
-  isExpanded?: boolean;
-}
-
-export const StrategyTable: React.FC<StrategyTableProps> = ({
-  data,
-  className,
-  isExpanded = true,
-}) => {
-  // Group by concept to avoid duplicate concept headers
-  const groupedData = React.useMemo(() => {
-    const groups: Record<string, StrategyTableData[]> = {};
-    data.forEach((item) => {
-      const key = item.concept.id;
-      if (!groups[key]) {
-        groups[key] = [];
-      }
-      groups[key].push(item);
-    });
-    return Object.values(groups);
-  }, [data]);
-
-  return (
-    <div className={cn("flex flex-col", className)}>
-      {groupedData.map((group, groupIndex) => {
-        const isFirstGroup = groupIndex === 0;
-        const isLastGroup = groupIndex === groupedData.length - 1;
-        
-        return group.map((item, itemIndex) => {
-          const isFirst = isFirstGroup && itemIndex === 0;
-          const isLastItemInGroup = itemIndex === group.length - 1;
-          // Check if this is the very last strategy row across all groups
-          const isLastStrategyRow = isLastGroup && isLastItemInGroup && item.strategies.length > 0;
-          const showConceptHeader = itemIndex === 0; // Only show concept header for first theme
-          const uniqueId = `${item.concept.id}-${item.theme.id}`;
-          
-          return (
-            <StrategyTableRow
-              key={uniqueId}
-              data={item}
-              isFirst={isFirst}
-              isLast={isLastStrategyRow}
-              showConceptHeader={showConceptHeader}
-              isExpanded={isExpanded}
-            />
-          );
-        });
-      })}
-    </div>
-  );
-};
-

package/client/ui/Input/Input.stories.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Input } from "../../components/ui/input";
-
-const meta = {
-  title: "UI/Input",
-  component: Input,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    placeholder: "Enter text...",
-  },
-};
-
-export const WithType: Story = {
-  render: () => (
-    <div className="space-y-4 w-full max-w-md">
-      <div>
-        <label className="text-sm font-medium mb-2 block">Text</label>
-        <Input type="text" placeholder="Enter text..." />
-      </div>
-      <div>
-        <label className="text-sm font-medium mb-2 block">Email</label>
-        <Input type="email" placeholder="Enter email..." />
-      </div>
-      <div>
-        <label className="text-sm font-medium mb-2 block">Password</label>
-        <Input type="password" placeholder="Enter password..." />
-      </div>
-      <div>
-        <label className="text-sm font-medium mb-2 block">Number</label>
-        <Input type="number" placeholder="Enter number..." />
-      </div>
-      <div>
-        <label className="text-sm font-medium mb-2 block">Date</label>
-        <Input type="date" />
-      </div>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  args: {
-    placeholder: "Disabled input",
-    disabled: true,
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    placeholder: "Read-only input",
-    value: "This is read-only",
-    readOnly: true,
-  },
-};
-
-export const WithFile: Story = {
-  args: {
-    type: "file",
-  },
-};

package/client/ui/StrategyTable.stories.tsx

@@ -1,138 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { StrategyTable } from "@/components/ui/StrategyTable";
-import {
-  IconConceptMind,
-  IconConceptCommunity,
-  IconConceptMovement,
-} from "@/components/icons/ConceptIcons";
-
-const meta = {
-  title: "Review/StrategyTable",
-  component: StrategyTable,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded",
-  },
-} satisfies Meta<typeof StrategyTable>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const mockData = [
-  {
-    concept: {
-      id: "mind",
-      type: "mind" as const,
-      name: "Mind",
-      icon: <IconConceptMind />,
-    },
-    theme: {
-      id: "theme1",
-      code: "M01",
-      name: "Mental Health Support",
-    },
-    strategies: [
-      {
-        id: "strategy1",
-        code: "M01.1",
-        name: "Mental Health Support Policy",
-        score: "12",
-        hasTarget: true,
-      },
-      {
-        id: "strategy2",
-        code: "M01.2",
-        name: "Mental Health Resources",
-        score: "8",
-        hasTarget: false,
-      },
-    ],
-  },
-  {
-    concept: {
-      id: "community",
-      type: "community" as const,
-      name: "Community",
-      icon: <IconConceptCommunity />,
-    },
-    theme: {
-      id: "theme2",
-      code: "C01",
-      name: "Social Equity",
-    },
-    strategies: [
-      {
-        id: "strategy3",
-        code: "C01.1",
-        name: "Accessibility Features",
-        score: "15",
-        hasTarget: true,
-      },
-    ],
-  },
-  {
-    concept: {
-      id: "movement",
-      type: "movement" as const,
-      name: "Movement",
-      icon: <IconConceptMovement />,
-    },
-    theme: {
-      id: "theme3",
-      code: "V01",
-      name: "Physical Activity",
-    },
-    strategies: [
-      {
-        id: "strategy4",
-        code: "V01.1",
-        name: "Active Design",
-        score: "10",
-        hasTarget: false,
-      },
-      {
-        id: "strategy5",
-        code: "V01.2",
-        name: "Exercise Facilities",
-        score: "6",
-        hasTarget: true,
-      },
-    ],
-  },
-];
-
-export const Default: Story = {
-  render: () => <StrategyTable data={mockData} />,
-};
-
-export const SingleConcept: Story = {
-  render: () => (
-    <StrategyTable
-      data={[
-        {
-          concept: {
-            id: "mind",
-            type: "mind" as const,
-            name: "Mind",
-            icon: <IconConceptMind />,
-          },
-          theme: {
-            id: "theme1",
-            code: "M01",
-            name: "Mental Health Support",
-          },
-          strategies: [
-            {
-              id: "strategy1",
-              code: "M01.1",
-              name: "Mental Health Support Policy",
-              score: "12",
-              hasTarget: true,
-            },
-          ],
-        },
-      ]}
-    />
-  ),
-};