Merge pull request #127 from grucloud/multi-step-form

multi step form wip
grucloud · Nov 18, 2024 · 3039824 · 3039824
2 parents 3478844 + abc4c70
commit 3039824
Show file tree

Hide file tree

Showing 24 changed files with 467 additions and 4 deletions.
diff --git a/examples/e-commerce-product-page/src/style.css b/examples/e-commerce-product-page/src/style.css
@@ -20,10 +20,6 @@
   --color-gray-50: hsl(0, 0%, 95%);
 }
 
-html[data-theme="dark"] {
-  --background-color: #202c37;
-}
-
 body {
   font-family: "Kumbh Sans", sans-serif;
   max-width: 100vw;

diff --git a/examples/multi-step-form/.gitignore b/examples/multi-step-form/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/multi-step-form/.npmrc b/examples/multi-step-form/.npmrc
@@ -0,0 +1,2 @@
+save-exact = true
+package-lock = false
diff --git a/examples/multi-step-form/README.md b/examples/multi-step-form/README.md
@@ -0,0 +1,23 @@
+# Frontend Mentor Multi Step Form
+
+Here is the implementation in [Bau.js](https://github.com/grucloud/bau) of the [Frontend Mentor Multi Step Form code challenge](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ)
+
+## Workflow
+
+Install the dependencies:
+
+```sh
+npm install
+```
+
+Start a development server:
+
+```sh
+npm run dev
+```
+
+Build a production version:
+
+```sh
+npm run build
+```
diff --git a/examples/multi-step-form/index.html b/examples/multi-step-form/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="./assets/images/favicon-32x32.png"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Multi Step Form | FrontendMentor</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/multi-step-form/package.json b/examples/multi-step-form/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "frontendmentor-multi-step-form",
+  "private": true,
+  "version": "0.90.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.2",
+    "vite": "^5.2.11"
+  },
+  "dependencies": {
+    "@grucloud/bau": "^0.90.0",
+    "@grucloud/bau-css": "^0.90.0",
+    "@grucloud/bau-ui": "^0.90.0"
+  }
+}
diff --git a/examples/multi-step-form/public/assets/images/bg-sidebar-desktop.svg b/examples/multi-step-form/public/assets/images/bg-sidebar-desktop.svg
diff --git a/examples/multi-step-form/public/assets/images/bg-sidebar-mobile.svg b/examples/multi-step-form/public/assets/images/bg-sidebar-mobile.svg
diff --git a/examples/multi-step-form/public/assets/images/favicon-32x32.png b/examples/multi-step-form/public/assets/images/favicon-32x32.png
diff --git a/examples/multi-step-form/public/assets/images/icon-advanced.svg b/examples/multi-step-form/public/assets/images/icon-advanced.svg
diff --git a/examples/multi-step-form/public/assets/images/icon-arcade.svg b/examples/multi-step-form/public/assets/images/icon-arcade.svg
diff --git a/examples/multi-step-form/public/assets/images/icon-checkmark.svg b/examples/multi-step-form/public/assets/images/icon-checkmark.svg
diff --git a/examples/multi-step-form/public/assets/images/icon-pro.svg b/examples/multi-step-form/public/assets/images/icon-pro.svg
diff --git a/examples/multi-step-form/public/assets/images/icon-thank-you.svg b/examples/multi-step-form/public/assets/images/icon-thank-you.svg
diff --git a/examples/multi-step-form/src/main.ts b/examples/multi-step-form/src/main.ts
@@ -0,0 +1,20 @@
+import { createContext, type Context } from "@grucloud/bau-ui/context";
+import multiStepForm from "./multiStepForm";
+
+import "./style.css";
+
+const context = createContext();
+
+const app = (context: Context) => {
+  const { bau } = context;
+  const { main } = bau.tags;
+
+  const MultiStepForm = multiStepForm(context);
+
+  return function () {
+    return main(MultiStepForm());
+  };
+};
+
+const App = app(context);
+document.getElementById("app")?.replaceChildren(App());
diff --git a/examples/multi-step-form/src/multiStepForm.ts b/examples/multi-step-form/src/multiStepForm.ts
@@ -0,0 +1,140 @@
+import { type Context } from "@grucloud/bau-ui/context";
+import stepYourInfo from "./stepYourInfo";
+import stepSelectPlan from "./stepSelectPlan";
+
+export default function (context: Context) {
+  const { bau, css } = context;
+  const { article, div, header, ul, li, span } = bau.tags;
+  const StepYourInfo = stepYourInfo(context);
+  const StepSelectPlan = stepSelectPlan(context);
+
+  const currentStepState = bau.state(1);
+
+  const className = css`
+    border: 1px solid red;
+    max-width: 1000px;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    gap: 0.6rem;
+    border-radius: 0.6rem;
+    padding: 1rem;
+
+    & header {
+      border: 1px solid blue;
+      background-image: url("./assets/images/bg-sidebar-desktop.svg");
+      background-size: cover;
+      > ul {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem;
+        > li {
+          &.active {
+            color: red;
+          }
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+          color: var(--font-color-inverse);
+
+          .step-number {
+            font-weight: bold;
+            padding: 1rem;
+            border: 1px solid white;
+            border-radius: 100%;
+            width: 2rem;
+            height: 2rem;
+            display: grid;
+            place-content: center;
+          }
+          .step-label {
+            text-transform: uppercase;
+            font-size: smaller;
+            color: var(--font-color-inverse-secondary);
+          }
+          .label {
+            text-transform: uppercase;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    .content {
+      border: 1px solid blue;
+      min-width: 375px;
+      min-height: 400px;
+      > ul {
+        > li {
+          display: none;
+          &.active {
+            display: block;
+          }
+          form {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+          }
+        }
+      }
+    }
+  `;
+  const isCurrentIndex = (index: number) => currentStepState.val == index;
+
+  const Header = ({ index, label }: any) =>
+    li(
+      { class: () => isCurrentIndex(index) && "active" },
+      div({ class: "step-number" }, index),
+      div(
+        div({ class: "step-label" }, "Step", index),
+        div({ class: "label" }, label)
+      )
+    );
+
+  const next = () => {
+    currentStepState.val++;
+  };
+  const previous = () => {
+    currentStepState.val--;
+  };
+
+  const onsubmitYourInfo = (event: HTMLFormElement) => {
+    event.preventDefault();
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
+    next();
+  };
+
+  const onsubmitAddon = (event) => {
+    event.preventDefault();
+    const payload = Object.fromEntries(new FormData(event.currentTarget));
+    alert(JSON.stringify(payload));
+    // next();
+  };
+
+  const steps = [
+    {
+      label: "Your Info",
+      Content: () => StepYourInfo({ onsubmit: onsubmitYourInfo }),
+    },
+    {
+      label: "Select Plan",
+      Content: ({}) => StepSelectPlan({ onsubmit: onsubmitAddon }),
+    },
+  ];
+
+  return () => {
+    return article(
+      { class: className },
+      header(ul(steps.map(({ label }, index) => Header({ index, label })))),
+      div(
+        { class: "content" },
+        ul(
+          steps.map(({ Content, label }, index) =>
+            li({ class: () => isCurrentIndex(index) && "active" }, Content({}))
+          )
+        )
+      )
+    );
+  };
+}
diff --git a/examples/multi-step-form/src/stepAddOns.ts b/examples/multi-step-form/src/stepAddOns.ts
@@ -0,0 +1,18 @@
+import { type Context } from "@grucloud/bau-ui/context";
+
+export default function (context: Context) {
+  const { bau, css } = context;
+  const { form, h1, button } = bau.tags;
+
+  const className = css`
+    border: 1px solid red;
+  `;
+
+  return ({ onsubmit }) => {
+    return form(
+      { class: className, onsubmit },
+      h1("Add-Ons"),
+      button({ type: "submit" }, "Next")
+    );
+  };
+}
diff --git a/examples/multi-step-form/src/stepSelectPlan.ts b/examples/multi-step-form/src/stepSelectPlan.ts
@@ -0,0 +1,60 @@
+import { type Context } from "@grucloud/bau-ui/context";
+
+export default function (context: Context) {
+  const { bau, css } = context;
+  const {
+    form,
+    button,
+    h1,
+    p,
+    input,
+    footer,
+    div,
+    label,
+    span,
+    strong,
+    small,
+  } = bau.tags;
+
+  const className = css`
+    border: 1px solid red;
+    .radio-group {
+      display: flex;
+      justify-content: space-around;
+      > label {
+        border: 1px solid red;
+        padding: 1rem;
+      }
+    }
+  `;
+
+  return ({ onsubmit }: any) => {
+    return form(
+      { class: className, onsubmit },
+      h1("Select your plan"),
+      p("You have the option of monthly or yearly billing."),
+      div(
+        { class: "radio-group" },
+        label(
+          input({ type: "radio", name: "plan", id: "arcade" }),
+          p(strong("Arcade")),
+          p(small("$9/month"))
+        ),
+        label(
+          input({ type: "radio", name: "plan", id: "advanced" }),
+          p(strong("Advanced")),
+          p(small("$12/month"))
+        ),
+        label(
+          input({ type: "radio", name: "plan", id: "pro" }),
+          p(strong("Pro")),
+          p(small("$15/month"))
+        )
+      ),
+      footer(
+        button({ type: "button" }, "Go back"),
+        button({ type: "submit" }, "Next Step")
+      )
+    );
+  };
+}
diff --git a/examples/multi-step-form/src/stepSummary.ts b/examples/multi-step-form/src/stepSummary.ts
@@ -0,0 +1,14 @@
+import { type Context } from "@grucloud/bau-ui/context";
+
+export default function (context: Context) {
+  const { bau, css } = context;
+  const { section, h1 } = bau.tags;
+
+  const className = css`
+    border: 1px solid red;
+  `;
+
+  return () => {
+    return section({ class: className }, h1("SSummary"));
+  };
+}