Move Admin UI Style Guide (#1339)

* Move Admin UI style guide

* Add npm script

* Add changesets

* Fix bolt things

.changeset/silver-points-cross/changes.json

@@ -0,0 +1 @@
+{ "releases": [{ "name": "@keystone-alpha/app-admin-ui", "type": "patch" }], "dependents": [] }

.changeset/silver-points-cross/changes.md

@@ -0,0 +1 @@
+Replace custom copy to clipboard utility with the clipboard-copy package

.changeset/smooth-brooms-teach/changes.json

@@ -0,0 +1 @@
+{ "releases": [{ "name": "@keystone-alpha/app-admin-ui", "type": "patch" }], "dependents": [] }

.changeset/smooth-brooms-teach/changes.md

@@ -0,0 +1 @@
+Remove Admin UI style guide. The style guide is now in the keystone-5 repo at packages/arch/docs

.changeset/tricky-geese-tell/changes.json

@@ -0,0 +1,11 @@
+{
+  "releases": [{ "name": "@arch-ui/navbar", "type": "minor" }],
+  "dependents": [
+    {
+      "name": "@keystone-alpha/app-admin-ui",
+      "type": "patch",
+      "dependencies": ["@arch-ui/navbar"]
+    },
+    { "name": "@arch-ui/docs", "type": "patch", "dependencies": ["@arch-ui/navbar"] }
+  ]
+}

.changeset/tricky-geese-tell/changes.md

@@ -0,0 +1 @@
+Allow changing the underlying element type of the ItemElement component with the `as`

package.json

@@ -9,6 +9,7 @@
     "dev": "yarn demo todo dev",
     "demo": "yarn --cwd ./demo-projects",
     "website": "yarn --cwd ./website",
+    "arch-docs": "yarn --cwd ./packages/arch/docs",
     "coverage": "cross-env DISABLE_LOGGING=true NODE_ENV=test jest --maxWorkers=1 --coverage",
     "cypress:run": "status=0; bolt w @keystone-alpha/cypress-project-basic run cypress:run || status=$?; bolt w @keystone-alpha/cypress-project-login run cypress:run || status=$?; bolt w @keystone-alpha/cypress-project-twitter-login run cypress:run || status=$?; bolt w @keystone-alpha/cypress-project-access-control run cypress:run || status=$?; bolt w @keystone-alpha/cypress-project-client-validation run cypress:run || status=$?; exit $status",
     "format:file": "prettier --write",
@@ -83,6 +84,7 @@
     "chalk": "^2.4.2",
     "chrono-node": "^1.3.5",
     "ci-info": "^2.0.0",
+    "clipboard-copy": "^3.0.0",
     "cloudinary": "^1.13.2",
     "codecov": "^3.1.0",
     "compression": "^1.7.4",
@@ -286,6 +288,7 @@
     "workspaces": [
       "packages/*",
       "!packages/arch",
+      "packages/arch/docs",
       "packages/arch/packages/*",
       "demo-projects/*",
       "test-projects/*",

packages/app-admin-ui/client/components/ListTable.js

@@ -14,7 +14,7 @@ import Dropdown from '@arch-ui/dropdown';
 import { A11yText } from '@arch-ui/typography';
 import { Card } from '@arch-ui/card';
 import DeleteItemModal from './DeleteItemModal';
-import { copyToClipboard } from '../util';
+import copyToClipboard from 'clipboard-copy';
 import { useListSort } from '../pages/List/dataHooks';
 import PageLoading from './PageLoading';
 import { NoResults } from './NoResults';

packages/app-admin-ui/client/components/Nav/NavIcons.js

@@ -4,15 +4,15 @@
 import { Fragment } from 'react';
 import { jsx } from '@emotion/core';
 
-import { TerminalIcon, TelescopeIcon, MarkGithubIcon, SignOutIcon } from '@arch-ui/icons';
+import { TerminalIcon, MarkGithubIcon, SignOutIcon } from '@arch-ui/icons';
 import { PrimaryNavItem, NavGroupIcons } from '@arch-ui/navbar';
 import { A11yText } from '@arch-ui/typography';
 import { useAdminMeta } from '../../providers/AdminMeta';
 
 const GITHUB_PROJECT = 'https://github.com/keystonejs/keystone-5';
 
 export function NavIcons() {
-  let { adminPath, graphiqlPath, signoutPath, authStrategy } = useAdminMeta();
+  let { graphiqlPath, signoutPath, authStrategy } = useAdminMeta();
   return ENABLE_DEV_FEATURES || authStrategy ? (
     <NavGroupIcons>
       {authStrategy ? (
@@ -31,10 +31,6 @@ export function NavIcons() {
             <TerminalIcon />
             <A11yText>Graphiql Console</A11yText>
           </PrimaryNavItem>
-          <PrimaryNavItem to={`${adminPath}/style-guide`} title="Style Guide">
-            <TelescopeIcon />
-            <A11yText>Style Guide</A11yText>
-          </PrimaryNavItem>
         </Fragment>
       ) : null}
     </NavGroupIcons>

packages/app-admin-ui/client/index.js

@@ -21,7 +21,6 @@ import ListPage from './pages/List';
 import ListNotFoundPage from './pages/ListNotFound';
 import ItemPage from './pages/Item';
 import InvalidRoutePage from './pages/InvalidRoute';
-import StyleGuidePage from './pages/StyleGuide';
 import SignoutPage from './pages/Signout';
 
 const findCustomPages = (pages, allPages = []) => {
@@ -55,10 +54,6 @@ const Keystone = () => {
                       <Nav>
                         <Suspense fallback={<PageLoading />}>
                           <Switch>
-                            <Route
-                              path={`${adminPath}/style-guide/:page?`}
-                              render={() => <StyleGuidePage {...adminMeta} />}
-                            />
                             {findCustomPages(pages).map(page => (
                               <Route
                                 exact

packages/app-admin-ui/client/pages/Item/IdCopy.js

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/core';
 import { useCallback, memo, useState, useEffect } from 'react';
 
-import CopyToClipboard from '../../components/CopyToClipboard';
+import copyToClipboard from 'clipboard-copy';
 import Animation from '../../components/Animation';
 import { CheckIcon, ClippyIcon } from '@arch-ui/icons';
 import { FlexGroup } from '@arch-ui/layout';
@@ -51,12 +51,18 @@ export let IdCopy = memo(function IdCopy({ id }) {
       </div>
       <Tooltip content="Copy ID" hideOnMouseDown hideOnKeyDown>
         {ref => (
-          <CopyToClipboard as={Button} ref={ref} text={id} onSuccess={onSuccess} variant="subtle">
+          <Button
+            ref={ref}
+            onClick={() => {
+              copyToClipboard(id).then(onSuccess);
+            }}
+            variant="subtle"
+          >
             <div css={{ width: 16 }}>
               <CopyIcon isCopied={isCopied} />
             </div>
             <A11yText>Copy ID</A11yText>
-          </CopyToClipboard>
+          </Button>
         )}
       </Tooltip>
     </FlexGroup>

packages/app-admin-ui/client/util.js

@@ -58,44 +58,6 @@ export function toastError(toast, error) {
   })();
 }
 
-// ==============================
-// Clipboard
-// ==============================
-
-const defaultSuccessCallback = () => console.log('Copying to clipboard was successful!');
-const defaultErrorCallback = err => console.error('Could not copy text:', err);
-
-function fallbackCopyToClipboard(text, successCb, errorCb) {
-  var textArea = document.createElement('textarea');
-  textArea.value = text;
-  document.body.appendChild(textArea);
-  textArea.focus();
-  textArea.select();
-
-  try {
-    var successful = document.execCommand('copy');
-    var callback = successful ? successCb : errorCb;
-    callback();
-  } catch (err) {
-    errorCb(err);
-  }
-
-  document.body.removeChild(textArea);
-}
-export function copyToClipboard(
-  text,
-  successCb = defaultSuccessCallback,
-  errorCb = defaultErrorCallback
-) {
-  if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
-    navigator.clipboard.writeText(text).then(successCb, errorCb);
-    return;
-  }
-
-  // attempt fallback
-  fallbackCopyToClipboard(text, successCb, errorCb);
-}
-
 // ==============================
 // Validate Fields
 // ==============================

packages/app-admin-ui/package.json

@@ -53,6 +53,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-emotion": "^10.0.9",
     "babel-preset-react-app": "^9.0.0",
+    "clipboard-copy": "^3.0.0",
     "compression": "^1.7.4",
     "cross-fetch": "^2.2.0",
     "express": "^4.16.3",
@@ -85,4 +86,4 @@
     "webpack-dev-middleware": "^3.6.1",
     "webpack-hot-middleware": "^2.24.3"
   }
-}
+}

packages/arch/docs/.eslintrc.js

@@ -0,0 +1,3 @@
+// gatsby doesn't seem to look at eslintrcs in
+// higher directories than the site's directory
+module.exports = require('../../../.eslintrc');

packages/arch/docs/.gitignore

@@ -0,0 +1,2 @@
+public/
+.cache/

packages/arch/docs/babel.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 10,
+          browsers: [
+            'last 2 chrome versions',
+            'last 2 firefox versions',
+            'last 2 safari versions',
+            'last 2 edge versions',
+          ],
+        },
+      },
+    ],
+    '@babel/preset-react',
+    '@babel/preset-flow',
+  ],
+  plugins: [
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/proposal-object-rest-spread',
+    '@babel/plugin-syntax-dynamic-import',
+  ],
+};

packages/arch/docs/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@arch-ui/docs",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@arch-ui/alert": "^0.0.6",
+    "@arch-ui/badge": "^0.0.6",
+    "@arch-ui/button": "^0.0.8",
+    "@arch-ui/controls": "^0.0.8",
+    "@arch-ui/dialog": "^0.0.8",
+    "@arch-ui/dropdown": "^0.0.7",
+    "@arch-ui/fields": "^2.0.0",
+    "@arch-ui/icons": "^0.0.5",
+    "@arch-ui/input": "^0.0.8",
+    "@arch-ui/layout": "^0.2.3",
+    "@arch-ui/loading": "^0.0.7",
+    "@arch-ui/lozenge": "^0.0.6",
+    "@arch-ui/navbar": "^0.0.9",
+    "@arch-ui/pagination": "^0.0.8",
+    "@arch-ui/pill": "^0.1.5",
+    "@arch-ui/popout": "^0.0.7",
+    "@arch-ui/select": "^0.0.7",
+    "@arch-ui/theme": "^0.0.5",
+    "@arch-ui/tooltip": "^0.0.7",
+    "@arch-ui/typography": "^0.0.7",
+    "@emotion/core": "^10.0.10",
+    "@emotion/styled": "^10.0.10",
+    "@reach/router": "^1.2.1",
+    "clipboard-copy": "^3.0.0",
+    "gatsby": "^2.3.24",
+    "react": "^16.8.6"
+  },
+  "scripts": {
+    "start": "gatsby develop"
+  }
+}

