@primer/components 31.2.1-rc.48ecca6e → 32.0.0-next.0

package/src/stories/SelectPanel.stories.tsx

@@ -1,353 +0,0 @@
-import type {OverlayProps} from '../Overlay'
-import {Meta} from '@storybook/react'
-import React, {useRef, useState} from 'react'
-import {theme, ThemeProvider} from '..'
-import {ItemInput} from '../ActionList/List'
-import BaseStyles from '../BaseStyles'
-import {DropdownButton} from '../DropdownMenu'
-import {SelectPanel} from '../SelectPanel'
-import Box from '../Box'
-
-const meta: Meta = {
-  title: 'Composite components/SelectPanel',
-  component: SelectPanel,
-  decorators: [
-    (Story: React.ComponentType): JSX.Element => {
-      return (
-        <ThemeProvider theme={theme}>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ],
-  parameters: {
-    controls: {
-      disable: true
-    }
-  }
-}
-export default meta
-
-function getColorCircle(color: string) {
-  return function () {
-    return (
-      <Box
-        bg={color}
-        borderColor={color}
-        width={14}
-        height={14}
-        borderRadius={10}
-        margin="auto"
-        borderWidth="1px"
-        borderStyle="solid"
-      />
-    )
-  }
-}
-
-const items = [
-  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
-  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
-  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
-  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
-  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
-  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
-  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7}
-]
-
-export function MultiSelectStory(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Multi Select Panel</h1>
-      <div>Please select labels that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'xsmall'}}
-      />
-    </>
-  )
-}
-MultiSelectStory.storyName = 'Multi Select'
-
-export function SingleSelectStory(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'xsmall'}}
-      />
-    </>
-  )
-}
-SingleSelectStory.storyName = 'Single Select'
-
-export function ExternalAnchorStory(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-
-  return (
-    <>
-      <h1>Select Panel With External Anchor</h1>
-      <DropdownButton ref={buttonRef} onClick={() => setOpen(!open)}>
-        Custom: {selected?.text || 'Click Me'}
-      </DropdownButton>
-      <SelectPanel
-        renderAnchor={null}
-        anchorRef={buttonRef}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'xsmall'}}
-      />
-    </>
-  )
-}
-ExternalAnchorStory.storyName = 'With External Anchor'
-
-export function SelectPanelHeightInitialWithOverflowingItemsStory(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
-      />
-    </>
-  )
-}
-SelectPanelHeightInitialWithOverflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Overflowing Items'
-
-export function SelectPanelHeightInitialWithUnderflowingItemsStory(): JSX.Element {
-  const underflowingItems = [items[0], items[1]]
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(underflowingItems[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'initial', maxHeight: 'xsmall'}}
-      />
-    </>
-  )
-}
-SelectPanelHeightInitialWithUnderflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Underflowing Items'
-
-export function SelectPanelHeightInitialWithUnderflowingItemsAfterFetch(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const [fetchedItems, setFetchedItems] = useState<typeof items>([])
-  const filteredItems = React.useMemo(
-    () => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())),
-    [fetchedItems, filter]
-  )
-  const [open, setOpen] = useState(false)
-  const [height, setHeight] = useState<OverlayProps['height']>('auto')
-
-  const onOpenChange = () => {
-    setOpen(!open)
-    setTimeout(() => {
-      setFetchedItems([items[0], items[1]])
-      setHeight('initial')
-    }, 1500)
-  }
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={onOpenChange}
-        loading={filteredItems.length === 0}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height, maxHeight: 'xsmall'}}
-      />
-    </>
-  )
-}
-SelectPanelHeightInitialWithUnderflowingItemsAfterFetch.storyName =
-  'SelectPanel, Height: Initial, Underflowing Items (After Fetch)'
-
-export function SelectPanelAboveTallBody(): JSX.Element {
-  const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [open, setOpen] = useState(false)
-
-  return (
-    <>
-      <h1>Single Select Panel</h1>
-      <div>Please select a label that describe your issue:</div>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        placeholderText="Filter Labels"
-        open={open}
-        onOpenChange={setOpen}
-        items={filteredItems}
-        selected={selected}
-        onSelectedChange={setSelected}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{width: 'small', height: 'xsmall'}}
-      />
-      <div
-        style={{
-          backgroundColor: 'cornflowerblue',
-          height: '100vh'
-        }}
-      >
-        This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal
-        is far down the page
-      </div>
-    </>
-  )
-}
-SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body'
-
-export function SelectPanelHeightAndScroll(): JSX.Element {
-  const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items]
-  const [selectedA, setSelectedA] = React.useState<ItemInput | undefined>(longItems[0])
-  const [selectedB, setSelectedB] = React.useState<ItemInput | undefined>(longItems[0])
-  const [filter, setFilter] = React.useState('')
-  const filteredItems = longItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
-  const [openA, setOpenA] = useState(false)
-  const [openB, setOpenB] = useState(false)
-
-  return (
-    <>
-      <h2>With height:medium</h2>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        placeholderText="Filter Labels"
-        open={openA}
-        onOpenChange={setOpenA}
-        items={filteredItems}
-        selected={selectedA}
-        onSelectedChange={setSelectedA}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{height: 'medium'}}
-      />
-      <h2>With height:auto, maxheight:medium</h2>
-      <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <DropdownButton aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-            {children ?? 'Select Labels'}
-          </DropdownButton>
-        )}
-        placeholderText="Filter Labels"
-        open={openB}
-        onOpenChange={setOpenB}
-        items={filteredItems}
-        selected={selectedB}
-        onSelectedChange={setSelectedB}
-        onFilterChange={setFilter}
-        showItemDividers={true}
-        overlayProps={{
-          height: 'auto',
-          maxHeight: 'medium'
-        }}
-      />
-    </>
-  )
-}
-SelectPanelHeightAndScroll.storyName = 'SelectPanel, Height and Scroll'

