format

frequency-chain · Oct 25, 2024 · 7ef672d · 7ef672d
1 parent 01aead6
commit 7ef672d
Show file tree

Hide file tree

Showing 11 changed files with 168 additions and 176 deletions.
diff --git a/src/lib/assets/icons/Exit.svelte b/src/lib/assets/icons/Exit.svelte
@@ -1,13 +1,13 @@
 <svg
-        width="25"
-        height="24"
-        viewBox="0 0 25 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        class={$$restProps.class}
+  width="25"
+  height="24"
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
 >
-    <path
-            d="M2.525 24L0.125 21.6L9.725 12L0.125 2.4L2.525 0L12.125 9.6L21.725 0L24.125 2.4L14.525 12L24.125 21.6L21.725 24L12.125 14.4L2.525 24Z"
-            fill="currentColor"
-    />
+  <path
+    d="M2.525 24L0.125 21.6L9.725 12L0.125 2.4L2.525 0L12.125 9.6L21.725 0L24.125 2.4L14.525 12L24.125 21.6L21.725 24L12.125 14.4L2.525 24Z"
+    fill="currentColor"
+  />
 </svg>
diff --git a/src/lib/features/Modal.stories.svelte b/src/lib/features/Modal.stories.svelte
@@ -1,62 +1,62 @@
 <script lang="ts">
-    import {Meta, Story} from '@storybook/addon-svelte-csf';
-    import Modal from './Modal.svelte';
-    import Button from '../atoms/Button.svelte';
-    import Select from '../atoms/Select.svelte';
-    import {Close} from '../shadcnComponents/ui/dialog';
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import Modal from './Modal.svelte';
+  import Button from '../atoms/Button.svelte';
+  import Select from '../atoms/Select.svelte';
+  import { Close } from '../shadcnComponents/ui/dialog';
 
-    export let label = 'Select Option';
-    export let description = 'Please choose an option';
-    export let placeholder = 'Select an option...';
-    export let isRequired = false;
-    export let options = [
-        {optionLabel: 'Option 1', value: '1'},
-        {optionLabel: 'Option 2', value: '2'},
-        {optionLabel: 'Option 3', value: '3'},
-    ];
+  export let label = 'Select Option';
+  export let description = 'Please choose an option';
+  export let placeholder = 'Select an option...';
+  export let isRequired = false;
+  export let options = [
+    { optionLabel: 'Option 1', value: '1' },
+    { optionLabel: 'Option 2', value: '2' },
+    { optionLabel: 'Option 3', value: '3' },
+  ];
 </script>
 
-<Meta title="UI Components/Features/Modal" component={Modal}/>
+<Meta title="UI Components/Features/Modal" component={Modal} />
 
 <!--Primary-->
 <Story name="Primary Modal">
-    <Modal>
-        <Button slot="trigger">Open</Button>
-        <div slot="title">Title</div>
-        <div slot="description">Description goes here.</div>
-        <form slot="body">
-            <Select {label} {description} {placeholder} {isRequired} {options}/>
-            <Close>
-                <Button class="mt-f20">Submit</Button>
-            </Close>
-        </form>
-    </Modal>
+  <Modal>
+    <Button slot="trigger">Open</Button>
+    <div slot="title">Title</div>
+    <div slot="description">Description goes here.</div>
+    <form slot="body">
+      <Select {label} {description} {placeholder} {isRequired} {options} />
+      <Close>
+        <Button class="mt-f20">Submit</Button>
+      </Close>
+    </form>
+  </Modal>
 </Story>
 
 <!--No Description-->
 <Story name="No Description">
-    <Modal>
-        <Button slot="trigger">Open</Button>
-        <div slot="title">Title</div>
-        <form slot="body">
-            <Select {label} {description} {placeholder} {isRequired} {options}/>
-            <Close>
-                <Button class="mt-f20">Submit</Button>
-            </Close>
-        </form>
-    </Modal>
+  <Modal>
+    <Button slot="trigger">Open</Button>
+    <div slot="title">Title</div>
+    <form slot="body">
+      <Select {label} {description} {placeholder} {isRequired} {options} />
+      <Close>
+        <Button class="mt-f20">Submit</Button>
+      </Close>
+    </form>
+  </Modal>
 </Story>
 
 <!--Text Body-->
 <Story name="Text Body">
