Merge pull request #1725 from SkynetLabs/dashboard-v2

ops: initial Dashboard v2 directory setup

packages/dashboard-v2/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public

packages/dashboard-v2/README.md

@@ -0,0 +1,10 @@
+# Skynet Account Dashboard
+
+Code behind [account.skynetpro.net](https://account.skynetpro.net/)
+
+
+## Development
+This is a Gatsby application. To run it locally, all you need is:
+
+* `yarn install`
+* `yarn start`

packages/dashboard-v2/gatsby-browser.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "@fontsource/sora/300.css"; // light
+import "@fontsource/sora/400.css"; // normal
+import "@fontsource/sora/500.css"; // medium
+import "@fontsource/sora/600.css"; // semibold
+import "@fontsource/source-sans-pro/400.css"; // normal
+import "@fontsource/source-sans-pro/600.css"; // semibold
+import "./src/styles/global.css";
+
+export function wrapPageElement({ element, props }) {
+  const Layout = element.type.Layout ?? React.Fragment
+  return <Layout {...props}>{element}</Layout>
+}

packages/dashboard-v2/gatsby-config.js

@@ -0,0 +1,31 @@
+module.exports = {
+  siteMetadata: {
+      title: `Accounts Dashboard`,
+    siteUrl: `https://www.yourdomain.tld`
+  },
+  plugins: [
+    "gatsby-plugin-image",
+    "gatsby-plugin-react-helmet",
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
+    "gatsby-plugin-postcss", {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        "name": "images",
+        "path": "./src/images/"
+      },
+      __key: "images"
+    }, {
+      resolve: `gatsby-plugin-alias-imports`,
+      options: {
+        alias: {
+          // Allows npm link-ing skynet-storybook during development.
+          "styled-components": "./node_modules/styled-components",
+        },
+        extensions: [
+          "js",
+        ],
+      }
+    }
+  ]
+};

packages/dashboard-v2/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "accounts-dashboard",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Accounts Dashboard",
+  "author": "Skynet Labs",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "@fontsource/sora": "^4.5.0",
+    "@fontsource/source-sans-pro": "^4.5.1",
+    "babel-plugin-styled-components": "^2.0.2",
+    "gatsby": "^4.6.2",
+    "gatsby-plugin-image": "^2.6.0",
+    "gatsby-plugin-react-helmet": "^5.6.0",
+    "gatsby-plugin-sharp": "^4.6.0",
+    "gatsby-plugin-styled-components": "^5.7.0",
+    "gatsby-source-filesystem": "^4.6.0",
+    "gatsby-transformer-sharp": "^4.6.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0",
+    "tailwindcss": "^3.0.22"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.2",
+    "gatsby-plugin-alias-imports": "^1.0.5",
+    "gatsby-plugin-postcss": "^5.7.0",
+    "postcss": "^8.4.6",
+    "styled-components": "^5.3.3"
+  }
+}

packages/dashboard-v2/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("tailwindcss"), require("autoprefixer")],
+};

packages/dashboard-v2/src/pages/404.js

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { Link } from "gatsby"
+
+// styles
+const pageStyles = {
+  color: "#232129",
+  padding: "96px",
+  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+}
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+}
+
+const paragraphStyles = {
+  marginBottom: 48,
+}
+const codeStyles = {
+  color: "#8A6534",
+  padding: 4,
+  backgroundColor: "#FFF4DB",
+  fontSize: "1.25rem",
+  borderRadius: 4,
+}
+
+// markup
+const NotFoundPage = () => {
+  return (
+    <main style={pageStyles}>
+      <title>Not found</title>
+      <h1 style={headingStyles}>Page not found</h1>
+      <p style={paragraphStyles}>
+        Sorry{" "}
+        <span role="img" aria-label="Pensive emoji">
+          😔
+        </span>{" "}
+        we couldn’t find what you were looking for.
+        <br />
+        {process.env.NODE_ENV === "development" ? (
+          <>
+            <br />
+            Try creating a page in <code style={codeStyles}>src/pages/</code>.
+            <br />
+          </>
+        ) : null}
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  )
+}
+
+export default NotFoundPage

packages/dashboard-v2/src/pages/files.js

@@ -0,0 +1,13 @@
+import * as React from "react"
+
+// markup
+const FilesPage = () => {
+
+  return (
+    <>
+      FILES
+    </>
+  )
+}
+
+export default FilesPage

packages/dashboard-v2/src/pages/index.js

@@ -0,0 +1,13 @@
+import * as React from "react"
+
+// markup
+const IndexPage = () => {
+
+  return (
+    <>
+      Dashboard
+    </>
+  )
+}
+
+export default IndexPage

packages/dashboard-v2/src/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/dashboard-v2/tailwind.config.js

@@ -0,0 +1,70 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+const plugin = require("tailwindcss/plugin");
+
+const colors = {
+  primary: { light: "#33D17E", DEFAULT: "#00c65e" },
+  warning: "#ffd567",
+  error: "#ED5454",
+  palette: {
+    100: "#f5f7f7",
+    200: "#d4dddb",
+    300: "#9e9e9e",
+    400: "#555555",
+    500: "#242424",
+    600: "#0d0d0d",
+  },
+};
+
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/skynet-storybook/dist/**/*.{js,jsx,ts,tsx}", // Also apply Tailwind classes to our shared components library
+  ],
+  theme: {
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1440px",
+    },
+    backgroundColor: (theme) => ({ ...theme("colors"), ...colors }),
+    borderColor: (theme) => ({ ...theme("colors"), ...colors }),
+    textColor: (theme) => ({ ...theme("colors"), ...colors }),
+    placeholderColor: (theme) => ({ ...theme("colors"), ...colors }),
+    extend: {
+      fontFamily: {
+        sans: ["Sora", ...defaultTheme.fontFamily.sans],
+        content: ["Source\\ Sans\\ Pro", ...defaultTheme.fontFamily.sans],
+      },
+      fontSize: {
+        tab: ["18px", "28px"],
+      },
+      backgroundColor: ["disabled"],
+      textColor: ["disabled"],
+      keyframes: {
+        wiggle: {
+          "0%, 100%": { transform: "rotate(-3deg)" },
+          "50%": { transform: "rotate(3deg)" },
+        },
+      },
+      animation: {
+        wiggle: "wiggle 3s ease-in-out infinite",
+      },
+      width: {
+        page: "100%",
+        "page-md": "640px",
+        "page-lg": "896px",
+        "page-xl": "1312px",
+      }
+    },
+  },
+  plugins: [
+    plugin(function ({ addBase, theme }) {
+      addBase({
+        body: {
+          color: theme("textColor.palette.600"),
+        },
+      });
+    }),
+  ],
+};