ops: initial Dashboard v2 directory setup

This commit is contained in:
Michał Leszczyk 2022-02-15 10:04:19 +01:00
parent 354b8d9bbc
commit fe9b01bfe2
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
13 changed files with 25643 additions and 0 deletions

3
packages/dashboard-v2/.gitignore vendored Normal file
View File

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

View File

@ -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:
* `npm install`
* `npm run start`

View File

@ -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>
}

View File

@ -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",
],
}
}
]
};

View File

@ -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>
}

25377
packages/dashboard-v2/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

View File

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

View File

@ -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 couldnt 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

View File

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

View File

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

View File

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

View File

@ -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"),
},
});
}),
],
};