From 1c54e0832b754afac6e4a62b5d3e8ff92356b080 Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Tue, 20 Aug 2024 12:53:45 -0400 Subject: [PATCH] Make a design system page. Build up CSS. --- gm-dash/ui/package-lock.json | 45 +++++++++++ gm-dash/ui/package.json | 2 + gm-dash/ui/src/Dashboard.css | 75 ------------------ gm-dash/ui/src/Dashboard.tsx | 35 +-------- gm-dash/ui/src/Design.css | 78 +++++++++++++++++++ gm-dash/ui/src/Design.tsx | 57 ++++++++++++++ .../ui/src/components/Launcher/Launcher.css | 4 +- .../LauncherGroup/LauncherGroup.css | 0 .../ui/src/components/Launchpad/Launchpad.css | 18 +++++ .../Launchpad.tsx} | 23 ++++-- gm-dash/ui/src/index.css | 11 ++- gm-dash/ui/src/index.tsx | 14 +++- 12 files changed, 245 insertions(+), 117 deletions(-) create mode 100644 gm-dash/ui/src/Design.css create mode 100644 gm-dash/ui/src/Design.tsx delete mode 100644 gm-dash/ui/src/components/LauncherGroup/LauncherGroup.css create mode 100644 gm-dash/ui/src/components/Launchpad/Launchpad.css rename gm-dash/ui/src/components/{LauncherGroup/LauncherGroup.tsx => Launchpad/Launchpad.tsx} (62%) diff --git a/gm-dash/ui/package-lock.json b/gm-dash/ui/package-lock.json index ed2bcf0..ed9353a 100644 --- a/gm-dash/ui/package-lock.json +++ b/gm-dash/ui/package-lock.json @@ -15,8 +15,10 @@ "@types/node": "^16.18.105", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", + "classnames": "^2.5.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.26.1", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" @@ -3287,6 +3289,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz", + "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -5816,6 +5826,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz", "integrity": "sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==" }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -14718,6 +14733,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz", + "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==", + "dependencies": { + "@remix-run/router": "1.19.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz", + "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==", + "dependencies": { + "@remix-run/router": "1.19.1", + "react-router": "6.26.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/gm-dash/ui/package.json b/gm-dash/ui/package.json index b63878a..7b95809 100644 --- a/gm-dash/ui/package.json +++ b/gm-dash/ui/package.json @@ -10,8 +10,10 @@ "@types/node": "^16.18.105", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", + "classnames": "^2.5.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.26.1", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" diff --git a/gm-dash/ui/src/Dashboard.css b/gm-dash/ui/src/Dashboard.css index fa47678..1f72680 100644 --- a/gm-dash/ui/src/Dashboard.css +++ b/gm-dash/ui/src/Dashboard.css @@ -3,78 +3,3 @@ justify-content: space-between; width: 100%; } - -.palette { - display: flex; -} - -.palette div { - width: 50px; - height: 50px; - border: 1px solid black; - border-radius: 5px; - margin: 1em; - padding: 0; -} - -.item-1 { - background-color: var(--purple-1); -} - -.item-2 { - background-color: var(--purple-2); -} - -.item-3 { - background-color: var(--purple-3); -} - -.item-4 { - background-color: var(--purple-4); -} - -.item-5 { - background-color: var(--purple-5); -} - -.item-6 { - background-color: var(--blue-1); -} - -.item-7 { - background-color: var(--blue-2); -} - -.item-8 { - background-color: var(--blue-3); -} - -.item-9 { - background-color: var(--blue-4); -} - -.item-10 { - background-color: var(--blue-5); -} - -.item-11 { - background-color: var(--grey-1); -} - -.item-12 { - background-color: var(--grey-2); -} - -.item-13 { - background-color: var(--grey-3); -} - -.item-14 { - background-color: var(--grey-4); -} - -.item-15 { - background-color: var(--grey-5); -} - - diff --git a/gm-dash/ui/src/Dashboard.tsx b/gm-dash/ui/src/Dashboard.tsx index 9ef1e8f..efc2d1c 100644 --- a/gm-dash/ui/src/Dashboard.tsx +++ b/gm-dash/ui/src/Dashboard.tsx @@ -1,10 +1,10 @@ import './Dashboard.css'; import Card from './components/Card/Card'; import Launcher from './components/Launcher/Launcher'; -import LauncherGroup from './components/LauncherGroup/LauncherGroup'; +import Launchpad from './components/Launchpad/Launchpad'; const LightThemes = () => -

{name}

const Tracks = () => - const Presets = () => -
-const Palette = () =>
-
-
-
-
-
-
- -const Palette2 = () =>
-
-
-
-
-
-
- -const Palette3 = () =>
-
-
-
-
-
-
- const Dashboard = () => { return (
- - -
diff --git a/gm-dash/ui/src/Design.css b/gm-dash/ui/src/Design.css new file mode 100644 index 0000000..82e0ce4 --- /dev/null +++ b/gm-dash/ui/src/Design.css @@ -0,0 +1,78 @@ +.palette { + display: flex; +} + +.palette div { + width: 50px; + height: 50px; + border: 1px solid black; + border-radius: 5px; + margin: 1em; + padding: 0; +} + +.palette-purple div.item-1 { + background-color: var(--purple-1); +} + +.palette-purple div.item-2 { + background-color: var(--purple-2); +} + +.palette-purple div.item-3 { + background-color: var(--purple-3); +} + +.palette-purple div.item-4 { + background-color: var(--purple-4); +} + +.palette-purple div.item-5 { + background-color: var(--purple-5); +} + +.palette-blue div.item-1 { + background-color: var(--blue-1); +} + +.palette-blue div.item-2 { + background-color: var(--blue-2); +} + +.palette-blue div.item-3 { + background-color: var(--blue-3); +} + +.palette-blue div.item-4 { + background-color: var(--blue-4); +} + +.palette-blue div.item-5 { + background-color: var(--blue-5); +} + +.palette-grey div.item-1 { + background-color: var(--grey-1); +} + +.palette-grey div.item-2 { + background-color: var(--grey-2); +} + +.palette-grey div.item-3 { + background-color: var(--grey-3); +} + +.palette-grey div.item-4 { + background-color: var(--grey-4); +} + +.palette-grey div.item-5 { + background-color: var(--grey-5); +} + +.design_horizontal { + display: flex; + flex-flow: row; +} + diff --git a/gm-dash/ui/src/Design.tsx b/gm-dash/ui/src/Design.tsx new file mode 100644 index 0000000..5c07c69 --- /dev/null +++ b/gm-dash/ui/src/Design.tsx @@ -0,0 +1,57 @@ +import './Design.css' +import Launchpad from './components/Launchpad/Launchpad' + +const PaletteGrey = () =>
+
+
+
+
+
+
+ +const PalettePurple = () =>
+
+
+
+
+
+
+ +const PaletteBlue = () =>
+
+
+
+
+
+
+ +const Launchpads = () =>
+ + + +
+ +const Design = () =>
+ + + + +
+ + +export default Design; diff --git a/gm-dash/ui/src/components/Launcher/Launcher.css b/gm-dash/ui/src/components/Launcher/Launcher.css index df0fe5c..4fa0ef4 100644 --- a/gm-dash/ui/src/components/Launcher/Launcher.css +++ b/gm-dash/ui/src/components/Launcher/Launcher.css @@ -3,9 +3,9 @@ border-radius: 5px; margin: var(--spacer-m); padding: var(--spacer-s); - box-shadow: 2px 2px 8px 0px var(--shadow-1); + box-shadow: var(--shadow-deep); } .activator_enabled { - box-shadow: 0px 0px 8px 4px var(--activator-ring); + box-shadow: var(--activator-ring); } diff --git a/gm-dash/ui/src/components/LauncherGroup/LauncherGroup.css b/gm-dash/ui/src/components/LauncherGroup/LauncherGroup.css deleted file mode 100644 index e69de29..0000000 diff --git a/gm-dash/ui/src/components/Launchpad/Launchpad.css b/gm-dash/ui/src/components/Launchpad/Launchpad.css new file mode 100644 index 0000000..a952b0b --- /dev/null +++ b/gm-dash/ui/src/components/Launchpad/Launchpad.css @@ -0,0 +1,18 @@ +.launchpad { + display: flex; + border: var(--border); + border-radius: var(--border-radius); + box-shadow: var(--shadow-depression); + margin: var(--spacer-l); +} + +.launchpad_horizontal-flow { + display: flex; + flex-direction: row; +} + +.launchpad_vertical-flow { + display: flex; + flex-direction: column; +} + diff --git a/gm-dash/ui/src/components/LauncherGroup/LauncherGroup.tsx b/gm-dash/ui/src/components/Launchpad/Launchpad.tsx similarity index 62% rename from gm-dash/ui/src/components/LauncherGroup/LauncherGroup.tsx rename to gm-dash/ui/src/components/Launchpad/Launchpad.tsx index 89a330c..0035069 100644 --- a/gm-dash/ui/src/components/LauncherGroup/LauncherGroup.tsx +++ b/gm-dash/ui/src/components/Launchpad/Launchpad.tsx @@ -1,13 +1,18 @@ import React from 'react'; +import './Launchpad.css'; import Launcher, { LauncherProps } from '../Launcher/Launcher'; +import classnames from 'classnames'; export interface Selectable { onSelected?: (key: string) => void; } -interface LauncherGroupProps { - options: Array; +export type Flow = "horizontal" | "vertical"; + +interface LaunchpadProps { exclusive: boolean; + flow?: Flow; + options: Array; } const exclusiveSelect = (state: { [key: string]: boolean }, targetId: string) => { @@ -23,14 +28,22 @@ const multiSelect = (state: { [key: string]: boolean }, targetId: string) => { } } -const LauncherGroup = ({ options, exclusive }: LauncherGroupProps) => { +const Launchpad = ({ flow = "horizontal", options, exclusive }: LaunchpadProps) => { const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {}); + let classOptions = [ "launchpad" ]; + + if (flow === "horizontal") { + classOptions.push("launchpad_horizontal-flow"); + } else { + classOptions.push("launchpad_vertical-flow"); + } + let tiedOptions = options.map(option => dispatch(key)} activated={selected[option.title]} /> ); - return (
{tiedOptions}
) + return (
{tiedOptions}
) } -export default LauncherGroup; +export default Launchpad; diff --git a/gm-dash/ui/src/index.css b/gm-dash/ui/src/index.css index 5d6927f..2f2e200 100644 --- a/gm-dash/ui/src/index.css +++ b/gm-dash/ui/src/index.css @@ -18,10 +18,15 @@ --grey-5: hsl(210, 0%, 85%); --title-color: var(--grey-1); - --shadow-1: var(--purple-1); - --shadow-2: var(--purple-2); - --activator-ring: var(--blue-4); + --border: 1px solid var(--purple-1); + --activator-ring: 0px 0px 8px 4px var(--blue-4); + --shadow-depression: inset 1px 1px 2px 0px var(--purple-1); + --shadow-shallow: 1px 1px 2px 0px var(--purple-1); + --shadow-deep: 2px 2px 4px 0px var(--purple-1), + 4px 4px 8px 0px var(--purple-2); + + --border-radius: 8px; --spacer-xs: 2px; --spacer-s: 4px; diff --git a/gm-dash/ui/src/index.tsx b/gm-dash/ui/src/index.tsx index 2cf9f1e..6bf0e92 100644 --- a/gm-dash/ui/src/index.tsx +++ b/gm-dash/ui/src/index.tsx @@ -2,14 +2,26 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import Dashboard from './Dashboard'; +import Design from './Design'; import reportWebVitals from './reportWebVitals'; +import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); +const router = createBrowserRouter([ + { + path: "/", + element: , + }, + { + path: "/design", + element: , + }, +]); root.render( - + );