From 38ac8ad71b12401cffe3a777af548dea8ce75875 Mon Sep 17 00:00:00 2001
From: Pedro Bonamin <pedrobonamin@gmail.com>
Date: Thu, 2 Nov 2023 13:10:27 +0100
Subject: [PATCH] feat(facelift): add Studio UI menu item stories

---
 .../src/ui/__workshop__/MenuItemStory.tsx     | 106 ++++++++++++++++++
 packages/sanity/src/ui/__workshop__/index.ts  |  14 +++
 2 files changed, 120 insertions(+)
 create mode 100644 packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
 create mode 100644 packages/sanity/src/ui/__workshop__/index.ts

diff --git a/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx b/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
new file mode 100644
index 00000000000..aca77242ccd
--- /dev/null
+++ b/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx
@@ -0,0 +1,106 @@
+import {CheckmarkIcon, CircleIcon, WarningOutlineIcon} from '@sanity/icons'
+import {Avatar, Box, Card, Container, Menu, MenuDivider, Text, Flex} from '@sanity/ui'
+import {useString} from '@sanity/ui-workshop'
+import React from 'react'
+import {MenuItem} from '../menuItem'
+import {hues} from '@sanity/color'
+
+const HOTKEYS = ['Ctrl', 'Alt', 'P']
+const AVATAR_INITIALS = 'A.W.'
+
+export default function MenuItemStory() {
+  const subtitle = useString('Subtitle', 'Subtitle', 'Props') || ''
+  const text = useString('Text', 'Text', 'Props') || ''
+
+  return (
+    <Container width={0} padding={4}>
+      <Card border>
+        <Menu>
+          <MenuItem text={text} />
+          <MenuItem icon={CircleIcon} text={text} />
+          <MenuItem iconRight={CheckmarkIcon} text={text} />
+          <MenuItem hotkeys={HOTKEYS} text={text} />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            text={text}
+            subtitle={subtitle}
+          />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            text={text}
+            subtitle={subtitle}
+            iconRight={CheckmarkIcon}
+          />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            text={text}
+            subtitle={subtitle}
+            badgeText="badge"
+          />
+          <MenuDivider />
+          <Box padding={2}>
+            <Text size={1}>Not recommended</Text>
+          </Box>
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}> Don't use left icons in large menu items</Text>
+          </Box>
+
+          <MenuItem icon={CircleIcon} text={text} subtitle={subtitle} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use keyboard shortcuts with large menu items</Text>
+          </Box>
+          <MenuItem text={text} hotkeys={HOTKEYS} subtitle={subtitle} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use badges in small menu items</Text>
+          </Box>
+          <MenuItem text={text} badgeText={'badge'} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use icons and previews in the same item</Text>
+          </Box>
+          <MenuItem
+            icon={CircleIcon}
+            preview={
+              <Card
+                radius={2}
+                style={{width: '41px', height: '41px', background: hues.cyan[500].hex}}
+              />
+            }
+            text={text}
+            subtitle={subtitle}
+          />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use icon right and hotkeys in the same item</Text>
+          </Box>
+          <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} hotkeys={HOTKEYS} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use icon right and badge in the same item</Text>
+          </Box>
+          <MenuItem icon={CircleIcon} text={text} iconRight={CheckmarkIcon} badgeText={'badge'} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use hotkeys and badge in the same item</Text>
+          </Box>
+          <MenuItem icon={CircleIcon} text={text} hotkeys={HOTKEYS} badgeText={'badge'} />
+          <Box paddingX={2} paddingTop={2}>
+            <Text size={0}>Don't use everything at once</Text>
+          </Box>
+          <MenuItem
+            icon={CircleIcon}
+            text={text}
+            hotkeys={HOTKEYS}
+            badgeText={'badge'}
+            iconRight={CheckmarkIcon}
+          />
+          <MenuItem
+            preview={<Avatar initials={AVATAR_INITIALS} size={1} />}
+            subtitle={subtitle}
+            icon={CircleIcon}
+            text={text}
+            hotkeys={HOTKEYS}
+            badgeText={'badge'}
+            iconRight={CheckmarkIcon}
+          />
+        </Menu>
+      </Card>
+    </Container>
+  )
+}
diff --git a/packages/sanity/src/ui/__workshop__/index.ts b/packages/sanity/src/ui/__workshop__/index.ts
new file mode 100644
index 00000000000..37dc3793fec
--- /dev/null
+++ b/packages/sanity/src/ui/__workshop__/index.ts
@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'studio-ui',
+  title: 'Studio UI',
+  stories: [
+    {
+      name: 'menu-item',
+      title: 'MenuItem',
+      component: lazy(() => import('./MenuItemStory')),
+    },
+  ],
+})