Add Menu - Product, Framework, Resources

.eslintrc.js

@@ -1,49 +1,27 @@
 module.exports = {
-    parser: "@typescript-eslint/parser",
-    extends: ["plugin:prettier/recommended"],
-    parserOptions: {
-        ecmaVersion: 2018,
-        sourceType: "module",
-        ecmaFeatures: {
-            jsx: true,
-        },
+  parser: "@typescript-eslint/parser",
+  extends: ["plugin:prettier/recommended"],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
     },
-    plugins: [
-        "prettier",
-        "react",
-        "@typescript-eslint",
-        "react-hooks",
-        "import-helpers",
-    ],
-    rules: {
-        "react-hooks/rules-of-hooks": "error",
-        "import-helpers/order-imports": [
-            "error", {
-                // example configuration
-                newlinesBetween: "always",
-                groups: [
-                    ["module", "/^lodash-es/"],
-                    [
-                        "/^components/",
-                        "/^pages/",
-                        "/^public/",
-                        "/^utils/",
-                        "/^layouts/",
-                        "/^common/",
-                        "/^sections/",
-                    ],
-                    ["parent", "sibling", "index"],
-                ],
-                alphabetize: {
-                    order: "asc",
-                    ignoreCase: true
-                },
-            },
-        ],
+  },
+  plugins: [
+    "prettier",
+    "react",
+    "@typescript-eslint",
+    "react-hooks",
+    "import-helpers",
+  ],
+  rules: {
+    "react-hooks/rules-of-hooks": "error",
+    "import-helpers/order-imports": "off",
+  },
+  settings: {
+    react: {
+      version: "detect",
     },
-    settings: {
-        react: {
-            version: "detect",
-        },
-    },
-};
+  },
+};

.gitignore

@@ -198,3 +198,4 @@ $RECYCLE.BIN/
 *.lnk
 
 # End of https://www.toptal.com/developers/gitignore/api/node,react,macos,windows,visualstudiocode
+.vercel

CONTRIBUTING.md

@@ -32,19 +32,21 @@ Join slack via link on README, contact maintaners for rapid contribution. otherw
   - 320 (iPhone SE)
 
 ### Interactive checkist
+
 - css `cursor: pointer` for clickable elements
 - hover state (color or scale or underline) for dynamic link elements
 
 ### Component checklist
+
 - component on storyboard
 - primative component as state indepandent (primative component shall not contain state for itself)
 - mdx component compatibility (general components should have in-mdx-usage capabilities)
 
 ### Code quality checklist
+
 - no style related constant in jsx (constant such like color and px shall not be inlined in jsx)
 - comment design links to visual component files or provide README
 
-
 ## Techniques
 
 **Animations / Motioons**
@@ -58,28 +60,30 @@ Join slack via link on README, contact maintaners for rapid contribution. otherw
 
 **Reponsive Layout Development**
 
