From c3f8c134c001dea8d74fbe1a4ce7fcc3eaa0b581 Mon Sep 17 00:00:00 2001 From: Ananya Rana Date: Mon, 24 Mar 2025 14:30:01 +0530 Subject: [PATCH 1/8] identity card --- infrastructure/eid-wallet/.storybook/main.ts | 27 +++++---- .../eid-wallet/.storybook/preview.ts | 21 +++---- .../ui/IdentityCard/IdentityCard.stories.ts | 15 +++++ .../lib/ui/IdentityCard/IdentityCard.svelte | 59 +++++++++++++++++++ .../eid-wallet/src/routes/+page.svelte | 6 +- .../eid-wallet/static/images/Eye.svg | 7 +++ .../static/images/GreenCheckmark.svg | 4 ++ 7 files changed, 115 insertions(+), 24 deletions(-) create mode 100644 infrastructure/eid-wallet/src/lib/ui/IdentityCard/IdentityCard.stories.ts create mode 100644 infrastructure/eid-wallet/src/lib/ui/IdentityCard/IdentityCard.svelte create mode 100644 infrastructure/eid-wallet/static/images/Eye.svg create mode 100644 infrastructure/eid-wallet/static/images/GreenCheckmark.svg diff --git a/infrastructure/eid-wallet/.storybook/main.ts b/infrastructure/eid-wallet/.storybook/main.ts index 615ab192..ede014ae 100644 --- a/infrastructure/eid-wallet/.storybook/main.ts +++ b/infrastructure/eid-wallet/.storybook/main.ts @@ -7,20 +7,21 @@ import { join, dirname } from "path"; * It is needed in projects that use Yarn PnP or are set up within a monorepo. */ function getAbsolutePath(value: string): any { - return dirname(require.resolve(join(value, "package.json"))); + return dirname(require.resolve(join(value, "package.json"))); } const config: StorybookConfig = { - // add back support for .svelte files when addon csf works - stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"], - addons: [ - getAbsolutePath("@storybook/addon-essentials"), - getAbsolutePath("@storybook/addon-svelte-csf"), - getAbsolutePath("@chromatic-com/storybook"), - getAbsolutePath("@storybook/experimental-addon-test"), - ], - framework: { - name: getAbsolutePath("@storybook/sveltekit"), - options: {}, - }, + // add back support for .svelte files when addon csf works + stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"], + addons: [ + getAbsolutePath("@storybook/addon-essentials"), + getAbsolutePath("@storybook/addon-svelte-csf"), + getAbsolutePath("@chromatic-com/storybook"), + getAbsolutePath("@storybook/experimental-addon-test"), + ], + framework: { + name: getAbsolutePath("@storybook/sveltekit"), + options: {}, + }, + staticDirs: ["../static"], }; export default config; diff --git a/infrastructure/eid-wallet/.storybook/preview.ts b/infrastructure/eid-wallet/.storybook/preview.ts index c4d1be9c..b2cb78f5 100644 --- a/infrastructure/eid-wallet/.storybook/preview.ts +++ b/infrastructure/eid-wallet/.storybook/preview.ts @@ -1,14 +1,15 @@ -import type { Preview } from '@storybook/svelte' +import type { Preview } from "@storybook/svelte"; +import "../src/app.css"; const preview: Preview = { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - }, + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, }; -export default preview; \ No newline at end of file +export default preview; diff --git a/infrastructure/eid-wallet/src/lib/ui/IdentityCard/IdentityCard.stories.ts b/infrastructure/eid-wallet/src/lib/ui/IdentityCard/IdentityCard.stories.ts new file mode 100644 index 00000000..b7e84d25 --- /dev/null +++ b/infrastructure/eid-wallet/src/lib/ui/IdentityCard/IdentityCard.stories.ts @@ -0,0 +1,15 @@ +import IdentityCard from "./IdentityCard.svelte"; + +export default { + title: "UI/IdentityCard", + component: IdentityCard, + tags: ["autodocs"], + render: (args: any) => ({ + Component: IdentityCard, + props: args, + }), +}; + +export const Primary = { + args: {}, +}; diff --git a/infrastructure/eid-wallet/src/lib/ui/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/ui/IdentityCard/IdentityCard.svelte new file mode 100644 index 00000000..61e041f2 --- /dev/null +++ b/infrastructure/eid-wallet/src/lib/ui/IdentityCard/IdentityCard.svelte @@ -0,0 +1,59 @@ + + +
+
+
+
+
+
+
+ +
+
+

Your W3ID

+
+

@caa0f630-2413-5ace-aa2c-4628ce93e497

+ +
+
+
+
+ +
+
+
+
+
+
+
+ + +
+
+
+
Name
+
Ananya Rana
+
+
+
Name
+
Ananya Rana
+
+
+
Name
+
Ananya Rana
+
+
+
Name
+
Ananya Rana
+
+
+
+
\ No newline at end of file diff --git a/infrastructure/eid-wallet/src/routes/+page.svelte b/infrastructure/eid-wallet/src/routes/+page.svelte index 6c3dafa5..eee9d3e7 100644 --- a/infrastructure/eid-wallet/src/routes/+page.svelte +++ b/infrastructure/eid-wallet/src/routes/+page.svelte @@ -1,4 +1,6 @@ @@ -13,4 +15,6 @@

Archivo font Everyone

-
Secondary Background
\ No newline at end of file +
Secondary Background
+ + \ No newline at end of file diff --git a/infrastructure/eid-wallet/static/images/Eye.svg b/infrastructure/eid-wallet/static/images/Eye.svg new file mode 100644 index 00000000..e396dc1b --- /dev/null +++ b/infrastructure/eid-wallet/static/images/Eye.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/infrastructure/eid-wallet/static/images/GreenCheckmark.svg b/infrastructure/eid-wallet/static/images/GreenCheckmark.svg new file mode 100644 index 00000000..fd5a919a --- /dev/null +++ b/infrastructure/eid-wallet/static/images/GreenCheckmark.svg @@ -0,0 +1,4 @@ + + + + From a4ebe16fd00580823cdc69adae131acf5e334281 Mon Sep 17 00:00:00 2001 From: Ananya Rana Date: Tue, 25 Mar 2025 21:49:37 +0530 Subject: [PATCH 2/8] identity card --- .../lib/fragments/IdentityCard/IdentityCard.svelte | 14 +++++++++----- infrastructure/eid-wallet/static/images/Eye.svg | 7 ------- .../eid-wallet/static/images/GreenCheckmark.svg | 4 ---- 3 files changed, 9 insertions(+), 16 deletions(-) delete mode 100644 infrastructure/eid-wallet/static/images/Eye.svg delete mode 100644 infrastructure/eid-wallet/static/images/GreenCheckmark.svg diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte index c99ba31d..c9646edc 100644 --- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte +++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte @@ -1,11 +1,14 @@ @@ -17,7 +20,7 @@
- +

Your W3ID

@@ -36,8 +39,9 @@
- - + + +
diff --git a/infrastructure/eid-wallet/static/images/Eye.svg b/infrastructure/eid-wallet/static/images/Eye.svg deleted file mode 100644 index e396dc1b..00000000 --- a/infrastructure/eid-wallet/static/images/Eye.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/infrastructure/eid-wallet/static/images/GreenCheckmark.svg b/infrastructure/eid-wallet/static/images/GreenCheckmark.svg deleted file mode 100644 index fd5a919a..00000000 --- a/infrastructure/eid-wallet/static/images/GreenCheckmark.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - From 47a47686aa830af593e48e6390a203409bed7bfa Mon Sep 17 00:00:00 2001 From: Ananya Rana Date: Thu, 27 Mar 2025 01:38:04 +0530 Subject: [PATCH 3/8] lint fixski --- .../IdentityCard/IdentityCard.stories.ts | 14 ++++- .../IdentityCard/IdentityCard.svelte | 59 +++++++++++-------- 2 files changed, 49 insertions(+), 24 deletions(-) diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.stories.ts b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.stories.ts index e10d2174..e7c221bb 100644 --- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.stories.ts +++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.stories.ts @@ -1,10 +1,22 @@ import IdentityCard from "./IdentityCard.svelte"; +interface userData { + [fieldName: string]: string; +} + export default { title: "UI/IdentityCard", component: IdentityCard, tags: ["autodocs"], - render: (args: any) => ({ + render: (args: { + variant: string; + userId: string; + shareBtn: () => void; + viewBtn: () => void; + userData: userData; + usedStorage: number; + totalStorage: number; + }) => ({ Component: IdentityCard, props: args, }), diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte index 0106dafd..f91ccffd 100644 --- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte +++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte @@ -1,30 +1,43 @@
From bc9931ee3017a09c8709b0ceba8c73b606e6412d Mon Sep 17 00:00:00 2001 From: Ananya Rana Date: Thu, 27 Mar 2025 01:41:20 +0530 Subject: [PATCH 4/8] lint fixski --- .../fragments/IdentityCard/IdentityCard.svelte | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte index f91ccffd..c4a760df 100644 --- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte +++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte @@ -26,8 +26,8 @@ let { viewBtn, shareBtn, userData, - totalStorage, - usedStorage, + totalStorage = 0, + usedStorage = 0, ...restProps }: IIdentityCard = $props(); const state = $state({ @@ -81,12 +81,14 @@ $effect(() => {
{:else if variant === "ePassport"}
- {#each Object.entries(userData) as [fieldName, value] } -
-
{fieldName}
-
{value}
-
- {/each} + {#if userData} + {#each Object.entries(userData) as [fieldName, value] } +
+
{fieldName}
+
{value}
+
+ {/each} + {/if}
{:else if variant === "eVault"}
From 40ab0a131f393c825ec2c17448338660c82ce0a1 Mon Sep 17 00:00:00 2001 From: Ananya Rana Date: Thu, 27 Mar 2025 01:44:03 +0530 Subject: [PATCH 5/8] lint fixski --- .../src/lib/fragments/IdentityCard/IdentityCard.svelte | 4 ++-- infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte index c4a760df..a5fadbac 100644 --- a/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte +++ b/infrastructure/eid-wallet/src/lib/fragments/IdentityCard/IdentityCard.svelte @@ -1,11 +1,11 @@