package/src/stories/TextInput.stories.tsx

@@ -1,113 +0,0 @@
-import React, {useState, ReactNode} from 'react'
-import {Meta} from '@storybook/react'
-
-import {BaseStyles, Box, ThemeProvider, Text} from '..'
-import TextInput, {TextInputProps} from '../TextInput'
-import {CheckIcon} from '@primer/octicons-react'
-
-export default {
-  title: 'Forms/Text Input',
-  component: TextInput,
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Box paddingTop={5}>{Story()}</Box>
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ],
-  argTypes: {
-    sx: {
-      table: {
-        disable: true
-      }
-    },
-    block: {
-      name: 'Block',
-      defaultValue: false,
-      control: {
-        type: 'boolean'
-      }
-    },
-    disabled: {
-      name: 'Disabled',
-      defaultValue: false,
-      control: {
-        type: 'boolean'
-      }
-    },
-    variant: {
-      name: 'Variants',
-      options: ['small', 'medium', 'large'],
-      control: {type: 'radio'}
-    }
-  }
-} as Meta
-
-const Label = ({htmlFor, children}: {htmlFor: string; children: ReactNode}) => (
-  <Text as="label" htmlFor={htmlFor} sx={{fontWeight: 600, fontSize: 14}}>
-    {children}
-  </Text>
-)
-
-export const Default = (args: TextInputProps) => {
-  const [value, setValue] = useState('')
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value)
-  }
-
-  const inputId = 'basic-text-input'
-
-  return (
-    <form>
-      <div className="form-group">
-        <div className="form-group-header">
-          <Label htmlFor={inputId}>Example label</Label>
-        </div>
-        <div className="form-group-body">
-          <TextInput id={inputId} value={value} onChange={handleChange} {...args} />
-        </div>
-      </div>
-    </form>
-  )
-}
-
-export const WithLeadingIcon = (args: TextInputProps) => {
-  const [value, setValue] = useState('')
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value)
-  }
-
-  const inputId = 'basic-text-input-with-leading-icon'
-
-  return (
-    <form>
-      <Label htmlFor={inputId}>Example label</Label>
-      <br />
-      <TextInput icon={CheckIcon} id={inputId} value={value} onChange={handleChange} type="password" {...args} />
-    </form>
-  )
-}
-
-export const Password = (args: TextInputProps) => {
-  const [value, setValue] = useState('')
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value)
-  }
-
-  const inputId = 'basic-text-input-as-password'
-
-  return (
-    <form>
-      <Label htmlFor={inputId}>Password</Label>
-      <br />
-      <TextInput type="password" id={inputId} value={value} onChange={handleChange} {...args} />
-    </form>
-  )
-}

