@primer/components 31.2.0-rc.fbb10090 → 31.2.1-rc.32ed6e21

package/src/stories/Button.stories.tsx

@@ -77,7 +77,7 @@ export const buttonGroup = (args: StrictButtonStyleProps) => (
 export const buttonTableList = (args: ButtonStyleProps) => (
   <ButtonTableList {...args}>Button Table List</ButtonTableList>
 )
-export const disabledButton = (args: ButtonStyleProps) => {
+export const disabledButton = (args: StrictButtonStyleProps) => {
   const props = {disabled: true, ...args}
   return <Button {...props}>Disabled</Button>
 }

package/src/stories/NewButton.stories.tsx

@@ -0,0 +1,201 @@
+import React, {useState} from 'react'
+import {NewButton as Button, NewButtonProps as ButtonProps} from '../NewButton'
+import {BaseStyles, ThemeProvider} from '..'
+import {Meta} from '@storybook/react'
+import {XIcon, SearchIcon, EyeIcon, EyeClosedIcon, TriangleDownIcon} from '@primer/octicons-react'
+import Box from '../Box'
+
+export default {
+  title: 'Composite components/New Button',
+
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ],
+  argTypes: {
+    size: {
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large']
+      }
+    }
+  }
+} as Meta
+
+export const defaultButton = ({size = 'medium', ...args}: ButtonProps) => {
+  return (
+    <Button size={size} {...args}>
+      Default
+    </Button>
+  )
+}
+
+export const primaryButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="primary">
+      Primary
+    </Button>
+  )
+}
+
+export const dangerButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="danger">
+      Danger
+    </Button>
+  )
+}
+
+export const invisibleButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="invisible">
+      Invisible
+    </Button>
+  )
+}
+
+export const iconBeforeButton = (args: ButtonProps) => {
+  return (
+    <Button leadingIcon={SearchIcon} {...args}>
+      Before
+    </Button>
+  )
+}
+
+export const iconButton = ({...args}: ButtonProps) => {
+  return (
+    <>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args}>
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="invisible">
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="danger">
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="primary">
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="outline">
+          Close
+        </Button>
+      </Box>
+    </>
+  )
+}
+
+export const WatchCounterButton = ({...args}: ButtonProps) => {
+  const [count, setCount] = useState(0)
+  return (
+    <>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args}>
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="primary">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="invisible">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="danger">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="outline">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+    </>
+  )
+}
+
+export const WatchIconButton = ({...args}: ButtonProps) => {
+  const [watching, setWatching] = useState(false)
+  const icon = watching ? EyeClosedIcon : () => <EyeIcon />
+  return (
+    <Button onClick={() => setWatching(!watching)} trailingIcon={icon} {...args}>
+      Watch
+    </Button>
+  )
+}
+
+export const caretButton = ({...args}: ButtonProps) => {
+  return (
+    <Button trailingIcon={TriangleDownIcon} {...args}>
+      Dropdown
+    </Button>
+  )
+}
+
+export const blockButton = ({...args}: ButtonProps) => {
+  return (
+    <Button {...args} sx={{width: '100%'}}>
+      Block
+    </Button>
+  )
+}
+
+export const disabledButton = ({...args}: ButtonProps) => {
+  return (
+    <>
+      <Box mb={2}>
+        <Button disabled {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="danger" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="invisible" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="primary" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="outline" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled icon={() => <XIcon />} {...args}></Button>
+      </Box>
+    </>
+  )
+}

package/src/stories/TextInput.stories.tsx

@@ -0,0 +1,113 @@
+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/Token.stories.tsx

@@ -7,6 +7,7 @@ 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',
@@ -29,7 +30,7 @@ export default {
   ]
 } as Meta
 
-const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove']
+const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual']
 
 const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
   <Box
@@ -94,6 +95,16 @@ export const Interactive = (args: Omit<TokenProps, 'ref' | 'text'>) => {
 }
 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>

package/src/sx.ts

