@primer/components 29.1.0-rc.79e8b21e → 29.1.0

package/src/stories/ActionList.stories.tsx

@@ -1,364 +0,0 @@
-import {
-  ServerIcon,
-  PlusCircleIcon,
-  TypographyIcon,
-  VersionsIcon,
-  SearchIcon,
-  NoteIcon,
-  ProjectIcon,
-  FilterIcon,
-  GearIcon,
-  ArrowRightIcon,
-  ArrowLeftIcon
-} from '@primer/octicons-react'
-import {Meta} from '@storybook/react'
-import React from 'react'
-import styled from 'styled-components'
-import {Label, ThemeProvider} from '..'
-import {ActionList as _ActionList} from '../ActionList'
-import {Header} from '../ActionList/Header'
-import BaseStyles from '../BaseStyles'
-import sx from '../sx'
-
-const ActionList = Object.assign(_ActionList, {
-  Header
-})
-
-const meta: Meta = {
-  title: 'Composite components/ActionList',
-  component: ActionList,
-  decorators: [
-    (Story: React.ComponentType): JSX.Element => (
-      <ThemeProvider>
-        <BaseStyles>
-          <Story />
-        </BaseStyles>
-      </ThemeProvider>
-    )
-  ],
-  parameters: {
-    controls: {
-      disable: true
-    }
-  }
-}
-export default meta
-
-const ErsatzOverlay = styled.div<{maxWidth?: string}>`
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(149, 157, 165, 0.2);
-  overflow: hidden;
-  max-width: ${({maxWidth}) => maxWidth || 'none'};
-`
-
-export function ActionsStory(): JSX.Element {
-  return (
-    <>
-      <h1>Actions</h1>
-      <ErsatzOverlay>
-        <ActionList
-          showItemDividers
-          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'
-            },
-            {
-              leadingVisual: PlusCircleIcon,
-              text: 'Create new Codespace',
-              description: 'Create a brand new Codespace with a fresh image and checkout this branch.',
-              descriptionVariant: 'block'
-            }
-          ]}
-        />
-      </ErsatzOverlay>
-    </>
-  )
-}
-ActionsStory.storyName = 'Actions'
-
-export function SimpleListStory(): JSX.Element {
-  return (
-    <>
-      <h1>Simple List</h1>
-      <ErsatzOverlay>
-        <ActionList
-          items={[
-            {text: 'New file', showDivider: true},
-            ActionList.Divider,
-            {text: 'Copy link', showDivider: true},
-            {text: 'Edit file', showDivider: true},
-            {text: 'Delete file', variant: 'danger', showDivider: true}
-          ]}
-        />
-      </ErsatzOverlay>
-    </>
-  )
-}
-SimpleListStory.storyName = 'Simple List'
-
-const selectListItems = new Array(6).fill(undefined).map((_, i) => {
-  return {
-    text: `Item ${i}`,
-    id: i
-  }
-})
-
-export function SingleSelectListStory(): JSX.Element {
-  return (
-    <>
-      <h1>Single Select List</h1>
-      <ErsatzOverlay>
-        <ActionList
-          items={selectListItems.map((item, index) => ({
-            ...item,
-            selected: index === 1
-          }))}
-        />
-      </ErsatzOverlay>
-    </>
-  )
-}
-SingleSelectListStory.storyName = 'Single Select'
-
-export function MultiSelectListStory(): JSX.Element {
-  return (
-    <>
-      <h1>Multi Select List</h1>
-      <ErsatzOverlay>
-        <ActionList
-          selectionVariant="multiple"
-          items={selectListItems.map((item, index) => ({
-            ...item,
-            selected: index === 1 || index === 3
-          }))}
-        />
-      </ErsatzOverlay>
-    </>
-  )
-}
-MultiSelectListStory.storyName = 'Multi Select'
-
-export function ComplexListInsetVariantStory(): JSX.Element {
-  const StyledDiv = styled.div`
-    ${sx}
-  `
-  return (
-    <>
-      <h1>Complex List</h1>
-      <h2>Inset Variant</h2>
-      <ErsatzOverlay>
-        <ActionList
-          groupMetadata={[
-            {groupId: '0'},
-            {groupId: '1', header: {title: 'Live query', variant: 'filled'}},
-            {groupId: '2', header: {title: 'Layout', variant: 'subtle'}, showItemDividers: true},
-            {groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
-            {
-              groupId: '4',
-              renderItem: ({leadingVisual: LeadingVisual, ...props}) => (
-                <ActionList.Item
-                  {...props}
-                  leadingVisual={() => (
-                    <StyledDiv sx={{'&>svg': {fill: 'white'}}}>
-                      {LeadingVisual && <LeadingVisual></LeadingVisual>}
-                    </StyledDiv>
-                  )}
-                />
-              ),
-              renderGroup: ({sx: sxProps, ...props}) => (
-                <ActionList.Group {...props} sx={{...sxProps, backgroundColor: 'cornflowerblue', color: 'white'}} />
-              )
-            }
-          ]}
-          items={[
-            {leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'},
-            {
-              leadingVisual: VersionsIcon,
-              text: 'Duplicate',
-              description: 'Create a copy',
-              descriptionVariant: 'inline',
-              groupId: '0'
-            },
-            {
-              leadingVisual: SearchIcon,
-              text: 'repo:github/memex,github/github',
-              groupId: '1',
-              renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />
-            },
-            {
-              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>
-    </>
-  )
-}
-ComplexListInsetVariantStory.storyName = 'Complex List — Inset Variant'
-
-export function ComplexListFullVariantStory(): JSX.Element {
-  const StyledDiv = styled.div`
-    ${sx}
-  `
-  return (
-    <>
-      <h1>Complex List</h1>
-      <h2>Full Variant</h2>
-      <ErsatzOverlay>
-        <ActionList
-          variant="full"
-          groupMetadata={[
-            {groupId: '0'},
-            {groupId: '1', header: {title: 'Live query', variant: 'filled'}},
-            {groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
-            {groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
-            {
-              groupId: '4',
-              renderItem: ({leadingVisual: LeadingVisual, ...props}) => (
-                <ActionList.Item
-                  {...props}
-                  leadingVisual={() => (
-                    <StyledDiv sx={{'&>svg': {fill: 'white'}}}>
-                      {LeadingVisual && <LeadingVisual></LeadingVisual>}
-                    </StyledDiv>
-                  )}
-                />
-              ),
-              renderGroup: ({sx: sxProps, ...props}) => (
-                <ActionList.Group {...props} sx={{...sxProps, backgroundColor: 'cornflowerblue', color: 'white'}} />
-              )
-            }
-          ]}
-          items={[
-            {leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'},
-            {leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
-            {
-              leadingVisual: SearchIcon,
-              text: 'repo:github/memex,github/github',
-              groupId: '1',
-              renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />
-            },
-            {
-              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>
-    </>
-  )
-}
-ComplexListFullVariantStory.storyName = 'Complex List — Full Variant'
-
-export function HeaderStory(): JSX.Element {
-  return (
-    <>
-      <h1>Header</h1>
-      <h2>Filled Variant</h2>
-      <ActionList.Header title="Layout" variant="filled" />
-      <h2>Subtle Variant</h2>
-      <ActionList.Header title="Layout" variant="subtle" />
-    </>
-  )
-}
-HeaderStory.storyName = 'Header'
-
-export function CustomItemChildren(): JSX.Element {
-  return (
-    <>
-      <h1>Custom Item Children</h1>
-      <ErsatzOverlay>
-        <ActionList
-          items={[
-            {
-              leadingVisual: ArrowRightIcon,
-              children: (
-                <Label outline borderColor="success.emphasis">
-                  Choose this one
-                </Label>
-              ),
-              trailingIcon: ArrowLeftIcon
-            }
-          ]}
-        />
-      </ErsatzOverlay>
-    </>
-  )
-}
-CustomItemChildren.storyName = 'Custom Item Children'
-
-export function SizeStressTestingStory(): JSX.Element {
-  return (
-    <>
-      <h1>Size Stress Testing</h1>
-      <ErsatzOverlay maxWidth="300px">
-        <ActionList
-          items={[
-            {
-              leadingVisual: ArrowRightIcon,
-              text: 'Block Description.  Long text should wrap',
-              description: 'This description is long, but it is block so it wraps',
-              descriptionVariant: 'block',
-              trailingIcon: ArrowLeftIcon,
-
-              showDivider: true
-            },
-            {
-              leadingVisual: ArrowRightIcon,
-              text: 'Inline Description',
-              description: 'This description gets truncated because it is inline',
-              trailingIcon: ArrowLeftIcon,
-              showDivider: true
-            },
-            {
-              leadingVisual: ArrowRightIcon,
-              text: 'Really long text without a description should wrap',
-              trailingIcon: ArrowLeftIcon,
-              showDivider: true
-            }
-          ]}
-        />
-      </ErsatzOverlay>
-    </>
-  )
-}
-SizeStressTestingStory.storyName = 'Size Stress Testing'

package/src/stories/ActionMenu.stories.tsx

@@ -1,322 +0,0 @@
-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',
-              trailingText: '⌘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} />,
-              trailingText: '⌘S',
-              trailingIcon: ArrowRightIcon
-            },
-            {
-              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'