-- [Rebass](https://rebassjs.org/)
+- [theme-ui](https://theme-ui.com/)
 
 **General UI Development**
 
 - [Reflect React](https://reflect-ui.com)
 - [Emotion/styled](https://emotion.sh/docs/styled)
 
-
 ## React coding conventions
+
 **for root components**
+
 - use function as component
 - don't use const as component
 - don't use React.FC as component
 - don't export function as default on end of file explicitly.
-``` tsx
+
+```tsx
 export default function GeneralComponent(props: {
-  title: string
-  desc: string
-}){
+  title: string;
+  desc: string;
+}) {
   <div>
     <h1>{props.title}</h1>
     <p>{props.desc}</p>
-  </div>
+  </div>;
 }
-```
+```

docs-site/package.json

@@ -8,6 +8,7 @@
     "postinstall": "yarn content:setup",
     "docusaurus": "docusaurus",
     "start": "docusaurus start --port 3001",
+    "dev": "content:watch & yarn start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",

docs-site/sidebar.with-react.js

@@ -0,0 +1,19 @@
+module.exports = [
+  {
+    type: "category",
+    label: "React",
+    collapsed: true,
+    items: [
+      {
+        type: "doc",
+        id: "with-react/index",
+        label: "React",
+      },
+      {
+        type: "doc",
+        id: "with-nextjs/index",
+        label: "NextJS",
+      },
+    ],
+  },
+];

docs-site/sidebars.js

@@ -1,3 +1,5 @@
+const with_react = require("./sidebar.with-react");
+
 const _flags_items = [
   {
     type: "category",
@@ -239,6 +241,7 @@ const sidebars = {
   flagsSidebar: flags,
   togetherSidebar: together,
   apiSidebar: api,
+  withReactSidebar: with_react,
 };
 
 module.exports = sidebars;

docs/with-css/index.md

@@ -0,0 +1 @@
+# Quickstart: CSS

docs/with-html/index.md

@@ -0,0 +1 @@
+# Quickstart: Html (Vanilla)

docs/with-lit/index.md

@@ -0,0 +1,3 @@
+# Quickstart: Lit
+
+> Lit is a simple library for building fast, lightweight web components.

docs/with-mui/index.md

@@ -0,0 +1 @@
+# Quickstart: Material UI for React (`@mui/material`)

docs/with-nextjs/index.md

@@ -0,0 +1 @@
+# Quick start: Next js

docs/with-react/index.mdx

@@ -1 +1,6 @@
+---
+title: "Quickstart: React"
+sidebar_position: 1
+---
 
+# Quickstart: React

docs/with-scss/index.md

@@ -0,0 +1 @@
+# Quickstart: SCSS (Sass)

docs/with-solid-js/index.md

@@ -0,0 +1,6 @@
+---
+title: "Quickstart: SolidJS"
+sidebar_position: 1
+---
+
+# Quickstart: SolidJS

docs/with-tailwindcss/index.md

@@ -0,0 +1 @@
+# Quickstart: Tailwind css

docs/with-webcomponents/index.md

@@ -0,0 +1,6 @@
+---
+title: "Quickstart: Webcomponents"
+sidebar_position: 1
+---
+
+# Quickstart: Webcomponents

web/.storybook/preview.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { defaultTheme } from "utils/styled";
+import theme from "theme";
 import { ThemeProvider } from "emotion-theming";
 
 export const decorators = [
-  Story => <ThemeProvider theme={defaultTheme}>{Story()}</ThemeProvider>,
+  Story => <ThemeProvider theme={theme}>{Story()}</ThemeProvider>,
 ];
 
 export const parameters = {

web/babel.config.js

@@ -1,19 +1,21 @@
 module.exports = {
-    presets: ["next/babel", "@emotion/babel-preset-css-prop"],
-    plugins: [
-        ["emotion"],
-        [
-            "module-resolver", {
-                root: ["."],
-                alias: {
-                    components: "./components",
-                    utils: "./utils",
-                    layouts: "./layouts",
-                    pages: "./pages",
-                    common: "./common",
-                    public: "./public",
-                },
-            },
-        ],
+  presets: ["next/babel", "@emotion/babel-preset-css-prop"],
+  plugins: [
+    ["@emotion"],
+    [
+      "module-resolver",
+      {
+        root: ["."],
+        alias: {
+          components: "./components",
+          utils: "./utils",
+          layouts: "./layouts",
+          pages: "./pages",
+          common: "./common",
+          public: "./theme",
+          public: "./public",
+        },
+      },
     ],
-};
+  ],
+};

web/components/action-item/index.tsx

@@ -5,7 +5,6 @@ import React from "react";
 
 import Icon from "components/icon";
 import { media } from "utils/styled/media";
-import { ThemeInterface } from "utils/styled/theme";
 
 const Colors = {
   light: {
@@ -67,7 +66,7 @@ const Text = styled(motion.span)<{ color: string }>`
   display: flex;
   align-items: center;
 
-  ${props => media("0px", (props.theme as ThemeInterface).breakpoints[0])} {
+  ${props => media("0px", props.theme.breakpoints[0])} {
     font-size: 17px;
   }
 `;

web/components/blank-area/index.tsx

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 import React from "react";
 
 import { media } from "utils/styled/media";
-import { ThemeInterface } from "utils/styled/theme";
 
 interface BlankAreaProps {
   height: number[];
@@ -18,7 +17,7 @@ const Div = styled.div<BlankAreaProps>`
   background-color: rgba(0, 0, 0, 0);
   height: ${p => p.height[1]}px;
 
-  ${props => media("0px", (props.theme as ThemeInterface).breakpoints[0])} {
+  ${props => media("0px", props.theme.breakpoints[0])} {
     height: ${p => p.height[0]}px;
   }
 `;

web/components/cookie-accept/index.tsx

@@ -1,13 +1,11 @@
 import styled from "@emotion/styled";
+import React from "react";
 import Link from "next/link";
-import React, { useEffect } from "react";
-import { Flex, Heading } from "rebass";
-
-import BlankArea from "components/blank-area";
+import { Flex, Heading } from "theme-ui";
 import SectionLayout from "layouts/section";
 import { useWindowWidth } from "utils/hooks/use-window-width";
 import { LandingpageUrls } from "utils/landingpage/constants";
-import { defaultTheme } from "utils/styled";
+import { breakpoints } from "theme/shared";
 
 function replaceStylePxToNumber(stylePx: string) {
   return parseInt(stylePx.replace("px", ""));
@@ -23,9 +21,15 @@ const CookieAccept: React.FC<CookieAcceptProps> = ({ accpetCookie }) => {
   return (
     <Positioner>
       <SectionLayout variant="content-default" alignContent="center">
-        <Flex width="100%" justifyContent="space-between" alignItems="center">
-          <Flex flexDirection="column">
-            {width < replaceStylePxToNumber(defaultTheme.breakpoints[0]) ? (
+        <Flex
+          style={{
+            width: "100%",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <Flex style={{ flexDirection: "column" }}>
+            {width < replaceStylePxToNumber(breakpoints[0]) ? (
               <Title>
                 We use{" "}
                 <Link href={LandingpageUrls.cookies_policy}>cookies</Link> for
@@ -34,7 +38,7 @@ const CookieAccept: React.FC<CookieAcceptProps> = ({ accpetCookie }) => {
             ) : (
               <Title>We use cookies</Title>
             )}
-            {width > replaceStylePxToNumber(defaultTheme.breakpoints[0]) && (
+            {width > replaceStylePxToNumber(breakpoints[0]) && (
               <Desc>
                 Grida collects cookies for handling signin, analysing our
                 traffic and making website usage faster.
@@ -44,9 +48,7 @@ const CookieAccept: React.FC<CookieAcceptProps> = ({ accpetCookie }) => {
           </Flex>
 
           <Button className="cursor" onClick={() => accpetCookie()}>
-            {width < replaceStylePxToNumber(defaultTheme.breakpoints[0])
-              ? "OK"
-              : "Accept"}
+            {width < replaceStylePxToNumber(breakpoints[0]) ? "OK" : "Accept"}
           </Button>
         </Flex>
       </SectionLayout>