@tribepad/themis 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",
@@ -130,38 +130,38 @@
     "react-aria": "^3.35.0",
     "react-aria-components": "^1.5.0",
     "react-stately": "^3.33.0",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.0.0",
+    "@eslint/js": "^9.39.3",
     "@size-limit/preset-small-lib": "^11.0.0",
-    "@storybook/addon-a11y": "^10.2.8",
-    "@storybook/react-vite": "^10.2.8",
-    "@tailwindcss/vite": "^4.1.18",
+    "@storybook/addon-a11y": "^10.2.10",
+    "@storybook/react-vite": "^10.2.10",
+    "@tailwindcss/vite": "^4.2.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
-    "@types/node": "^25.2.2",
-    "@types/react": "^19.0.0",
+    "@types/node": "^25.3.5",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "@vitejs/plugin-react": "^5.1.3",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "@vitejs/plugin-react": "^5.1.4",
     "@vitest/coverage-v8": "^4.0.0",
     "eslint": "^9.0.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "globals": "^17.3.0",
-    "happy-dom": "^20.5.3",
+    "happy-dom": "^20.7.0",
     "jest-axe": "^10.0.0",
-    "jsdom": "^28.0.0",
+    "jsdom": "^28.1.0",
     "lucide-react": ">=0.400.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "size-limit": "^11.0.0",
-    "storybook": "^10.2.8",
+    "storybook": "^10.2.10",
     "tsup": "^8.0.0",
     "tsx": "^4.0.0",
-    "typescript": "^5.6.0",
+    "typescript": "^5.9.3",
     "vitest": "^4.0.18",
     "zod": "^4.3.6"
   },

package/src/elements/MatrixGrid/MatrixGrid.stories.tsx

