From 0433a3be301ebffe2b476ab75ff520eb9002f3fa Mon Sep 17 00:00:00 2001 From: mewdev Date: Sat, 23 Nov 2024 16:45:22 +0100 Subject: [PATCH 1/3] wip: blobs background component first sketch, introduced svg folder, blobs testing within global layout --- apps/web/app/[lang]/layout.tsx | 4 ++++ packages/design-system/package.json | 1 + packages/design-system/src/svg/blueBlob.tsx | 19 +++++++++++++++++++ packages/design-system/src/svg/index.ts | 2 ++ packages/design-system/src/svg/redBlob.tsx | 19 +++++++++++++++++++ packages/design-system/src/ui/blobs/blobs.tsx | 16 ++++++++++++++++ packages/design-system/src/ui/blobs/index.ts | 1 + packages/design-system/src/ui/index.ts | 1 + 8 files changed, 63 insertions(+) create mode 100644 packages/design-system/src/svg/blueBlob.tsx create mode 100644 packages/design-system/src/svg/index.ts create mode 100644 packages/design-system/src/svg/redBlob.tsx create mode 100644 packages/design-system/src/ui/blobs/blobs.tsx create mode 100644 packages/design-system/src/ui/blobs/index.ts diff --git a/apps/web/app/[lang]/layout.tsx b/apps/web/app/[lang]/layout.tsx index 356aa6f..29e00e3 100644 --- a/apps/web/app/[lang]/layout.tsx +++ b/apps/web/app/[lang]/layout.tsx @@ -1,8 +1,11 @@ +"use client"; + import Link from "next/link"; import "../globals.css"; import "@repo/design-system/styles"; import "@repo/design-system/themes/theme-default"; +import { Blobs } from "@repo/design-system/ui"; export default function RootLayout({ params: { lang }, @@ -22,6 +25,7 @@ export default function RootLayout({
+

Kalkulacka.1

diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 8e046c4..02e035a 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -4,6 +4,7 @@ "private": true, "exports": { "./ui": "./src/ui/index.ts", + "./svg": "./src/svg/index.ts", "./themes/*": "./src/themes/*.css", "./styles": "./dist/index.css", "./fonts": "./dist/fonts", diff --git a/packages/design-system/src/svg/blueBlob.tsx b/packages/design-system/src/svg/blueBlob.tsx new file mode 100644 index 0000000..b24fc44 --- /dev/null +++ b/packages/design-system/src/svg/blueBlob.tsx @@ -0,0 +1,19 @@ +export function BlueBlob( + props: React.JSX.IntrinsicAttributes & React.SVGProps, +) { + return ( + + + + ); +} diff --git a/packages/design-system/src/svg/index.ts b/packages/design-system/src/svg/index.ts new file mode 100644 index 0000000..2187f1c --- /dev/null +++ b/packages/design-system/src/svg/index.ts @@ -0,0 +1,2 @@ +export * from "./BlueBlob"; +export * from "./RedBlob"; diff --git a/packages/design-system/src/svg/redBlob.tsx b/packages/design-system/src/svg/redBlob.tsx new file mode 100644 index 0000000..751cab6 --- /dev/null +++ b/packages/design-system/src/svg/redBlob.tsx @@ -0,0 +1,19 @@ +export function RedBlob( + props: React.JSX.IntrinsicAttributes & React.SVGProps, +) { + return ( + + + + ); +} diff --git a/packages/design-system/src/ui/blobs/blobs.tsx b/packages/design-system/src/ui/blobs/blobs.tsx new file mode 100644 index 0000000..9b15936 --- /dev/null +++ b/packages/design-system/src/ui/blobs/blobs.tsx @@ -0,0 +1,16 @@ +import { RedBlob, BlueBlob } from "@repo/design-system/svg"; + +const Blobs = () => { + return ( + // background div - needs top placement +
+ {/* blobs div */} +
+ + +
+
+ ); +}; + +export { Blobs }; diff --git a/packages/design-system/src/ui/blobs/index.ts b/packages/design-system/src/ui/blobs/index.ts new file mode 100644 index 0000000..4406f3a --- /dev/null +++ b/packages/design-system/src/ui/blobs/index.ts @@ -0,0 +1 @@ +export * from "./blobs"; diff --git a/packages/design-system/src/ui/index.ts b/packages/design-system/src/ui/index.ts index 53156a5..c0f6add 100644 --- a/packages/design-system/src/ui/index.ts +++ b/packages/design-system/src/ui/index.ts @@ -3,3 +3,4 @@ export * from "./button/index"; export * from "./card/index"; export * from "./progress/index"; export * from "./question/index"; +export * from "./blobs"; From 1b76872ab17a1cff56f7f62c48f3afc14c6ce655 Mon Sep 17 00:00:00 2001 From: mewdev Date: Tue, 26 Nov 2024 16:08:37 +0100 Subject: [PATCH 2/3] fix: fixed svg fillRule and clipRule props and typos in imports --- packages/design-system/src/svg/blueBlob.tsx | 4 ++-- packages/design-system/src/svg/index.ts | 4 ++-- packages/design-system/src/svg/redBlob.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/design-system/src/svg/blueBlob.tsx b/packages/design-system/src/svg/blueBlob.tsx index b24fc44..e08cadf 100644 --- a/packages/design-system/src/svg/blueBlob.tsx +++ b/packages/design-system/src/svg/blueBlob.tsx @@ -9,8 +9,8 @@ export function BlueBlob( {...props} > diff --git a/packages/design-system/src/svg/index.ts b/packages/design-system/src/svg/index.ts index 2187f1c..a0b75ed 100644 --- a/packages/design-system/src/svg/index.ts +++ b/packages/design-system/src/svg/index.ts @@ -1,2 +1,2 @@ -export * from "./BlueBlob"; -export * from "./RedBlob"; +export * from "./blueBlob"; +export * from "./redBlob"; diff --git a/packages/design-system/src/svg/redBlob.tsx b/packages/design-system/src/svg/redBlob.tsx index 751cab6..51e2b32 100644 --- a/packages/design-system/src/svg/redBlob.tsx +++ b/packages/design-system/src/svg/redBlob.tsx @@ -9,8 +9,8 @@ export function RedBlob( {...props} > From 1a6780e1d9e43b89f54d15527de5164ba06b3403 Mon Sep 17 00:00:00 2001 From: martinwenisch Date: Tue, 3 Dec 2024 11:13:08 +0100 Subject: [PATCH 3/3] lint fix --- packages/design-system/src/ui/blobs/blobs.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/design-system/src/ui/blobs/blobs.tsx b/packages/design-system/src/ui/blobs/blobs.tsx index 9b15936..d846c1b 100644 --- a/packages/design-system/src/ui/blobs/blobs.tsx +++ b/packages/design-system/src/ui/blobs/blobs.tsx @@ -3,11 +3,11 @@ import { RedBlob, BlueBlob } from "@repo/design-system/svg"; const Blobs = () => { return ( // background div - needs top placement -
+
{/* blobs div */} -
- - +
+ +
);