@primer/components 31.0.1 → 31.0.2-rc.1e80de40

package/src/stories/ActionMenu.stories.tsx

@@ -0,0 +1,334 @@
+import {
+  ServerIcon,
+  PlusCircleIcon,
+  TypographyIcon,
+  VersionsIcon,
+  SearchIcon,
+  NoteIcon,
+  ProjectIcon,
+  FilterIcon,
+  GearIcon,
+  ArrowRightIcon
+} from '@primer/octicons-react'
+import {Meta} from '@storybook/react'
+import React, {useCallback, useState, useRef} from 'react'
+import styled from 'styled-components'
+import {ThemeProvider} from '..'
+import {ActionMenu, ActionMenuProps} from '../ActionMenu'
+import Link, {LinkProps} from '../Link'
+import Button from '../Button'
+import {ActionList, ItemProps} from '../ActionList'
+import BaseStyles from '../BaseStyles'
+import {DropdownButton} from '../DropdownMenu'
+
+const meta: Meta = {
+  title: 'Composite components/ActionMenu',
+  component: ActionMenu,
+  decorators: [
+    (Story: React.ComponentType): JSX.Element => (
+      <ThemeProvider>
+        <BaseStyles>
+          <Story />
+        </BaseStyles>
+      </ThemeProvider>
+    )
+  ],
+  parameters: {
+    controls: {
+      disabled: true
+    }
+  }
+}
+export default meta
+
+const ErsatzOverlay = styled.div`
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(149, 157, 165, 0.2);
+  padding: 8px;
+`
+
+export function ActionsStory(): JSX.Element {
+  const [option, setOption] = useState('Select an option')
+  const onAction = (itemProps: ItemProps) => {
+    setOption(itemProps.text ?? '')
+  }
+  return (
+    <>
+      <h1>Actions</h1>
+      <h2>Last option activated: {option}</h2>
+      <ErsatzOverlay>
+        <ActionMenu
+          onAction={onAction}
+          anchorContent={<ServerIcon />}
+          items={[
+            {
+              leadingVisual: ServerIcon,
+              text: 'Open current Codespace',
+              description:
+                "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.",
+              descriptionVariant: 'block',
+              trailingText: '⌘O'
+            },
+            {
+              leadingVisual: PlusCircleIcon,
+              text: 'Create new Codespace',
+              description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
+              descriptionVariant: 'block',
+              trailingText: '⌘C'
+            }
+          ]}
+        />
+      </ErsatzOverlay>
+    </>
+  )
+}
+ActionsStory.storyName = 'Actions'
+
+export function SimpleListStory(): JSX.Element {
+  const [option, setOption] = useState('Select an option')
+  const onAction = (itemProps: ItemProps) => {
+    setOption(itemProps.text || '')
+  }
+  return (
+    <>
+      <h1>Simple List</h1>
+      <h2>Last option activated: {option}</h2>
+      <ErsatzOverlay>
+        <ActionMenu
+          onAction={onAction}
+          anchorContent="Menu"
+          overlayProps={{
+            'data-test-id': 'some_test_id',
+            onMouseDown: (e: React.MouseEvent) =>
+              // eslint-disable-next-line no-console
+              console.log('onMouseDown in the internal Overlay can be useful for controlling event interactions', e)
+          }}
+          items={[
+            {text: 'New file', trailingText: '⌘O', disabled: true, leadingVisual: ProjectIcon},
+            ActionList.Divider,
+            {text: 'Copy link', trailingText: 'ctrl+C'},
+            {text: 'Edit file', trailingText: '⌘E'},
+            {
+              text: 'Delete file',
+              variant: 'danger',
+              trailingText: '⌘D'
+            }
+          ]}
+        />
+      </ErsatzOverlay>
+    </>
+  )
+}
+SimpleListStory.storyName = 'Simple List'
+
+export function ExternalOpenState(): JSX.Element {
+  const [option, setOption] = useState('Select an option')
+  const [open, setOpen] = useState(false)
+  const onAction = (itemProps: ItemProps) => {
+    setOption(itemProps.text as string)
+  }
+  return (
+    <>
+      <h1>Simple List</h1>
+      <h2>Last option activated: {option}</h2>
+      <h2>External Open State: {open ? 'Open' : 'Closed'}</h2>
+      <div>
+        <Button onClick={() => setOpen(!open)}>Toggle External State</Button>
+      </div>
+      <br />
+      <ErsatzOverlay>
+        <ActionMenu
+          onAction={onAction}
+          anchorContent="Menu"
+          open={open}
+          setOpen={setOpen}
+          items={[
+            {text: 'New file', trailingText: '⌘O', disabled: true, leadingVisual: ProjectIcon},
+            ActionList.Divider,
+            {text: 'Copy link', trailingText: 'ctrl+C'},
+            {text: 'Edit file', trailingText: '⌘E'},
+            {
+              text: 'Delete file',
+              variant: 'danger',
+              trailingVisual: '⌘D'
+            }
+          ]}
+        />
+      </ErsatzOverlay>
+    </>
+  )
+}
+ExternalOpenState.storyName = 'External Open State'
+
+export function ComplexListStory(): JSX.Element {
+  const [option, setOption] = useState('Select an option')
+  const onAction = (itemProps: ItemProps) => {
+    setOption(itemProps.text || '')
+  }
+  return (
+    <>
+      <h1>Complex List</h1>
+      <h2>Last option activated: {option}</h2>
+      <ErsatzOverlay>
+        <ActionMenu
+          onAction={onAction}
+          anchorContent="Menu"
+          groupMetadata={[
+            {groupId: '0'},
+            {groupId: '1', header: {title: 'Live query', variant: 'subtle'}},
+            {groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
+            {groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
+            {groupId: '4'}
+          ]}
+          items={[
+            {leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'},
+            {leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
+            {
+              leadingVisual: SearchIcon,
+              text: 'repo:github/github',
+              groupId: '1',
+              renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
+              trailingVisual: () => (
+                <>
+                  ⌘S
+                  <ArrowRightIcon />
+                </>
+              )
+            },
+            {
+              leadingVisual: SearchIcon,
+              text: 'repo:github/github',
+              groupId: '1',
+              renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />,
+              trailingText: '⌘S', // backward compatible
+              trailingIcon: ArrowRightIcon // backward compatible
+            },
+            {
+              leadingVisual: NoteIcon,
+              text: 'Table',
+              description: 'Information-dense table optimized for operations across teams',
+              descriptionVariant: 'block',
+              groupId: '2'
+            },
+            {
+              leadingVisual: ProjectIcon,
+              text: 'Board',
+              description: 'Kanban-style board focused on visual states',
+              descriptionVariant: 'block',
+              groupId: '2'
+            },
+            {
+              leadingVisual: FilterIcon,
+              text: 'Save sort and filters to current view',
+              groupId: '3'
+            },
+            {leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
+            {leadingVisual: GearIcon, text: 'View settings', groupId: '4'}
+          ]}
+        />
+      </ErsatzOverlay>
+    </>
+  )
+}
+ComplexListStory.storyName = 'Complex List'
+
+export function CustomTrigger(): JSX.Element {
+  const customAnchor = (props: LinkProps) => <Link {...props} sx={{cursor: 'pointer'}} />
+  const [option, setOption] = useState('Select an option')
+  const onAction = useCallback((itemProps: ItemProps) => {
+    setOption(itemProps.text || '')
+  }, [])
+  return (
+    <>
+      <h1>Custom Trigger</h1>
+      <h2>Last option activated: {option}</h2>
+      <ErsatzOverlay>
+        <ActionMenu
+          onAction={onAction}
+          anchorContent="Menu"
+          renderAnchor={customAnchor}
+          items={[
+            {text: 'New file'},
+            ActionList.Divider,
+            {text: 'Copy link'},
+            {text: 'Edit file'},
+            {text: 'Delete file', variant: 'danger'}
+          ]}
+        />
+      </ErsatzOverlay>
+    </>
+  )
+}
+CustomTrigger.storyName = 'Custom Trigger'
+
+export function ActionMenuWithExternalAnchor(): JSX.Element {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  return (
+    <>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        Open Menu
+      </Button>
+      <ActionMenu
+        renderAnchor={null}
+        anchorRef={buttonRef}
+        open={isOpen}
+        setOpen={setIsOpen}
+        items={[
+          {text: 'New file'},
+          ActionList.Divider,
+          {text: 'Copy link'},
+          {text: 'Edit file'},
+          {text: 'Delete file', variant: 'danger'}
+        ]}
+      />
+    </>
+  )
+}
+
+const DoubleClickableAnchor: Exclude<ActionMenuProps['renderAnchor'], null | undefined> = ({
+  onClick: callback,
+  ...rest
+}) => {
+  const onClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (event.detail === 2) {
+        event.preventDefault()
+      }
+      callback?.(event)
+    },
+    [callback]
+  )
+  return <DropdownButton onClick={onClick} {...rest} />
+}
+export function ActionMenuWithDoubleClickStory(): JSX.Element {
+  return (
+    <>
+      <h1>Actions</h1>
+      <ErsatzOverlay>
+        <ActionMenu
+          renderAnchor={DoubleClickableAnchor}
+          anchorContent={<ServerIcon />}
+          items={[
+            {
+              leadingVisual: ServerIcon,
+              text: 'Open current Codespace',
+              description:
+                "Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to new-branch.",
+              descriptionVariant: 'block',
+              trailingText: '⌘O'
+            },
+            {
+              leadingVisual: PlusCircleIcon,
+              text: 'Create new Codespace',
+              description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
+              descriptionVariant: 'block',
+              trailingText: '⌘C'
+            }
+          ]}
+        />
+      </ErsatzOverlay>
+    </>
+  )
+}
+ActionMenuWithDoubleClickStory.storyName = 'ActionMenu with double-clickable anchor'

package/src/stories/AnchoredOverlay.stories.tsx

@@ -0,0 +1,117 @@
+import React, {useEffect, useRef, useState} from 'react'
+import {Meta} from '@storybook/react'
+
+import {BaseStyles, Box, ThemeProvider} from '..'
+import Heading from '../Heading'
+import DropdownButton from '../Button'
+import {AnchoredOverlay} from '../AnchoredOverlay'
+import {registerPortalRoot} from '../Portal'
+
+export default {
+  title: 'Generic behaviors/AnchoredOverlay',
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ]
+} as Meta
+
+const HeaderAndLayout = ({children}: {children: JSX.Element}) => {
+  const scrollingElementRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (scrollingElementRef.current) {
+      registerPortalRoot(scrollingElementRef.current, 'scrollingPortal')
+    }
+  }, [scrollingElementRef])
+  return (
+    <Box position="absolute" top={0} right={0} bottom={0} left={0} padding={4} backgroundColor="lavenderblush">
+      <Heading>Header or some such</Heading>
+      <Box position="absolute" top={10} right={4} bottom={4} left={4} overflow="scroll" backgroundColor="powderblue">
+        {children}
+        <Box ref={scrollingElementRef} position="absolute" top={0} left={0} />
+      </Box>
+    </Box>
+  )
+}
+
+const ButtonWithAnchoredOverlay = ({portalContainerName}: {portalContainerName?: string}) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <AnchoredOverlay
+      open={open}
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      width="small"
+      height="auto"
+      renderAnchor={props => <DropdownButton {...props}>Kitten, please</DropdownButton>}
+      overlayProps={{portalContainerName}}
+    >
+      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
+        <img src={`//placekitten.com/200/300`} alt="kitten" />
+      </Box>
+    </AnchoredOverlay>
+  )
+}
+
+export const DefaultPortal = () => {
+  const rows = 40
+  const columns = 20
+  return (
+    <HeaderAndLayout>
+      <table>
+        <tbody>
+          {Array(rows)
+            .fill(null)
+            .map((_, i) => (
+              <tr key={i}>
+                {Array(columns)
+                  .fill(null)
+                  .map((_1, j) => (
+                    <td key={`${i}${j}`}>
+                      <Box m={2}>
+                        <ButtonWithAnchoredOverlay />
+                      </Box>
+                    </td>
+                  ))}
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </HeaderAndLayout>
+  )
+}
+
+export const PortalInsideScrollingElement = () => {
+  const rows = 40
+  const columns = 20
+  return (
+    <HeaderAndLayout>
+      <table>
+        <tbody>
+          {Array(rows)
+            .fill(null)
+            .map((_, i) => (
+              <tr key={i}>
+                {Array(columns)
+                  .fill(null)
+                  .map((_1, j) => (
+                    <td key={`${i}${j}`}>
+                      <Box m={2}>
+                        <ButtonWithAnchoredOverlay portalContainerName="scrollingPortal" />
+                      </Box>
+                    </td>
+                  ))}
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </HeaderAndLayout>
+  )
+}