WIP: Feature/theme builder

docs/src/components/AppContext.js

@@ -5,6 +5,12 @@ const initialState = {
   activeComponent: 'Button',
   modalOpen: false,
   ...defaultTheme,
+  Alert: {
+    customProps: {
+      title: 'Title',
+      children: 'Alert Message',
+    },
+  },
   Button: {
     customProps: {
       children: 'Button',

docs/src/components/Inspector.js

@@ -70,7 +70,7 @@ const DropdownArrow = ({ active }) => (
       transition: '180ms all ease',
     }}
   >
-    <ChevronDown />
+    <ChevronDown color="#fff" />
   </Box>
 );
 

docs/src/components/ThemeBuilder.js

@@ -4,6 +4,7 @@ import {
   GlobalStyles,
   Box,
   Flex,
+  Alert,
   Button,
   Input,
   Checkbox,
@@ -85,6 +86,14 @@ export const ThemeConfig = {
 };
 
 export const Components = {
+  Alert: props => (
+    <Stack>
+      <Alert status="error" {...props} />
+      <Alert status="success" {...props} />
+      <Alert status="warning" {...props} />
+      <Alert status="info" {...props} />
+    </Stack>
+  ),
   Button,
   Input,
   Checkbox,

lerna.json

@@ -1,7 +1,8 @@
 {
   "packages": [
     ".",
-    "docs"
+    "docs",
+    "theme-builder"
   ],
   "version": "independent",
   "npmClient": "yarn"

package.json

@@ -25,7 +25,7 @@
     "semantic-release": "semantic-release"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">= 16.8"
   },
   "husky": {
     "hooks": {

src/Button/index.tsx

@@ -92,7 +92,6 @@ export const Button = forwardRef(function Button(
       cursor="pointer"
       _hover={{
         backgroundColor: '#f9fafb',
-        cursor: 'pointer',
       }}
       _focus={{
         borderColor: '#a4cafe',

theme-builder/.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

theme-builder/README.md

@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

theme-builder/components/AppContext.js

@@ -0,0 +1,81 @@
+import React, { useState, useContext } from 'react';
+import { defaultTheme } from 'minerva-ui';
+
+const initialState = {
+  activeComponent: 'Button',
+  modalOpen: false,
+  ...defaultTheme,
+  Alert: {
+    customProps: {
+      title: 'Title',
+      children: 'Alert Message',
+    },
+  },
+  Button: {
+    customProps: {
+      children: 'Button',
+      isLoading: false,
+    },
+    backgroundColor: '#fff',
+    borderWidth: '1px',
+    color: '#374151',
+    fontWeight: '500',
+    display: 'inline-flex',
+    WebkitAppearance: 'none',
+    WebkitBoxAlign: 'center',
+    alignItems: 'center',
+    WebkitBoxPack: 'center',
+    justifyContent: 'center',
+    userSelect: 'none',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    verticalAlign: 'middle',
+    fontSize: '14px',
+    lineHeight: '20px',
+    paddingTop: '8px',
+    paddingBottom: '8px',
+    paddingLeft: '16px',
+    paddingRight: '16px',
+    borderRadius: '5px',
+  },
+  Input: {
+    customProps: {},
+  },
+  Checkbox: { customProps: { children: 'Checkbox' } },
+  Link: { customProps: { children: 'Link' } },
+  Select: { customProps: {} },
+  Table: { customProps: {} },
+  Text: { customProps: { children: 'Text' } },
+};
+
+const AppContext = React.createContext({
+  ...initialState,
+});
+
+const useMergeState = initialMergeState => {
+  const [state, setState] = useState(initialMergeState);
+
+  function mergeState(changes) {
+    setState({ ...state, ...changes });
+  }
+
+  return [state, mergeState];
+};
+
+const AppProvider = ({ children }) => {
+  const [state, setState] = useMergeState(initialState);
+
+  // const memoState = useMemo(() => ({ state }), [state]);
+
+  return (
+    <AppContext.Provider value={{ state: state, setContext: setState }}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+// const AppConsumer = AppContext.Consumer;
+const useAppContext = () => useContext(AppContext);
+
+export { AppProvider, useAppContext };
+// export default AppContext;

theme-builder/components/CodeSnippet.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function CodeSnippet(props) {
+  return (
+    <code
+      className="language-json"
+      style={{ whiteSpace: 'pre-wrap' }}
+      {...props}
+    />
+  );
+}

theme-builder/components/ColorTag.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Block } from 'minerva-ui';
+
+const ColorTag = ({ number, code, ...props }) => (
+  <Block
+    borderRadius="9999px"
+    height="48px"
+    width="48px"
+    boxShadow="0 10px 15px -3px rgba(195,218,254,0.3), 0 4px 6px -2px rgba(195,218,254,0.15)"
+    // color={number > 500 ? '#fff' : '#000'}
+    backgroundColor={code}
+    {...props}
+  />
+);
+
+export default ColorTag;

theme-builder/components/Editor.js

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { Box, styled } from 'minerva-ui';
+import { useAppContext } from './AppContext';
+import { Components, ThemeConfig } from './ThemeBuilder';
+
+const Container = styled(Box)`
+  flex: 1;
+  padding: 40px;
+  /* background-image: linear-gradient(to right, #d9e2e9 1px, transparent 1px),
+    linear-gradient(to bottom, #d9e2e9 1px, transparent 1px);
+  background-size: 20px 20px; */
+  overflow: auto;
+`;
+
+function Editor() {
+  const { state } = useAppContext();
+
+  const activeComponent = state?.activeComponent;
+
+  const AllViews = { ...Components, ...ThemeConfig };
+
+  const Component = activeComponent ? AllViews[activeComponent] : null;
+
+  const { customProps, ...props } = state[activeComponent];
+
+  return (
+    <Container>
+      <Component {...customProps} {...props} />
+    </Container>
+  );
+}
+
+export default memo(Editor);