diff --git a/package.json b/package.json index 5f33682..94f45fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@polkadot-ui/frontpage", - "version": "0.2.0", + "version": "0.3.0", "license": "MIT", "description": "Polkadot UI Landing Page.", "type": "module", @@ -33,8 +33,9 @@ "@fortawesome/fontawesome-svg-core": "^6.5.1", "@ledgerhq/hw-transport-webhid": "^6.28.4", "@polkadot-ui/assets": "^0.5.2", - "@polkadot-ui/core": "^2.0.0", - "@polkadot-ui/react": "^0.5.1", + "@polkadot-ui/core": "^2.0.2", + "@polkadot-ui/react": "^0.5.3", + "@polkadot-ui/recipes": "^0.1.3", "@polkadot-ui/utils": "^0.4.0", "@polkadot/keyring": "^12.6.2", "@polkadot/util": "^12.6.2", diff --git a/src/Header.tsx b/src/Header.tsx index 1fe06fa..c4f0f48 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -3,20 +3,51 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import IconSVG from "./svg/polkadot_pink.svg?react"; +import { useGlitch } from "react-powerglitch"; import { faGithub } from "@fortawesome/free-brands-svg-icons"; +import { useTheme } from "./contexts/Theme"; export const Header = () => { + const { mode, toggleMode } = useTheme(); + + const glitch = useGlitch({ + timing: { + duration: 5000, + }, + glitchTimeSpan: { + start: 0.5, + end: 0.65, + }, + shake: { + velocity: 2, + amplitudeX: 0.2, + amplitudeY: 0.2, + }, + }); + return (
-
+
-

Polkadot UI Docs

+

Polkadot Cloud Docs

+ + { >
diff --git a/src/Router.tsx b/src/Router.tsx index fdaf7aa..eec003f 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -11,9 +11,9 @@ import { useEffect } from "react"; import { useUi } from "./contexts/UI"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBars } from "@fortawesome/free-solid-svg-icons"; -import { Body } from "./docs/lib/Structure/Body"; -import { Side } from "./docs/lib/Structure/Side"; -import { Main } from "./docs/lib/Structure/Main"; +import { Side } from "@polkadot-ui/react/base/structure/Side"; +import { Body } from "@polkadot-ui/react/base/structure/Body"; +import { Main } from "@polkadot-ui/react/base/structure/Main"; export const Router = () => { const { sideMenuOpen } = useUi(); diff --git a/src/Theme.tsx b/src/Theme.tsx index 9c8ee8b..bf569e3 100644 --- a/src/Theme.tsx +++ b/src/Theme.tsx @@ -2,17 +2,19 @@ // SPDX-License-Identifier: MIT import { Router } from "./Router"; +import { useTheme } from "./contexts/Theme"; // App-wide theme classes are inserted here. // // App-specific theming is added to `ThemeProvider`. // `@polkadot-ui/react` themes are added to `Entry`. export const Theme = () => { + const { mode } = useTheme(); // NOTE: theme not currently in use. Defaulting to light mode. // const { mode } = useTheme(); return ( -
+
); diff --git a/src/config/routes.tsx b/src/config/routes.tsx index a7ce124..40b0dbf 100644 --- a/src/config/routes.tsx +++ b/src/config/routes.tsx @@ -2,13 +2,22 @@ SPDX-License-Identifier: MIT */ import { ReactNode } from "react"; +import { Buttons } from "../docs/Components/Buttons"; +import { Loaders } from "../docs/Experimental/Loaders"; +import { Charts } from "../docs/Components/Charts"; import { Polkicon } from "../docs/Components/Polkicon"; import { Extensions } from "../docs/Assets/Extensions"; import { Validators } from "../docs/Assets/Validators"; +import { Grid } from "../docs/Experimental/Grid"; +import { Card } from "../docs/Experimental/Cards"; import { Overlay } from "../docs/Components/Overlay"; +import { AccountCard } from "../docs/Experimental/AccountCard"; import { Odometer } from "../docs/Components/Odometer"; +import { Modal } from "../docs/Experimental/Modal"; import { UtilitiesBase } from "../docs/Utilities/Base"; import { UtilitiesUnit } from "../docs/Utilities/Unit"; +import { Switch } from "../docs/Experimental/Switch"; +import { Textfield } from "../docs/Experimental/Textfield"; import { Overview } from "../docs/GettingStarted/Overview"; import { Installation } from "../docs/GettingStarted/Installation"; import { UsingThemes } from "../docs/GettingStarted/UsingThemes"; @@ -57,6 +66,15 @@ const gettingStartedRoutes = [ }, ]; +// recipes +const recipesRoutes = [ + { + path: "account-card", + name: "Account card", + element: , + }, +]; + // utils const utilsRoutes = [ { @@ -71,6 +89,44 @@ const utilsRoutes = [ }, ]; +// Layout Components +const componentsLayoutRoutes = [ + { + path: "grid", + name: "Grid", + element: , + }, + { + path: "card", + name: "Card", + element: , + }, + { + path: "modal", + name: "Modal", + element: , + }, +]; + +// Input Components +const componentsInputRoutes = [ + { + path: "buttons", + name: "Buttons", + element: , + }, + { + path: "switch", + name: "Switch", + element: , + }, + { + path: "textfield", + name: "Textfield", + element: , + }, +]; + const assetsRoutes = [ { path: "extensions", @@ -110,6 +166,16 @@ const componentsRoutes = [ name: "Overlay", element: , }, + { + path: "loader", + name: "Loaders", + element: , + }, + { + path: "charts", + name: "Charts", + element: , + }, ]; export const routes: Routes = [ @@ -121,6 +187,9 @@ export const routes: Routes = [ ...gettingStartedRoutes, ...assetsRoutes, ...componentsRoutes, + ...componentsLayoutRoutes, + ...componentsInputRoutes, + ...recipesRoutes, ...utilsRoutes, ]; @@ -158,8 +227,20 @@ export const routeCategories: RouteCategories = [ paths: ["extensions-provider", "extension-accounts-provider"], }, { - heading: "UI", - paths: ["polkicon", "odometer", "overlay"], + paths: ["polkicon"], + }, + { + paths: ["odometer"], + }, + { + paths: ["overlay"], + }, + { + paths: ["charts"], + }, + { + heading: "Inputs", + paths: ["buttons"], }, ], }, @@ -171,6 +252,23 @@ export const routeCategories: RouteCategories = [ }, ], }, + { + name: "Experimental", + paths: [ + { + heading: "Components", + paths: ["loader", "modal", "switch", "textfield"], + }, + { + heading: "Layout", + paths: ["card", "grid"], + }, + { + heading: "Recipes", + paths: ["account-card", "modal-connect"], + }, + ], + }, ]; export const nameFromRoute = (path: string): string | undefined => diff --git a/src/docs/Components/Buttons/ButtonHelp.tsx b/src/docs/Components/Buttons/ButtonHelp.tsx new file mode 100644 index 0000000..e01c2af --- /dev/null +++ b/src/docs/Components/Buttons/ButtonHelp.tsx @@ -0,0 +1,23 @@ +/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors +SPDX-License-Identifier: MIT */ + +import { Button } from "@polkadot-ui/react"; +import { SimpleEditor } from "../../lib/SimpleEditor"; +import { Demo } from "../../lib/Demo"; + +export const ButtonHelp = () => { + const code = `