format

frequency-chain · Oct 24, 2024 · 600eba0 · 600eba0
1 parent 8bf3b26
commit 600eba0
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 246 deletions.
diff --git a/src/lib/atoms/Input.stories.svelte b/src/lib/atoms/Input.stories.svelte
@@ -1,50 +1,50 @@
 <script>
-    import {Meta, Story} from '@storybook/addon-svelte-csf';
-    import Input from './Input.svelte';
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import Input from './Input.svelte';
 
-    export let label = 'Select Option';
-    export let description = 'Please choose an option';
-    export let placeholder = 'Select an option...';
-    export let isRequired = false;
-    export let value = '';
-    export let error = 'Error message.';
+  export let label = 'Select Option';
+  export let description = 'Please choose an option';
+  export let placeholder = 'Select an option...';
+  export let isRequired = false;
+  export let value = '';
+  export let error = 'Error message.';
 </script>
 
-<Meta title="UI Components/Atoms/Input" component={Input}/>
+<Meta title="UI Components/Atoms/Input" component={Input} />
 
 <!-- Primary -->
 <Story name="Input Primary" args={{ label, description, placeholder, isRequired, value }}>
-    <Input {label} {description} {placeholder} {isRequired} {value}/>
+  <Input {label} {description} {placeholder} {isRequired} {value} />
 </Story>
 
 <!-- Required Example -->
 <Story
