Adding the start of Keystone's New Interfaces (keystonejs#3694)

* Adding spike code (initial commit)

* Fix the last of the type errors

* Revert update to pluralize

* Fix things

* Fix some things

* Fixed the name field in the basic example

* fix a thing

* Clean node_modules cache

* A thing to fix netlify

* Rename a package name to fix netlify

* Actually fix netlify build

Co-authored-by: mitchellhamilton <mitchell@hamil.town>

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
     jest: true,
     'cypress/globals': true,
   },
-  plugins: ['react', 'react-hooks', 'jest', 'cypress', 'import', 'emotion', '@typescript-eslint'],
+  plugins: ['react', 'react-hooks', 'jest', 'cypress', 'import', '@typescript-eslint'],
   settings: {
     react: {
       version: 'detect',
@@ -66,10 +66,6 @@ module.exports = {
     'react/sort-prop-types': 'warn',
     semi: 'error',
     strict: 'off',
-    'emotion/jsx-import': 'error',
-    'emotion/no-vanilla': 'error',
-    'emotion/import-from-emotion': 'error',
-    'emotion/styled-import': 'error',
     'no-restricted-syntax': [
       'error',
       {
@@ -112,5 +108,13 @@ module.exports = {
         'import/no-commonjs': 'error',
       },
     },
+    {
+      files: ['**/*.{ts,tsx}'],
+      rules: {
+        // TypeScript already checks for the following things and they conflict with TypeScript
+        'import/no-unresolved': 'off',
+        'no-undef': 'off',
+      },
+    },
   ],
 };

.github/workflows/tests.yml

@@ -44,9 +44,9 @@ jobs:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-yarn-v1-
 
       - name: Install Dependencies
         run: yarn
@@ -86,9 +86,9 @@ jobs:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-yarn-v1-
 
       - name: Install Dependencies
         run: yarn
@@ -142,9 +142,9 @@ jobs:
           path: |
             ${{ steps.yarn-cache-dir-path.outputs.dir }}
             node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          key: ${{ runner.os }}-yarn-v1-${{ hashFiles('yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
+            ${{ runner.os }}-yarn-v1-
 
       - name: Install Dependencies
         run: yarn

.gitignore

@@ -1,5 +1,8 @@
-packages/test-project/public
-examples/test-project
+# Next.js build dir
+.next
+
+# Keystone build dir
+.keystone
 
 # Logs
 logs

.prettierignore

@@ -11,3 +11,4 @@ packages/arch/www/public/**/*
 .changeset/**/*
 **/dist
 **/.next
+**/.keystone

design-system/packages/button/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@keystone-ui/button",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "main": "dist/button.cjs.js",
+  "module": "dist/button.esm.js",
+  "devDependencies": {
+    "@types/react": "^16.9.49"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.11.2",
+    "@emotion/core": "^10.0.35",
+    "@keystone-ui/core": "*",
+    "@keystone-ui/icons": "*",
+    "@keystone-ui/loading": "*",
+    "react": "^16.13.1"
+  },
+  "engines": {
+    "node": ">=10.0.0"
+  },
+  "repository": "https://github.com/keystonejs/keystone/tree/master/design-system/packages/button"
+}

design-system/packages/button/src/Button.tsx

@@ -0,0 +1,67 @@
+/** @jsx jsx */
+
+import { ReactNode, useContext } from 'react';
+import { jsx } from '@keystone-ui/core';
+import { LoadingDots } from '@keystone-ui/loading';
+
+import { ButtonContext } from './context';
+import type { WeightKey, ToneKey, SizeKey } from './hooks/button';
+
+type ButtonProps = {
+  /** The Button label content. */
+  children: ReactNode;
+  /** The tone of the Button. */
+  tone?: ToneKey;
+  /** The size of the Button. */
+  size?: SizeKey;
+  /** The weight of the Button. */
+  weight?: WeightKey;
+  /** Whether the Button should be disabled */
+  isDisabled?: boolean;
+  /** Whether the Button should be in a loading state */
+  isLoading?: boolean;
+  /** Whether the Button should display as a block */
+  isBlock?: boolean;
+  onPress?: () => void;
+  type?: 'button' | 'submit';
+};
+
+const loadingContainerStyles = {
+  left: '50%',
+  position: 'absolute',
+  transform: 'translateX(-50%)',
+} as const;
+
+export const Button = ({
+  children,
+  isDisabled,
+  isLoading,
+  size,
+  tone,
+  weight,
+  onPress,
+  type = 'button',
+  ...otherProps
+}: ButtonProps) => {
+  const { useButtonStyles, useButtonTokens, defaults } = useContext(ButtonContext);
+  const tokens = useButtonTokens({
+    tone: tone || defaults.tone,
+    size: size || defaults.size,
+    weight: weight || defaults.weight,
+  });
+  const styles = useButtonStyles({
+    isDisabled,
+    tokens,
+  });
+
+  return (
+    <button type={type} css={styles} onClick={onPress} {...otherProps}>
+      <span css={isLoading ? { opacity: 0 } : null}>{children}</span>
+      {isLoading && (
+        <span css={loadingContainerStyles}>
+          <LoadingDots size={size || defaults.size} label="Button loading indicator" />
+        </span>
+      )}
+    </button>
+  );
+};

design-system/packages/button/src/context.tsx

@@ -0,0 +1,59 @@
+import React, { ReactNode, createContext, useContext, useMemo } from 'react';
+
+import {
+  buttonPropDefaults,
+  useButtonStyles,
+  useButtonTokens,
+  SizeKey,
+  ToneKey,
+  WeightKey,
+} from './hooks/button';
+
+export const ButtonContext = createContext<{
+  defaults: {
+    size: SizeKey;
+    tone: ToneKey;
+    weight: WeightKey;
+  };
+  useButtonStyles: typeof useButtonStyles;
+  useButtonTokens: typeof useButtonTokens;
+}>({
+  defaults: buttonPropDefaults,
+  useButtonStyles,
+  useButtonTokens,
+});
+
+// Note hooks are optional for the provider value, but not in the context created above; this is
+// because they will be merged with the existing context and always exist in the value
+type ProviderHooksProp = {
+  useButtonStyles?: typeof useButtonStyles;
+  useButtonTokens?: typeof useButtonTokens;
+};
+type ProviderDefaultsProp = {
+  size?: SizeKey;
+  tone?: ToneKey;
+  weight?: WeightKey;
+};
+export const ButtonProvider = ({
+  defaults,
+  hooks,
+  children,
+}: {
+  defaults?: ProviderDefaultsProp;
+  hooks?: ProviderHooksProp;
+  children: ReactNode;
+}) => {
+  const parentContext = useContext(ButtonContext);
+  const newContext = useMemo(
+    () => ({
+      ...parentContext,
+      ...hooks,
+      defaults: {
+        ...parentContext.defaults,
+        ...defaults,
+      },
+    }),
+    [parentContext, hooks, defaults]
+  );
+  return <ButtonContext.Provider value={newContext}>{children}</ButtonContext.Provider>;
+};