@syscore/ui-library 1.1.12 → 1.2.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/components/ui/Tag.tsx

@@ -1,127 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-export type TagStatus = "todo" | "low" | "medium" | "high" | "done";
-
-export interface TagProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  children: React.ReactNode;
-  active?: boolean;
-  status?: TagStatus;
-  variant?: "light" | "dark";
-  onClick?: () => void;
-}
-
-const getStatusColors = (
-  status: TagStatus,
-  variant: "light" | "dark" = "light",
-) => {
-  const colors = {
-    light: {
-      todo: {
-        bg: "bg-gray-100",
-        text: "text-gray-600",
-      },
-      low: {
-        bg: "bg-cyan-100",
-        text: "text-cyan-600",
-      },
-      medium: {
-        bg: "bg-plum-100",
-        text: "text-plum-600",
-      },
-      high: {
-        bg: "bg-coral-100",
-        text: "text-coral-600",
-      },
-      done: {
-        bg: "bg-emerald-100",
-        text: "text-emerald-600",
-      },
-    },
-    dark: {
-      todo: {
-        bg: "bg-gray-600",
-        text: "text-gray-100",
-      },
-      low: {
-        bg: "bg-cyan-700",
-        text: "text-cyan-100",
-      },
-      medium: {
-        bg: "bg-plum-700",
-        text: "text-plum-100",
-      },
-      high: {
-        bg: "bg-coral-700",
-        text: "text-coral-100",
-      },
-      done: {
-        bg: "bg-emerald-700",
-        text: "text-emerald-100",
-      },
-    },
-  };
-
-  return colors[variant][status];
-};
-
-export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
-  (
-    {
-      children,
-      active = false,
-      status,
-      variant = "light",
-      className,
-      onClick,
-      ...props
-    },
-    ref,
-  ) => {
-    // Status tag styling
-    if (status) {
-      const statusColors = getStatusColors(status, variant);
-      return (
-        <button
-          ref={ref}
-          onClick={onClick}
-          className={cn(
-            "inline-flex items-center p-[8px] rounded-[6px] w-fit",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-            "disabled:opacity-50 disabled:cursor-not-allowed",
-            statusColors.bg,
-            statusColors.text,
-            className,
-          )}
-          {...props}
-        >
-          <span className="overline-medium">{children}</span>
-        </button>
-      );
-    }
-
-    // Dual-state general purpose tag styling
-    return (
-      <button
-        ref={ref}
-        onClick={onClick}
-        className={cn(
-          "inline-flex items-center h-[32px] px-[12px] py-0 rounded-[6px] w-fit",
-
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-          "disabled:opacity-50 disabled:cursor-not-allowed",
-          active
-            ? "bg-white border border-cyan-300 text-gray-800 hover:border-cyan-400"
-            : "bg-blue-100 text-blue-700 hover:bg-blue-200",
-          className,
-        )}
-        {...props}
-      >
-        <span className="body-small font-medium">{children}</span>
-      </button>
-    );
-  },
-);
-
-Tag.displayName = "Tag";

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,
-            },
-          ],
-        },
-      ]}
-    />
-  ),
-};