From b20007996a06e3878799165952c002b5d40b7756 Mon Sep 17 00:00:00 2001 From: "V. Claire Olmstead" <43625033+claireolmstead@users.noreply.github.com> Date: Thu, 17 Oct 2024 18:54:32 -0700 Subject: [PATCH] 8 icons + logos (#25) * add accordion, accorfion list, and icon stories * update error * update * icons and logos added with storybooks * format * update storybook organization * pulled down fixes and cleaned up --------- Co-authored-by: Claire Olmstead --- .storybook/CustomTheme.js | 13 ++- .storybook/preview.js | 15 ++- src/assets/Assets.stories.svelte | 67 ++++++++++++ src/assets/icons/Arrow.svelte | 13 +++ src/{ => assets}/icons/Check.svelte | 0 src/assets/icons/CheckFilled.svelte | 14 +++ src/{ => assets}/icons/Chevron.svelte | 0 src/assets/icons/Copy.svelte | 13 +++ src/{ => assets}/icons/Error.svelte | 0 src/assets/icons/Exit.svelte | 13 +++ src/assets/icons/HamburgerMenu.svelte | 16 +++ src/assets/icons/Planet.svelte | 24 +++++ src/assets/icons/UserFilled.svelte | 13 +++ src/assets/icons/UserKey.svelte | 13 +++ src/assets/icons/UserLock.svelte | 13 +++ src/assets/icons/UserOutlined.svelte | 13 +++ src/assets/icons/Wallet.svelte | 13 +++ src/assets/logos/FrequencyAccessLogo.svelte | 42 ++++++++ src/assets/logos/FrequencyIcon.svelte | 10 ++ src/assets/logos/FrequencyIconFilled.svelte | 29 +++++ src/icons/Chevron.svelte.d.ts | 18 ---- src/icons/Icons.stories.svelte | 25 ----- src/lib/Spacing.stories.svelte | 6 +- src/lib/atoms/Button.stories.svelte | 49 +++++---- src/lib/atoms/Button.svelte | 96 ++++++++--------- src/lib/atoms/Select.stories.svelte | 2 +- src/lib/colors/ColorPalette.stories.svelte | 4 +- src/lib/features/Accordion.stories.svelte | 2 +- src/lib/features/AccordionList.stories.svelte | 2 +- src/lib/index.ts | 2 +- .../ui/accordion/accordion-item.svelte | 14 +-- .../ui/accordion/accordion-trigger.svelte | 2 +- .../shadcnComponents/ui/accordion/index.ts | 26 ++--- src/lib/shadcnComponents/ui/select/index.d.ts | 33 ++++-- src/lib/shadcnComponents/ui/select/index.ts | 50 ++++----- .../ui/select/select-content.svelte | 54 +++++----- .../ui/select/select-content.svelte.d.ts | 19 ++-- .../ui/select/select-item.svelte | 2 +- .../ui/select/select-item.svelte.d.ts | 15 ++- .../ui/select/select-label.svelte.d.ts | 31 +++--- .../ui/select/select-separator.svelte | 12 +-- .../ui/select/select-separator.svelte.d.ts | 25 +++-- .../ui/select/select-trigger.svelte | 16 ++- .../ui/select/select-trigger.svelte.d.ts | 59 ++++++----- src/lib/typography/Typography.stories.svelte | 2 +- src/utils.d.ts | 4 +- src/utils.ts | 100 ++++++++---------- svelte.config.js | 2 +- 48 files changed, 645 insertions(+), 361 deletions(-) create mode 100644 src/assets/Assets.stories.svelte create mode 100644 src/assets/icons/Arrow.svelte rename src/{ => assets}/icons/Check.svelte (100%) create mode 100644 src/assets/icons/CheckFilled.svelte rename src/{ => assets}/icons/Chevron.svelte (100%) create mode 100644 src/assets/icons/Copy.svelte rename src/{ => assets}/icons/Error.svelte (100%) create mode 100644 src/assets/icons/Exit.svelte create mode 100644 src/assets/icons/HamburgerMenu.svelte create mode 100644 src/assets/icons/Planet.svelte create mode 100644 src/assets/icons/UserFilled.svelte create mode 100644 src/assets/icons/UserKey.svelte create mode 100644 src/assets/icons/UserLock.svelte create mode 100644 src/assets/icons/UserOutlined.svelte create mode 100644 src/assets/icons/Wallet.svelte create mode 100644 src/assets/logos/FrequencyAccessLogo.svelte create mode 100644 src/assets/logos/FrequencyIcon.svelte create mode 100644 src/assets/logos/FrequencyIconFilled.svelte delete mode 100644 src/icons/Chevron.svelte.d.ts delete mode 100644 src/icons/Icons.stories.svelte diff --git a/.storybook/CustomTheme.js b/.storybook/CustomTheme.js index 715621e..bcea85c 100644 --- a/.storybook/CustomTheme.js +++ b/.storybook/CustomTheme.js @@ -1,10 +1,9 @@ -import {create} from '@storybook/theming'; +import { create } from '@storybook/theming'; export default create({ - base: 'dark', - brandTitle: 'Svelte + Storybook + TailwindCSS', - brandUrl: 'https://svelte-storybook-tailwindcss.sveltehub.dev', - brandImage: - 'https://sveltehub.dev/templates/storybook-tailwindcss/logo-white.png', - brandTarget: '_blank' + base: 'dark', + brandTitle: 'Svelte + Storybook + TailwindCSS', + brandUrl: 'https://svelte-storybook-tailwindcss.sveltehub.dev', + brandImage: 'https://sveltehub.dev/templates/storybook-tailwindcss/logo-white.png', + brandTarget: '_blank', }); diff --git a/.storybook/preview.js b/.storybook/preview.js index 8b542fe..ee53077 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -2,13 +2,18 @@ import '../src/styles/index.css'; export const parameters = { backgrounds: { - default: 'light' + values: [ + { name: 'Navy', value: '#18465E' }, + { name: 'Cream', value: '#FEFAF3' }, + { name: 'White', value: '#FFFFFF' }, + ], + default: 'Cream', }, - actions: {argTypesRegex: '^on[A-Z].*'}, + actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, - date: /Date$/ - } - } + date: /Date$/, + }, + }, }; diff --git a/src/assets/Assets.stories.svelte b/src/assets/Assets.stories.svelte new file mode 100644 index 0000000..112f0bc --- /dev/null +++ b/src/assets/Assets.stories.svelte @@ -0,0 +1,67 @@ + + + + + +
+ {#each Object.entries(icons) as [name, Icon]} +
+

{name}

+ +
+ {/each} +
+ + + +
+ {#each Object.entries(logos) as [name, Logo]} +
+

{name}

+ +
+ {/each} +
+ diff --git a/src/assets/icons/Arrow.svelte b/src/assets/icons/Arrow.svelte new file mode 100644 index 0000000..3691bfd --- /dev/null +++ b/src/assets/icons/Arrow.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/icons/Check.svelte b/src/assets/icons/Check.svelte similarity index 100% rename from src/icons/Check.svelte rename to src/assets/icons/Check.svelte diff --git a/src/assets/icons/CheckFilled.svelte b/src/assets/icons/CheckFilled.svelte new file mode 100644 index 0000000..7ed4e3b --- /dev/null +++ b/src/assets/icons/CheckFilled.svelte @@ -0,0 +1,14 @@ + + + + diff --git a/src/icons/Chevron.svelte b/src/assets/icons/Chevron.svelte similarity index 100% rename from src/icons/Chevron.svelte rename to src/assets/icons/Chevron.svelte diff --git a/src/assets/icons/Copy.svelte b/src/assets/icons/Copy.svelte new file mode 100644 index 0000000..14e7a5c --- /dev/null +++ b/src/assets/icons/Copy.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/icons/Error.svelte b/src/assets/icons/Error.svelte similarity index 100% rename from src/icons/Error.svelte rename to src/assets/icons/Error.svelte diff --git a/src/assets/icons/Exit.svelte b/src/assets/icons/Exit.svelte new file mode 100644 index 0000000..fc31c56 --- /dev/null +++ b/src/assets/icons/Exit.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/assets/icons/HamburgerMenu.svelte b/src/assets/icons/HamburgerMenu.svelte new file mode 100644 index 0000000..08f5622 --- /dev/null +++ b/src/assets/icons/HamburgerMenu.svelte @@ -0,0 +1,16 @@ + + + diff --git a/src/assets/icons/Planet.svelte b/src/assets/icons/Planet.svelte new file mode 100644 index 0000000..cd423d0 --- /dev/null +++ b/src/assets/icons/Planet.svelte @@ -0,0 +1,24 @@ + + + + + + diff --git a/src/assets/icons/UserFilled.svelte b/src/assets/icons/UserFilled.svelte new file mode 100644 index 0000000..13968cf --- /dev/null +++ b/src/assets/icons/UserFilled.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/assets/icons/UserKey.svelte b/src/assets/icons/UserKey.svelte new file mode 100644 index 0000000..f353882 --- /dev/null +++ b/src/assets/icons/UserKey.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/assets/icons/UserLock.svelte b/src/assets/icons/UserLock.svelte new file mode 100644 index 0000000..86a187a --- /dev/null +++ b/src/assets/icons/UserLock.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/assets/icons/UserOutlined.svelte b/src/assets/icons/UserOutlined.svelte new file mode 100644 index 0000000..0947f8f --- /dev/null +++ b/src/assets/icons/UserOutlined.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/assets/icons/Wallet.svelte b/src/assets/icons/Wallet.svelte new file mode 100644 index 0000000..cdb70a9 --- /dev/null +++ b/src/assets/icons/Wallet.svelte @@ -0,0 +1,13 @@ + + + diff --git a/src/assets/logos/FrequencyAccessLogo.svelte b/src/assets/logos/FrequencyAccessLogo.svelte new file mode 100644 index 0000000..bd80f92 --- /dev/null +++ b/src/assets/logos/FrequencyAccessLogo.svelte @@ -0,0 +1,42 @@ + + + + + + + + + + + diff --git a/src/assets/logos/FrequencyIcon.svelte b/src/assets/logos/FrequencyIcon.svelte new file mode 100644 index 0000000..48860f1 --- /dev/null +++ b/src/assets/logos/FrequencyIcon.svelte @@ -0,0 +1,10 @@ + + + diff --git a/src/assets/logos/FrequencyIconFilled.svelte b/src/assets/logos/FrequencyIconFilled.svelte new file mode 100644 index 0000000..26eebb0 --- /dev/null +++ b/src/assets/logos/FrequencyIconFilled.svelte @@ -0,0 +1,29 @@ + + + + + + + + + + + + + diff --git a/src/icons/Chevron.svelte.d.ts b/src/icons/Chevron.svelte.d.ts deleted file mode 100644 index b51ca73..0000000 --- a/src/icons/Chevron.svelte.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { SvelteComponent } from "svelte"; -declare const __propDef: { - props: { - [x: string]: any; - }; - events: { - [evt: string]: CustomEvent; - }; - slots: {}; - exports?: undefined; - bindings?: undefined; -}; -export type ChevronProps = typeof __propDef.props; -export type ChevronEvents = typeof __propDef.events; -export type ChevronSlots = typeof __propDef.slots; -export default class Chevron extends SvelteComponent { -} -export {}; diff --git a/src/icons/Icons.stories.svelte b/src/icons/Icons.stories.svelte deleted file mode 100644 index 91b7bd7..0000000 --- a/src/icons/Icons.stories.svelte +++ /dev/null @@ -1,25 +0,0 @@ - - - - - -
- {#each Object.entries(icons) as [name, Icon]} -
-

{name}

- -
- {/each} -
- diff --git a/src/lib/Spacing.stories.svelte b/src/lib/Spacing.stories.svelte index e9a83fb..adb3f9b 100644 --- a/src/lib/Spacing.stories.svelte +++ b/src/lib/Spacing.stories.svelte @@ -2,10 +2,10 @@ import {Meta, Story} from '@storybook/addon-svelte-csf'; - + -
+
f4 - 4px
f8 - 8px
f12 - 12px
@@ -24,4 +24,4 @@
f224 - 224px
f256 - 256px
- \ No newline at end of file + diff --git a/src/lib/atoms/Button.stories.svelte b/src/lib/atoms/Button.stories.svelte index 022ad96..7823505 100644 --- a/src/lib/atoms/Button.stories.svelte +++ b/src/lib/atoms/Button.stories.svelte @@ -1,40 +1,39 @@ - + - -
- - - - - -
+
+ + + + + +
-
- - - - - -
+
+ + + + + +
-
- - - - - -
+
+ + + + + +
diff --git a/src/lib/atoms/Button.svelte b/src/lib/atoms/Button.svelte index 6e06054..8b19eae 100644 --- a/src/lib/atoms/Button.svelte +++ b/src/lib/atoms/Button.svelte @@ -1,55 +1,53 @@ diff --git a/src/lib/atoms/Select.stories.svelte b/src/lib/atoms/Select.stories.svelte index 0380815..d4e4082 100644 --- a/src/lib/atoms/Select.stories.svelte +++ b/src/lib/atoms/Select.stories.svelte @@ -14,7 +14,7 @@ export let error = 'Error message.'; - + diff --git a/src/lib/colors/ColorPalette.stories.svelte b/src/lib/colors/ColorPalette.stories.svelte index 5283c7f..2f400f4 100644 --- a/src/lib/colors/ColorPalette.stories.svelte +++ b/src/lib/colors/ColorPalette.stories.svelte @@ -3,9 +3,9 @@ import { tailwindColors } from '../../../tailwindColors.ts'; - + - +
{#each Object.entries(tailwindColors) as [colorName, color]}
diff --git a/src/lib/features/Accordion.stories.svelte b/src/lib/features/Accordion.stories.svelte index 09bae4f..8e48b16 100644 --- a/src/lib/features/Accordion.stories.svelte +++ b/src/lib/features/Accordion.stories.svelte @@ -4,7 +4,7 @@ import Accordion from './Accordion.svelte'; - + diff --git a/src/lib/features/AccordionList.stories.svelte b/src/lib/features/AccordionList.stories.svelte index 0c41506..0697efa 100644 --- a/src/lib/features/AccordionList.stories.svelte +++ b/src/lib/features/AccordionList.stories.svelte @@ -5,7 +5,7 @@ import Accordion from './Accordion.svelte'; - + diff --git a/src/lib/index.ts b/src/lib/index.ts index 93ba9d3..28bd9cb 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,4 +1,4 @@ export { default as Button } from './atoms/Button.svelte'; export { default as Select } from './atoms/Select.svelte'; export { default as Typography } from './typography/Typography.svelte'; -import '../styles/index.css'; \ No newline at end of file +import '../styles/index.css'; diff --git a/src/lib/shadcnComponents/ui/accordion/accordion-item.svelte b/src/lib/shadcnComponents/ui/accordion/accordion-item.svelte index dc14460..09ddbb3 100644 --- a/src/lib/shadcnComponents/ui/accordion/accordion-item.svelte +++ b/src/lib/shadcnComponents/ui/accordion/accordion-item.svelte @@ -1,14 +1,14 @@ - - + + diff --git a/src/lib/shadcnComponents/ui/accordion/accordion-trigger.svelte b/src/lib/shadcnComponents/ui/accordion/accordion-trigger.svelte index caca9e6..9be5306 100644 --- a/src/lib/shadcnComponents/ui/accordion/accordion-trigger.svelte +++ b/src/lib/shadcnComponents/ui/accordion/accordion-trigger.svelte @@ -1,6 +1,6 @@ -
- -
+
+ +
diff --git a/src/lib/shadcnComponents/ui/select/select-content.svelte.d.ts b/src/lib/shadcnComponents/ui/select/select-content.svelte.d.ts index f63d3ea..e41db08 100644 --- a/src/lib/shadcnComponents/ui/select/select-content.svelte.d.ts +++ b/src/lib/shadcnComponents/ui/select/select-content.svelte.d.ts @@ -1,15 +1,18 @@ -import { SvelteComponent } from "svelte"; +import { SvelteComponent } from 'svelte'; import { Select as SelectPrimitive } from 'bits-ui'; declare const __propDef: { - props: SelectPrimitive.ContentProps; - slots: { - default: {}; - }; - events: SelectPrimitive.ContentEvents; + props: SelectPrimitive.ContentProps; + slots: { + default: {}; + }; + events: SelectPrimitive.ContentEvents; }; export type SelectContentProps = typeof __propDef.props; export type SelectContentEvents = typeof __propDef.events; export type SelectContentSlots = typeof __propDef.slots; -export default class SelectContent extends SvelteComponent { -} +export default class SelectContent extends SvelteComponent< + SelectContentProps, + SelectContentEvents, + SelectContentSlots +> {} export {}; diff --git a/src/lib/shadcnComponents/ui/select/select-item.svelte b/src/lib/shadcnComponents/ui/select/select-item.svelte index 5cab81e..a52c156 100644 --- a/src/lib/shadcnComponents/ui/select/select-item.svelte +++ b/src/lib/shadcnComponents/ui/select/select-item.svelte @@ -1,5 +1,5 @@ - + diff --git a/src/lib/shadcnComponents/ui/select/select-separator.svelte.d.ts b/src/lib/shadcnComponents/ui/select/select-separator.svelte.d.ts index d1fe3d6..493c3e0 100644 --- a/src/lib/shadcnComponents/ui/select/select-separator.svelte.d.ts +++ b/src/lib/shadcnComponents/ui/select/select-separator.svelte.d.ts @@ -1,17 +1,20 @@ -import { SvelteComponent } from "svelte"; -import { Select as SelectPrimitive } from "bits-ui"; +import { SvelteComponent } from 'svelte'; +import { Select as SelectPrimitive } from 'bits-ui'; declare const __propDef: { - props: SelectPrimitive.SeparatorProps; - events: { - [evt: string]: CustomEvent; - }; - slots: {}; - exports?: {} | undefined; - bindings?: string | undefined; + props: SelectPrimitive.SeparatorProps; + events: { + [evt: string]: CustomEvent; + }; + slots: {}; + exports?: {} | undefined; + bindings?: string | undefined; }; export type SelectSeparatorProps = typeof __propDef.props; export type SelectSeparatorEvents = typeof __propDef.events; export type SelectSeparatorSlots = typeof __propDef.slots; -export default class SelectSeparator extends SvelteComponent { -} +export default class SelectSeparator extends SvelteComponent< + SelectSeparatorProps, + SelectSeparatorEvents, + SelectSeparatorSlots +> {} export {}; diff --git a/src/lib/shadcnComponents/ui/select/select-trigger.svelte b/src/lib/shadcnComponents/ui/select/select-trigger.svelte index 11662d4..807edbf 100644 --- a/src/lib/shadcnComponents/ui/select/select-trigger.svelte +++ b/src/lib/shadcnComponents/ui/select/select-trigger.svelte @@ -1,8 +1,8 @@
- span]:text-muted-foreground flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', error ? 'border-2 border-error' : 'border border-gray3', className @@ -26,9 +26,7 @@ on:keydown > -
- -
+ {#if error} diff --git a/src/lib/shadcnComponents/ui/select/select-trigger.svelte.d.ts b/src/lib/shadcnComponents/ui/select/select-trigger.svelte.d.ts index f3696fa..1865437 100644 --- a/src/lib/shadcnComponents/ui/select/select-trigger.svelte.d.ts +++ b/src/lib/shadcnComponents/ui/select/select-trigger.svelte.d.ts @@ -1,36 +1,41 @@ -import { SvelteComponent } from "svelte"; +import { SvelteComponent } from 'svelte'; import { Select as SelectPrimitive } from 'bits-ui'; declare const __propDef: { - props: { - asChild?: boolean | undefined; - el?: HTMLButtonElement | undefined; - } & import("svelte/elements").HTMLButtonAttributes & { - error: string | undefined; + props: { + asChild?: boolean | undefined; + el?: HTMLButtonElement | undefined; + } & import('svelte/elements').HTMLButtonAttributes & { + error: string | undefined; }; - slots: { - default: { - builder: { - readonly 'aria-activedescendant': string | undefined; - readonly 'aria-autocomplete': "list"; - readonly 'aria-controls': string; - readonly 'aria-expanded': boolean; - readonly 'aria-labelledby': string; - readonly id: string; - readonly role: "combobox"; - readonly disabled: true | undefined; - readonly type: "button" | undefined; - } & { - [x: `data-melt-${string}`]: ""; - } & { - action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"input" | "click" | "keydown">; - }; - }; + slots: { + default: { + builder: { + readonly 'aria-activedescendant': string | undefined; + readonly 'aria-autocomplete': 'list'; + readonly 'aria-controls': string; + readonly 'aria-expanded': boolean; + readonly 'aria-labelledby': string; + readonly id: string; + readonly role: 'combobox'; + readonly disabled: true | undefined; + readonly type: 'button' | undefined; + } & { + [x: `data-melt-${string}`]: ''; + } & { + action: ( + node: HTMLElement + ) => import('@melt-ui/svelte/internal/types').MeltActionReturn<'input' | 'click' | 'keydown'>; + }; }; - events: SelectPrimitive.TriggerEvents; + }; + events: SelectPrimitive.TriggerEvents; }; export type SelectTriggerProps = typeof __propDef.props; export type SelectTriggerEvents = typeof __propDef.events; export type SelectTriggerSlots = typeof __propDef.slots; -export default class SelectTrigger extends SvelteComponent { -} +export default class SelectTrigger extends SvelteComponent< + SelectTriggerProps, + SelectTriggerEvents, + SelectTriggerSlots +> {} export {}; diff --git a/src/lib/typography/Typography.stories.svelte b/src/lib/typography/Typography.stories.svelte index dcb3a94..58b673a 100644 --- a/src/lib/typography/Typography.stories.svelte +++ b/src/lib/typography/Typography.stories.svelte @@ -3,7 +3,7 @@ import Typography from './Typography.svelte'; - + H1 diff --git a/src/utils.d.ts b/src/utils.d.ts index 90657a8..81d9d93 100644 --- a/src/utils.d.ts +++ b/src/utils.d.ts @@ -1,5 +1,5 @@ -import { type ClassValue } from "clsx"; -import type { TransitionConfig } from "svelte/transition"; +import { type ClassValue } from 'clsx'; +import type { TransitionConfig } from 'svelte/transition'; export declare function cn(...inputs: ClassValue[]): string; type FlyAndScaleParams = { y?: number; diff --git a/src/utils.ts b/src/utils.ts index 8871245..7239237 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,62 +1,56 @@ -import { type ClassValue, clsx } from "clsx"; -import { twMerge } from "tailwind-merge"; -import { cubicOut } from "svelte/easing"; -import type { TransitionConfig } from "svelte/transition"; +import { type ClassValue, clsx } from 'clsx'; +import { twMerge } from 'tailwind-merge'; +import { cubicOut } from 'svelte/easing'; +import type { TransitionConfig } from 'svelte/transition'; export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); + return twMerge(clsx(inputs)); } type FlyAndScaleParams = { - y?: number; - x?: number; - start?: number; - duration?: number; + y?: number; + x?: number; + start?: number; + duration?: number; }; export const flyAndScale = ( - node: Element, - params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 } + node: Element, + params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 } ): TransitionConfig => { - const style = getComputedStyle(node); - const transform = style.transform === "none" ? "" : style.transform; - - const scaleConversion = ( - valueA: number, - scaleA: [number, number], - scaleB: [number, number] - ) => { - const [minA, maxA] = scaleA; - const [minB, maxB] = scaleB; - - const percentage = (valueA - minA) / (maxA - minA); - const valueB = percentage * (maxB - minB) + minB; - - return valueB; - }; - - const styleToString = ( - style: Record - ): string => { - return Object.keys(style).reduce((str, key) => { - if (style[key] === undefined) return str; - return str + `${key}:${style[key]};`; - }, ""); - }; - - return { - duration: params.duration ?? 200, - delay: 0, - css: (t) => { - const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]); - const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]); - const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]); - - return styleToString({ - transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`, - opacity: t - }); - }, - easing: cubicOut - }; -}; \ No newline at end of file + const style = getComputedStyle(node); + const transform = style.transform === 'none' ? '' : style.transform; + + const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => { + const [minA, maxA] = scaleA; + const [minB, maxB] = scaleB; + + const percentage = (valueA - minA) / (maxA - minA); + const valueB = percentage * (maxB - minB) + minB; + + return valueB; + }; + + const styleToString = (style: Record): string => { + return Object.keys(style).reduce((str, key) => { + if (style[key] === undefined) return str; + return str + `${key}:${style[key]};`; + }, ''); + }; + + return { + duration: params.duration ?? 200, + delay: 0, + css: (t) => { + const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]); + const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]); + const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]); + + return styleToString({ + transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`, + opacity: t, + }); + }, + easing: cubicOut, + }; +}; diff --git a/svelte.config.js b/svelte.config.js index e3f5a25..a861ff9 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -15,7 +15,7 @@ export default { $atoms: resolve('./src/lib/atoms'), $typography: resolve('./src/lib/typography'), $colors: resolve('./src/lib/tailwindColors'), - $icons: resolve('./src/icons'), + $assets: resolve('./src/assets'), }, }, };