feat: add button action component #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

coodos merged 20 commits into main from feat/button-action

Mar 24, 2025

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,4 +12,4 @@ const preview: Preview = { @@
     	},
     };
-    export default preview;
+    export default preview;

infrastructure/eid-wallet/package.json

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
     }
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ -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

-Original file line number
+Diff line change
@@ -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/ButtonIcon.svelte

Empty file.

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

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

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

-Original file line number
+Diff line change
@@ -0,0 +1,4 @@
+    import Action from './ButtonAction.svelte'
+    import Icon from './ButtonIcon.svelte'
+    export { Action, Icon }

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

-Original file line number
+Diff line change
@@ -1,4 +1,5 @@
     <script lang="ts">
         import { Drawer } from "$lib/ui";
         let isPaneOpen = $state(false);
     </script>
@@ Expand All / @@ -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/src/stories/Button.stories.svelte

This file was deleted.

infrastructure/eid-wallet/src/stories/Button.svelte

This file was deleted.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add button action component #47

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!