Merge pull request #24 from polkadot-ui/revert-frontpage

Revert all idiotic changes

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",

src/Header.tsx

@@ -3,29 +3,60 @@
 
 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 (
     <div className="app-header">
       <section>
-        <div className="icon">
+        <div className="icon" ref={glitch.ref}>
           <IconSVG />
         </div>
         <div className="title">
-          <h3>Polkadot UI Docs</h3>
+          <h3>Polkadot Cloud Docs</h3>
         </div>
       </section>
       <section>
+        <button
+          className={`link${mode === "light" ? " selected" : ``}`}
+          onClick={() => toggleMode("light")}
+        >
+          Light
+        </button>
+        <button
+          className={`link${mode === "dark" ? " selected" : ``}`}
+          onClick={() => toggleMode("dark")}
+        >
+          Dark
+        </button>
         <a
           href="https://github.com/polkadot-ui/library"
           target="_blank"
           rel="noreferrer"
         >
           <FontAwesomeIcon
             icon={faGithub}
-            transform="grow-12"
-            style={{ marginLeft: "0.25rem" }}
+            transform="grow-14"
+            style={{ marginLeft: "0.75rem" }}
           />
         </a>
       </section>

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();

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 (
-    <div className={`main theme-ui ui-theme-${"light"}`}>
+    <div className={`main theme-ui ui-theme-${mode}`}>
       <Router />
     </div>
   );

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: <AccountCard />,
+  },
+];
+
 // utils
 const utilsRoutes = [
   {
@@ -71,6 +89,44 @@ const utilsRoutes = [
   },
 ];
 
+// Layout Components
+const componentsLayoutRoutes = [
+  {
+    path: "grid",
+    name: "Grid",
+    element: <Grid />,
+  },
+  {
+    path: "card",
+    name: "Card",
+    element: <Card />,
+  },
+  {
+    path: "modal",
+    name: "Modal",
+    element: <Modal />,
+  },
+];
+
+// Input Components
+const componentsInputRoutes = [
+  {
+    path: "buttons",
+    name: "Buttons",
+    element: <Buttons />,
+  },
+  {
+    path: "switch",
+    name: "Switch",
+    element: <Switch />,
+  },
+  {
+    path: "textfield",
+    name: "Textfield",
+    element: <Textfield />,
+  },
+];
+
 const assetsRoutes = [
   {
     path: "extensions",
@@ -110,6 +166,16 @@ const componentsRoutes = [
     name: "Overlay",
     element: <Overlay />,
   },
+  {
+    path: "loader",
+    name: "Loaders",
+    element: <Loaders />,
+  },
+  {
+    path: "charts",
+    name: "Charts",
+    element: <Charts />,
+  },
 ];
 
 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 =>

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 = `<Button type="help" marginRight />
+<Button type="help" background="secondary" marginRight />
+<Button type="help" background="none" outline />`;
+
+  return (
+    <>
+      <Demo showThemes={false}>
+        <Button type="help" marginRight />
+        <Button type="help" background="secondary" marginRight />
+        <Button type="help" background="none" outline />
+      </Demo>
+      <SimpleEditor code={code} />
+    </>
+  );
+};

src/docs/Components/Buttons/ButtonMono.tsx

@@ -0,0 +1,26 @@
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
+
+import { faUser } from "@fortawesome/free-solid-svg-icons";
+import { Button } from "@polkadot-ui/react";
+import { SimpleEditor } from "../../lib/SimpleEditor";
+import { Demo } from "../../lib/Demo";
+
+export const ButtonMono = () => {
+  const code = `<Button type="mono" text="Button" marginRight />
+<Button type="mono" text="Button" iconLeft={faUser} marginRight />
+<Button type="mono" text="Button" iconRight={faUser} marginRight />
+<Button type="mono" lg text="Button" disabled />`;
+
+  return (
+    <>
+      <Demo showThemes={false}>
+        <Button type="mono" text="Button" marginRight />
+        <Button type="mono" text="Button" iconLeft={faUser} marginRight />
+        <Button type="mono" text="Button" iconRight={faUser} marginRight />
+        <Button type="mono" lg text="Button" disabled />
+      </Demo>
+      <SimpleEditor code={code} />
+    </>
+  );
+};

src/docs/Components/Buttons/ButtonMonoInvert.tsx

@@ -0,0 +1,31 @@
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
+
+import { faUser } from "@fortawesome/free-solid-svg-icons";
+import { Button } from "@polkadot-ui/react";
+import { SimpleEditor } from "../../lib/SimpleEditor";
+import { Demo } from "../../lib/Demo";
+
+export const ButtonMonoInvert = () => {
+  const code = `<Button type="monoInvert" text="Button" marginRight />
+<Button type="monoInvert" text="Button" iconLeft={faUser} marginRight />
+<Button type="monoInvert" text="Button" iconRight={faUser} marginRight />
+<Button type="monoInvert" lg text="Button" disabled />`;
+
+  return (
+    <>
+      <Demo showThemes={false}>
+        <Button type="monoInvert" text="Button" marginRight />
+        <Button type="monoInvert" text="Button" iconLeft={faUser} marginRight />
+        <Button
+          type="monoInvert"
+          text="Button"
+          iconRight={faUser}
+          marginRight
+        />
+        <Button type="monoInvert" lg text="Button" disabled />
+      </Demo>
+      <SimpleEditor code={code} />
+    </>
+  );
+};

src/docs/Components/Buttons/ButtonPrimary.tsx

@@ -0,0 +1,32 @@
+/* @license Copyright 2024 @polkadot-ui/frontpage authors & contributors
+SPDX-License-Identifier: MIT */
+
+import { faUser } from "@fortawesome/free-solid-svg-icons";
+import { Button } from "@polkadot-ui/react";
+import { SimpleEditor } from "../../lib/SimpleEditor";
+import { Demo } from "../../lib/Demo";
+
+export const ButtonPrimary = () => {
+  const code = `<Button text="Button" marginRight />
+<Button type="primary" text="Button" iconLeft={faUser} marginRight />
+<Button type="primary" text="Button" iconLeft={faUser} marginRight colorSecondary />
+<Button type="primary" text="Button" lg disabled />`;
+
+  return (
+    <>
+      <Demo>
+        <Button text="Button" marginRight />
+        <Button type="primary" text="Button" iconLeft={faUser} marginRight />
+        <Button
+          type="primary"
+          text="Button"
+          iconLeft={faUser}
+          marginRight
+          colorSecondary
+        />
+        <Button type="primary" text="Button" lg disabled />
+      </Demo>
+      <SimpleEditor code={code} />
+    </>
+  );
+};