-    <Modal>
-        <Button slot="trigger">Open</Button>
-        <div slot="title">Title</div>
-        <div slot="description">Description goes here.</div>
-        <div slot="body">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium ad aliquam animi aperiam blanditiis
-            excepturi inventore ipsum iste, labore maiores minus nostrum obcaecati, quasi, ratione reprehenderit rerum
-            suscipit temporibus.
-        </div>
-    </Modal>
+  <Modal>
+    <Button slot="trigger">Open</Button>
+    <div slot="title">Title</div>
+    <div slot="description">Description goes here.</div>
+    <div slot="body">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium ad aliquam animi aperiam blanditiis
+      excepturi inventore ipsum iste, labore maiores minus nostrum obcaecati, quasi, ratione reprehenderit rerum
+      suscipit temporibus.
+    </div>
+  </Modal>
 </Story>
diff --git a/src/lib/features/Modal.svelte b/src/lib/features/Modal.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-    import {Root, Trigger, Content, Header, Title, Description} from '../shadcnComponents/ui/dialog';
+  import { Root, Trigger, Content, Header, Title, Description } from '../shadcnComponents/ui/dialog';
 </script>
 
 <Root>
-    <Trigger>
-        <slot name="trigger"/>
-    </Trigger>
-    <Content>
-        <Header>
-            <Title>
-                <slot name="title"/>
-            </Title>
-            <Description>
-                <slot name="description"/>
-            </Description>
-        </Header>
-        <slot name="body"/>
-    </Content>
+  <Trigger>
+    <slot name="trigger" />
+  </Trigger>
+  <Content>
+    <Header>
+      <Title>
+        <slot name="title" />
+      </Title>
+      <Description>
+        <slot name="description" />
+      </Description>
+    </Header>
+    <slot name="body" />
+  </Content>
 </Root>
diff --git a/src/lib/shadcnComponents/ui/dialog/dialog-content.svelte b/src/lib/shadcnComponents/ui/dialog/dialog-content.svelte
@@ -1,36 +1,34 @@
 <script lang="ts">
-    import {Dialog as DialogPrimitive} from 'bits-ui';
-    import {Exit} from '../../../assets/index';
-    import * as Dialog from './index.js';
-    import {cn, flyAndScale} from '../../../../utils/utils';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { Exit } from '../../../assets/index';
+  import * as Dialog from './index.js';
+  import { cn, flyAndScale } from '../../../../utils/utils';
 
-    type $$Props = DialogPrimitive.ContentProps;
+  type $$Props = DialogPrimitive.ContentProps;
 
-    let className: $$Props['class'] = undefined;
-    export let transition: $$Props['transition'] = flyAndScale;
-    export let transitionConfig: $$Props['transitionConfig'] = {
-        duration: 200,
-    };
-    export {className as class};
+  let className: $$Props['class'] = undefined;
+  export let transition: $$Props['transition'] = flyAndScale;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 200,
+  };
+  export { className as class };
 </script>
 
 <Dialog.Portal>
