Move react-design-tokens package

.changeset/quick-sloths-exercise.md

@@ -0,0 +1,5 @@
+---
+"@component-driven/react-design-tokens": minor
+---
+
+Move react-design-tokens package to https://github.com/component-driven/ui

README.md → Readme.md

@@ -2,8 +2,9 @@
 
 ![Release](https://github.com/component-driven/ui/workflows/Release/badge.svg)
 
-This package includes:
+Includes following packages:
 
+- `react-design-tokens` — React components to document design tokens in a styleguide.
 - `FocusWithin` component — the missing JS API of the CSS `:focus-within` for React
 - `WithSelector` component to allow preview of pseudo-styles like `:hover` and `:focus` in styleguides
 - `mixins` — a collection of mixins for pseudo styles (`:focus`, `:disabled`) to work with CSS-in-JS libraries

package.json

@@ -26,6 +26,7 @@
   },
   "homepage": "https://react-focus-utils.netlify.com",
   "dependencies": {
+    "find-up": "^5.0.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "styled-components": "^5.0.1"

packages/react-design-tokens/Readme.md

@@ -0,0 +1,35 @@
+# react-design-tokens
+
+[![Build Status](https://travis-ci.org/component-driven/react-design-tokens.svg)](https://travis-ci.org/component-driven/react-design-tokens) [![npm](https://img.shields.io/npm/v/@component-driven/react-design-tokens.svg)](https://www.npmjs.com/package/@component-driven/react-design-tokens)
+
+React components to document design tokens in a styleguide.
+
+## Examples
+
+### [Component-driven Design Systems Workshop](https://github.com/component-driven/component-driven-development) Design System
+
+```jsx harmony
+import { Grid } from 'theme-ui'
+import theme from './src/examples/cdds'
+import { Colors, Spacing, Typography } from './src'
+
+;<Grid gap={5}>
+  <Colors theme={theme} />
+  <Spacing theme={theme} />
+  <Typography theme={theme} />
+</Grid>
+```
+
+### GitHub Primer Design System
+
+```jsx harmony
+import { Grid } from 'theme-ui'
+import theme from './src/examples/primer'
+import { Colors, Spacing, Typography } from './src'
+
+;<Grid gap={5}>
+  <Colors theme={theme} />
+  <Spacing theme={theme} />
+  <Typography theme={theme} />
+</Grid>
+```

packages/react-design-tokens/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@component-driven/react-design-tokens",
+  "description": "React components to document design tokens in a styleguide",
+  "version": "2.1.1",
+  "main": "dist/react-design-tokens.cjs.js",
+  "module": "dist/react-design-tokens.esm.js",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "clipboard-copy": "^3.0.0",
+    "lodash": "^4.17.11",
+    "polished": "^3.4.0",
+    "theme-ui": "^0.3.5"
+  },
+  "devDependencies": {
+    "primer-colors": "^1.0.1",
+    "primer-spacing": "^1.0.2",
+    "primer-typography": "^1.0.1",
+    "prop-types": "^15.7.2"
+  },
+  "author": "Andrey Okonetchnikov <andrey@okonet.ru>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/react-design-tokens/src/components/ColorSwatch.jsx

@@ -0,0 +1,33 @@
+/* @jsx jsx */
+import { jsx } from "theme-ui";
+import React from "react";
+import { readableColor } from "polished";
+import { Swatch, SwatchToken, SwatchValue } from "../";
+import { tokenPropType, valuePropType } from "../propTypes";
+
+export const ColorSwatch = ({ value, token }) => {
+	const color = readableColor(value, "black", "white");
+	return (
+		<Swatch token={token} value={value}>
+			<div
+				sx={{
+					p: 3,
+					pt: 6,
+					bg: value,
+					overflow: "hidden"
+				}}
+			>
+				<SwatchToken color={color}>{token}</SwatchToken>
+				<SwatchValue color={color}>{value}</SwatchValue>
+			</div>
+		</Swatch>
+	);
+};
+
+ColorSwatch.propTypes = {
+	...tokenPropType,
+	...valuePropType
+};
+
+/** @component */
+export default ColorSwatch;

packages/react-design-tokens/src/components/ColorSwatch.md

@@ -0,0 +1,7 @@
+Renders a color swatch with a readable text.
+
+```jsx harmony
+<ColorSwatch token={'accent'} value={'#C0100F'} />
+```
+
+When clicked, the value of the token is copied to clipboard.

packages/react-design-tokens/src/components/Colors.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Grid, ThemeProvider } from "theme-ui";
+import { omitBy, pickBy, isString } from "lodash";
+import { Swatches, ColorSwatch, PaletteSwatch } from "../index";
+
+export default function Colors({ theme }) {
+	const gap = 2;
+	const colors = pickBy(theme.colors, isString);
+	const palettes = omitBy(theme.colors, isString);
+	return (
+		<ThemeProvider theme={theme}>
+			<Grid gap={gap}>
+				<Swatches theme={theme} items={palettes}>
+					{(token, value) => (
+						<Grid
+							gap={0}
+							key={token}
+							sx={{
+								gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))"
+							}}
+						>
+							<PaletteSwatch token={token} value={value} />
+						</Grid>
+					)}
+				</Swatches>
+				<Grid
+					gap={gap}
+					sx={{
+						gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))"
+					}}
+				>
+					<Swatches theme={theme} items={colors}>
+						{(token, value) => (
+							<ColorSwatch token={token} value={value} key={token} />
+						)}
+					</Swatches>
+				</Grid>
+			</Grid>
+		</ThemeProvider>
+	);
+}

packages/react-design-tokens/src/components/Colors.md

@@ -0,0 +1,5 @@
+```jsx harmony
+import theme from '../theme'
+
+;<Colors theme={theme} />
+```

