@primer/components 32.1.0 → 33.0.0-rc.b495ba4a

package/src/stories/TextInputWithTokens.stories.tsx

@@ -0,0 +1,155 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,137 @@
+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}}