@primer/components 32.1.0-rc.6f5d2b00 → 32.1.0

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'
-        }
-      }}
-    />
-  )
-}

package/src/stories/ThemeProvider.stories.tsx

@@ -1,104 +0,0 @@
-import React from 'react'
-import {Meta, Story} from '@storybook/react'
-
-import {ThemeProvider, BaseStyles, Box, themeGet, useTheme} from '..'
-import {ThemeProviderProps} from '../ThemeProvider'
-import {createGlobalStyle} from 'styled-components'
-
-export default {
-  title: 'Generic behaviors/ThemeProvider',
-  component: ThemeProvider,
-  argTypes: {
-    theme: {
-      table: {
-        disable: true
-      }
-    }
-  }
-} as Meta
-
-const GlobalStyle = createGlobalStyle`
-    body {
-        background-color: ${themeGet('colors.bg.canvas')};
-    }
-`
-
-function ActiveColorScheme() {
-  const {colorScheme} = useTheme()
-  return <span>Active color scheme: {colorScheme}</span>
-}
-
-export const Default: Story<ThemeProviderProps> = args => {
-  return (
-    <ThemeProvider {...args}>
-      <GlobalStyle />
-      <BaseStyles>
-        <ActiveColorScheme />
-      </BaseStyles>
-    </ThemeProvider>
-  )
-}
-
-Default.args = {
-  colorMode: 'day',
-  dayScheme: 'light',
-  nightScheme: 'dark'
-}
-
-function NightMode() {
-  return (
-    <ThemeProvider colorMode="night">
-      <Box
-        my={3}
-        p={3}
-        color="fg.default"
-        bg="canvas.default"
-        borderWidth="1px"
-        borderStyle="solid"
-        borderColor="border.default"
-        borderRadius={2}
-      >
-        Always night mode (<ActiveColorScheme />)
-      </Box>
-    </ThemeProvider>
-  )
-}
-
-function InverseMode() {
-  const {resolvedColorMode} = useTheme()
-  return (
-    <ThemeProvider colorMode={resolvedColorMode === 'day' ? 'night' : 'day'}>
-      <Box
-        my={3}
-        p={3}
-        color="fg.default"
-        bg="canvas.default"
-        borderWidth="1px"
-        borderStyle="solid"
-        borderColor="border.default"
-        borderRadius={2}
-      >
-        Always inverse of parent mode (<ActiveColorScheme />)
-      </Box>
-    </ThemeProvider>
-  )
-}
-
-export const Nested: Story<ThemeProviderProps> = args => {
-  return (
-    <ThemeProvider {...args}>
-      <GlobalStyle />
-      <BaseStyles>
-        <ActiveColorScheme />
-        <NightMode />
-        <InverseMode />
-      </BaseStyles>
-    </ThemeProvider>
-  )
-}
-
-Nested.args = {
-  colorMode: 'day',
-  dayScheme: 'light',
-  nightScheme: 'dark_dimmed'
-}

package/src/stories/Token.stories.tsx

@@ -1,137 +0,0 @@
-import React from 'react'
-import {Meta} from '@storybook/react'
-import {action} from '@storybook/addon-actions'
-
-import {get} from '../constants'
-import {BaseStyles, ThemeProvider} from '..'
-import Box from '../Box'
-import Token, {TokenProps} from '../Token/Token'
-import Text from '../Text'
-import {GitBranchIcon} from '@primer/octicons-react'
-
-export default {
-  title: 'Tokens/Default',
-  component: Token,
-  argTypes: {
-    text: {
-      defaultValue: 'Token'
-    }
-  },
-  decorators: [
-    Story => {
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    }
-  ]
-} as Meta
-
-const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual']
-
-const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
-  <Box
-    display="flex"
-    sx={{
-      alignItems: 'start',
-      flexDirection: 'column',
-      gap: get('space.0')
-    }}
-  >
-    {label ? (
-      <Text fontSize={0} color="fg.subtle">
-        {label}
-      </Text>
-    ) : null}
-    {children}
-  </Box>
-)
-
-const ExampleCollectionContainer: React.FC = ({children}) => (
-  <Box
-    display="flex"
-    sx={{
-      alignItems: 'start',
-      flexDirection: 'column',
-      gap: get('space.6')
-    }}
-  >
-    <Text fontSize={1} color="fg.subtle">
-      Hint: use the &quot;Controls&quot; tab in the Addons panel to change the token properties
-    </Text>
-    {children}
-  </Box>
-)
-
-export const DefaultToken = (args: Omit<TokenProps, 'ref'>) => {
-  return (
-    <ExampleCollectionContainer>
-      <Token {...args} />
-    </ExampleCollectionContainer>
-  )
-}
-DefaultToken.storyName = 'Default'
-DefaultToken.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}
-
-export const Interactive = (args: Omit<TokenProps, 'ref' | 'text'>) => {
-  return (
-    <ExampleCollectionContainer>
-      <Box
-        display="flex"
-        sx={{
-          alignItems: 'start',
-          gap: get('space.2')
-        }}
-      >
-        <Token as="a" href="http://google.com/" text="Link" {...args} />
-        <Token as="button" onClick={action('clicked')} text="Button" {...args} />
-        <Token as="span" tabIndex={0} onFocus={action('focused')} text="Focusable Span" {...args} />
-      </Box>
-    </ExampleCollectionContainer>
-  )
-}
-Interactive.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton', 'text']}}
-
-export const WithLeadingVisual = (args: Omit<TokenProps, 'ref'>) => {
-  return (
-    <ExampleCollectionContainer>
-      <Token {...args} leadingVisual={() => <GitBranchIcon />} />
-    </ExampleCollectionContainer>
-  )
-}
-WithLeadingVisual.storyName = 'with leadingVisual'
-WithLeadingVisual.parameters = {controls: {exclude: [...excludedControlKeys, 'hideRemoveButton']}}
-
-export const WithOnRemoveFn = (args: Omit<TokenProps, 'ref'>) => {
-  return (
-    <ExampleCollectionContainer>
-      <SingleExampleContainer label="w/ onRemove passed">
-        <Token onRemove={action('remove me')} {...args} />
-      </SingleExampleContainer>
-      <SingleExampleContainer label="w/ onRemove passed and the token is interactive">
-        <Box
-          display="flex"
-          sx={{
-            alignItems: 'start',
-            gap: get('space.2')
-          }}
-        >
-          <Token as="a" href="http://google.com/" onRemove={action('remove me')} {...args} text="Link" />
-          <Token as="button" onClick={action('clicked')} onRemove={action('remove me')} {...args} text="Button" />
-          <Token
-            as="span"
-            tabIndex={0}
-            onFocus={action('focused')}
-            onRemove={action('remove me')}
-            {...args}
-            text="Focusable Span"
-          />
-        </Box>
-      </SingleExampleContainer>
-    </ExampleCollectionContainer>
-  )
-}
-WithOnRemoveFn.parameters = {controls: {exclude: excludedControlKeys}}