feat(facelift): add Studio UI menu item stories

sanity-io · Nov 2, 2023 · 38ac8ad · 38ac8ad
1 parent a610f7d
commit 38ac8ad
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 0 deletions.
diff --git a/packages/sanity/src/ui/__workshop__/MenuItemStory.tsx 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
@@ -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')),
+    },
+  ],
+})