product list cart

grucloud · Nov 1, 2024 · afc1959 · afc1959
1 parent b850018
commit afc1959
Show file tree

Hide file tree

Showing 60 changed files with 875 additions and 6 deletions.
diff --git a/bau-ui/globalStyle/globalStyle.js b/bau-ui/globalStyle/globalStyle.js
@@ -98,12 +98,7 @@ export default function globalStyle(
       margin: 0;
       padding: 0;
     }
-    h1,h2,h3,p {
-      margin:0.3rem 0;
-    }
-    ul,ol {
-      padding-left:1.3rem
-    }
+   
     :root {
       --color-scheme: light;
       --contrast-background-value: 90%;

diff --git a/bau-ui/modal/modal.js b/bau-ui/modal/modal.js
@@ -32,6 +32,21 @@ export default function (context, options = {}) {
     min-width: 400px;
     border: 0px;
     overflow: hidden;
+
+    &,
+    &::backdrop {
+      transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete,
+        opacity 0.3s;
+      opacity: 0;
+    }
+    &[open],
+    &[open]::backdrop {
+      opacity: 1;
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
     > form {
       display: flex;
       flex-direction: column;

diff --git a/examples/product-list-cart/.gitignore b/examples/product-list-cart/.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/product-list-cart/.npmrc b/examples/product-list-cart/.npmrc
@@ -0,0 +1,2 @@
+save-exact = true
+package-lock = false
diff --git a/examples/product-list-cart/README.md b/examples/product-list-cart/README.md
@@ -0,0 +1,23 @@
+# Frontend Mentor Product List Cart
+
+Here is the implementation in [Bau.js](https://github.com/grucloud/bau) of the [Frontend Mentor Product List Cart code challenge](https://www.frontendmentor.io/challenges/product-list-with-cart-5MmqLVAp_d)
+
+## 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/product-list-cart/index.html b/examples/product-list-cart/index.html
@@ -0,0 +1,21 @@
+<!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" />
+    <meta
+      name="description"
+      content="FrontendMentor 'Product List Cart' code challenge implemented with Bau.js"
+    />
+    <title>Product List Cart | FrontendMentor</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/product-list-cart/package.json b/examples/product-list-cart/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "frontendmentor-product-list-cart",
+  "private": true,
+  "version": "0.85.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.85.0",
+    "@grucloud/bau-css": "^0.85.0",
+    "@grucloud/bau-ui": "^0.85.0",
+    "bignumber.js": "9.1.2"
+  }
+}
diff --git a/examples/product-list-cart/public/assets/images/favicon-32x32.png b/examples/product-list-cart/public/assets/images/favicon-32x32.png
diff --git a/examples/product-list-cart/public/assets/images/icon-add-to-cart.svg b/examples/product-list-cart/public/assets/images/icon-add-to-cart.svg
diff --git a/examples/product-list-cart/public/assets/images/icon-carbon-neutral.svg b/examples/product-list-cart/public/assets/images/icon-carbon-neutral.svg
diff --git a/examples/product-list-cart/public/assets/images/icon-decrement-quantity.svg b/examples/product-list-cart/public/assets/images/icon-decrement-quantity.svg
diff --git a/examples/product-list-cart/public/assets/images/icon-increment-quantity.svg b/examples/product-list-cart/public/assets/images/icon-increment-quantity.svg
diff --git a/examples/product-list-cart/public/assets/images/icon-order-confirmed.svg b/examples/product-list-cart/public/assets/images/icon-order-confirmed.svg
diff --git a/examples/product-list-cart/public/assets/images/icon-remove-item.svg b/examples/product-list-cart/public/assets/images/icon-remove-item.svg
diff --git a/examples/product-list-cart/public/assets/images/illustration-article.svg b/examples/product-list-cart/public/assets/images/illustration-article.svg
diff --git a/examples/product-list-cart/public/assets/images/illustration-empty-cart.svg b/examples/product-list-cart/public/assets/images/illustration-empty-cart.svg
diff --git a/examples/product-list-cart/public/assets/images/image-avatar.webp b/examples/product-list-cart/public/assets/images/image-avatar.webp
diff --git a/examples/product-list-cart/public/assets/images/image-baklava-desktop.jpg b/examples/product-list-cart/public/assets/images/image-baklava-desktop.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-baklava-mobile.jpg b/examples/product-list-cart/public/assets/images/image-baklava-mobile.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-baklava-tablet.jpg b/examples/product-list-cart/public/assets/images/image-baklava-tablet.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-baklava-thumbnail.jpg b/examples/product-list-cart/public/assets/images/image-baklava-thumbnail.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-brownie-desktop.jpg b/examples/product-list-cart/public/assets/images/image-brownie-desktop.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-brownie-mobile.jpg b/examples/product-list-cart/public/assets/images/image-brownie-mobile.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-brownie-tablet.jpg b/examples/product-list-cart/public/assets/images/image-brownie-tablet.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-brownie-thumbnail.jpg b/examples/product-list-cart/public/assets/images/image-brownie-thumbnail.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-cake-desktop.jpg b/examples/product-list-cart/public/assets/images/image-cake-desktop.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-cake-mobile.jpg b/examples/product-list-cart/public/assets/images/image-cake-mobile.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-cake-tablet.jpg b/examples/product-list-cart/public/assets/images/image-cake-tablet.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-cake-thumbnail.jpg b/examples/product-list-cart/public/assets/images/image-cake-thumbnail.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-creme-brulee-desktop.jpg b/examples/product-list-cart/public/assets/images/image-creme-brulee-desktop.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-creme-brulee-mobile.jpg b/examples/product-list-cart/public/assets/images/image-creme-brulee-mobile.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-creme-brulee-tablet.jpg b/examples/product-list-cart/public/assets/images/image-creme-brulee-tablet.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-creme-brulee-thumbnail.jpg b/examples/product-list-cart/public/assets/images/image-creme-brulee-thumbnail.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-macaron-desktop.jpg b/examples/product-list-cart/public/assets/images/image-macaron-desktop.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-macaron-mobile.jpg b/examples/product-list-cart/public/assets/images/image-macaron-mobile.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-macaron-tablet.jpg b/examples/product-list-cart/public/assets/images/image-macaron-tablet.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-macaron-thumbnail.jpg b/examples/product-list-cart/public/assets/images/image-macaron-thumbnail.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-meringue-desktop.jpg b/examples/product-list-cart/public/assets/images/image-meringue-desktop.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-meringue-mobile.jpg b/examples/product-list-cart/public/assets/images/image-meringue-mobile.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-meringue-tablet.jpg b/examples/product-list-cart/public/assets/images/image-meringue-tablet.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-meringue-thumbnail.jpg b/examples/product-list-cart/public/assets/images/image-meringue-thumbnail.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-panna-cotta-desktop.jpg b/examples/product-list-cart/public/assets/images/image-panna-cotta-desktop.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-panna-cotta-mobile.jpg b/examples/product-list-cart/public/assets/images/image-panna-cotta-mobile.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-panna-cotta-tablet.jpg b/examples/product-list-cart/public/assets/images/image-panna-cotta-tablet.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-panna-cotta-thumbnail.jpg b/examples/product-list-cart/public/assets/images/image-panna-cotta-thumbnail.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-tiramisu-desktop.jpg b/examples/product-list-cart/public/assets/images/image-tiramisu-desktop.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-tiramisu-mobile.jpg b/examples/product-list-cart/public/assets/images/image-tiramisu-mobile.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-tiramisu-tablet.jpg b/examples/product-list-cart/public/assets/images/image-tiramisu-tablet.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-tiramisu-thumbnail.jpg b/examples/product-list-cart/public/assets/images/image-tiramisu-thumbnail.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-waffle-desktop.jpg b/examples/product-list-cart/public/assets/images/image-waffle-desktop.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-waffle-mobile.jpg b/examples/product-list-cart/public/assets/images/image-waffle-mobile.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-waffle-tablet.jpg b/examples/product-list-cart/public/assets/images/image-waffle-tablet.jpg
diff --git a/examples/product-list-cart/public/assets/images/image-waffle-thumbnail.jpg b/examples/product-list-cart/public/assets/images/image-waffle-thumbnail.jpg
diff --git a/examples/product-list-cart/src/data.json b/examples/product-list-cart/src/data.json
@@ -0,0 +1,101 @@
+[
+    {
+       "image": {
+            "thumbnail": "./assets/images/image-waffle-thumbnail.jpg",
+            "mobile": "./assets/images/image-waffle-mobile.jpg",
+            "tablet": "./assets/images/image-waffle-tablet.jpg",
+            "desktop": "./assets/images/image-waffle-desktop.jpg"
+       },
+       "name": "Waffle with Berries",
+       "category": "Waffle",
+       "price": 6.50
+    },
+    {
+        "image": {
+            "thumbnail": "./assets/images/image-creme-brulee-thumbnail.jpg",
+            "mobile": "./assets/images/image-creme-brulee-mobile.jpg",
+            "tablet": "./assets/images/image-creme-brulee-tablet.jpg",
+            "desktop": "./assets/images/image-creme-brulee-desktop.jpg"
+        },
+        "name": "Vanilla Bean Crème Brûlée",
+        "category": "Crème Brûlée",
+        "price": 7.00
+     },
+     {
+        "image": {
+            "thumbnail": "./assets/images/image-macaron-thumbnail.jpg",
+            "mobile": "./assets/images/image-macaron-mobile.jpg",
+            "tablet": "./assets/images/image-macaron-tablet.jpg",
+            "desktop": "./assets/images/image-macaron-desktop.jpg"
+        },
+        "name": "Macaron Mix of Five",
+        "category": "Macaron",
+        "price": 8.00
+     },
+     {
+        "image": {
+            "thumbnail": "./assets/images/image-tiramisu-thumbnail.jpg",
+            "mobile": "./assets/images/image-tiramisu-mobile.jpg",
+            "tablet": "./assets/images/image-tiramisu-tablet.jpg",
+            "desktop": "./assets/images/image-tiramisu-desktop.jpg"
+        },
+        "name": "Classic Tiramisu",
+        "category": "Tiramisu",
+        "price": 5.50
+     },
+     {
+        "image": {
+            "thumbnail": "./assets/images/image-baklava-thumbnail.jpg",
+            "mobile": "./assets/images/image-baklava-mobile.jpg",
+            "tablet": "./assets/images/image-baklava-tablet.jpg",
+            "desktop": "./assets/images/image-baklava-desktop.jpg"
+        },
+        "name": "Pistachio Baklava",
+        "category": "Baklava",
+        "price": 4.00
+     },
+     {
+        "image": {
+            "thumbnail": "./assets/images/image-meringue-thumbnail.jpg",
+            "mobile": "./assets/images/image-meringue-mobile.jpg",
+            "tablet": "./assets/images/image-meringue-tablet.jpg",
+            "desktop": "./assets/images/image-meringue-desktop.jpg"
+        },
+        "name": "Lemon Meringue Pie",
+        "category": "Pie",
+        "price": 5.00
+     },
+     {
+        "image": {
+            "thumbnail": "./assets/images/image-cake-thumbnail.jpg",
+            "mobile": "./assets/images/image-cake-mobile.jpg",
+            "tablet": "./assets/images/image-cake-tablet.jpg",
+            "desktop": "./assets/images/image-cake-desktop.jpg"
+        },
+        "name": "Red Velvet Cake",
+        "category": "Cake",
+        "price": 4.50
+     },
+     {
+        "image": {
+            "thumbnail": "./assets/images/image-brownie-thumbnail.jpg",
+            "mobile": "./assets/images/image-brownie-mobile.jpg",
+            "tablet": "./assets/images/image-brownie-tablet.jpg",
+            "desktop": "./assets/images/image-brownie-desktop.jpg"
+        },
+        "name": "Salted Caramel Brownie",
+        "category": "Brownie",
+        "price": 4.50
+     },
+     {
+        "image": {
+            "thumbnail": "./assets/images/image-panna-cotta-thumbnail.jpg",
+            "mobile": "./assets/images/image-panna-cotta-mobile.jpg",
+            "tablet": "./assets/images/image-panna-cotta-tablet.jpg",
+            "desktop": "./assets/images/image-panna-cotta-desktop.jpg"
+        },
+        "name": "Vanilla Panna Cotta",
+        "category": "Panna Cotta",
+        "price": 6.50
+     }
+]
diff --git a/examples/product-list-cart/src/main.ts b/examples/product-list-cart/src/main.ts
@@ -0,0 +1,20 @@
+import { createContext, type Context } from "@grucloud/bau-ui/context";
+import productListCart from "./productListCart";
+
+import "./style.css";
+
+const context = createContext();
+
+const app = (context: Context) => {
+  const { bau } = context;
+  const { main } = bau.tags;
+
+  const ProductListCart = productListCart(context);
+
+  return function () {
+    return main(ProductListCart());
+  };
+};
+
+const App = app(context);
+document.getElementById("app")?.replaceChildren(App());