-    <Dialog.Overlay/>
-    <DialogPrimitive.Content
-            {transition}
-            {transitionConfig}
-            class={cn(
-      'normal bg-cream fixed left-[50%] top-[50%] z-50 grid w-full max-w-[500px] translate-x-[-50%] gap-f24 translate-y-[-50%] p-f48 shadow-lg rounded-lg md:w-full',
+  <Dialog.Overlay />
+  <DialogPrimitive.Content
+    {transition}
+    {transitionConfig}
+    class={cn(
+      'normal fixed left-[50%] top-[50%] z-50 grid w-full max-w-[500px] translate-x-[-50%] translate-y-[-50%] gap-f24 rounded-lg bg-cream p-f48 shadow-lg md:w-full',
       className
     )}
-            {...$$restProps}
-    >
-        <slot/>
-        <DialogPrimitive.Close
-                class="absolute right-f24 top-f24 disabled:pointer-events-none"
-        >
-            <Exit class="h-4 w-4 text-navy"/>
-            <span class="sr-only">Close</span>
-        </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
+    {...$$restProps}
+  >
+    <slot />
+    <DialogPrimitive.Close class="absolute right-f24 top-f24 disabled:pointer-events-none">
+      <Exit class="h-4 w-4 text-navy" />
+      <span class="sr-only">Close</span>
+    </DialogPrimitive.Close>
+  </DialogPrimitive.Content>
 </Dialog.Portal>
diff --git a/src/lib/shadcnComponents/ui/dialog/dialog-description.svelte b/src/lib/shadcnComponents/ui/dialog/dialog-description.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-    import {Dialog as DialogPrimitive} from 'bits-ui';
-    import {cn} from '../../../../utils/utils.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '../../../../utils/utils.js';
 
-    type $$Props = DialogPrimitive.DescriptionProps;
+  type $$Props = DialogPrimitive.DescriptionProps;
 
-    let className: $$Props['class'] = undefined;
-    export {className as class};
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <DialogPrimitive.Description class={cn('sm', className)} {...$$restProps}>
-    <slot/>
+  <slot />
 </DialogPrimitive.Description>
diff --git a/src/lib/shadcnComponents/ui/dialog/dialog-footer.svelte b/src/lib/shadcnComponents/ui/dialog/dialog-footer.svelte
@@ -1,16 +1,13 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+  import type { HTMLAttributes } from 'svelte/elements';
   import { cn } from '../../../../utils/utils.js';
 
-	type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-	{...$$restProps}
->
-	<slot />
+<div class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...$$restProps}>
+  <slot />
 </div>
diff --git a/src/lib/shadcnComponents/ui/dialog/dialog-header.svelte b/src/lib/shadcnComponents/ui/dialog/dialog-header.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-    import type {HTMLAttributes} from "svelte/elements";
-    import {cn} from '../../../../utils/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../../../utils/utils.js';
 
-    type $$Props = HTMLAttributes<HTMLDivElement>;
+  type $$Props = HTMLAttributes<HTMLDivElement>;
 
-    let className: $$Props["class"] = undefined;
-    export {className as class};
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-f4", className)} {...$$restProps}>
-    <slot/>
+<div class={cn('flex flex-col space-y-f4', className)} {...$$restProps}>
+  <slot />
 </div>
diff --git a/src/lib/shadcnComponents/ui/dialog/dialog-overlay.svelte b/src/lib/shadcnComponents/ui/dialog/dialog-overlay.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-    import {Dialog as DialogPrimitive} from "bits-ui";
-    import {fade} from "svelte/transition";
-    import {cn} from '../../../../utils/utils.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { fade } from 'svelte/transition';
+  import { cn } from '../../../../utils/utils.js';
 
-    type $$Props = DialogPrimitive.OverlayProps;
+  type $$Props = DialogPrimitive.OverlayProps;
 
-    let className: $$Props["class"] = undefined;
-    export let transition: $$Props["transition"] = fade;
-    export let transitionConfig: $$Props["transitionConfig"] = {
-        duration: 150,
-    };
-    export {className as class};
+  let className: $$Props['class'] = undefined;
+  export let transition: $$Props['transition'] = fade;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 150,
+  };
+  export { className as class };
 </script>
 
 <DialogPrimitive.Overlay
-        {transition}
-        {transitionConfig}
-        class={cn("bg-shadow/5 fixed inset-0 z-50 backdrop-blur-sm", className)}
-        {...$$restProps}
+  {transition}
+  {transitionConfig}
+  class={cn('fixed inset-0 z-50 bg-shadow/5 backdrop-blur-sm', className)}
+  {...$$restProps}
 />
diff --git a/src/lib/shadcnComponents/ui/dialog/dialog-portal.svelte b/src/lib/shadcnComponents/ui/dialog/dialog-portal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive } from "bits-ui";
-	type $$Props = DialogPrimitive.PortalProps;
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  type $$Props = DialogPrimitive.PortalProps;
 </script>
 
 <DialogPrimitive.Portal {...$$restProps}>
-	<slot />
+  <slot />
 </DialogPrimitive.Portal>
diff --git a/src/lib/shadcnComponents/ui/dialog/dialog-title.svelte b/src/lib/shadcnComponents/ui/dialog/dialog-title.svelte
@@ -1,16 +1,13 @@
 <script lang="ts">
-    import {Dialog as DialogPrimitive} from "bits-ui";
-    import {cn} from '../../../../utils/utils.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { cn } from '../../../../utils/utils.js';
 
-    type $$Props = DialogPrimitive.TitleProps;
+  type $$Props = DialogPrimitive.TitleProps;
 
-    let className: $$Props["class"] = undefined;
-    export {className as class};
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
-<DialogPrimitive.Title
-        class={cn("lg font-bold text-navy", className)}
-        {...$$restProps}
->
-    <slot/>
+<DialogPrimitive.Title class={cn('lg font-bold text-navy', className)} {...$$restProps}>
+  <slot />
 </DialogPrimitive.Title>