@@ -1,6 +1,7 @@
 import css, {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
 import {ThemeColorPaths, ThemeShadowPaths} from './theme'
 import {ColorProps, ShadowProps} from 'styled-system'
+import merge from 'deepmerge'
 
 export type BetterCssProperties = {
   [K in keyof SystemCssProperties]: K extends keyof ColorProps
@@ -19,3 +20,5 @@ export interface SxProp {
 const sx = (props: SxProp) => css(props.sx)
 
 export default sx
+
+export {merge}

package/src/theme-preval.js

@@ -1,5 +1,6 @@
 // @preval
 // This file needs to be a JavaScript file using CommonJS to be compatiable with preval
+// Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 
 const {default: primitives} = require('@primer/primitives')
 const {partitionColors, fontStack, omitScale} = require('./utils/theme')

package/src/utils/create-slots.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import {useForceUpdate} from './use-force-update'
+
+/** createSlots is a factory that can create a
+ *  typesafe Slots + Slot pair to use in a component definition
+ *  For example: ActionList.Item uses createSlots to get a Slots wrapper
+ *  + Slot component that is used by LeadingVisual, Description
+ */
+const createSlots = <SlotNames extends string>(slotNames: SlotNames[]) => {
+  type Slots = {
+    [key in SlotNames]?: React.ReactNode
+  }
+
+  type ContextProps = {
+    registerSlot: (name: SlotNames, contents: React.ReactNode) => void
+    unregisterSlot: (name: SlotNames) => void
+    context: Record<string, unknown>
+  }
+  const SlotsContext = React.createContext<ContextProps>({
+    registerSlot: () => null,
+    unregisterSlot: () => null,
+    context: {}
+  })
+
+  /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
+   *  Slot registers themself with the Slots parent.
+   *  When all the children have mounted = registered themselves in slot,
+   *  we re-render the parent component to render with slots
+   */
+  const Slots: React.FC<{
+    context?: ContextProps['context']
+    children: (slots: Slots) => React.ReactNode
+  }> = ({context = {}, children}) => {
+    // initialise slots
+    const slotsDefinition: Slots = {}
+    slotNames.map(name => (slotsDefinition[name] = null))
+    const slotsRef = React.useRef<Slots>(slotsDefinition)
+
+    const rerenderWithSlots = useForceUpdate()
+    const [isMounted, setIsMounted] = React.useState(false)
+
+    // fires after all the effects in children
+    React.useEffect(() => {
+      rerenderWithSlots()
+      setIsMounted(true)
+    }, [rerenderWithSlots])
+
+    const registerSlot = React.useCallback(
+      (name: SlotNames, contents: React.ReactNode) => {
+        slotsRef.current[name] = contents
+
+        // don't render until the component mounts = all slots are registered
+        if (isMounted) rerenderWithSlots()
+      },
+      [isMounted, rerenderWithSlots]
+    )
+
+    // Slot can be removed from the tree as well,
+    // we need to unregister them from the slot
+    const unregisterSlot = React.useCallback(
+      (name: SlotNames) => {
+        slotsRef.current[name] = null
+        rerenderWithSlots()
+      },
+      [rerenderWithSlots]
+    )
+
+    /**
+     * Slots uses a render prop API so abstract the
+     * implementation detail of using a context provider.
+     */
+    const slots = slotsRef.current
+
+    return (
+      <SlotsContext.Provider value={{registerSlot, unregisterSlot, context}}>{children(slots)}</SlotsContext.Provider>
+    )
+  }
+
+  const Slot: React.FC<{
+    name: SlotNames
+    children: React.ReactNode
+  }> = ({name, children}) => {
+    const {registerSlot, unregisterSlot, context} = React.useContext(SlotsContext)
+
+    React.useEffect(() => {
+      registerSlot(name, typeof children === 'function' ? children(context) : children)
+      return () => unregisterSlot(name)
+    }, [name, children, registerSlot, unregisterSlot, context])
+
+    return null
+  }
+
+  return {Slots, Slot}
+}
+
+export default createSlots

package/src/utils/types/KeyPaths.ts

@@ -1,4 +1,10 @@
 // Produces a union of dot-delimited keypaths to the string values in a nested object:
 export type KeyPaths<O extends Record<string, unknown>> = {
-  [K in keyof O]: K extends string ? (O[K] extends string ? `${K}` : `${K}.${KeyPaths<O[K]>}`) : never
+  [K in keyof O]: K extends string
+    ? O[K] extends string
+      ? `${K}`
+      : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore TypeScript has bested me, but the KeyPaths type is tested.
+        `${K}.${KeyPaths<O[K]>}`
+    : never
 }[keyof O]

package/src/utils/use-force-update.ts

@@ -0,0 +1,7 @@
+// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
+import React from 'react'
+
+export const useForceUpdate = () => {
+  const [, rerender] = React.useState({})
+  return React.useCallback(() => rerender({}), [])
+}

package/src/utils/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,10 @@
+import {useEffect, useLayoutEffect} from 'react'
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined'
+    ? useLayoutEffect
+    : useEffect
+
+export default useIsomorphicLayoutEffect