@tribepad/themis 1.0.17 → 1.1.0

package/src/elements/Chart/Chart.stories.tsx

@@ -29,8 +29,8 @@ const meta = {
   argTypes: {
     type: {
       control: 'select',
-      options: ['bar', 'line'],
-      description: 'Chart type: bar or line',
+      options: ['bar', 'line', 'area', 'scatter', 'pie', 'radar'],
+      description: 'Chart type',
     },
     variant: {
       control: 'select',
@@ -614,3 +614,187 @@ export const AllThemes: Story = {
     </div>
   ),
 };
+
+// ============================================================================
+// Area Chart Stories
+// ============================================================================
+
+const areaData: DataSeries[] = [
+  {
+    name: 'Done',
+    color: '#155e75',
+    data: [
+      { label: 'Week 1', value: 5 },
+      { label: 'Week 2', value: 12 },
+      { label: 'Week 3', value: 18 },
+      { label: 'Week 4', value: 25 },
+    ],
+  },
+  {
+    name: 'In Progress',
+    color: '#1e40af',
+    data: [
+      { label: 'Week 1', value: 8 },
+      { label: 'Week 2', value: 6 },
+      { label: 'Week 3', value: 10 },
+      { label: 'Week 4', value: 7 },
+    ],
+  },
+  {
+    name: 'Backlog',
+    color: '#64748b',
+    data: [
+      { label: 'Week 1', value: 20 },
+      { label: 'Week 2', value: 15 },
+      { label: 'Week 3', value: 10 },
+      { label: 'Week 4', value: 6 },
+    ],
+  },
+];
+
+export const AreaChart: Story = {
+  args: {
+    data: areaData,
+    type: 'area',
+    title: 'Cumulative Flow',
+    description: 'Stacked area showing card distribution over time',
+    xAxisLabel: 'Week',
+    yAxisLabel: 'Cards',
+    stacked: true,
+  },
+};
+
+export const AreaChartUnstacked: Story = {
+  args: {
+    data: areaData.slice(0, 2),
+    type: 'area',
+    title: 'Overlapping Areas',
+    description: 'Non-stacked area chart with overlapping series',
+    xAxisLabel: 'Week',
+    yAxisLabel: 'Cards',
+    stacked: false,
+  },
+};
+
+// ============================================================================
+// Scatter Chart Stories
+// ============================================================================
+
+const scatterData: DataSeries[] = [
+  {
+    name: 'Story',
+    color: '#1e40af',
+    data: [
+      { label: '1 SP', value: 2 },
+      { label: '2 SP', value: 3 },
+      { label: '3 SP', value: 5 },
+      { label: '5 SP', value: 8 },
+      { label: '8 SP', value: 12 },
+    ],
+  },
+  {
+    name: 'Bug',
+    color: '#9a3412',
+    data: [
+      { label: '1 SP', value: 1 },
+      { label: '2 SP', value: 2 },
+      { label: '3 SP', value: 4 },
+      { label: '5 SP', value: 6 },
+    ],
+  },
+];
+
+export const ScatterChart: Story = {
+  args: {
+    data: scatterData,
+    type: 'scatter',
+    title: 'Cycle Time vs Story Points',
+    description: 'Each point represents a completed card',
+    xAxisLabel: 'Story Points',
+    yAxisLabel: 'Cycle Time (days)',
+  },
+};
+
+// ============================================================================
+// Pie / Donut Chart Stories
+// ============================================================================
+
+const pieData: DataSeries[] = [
+  {
+    name: 'Investment',
+    data: [
+      { label: 'Features', value: 12 },
+      { label: 'Bugs', value: 5 },
+      { label: 'Tech Debt', value: 3 },
+      { label: 'Spikes', value: 2 },
+    ],
+  },
+];
+
+export const PieChart: Story = {
+  args: {
+    data: pieData,
+    type: 'pie',
+    title: 'Investment Balance',
+    description: 'Distribution of cards by type',
+  },
+};
+
+export const DonutChart: Story = {
+  args: {
+    data: pieData,
+    type: 'pie',
+    innerRadius: 50,
+    title: 'Investment Balance (Donut)',
+    description: 'Donut variant with inner radius',
+  },
+};
+
+// ============================================================================
+// Radar Chart Stories
+// ============================================================================
+
+const radarData: DataSeries[] = [
+  {
+    name: 'Performance',
+    color: '#1e40af',
+    data: [
+      { label: 'Deploy Freq', value: 75 },
+      { label: 'Lead Time', value: 50 },
+      { label: 'Change Fail', value: 25 },
+      { label: 'Recovery', value: 75 },
+      { label: 'Rework', value: 75 },
+    ],
+  },
+];
+
+export const RadarChart: Story = {
+  args: {
+    data: radarData,
+    type: 'radar',
+    title: 'DORA Performance',
+    description: 'Radar view of DORA metrics',
+  },
+};
+
+export const RadarChartMultiSeries: Story = {
+  args: {
+    data: [
+      ...radarData,
+      {
+        name: 'Target',
+        color: '#155e75',
+        data: [
+          { label: 'Deploy Freq', value: 90 },
+          { label: 'Lead Time', value: 80 },
+          { label: 'Change Fail', value: 90 },
+          { label: 'Recovery', value: 85 },
+          { label: 'Rework', value: 80 },
+        ],
+      },
+    ],
+    type: 'radar',
+    title: 'DORA: Actual vs Target',
+    description: 'Multi-series radar comparing current performance to targets',
+  },
+};

package/src/elements/Modal/Modal.stories.tsx

@@ -357,8 +357,8 @@ export const NotDismissable: Story = {
 
 /**
  * Controlled Mode
- * Modal with external state control
- * Demonstrates programmatic open/close
+ * Modal with external state control and no trigger
+ * Demonstrates programmatic open/close without Modal.Trigger
  */
 export const ControlledMode: Story = {
   render: () => {
@@ -368,8 +368,8 @@ export const ControlledMode: Story = {
       return (
         <div className="space-y-4">
           <div className="flex gap-2">
-            <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-            <Button variant="outline" onClick={() => setIsOpen(false)}>
+            <Button onPress={() => setIsOpen(true)}>Open Modal</Button>
+            <Button variant="outline" onPress={() => setIsOpen(false)}>
               Close Modal
             </Button>
           </div>
@@ -377,15 +377,12 @@ export const ControlledMode: Story = {
             Modal is currently: {isOpen ? 'Open' : 'Closed'}
           </p>
           <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
-            <Modal.Trigger>
-              <Button>Toggle Modal</Button>
-            </Modal.Trigger>
             <Modal.Content>
               <Modal.Header>
                 <Modal.Title>Controlled Modal</Modal.Title>
                 <Modal.Description>
-                  This modal is controlled via external state. You can open or
-                  close it using the buttons above.
+                  This modal is controlled via external state with no
+                  Modal.Trigger. Open and close it using the buttons above.
                 </Modal.Description>
               </Modal.Header>
               <Modal.Footer>