chore: move website to root

.eslintrc

@@ -12,6 +12,7 @@
   ],
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/camelcase": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/no-use-before-define": "off",

tsconfig.json

@@ -6,7 +6,7 @@
     "types": ["jest"],
     "typeRoots": ["./node_modules/@types", "./packages/**/*/@types"]
   },
-  "include": ["packages/**/*", "next-env.d.ts"],
+  "include": ["packages/**/*", "next-env.d.ts", "docs"],
   "exclude": [
     "node_modules",
     "build",

packages/docs/components/CodeBlock.js → website/components/CodeBlock.js

@@ -1,17 +1,17 @@
-import React, { useState } from "react";
-import lightTheme from "prism-react-renderer/themes/nightOwlLight";
-import darkTheme from "prism-react-renderer/themes/nightOwl";
-import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
+import React, { useState } from "react"
+import lightTheme from "prism-react-renderer/themes/nightOwlLight"
+import darkTheme from "prism-react-renderer/themes/nightOwl"
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"
 // import Highlight, { defaultProps } from "prism-react-renderer";
-import { mdx } from "@mdx-js/react";
-import * as Chakra from "@chakra-ui/core";
-import * as Formik from "formik";
-import * as ReactIcons from "react-icons/md";
-import FocusLock from "react-focus-lock";
-import ChakraPortal from "./Portal";
-import Lorem from "react-lorem-component";
+import { mdx } from "@mdx-js/react"
+import * as Chakra from "@chakra-ui/core"
+import * as Formik from "formik"
+import * as ReactIcons from "react-icons/md"
+import FocusLock from "react-focus-lock"
+import ChakraPortal from "./Portal"
+import Lorem from "react-lorem-component"
 
-const { Box, Button, useClipboard, useColorMode } = Chakra;
+const { Box, Button, useClipboard, useColorMode } = Chakra
 
 export const liveEditorStyle = {
   fontSize: 14,
@@ -20,7 +20,7 @@ export const liveEditorStyle = {
   overflowX: "auto",
   fontFamily: "Menlo,monospace",
   borderRadius: 10,
-};
+}
 
 // const highlightStyle = {
 //   padding: 20,
@@ -37,7 +37,7 @@ export const liveErrorStyle = {
   overflowX: "auto",
   color: "white",
   backgroundColor: "red",
-};
+}
 
 const LiveCodePreview = props => (
   <Box
@@ -50,7 +50,7 @@ const LiveCodePreview = props => (
     borderRadius="md"
     {...props}
   />
-);
+)
 
 const CopyButton = props => (
   <Button
@@ -65,11 +65,11 @@ const CopyButton = props => (
     right="1.25em"
     {...props}
   />
-);
+)
 
 const EditableNotice = props => {
-  const { colorMode } = useColorMode();
-  const bg = { light: "#fbfbfb", dark: "#011627" };
+  const { colorMode } = useColorMode()
+  const bg = { light: "#fbfbfb", dark: "#011627" }
 
   return (
     <Box
@@ -91,8 +91,8 @@ const EditableNotice = props => {
     >
       Editable Example
     </Box>
-  );
-};
+  )
+}
 
 const StarIcon = props => {
   return (
@@ -106,8 +106,8 @@ const StarIcon = props => {
     >
       <path d="M23.555 8.729a1.505 1.505 0 0 0-1.406-.98h-6.087a.5.5 0 0 1-.472-.334l-2.185-6.193a1.5 1.5 0 0 0-2.81 0l-.005.016-2.18 6.177a.5.5 0 0 1-.471.334H1.85A1.5 1.5 0 0 0 .887 10.4l5.184 4.3a.5.5 0 0 1 .155.543l-2.178 6.531a1.5 1.5 0 0 0 2.31 1.684l5.346-3.92a.5.5 0 0 1 .591 0l5.344 3.919a1.5 1.5 0 0 0 2.312-1.683l-2.178-6.535a.5.5 0 0 1 .155-.543l5.194-4.306a1.5 1.5 0 0 0 .433-1.661z"></path>
     </Box>
-  );
-};
+  )
+}
 
 const CodeBlock = ({
   className,
@@ -117,14 +117,14 @@ const CodeBlock = ({
   children,
   ...props
 }) => {
-  const [editorCode, setEditorCode] = useState(children.trim());
+  const [editorCode, setEditorCode] = useState(children.trim())
 
-  const language = className && className.replace(/language-/, "");
-  const { onCopy, hasCopied } = useClipboard(editorCode);
+  const language = className && className.replace(/language-/, "")
+  const { onCopy, hasCopied } = useClipboard(editorCode)
 
-  const { colorMode } = useColorMode();
-  const themes = { light: lightTheme, dark: darkTheme };
-  const theme = themes["dark"];
+  const { colorMode } = useColorMode()
+  const themes = { light: lightTheme, dark: darkTheme }
+  const theme = themes["dark"]
 
   const liveProviderProps = {
     theme,
@@ -143,9 +143,9 @@ const CodeBlock = ({
     },
     noInline: isManual,
     ...props,
-  };
+  }
 
-  const handleCodeChange = newCode => setEditorCode(newCode.trim());
+  const handleCodeChange = newCode => setEditorCode(newCode.trim())
 
   if (language === "jsx" && live === true) {
     return (
@@ -164,7 +164,7 @@ const CodeBlock = ({
         </Box>
         <LiveError style={liveErrorStyle} />
       </LiveProvider>
-    );
+    )
   }
 
   if (render) {
@@ -174,14 +174,14 @@ const CodeBlock = ({
           <LiveCodePreview />
         </LiveProvider>
       </div>
-    );
+    )
   }
 
   return (
     <LiveProvider disabled {...liveProviderProps}>
       <LiveEditor padding={20} style={liveEditorStyle} />
     </LiveProvider>
-  );
+  )
 
   // return (
   //   <Highlight
@@ -203,10 +203,10 @@ const CodeBlock = ({
   //     )}
   //   </Highlight>
   // );
-};
+}
 
 CodeBlock.defaultProps = {
   mountStylesheet: false,
-};
+}
 
-export default CodeBlock;
+export default CodeBlock

packages/docs/components/ColorPalette.js → website/components/ColorPalette.js

@@ -1,18 +1,18 @@
 /** @jsx jsx */
-import { jsx } from "@emotion/core";
-import { Box, Flex, Grid, useTheme } from "@chakra-ui/core";
+import { jsx } from "@emotion/core"
+import { Box, Flex, Grid, useTheme } from "@chakra-ui/core"
 
 export const ColorPalette = ({ color, name, ...props }) => {
-  const theme = useTheme();
-  let colorCode = color;
-  const [shade, hue] = color.split(".");
+  const theme = useTheme()
+  let colorCode = color
+  const [shade, hue] = color.split(".")
 
   if (shade && hue) {
-    colorCode = theme.colors[shade][hue];
+    colorCode = theme.colors[shade][hue]
   }
 
   if (color in theme.colors && typeof theme.colors[color] === "string") {
-    colorCode = theme.colors[color];
+    colorCode = theme.colors[color]
   }
 
   return (
@@ -25,16 +25,16 @@ export const ColorPalette = ({ color, name, ...props }) => {
         <Box textTransform="uppercase">{colorCode}</Box>
       </Box>
     </Flex>
-  );
-};
+  )
+}
 
 export const ColorPalettes = ({ color }) => {
-  const theme = useTheme();
-  const keys = Object.keys(theme.colors[color]);
+  const theme = useTheme()
+  const keys = Object.keys(theme.colors[color])
   return keys.map(item => (
     <ColorPalette color={`${color}.${item}`} name={`${color} ${item}`} />
-  ));
-};
+  ))
+}
 
 export const ColorWrapper = props => (
   <Grid
@@ -43,4 +43,4 @@ export const ColorWrapper = props => (
     templateColumns="repeat( auto-fit, minmax(200px, 1fr) )"
     {...props}
   />
-);
+)

