chore(storybook): adds matrix builder, and use it in button stories

sanity-io · Sep 26, 2023 · a3fd187 · a3fd187
1 parent cb3b1b0
commit a3fd187
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 164 deletions.
diff --git a/src/primitives/button/__workshop__/index.ts b/src/primitives/button/__workshop__/index.ts
@@ -10,11 +10,6 @@ export default defineScope({
       title: 'Props',
       component: lazy(() => import('./props')),
     },
-    {
-      name: 'matrix',
-      title: 'Matrix',
-      component: lazy(() => import('./matrix')),
-    },
     {
       name: 'styled-1',
       title: 'Styled #1',

diff --git a/src/primitives/button/__workshop__/matrix.tsx b/src/primitives/button/__workshop__/matrix.tsx
diff --git a/stories/helpers/Components/MatrixBuilder.tsx b/stories/helpers/Components/MatrixBuilder.tsx
@@ -0,0 +1,74 @@
+import {Card, Text} from '../../../src/primitives'
+
+interface MatrixBuilderProps<Rows extends string[], Cols extends string[]> {
+  scheme: 'light' | 'dark'
+  columns: Cols
+  rows: Rows
+  title: string
+  renderItem: ({row, column}: {row: Rows[number]; column: Cols[number]}) => React.ReactNode
+}
+
+/**
+ * Creates a two dimensions matrix if components, to be used in Storybook when having a component
+ * that has multiple styles that can be combined.
+ */
+export function MatrixBuilder<Rows extends string[], Cols extends string[]>({
+  scheme,
+  columns,
+  rows,
+  title,
+  renderItem,
+}: MatrixBuilderProps<Rows, Cols>): JSX.Element {
+  return (
+    <Card scheme={scheme} padding={4} border marginBottom={4}>
+      <table
+        style={{
+          borderCollapse: 'collapse',
+          tableLayout: 'fixed',
+          width: '100%',
+          borderSpacing: '10px 10px',
+        }}
+      >
+        <thead>
+          <tr>
+            <th>
+              <Text weight="semibold">{title}</Text>
+            </th>
+            {columns.map((column) => (
+              <th key={column + 'head'}>
+                <Text weight="semibold" style={{textTransform: 'capitalize'}}>
+                  {column}
+                </Text>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody style={{borderTop: '16px solid transparent'}}>
+          {rows.map((row) => (
+            <tr
+              key={row}
+              style={{
+                borderBottom: '16px solid transparent',
+              }}
+            >
+              <td style={{verticalAlign: 'middle', textAlign: 'center'}}>
+                <Text
+                  style={{
+                    textTransform: 'capitalize',
+                  }}
+                >
+                  {row}
+                </Text>
+              </td>
+              {columns.map((column) => (
+                <td key={column + row} style={{verticalAlign: 'middle', textAlign: 'center'}}>
+                  {renderItem({column, row})}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Card>
+  )
+}
diff --git a/stories/helpers/utils.ts b/stories/helpers/utils.ts
@@ -0,0 +1,7 @@
+export function capitalize(str: string): string {
+  if (!str || typeof str !== 'string') {
+    return ''
+  }
+
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
diff --git a/stories/primitives/Button.stories.tsx b/stories/primitives/Button.stories.tsx
@@ -1,14 +1,13 @@
-import {
-  ArrowUpIcon,
-  CheckmarkIcon,
-  CloseIcon,
-  ErrorOutlineIcon,
-  SearchIcon,
-  WarningOutlineIcon,
-} from '@sanity/icons'
+import {CloseIcon, SearchIcon} from '@sanity/icons'
 import type {Meta, StoryObj} from '@storybook/react'
+import {
+  WORKSHOP_BUTTON_MODE_OPTIONS,
+  WORKSHOP_BUTTON_TONE_OPTIONS,
+} from '../../src/__workshop__/constants'
 import {Button, Flex, Stack} from '../../src/primitives'
 import {FONT_SIZE_CONTROLS, ICON_CONTROLS, RADIUS_CONTROLS, SPACE_CONTROLS} from '../constants'
+import {MatrixBuilder} from '../helpers/Components/MatrixBuilder'
+import {capitalize} from '../helpers/utils'
 
 const meta: Meta<typeof Button> = {
   args: {
@@ -84,35 +83,40 @@ export const Tones: Story = {
   ),
 }
 
+const buttonModes = Object.values(WORKSHOP_BUTTON_MODE_OPTIONS)
+const buttonTones = Object.values(WORKSHOP_BUTTON_TONE_OPTIONS)
+
 export const MultipleStyles: Story = {
   parameters: {
     controls: {
-      include: ['fontSize', 'padding', 'radius'],
+      include: ['fontSize', 'padding', 'radius', 'icon', 'iconRight'],
     },
   },
   render: (props) => (
-    <Stack space={3}>
-      <Flex gap={2}>
-        <Button {...props} icon={SearchIcon} text="Default" />
-        <Button {...props} icon={ArrowUpIcon} text="Primary" tone="primary" />
-        <Button {...props} icon={CheckmarkIcon} text="Positive" tone="positive" />
-        <Button {...props} icon={WarningOutlineIcon} text="Caution" tone="caution" />
-        <Button {...props} icon={ErrorOutlineIcon} text="Critical" tone="critical" />
-      </Flex>
-      <Flex gap={2}>
-        <Button {...props} icon={SearchIcon} mode="bleed" text="Default" />
-        <Button {...props} icon={ArrowUpIcon} mode="bleed" text="Primary" tone="primary" />
-        <Button {...props} icon={CheckmarkIcon} mode="bleed" text="Positive" tone="positive" />
-        <Button {...props} icon={WarningOutlineIcon} mode="bleed" text="Caution" tone="caution" />
-        <Button {...props} icon={ErrorOutlineIcon} mode="bleed" text="Critical" tone="critical" />
-      </Flex>
-      <Flex gap={2}>
-        <Button {...props} icon={SearchIcon} mode="ghost" text="Default" />
-        <Button {...props} icon={ArrowUpIcon} mode="ghost" text="Primary" tone="primary" />
-        <Button {...props} icon={CheckmarkIcon} mode="ghost" text="Positive" tone="positive" />
-        <Button {...props} icon={WarningOutlineIcon} mode="ghost" text="Caution" tone="caution" />
-        <Button {...props} icon={ErrorOutlineIcon} mode="ghost" text="Critical" tone="critical" />
-      </Flex>
+    <Stack
+      space={3}
+      style={{
+        maxWidth: '640px',
+      }}
+    >
+      <MatrixBuilder
+        scheme="light"
+        columns={buttonModes}
+        rows={buttonTones}
+        title="Tone / Mode"
+        renderItem={({row, column}) => (
+          <Button {...props} tone={row} mode={column} text={capitalize(column)} />
+        )}
+      />
+      <MatrixBuilder
+        scheme="dark"
+        columns={buttonModes}
+        rows={buttonTones}
+        title="Tone / Mode"
+        renderItem={({row, column}) => (
+          <Button {...props} tone={row} mode={column} text={capitalize(column)} />
+        )}
+      />
     </Stack>
   ),
 }