package/src/stories/TextInputWithTokens.stories.tsx

@@ -1,155 +0,0 @@
-import React, {useCallback, useState} from 'react'
-import {Meta} from '@storybook/react'
-
-import {BaseStyles, Box, ThemeProvider} from '..'
-import TextInputWithTokens from '../TextInputWithTokens'
-import IssueLabelToken from '../Token/IssueLabelToken'
-
-export default {
-  title: 'Forms/Text Input with Tokens',
-  component: TextInputWithTokens,
-  decorators: [
-    Story => {
-      const [lastKey, setLastKey] = useState('none')
-      const reportKey = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-        setLastKey(event.key)
-      }, [])
-
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Box onKeyDownCapture={reportKey}>
-              <Box position="absolute" right={5} top={2}>
-                Last key pressed: {lastKey}
-              </Box>
-              <Box paddingTop={5}>
-                <Story />
-              </Box>
-            </Box>
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ]
-} as Meta
-
-const mockTokens = [
-  {text: 'zero', id: 0},
-  {text: 'one', id: 1},
-  {text: 'two', id: 2},
-  {text: 'three', id: 3},
-  {text: 'four', id: 4},
-  {text: 'five', id: 5},
-  {text: 'six', id: 6},
-  {text: 'seven', id: 7},
-  {text: 'twenty', id: 20},
-  {text: 'twentyone', id: 21}
-]
-
-export const Default = () => {
-  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))
-  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} />
-}
-
-export const UsingIssueLabelTokens = () => {
-  const [tokens, setTokens] = useState([
-    {text: 'enhancement', id: 1, fillColor: '#a2eeef'},
-    {text: 'bug', id: 2, fillColor: '#d73a4a'},
-    {text: 'good first issue', id: 3, fillColor: '#0cf478'}
-  ])
-  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return <TextInputWithTokens tokenComponent={IssueLabelToken} tokens={tokens} onTokenRemove={onTokenRemove} />
-}
-
-export const TokenSizeVariants = () => {
-  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2))
-  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return (
-    <Box display="flex" flexDirection="column" sx={{gap: '1em'}}>
-      <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} size="small" />
-      <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} size="medium" />
-      <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} size="large" />
-      <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} size="extralarge" />
-    </Box>
-  )
-}
-
-export const MaxHeight = () => {
-  const [tokens, setTokens] = useState(mockTokens)
-  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return (
-    <Box maxWidth="300px">
-      <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} maxHeight="100px" />
-    </Box>
-  )
-}
-
-MaxHeight.storyName = 'maxHeight 200px'
-
-export const TokenWrappingPrevented = () => {
-  const [tokens, setTokens] = useState(mockTokens)
-  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return (
-    <Box maxWidth="500px">
-      <TextInputWithTokens preventTokenWrapping block tokens={tokens} onTokenRemove={onTokenRemove} />
-    </Box>
-  )
-}
-
-export const TokenRemoveButtonsHidden = () => {
-  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2))
-  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return <TextInputWithTokens hideTokenRemoveButtons tokens={tokens} onTokenRemove={onTokenRemove} />
-}
-
-export const WithVisibleTokenCount = () => {
-  const [tokens, setTokens] = useState([...mockTokens].slice(0, 5))
-  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} visibleTokenCount={2} />
-}
-
-export const Unstyled = () => {
-  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2))
-  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return (
-    <TextInputWithTokens
-      tokens={tokens}
-      onTokenRemove={onTokenRemove}
-      // TODO: come up with a nicer way to unstyle an input component
-      sx={{
-        border: '0',
-        padding: '0',
-        boxShadow: 'none',
-        ':focus-within': {
-          border: '0',
-          boxShadow: 'none'
-        }
-      }}
-    />
-  )
-}