diff --git a/.changeset/config.json b/.changeset/config.json index d826f57cc65..18b246ec032 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -6,5 +6,5 @@ "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", - "ignore": ["docs", "example-*", "codesandbox"] + "ignore": ["example-*", "codesandbox"] } diff --git a/.changeset/pre.json b/.changeset/pre.json index 6d3b17ba769..0cf87b7a279 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -2,7 +2,6 @@ "mode": "pre", "tag": "rc", "initialVersions": { - "docs": "1.0.0", "codesandbox": "0.0.0", "example-app-router": "0.0.0", "example-consumer-test": "0.0.0", diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js deleted file mode 100644 index 545992ebbba..00000000000 --- a/docs/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -'use strict' - -module.exports = {} diff --git a/docs/.gitignore b/docs/.gitignore deleted file mode 100644 index 87707a4d526..00000000000 --- a/docs/.gitignore +++ /dev/null @@ -1,91 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -lerna-debug.log* - -# Diagnostic reports (https://nodejs.org/api/report.html) -report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage -*.lcov - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# TypeScript v1 declaration files -typings/ - -# TypeScript cache -*.tsbuildinfo - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env -.env.test - -# parcel-bundler cache (https://parceljs.org/) -.cache - -# next.js build output -.next - -# nuxt.js build output -.nuxt - -# vuepress build output -.vuepress/dist - -# Serverless directories -.serverless/ - -# FuseBox cache -.fusebox/ - -# DynamoDB Local files -.dynamodb/ - -# Gatsby -public/ diff --git a/docs/components/DeprecationBanner.js b/docs/components/DeprecationBanner.js deleted file mode 100644 index 2ba585c678d..00000000000 --- a/docs/components/DeprecationBanner.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import {Link as GatsbyLink} from 'gatsby' -import {Note} from '@primer/gatsby-theme-doctocat' - -const DeprecationBanner = ({replacementUrl}) => { - return ( - - This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new - content can be found here. - - ) -} - -export default DeprecationBanner diff --git a/docs/components/PropsList.js b/docs/components/PropsList.js deleted file mode 100644 index dff6cef8a35..00000000000 --- a/docs/components/PropsList.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react' - -const PropsList = ({systemProps}) =>
{systemProps.propNames.join(', ')}
- -export default PropsList diff --git a/docs/components/State.js b/docs/components/State.js deleted file mode 100644 index b5d7c496ac7..00000000000 --- a/docs/components/State.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const State = props => { - const result = React.useState(props.default) - - return props.children(result) -} - -export default State diff --git a/docs/components/ThemeReferenceTree.js b/docs/components/ThemeReferenceTree.js deleted file mode 100644 index a7366b1c5a1..00000000000 --- a/docs/components/ThemeReferenceTree.js +++ /dev/null @@ -1,99 +0,0 @@ -import React, {useState} from 'react' -import {Box, Text, TreeView} from '@primer/react' - -export default function ThemeReferenceTree({themeData}) { - return ( - - - - - - ) -} - -const isColor = strColor => { - const s = new Option().style - s.color = strColor - return s.color !== '' -} - -const getLeadingVisual = property => { - const propertyStr = property.toString() - if (isColor(propertyStr)) { - return ( - - ) - } else { - return null - } -} - -const getPropertyType = property => { - if (Array.isArray(property)) { - return '[...]' - } - if (typeof property === 'object') { - return '{...}' - } - return -} - -function RecursiveTree({property, propertyName, isRootTreeItem = false}) { - const [expanded, setExpanded] = useState(false) - - const isLeafItem = typeof property === 'number' || typeof property === 'string' || typeof property === 'boolean' - const getItem = () => { - if (isLeafItem) { - return ( - - {getLeadingVisual(property)} - {propertyName} : {property && property.toString()} - - ) - } else if (isRootTreeItem) { - return Object.values(property).map((childProperty, index) => ( - - )) - } - return ( - - {propertyName}{' '} - {!expanded && {getPropertyType(property)}} - - {Object.values(property).map((childProperty, index) => ( - - ))} - - - ) - } - - return ( - <> - {property ? ( - getItem() - ) : ( - // Render an item for 0 values - - 0 : 0 - - )} - - ) -} diff --git a/docs/components/constants.js b/docs/components/constants.js deleted file mode 100644 index 7b3c39078c9..00000000000 --- a/docs/components/constants.js +++ /dev/null @@ -1,34 +0,0 @@ -import {theme} from '@primer/react' -import systemPropTypes from '@styled-system/prop-types' -import themeGet from '@styled-system/theme-get' -import * as styledSystem from 'styled-system' - -const {get: getKey, compose, system} = styledSystem - -export const get = key => themeGet(key, getKey(theme, key)) - -const whiteSpace = system({ - whiteSpace: { - property: 'whiteSpace', - cssProperty: 'whiteSpace', - }, -}) - -export const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace) - -export const COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display) - -export const BORDER = compose(styledSystem.border, styledSystem.shadow) - -// these are 1:1 with styled-system's API now, -// so you could consider dropping the abstraction -export const LAYOUT = styledSystem.layout -export const POSITION = styledSystem.position -export const FLEX = styledSystem.flexbox -export const GRID = styledSystem.grid - -TYPOGRAPHY.propTypes = systemPropTypes.typography -LAYOUT.propTypes = systemPropTypes.layout -POSITION.propTypes = systemPropTypes.position -FLEX.propTypes = systemPropTypes.flexbox -GRID.propTypes = systemPropTypes.grid diff --git a/docs/components/index.js b/docs/components/index.js deleted file mode 100644 index 07f0a549363..00000000000 --- a/docs/components/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export {default as PropsList} from './PropsList' -export {COMMON, LAYOUT, BORDER, TYPOGRAPHY, FLEX, POSITION, GRID} from './constants' diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx deleted file mode 100644 index 46e481daa0f..00000000000 --- a/docs/content/ActionList.mdx +++ /dev/null @@ -1,264 +0,0 @@ ---- -componentId: action_list -title: ActionList -status: Beta -source: https://github.com/primer/react/tree/main/packages/react/src/ActionList -storybook: '/react/storybook?path=/story/components-actionlist' -description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including ActionMenu and SelectPanel. ---- - -import data from '../../packages/react/src/ActionList/ActionList.docs.json' - -import {ActionList, Avatar} from '@primer/react' -import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react' -import InlineCode from '@primer/gatsby-theme-doctocat/src/components/inline-code' -import DeprecationBanner from '../components/DeprecationBanner' - - - - - - - - - - github.com/primer - - A React implementation of GitHub's Primer Design System - - - - - - - mona - Monalisa Octocat - - - - - - 4 vulnerabilities - - - - - - - -```js -import {ActionList} from '@primer/react' -``` - -## Examples - -### Minimal example - -```jsx live - - New file - Copy link - Edit file - - Delete file - -``` - -### With leading visual - -Leading visuals are optional and appear at the start of an item. They can be octicons, avatars, and other custom visuals that fit a small area. - -```jsx live - - - - - - github.com/primer - - - - - - 4 vulnerabilities - - - - - - mona - - -``` - -### With trailing visual - -Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does. - -```jsx live - - - New file - ⌘ + N - - - Copy link - ⌘ + C - - - Edit file - ⌘ + E - - - Delete file - ⌫ - - -``` - -### With description and dividers - -Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present. - -```jsx live - - - - - - mona - Monalisa Octocat - - - - - - hubot - Hubot - - - - - - primer-css - GitHub Design Systems Bot - - -``` - -### With links - -When you want to add links to the List instead of actions, use `ActionList.LinkItem` - -```jsx live - - - - - - github/primer - - - - - - MIT License - - - - - - 1.4k stars - - -``` - -### With groups - -```javascript live noinline -const SelectFields = () => { - const [options, setOptions] = React.useState([ - {text: 'Status', selected: true}, - {text: 'Stage', selected: true}, - {text: 'Assignee', selected: true}, - {text: 'Team', selected: true}, - {text: 'Estimate', selected: false}, - {text: 'Due Date', selected: false}, - ]) - - const visibleOptions = options.filter(option => option.selected) - const hiddenOptions = options.filter(option => !option.selected) - - const toggle = text => { - setOptions( - options.map(option => { - if (option.text === text) option.selected = !option.selected - return option - }), - ) - } - - return ( - - - Visible fields - {visibleOptions.map(option => ( - toggle(option.text)}> - {option.text} - - ))} - - - Hidden fields - {hiddenOptions.map((option, index) => ( - toggle(option.text)}> - {option.text} - - ))} - {hiddenOptions.length === 0 && No hidden fields} - - - ) -} - -render() -``` - -## Props - - - -## Status - - - -## Further reading - -- [Interface guidelines: Action List](https://primer.style/design/components/action-list) - -## Related components - -- [ActionMenu](/ActionMenu) -- [SelectPanel](/SelectPanel) diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx deleted file mode 100644 index e8f9de88087..00000000000 --- a/docs/content/ActionMenu.mdx +++ /dev/null @@ -1,322 +0,0 @@ ---- -componentId: action_menu -title: ActionMenu -status: Beta -a11yReviewed: false -source: https://github.com/primer/react/tree/main/packages/react/src/ActionMenu.tsx -storybook: '/react/storybook?path=/story/components-actionmenu' -description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button. ---- - -import data from '../../packages/react/src/ActionMenu/ActionMenu.docs.json' - -import {Box, Avatar, ActionList, ActionMenu} from '@primer/react' -import DeprecationBanner from '../components/DeprecationBanner' - - - -
- - - - Menu - - - - Copy link - ⌘C - - - Quote reply - ⌘Q - - - Edit comment - ⌘E - - - - Delete file - ⌘D - - - - - - -
- -```js -import {ActionMenu} from '@primer/react' -``` - -
- -## Examples - -### Minimal example - -`ActionMenu` ships with `ActionMenu.Button` which is an accessible trigger for the overlay. It's recommended to compose `ActionList` with `ActionMenu.Overlay` - -  - -```jsx live - - Menu - - - - console.log('New file')}>New file - Copy link - Edit file - - Delete file - - - -``` - -### With a custom anchor - -You can choose to have a different _anchor_ for the Menu depending on the application's context. - -  - -```jsx live - - - - - - - - - - - - Rename - - - - - - Archive all cards - - - - - - Delete - - - - -``` - -### With Groups - -```jsx live - - Open column menu - - - - - Live query - - - - - repo:github/memex,github/github - - - - - Layout - - - - - Table - - Information-dense table optimized for operations across teams - - - - - - - Board - Kanban-style board focused on visual states - - - - - - - - - Save sort and filters to current view - - - - - - Save sort and filters to new view - - - - - - - - - View settings - - - - - -``` - -### With selection - -Use `selectionVariant` on `ActionList` to create a menu with single or multiple selection. - -```javascript live noinline -const fieldTypes = [ - {icon: TypographyIcon, name: 'Text'}, - {icon: NumberIcon, name: 'Number'}, - {icon: CalendarIcon, name: 'Date'}, - {icon: SingleSelectIcon, name: 'Single select'}, - {icon: IterationsIcon, name: 'Iteration'}, -] - -const Example = () => { - const [selectedIndex, setSelectedIndex] = React.useState(1) - const selectedType = fieldTypes[selectedIndex] - - return ( - - - {selectedType.name} - - - - {fieldTypes.map((type, index) => ( - setSelectedIndex(index)}> - - - - {type.name} - - ))} - - - - ) -} - -render() -``` - -### With External Anchor - -To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`. Make sure you add `aria-expanded` and `aria-haspopup` to the external anchor: - -```javascript live noinline -const Example = () => { - const [open, setOpen] = React.useState(false) - const anchorRef = React.useRef(null) - - return ( - <> - - - - - - Copy link - Quote reply - Edit comment - - Delete file - - - - - ) -} - -render() -``` - -### With Overlay Props - -To create an anchor outside of the menu, you need to switch to controlled mode for the menu and pass it as `anchorRef` to `ActionMenu`: - -```javascript live noinline -const handleEscape = () => alert('you hit escape!') - -render( - - Open Actions Menu - - - - Open current Codespace - - Your existing Codespace will be opened to its previous state, and you'll be asked to manually switch to - new-branch. - - ⌘O - - - Create new Codespace - - Create a brand new Codespace with a fresh image and checkout this branch. - - ⌘C - - - - , -) -``` - -## Props - - - -## Status - - - -## Further reading - -[Interface guidelines: Action List + Menu](https://primer.style/design/components/action-list) - -## Related components - -- [ActionList](/ActionList) -- [SelectPanel](/SelectPanel) -- [Button](/Button) diff --git a/docs/content/AnchoredOverlay.mdx b/docs/content/AnchoredOverlay.mdx deleted file mode 100644 index 47c63dfa023..00000000000 --- a/docs/content/AnchoredOverlay.mdx +++ /dev/null @@ -1,75 +0,0 @@ ---- -componentId: anchored_overlay -title: AnchoredOverlay -status: Alpha -source: https://github.com/primer/react/tree/main/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx -storybook: '/react/storybook?path=/story/behaviors-anchoredoverlay--default-portal' ---- - -import data from '../../packages/react/src/AnchoredOverlay/AnchoredOverlay.docs.json' - -import DeprecationBanner from '../components/DeprecationBanner' - - - -An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor. -The overlay can be opened and navigated using keyboard or mouse. - -See also [Overlay positioning](/Overlay#positioning). - -## Examples - -```jsx live - - {([isOpen, setIsOpen]) => { - const openOverlay = React.useCallback(() => setIsOpen(true), [setIsOpen]) - const closeOverlay = React.useCallback(() => setIsOpen(false), [setIsOpen]) - return ( - ( - - )} - open={isOpen} - onOpen={openOverlay} - onClose={closeOverlay} - > - -

- This menu automatically receives a focus trap and focus zone. Use up/down keys to navigate between buttons -

- - - - - - ) - }} - -``` - -## Props - - - -## Status - - diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx deleted file mode 100644 index 002d27bf531..00000000000 --- a/docs/content/Autocomplete.mdx +++ /dev/null @@ -1,728 +0,0 @@ ---- -componentId: autocomplete -title: Autocomplete -status: Alpha -description: Used to render a text input that allows a user to quickly filter through a list of options to pick one or more values. -source: https://github.com/primer/react/tree/main/packages/react/src/Autocomplete -storybook: '/react/storybook?path=/story/components-autocomplete' ---- - -import data from '../../packages/react/src/Autocomplete/Autocomplete.docs.json' -import {Autocomplete} from '@primer/react' -import DeprecationBanner from '../components/DeprecationBanner' - - - -The `Autocomplete` component is comprised of an `Autocomplete.Input` component that a user types into, and a `Autocomplete.Menu` component that displays the list of selectable values. - -## Anatomy - -### Autocomplete.Input - -The text input is used to filter the options in the dropdown menu. It is also used to show the selected value (or values). - -The default input rendered is the `TextInput` component. A different text input component may be rendered by passing a different component to the `as` prop. - -The `Autocomplete.Input` should not be rendered without a `