feat: add button action component

infrastructure/eid-wallet/.storybook/main.ts

@@ -1,26 +1,18 @@
-import type { StorybookConfig } from "@storybook/sveltekit";
+import type { StorybookConfig } from '@storybook/sveltekit'
 
-import { join, dirname } from "path";
-
-/**
- * This function is used to resolve the absolute path of a package.
- * 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")));
-}
 const config: StorybookConfig = {
- // add back support for .svelte files when addon csf works
- stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts)'],
  addons: [
+
  getAbsolutePath("@storybook/addon-essentials"),
  getAbsolutePath("@chromatic-com/storybook"),
  getAbsolutePath("@storybook/experimental-addon-test"),
  ],
  framework: {
- name: getAbsolutePath("@storybook/sveltekit"),
+ name: '@storybook/sveltekit',
  options: {},
  },
+
  staticDirs: ["../static"],
 };
 export default config;

infrastructure/eid-wallet/.storybook/preview.ts

@@ -12,4 +12,4 @@ const preview: Preview = {
 	},
 };
 
-export default preview;
+export default preview;

infrastructure/eid-wallet/package.json

@@ -26,12 +26,13 @@
  "devDependencies": {
  "@chromatic-com/storybook": "^3",
  "@storybook/addon-essentials": "^8.6.7",
- "@storybook/addon-svelte-csf": "^5.0.0-next.28",
+ "@storybook/addon-interactions": "^8.6.7",
  "@storybook/blocks": "^8.6.7",
  "@storybook/experimental-addon-test": "^8.6.7",
  "@storybook/svelte": "^8.6.7",
  "@storybook/sveltekit": "^8.6.7",
  "@storybook/test": "^8.6.7",
+ "@storybook/testing-library": "^0.2.2",
  "@sveltejs/adapter-static": "^3.0.6",
  "@sveltejs/kit": "^2.9.0",
  "@sveltejs/vite-plugin-svelte": "^5.0.0",

infrastructure/eid-wallet/src/app.css

@@ -7,7 +7,7 @@
 @font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
- font-weight: normal;
+ font-weight: 100 900;
  font-style: normal;
 }
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ButtonAction from './ButtonAction.svelte'
+import { ButtonText } from './ButtonSnippets.svelte'
+
+const meta: Meta<ButtonAction> = {
+ title: 'Components/ButtonAction',
+ component: ButtonAction,
+ args: {
+ variant: 'solid',
+ isLoading: false,
+ blockingClick: false,
+ children: 'Click Me', // Ensure this is a function returning text
+ },
+ argTypes: {
+ variant: {
+ control: {
+ type: 'select',
+ options: ['solid', 'soft', 'danger', 'danger-soft'],
+ },
+ },
+ isLoading: { control: 'boolean' },
+ blockingClick: { control: 'boolean' },
+ cb: { action: 'clicked' },
+ },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+ args: { variant: 'solid', children: ButtonText },
+}
+
+export const Soft: Story = {
+ args: { variant: 'soft', children: ButtonText },
+}
+
+export const Danger: Story = {
+ args: { variant: 'danger', children: ButtonText },
+}
+
+export const DangerSoft: Story = {
+ args: { variant: 'danger-soft', children: ButtonText },
+}
+
+export const Loading: Story = {
+ args: { isLoading: true, children: ButtonText },
+}
+
+export const BlockingClick: Story = {
+ args: {
+ blockingClick: true,
+ children: ButtonText,
+ cb: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 2000))
+ },
+ },
+}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" generics="T">
+ import { cn } from '$lib/utils'
+ import type { HTMLButtonAttributes } from 'svelte/elements'
+
+ interface IButtonProps extends HTMLButtonAttributes {
+ variant?: 'solid' | 'soft' | 'danger' | 'danger-soft'
+ isLoading?: boolean
+ cb?: () => Promise<void>
+ blockingClick?: boolean
+ type?: 'button' | 'submit' | 'reset'
+ }
+
+ let {
+ variant = 'solid',
+ isLoading,
+ cb,
+ blockingClick,
+ type = 'button',
+ children = undefined,
+ ...restProps
+ }: IButtonProps = $props()
+
+ let isSubmitting = $state(false)
+ let disabled = $derived(restProps.disabled || isLoading || isSubmitting)
+
+ const handleClick = async () => {
+ if (typeof cb !== 'function') return
+
+ if (blockingClick) isSubmitting = true
+ try {
+ await cb()
+ } catch (error) {
+ console.error('Error in button callback:', error)
+ } finally {
+ isSubmitting = false
+ }
+ }
+
+ const variantClasses = {
+ solid: { background: 'bg-primary-900', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-900' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ const disabledVariantClasses = {
+ solid: { background: 'bg-primary-500', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-500' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ let classes = $derived({
+ common:
+ 'cursor-pointer flex items-center justify-center px-8 py-2.5 rounded-full text-xl font-semibold h-[56px] duration-100',
+ background: disabled
+ ? disabledVariantClasses[variant].background ||
+ variantClasses[variant].background
+ : variantClasses[variant].background,
+ text: disabled
+ ? disabledVariantClasses[variant].text || variantClasses[variant].text
+ : variantClasses[variant].text,
+ disabled: 'cursor-not-allowed',
+ })
+</script>
+
+<button
+ {...restProps}
+ class={cn(
+ [
+ classes.common,
+ classes.background,
+ classes.text,
+ disabled && classes.disabled,
+ restProps.class,
+ ].join(' ')
+ )}
+ {disabled}
+ onclick={handleClick}
+ {type}
+>
+ <div class="relative flex items-center justify-center">
+ {#if isLoading || isSubmitting}
+ <div class="loading loading-spinner loading-md absolute -left-4"></div>
+ {/if}
+ <div
+ class="flex items-center justify-center duration-100"
+ class:translate-x-4={isLoading || isSubmitting}
+ >
+ {@render children?.()}
+ </div>
+ </div>
+</button>
+
+<!-- 
+@component
+export default ButtonAction
+@description
+This component is a button with a loading spinner that can be used to indicate that an action is being performed.
+
+@props
+- variant: The variant of the button. Default is `solid`.
+- isLoading: A boolean to indicate if the button is in a loading state.
+- cb: A callback function that will be called when the button is clicked.
+- blockingClick: A boolean to indicate if the button should block the click event while the callback function is being executed.
+- icon: A slot for an icon to be displayed inside the button.
+- ...restProps: Any other props that can be passed to a button element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+</script>
+
+<Button.Action variant="solid" cb={() => console.log('clicked')}>
+ Click me
+</Button.Action>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/ButtonSnippets.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+ export { ButtonText }
+</script>
+
+{#snippet ButtonText()}
+ Button
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -0,0 +1,4 @@
+import Action from './ButtonAction.svelte'
+import Icon from './ButtonIcon.svelte'
+
+export { Action, Icon }

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+
  import { Drawer } from "$lib/ui";
  let isPaneOpen = $state(false);
 </script>
@@ -7,10 +8,11 @@
 
 
 
+
 <Drawer bind:isPaneOpen isCancelRequired={true}>
  <div class="bg-red-300">aslkfamfoasdiownednciaosndoasfnas </div>
  <div>asfnladmfpamsfl asd</div>
  <div>aslkfasf;,;</div>
  <button class="btn btn-soft" >Open</button>
  <button class="btn btn-soft">Open</button>
-</Drawer>
+</Drawer>

infrastructure/eid-wallet/.storybook/main.ts

@@ -1,26 +1,18 @@
-import type { StorybookConfig } from "@storybook/sveltekit";
+import type { StorybookConfig } from '@storybook/sveltekit'
 
-import { join, dirname } from "path";
-
-/**
- * This function is used to resolve the absolute path of a package.
- * 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")));
-}
 const config: StorybookConfig = {
- // add back support for .svelte files when addon csf works
- stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts)'],
  addons: [
+
  getAbsolutePath("@storybook/addon-essentials"),
  getAbsolutePath("@chromatic-com/storybook"),
  getAbsolutePath("@storybook/experimental-addon-test"),
  ],
  framework: {
- name: getAbsolutePath("@storybook/sveltekit"),
+ name: '@storybook/sveltekit',
  options: {},
  },
+
  staticDirs: ["../static"],
 };
 export default config;

infrastructure/eid-wallet/.storybook/preview.ts

@@ -12,4 +12,4 @@ const preview: Preview = {
 	},
 };
 
-export default preview;
+export default preview;

infrastructure/eid-wallet/package.json

@@ -26,12 +26,13 @@
  "devDependencies": {
  "@chromatic-com/storybook": "^3",
  "@storybook/addon-essentials": "^8.6.7",
- "@storybook/addon-svelte-csf": "^5.0.0-next.28",
+ "@storybook/addon-interactions": "^8.6.7",
  "@storybook/blocks": "^8.6.7",
  "@storybook/experimental-addon-test": "^8.6.7",
  "@storybook/svelte": "^8.6.7",
  "@storybook/sveltekit": "^8.6.7",
  "@storybook/test": "^8.6.7",
+ "@storybook/testing-library": "^0.2.2",
  "@sveltejs/adapter-static": "^3.0.6",
  "@sveltejs/kit": "^2.9.0",
  "@sveltejs/vite-plugin-svelte": "^5.0.0",

infrastructure/eid-wallet/src/app.css

@@ -7,7 +7,7 @@
 @font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
- font-weight: normal;
+ font-weight: 100 900;
  font-style: normal;
 }
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ButtonAction from './ButtonAction.svelte'
+import { ButtonText } from './ButtonSnippets.svelte'
+
+const meta: Meta<ButtonAction> = {
+ title: 'Components/ButtonAction',
+ component: ButtonAction,
+ args: {
+ variant: 'solid',
+ isLoading: false,
+ blockingClick: false,
+ children: 'Click Me', // Ensure this is a function returning text
+ },
+ argTypes: {
+ variant: {
+ control: {
+ type: 'select',
+ options: ['solid', 'soft', 'danger', 'danger-soft'],
+ },
+ },
+ isLoading: { control: 'boolean' },
+ blockingClick: { control: 'boolean' },
+ cb: { action: 'clicked' },
+ },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+ args: { variant: 'solid', children: ButtonText },
+}
+
+export const Soft: Story = {
+ args: { variant: 'soft', children: ButtonText },
+}
+
+export const Danger: Story = {
+ args: { variant: 'danger', children: ButtonText },
+}
+
+export const DangerSoft: Story = {
+ args: { variant: 'danger-soft', children: ButtonText },
+}
+
+export const Loading: Story = {
+ args: { isLoading: true, children: ButtonText },
+}
+
+export const BlockingClick: Story = {
+ args: {
+ blockingClick: true,
+ children: ButtonText,
+ cb: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 2000))
+ },
+ },
+}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" generics="T">
+ import { cn } from '$lib/utils'
+ import type { HTMLButtonAttributes } from 'svelte/elements'
+
+ interface IButtonProps extends HTMLButtonAttributes {
+ variant?: 'solid' | 'soft' | 'danger' | 'danger-soft'
+ isLoading?: boolean
+ cb?: () => Promise<void>
+ blockingClick?: boolean
+ type?: 'button' | 'submit' | 'reset'
+ }
+
+ let {
+ variant = 'solid',
+ isLoading,
+ cb,
+ blockingClick,
+ type = 'button',
+ children = undefined,
+ ...restProps
+ }: IButtonProps = $props()
+
+ let isSubmitting = $state(false)
+ let disabled = $derived(restProps.disabled || isLoading || isSubmitting)
+
+ const handleClick = async () => {
+ if (typeof cb !== 'function') return
+
+ if (blockingClick) isSubmitting = true
+ try {
+ await cb()
+ } catch (error) {
+ console.error('Error in button callback:', error)
+ } finally {
+ isSubmitting = false
+ }
+ }
+
+ const variantClasses = {
+ solid: { background: 'bg-primary-900', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-900' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ const disabledVariantClasses = {
+ solid: { background: 'bg-primary-500', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-500' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ let classes = $derived({
+ common:
+ 'cursor-pointer flex items-center justify-center px-8 py-2.5 rounded-full text-xl font-semibold h-[56px] duration-100',
+ background: disabled
+ ? disabledVariantClasses[variant].background ||
+ variantClasses[variant].background
+ : variantClasses[variant].background,
+ text: disabled
+ ? disabledVariantClasses[variant].text || variantClasses[variant].text
+ : variantClasses[variant].text,
+ disabled: 'cursor-not-allowed',
+ })
+</script>
+
+<button
+ {...restProps}
+ class={cn(
+ [
+ classes.common,
+ classes.background,
+ classes.text,
+ disabled && classes.disabled,
+ restProps.class,
+ ].join(' ')
+ )}
+ {disabled}
+ onclick={handleClick}
+ {type}
+>
+ <div class="relative flex items-center justify-center">
+ {#if isLoading || isSubmitting}
+ <div class="loading loading-spinner loading-md absolute -left-4"></div>
+ {/if}
+ <div
+ class="flex items-center justify-center duration-100"
+ class:translate-x-4={isLoading || isSubmitting}
+ >
+ {@render children?.()}
+ </div>
+ </div>
+</button>
+
+<!-- 
+@component
+export default ButtonAction
+@description
+This component is a button with a loading spinner that can be used to indicate that an action is being performed.
+
+@props
+- variant: The variant of the button. Default is `solid`.
+- isLoading: A boolean to indicate if the button is in a loading state.
+- cb: A callback function that will be called when the button is clicked.
+- blockingClick: A boolean to indicate if the button should block the click event while the callback function is being executed.
+- icon: A slot for an icon to be displayed inside the button.
+- ...restProps: Any other props that can be passed to a button element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+</script>
+
+<Button.Action variant="solid" cb={() => console.log('clicked')}>
+ Click me
+</Button.Action>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/ButtonSnippets.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+ export { ButtonText }
+</script>
+
+{#snippet ButtonText()}
+ Button
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -0,0 +1,4 @@
+import Action from './ButtonAction.svelte'
+import Icon from './ButtonIcon.svelte'
+
+export { Action, Icon }

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+
  import { Drawer } from "$lib/ui";
  let isPaneOpen = $state(false);
 </script>
@@ -7,10 +8,11 @@
 
 
 
+
 <Drawer bind:isPaneOpen isCancelRequired={true}>
  <div class="bg-red-300">aslkfamfoasdiownednciaosndoasfnas </div>
  <div>asfnladmfpamsfl asd</div>
  <div>aslkfasf;,;</div>
  <button class="btn btn-soft" >Open</button>
  <button class="btn btn-soft">Open</button>
-</Drawer>
+</Drawer>

infrastructure/eid-wallet/.storybook/main.ts

@@ -1,26 +1,18 @@
-import type { StorybookConfig } from "@storybook/sveltekit";
+import type { StorybookConfig } from '@storybook/sveltekit'
 
-import { join, dirname } from "path";
-
-/**
- * This function is used to resolve the absolute path of a package.
- * 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")));
-}
 const config: StorybookConfig = {
- // add back support for .svelte files when addon csf works
- stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts)'],
  addons: [
+
  getAbsolutePath("@storybook/addon-essentials"),
  getAbsolutePath("@chromatic-com/storybook"),
  getAbsolutePath("@storybook/experimental-addon-test"),
  ],
  framework: {
- name: getAbsolutePath("@storybook/sveltekit"),
+ name: '@storybook/sveltekit',
  options: {},
  },
+
  staticDirs: ["../static"],
 };
 export default config;

infrastructure/eid-wallet/.storybook/preview.ts

@@ -12,4 +12,4 @@ const preview: Preview = {
 	},
 };
 
-export default preview;
+export default preview;

infrastructure/eid-wallet/package.json

@@ -26,12 +26,13 @@
  "devDependencies": {
  "@chromatic-com/storybook": "^3",
  "@storybook/addon-essentials": "^8.6.7",
- "@storybook/addon-svelte-csf": "^5.0.0-next.28",
+ "@storybook/addon-interactions": "^8.6.7",
  "@storybook/blocks": "^8.6.7",
  "@storybook/experimental-addon-test": "^8.6.7",
  "@storybook/svelte": "^8.6.7",
  "@storybook/sveltekit": "^8.6.7",
  "@storybook/test": "^8.6.7",
+ "@storybook/testing-library": "^0.2.2",
  "@sveltejs/adapter-static": "^3.0.6",
  "@sveltejs/kit": "^2.9.0",
  "@sveltejs/vite-plugin-svelte": "^5.0.0",

infrastructure/eid-wallet/src/app.css

@@ -7,7 +7,7 @@
 @font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
- font-weight: normal;
+ font-weight: 100 900;
  font-style: normal;
 }
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ButtonAction from './ButtonAction.svelte'
+import { ButtonText } from './ButtonSnippets.svelte'
+
+const meta: Meta<ButtonAction> = {
+ title: 'Components/ButtonAction',
+ component: ButtonAction,
+ args: {
+ variant: 'solid',
+ isLoading: false,
+ blockingClick: false,
+ children: 'Click Me', // Ensure this is a function returning text
+ },
+ argTypes: {
+ variant: {
+ control: {
+ type: 'select',
+ options: ['solid', 'soft', 'danger', 'danger-soft'],
+ },
+ },
+ isLoading: { control: 'boolean' },
+ blockingClick: { control: 'boolean' },
+ cb: { action: 'clicked' },
+ },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+ args: { variant: 'solid', children: ButtonText },
+}
+
+export const Soft: Story = {
+ args: { variant: 'soft', children: ButtonText },
+}
+
+export const Danger: Story = {
+ args: { variant: 'danger', children: ButtonText },
+}
+
+export const DangerSoft: Story = {
+ args: { variant: 'danger-soft', children: ButtonText },
+}
+
+export const Loading: Story = {
+ args: { isLoading: true, children: ButtonText },
+}
+
+export const BlockingClick: Story = {
+ args: {
+ blockingClick: true,
+ children: ButtonText,
+ cb: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 2000))
+ },
+ },
+}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" generics="T">
+ import { cn } from '$lib/utils'
+ import type { HTMLButtonAttributes } from 'svelte/elements'
+
+ interface IButtonProps extends HTMLButtonAttributes {
+ variant?: 'solid' | 'soft' | 'danger' | 'danger-soft'
+ isLoading?: boolean
+ cb?: () => Promise<void>
+ blockingClick?: boolean
+ type?: 'button' | 'submit' | 'reset'
+ }
+
+ let {
+ variant = 'solid',
+ isLoading,
+ cb,
+ blockingClick,
+ type = 'button',
+ children = undefined,
+ ...restProps
+ }: IButtonProps = $props()
+
+ let isSubmitting = $state(false)
+ let disabled = $derived(restProps.disabled || isLoading || isSubmitting)
+
+ const handleClick = async () => {
+ if (typeof cb !== 'function') return
+
+ if (blockingClick) isSubmitting = true
+ try {
+ await cb()
+ } catch (error) {
+ console.error('Error in button callback:', error)
+ } finally {
+ isSubmitting = false
+ }
+ }
+
+ const variantClasses = {
+ solid: { background: 'bg-primary-900', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-900' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ const disabledVariantClasses = {
+ solid: { background: 'bg-primary-500', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-500' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ let classes = $derived({
+ common:
+ 'cursor-pointer flex items-center justify-center px-8 py-2.5 rounded-full text-xl font-semibold h-[56px] duration-100',
+ background: disabled
+ ? disabledVariantClasses[variant].background ||
+ variantClasses[variant].background
+ : variantClasses[variant].background,
+ text: disabled
+ ? disabledVariantClasses[variant].text || variantClasses[variant].text
+ : variantClasses[variant].text,
+ disabled: 'cursor-not-allowed',
+ })
+</script>
+
+<button
+ {...restProps}
+ class={cn(
+ [
+ classes.common,
+ classes.background,
+ classes.text,
+ disabled && classes.disabled,
+ restProps.class,
+ ].join(' ')
+ )}
+ {disabled}
+ onclick={handleClick}
+ {type}
+>
+ <div class="relative flex items-center justify-center">
+ {#if isLoading || isSubmitting}
+ <div class="loading loading-spinner loading-md absolute -left-4"></div>
+ {/if}
+ <div
+ class="flex items-center justify-center duration-100"
+ class:translate-x-4={isLoading || isSubmitting}
+ >
+ {@render children?.()}
+ </div>
+ </div>
+</button>
+
+<!-- 
+@component
+export default ButtonAction
+@description
+This component is a button with a loading spinner that can be used to indicate that an action is being performed.
+
+@props
+- variant: The variant of the button. Default is `solid`.
+- isLoading: A boolean to indicate if the button is in a loading state.
+- cb: A callback function that will be called when the button is clicked.
+- blockingClick: A boolean to indicate if the button should block the click event while the callback function is being executed.
+- icon: A slot for an icon to be displayed inside the button.
+- ...restProps: Any other props that can be passed to a button element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+</script>
+
+<Button.Action variant="solid" cb={() => console.log('clicked')}>
+ Click me
+</Button.Action>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/ButtonSnippets.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+ export { ButtonText }
+</script>
+
+{#snippet ButtonText()}
+ Button
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -0,0 +1,4 @@
+import Action from './ButtonAction.svelte'
+import Icon from './ButtonIcon.svelte'
+
+export { Action, Icon }

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+
  import { Drawer } from "$lib/ui";
  let isPaneOpen = $state(false);
 </script>
@@ -7,10 +8,11 @@
 
 
 
+
 <Drawer bind:isPaneOpen isCancelRequired={true}>
  <div class="bg-red-300">aslkfamfoasdiownednciaosndoasfnas </div>
  <div>asfnladmfpamsfl asd</div>
  <div>aslkfasf;,;</div>
  <button class="btn btn-soft" >Open</button>
  <button class="btn btn-soft">Open</button>
-</Drawer>
+</Drawer>

infrastructure/eid-wallet/.storybook/main.ts

@@ -1,26 +1,18 @@
-import type { StorybookConfig } from "@storybook/sveltekit";
+import type { StorybookConfig } from '@storybook/sveltekit'
 
-import { join, dirname } from "path";
-
-/**
- * This function is used to resolve the absolute path of a package.
- * 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")));
-}
 const config: StorybookConfig = {
- // add back support for .svelte files when addon csf works
- stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts)'],
  addons: [
+
  getAbsolutePath("@storybook/addon-essentials"),
  getAbsolutePath("@chromatic-com/storybook"),
  getAbsolutePath("@storybook/experimental-addon-test"),
  ],
  framework: {
- name: getAbsolutePath("@storybook/sveltekit"),
+ name: '@storybook/sveltekit',
  options: {},
  },
+
  staticDirs: ["../static"],
 };
 export default config;

infrastructure/eid-wallet/.storybook/preview.ts

@@ -12,4 +12,4 @@ const preview: Preview = {
 	},
 };
 
-export default preview;
+export default preview;

infrastructure/eid-wallet/package.json

@@ -26,12 +26,13 @@
  "devDependencies": {
  "@chromatic-com/storybook": "^3",
  "@storybook/addon-essentials": "^8.6.7",
- "@storybook/addon-svelte-csf": "^5.0.0-next.28",
+ "@storybook/addon-interactions": "^8.6.7",
  "@storybook/blocks": "^8.6.7",
  "@storybook/experimental-addon-test": "^8.6.7",
  "@storybook/svelte": "^8.6.7",
  "@storybook/sveltekit": "^8.6.7",
  "@storybook/test": "^8.6.7",
+ "@storybook/testing-library": "^0.2.2",
  "@sveltejs/adapter-static": "^3.0.6",
  "@sveltejs/kit": "^2.9.0",
  "@sveltejs/vite-plugin-svelte": "^5.0.0",

infrastructure/eid-wallet/src/app.css

@@ -7,7 +7,7 @@
 @font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
- font-weight: normal;
+ font-weight: 100 900;
  font-style: normal;
 }
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ButtonAction from './ButtonAction.svelte'
+import { ButtonText } from './ButtonSnippets.svelte'
+
+const meta: Meta<ButtonAction> = {
+ title: 'Components/ButtonAction',
+ component: ButtonAction,
+ args: {
+ variant: 'solid',
+ isLoading: false,
+ blockingClick: false,
+ children: 'Click Me', // Ensure this is a function returning text
+ },
+ argTypes: {
+ variant: {
+ control: {
+ type: 'select',
+ options: ['solid', 'soft', 'danger', 'danger-soft'],
+ },
+ },
+ isLoading: { control: 'boolean' },
+ blockingClick: { control: 'boolean' },
+ cb: { action: 'clicked' },
+ },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+ args: { variant: 'solid', children: ButtonText },
+}
+
+export const Soft: Story = {
+ args: { variant: 'soft', children: ButtonText },
+}
+
+export const Danger: Story = {
+ args: { variant: 'danger', children: ButtonText },
+}
+
+export const DangerSoft: Story = {
+ args: { variant: 'danger-soft', children: ButtonText },
+}
+
+export const Loading: Story = {
+ args: { isLoading: true, children: ButtonText },
+}
+
+export const BlockingClick: Story = {
+ args: {
+ blockingClick: true,
+ children: ButtonText,
+ cb: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 2000))
+ },
+ },
+}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" generics="T">
+ import { cn } from '$lib/utils'
+ import type { HTMLButtonAttributes } from 'svelte/elements'
+
+ interface IButtonProps extends HTMLButtonAttributes {
+ variant?: 'solid' | 'soft' | 'danger' | 'danger-soft'
+ isLoading?: boolean
+ cb?: () => Promise<void>
+ blockingClick?: boolean
+ type?: 'button' | 'submit' | 'reset'
+ }
+
+ let {
+ variant = 'solid',
+ isLoading,
+ cb,
+ blockingClick,
+ type = 'button',
+ children = undefined,
+ ...restProps
+ }: IButtonProps = $props()
+
+ let isSubmitting = $state(false)
+ let disabled = $derived(restProps.disabled || isLoading || isSubmitting)
+
+ const handleClick = async () => {
+ if (typeof cb !== 'function') return
+
+ if (blockingClick) isSubmitting = true
+ try {
+ await cb()
+ } catch (error) {
+ console.error('Error in button callback:', error)
+ } finally {
+ isSubmitting = false
+ }
+ }
+
+ const variantClasses = {
+ solid: { background: 'bg-primary-900', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-900' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ const disabledVariantClasses = {
+ solid: { background: 'bg-primary-500', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-500' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ let classes = $derived({
+ common:
+ 'cursor-pointer flex items-center justify-center px-8 py-2.5 rounded-full text-xl font-semibold h-[56px] duration-100',
+ background: disabled
+ ? disabledVariantClasses[variant].background ||
+ variantClasses[variant].background
+ : variantClasses[variant].background,
+ text: disabled
+ ? disabledVariantClasses[variant].text || variantClasses[variant].text
+ : variantClasses[variant].text,
+ disabled: 'cursor-not-allowed',
+ })
+</script>
+
+<button
+ {...restProps}
+ class={cn(
+ [
+ classes.common,
+ classes.background,
+ classes.text,
+ disabled && classes.disabled,
+ restProps.class,
+ ].join(' ')
+ )}
+ {disabled}
+ onclick={handleClick}
+ {type}
+>
+ <div class="relative flex items-center justify-center">
+ {#if isLoading || isSubmitting}
+ <div class="loading loading-spinner loading-md absolute -left-4"></div>
+ {/if}
+ <div
+ class="flex items-center justify-center duration-100"
+ class:translate-x-4={isLoading || isSubmitting}
+ >
+ {@render children?.()}
+ </div>
+ </div>
+</button>
+
+<!-- 
+@component
+export default ButtonAction
+@description
+This component is a button with a loading spinner that can be used to indicate that an action is being performed.
+
+@props
+- variant: The variant of the button. Default is `solid`.
+- isLoading: A boolean to indicate if the button is in a loading state.
+- cb: A callback function that will be called when the button is clicked.
+- blockingClick: A boolean to indicate if the button should block the click event while the callback function is being executed.
+- icon: A slot for an icon to be displayed inside the button.
+- ...restProps: Any other props that can be passed to a button element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+</script>
+
+<Button.Action variant="solid" cb={() => console.log('clicked')}>
+ Click me
+</Button.Action>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/ButtonSnippets.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+ export { ButtonText }
+</script>
+
+{#snippet ButtonText()}
+ Button
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -0,0 +1,4 @@
+import Action from './ButtonAction.svelte'
+import Icon from './ButtonIcon.svelte'
+
+export { Action, Icon }

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+
  import { Drawer } from "$lib/ui";
  let isPaneOpen = $state(false);
 </script>
@@ -7,10 +8,11 @@
 
 
 
+
 <Drawer bind:isPaneOpen isCancelRequired={true}>
  <div class="bg-red-300">aslkfamfoasdiownednciaosndoasfnas </div>
  <div>asfnladmfpamsfl asd</div>
  <div>aslkfasf;,;</div>
  <button class="btn btn-soft" >Open</button>
  <button class="btn btn-soft">Open</button>
-</Drawer>
+</Drawer>

infrastructure/eid-wallet/.storybook/main.ts

@@ -1,26 +1,18 @@
-import type { StorybookConfig } from "@storybook/sveltekit";
+import type { StorybookConfig } from '@storybook/sveltekit'
 
-import { join, dirname } from "path";
-
-/**
- * This function is used to resolve the absolute path of a package.
- * 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")));
-}
 const config: StorybookConfig = {
- // add back support for .svelte files when addon csf works
- stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts)'],
  addons: [
+
  getAbsolutePath("@storybook/addon-essentials"),
  getAbsolutePath("@chromatic-com/storybook"),
  getAbsolutePath("@storybook/experimental-addon-test"),
  ],
  framework: {
- name: getAbsolutePath("@storybook/sveltekit"),
+ name: '@storybook/sveltekit',
  options: {},
  },
+
  staticDirs: ["../static"],
 };
 export default config;

infrastructure/eid-wallet/.storybook/preview.ts

@@ -12,4 +12,4 @@ const preview: Preview = {
 	},
 };
 
-export default preview;
+export default preview;

infrastructure/eid-wallet/package.json

@@ -26,12 +26,13 @@
  "devDependencies": {
  "@chromatic-com/storybook": "^3",
  "@storybook/addon-essentials": "^8.6.7",
- "@storybook/addon-svelte-csf": "^5.0.0-next.28",
+ "@storybook/addon-interactions": "^8.6.7",
  "@storybook/blocks": "^8.6.7",
  "@storybook/experimental-addon-test": "^8.6.7",
  "@storybook/svelte": "^8.6.7",
  "@storybook/sveltekit": "^8.6.7",
  "@storybook/test": "^8.6.7",
+ "@storybook/testing-library": "^0.2.2",
  "@sveltejs/adapter-static": "^3.0.6",
  "@sveltejs/kit": "^2.9.0",
  "@sveltejs/vite-plugin-svelte": "^5.0.0",

infrastructure/eid-wallet/src/app.css

@@ -7,7 +7,7 @@
 @font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
- font-weight: normal;
+ font-weight: 100 900;
  font-style: normal;
 }
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ButtonAction from './ButtonAction.svelte'
+import { ButtonText } from './ButtonSnippets.svelte'
+
+const meta: Meta<ButtonAction> = {
+ title: 'Components/ButtonAction',
+ component: ButtonAction,
+ args: {
+ variant: 'solid',
+ isLoading: false,
+ blockingClick: false,
+ children: 'Click Me', // Ensure this is a function returning text
+ },
+ argTypes: {
+ variant: {
+ control: {
+ type: 'select',
+ options: ['solid', 'soft', 'danger', 'danger-soft'],
+ },
+ },
+ isLoading: { control: 'boolean' },
+ blockingClick: { control: 'boolean' },
+ cb: { action: 'clicked' },
+ },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+ args: { variant: 'solid', children: ButtonText },
+}
+
+export const Soft: Story = {
+ args: { variant: 'soft', children: ButtonText },
+}
+
+export const Danger: Story = {
+ args: { variant: 'danger', children: ButtonText },
+}
+
+export const DangerSoft: Story = {
+ args: { variant: 'danger-soft', children: ButtonText },
+}
+
+export const Loading: Story = {
+ args: { isLoading: true, children: ButtonText },
+}
+
+export const BlockingClick: Story = {
+ args: {
+ blockingClick: true,
+ children: ButtonText,
+ cb: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 2000))
+ },
+ },
+}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" generics="T">
+ import { cn } from '$lib/utils'
+ import type { HTMLButtonAttributes } from 'svelte/elements'
+
+ interface IButtonProps extends HTMLButtonAttributes {
+ variant?: 'solid' | 'soft' | 'danger' | 'danger-soft'
+ isLoading?: boolean
+ cb?: () => Promise<void>
+ blockingClick?: boolean
+ type?: 'button' | 'submit' | 'reset'
+ }
+
+ let {
+ variant = 'solid',
+ isLoading,
+ cb,
+ blockingClick,
+ type = 'button',
+ children = undefined,
+ ...restProps
+ }: IButtonProps = $props()
+
+ let isSubmitting = $state(false)
+ let disabled = $derived(restProps.disabled || isLoading || isSubmitting)
+
+ const handleClick = async () => {
+ if (typeof cb !== 'function') return
+
+ if (blockingClick) isSubmitting = true
+ try {
+ await cb()
+ } catch (error) {
+ console.error('Error in button callback:', error)
+ } finally {
+ isSubmitting = false
+ }
+ }
+
+ const variantClasses = {
+ solid: { background: 'bg-primary-900', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-900' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ const disabledVariantClasses = {
+ solid: { background: 'bg-primary-500', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-500' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ let classes = $derived({
+ common:
+ 'cursor-pointer flex items-center justify-center px-8 py-2.5 rounded-full text-xl font-semibold h-[56px] duration-100',
+ background: disabled
+ ? disabledVariantClasses[variant].background ||
+ variantClasses[variant].background
+ : variantClasses[variant].background,
+ text: disabled
+ ? disabledVariantClasses[variant].text || variantClasses[variant].text
+ : variantClasses[variant].text,
+ disabled: 'cursor-not-allowed',
+ })
+</script>
+
+<button
+ {...restProps}
+ class={cn(
+ [
+ classes.common,
+ classes.background,
+ classes.text,
+ disabled && classes.disabled,
+ restProps.class,
+ ].join(' ')
+ )}
+ {disabled}
+ onclick={handleClick}
+ {type}
+>
+ <div class="relative flex items-center justify-center">
+ {#if isLoading || isSubmitting}
+ <div class="loading loading-spinner loading-md absolute -left-4"></div>
+ {/if}
+ <div
+ class="flex items-center justify-center duration-100"
+ class:translate-x-4={isLoading || isSubmitting}
+ >
+ {@render children?.()}
+ </div>
+ </div>
+</button>
+
+<!-- 
+@component
+export default ButtonAction
+@description
+This component is a button with a loading spinner that can be used to indicate that an action is being performed.
+
+@props
+- variant: The variant of the button. Default is `solid`.
+- isLoading: A boolean to indicate if the button is in a loading state.
+- cb: A callback function that will be called when the button is clicked.
+- blockingClick: A boolean to indicate if the button should block the click event while the callback function is being executed.
+- icon: A slot for an icon to be displayed inside the button.
+- ...restProps: Any other props that can be passed to a button element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+</script>
+
+<Button.Action variant="solid" cb={() => console.log('clicked')}>
+ Click me
+</Button.Action>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/ButtonSnippets.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+ export { ButtonText }
+</script>
+
+{#snippet ButtonText()}
+ Button
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -0,0 +1,4 @@
+import Action from './ButtonAction.svelte'
+import Icon from './ButtonIcon.svelte'
+
+export { Action, Icon }

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+
  import { Drawer } from "$lib/ui";
  let isPaneOpen = $state(false);
 </script>
@@ -7,10 +8,11 @@
 
 
 
+
 <Drawer bind:isPaneOpen isCancelRequired={true}>
  <div class="bg-red-300">aslkfamfoasdiownednciaosndoasfnas </div>
  <div>asfnladmfpamsfl asd</div>
  <div>aslkfasf;,;</div>
  <button class="btn btn-soft" >Open</button>
  <button class="btn btn-soft">Open</button>
-</Drawer>
+</Drawer>

infrastructure/eid-wallet/.storybook/main.ts

@@ -1,26 +1,18 @@
-import type { StorybookConfig } from "@storybook/sveltekit";
+import type { StorybookConfig } from '@storybook/sveltekit'
 
-import { join, dirname } from "path";
-
-/**
- * This function is used to resolve the absolute path of a package.
- * 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")));
-}
 const config: StorybookConfig = {
- // add back support for .svelte files when addon csf works
- stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts)'],
  addons: [
+
  getAbsolutePath("@storybook/addon-essentials"),
  getAbsolutePath("@chromatic-com/storybook"),
  getAbsolutePath("@storybook/experimental-addon-test"),
  ],
  framework: {
- name: getAbsolutePath("@storybook/sveltekit"),
+ name: '@storybook/sveltekit',
  options: {},
  },
+
  staticDirs: ["../static"],
 };
 export default config;

infrastructure/eid-wallet/.storybook/preview.ts

@@ -12,4 +12,4 @@ const preview: Preview = {
 	},
 };
 
-export default preview;
+export default preview;

infrastructure/eid-wallet/package.json

@@ -26,12 +26,13 @@
  "devDependencies": {
  "@chromatic-com/storybook": "^3",
  "@storybook/addon-essentials": "^8.6.7",
- "@storybook/addon-svelte-csf": "^5.0.0-next.28",
+ "@storybook/addon-interactions": "^8.6.7",
  "@storybook/blocks": "^8.6.7",
  "@storybook/experimental-addon-test": "^8.6.7",
  "@storybook/svelte": "^8.6.7",
  "@storybook/sveltekit": "^8.6.7",
  "@storybook/test": "^8.6.7",
+ "@storybook/testing-library": "^0.2.2",
  "@sveltejs/adapter-static": "^3.0.6",
  "@sveltejs/kit": "^2.9.0",
  "@sveltejs/vite-plugin-svelte": "^5.0.0",

infrastructure/eid-wallet/src/app.css

@@ -7,7 +7,7 @@
 @font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
- font-weight: normal;
+ font-weight: 100 900;
  font-style: normal;
 }
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ButtonAction from './ButtonAction.svelte'
+import { ButtonText } from './ButtonSnippets.svelte'
+
+const meta: Meta<ButtonAction> = {
+ title: 'Components/ButtonAction',
+ component: ButtonAction,
+ args: {
+ variant: 'solid',
+ isLoading: false,
+ blockingClick: false,
+ children: 'Click Me', // Ensure this is a function returning text
+ },
+ argTypes: {
+ variant: {
+ control: {
+ type: 'select',
+ options: ['solid', 'soft', 'danger', 'danger-soft'],
+ },
+ },
+ isLoading: { control: 'boolean' },
+ blockingClick: { control: 'boolean' },
+ cb: { action: 'clicked' },
+ },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+ args: { variant: 'solid', children: ButtonText },
+}
+
+export const Soft: Story = {
+ args: { variant: 'soft', children: ButtonText },
+}
+
+export const Danger: Story = {
+ args: { variant: 'danger', children: ButtonText },
+}
+
+export const DangerSoft: Story = {
+ args: { variant: 'danger-soft', children: ButtonText },
+}
+
+export const Loading: Story = {
+ args: { isLoading: true, children: ButtonText },
+}
+
+export const BlockingClick: Story = {
+ args: {
+ blockingClick: true,
+ children: ButtonText,
+ cb: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 2000))
+ },
+ },
+}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" generics="T">
+ import { cn } from '$lib/utils'
+ import type { HTMLButtonAttributes } from 'svelte/elements'
+
+ interface IButtonProps extends HTMLButtonAttributes {
+ variant?: 'solid' | 'soft' | 'danger' | 'danger-soft'
+ isLoading?: boolean
+ cb?: () => Promise<void>
+ blockingClick?: boolean
+ type?: 'button' | 'submit' | 'reset'
+ }
+
+ let {
+ variant = 'solid',
+ isLoading,
+ cb,
+ blockingClick,
+ type = 'button',
+ children = undefined,
+ ...restProps
+ }: IButtonProps = $props()
+
+ let isSubmitting = $state(false)
+ let disabled = $derived(restProps.disabled || isLoading || isSubmitting)
+
+ const handleClick = async () => {
+ if (typeof cb !== 'function') return
+
+ if (blockingClick) isSubmitting = true
+ try {
+ await cb()
+ } catch (error) {
+ console.error('Error in button callback:', error)
+ } finally {
+ isSubmitting = false
+ }
+ }
+
+ const variantClasses = {
+ solid: { background: 'bg-primary-900', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-900' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ const disabledVariantClasses = {
+ solid: { background: 'bg-primary-500', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-500' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ let classes = $derived({
+ common:
+ 'cursor-pointer flex items-center justify-center px-8 py-2.5 rounded-full text-xl font-semibold h-[56px] duration-100',
+ background: disabled
+ ? disabledVariantClasses[variant].background ||
+ variantClasses[variant].background
+ : variantClasses[variant].background,
+ text: disabled
+ ? disabledVariantClasses[variant].text || variantClasses[variant].text
+ : variantClasses[variant].text,
+ disabled: 'cursor-not-allowed',
+ })
+</script>
+
+<button
+ {...restProps}
+ class={cn(
+ [
+ classes.common,
+ classes.background,
+ classes.text,
+ disabled && classes.disabled,
+ restProps.class,
+ ].join(' ')
+ )}
+ {disabled}
+ onclick={handleClick}
+ {type}
+>
+ <div class="relative flex items-center justify-center">
+ {#if isLoading || isSubmitting}
+ <div class="loading loading-spinner loading-md absolute -left-4"></div>
+ {/if}
+ <div
+ class="flex items-center justify-center duration-100"
+ class:translate-x-4={isLoading || isSubmitting}
+ >
+ {@render children?.()}
+ </div>
+ </div>
+</button>
+
+<!-- 
+@component
+export default ButtonAction
+@description
+This component is a button with a loading spinner that can be used to indicate that an action is being performed.
+
+@props
+- variant: The variant of the button. Default is `solid`.
+- isLoading: A boolean to indicate if the button is in a loading state.
+- cb: A callback function that will be called when the button is clicked.
+- blockingClick: A boolean to indicate if the button should block the click event while the callback function is being executed.
+- icon: A slot for an icon to be displayed inside the button.
+- ...restProps: Any other props that can be passed to a button element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+</script>
+
+<Button.Action variant="solid" cb={() => console.log('clicked')}>
+ Click me
+</Button.Action>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/ButtonSnippets.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+ export { ButtonText }
+</script>
+
+{#snippet ButtonText()}
+ Button
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -0,0 +1,4 @@
+import Action from './ButtonAction.svelte'
+import Icon from './ButtonIcon.svelte'
+
+export { Action, Icon }

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+
  import { Drawer } from "$lib/ui";
  let isPaneOpen = $state(false);
 </script>
@@ -7,10 +8,11 @@
 
 
 
+
 <Drawer bind:isPaneOpen isCancelRequired={true}>
  <div class="bg-red-300">aslkfamfoasdiownednciaosndoasfnas </div>
  <div>asfnladmfpamsfl asd</div>
  <div>aslkfasf;,;</div>
  <button class="btn btn-soft" >Open</button>
  <button class="btn btn-soft">Open</button>
-</Drawer>
+</Drawer>

infrastructure/eid-wallet/.storybook/main.ts

@@ -1,26 +1,18 @@
-import type { StorybookConfig } from "@storybook/sveltekit";
+import type { StorybookConfig } from '@storybook/sveltekit'
 
-import { join, dirname } from "path";
-
-/**
- * This function is used to resolve the absolute path of a package.
- * 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")));
-}
 const config: StorybookConfig = {
- // add back support for .svelte files when addon csf works
- stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts)'],
  addons: [
+
  getAbsolutePath("@storybook/addon-essentials"),
  getAbsolutePath("@chromatic-com/storybook"),
  getAbsolutePath("@storybook/experimental-addon-test"),
  ],
  framework: {
- name: getAbsolutePath("@storybook/sveltekit"),
+ name: '@storybook/sveltekit',
  options: {},
  },
+
  staticDirs: ["../static"],
 };
 export default config;

infrastructure/eid-wallet/.storybook/preview.ts

@@ -12,4 +12,4 @@ const preview: Preview = {
 	},
 };
 
-export default preview;
+export default preview;

infrastructure/eid-wallet/package.json

@@ -26,12 +26,13 @@
  "devDependencies": {
  "@chromatic-com/storybook": "^3",
  "@storybook/addon-essentials": "^8.6.7",
- "@storybook/addon-svelte-csf": "^5.0.0-next.28",
+ "@storybook/addon-interactions": "^8.6.7",
  "@storybook/blocks": "^8.6.7",
  "@storybook/experimental-addon-test": "^8.6.7",
  "@storybook/svelte": "^8.6.7",
  "@storybook/sveltekit": "^8.6.7",
  "@storybook/test": "^8.6.7",
+ "@storybook/testing-library": "^0.2.2",
  "@sveltejs/adapter-static": "^3.0.6",
  "@sveltejs/kit": "^2.9.0",
  "@sveltejs/vite-plugin-svelte": "^5.0.0",

infrastructure/eid-wallet/src/app.css

@@ -7,7 +7,7 @@
 @font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
- font-weight: normal;
+ font-weight: 100 900;
  font-style: normal;
 }
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ButtonAction from './ButtonAction.svelte'
+import { ButtonText } from './ButtonSnippets.svelte'
+
+const meta: Meta<ButtonAction> = {
+ title: 'Components/ButtonAction',
+ component: ButtonAction,
+ args: {
+ variant: 'solid',
+ isLoading: false,
+ blockingClick: false,
+ children: 'Click Me', // Ensure this is a function returning text
+ },
+ argTypes: {
+ variant: {
+ control: {
+ type: 'select',
+ options: ['solid', 'soft', 'danger', 'danger-soft'],
+ },
+ },
+ isLoading: { control: 'boolean' },
+ blockingClick: { control: 'boolean' },
+ cb: { action: 'clicked' },
+ },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+ args: { variant: 'solid', children: ButtonText },
+}
+
+export const Soft: Story = {
+ args: { variant: 'soft', children: ButtonText },
+}
+
+export const Danger: Story = {
+ args: { variant: 'danger', children: ButtonText },
+}
+
+export const DangerSoft: Story = {
+ args: { variant: 'danger-soft', children: ButtonText },
+}
+
+export const Loading: Story = {
+ args: { isLoading: true, children: ButtonText },
+}
+
+export const BlockingClick: Story = {
+ args: {
+ blockingClick: true,
+ children: ButtonText,
+ cb: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 2000))
+ },
+ },
+}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" generics="T">
+ import { cn } from '$lib/utils'
+ import type { HTMLButtonAttributes } from 'svelte/elements'
+
+ interface IButtonProps extends HTMLButtonAttributes {
+ variant?: 'solid' | 'soft' | 'danger' | 'danger-soft'
+ isLoading?: boolean
+ cb?: () => Promise<void>
+ blockingClick?: boolean
+ type?: 'button' | 'submit' | 'reset'
+ }
+
+ let {
+ variant = 'solid',
+ isLoading,
+ cb,
+ blockingClick,
+ type = 'button',
+ children = undefined,
+ ...restProps
+ }: IButtonProps = $props()
+
+ let isSubmitting = $state(false)
+ let disabled = $derived(restProps.disabled || isLoading || isSubmitting)
+
+ const handleClick = async () => {
+ if (typeof cb !== 'function') return
+
+ if (blockingClick) isSubmitting = true
+ try {
+ await cb()
+ } catch (error) {
+ console.error('Error in button callback:', error)
+ } finally {
+ isSubmitting = false
+ }
+ }
+
+ const variantClasses = {
+ solid: { background: 'bg-primary-900', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-900' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ const disabledVariantClasses = {
+ solid: { background: 'bg-primary-500', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-500' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ let classes = $derived({
+ common:
+ 'cursor-pointer flex items-center justify-center px-8 py-2.5 rounded-full text-xl font-semibold h-[56px] duration-100',
+ background: disabled
+ ? disabledVariantClasses[variant].background ||
+ variantClasses[variant].background
+ : variantClasses[variant].background,
+ text: disabled
+ ? disabledVariantClasses[variant].text || variantClasses[variant].text
+ : variantClasses[variant].text,
+ disabled: 'cursor-not-allowed',
+ })
+</script>
+
+<button
+ {...restProps}
+ class={cn(
+ [
+ classes.common,
+ classes.background,
+ classes.text,
+ disabled && classes.disabled,
+ restProps.class,
+ ].join(' ')
+ )}
+ {disabled}
+ onclick={handleClick}
+ {type}
+>
+ <div class="relative flex items-center justify-center">
+ {#if isLoading || isSubmitting}
+ <div class="loading loading-spinner loading-md absolute -left-4"></div>
+ {/if}
+ <div
+ class="flex items-center justify-center duration-100"
+ class:translate-x-4={isLoading || isSubmitting}
+ >
+ {@render children?.()}
+ </div>
+ </div>
+</button>
+
+<!-- 
+@component
+export default ButtonAction
+@description
+This component is a button with a loading spinner that can be used to indicate that an action is being performed.
+
+@props
+- variant: The variant of the button. Default is `solid`.
+- isLoading: A boolean to indicate if the button is in a loading state.
+- cb: A callback function that will be called when the button is clicked.
+- blockingClick: A boolean to indicate if the button should block the click event while the callback function is being executed.
+- icon: A slot for an icon to be displayed inside the button.
+- ...restProps: Any other props that can be passed to a button element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+</script>
+
+<Button.Action variant="solid" cb={() => console.log('clicked')}>
+ Click me
+</Button.Action>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/ButtonSnippets.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+ export { ButtonText }
+</script>
+
+{#snippet ButtonText()}
+ Button
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -0,0 +1,4 @@
+import Action from './ButtonAction.svelte'
+import Icon from './ButtonIcon.svelte'
+
+export { Action, Icon }

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+
  import { Drawer } from "$lib/ui";
  let isPaneOpen = $state(false);
 </script>
@@ -7,10 +8,11 @@
 
 
 
+
 <Drawer bind:isPaneOpen isCancelRequired={true}>
  <div class="bg-red-300">aslkfamfoasdiownednciaosndoasfnas </div>
  <div>asfnladmfpamsfl asd</div>
  <div>aslkfasf;,;</div>
  <button class="btn btn-soft" >Open</button>
  <button class="btn btn-soft">Open</button>
-</Drawer>
+</Drawer>

infrastructure/eid-wallet/.storybook/main.ts

@@ -1,26 +1,18 @@
-import type { StorybookConfig } from "@storybook/sveltekit";
+import type { StorybookConfig } from '@storybook/sveltekit'
 
-import { join, dirname } from "path";
-
-/**
- * This function is used to resolve the absolute path of a package.
- * 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")));
-}
 const config: StorybookConfig = {
- // add back support for .svelte files when addon csf works
- stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts)"],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts)'],
  addons: [
+
  getAbsolutePath("@storybook/addon-essentials"),
  getAbsolutePath("@chromatic-com/storybook"),
  getAbsolutePath("@storybook/experimental-addon-test"),
  ],
  framework: {
- name: getAbsolutePath("@storybook/sveltekit"),
+ name: '@storybook/sveltekit',
  options: {},
  },
+
  staticDirs: ["../static"],
 };
 export default config;

infrastructure/eid-wallet/.storybook/preview.ts

@@ -12,4 +12,4 @@ const preview: Preview = {
 	},
 };
 
-export default preview;
+export default preview;

infrastructure/eid-wallet/package.json

@@ -26,12 +26,13 @@
  "devDependencies": {
  "@chromatic-com/storybook": "^3",
  "@storybook/addon-essentials": "^8.6.7",
- "@storybook/addon-svelte-csf": "^5.0.0-next.28",
+ "@storybook/addon-interactions": "^8.6.7",
  "@storybook/blocks": "^8.6.7",
  "@storybook/experimental-addon-test": "^8.6.7",
  "@storybook/svelte": "^8.6.7",
  "@storybook/sveltekit": "^8.6.7",
  "@storybook/test": "^8.6.7",
+ "@storybook/testing-library": "^0.2.2",
  "@sveltejs/adapter-static": "^3.0.6",
  "@sveltejs/kit": "^2.9.0",
  "@sveltejs/vite-plugin-svelte": "^5.0.0",

infrastructure/eid-wallet/src/app.css

@@ -7,7 +7,7 @@
 @font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo-VariableFont_wdth,wght.ttf') format('truetype');
- font-weight: normal;
+ font-weight: 100 900;
  font-style: normal;
 }
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+import ButtonAction from './ButtonAction.svelte'
+import { ButtonText } from './ButtonSnippets.svelte'
+
+const meta: Meta<ButtonAction> = {
+ title: 'Components/ButtonAction',
+ component: ButtonAction,
+ args: {
+ variant: 'solid',
+ isLoading: false,
+ blockingClick: false,
+ children: 'Click Me', // Ensure this is a function returning text
+ },
+ argTypes: {
+ variant: {
+ control: {
+ type: 'select',
+ options: ['solid', 'soft', 'danger', 'danger-soft'],
+ },
+ },
+ isLoading: { control: 'boolean' },
+ blockingClick: { control: 'boolean' },
+ cb: { action: 'clicked' },
+ },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Solid: Story = {
+ args: { variant: 'solid', children: ButtonText },
+}
+
+export const Soft: Story = {
+ args: { variant: 'soft', children: ButtonText },
+}
+
+export const Danger: Story = {
+ args: { variant: 'danger', children: ButtonText },
+}
+
+export const DangerSoft: Story = {
+ args: { variant: 'danger-soft', children: ButtonText },
+}
+
+export const Loading: Story = {
+ args: { isLoading: true, children: ButtonText },
+}
+
+export const BlockingClick: Story = {
+ args: {
+ blockingClick: true,
+ children: ButtonText,
+ cb: async () => {
+ await new Promise((resolve) => setTimeout(resolve, 2000))
+ },
+ },
+}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonAction.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" generics="T">
+ import { cn } from '$lib/utils'
+ import type { HTMLButtonAttributes } from 'svelte/elements'
+
+ interface IButtonProps extends HTMLButtonAttributes {
+ variant?: 'solid' | 'soft' | 'danger' | 'danger-soft'
+ isLoading?: boolean
+ cb?: () => Promise<void>
+ blockingClick?: boolean
+ type?: 'button' | 'submit' | 'reset'
+ }
+
+ let {
+ variant = 'solid',
+ isLoading,
+ cb,
+ blockingClick,
+ type = 'button',
+ children = undefined,
+ ...restProps
+ }: IButtonProps = $props()
+
+ let isSubmitting = $state(false)
+ let disabled = $derived(restProps.disabled || isLoading || isSubmitting)
+
+ const handleClick = async () => {
+ if (typeof cb !== 'function') return
+
+ if (blockingClick) isSubmitting = true
+ try {
+ await cb()
+ } catch (error) {
+ console.error('Error in button callback:', error)
+ } finally {
+ isSubmitting = false
+ }
+ }
+
+ const variantClasses = {
+ solid: { background: 'bg-primary-900', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-900' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ const disabledVariantClasses = {
+ solid: { background: 'bg-primary-500', text: 'text-white' },
+ soft: { background: 'bg-primary-100', text: 'text-primary-500' },
+ danger: { background: 'bg-danger-500', text: 'text-white' },
+ 'danger-soft': { background: 'bg-danger-300', text: 'text-danger-500' },
+ }
+
+ let classes = $derived({
+ common:
+ 'cursor-pointer flex items-center justify-center px-8 py-2.5 rounded-full text-xl font-semibold h-[56px] duration-100',
+ background: disabled
+ ? disabledVariantClasses[variant].background ||
+ variantClasses[variant].background
+ : variantClasses[variant].background,
+ text: disabled
+ ? disabledVariantClasses[variant].text || variantClasses[variant].text
+ : variantClasses[variant].text,
+ disabled: 'cursor-not-allowed',
+ })
+</script>
+
+<button
+ {...restProps}
+ class={cn(
+ [
+ classes.common,
+ classes.background,
+ classes.text,
+ disabled && classes.disabled,
+ restProps.class,
+ ].join(' ')
+ )}
+ {disabled}
+ onclick={handleClick}
+ {type}
+>
+ <div class="relative flex items-center justify-center">
+ {#if isLoading || isSubmitting}
+ <div class="loading loading-spinner loading-md absolute -left-4"></div>
+ {/if}
+ <div
+ class="flex items-center justify-center duration-100"
+ class:translate-x-4={isLoading || isSubmitting}
+ >
+ {@render children?.()}
+ </div>
+ </div>
+</button>
+
+<!-- 
+@component
+export default ButtonAction
+@description
+This component is a button with a loading spinner that can be used to indicate that an action is being performed.
+
+@props
+- variant: The variant of the button. Default is `solid`.
+- isLoading: A boolean to indicate if the button is in a loading state.
+- cb: A callback function that will be called when the button is clicked.
+- blockingClick: A boolean to indicate if the button should block the click event while the callback function is being executed.
+- icon: A slot for an icon to be displayed inside the button.
+- ...restProps: Any other props that can be passed to a button element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+</script>
+
+<Button.Action variant="solid" cb={() => console.log('clicked')}>
+ Click me
+</Button.Action>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/ButtonSnippets.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+ export { ButtonText }
+</script>
+
+{#snippet ButtonText()}
+ Button
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -0,0 +1,4 @@
+import Action from './ButtonAction.svelte'
+import Icon from './ButtonIcon.svelte'
+
+export { Action, Icon }

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+
  import { Drawer } from "$lib/ui";
  let isPaneOpen = $state(false);
 </script>
@@ -7,10 +8,11 @@
 
 
 
+
 <Drawer bind:isPaneOpen isCancelRequired={true}>
  <div class="bg-red-300">aslkfamfoasdiownednciaosndoasfnas </div>
  <div>asfnladmfpamsfl asd</div>
  <div>aslkfasf;,;</div>
  <button class="btn btn-soft" >Open</button>
  <button class="btn btn-soft">Open</button>
-</Drawer>
+</Drawer>