@@ -0,0 +1,292 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MatrixGrid } from './MatrixGrid';
+
+const LIKERT_COLUMNS = [
+  { id: 'sd', label: 'Strongly Disagree' },
+  { id: 'd', label: 'Disagree' },
+  { id: 'n', label: 'Neutral' },
+  { id: 'a', label: 'Agree' },
+  { id: 'sa', label: 'Strongly Agree' },
+];
+
+const LIKERT_ROWS = [
+  { id: 'q1', label: 'The product meets my needs' },
+  { id: 'q2', label: 'The product is easy to use' },
+  { id: 'q3', label: 'The product is reliable' },
+];
+
+const meta = {
+  title: 'Elements/MatrixGrid',
+  component: MatrixGrid,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Grid-style survey question with rows (statements) and columns (rating options). Each row has a single radio selection. Built with role="grid" ARIA pattern for 2D keyboard navigation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+      description: 'Component size',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    isDisabled: { control: 'boolean' },
+    isReadOnly: { control: 'boolean' },
+    isRequired: { control: 'boolean' },
+    isInvalid: { control: 'boolean' },
+    label: { control: 'text' },
+    description: { control: 'text' },
+    errorMessage: { control: 'text' },
+  },
+} satisfies Meta<typeof MatrixGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// =============================================================================
+// Default
+// =============================================================================
+
+export const Default: Story = {
+  args: {
+    label: 'Product Evaluation',
+    rows: LIKERT_ROWS,
+    columns: LIKERT_COLUMNS,
+  },
+};
+
+// =============================================================================
+// Large Matrix
+// =============================================================================
+
+export const LargeMatrix: Story = {
+  args: {
+    label: 'Comprehensive Service Assessment',
+    rows: [
+      { id: 'q1', label: 'Quality of service' },
+      { id: 'q2', label: 'Value for money' },
+      { id: 'q3', label: 'Staff friendliness' },
+      { id: 'q4', label: 'Wait time' },
+      { id: 'q5', label: 'Cleanliness of facility' },
+      { id: 'q6', label: 'Ease of scheduling' },
+      { id: 'q7', label: 'Communication clarity' },
+      { id: 'q8', label: 'Follow-up care' },
+    ],
+    columns: [
+      { id: 'vp', label: 'Very Poor' },
+      { id: 'p', label: 'Poor' },
+      { id: 'f', label: 'Fair' },
+      { id: 'g', label: 'Good' },
+      { id: 'vg', label: 'Very Good' },
+      { id: 'e', label: 'Excellent' },
+      { id: 'na', label: 'N/A' },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Large matrix with 8 rows and 7 columns. Scrolls horizontally on small screens.' },
+    },
+  },
+};
+
+// =============================================================================
+// Sizes
+// =============================================================================
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <MatrixGrid
+        label="Small"
+        rows={LIKERT_ROWS.slice(0, 2)}
+        columns={LIKERT_COLUMNS}
+        size="sm"
+      />
+      <MatrixGrid
+        label="Default"
+        rows={LIKERT_ROWS.slice(0, 2)}
+        columns={LIKERT_COLUMNS}
+        size="default"
+      />
+      <MatrixGrid
+        label="Large"
+        rows={LIKERT_ROWS.slice(0, 2)}
+        columns={LIKERT_COLUMNS}
+        size="lg"
+      />
+    </div>
+  ),
+};
+
+// =============================================================================
+// States
+// =============================================================================
+
+export const Disabled: Story = {
+  args: {
+    label: 'Survey (Closed)',
+    rows: LIKERT_ROWS,
+    columns: LIKERT_COLUMNS,
+    value: { q1: 'a', q2: 'sa', q3: 'n' },
+    isDisabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    label: 'Previous Responses',
+    rows: LIKERT_ROWS,
+    columns: LIKERT_COLUMNS,
+    value: { q1: 'sa', q2: 'a', q3: 'n' },
+    isReadOnly: true,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: 'Required Assessment',
+    rows: LIKERT_ROWS,
+    columns: LIKERT_COLUMNS,
+    isRequired: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    label: 'Assessment',
+    rows: LIKERT_ROWS,
+    columns: LIKERT_COLUMNS,
+    isInvalid: true,
+    errorMessage: 'Please answer all rows before continuing.',
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: 'Training Effectiveness',
+    description: 'Rate each aspect of the training programme you attended.',
+    rows: LIKERT_ROWS,
+    columns: LIKERT_COLUMNS,
+  },
+};
+
+// =============================================================================
+// Controlled Example
+// =============================================================================
+
+export const ControlledExample: Story = {
+  render: () => {
+    const [value, setValue] = useState<Record<string, string | null>>({});
+    return (
+      <div className="max-w-2xl">
+        <MatrixGrid
+          label="Controlled Matrix"
+          rows={LIKERT_ROWS}
+          columns={LIKERT_COLUMNS}
+          value={value}
+          onChange={setValue}
+        />
+        <pre className="mt-4 rounded bg-[var(--muted)] p-3 text-xs">
+          {JSON.stringify(value, null, 2)}
+        </pre>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Controlled component with state displayed below.' },
+    },
+  },
+};
+
+// =============================================================================
+// Real-world Examples
+// =============================================================================
+
+export const SatisfactionSurvey: Story = {
+  render: () => {
+    const [value, setValue] = useState<Record<string, string | null>>({});
+    const rows = [
+      { id: 'onboarding', label: 'Onboarding process' },
+      { id: 'tools', label: 'Tools and resources' },
+      { id: 'management', label: 'Management support' },
+      { id: 'culture', label: 'Company culture' },
+      { id: 'growth', label: 'Growth opportunities' },
+    ];
+    const columns = [
+      { id: 'vs', label: 'Very Unsatisfied' },
+      { id: 's', label: 'Unsatisfied' },
+      { id: 'n', label: 'Neutral' },
+      { id: 'st', label: 'Satisfied' },
+      { id: 'vst', label: 'Very Satisfied' },
+    ];
+    const answered = Object.keys(value).length;
+    return (
+      <div className="max-w-2xl rounded-lg border border-[var(--border)] bg-[var(--content-background)] p-6">
+        <MatrixGrid
+          label="Employee Satisfaction Survey"
+          description="Please rate your satisfaction with each aspect of your role."
+          rows={rows}
+          columns={columns}
+          value={value}
+          onChange={setValue}
+          isRequired
+        />
+        <p className="mt-3 text-sm text-[var(--muted-foreground)]">
+          {answered} of {rows.length} answered
+        </p>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Employee satisfaction survey with progress indicator.' },
+    },
+  },
+};
+
+export const EmployeeFeedback: Story = {
+  args: {
+    label: 'Peer Feedback',
+    description: 'Rate your colleague on the following competencies.',
+    rows: [
+      { id: 'comm', label: 'Communication' },
+      { id: 'team', label: 'Teamwork' },
+      { id: 'init', label: 'Initiative' },
+      { id: 'quality', label: 'Quality of work' },
+      { id: 'time', label: 'Time management' },
+    ],
+    columns: [
+      { id: 'ni', label: 'Needs Improvement' },
+      { id: 'me', label: 'Meets Expectations' },
+      { id: 'ee', label: 'Exceeds Expectations' },
+      { id: 'ex', label: 'Exceptional' },
+    ],
+    isRequired: true,
+  },
+  parameters: {
+    docs: {
+      description: { story: '360-degree feedback form with 4-point competency scale.' },
+    },
+  },
+};
+
+export const CustomStyling: Story = {
+  args: {
+    label: 'Custom Styled Grid',
+    rows: LIKERT_ROWS.slice(0, 2),
+    columns: LIKERT_COLUMNS.slice(0, 3),
+    className: 'p-4 rounded-lg border border-[var(--border)] bg-[var(--content-background)]',
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Demonstrates custom className pass-through for container styling.' },
+    },
+  },
+};