@primer/components 0.0.0-202111114525 → 0.0.0-2021111164412

package/README.md

@@ -1,31 +1,30 @@
 <p align="center">
-  <img width="300px" src="/static/assets/readme-components.png">
+  <img width="300px" src="https://user-images.githubusercontent.com/4608155/127241386-f11da52d-00d9-4366-b01c-6f4c1ebcf7f2.png">
 </p>
 
-<h1 align="center">Primer Components</h1>
+<h1 align="center">Primer React</h1>
 
-<p align="center">React components for the Primer Design System</p>
+<p align="center">A React implementation of GitHub's Primer Design System</p>
 
 <p align="center">
   <a aria-label="npm package" href="https://www.npmjs.com/package/@primer/components">
     <img alt="" src="https://img.shields.io/npm/v/@primer/components.svg">
   </a>
-  <a aria-label="contributors graph" href="https://github.com/primer/components/graphs/contributors">
-    <img src="https://img.shields.io/github/contributors/primer/components.svg">
+  <a aria-label="contributors graph" href="https://github.com/primer/react/graphs/contributors">
+    <img src="https://img.shields.io/github/contributors/primer/react.svg">
   </a>
-  <a aria-label="last commit" href="https://github.com/primer/components/commits/main">
+  <a aria-label="last commit" href="https://github.com/primer/react/commits/main">
     <img alt="" src=
-  "https://img.shields.io/github/last-commit/primer/components.svg">
+  "https://img.shields.io/github/last-commit/primer/react.svg">
   </a>
-  <a aria-label="license" href="https://github.com/primer/components/blob/main/LICENSE">
-    <img src="https://img.shields.io/github/license/primer/components.svg" alt="">
+  <a aria-label="license" href="https://github.com/primer/react/blob/main/LICENSE">
+    <img src="https://img.shields.io/github/license/primer/react.svg" alt="">
   </a>
 </p>
 
-
 ## Documentation
 