-        name="Input Required"
-        args={{
+  name="Input Required"
+  args={{
     label: 'Required Input',
     description: 'This is required',
     isRequired: true,
   }}
 >
-    <Input {label} {description} {placeholder} isRequired={true} {value}/>
+  <Input {label} {description} {placeholder} isRequired={true} {value} />
 </Story>
 
 <!-- No Description Example -->
 <Story
-        name="SelectNoDescription"
-        args={{
+  name="SelectNoDescription"
+  args={{
     label: 'Select without Description',
   }}
 >
-    <Input {label} {placeholder} {isRequired} {value}/>
+  <Input {label} {placeholder} {isRequired} {value} />
 </Story>
 
 <!-- Error Example -->
 <Story
-        name="Input Error"
-        args={{
+  name="Input Error"
+  args={{
     label: 'Input with Error',
   }}
 >
-    <Input {label} {placeholder} {isRequired} {value} {error}/>
+  <Input {label} {placeholder} {isRequired} {value} {error} />
 </Story>
diff --git a/src/lib/atoms/Input.svelte b/src/lib/atoms/Input.svelte
@@ -1,46 +1,46 @@
 <script lang="ts">
-    import {cn} from "../../utils/utils";
-    import {Error} from "../assets";
+  import { cn } from '../../utils/utils';
+  import { Error } from '../assets';
 
-    export let label = 'Label';
-    export let isRequired = false;
-    export let description = '';
-    export let value = '';
-    export let placeholder = 'Enter some text...';
-    export let error: string | undefined;
+  export let label = 'Label';
+  export let isRequired = false;
+  export let description = '';
+  export let value = '';
+  export let placeholder = 'Enter some text...';
+  export let error: string | undefined;
 
-    function handleInput(event) {
-        value = event.target.value;
-    }
+  function handleInput(event) {
+    value = event.target.value;
+  }
 </script>
 
 <div class="flex flex-col gap-f4">
-    <label class="form-item-label">
-        {label}
-        {#if isRequired}
-            <span class="text-error">*</span>
-        {/if}
-    </label>
-    {#if description}
-        <span class="form-item-description">{description}</span>
+  <label class="form-item-label">
+    {label}
+    {#if isRequired}
+      <span class="text-error">*</span>
     {/if}
-    <div class="flex items-center gap-f12">
-        <input
-                class={cn(
-      'border-input bg-cream aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border px-3 py-2 sm focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      error ? 'border-2 border-error' : 'border border-gray3',
-      $$restProps.class
-    )}
-                type="text"
-                bind:value={value}
-                placeholder={placeholder}
-                on:input={handleInput}
-        />
-        {#if error}
-            <Error/>
-        {/if}
-    </div>
+  </label>
+  {#if description}
+    <span class="form-item-description">{description}</span>
+  {/if}
+  <div class="flex items-center gap-f12">
+    <input
+      class={cn(
+        'border-input aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground sm flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border bg-cream px-3 py-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+        error ? 'border-2 border-error' : 'border border-gray3',
+        $$restProps.class
+      )}
+      type="text"
+      bind:value
+      {placeholder}
+      on:input={handleInput}
+    />
     {#if error}
-        <span class="form-error">{error}</span>
+      <Error />
     {/if}
-</div>
+  </div>
+  {#if error}
+    <span class="form-error">{error}</span>
+  {/if}
+</div>
diff --git a/src/lib/atoms/Select.svelte b/src/lib/atoms/Select.svelte
@@ -1,28 +1,28 @@
 <script lang="ts">
-    import {Root, Trigger, Value, Content, Item, Label} from '../shadcnComponents/ui/select';
+  import { Root, Trigger, Value, Content, Item, Label } from '../shadcnComponents/ui/select';
 
-    export let label: string;
-    export let description: string | undefined;
-    export let placeholder: string | undefined;
-    export let isRequired: boolean = false;
-    export let error: string | undefined;
-    export let options: { optionLabel: string; value: string }[];
+  export let label: string;
+  export let description: string | undefined;
+  export let placeholder: string | undefined;
+  export let isRequired: boolean = false;
+  export let error: string | undefined;
+  export let options: { optionLabel: string; value: string }[];
 </script>
 
 <Root>
-    <Label {isRequired}>{label}</Label>
-    {#if description}
-        <span class="form-item-description">{description}</span>
-    {/if}
-    <Trigger {error}>
-        <Value {placeholder}/>
-    </Trigger>
-    <Content class={'border border-gray3'}>
-        {#each options as option}
-            <Item value={option.value}>{option.optionLabel}</Item>
-        {/each}
-    </Content>
-    {#if error}
-        <span class="form-error">{error}</span>
-    {/if}
-</Root>
+  <Label {isRequired}>{label}</Label>
+  {#if description}
+    <span class="form-item-description">{description}</span>
+  {/if}
+  <Trigger {error}>
+    <Value {placeholder} />
+  </Trigger>
+  <Content class={'border border-gray3'}>
+    {#each options as option}
+      <Item value={option.value}>{option.optionLabel}</Item>
+    {/each}
+  </Content>
+  {#if error}
+    <span class="form-error">{error}</span>
+  {/if}
+</Root>
diff --git a/src/lib/shadcnComponents/ui/accordion/accordion-content.svelte b/src/lib/shadcnComponents/ui/accordion/accordion-content.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
-    import {Accordion as AccordionPrimitive} from 'bits-ui';
-    import {slide} from 'svelte/transition';
-    import {cn} from '../../../../utils/utils';
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import { slide } from 'svelte/transition';
+  import { cn } from '../../../../utils/utils';
 
-    type $$Props = AccordionPrimitive.ContentProps;
+  type $$Props = AccordionPrimitive.ContentProps;
 
-    let className: $$Props['class'] = undefined;
-    export let transition: $$Props['transition'] = slide;
-    export let transitionConfig: $$Props['transitionConfig'] = {
-        duration: 200,
-    };
-    export {className as class};
+  let className: $$Props['class'] = undefined;
+  export let transition: $$Props['transition'] = slide;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 200,
+  };
+  export { className as class };
 </script>
 
 <AccordionPrimitive.Content
-        class={cn('overflow-hidden sm transition-all', className)}
-        {transition}
-        {transitionConfig}
-        {...$$restProps}
+  class={cn('sm overflow-hidden transition-all', className)}
+  {transition}
+  {transitionConfig}
+  {...$$restProps}
 >
-    <div class="pb-4 pt-0 text-normal">
-        <slot/>
-    </div>
+  <div class="pb-4 pt-0 text-normal">
+    <slot />
+  </div>
 </AccordionPrimitive.Content>
diff --git a/src/lib/shadcnComponents/ui/select/select-item.svelte b/src/lib/shadcnComponents/ui/select/select-item.svelte
@@ -1,40 +1,40 @@
 <script lang="ts">
-    import {Check} from '../../../assets/index';
-    import {Select as SelectPrimitive} from 'bits-ui';
-    import {cn} from '../../../../utils/utils';
+  import { Check } from '../../../assets/index';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn } from '../../../../utils/utils';
 
-    type $$Props = SelectPrimitive.ItemProps;
-    type $$Events = SelectPrimitive.ItemEvents;
+  type $$Props = SelectPrimitive.ItemProps;
+  type $$Events = SelectPrimitive.ItemEvents;
 
-    let className: $$Props['class'] = undefined;
-    export let value: $$Props['value'];
-    export let label: $$Props['label'] = undefined;
-    export let disabled: $$Props['disabled'] = undefined;
-    export {className as class};
+  let className: $$Props['class'] = undefined;
+  export let value: $$Props['value'];
+  export let label: $$Props['label'] = undefined;
+  export let disabled: $$Props['disabled'] = undefined;
+  export { className as class };
 </script>
 
 <SelectPrimitive.Item
-        {value}
-        {disabled}
-        {label}
-        class={cn(
-    'relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-2 pr-8 sm outline-none transition data-[disabled]:pointer-events-none data-[highlighted]:bg-gray3 data-[highlighted]:text-black data-[disabled]:opacity-50',
+  {value}
+  {disabled}
+  {label}
+  class={cn(
+    'sm relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-2 pr-8 outline-none transition data-[disabled]:pointer-events-none data-[highlighted]:bg-gray3 data-[highlighted]:text-black data-[disabled]:opacity-50',
     className
   )}
-        {...$$restProps}
-        on:click
-        on:keydown
-        on:focusin
-        on:focusout
-        on:pointerleave
-        on:pointermove
+  {...$$restProps}
+  on:click
+  on:keydown
+  on:focusin
+  on:focusout
+  on:pointerleave
+  on:pointermove
 >
-    <slot>
-        {label || value}
-    </slot>
-    <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+  <slot>
+    {label || value}
+  </slot>
+  <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
     <SelectPrimitive.ItemIndicator>
-      <Check class="h-4 w-4"/>
+      <Check class="h-4 w-4" />
     </SelectPrimitive.ItemIndicator>
   </span>
 </SelectPrimitive.Item>
diff --git a/src/lib/shadcnComponents/ui/select/select-label.svelte b/src/lib/shadcnComponents/ui/select/select-label.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-    import {Select as SelectPrimitive} from 'bits-ui';
-    import {cn} from '../../../../utils/utils';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn } from '../../../../utils/utils';
 
-    export let isRequired: boolean;
+  export let isRequired: boolean;
 
-    type $$Props = SelectPrimitive.LabelProps & { isRequired: boolean };
+  type $$Props = SelectPrimitive.LabelProps & { isRequired: boolean };
 
-    let className: $$Props['class'] = undefined;
-    export {className as class};
+  let className: $$Props['class'] = undefined;
+  export { className as class };
 </script>
 
 <SelectPrimitive.Label class={cn('form-item-label', className)} {...$$restProps}>
-    <slot/>
-    {#if isRequired}
-        <span class="text-error">*</span>
-    {/if}
+  <slot />
+  {#if isRequired}
+    <span class="text-error">*</span>
+  {/if}
 </SelectPrimitive.Label>