From d4a11146aa3f46b96f80e30c68fd90b44c4532c7 Mon Sep 17 00:00:00 2001 From: aleidk Date: Fri, 25 Oct 2024 18:40:50 -0300 Subject: [PATCH] feat(components): add basic components --- packages/components/build.ts | 32 ++++++++++ packages/components/package.json | 13 +++- packages/components/src/OffCanvas/style.scss | 59 ++++++++++++++++++ .../components/src/OffCanvas/template.html | 51 +++++++++++++++ packages/components/tsconfig.json | 3 + packages/core/bun.lockb | Bin 0 -> 3139 bytes packages/core/src/_colors.scss | 0 packages/core/src/_tokens.scss | 5 +- packages/website/package.json | 3 +- packages/website/src/main.ts | 4 ++ packages/website/vite.config.ts | 8 +++ 11 files changed, 174 insertions(+), 4 deletions(-) create mode 100644 packages/components/build.ts create mode 100644 packages/components/src/OffCanvas/style.scss create mode 100644 packages/components/src/OffCanvas/template.html create mode 100755 packages/core/bun.lockb create mode 100644 packages/core/src/_colors.scss diff --git a/packages/components/build.ts b/packages/components/build.ts new file mode 100644 index 0000000..2b7ea8c --- /dev/null +++ b/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"); +} diff --git a/packages/components/package.json b/packages/components/package.json index 35b8200..54e0384 100644 --- a/packages/components/package.json +++ b/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" diff --git a/packages/components/src/OffCanvas/style.scss b/packages/components/src/OffCanvas/style.scss new file mode 100644 index 0000000..75abef1 --- /dev/null +++ b/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; +} diff --git a/packages/components/src/OffCanvas/template.html b/packages/components/src/OffCanvas/template.html new file mode 100644 index 0000000..7d9ee35 --- /dev/null +++ b/packages/components/src/OffCanvas/template.html @@ -0,0 +1,51 @@ +
+
+ + +
+ +
+
+ +
+
+ + diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 238655f..2e82a45 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -23,5 +23,8 @@ "noUnusedLocals": false, "noUnusedParameters": false, "noPropertyAccessFromIndexSignature": false + + // library configuration + // "baseUrl": "./src/" } } diff --git a/packages/core/bun.lockb b/packages/core/bun.lockb new file mode 100755 index 0000000000000000000000000000000000000000..0c403870d4fff1853d6e2b0cf4873baced3071b7 GIT binary patch literal 3139 zcmd6p4Nw$i7{~YUP`ru{LmkD2L(!Rp+xvj~5UvA1FpL=ybI3>-&U5crIqr_#J-#$O z8i>mJ7;?$BTA{&643t}LsdXF3l1&hg?Q+IoJVC?Z-(et zkv?QpYJ$M}CWwy#eK2^a58;2G`rjaaKInbHPlp5f(HMTd9$q>c^k{~W7UeJ+!}@&C z8-?eO2O+*bS_X;-1Tjv~q8!i|v5+B;#^QyBH21F?3>ZY9|I&abA%?hOv~&rRQl!07 zGeO@tWAi{s%kNd&9@Tu^bNX=h_LKVpzisgSc+VFzT8qdb}sE`2#LSgwjy%6 zWL)T!gxjv(Cq-OwJ*98C+q|Cc=f9gY(4P_AnY~Ciw{H1j?bKCe8$B)IuH5R{y}Ese z)Wy2?U7^2z{>*;kxm!O}dzaK@RwpKwb-e%m3nDJ6H#TYW@gtYI=*&2GdqKo}pZ3b+ z*5%Dzar#YEmbpB*_B>brq3$%h(bULgg{7#DN~(^qrivOmdYoySZ+>oCM6HM`#Zd6l zIm^mpFYV$M$lgrJ-C7r#>IqKGiu(CzY)4$rjXbVVzo$9u;}JmgNt3O;MfD=CcwI}o&wRRNVA1~gE2ma!B4!%vv&XNIR0K72ABaCyQF-jE zEonDXFG$MLGxORWnKJq9twA|A4xPyG_{VYr)>_W74}Eo2LBi`G(hX{7Xj!eY_~F_J4#~$-5m&MzR>pp{g=_aqyLCO z(5@II1Aku;2k9{jd9T1Q37ewK_?$+U?l!<%>4tMs|Mji#zK-|lKuLy{RFNuzz?}i! z>HU1{W{zSxg2253-urzdYEn&V^aO#s1-$$FNH!QqEvZ%!4Uiw|D{!9xcQh(etsxD# z)4-hr+|iO69U1)(nz=wh<`v%X*zlW*rGg} z$69z|+wI^6=GDqz)R3WT0o}WeS0Br58$MXn{9x()ZJ}aC!oNK7N;6zaX zM8S%oDOE=!n%l94w$S%XN*o3l@le6911*BxJB@r6)cLG}UvC<|B>YqkP2XMgBU1o? RkpVnhNAetgef$r9{shWyN1gxx literal 0 HcmV?d00001 diff --git a/packages/core/src/_colors.scss b/packages/core/src/_colors.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/core/src/_tokens.scss b/packages/core/src/_tokens.scss index b4b9436..3d41eaa 100644 --- a/packages/core/src/_tokens.scss +++ b/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-secondary": #{getColor("mauve")}, + "--msp-color-bg-primary": #{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")}, diff --git a/packages/website/package.json b/packages/website/package.json index 1facccc..1d7fb06 100644 --- a/packages/website/package.json +++ b/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:*" } } diff --git a/packages/website/src/main.ts b/packages/website/src/main.ts index ed88f31..ea1b1a8 100644 --- a/packages/website/src/main.ts +++ b/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("#app")!.innerHTML = ` +
${render(layout, { name: "ale" })} diff --git a/packages/website/vite.config.ts b/packages/website/vite.config.ts index f38a931..0af060c 100644 --- a/packages/website/vite.config.ts +++ b/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"), + }, + }, + }, });