-Our documentation site lives at [primer.style/components](https://primer.style/components). You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
+Our documentation site lives at [primer.style/react](https://primer.style/react). You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.
 
 ## Installation
 
@@ -40,18 +39,19 @@ yarn add @primer/components
 ```
 
 ## Roadmap
-You can track our roadmap progress in the [Roadmap Project Board](https://github.com/primer/components/projects/3), see more detail in the [quarterly planning Discussions](https://github.com/primer/components/discussions?discussions_q=%5BRoadmap%5D), and find a list of all the current epic tracking issues [here](https://github.com/primer/components/discussions/997).
+
+You can track our roadmap progress in the [Roadmap Project Board](https://github.com/primer/react/projects/3), see more detail in the [quarterly planning Discussions](https://github.com/primer/react/discussions?discussions_q=%5BRoadmap%5D), and find a list of all the current epic tracking issues [here](https://github.com/primer/react/discussions/997).
 
 ## Contributing
- We love collaborating with folks inside and outside of GitHub and welcome contributions!
+
+We love collaborating with folks inside and outside of GitHub and welcome contributions!
 
 > 👉 See [the contributing docs](contributor-docs/CONTRIBUTING.md) for more info on code style, testing, coverage, and troubleshooting.
 
 ## New Component Proposals
-We welcome and encourage new component proposals from internal GitHub teams! Our best work comes from collaborating directly with the teams using Primer React Components in their projects. If you'd like to kick off a new component proposal, please submit an issue using the [component proposal issue template](https://github.com/primer/components/issues/new?template=new-component-proposal.md) and we will get in touch!
-
 
+We welcome and encourage new component proposals from internal GitHub teams! Our best work comes from collaborating directly with the teams using Primer React Components in their projects. If you'd like to kick off a new component proposal, please submit an issue using the [component proposal issue template](https://github.com/primer/react/issues/new?template=new-component-proposal.md) and we will get in touch!
 
 [styled-components]: https://www.styled-components.com/docs
-[Primer CSS]: https://github.com/primer/primer
+[primer css]: https://github.com/primer/primer
 [flash of unstyled content]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content

package/codemods/__tests__/deprecateUtilityComponents.js

@@ -0,0 +1,200 @@
+import {defineInlineTest} from 'jscodeshift/dist/testUtils'
+import deprecateUtilityComponents from '../deprecateUtilityComponents'
+
+defineInlineTest(
+  deprecateUtilityComponents,
+  {},
+  `
+import {Flex} from '@primer/components'
+export default () => (
+  <Flex>
+    <div />
+  </Flex>
+)
+`.trim(),
+  `
+import {Box} from '@primer/components'
+export default () => (
+  <Box display="flex">
+    <div />
+  </Box>
+)
+`.trim(),
+  'deprecateUtilityComponents'
+)
+
+defineInlineTest(
+  deprecateUtilityComponents,
+  {},
+  `
+import {Grid} from '@primer/components'
+export default () => (
+  <Grid>
+    <div />
+  </Grid>
+)
+`.trim(),
+  `
+import {Box} from '@primer/components'
+export default () => (
+  <Box display="grid">
+    <div />
+  </Box>
+)
+`.trim(),
+  'deprecateUtilityComponents'
+)
+
+defineInlineTest(
+  deprecateUtilityComponents,
+  {},
+  `
+import {Position} from '@primer/components'
+export default () => (
+  <Position>
+    <div />
+  </Position>
+)
+`.trim(),
+  `
+import {Box} from '@primer/components'
+export default () => (
+  <Box>
+    <div />
+  </Box>
+)
+`.trim(),
+  'deprecateUtilityComponents'
+)
+
+defineInlineTest(
+  deprecateUtilityComponents,
+  {},
+  `
+import {Absolute} from '@primer/components'
+export default () => (
+  <Absolute>
+    <div />
+  </Absolute>
+)
+`.trim(),
+  `
+import {Box} from '@primer/components'
+export default () => (
+  <Box position="absolute">
+    <div />
+  </Box>
+)
+`.trim(),
+  'deprecateUtilityComponents'
+)
+
+defineInlineTest(
+  deprecateUtilityComponents,
+  {},
+  `
+import {Relative} from '@primer/components'
+export default () => (
+  <Relative>
+    <div />
+  </Relative>
+)
+`.trim(),
+  `
+import {Box} from '@primer/components'
+export default () => (
+  <Box position="relative">
+    <div />
+  </Box>
+)
+`.trim(),
+  'deprecateUtilityComponents'
+)
+
+defineInlineTest(
+  deprecateUtilityComponents,
+  {},
+  `
+import {Fixed} from '@primer/components'
+export default () => (
+  <Fixed>
+    <div />
+  </Fixed>
+)
+`.trim(),
+  `
+import {Box} from '@primer/components'
+export default () => (
+  <Box position="fixed">
+    <div />
+  </Box>
+)
+`.trim(),
+  'deprecateUtilityComponents'
+)
+
+defineInlineTest(
+  deprecateUtilityComponents,
+  {},
+  `
+import {Sticky} from '@primer/components'
+export default () => (
+  <Sticky>
+    <div />
+  </Sticky>
+)
+`.trim(),
+  `
+import {Box} from '@primer/components'
+export default () => (
+  <Box position="sticky">
+    <div />
+  </Box>
+)
+`.trim(),
+  'deprecateUtilityComponents'
+)
+
+defineInlineTest(
+  deprecateUtilityComponents,
+  {},
+  `
+import {BorderBox} from '@primer/components'
+export default () => (
+  <BorderBox borderColor="border.secondary" borderRadius={1}>
+    <div />
+  </BorderBox>
+)
+`.trim(),
+  `
+import {Box} from '@primer/components'
+export default () => (
+  <Box borderColor="border.secondary" borderRadius={1} borderWidth="1px" borderStyle="solid">
+    <div />
+  </Box>
+)
+`.trim(),
+  'deprecateUtilityComponents'
+)
+
+defineInlineTest(
+  deprecateUtilityComponents,
+  {},
+  `
+import {Flex} from '@primer/components'
+export default () => (
+  <Flex p={2} m={1}>
+    <div />
+  </Flex>
+)
+`.trim(),
+  `
+import {Box} from '@primer/components'
+export default () => (
+  <Box p={2} m={1} display="flex">
+    <div />
+  </Box>
+)
+`.trim(),
+  'deprecateUtilityComponents'
+)

package/codemods/__tests__/removeSystemProps.js

@@ -0,0 +1,225 @@
+import {defineInlineTest} from 'jscodeshift/dist/testUtils'
+import removeSystemProps from '../removeSystemProps'
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label mr={1} ml={leftMargin}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label sx={{mr: 1, ml: leftMargin}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Button, StyledOcticon} from '@primer/components'
+import {CheckIcon, ClippyIcon} from '@primer/octicons-react'
+
+const ClipboardCopy = ({value}) => <Button px={2}>
+  {copied ? (
+    <StyledOcticon icon={CheckIcon} color="green.5" />
+  ) : (
+    <StyledOcticon icon={ClippyIcon} color="gray.5" />
+  )}
+</Button>
+
+`.trim(),
+  `
+import {Button, StyledOcticon} from '@primer/components'
+import {CheckIcon, ClippyIcon} from '@primer/octicons-react'
+
+const ClipboardCopy = ({value}) => (
+  <Button sx={{px: 2}}>
+    {copied ? (
+      <StyledOcticon icon={CheckIcon} sx={{color: 'green.5'}} />
+    ) : (
+      <StyledOcticon icon={ClippyIcon} sx={{color: 'gray.5'}} />
+    )}
+  </Button>
+)`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Link} from '@primer/components'
+const siteMetadata = {shortName: 'inline-block'}
+
+const link = <Link
+  display={[
+    // We only hide "Primer" on small viewports if a shortName is defined.
+    siteMetadata.shortName ? 'none' : 'inline-block',
+    null,
+    null,
+    'inline-block',
+  ]}
+  href="https://primer.style"
+  color="blue.4"
+  fontFamily="mono"
+>
+  Primer
+</Link>
+`.trim(),
+  `
+import {Link} from '@primer/components'
+const siteMetadata = {shortName: 'inline-block'}
+
+const link = (
+  <Link
+    href="https://primer.style"
+    sx={{
+      display: [siteMetadata.shortName ? 'none' : 'inline-block', null, null, 'inline-block'],
+      color: 'blue.4',
+      fontFamily: 'mono'
+    }}
+  >
+    Primer
+  </Link>
+)`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label mr={1} ml={leftMargin} sx={{p: 1}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label sx={{p: 1, mr: 1, ml: leftMargin}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label mr={1} ml={leftMargin} sx={{p:3}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label sx={{p: 3, mr: 1, ml: leftMargin}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+const colorProps = {backgroundColor: 'red'}
+const borderProps = {borderColor: 'red'}
+export default () => (
+  <Label mr={1} ml={leftMargin} sx={{...colorProps, ...borderProps, p:3}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+const colorProps = {backgroundColor: 'red'}
+const borderProps = {borderColor: 'red'}
+export default () => (
+  <Label sx={{...colorProps, ...borderProps, p: 3, mr: 1, ml: leftMargin}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label mr={1} sx={{'&:hover': {textDecoration: 'none'}}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+export default () => (
+  <Label sx={{'&:hover': {textDecoration: 'none'}, mr: 1}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)
+
+defineInlineTest(
+  removeSystemProps,
+  {},
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+const colorProps = {dark: {backgroundColor: 'red'}}
+export default () => (
+  <Label mr={1} ml={leftMargin} sx={{...colorProps.dark, p:3}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  `
+import {Label} from '@primer/components'
+const leftMargin = 2
+const colorProps = {dark: {backgroundColor: 'red'}}
+export default () => (
+  <Label sx={{...colorProps.dark, p: 3, mr: 1, ml: leftMargin}}>
+    <Text>hi</Text>
+  </Label>
+)
+`.trim(),
+  'removeSystemProps'
+)

package/codemods/deprecateUtilityComponents.js

@@ -0,0 +1,111 @@
+const prettify = require('./lib/prettify')
+
+module.exports = (file, api) => {
+  const j = api.jscodeshift
+  const ast = j(file.source)
+
+  deprecateComponents(ast, j, '@primer/components', {
+    Flex: {
+      identifier: 'Box',
+      attributes: {
+        display: 'flex'
+      }
+    },
+    Grid: {
+      identifier: 'Box',
+      attributes: {
+        display: 'grid'
+      }
+    },
+    Position: {
+      identifier: 'Box',
+      attributes: {}
+    },
+    Absolute: {
+      identifier: 'Box',
+      attributes: {
+        position: 'absolute'
+      }
+    },
+    Relative: {
+      identifier: 'Box',
+      attributes: {
+        position: 'relative'
+      }
+    },
+    Fixed: {
+      identifier: 'Box',
+      attributes: {
+        position: 'fixed'
+      }
+    },
+    Sticky: {
+      identifier: 'Box',
+      attributes: {
+        position: 'sticky'
+      }
+    },
+    BorderBox: {
+      identifier: 'Box',
+      attributes: {
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'border.default',
+        borderRadius: 2
+      }
+    }
+  })
+
+  return prettify(ast, file)
+}
+
+function deprecateComponents(ast, j, importSource, importMap) {
+  const imports = ast.find(j.ImportDeclaration, {source: {value: importSource}})
+  const importsByName = {}
+
+  imports.forEach(decl => {
+    j(decl)
+      .find(j.ImportSpecifier)
+      .forEach(spec => {
+        importsByName[spec.node.imported.name] = spec
+      })
+  })
+
+  for (const [from, to] of Object.entries(importMap)) {
+    rewriteImport(from, to.identifier, to.attributes)
+  }
+
+  function rewriteImport(from, to, attributes) {
+    imports.forEach(decl => {
+      j(decl)
+        .find(j.ImportSpecifier, {imported: {name: from}})
+        .forEach(spec => {
+          if (importsByName[to]) {
+            // if the destination import already exists and there are members
+            // in this identifier, then this one is a dupe
+            j(spec).remove()
+          } else {
+            // otherwise, we can safely rename this one to the new identifier
+            spec.node.imported.name = to
+            importsByName[to] = spec
+          }
+        })
+    })
+
+    ast.find(j.JSXOpeningElement, {name: {name: from}}).forEach(nodePath => {
+      for (const [attr, value] of Object.entries(attributes || {})) {
+        const expression = typeof value === 'string' ? j.literal(value) : j.jsxExpressionContainer(j.literal(value))
+        const attrExists = nodePath.value.attributes.find(a => a?.name?.name === attr)
+        if (!attrExists) {
+          nodePath.value.attributes.push(j.jsxAttribute(j.jsxIdentifier(attr), expression))
+        }
+      }
+    })
+
+    // replace all of the rewritten identifiers with member expressions
+    ast
+      .find(j.Identifier, {name: from})
+      .filter(id => id.parent.node.type !== 'ImportSpecifier')
+      .replaceWith(j.jsxIdentifier(to))
+  }
+}

package/codemods/lib/modifyProps.js

@@ -1,13 +1,15 @@
 module.exports = (ast, j, moduleName, propsMap) => {
   const importsByName = {}
 
-  ast.find(j.ImportDeclaration, decl => decl.source.value === moduleName).forEach(decl => {
-    j(decl)
-      .find(j.ImportSpecifier)
-      .forEach(spec => {
-        importsByName[spec.node.imported.name] = spec.node.local.name
-      })
-  })
+  ast
+    .find(j.ImportDeclaration, decl => decl.source.value === moduleName)
+    .forEach(decl => {
+      j(decl)
+        .find(j.ImportSpecifier)
+        .forEach(spec => {
+          importsByName[spec.node.imported.name] = spec.node.local.name
+        })
+    })
 
   ast
     .find(j.JSXElement, {

package/codemods/lib/prettify.js

@@ -7,7 +7,7 @@ module.exports = function prettify(ast, file) {
     source,
     Object.assign(
       {
-        parser: 'babylon',
+        parser: 'typescript',
         filepath: file.path
       },
       config

package/codemods/lib/replaceImportSource.js

@@ -1,7 +1,7 @@
 module.exports = function replaceImportSource(ast, j, from, to) {
-  ast.find(j.ImportDeclaration, decl => decl.source.value === from).forEach(decl => {
-    j(decl)
-      .find(j.Literal, {value: from})
-      .replaceWith(j.literal(to))
-  })
+  ast
+    .find(j.ImportDeclaration, decl => decl.source.value === from)
+    .forEach(decl => {
+      j(decl).find(j.Literal, {value: from}).replaceWith(j.literal(to))
+    })
 }