@primer/components 31.0.2-rc.c7dafefb → 31.2.0-rc.25d7c83f

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/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/TextInputWithTokens.stories.tsx

@@ -121,6 +121,15 @@ export const TokenRemoveButtonsHidden = () => {
   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 => {

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,9 +1,24 @@
-import css, {SystemStyleObject} from '@styled-system/css'
+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
+    ? ThemeColorPaths | SystemCssProperties[K]
+    : K extends keyof ShadowProps
+    ? ThemeShadowPaths | SystemCssProperties[K]
+    : SystemCssProperties[K]
+}
+
+export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject
 
 export interface SxProp {
-  sx?: SystemStyleObject
+  sx?: BetterSystemStyleObject
 }
 
 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/theme.ts

@@ -1,3 +1,89 @@
 import {theme} from './theme-preval'
+import {KeyPaths} from './utils/types/KeyPaths'
 
 export default theme
+
+// NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
+// were exports from primitives (or a different shape but derived from those exports).
+
+type ThemeColors = {
+  fg: {
+    default: string
+    muted: string
+    subtle: string
+    onEmphasis: string
+  }
+  canvas: {
+    default: string
+    overlay: string
+    inset: string
+    subtle: string
+  }
+  border: {
+    default: string
+    muted: string
+    subtle: string
+  }
+
+  // Roles
+  neutral: {
+    emphasisPlus: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  accent: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  success: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  attention: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  severe: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  danger: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  done: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+  sponsors: {
+    fg: string
+    emphasis: string
+    muted: string
+    subtle: string
+  }
+}
+
+type ThemeShadows = {
+  shadow: {
+    small: string
+    medium: string
+    large: string
+    extraLarge: string
+  }
+}
+
+export type ThemeColorPaths = KeyPaths<ThemeColors>
+export type ThemeShadowPaths = KeyPaths<ThemeShadows>

package/src/unreleased.ts

@@ -0,0 +1,9 @@
+/** This is the place where we keep components that are not part of the public
+ *  api yet (not in main bundle). We don't recommend using it in production.
+ *
+ *  But, they are published on npm and you can import them for experimentation/feedback.
+ *  example: import {ActionList} from '@primer/components/unreleased
+ */
+
+// Components
+export * from './ActionList2'

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

@@ -0,0 +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}`
+      : // 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