@primer/components 0.0.0-2021983515 → 0.0.0-2022530194733

package/codemods/__tests__/removeSystemProps.js

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

@@ -1,111 +0,0 @@
-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.primary',
-        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/removeSystemProps.js

@@ -1,312 +0,0 @@
-const prettify = require('./lib/prettify')
-
-const COMMON = [
-  'margin',
-  'marginTop',
-  'marginRight',
-  'marginBottom',
-  'marginLeft',
-  'marginX',
-  'marginY',
-  'm',
-  'mt',
-  'mr',
-  'mb',
-  'ml',
-  'mx',
-  'my',
-  'padding',
-  'paddingTop',
-  'paddingRight',
-  'paddingBottom',
-  'paddingLeft',
-  'paddingX',
-  'paddingY',
-  'p',
-  'pt',
-  'pr',
-  'pb',
-  'pl',
-  'px',
-  'py',
-  'color',
-  'backgroundColor',
-  'opacity',
-  'bg',
-  'display'
-]
-
-const TYPOGRAPHY = [
-  'fontFamily',
-  'fontSize',
-  'fontWeight',
-  'lineHeight',
-  'letterSpacing',
-  'textAlign',
-  'fontStyle',
-  'whiteSpace'
-]
-
-const BORDER = [
-  'border',
-  'borderWidth',
-  'borderStyle',
-  'borderColor',
-  'borderRadius',
-  'borderTop',
-  'borderTopLeftRadius',
-  'borderTopRightRadius',
-  'borderRight',
-  'borderBottom',
-  'borderBottomLeftRadius',
-  'borderBottomRightRadius',
-  'borderLeft',
-  'borderX',
-  'borderY',
-  'borderTopWidth',
-  'borderTopColor',
-  'borderTopStyle',
-  'borderBottomWidth',
-  'borderBottomColor',
-  'borderBottomStyle',
-  'borderLeftWidth',
-  'borderLeftColor',
-  'borderLeftStyle',
-  'borderRightWidth',
-  'borderRightColor',
-  'borderRightStyle',
-  'boxShadow',
-  'textShadow'
-]
-
-const LAYOUT = [
-  'width',
-  'height',
-  'minWidth',
-  'minHeight',
-  'maxWidth',
-  'maxHeight',
-  'size',
-  'overflow',
-  'overflowX',
-  'overflowY',
-  'display',
-  'verticalAlign'
-]
-
-const POSITION = ['position', 'zIndex', 'top', 'right', 'bottom', 'left']
-
-const FLEX = [
-  'alignItems',
-  'alignContent',
-  'justifyItems',
-  'justifyContent',
-  'flexWrap',
-  'flexDirection',
-  'flex',
-  'flexGrow',
-  'flexShrink',
-  'flexBasis',
-  'justifySelf',
-  'alignSelf',
-  'order'
-]
-
-// const GRID = [
-//   'gridGap',
-//   'gridColumnGap',
-//   'gridRowGap',
-//   'gridColumn',
-//   'gridRow',
-//   'gridAutoFlow',
-//   'gridAutoColumns',
-//   'gridAutoRows',
-//   'gridTemplateColumns',
-//   'gridTemplateRows',
-//   'gridTemplateAreas',
-//   'gridArea'
-// ]
-
-const stylePropsMap = {
-  Avatar: [...COMMON],
-  AvatarStack: [...COMMON],
-  BranchName: [...COMMON],
-  Breadcrumb: [...COMMON, ...FLEX],
-  Button: [...COMMON, ...LAYOUT, ...TYPOGRAPHY],
-  ButtonBase: [...COMMON, ...LAYOUT],
-  ButtonClose: [...COMMON, ...LAYOUT],
-  ButtonTableList: [...COMMON, ...TYPOGRAPHY, ...LAYOUT],
-  CircleBadge: [...COMMON],
-  CounterLabel: [...COMMON],
-  Details: [...COMMON],
-  Dialog: [...LAYOUT, ...COMMON, ...POSITION],
-  Dropdown: [...COMMON],
-  FilteredSearch: [...COMMON],
-  FilterList: [...COMMON],
-  Flash: [...COMMON],
-  FormGroup: [...COMMON],
-  FormGroupLabel: [...COMMON, ...TYPOGRAPHY],
-  Header: [...COMMON, ...BORDER],
-  HeaderItem: [...COMMON, ...BORDER],
-  Label: [...COMMON, ...BORDER],
-  LabelGroup: [...COMMON],
-  Link: [...COMMON, ...TYPOGRAPHY],
-  Overlay: [...COMMON],
-  Pagehead: [...COMMON],
-  Pagination: [...COMMON],
-  Popover: [...COMMON, ...LAYOUT, ...POSITION],
-  PopoverContent: [...COMMON, ...LAYOUT, ...POSITION, ...FLEX],
-  SelectMenu: [...COMMON],
-  SelectMenuDivider: [...COMMON],
-  SelectMenuFilter: [...COMMON],
-  SelectMenuFooter: [...COMMON],
-  SelectMenuHeader: [...COMMON, ...TYPOGRAPHY],
-  SelectMenuItem: [...COMMON],
-  SelectMenuList: [...COMMON],
-  SelectMenuLoadingAnimation: [...COMMON],
-  SelectMenuModal: [...COMMON],
-  SelectMenuTab: [...COMMON],
-  SelectMenuTabPanel: [...COMMON],
-  SelectMenuTabs: [...COMMON],
-  SideNav: [...COMMON],
-  Spinner: [...COMMON],
-  StateLabel: [...COMMON],
-  StyledOcticon: [...COMMON],
-  SubNav: [...COMMON, ...FLEX],
-  TabNav: [...COMMON],
-  TabNavLink: [...COMMON, ...TYPOGRAPHY],
-  TextInput: [...COMMON],
-  Timeline: [...COMMON],
-  Tooltip: [...COMMON],
-  Truncate: [...TYPOGRAPHY, ...COMMON],
-  UnderlineNav: [...COMMON]
-}
-
-const expressionToString = expression => {
-  if (expression.type === 'Literal') {
-    const expressionValue = expression.value
-    return typeof expressionValue === 'string' ? `"${expressionValue}"` : expressionValue
-  } else if (expression.type === 'Identifier') {
-    return expression.name
-  } else if (expression.type === 'Identifier') {
-    return expression.name
-  } else if (['null', 'undefined'].includes(expression.raw)) {
-    return expression.raw
-  } else {
-    const start = expression.start
-    const end = expression.end
-    const toks = expression.loc.tokens.filter(token => {
-      return token.type !== 'CommentLine' && token.start >= start && token.end <= end
-    })
-    const vals = toks.map(tok => {
-      return tok.type.label === 'string' ? `"${tok.value}"` : tok.value
-    })
-    return vals.join('')
-  }
-}
-
-const objectToString = (object, spreads = []) => {
-  const values = Object.values(object)
-  const keys = Object.keys(object)
-  const duples = keys.map(function (key, i) {
-    return [key, values[i]]
-  })
-  const accumulator = (string, duple) => {
-    const expression = duple[1]
-    const expressionString = expressionToString(expression)
-    return `${string} ${duple[0]}: ${expressionString},`
-  }
-  const objString = duples.reduce(accumulator, '')
-  const spreadsString = spreads.map(s => `...${s},`).join('')
-  return `{${spreadsString}${objString}}`
-}
-
-module.exports = (file, api) => {
-  const j = api.jscodeshift
-  const ast = j(file.source)
-
-  const importsByName = {}
-
-  ast
-    .find(j.ImportDeclaration, decl => decl.source.value.includes('@primer/components'))
-    .forEach(decl => {
-      j(decl)
-        .find(j.ImportSpecifier)
-        .forEach(spec => {
-          importsByName[spec.node.imported.name] = spec.node.local.name
-        })
-    })
-
-  ast
-    .find(j.JSXElement, {
-      openingElement: {
-        name: {
-          name: name => {
-            return name in stylePropsMap
-          }
-        }
-      }
-    })
-    .forEach(el => {
-      const sx = {}
-      const elementName = el.value?.openingElement?.name?.name
-      const elementNameScrubbed = elementName.replace('.', '')
-      const systemProps = stylePropsMap[elementNameScrubbed]
-      const attrNodes = j(el).find(j.JSXAttribute, {
-        name: name => {
-          const isInElement = name.start >= el.node.start && name.end <= el.value.openingElement.end
-          return systemProps && systemProps.includes(name.name) && isInElement
-        }
-      })
-
-      const sxNodes = j(el).find(j.JSXAttribute, {
-        name: name => {
-          const isInElement = name.start >= el.node.start && name.end <= el.value.openingElement.end
-          return name.name === 'sx' && isInElement
-        }
-      })
-
-      const existingSx = {}
-      const sxNodesArray = sxNodes.nodes() || []
-      const existingSxProps = sxNodesArray[0]?.value?.expression?.properties
-      existingSxProps &&
-        existingSxProps.forEach(p => {
-          const keyName = p?.key?.name
-          const keyValue = p?.key?.raw
-          if (!keyName && !keyValue) {
-            return
-          }
-          existingSx[keyName || keyValue] = p.value
-        })
-      const spreads =
-        existingSxProps &&
-        existingSxProps
-          .filter(p => p.type === 'SpreadElement')
-          .map(s => {
-            const argName = s?.argument?.name
-            const propName = s?.argument?.property?.name
-            const objectName = s?.argument?.object?.name
-            return argName || `${objectName}.${propName}`
-          })
-
-      attrNodes.forEach((attr, index) => {
-        const key = attr?.value?.name?.name
-        const literal = attr?.value?.value
-        const val = literal.type === 'JSXExpressionContainer' ? literal.expression : literal
-        if (key && val) {
-          sx[key] = val
-        }
-        if (index + 1 !== attrNodes.length) {
-          attr.prune()
-        } else {
-          const keys = Object.keys(sx)
-          if (keys.length > 0) {
-            sxNodes.forEach(node => node.prune())
-            j(attr).replaceWith(`sx={${objectToString({...existingSx, ...sx}, spreads)}}`)
-          }
-        }
-      })
-    })
-
-  return prettify(ast, file)
-}

package/lib/ActionList/Divider.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export declare const StyledDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-export declare function Divider(): JSX.Element;
-export declare namespace Divider {
-    var renderItem: typeof Divider;
-}

package/lib/ActionList/Divider.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Divider = Divider;
-exports.StyledDivider = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("../constants");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const StyledDivider = _styledComponents.default.div.withConfig({
-  displayName: "Divider__StyledDivider",
-  componentId: "sc-42656i-0"
-})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'));
-/**
- * Visually separates `Item`s or `Group`s in an `ActionList`.
- */
-
-
-exports.StyledDivider = StyledDivider;
-
-function Divider() {
-  return /*#__PURE__*/_react.default.createElement(StyledDivider, null);
-}
-
-Divider.displayName = "Divider";
-
-/**
- * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
- * so it can be used inline in an `ActionList`’s `items` prop.
- * In other words, `items={[ActionList.Divider]}` is supported as a concise
- * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
- */
-Divider.renderItem = Divider;