feat(components): add basic components

packages/components/build.ts

@@ -0,0 +1,32 @@
+import { type BunPlugin } from "bun";
+import dts from "bun-plugin-dts";
+import styleLoader from "bun-style-loader";
+import * as sass from "sass";
+
+const style: BunPlugin = {
+  name: "Sass Loader",
+  setup(build) {
+    console.log("Running SASS Plugin...");
+    build.onLoad({ filter: /\.scss$/ }, async ({ path }) => {
+      const contents = sass.compile(path);
+      const css = contents.css;
+
+      return {
+        loader: "file",
+        contents: css,
+      };
+    });
+  },
+};
+
+const result = await Bun.build({
+  outdir: "dist",
+  publicPath: "public",
+  format: "esm",
+  plugins: [style],
+  entrypoints: ["./src/components.scss"],
+});
+
+if (!result.success) {
+  throw new AggregateError(result.logs, "Build failed");
+}

packages/components/package.json

@@ -6,8 +6,19 @@
   "scripts": {
     "ci:publish": "bun publish --production --frozen-lockfile"
   },
+  "exports": {
+    ".": "./src/components.scss",
+    "./OffCanvas/": {
+      "import": "./src/OffCanvas/",
+      "require": "./src/OffCanvas/"
+    }
+  },
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "bun-plugin-dts": "^0.2.3",
+    "bun-style-loader": "^0.4.0",
+    "sass": "^1.79.2",
+    "sass-embedded": "^1.79.1"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"

packages/components/src/OffCanvas/style.scss

@@ -0,0 +1,59 @@
+.off-canvas {
+  .off-canvas-content {
+    overflow: hidden;
+    position: fixed;
+    height: 100vh;
+    z-index: 5;
+
+    background-color: var(--prj-bg);
+
+    top: 0;
+    right: 0;
+    left: 100%;
+
+    padding: var(--prj-spacing-3);
+
+    transition: left 0.4s ease-in-out;
+  }
+
+  &.active .off-canvas-content {
+    left: 50%;
+  }
+
+  .off-canvas-backdrop {
+    position: fixed;
+    height: 100vh;
+    z-index: 4;
+
+    background-color: rgba(0, 0, 0);
+    opacity: 0;
+
+    top: 0;
+    right: 0;
+    left: 100%;
+
+    padding: var(--prj-spacing-3);
+
+    // Delay the left transition on remove so it's desn't appear to be sliding or to be not working
+    transition:
+      opacity 0.8s ease,
+      left 0s linear 1s;
+  }
+
+  &.active .off-canvas-backdrop {
+    left: 0%;
+    opacity: 40%;
+    transition:
+      opacity 0.8s ease,
+      left 0s linear;
+  }
+}
+
+button.off-canvas-toggle {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+}

packages/components/src/OffCanvas/template.html

@@ -0,0 +1,51 @@
+<div id="mobile-nav" class="off-canvas">
+  <div class="off-canvas-content" transition:persist>
+    <button class="off-canvas-toggle" data-target="#mobile-nav">
+      <svg
+        width="40px"
+        height="40px"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="#ffffff"
+      >
+        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+        <g
+          id="SVGRepo_tracerCarrier"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></g>
+        <g id="SVGRepo_iconCarrier">
+          <path
+            fill="#cad3f5"
+            d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
+          ></path>
+        </g>
+      </svg>
+    </button>
+
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+
+  <div
+    class="off-canvas-backdrop off-canvas-toggle"
+    data-target="#mobile-nav"
+  ></div>
+</div>
+
+<script>
+  document.addEventListener("astro:page-load", () => {
+    document.querySelectorAll <
+      HTMLElement >
+      ".off-canvas-toggle".forEach((btn) =>
+        btn.addEventListener("click", () => {
+          const { target } = btn.dataset;
+
+          if (!target) return;
+
+          document.querySelector(target)?.classList.toggle("active");
+        }),
+      );
+  });
+</script>

packages/components/tsconfig.json

@@ -23,5 +23,8 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false
+
+    // library configuration
+    // "baseUrl": "./src/"
   }
 }

packages/core/src/_tokens.scss

@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "colors";
 
 /* Using catppuccin for now, make a theme switcher later */
 @use "../themes/catppuccin/catppuccin";
@@ -53,8 +54,8 @@ $msp-colors: (
   "--msp-color-bg-surface-3": #{getColor("surface1")},
 
   "--msp-color-bg-accent": #{getColor("teal")},
-  "--msp-color-bg-primary": #{getColor("teal")},
+  "--msp-color-bg-primary": #{getColor("mauve")},
-  "--msp-color-bg-secondary": #{getColor("mauve")},
+  "--msp-color-bg-secondary": #{getColor("lavender")},
   "--msp-color-bg-danger": #{getColor("red")},
   "--msp-color-bg-disabled": #{color.scale(getColor("text"), $alpha: -10%)},
   "--msp-color-bg-input": #{getColor("text")},

packages/website/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "handlebars": "^4.7.8",
-    "mini-strap-core": "workspace:*"
+    "mini-strap-core": "workspace:*",
+    "mini-strap-components": "workspace:*"
   }
 }

packages/website/src/main.ts

@@ -3,8 +3,12 @@ import render from "./render";
 
 import layout from "./templates/form.html";
 import table from "./templates/table.html";
+import offcanvas from "mini-strap-components/OffCanvas/template";
 
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
+  <aside>
+    ${render(offcanvas, { name: "ale" })}
+  </aside>
   <main class="msp-container">
     <section>
       ${render(layout, { name: "ale" })}

packages/website/vite.config.ts

@@ -1,3 +1,4 @@
+import { resolve } from "path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
@@ -23,4 +24,11 @@ export default defineConfig({
       },
     },
   ],
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, "index.html"),
+      },
+    },
+  },
 });