Merge pull request #37 from component-driven/move-react-design-tokens

Move react-design-tokens package

Author: okonet

.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 renamed to 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;