packages/app-admin-ui/client/pages/StyleGuide/Icons.js → packages/arch/docs/src/StyleGuide/Icons.js

@@ -3,7 +3,7 @@ import { Component, Fragment } from 'react';
 import { jsx } from '@emotion/core';
 import styled from '@emotion/styled';
 
-import CopyToClipboard from '../../components/CopyToClipboard';
+import copyToClipboard from 'clipboard-copy';
 
 import * as icons from '@arch-ui/icons';
 import { Grid, Cell } from '@arch-ui/layout';
@@ -17,7 +17,10 @@ const Instructions = styled('div')`
   min-height: 24px;
 `;
 
-const IconContainer = styled('div')`
+const IconContainer = styled('button')`
+  display: block;
+  border: 0;
+  width: 100%;
   background-color: white;
   border-radius: 0.2em;
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.075), 0 0 0 1px rgba(0, 0, 0, 0.1);
@@ -90,10 +93,10 @@ export default class IconsGuide extends Component {
             const Icon = isCopied ? icons.CheckIcon : icons[name];
             return (
               <Cell width={2} key={name}>
-                <CopyToClipboard
-                  as={IconContainer}
-                  text={importText}
-                  onSuccess={this.handleCopy(importText)}
+                <IconContainer
+                  onClick={() => {
+                    copyToClipboard(importText).then(this.handleCopy(importText));
+                  }}
                 >
                   <Icon
                     css={{
@@ -103,7 +106,7 @@ export default class IconsGuide extends Component {
                     }}
                   />
                   <IconName className="icon-text">{isCopied ? 'Copied!' : name}</IconName>
-                </CopyToClipboard>
+                </IconContainer>
               </Cell>
             );
           })}