packages/react-design-tokens/src/components/PaletteSwatch.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Swatches, ColorSwatch } from "../index";
+import { tokenPropType, valuePropType } from "../propTypes";
+
+export const PaletteSwatch = ({ token, value }) => (
+	<Swatches items={value}>
+		{(key, value) => (
+			<ColorSwatch
+				value={value}
+				token={`${token}.${key}`}
+				key={`${token}.${key}`}
+			/>
+		)}
+	</Swatches>
+);
+
+PaletteSwatch.propTypes = {
+	...tokenPropType,
+	...valuePropType
+};
+
+/** @component */
+export default PaletteSwatch;

packages/react-design-tokens/src/components/PaletteSwatch.md

@@ -0,0 +1,26 @@
+Palette swatch renders all color tokens from a palette as defined in [System UI theme specification](https://system-ui.com/theme/)
+
+It supports arrays
+
+```jsx harmony
+const palette = [
+  '#FFCDD2',
+  '#EF9A9A',
+  '#E57373',
+  '#EF5350',
+  '#F44336',
+  '#E53935',
+  '#D32F2F',
+  '#C62828',
+  '#B71C1C'
+]
+;<PaletteSwatch token={'red'} value={palette} />
+```
+
+as well as object notation:
+
+```jsx harmony
+import theme from '../theme'
+
+;<PaletteSwatch token={'slate'} value={theme.colors.slate} />
+```

packages/react-design-tokens/src/components/Spacing.jsx

@@ -0,0 +1,26 @@
+/* @jsx jsx */
+import React from "react";
+import { Grid, jsx, ThemeProvider } from "theme-ui";
+import { SpacingSwatch, Swatch, Swatches, SwatchToken } from "../index";
+
+export default function Spacing({ theme }) {
+	return (
+		<ThemeProvider theme={theme}>
+			<Grid gap={4}>
+				<Swatches items={theme.space}>
+					{(token, value) => (
+						<Swatch token={token} value={value} key={token}>
+							<Grid
+								gap={3}
+								sx={{ alignItems: "center", gridTemplateColumns: "auto 1fr" }}
+							>
+								<SwatchToken>{token}</SwatchToken>
+								<SpacingSwatch value={value} />
+							</Grid>
+						</Swatch>
+					)}
+				</Swatches>
+			</Grid>
+		</ThemeProvider>
+	);
+}

packages/react-design-tokens/src/components/Spacing.md

@@ -0,0 +1,7 @@
+Spacing renders all `space` tokens from the theme in a convenient way.
+
+```jsx harmony
+import theme from '../theme'
+
+;<Spacing theme={theme} />
+```

packages/react-design-tokens/src/components/SpacingSwatch.jsx

@@ -0,0 +1,31 @@
+/* @jsx jsx */
+import React from "react";
+import { jsx } from "theme-ui";
+import { SwatchValue } from "../";
+import { valuePropType } from "../propTypes";
+
+const SpacingSwatch = ({ value, css: componentCSS, ...rest }) => {
+	return (
+		<div
+			sx={{
+				py: 2,
+				color: "secondary",
+				bg: "muted",
+				width: value,
+				...componentCSS
+			}}
+			{...rest}
+		>
+			<SwatchValue color="inherit" sx={{ mx: 2 }}>
+				{value}
+			</SwatchValue>
+		</div>
+	);
+};
+
+SpacingSwatch.propTypes = {
+	...valuePropType
+};
+
+/** @component */
+export default SpacingSwatch;

packages/react-design-tokens/src/components/SpacingSwatch.md

@@ -0,0 +1,17 @@
+Spacing swatch renders a bar with a width of the provided `value` and its content as a text
+
+```jsx harmony
+<SpacingSwatch value={'1rem'} />
+```
+
+You can override default styles using `css` prop:
+
+```jsx harmony
+<SpacingSwatch
+  value={'100px'}
+  css={{
+    color: 'white',
+    background: 'cornflowerblue'
+  }}
+/>
+```

packages/react-design-tokens/src/components/Swatch.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import copy from "clipboard-copy";
+import { tokenPropType, valuePropType } from "../propTypes";
+
+function Swatch(props) {
+	return (
+		<div
+			aria-roledescription="Copy to clipboard"
+			onClick={() => copy(props.token)}
+			css={{
+				cursor: "pointer"
+			}}
+			{...props}
+		/>
+	);
+}
+
+Swatch.propTypes = {
+	...tokenPropType,
+	...valuePropType
+};
+
+export default Swatch;

packages/react-design-tokens/src/components/SwatchToken.jsx

@@ -0,0 +1,21 @@
+/* @jsx jsx */
+import { jsx } from "theme-ui";
+import React from "react";
+
+function SwatchToken({ color = "text", css: componentCSS, ...rest }) {
+	return (
+		<h3
+			sx={{
+				m: 0,
+				fontFamily: "body",
+				fontSize: "sm",
+				fontWeight: "normal",
+				color,
+				...componentCSS
+			}}
+			{...rest}
+		/>
+	);
+}
+
+export default SwatchToken;

packages/react-design-tokens/src/components/SwatchToken.md

@@ -0,0 +1,26 @@
+A primitive to render the token name.
+
+```jsx harmony
+<SwatchToken>Token name</SwatchToken>
+```
+
+Color can be customized using `color` prop:
+
+```jsx harmony
+<SwatchToken color="primary">Primary token</SwatchToken>
+```
+
+For more customization use `css` and `style` props
+
+```jsx harmony
+<SwatchToken
+  css={{
+    fontSize: '24px'
+  }}
+  style={{
+    color: 'blue'
+  }}
+>
+  Custom style
+</SwatchToken>
+```