packages/docs/components/DocsHeader.js → website/components/DocsHeader.js

@@ -8,11 +8,11 @@ import {
   InputLeftElement,
   IconButton,
   useColorMode,
-} from "@chakra-ui/core";
-import { jsx } from "@emotion/core";
-import { DiGithubBadge } from "react-icons/di";
-import Logo from "./Logo";
-import MobileNav from "./MobileNav";
+} from "@chakra-ui/core"
+import { jsx } from "@emotion/core"
+import { DiGithubBadge } from "react-icons/di"
+import Logo from "./Logo"
+import MobileNav from "./MobileNav"
 
 const SearchBox = props => (
   <InputGroup {...props}>
@@ -27,11 +27,11 @@ const SearchBox = props => (
       borderRadius="lg"
     />
   </InputGroup>
-);
+)
 
 const DocsHeader = props => {
-  const { colorMode, toggleColorMode } = useColorMode();
-  const bg = { light: "white", dark: "gray.800" };
+  const { colorMode, toggleColorMode } = useColorMode()
+  const bg = { light: "white", dark: "gray.800" }
   return (
     <Box
       pos="fixed"
@@ -94,7 +94,7 @@ const DocsHeader = props => {
         </Flex>
       </Flex>
     </Box>
-  );
-};
+  )
+}
 
-export default DocsHeader;
+export default DocsHeader

packages/docs/components/Header.js → website/components/Header.js

@@ -6,11 +6,11 @@ import {
   useColorMode,
   Link,
   Stack,
-} from "@chakra-ui/core";
-import { jsx } from "@emotion/core";
-import { DiGithubBadge } from "react-icons/di";
-import Logo from "./Logo";
-import { Container } from "../pages";
+} from "@chakra-ui/core"
+import { jsx } from "@emotion/core"
+import { DiGithubBadge } from "react-icons/di"
+import Logo from "./Logo"
+import { Container } from "../pages"
 
 const StorybookIcon = props => (
   <svg
@@ -37,11 +37,11 @@ const StorybookIcon = props => (
       mask="url(#IconifyId-16cf64ad71c-1b4c9-9)"
     />
   </svg>
-);
+)
 
 const Header = props => {
-  const { colorMode, toggleColorMode } = useColorMode();
-  const bg = { light: "white", dark: "gray.800" };
+  const { colorMode, toggleColorMode } = useColorMode()
+  const bg = { light: "white", dark: "gray.800" }
   return (
     <Box
       pos="fixed"
@@ -93,7 +93,7 @@ const Header = props => {
         </Flex>
       </Container>
     </Box>
-  );
-};
+  )
+}
 
-export default Header;
+export default Header

packages/docs/components/Logo.js → website/components/Logo.js

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import { useColorMode, Box } from "@chakra-ui/core";
-import { jsx } from "@emotion/core";
+import { useColorMode, Box } from "@chakra-ui/core"
+import { jsx } from "@emotion/core"
 
 const Logo = props => {
-  const { colorMode } = useColorMode();
+  const { colorMode } = useColorMode()
 
   return (
     <Box
@@ -37,7 +37,7 @@ const Logo = props => {
         </linearGradient>
       </defs>
     </Box>
-  );
-};
+  )
+}
 
-export default Logo;
+export default Logo