From a3fd187b59de98c962484b567c526e38da8a2678 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Tue, 26 Sep 2023 13:59:28 +0200
Subject: [PATCH] chore(storybook): adds matrix builder, and use it in button
 stories

---
 src/primitives/button/__workshop__/index.ts   |   5 -
 src/primitives/button/__workshop__/matrix.tsx | 128 ------------------
 stories/helpers/Components/MatrixBuilder.tsx  |  74 ++++++++++
 stories/helpers/utils.ts                      |   7 +
 stories/primitives/Button.stories.tsx         |  66 ++++-----
 5 files changed, 116 insertions(+), 164 deletions(-)
 delete mode 100644 src/primitives/button/__workshop__/matrix.tsx
 create mode 100644 stories/helpers/Components/MatrixBuilder.tsx
 create mode 100644 stories/helpers/utils.ts

diff --git a/src/primitives/button/__workshop__/index.ts b/src/primitives/button/__workshop__/index.ts
index 76469227a..26174d787 100644
--- 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
deleted file mode 100644
index 87b7c8b84..000000000
--- a/src/primitives/button/__workshop__/matrix.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import {icons} from '@sanity/icons'
-import {Button, Card, Container, Flex, Text} from '@sanity/ui'
-import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useCallback} from 'react'
-import {
-  WORKSHOP_BUTTON_MODE_OPTIONS,
-  WORKSHOP_BUTTON_TONE_OPTIONS,
-  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
-  WORKSHOP_ICON_SYMBOL_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-import withStudioTheme from '../../../helpers/withStudioTheme'
-
-const buttonModes = Object.values(WORKSHOP_BUTTON_MODE_OPTIONS)
-const buttonTones = Object.values(WORKSHOP_BUTTON_TONE_OPTIONS)
-
-export default withStudioTheme(function UploadButtonStory() {
-  const textProp = useText('Text', 'Label', 'Props')
-
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
-  const onClick = useAction('onClick')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-
-  const renderTable = useCallback(
-    (scheme: 'light' | 'dark') => (
-      <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">Tone</Text>
-              </th>
-              {buttonModes.map((mode) => (
-                <th key={mode + 'head'}>
-                  <Text weight="semibold" style={{textTransform: 'capitalize'}}>
-                    {mode}
-                  </Text>
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody style={{borderTop: '16px solid transparent'}}>
-            {buttonTones.map((tone) => (
-              <tr
-                key={tone}
-                style={{
-                  borderBottom: '16px solid transparent',
-                }}
-              >
-                <td style={{verticalAlign: 'middle', textAlign: 'center'}}>
-                  <Text
-                    style={{
-                      textTransform: 'capitalize',
-                    }}
-                  >
-                    {tone}
-                  </Text>
-                </td>
-                {buttonModes.map((mode) => (
-                  <td
-                    key={tone + mode}
-                    // justify the elements in the center
-                    style={{verticalAlign: 'middle', textAlign: 'center'}}
-                  >
-                    <Button
-                      disabled={disabled}
-                      fontSize={fontSize}
-                      icon={icon && icons[icon]}
-                      iconRight={iconRight && icons[iconRight]}
-                      justify={justify}
-                      mode={mode}
-                      onClick={onClick}
-                      paddingX={paddingX}
-                      paddingY={paddingY}
-                      selected={selected}
-                      space={space}
-                      text={textProp}
-                      tone={tone}
-                    />
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </Card>
-    ),
-    [
-      disabled,
-      fontSize,
-      icon,
-      iconRight,
-      justify,
-      onClick,
-      paddingX,
-      paddingY,
-      selected,
-      space,
-      textProp,
-    ],
-  )
-
-  return (
-    <Card height="fill" tone="transparent">
-      <Flex align="center" height="fill" justify="center">
-        <Container width={1}>
-          {renderTable('light')}
-          {renderTable('dark')}
-        </Container>
-      </Flex>
-    </Card>
-  )
-})
diff --git a/stories/helpers/Components/MatrixBuilder.tsx b/stories/helpers/Components/MatrixBuilder.tsx
new file mode 100644
index 000000000..14f04e1eb
--- /dev/null
+++ 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
new file mode 100644
index 000000000..c2ac2cb7e
--- /dev/null
+++ 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
index bd2896bc5..19733b4a6 100644
--- 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>
   ),
 }