webcoreui 0.2.0 → 0.4.0

package/index.d.ts

@@ -0,0 +1,99 @@
+
+type ModalCallback = {
+    trigger: Element | null
+    modal: HTMLElement
+}
+
+type Modal = {
+    trigger: string
+    modal: string
+    onOpen?: (args: ModalCallback) => unknown
+    onClose?: (args: ModalCallback) => unknown
+}
+
+type PopoverPosition = 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+
+type PopoverCallback = {
+    trigger: HTMLElement
+    popover: HTMLElement
+    position: PopoverPosition | undefined
+}
+
+type Popover = {
+    trigger: string
+    popover: string
+    position?: PopoverPosition
+    offset?: number
+    closeOnBlur?: boolean
+    onOpen?: (args: PopoverCallback) => unknown
+    onClose?: (args: PopoverCallback) => unknown
+}
+
+type Toast = {
+    element: string
+    timeout?: number
+    title?: string
+    content?: string
+    position?: 'bottom-left'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-full'
+        | 'top-full'
+        | null
+}
+
+declare module 'webcoreui' {
+    export const classNames: (classes: any[]) => string
+
+    export const setCookie: (name: string, value: string, days: number) => void
+    export const getCookie: (name: string) => string | null
+    export const removeCookie: (name: string) => void
+
+    export const debounce: <T extends (...args: any[]) => any>(
+        fn: T,
+        waitFor?: number
+    ) => {
+        (...args: Parameters<T>): void
+        cancel: () => void
+    }
+
+    export const dispatch: (event: string, detail: unknown) => void
+    export const listen: (event: string, callback: (e: any) => unknown) => {
+        remove: () => void
+    }
+
+    export const clamp: (num: number, min: number, max: number) => number
+    export const lerp: (start: number, end: number, value: number) => number
+    export const invlerp: (start: number, end: number, value: number) => number
+    export const interpolate: (
+        value: number,
+        input: [start: number, end: number],
+        output: [start: number, end: number]
+    ) => number
+
+    export const modal: (config: Modal | string) => {
+        open: () => void
+        remove: () => void
+    } | void
+    export const closeModal: (modal: string) => void
+
+    export const popover: (config: Popover) => {
+        remove: () => void
+    } | void
+    export const closePopover: (selector: string) => void
+
+    export const setDefaultTimeout: (time: number) => number
+    export const toast: (config: Toast | string) => void
+    export const hideToast: (element: string) => void
+}

package/index.js

@@ -1,6 +1,8 @@
 export * from './utils/classNames.ts'
 export * from './utils/cookies.ts'
+export * from './utils/debounce.ts'
 export * from './utils/event.ts'
 export * from './utils/interpolate.ts'
 export * from './utils/modal.ts'
+export * from './utils/popover.ts'
 export * from './utils/toast.ts'

package/package.json

@@ -1,24 +1,39 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.2.0",
+    "version": "0.4.0",
     "scripts": {
+        "prepare": "husky",
+        "pre-commit": "lint-staged",
         "dev": "astro dev",
         "build": "astro check && astro build",
         "build:package": "node scripts/build.js",
         "test": "echo \"Error: no test specified\"",
-        "create-component": "node scripts/createComponent.js"
+        "create-component": "node scripts/createComponent.js",
+        "lint": "eslint src/**/* --fix"
     },
-    "dependencies": {
+    "devDependencies": {
         "@astrojs/check": "0.7.0",
         "@astrojs/react": "3.5.0",
         "@astrojs/svelte": "5.5.0",
+        "@eslint/js": "9.9.1",
+        "@typescript-eslint/parser": "^8.3.0",
         "astro": "4.10.2",
+        "astro-eslint-parser": "1.0.2",
+        "eslint": "9.9.1",
+        "eslint-plugin-astro": "1.2.3",
+        "eslint-plugin-react": "7.35.0",
+        "eslint-plugin-simple-import-sort": "12.1.1",
+        "eslint-plugin-svelte": "2.43.0",
+        "husky": "9.1.5",
+        "lint-staged": "15.2.9",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "sass": "1.77.5",
         "svelte": "4.2.18",
-        "typescript": "5.4.5"
+        "svelte-eslint-parser": "0.41.0",
+        "typescript": "5.4.5",
+        "typescript-eslint": "8.3.0"
     },
     "exports": {
         ".": "./index.js",
@@ -43,6 +58,7 @@
         "react.d.ts",
         "react.js",
         "index.js",
+        "index.d.ts",
         "README.md",
         "LICENSE"
     ],
@@ -68,5 +84,8 @@
     },
     "bugs": {
         "url": "https://github.com/Frontendland/webcoreui/issues"
+    },
+    "lint-staged": {
+        "*.{js,ts,jsx,tsx,svelte,astro}": "eslint src/**/*"
     }
 }

package/react.d.ts

@@ -6,19 +6,26 @@ import type { ReactBadgeProps } from './components/Badge/badge'
 import type { ReactButtonProps } from './components/Button/button'
 import type { ReactCardProps } from './components/Card/card'
 import type { ReactCheckboxProps } from './components/Checkbox/checkbox'
+import type { ReactCollapsibleProps } from './components/Collapsible/collapsible'
 import type { ReactConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { ReactGroupProps } from './components/Group/group'
 import type { IconProps } from './components/Icon/icon'
 import type { ReactInputProps } from './components/Input/input'
+import type { ReactListProps } from './components/List/list'
 import type { ReactMenuProps } from './components/Menu/menu'
 import type { ReactModalProps } from './components/Modal/modal'
+import type { ReactPopoverProps } from './components/Popover/popover'
 import type { ProgressProps } from './components/Progress/progress'
 import type { ReactRadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
+import type { ReactSelectProps } from './components/Select/select'
+import type { ReactSheetProps } from './components/Sheet/sheet'
 import type { ReactSliderProps } from './components/Slider/slider'
 import type { SpinnerProps } from './components/Spinner/spinner'
 import type { ReactSwitchProps } from './components/Switch/switch'
 import type { TableProps } from './components/Table/table'
 import type { ReactTabsProps } from './components/Tabs/tabs'
+import type { ReactTextareaProps } from './components/Textarea/textarea'
 import type { ReactThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
 import type { ReactTimelineProps } from './components/Timeline/timeline'
 import type { ReactTimelineItemProps } from './components/TimelineItem/timelineitem'
@@ -32,19 +39,26 @@ declare module 'webcoreui/react' {
 	export const Button: FC<ReactButtonProps>
 	export const Card: FC<ReactCardProps>
 	export const Checkbox: FC<ReactCheckboxProps>
+	export const Collapsible: FC<ReactCollapsibleProps>
 	export const ConditionalWrapper: FC<ReactConditionalWrapperProps>
+	export const Group: FC<ReactGroupProps>
 	export const Icon: FC<IconProps>
 	export const Input: FC<ReactInputProps>
+	export const List: FC<ReactListProps>
 	export const Menu: FC<ReactMenuProps>
 	export const Modal: FC<ReactModalProps>
+	export const Popover: FC<ReactPopoverProps>
 	export const Progress: FC<ProgressProps>
 	export const Radio: FC<ReactRadioProps>
 	export const Rating: FC<RatingProps>
+	export const Select: FC<ReactSelectProps>
+	export const Sheet: FC<ReactSheetProps>
 	export const Slider: FC<ReactSliderProps>
 	export const Spinner: FC<SpinnerProps>
 	export const Switch: FC<ReactSwitchProps>
 	export const Table: FC<TableProps>
 	export const Tabs: FC<ReactTabsProps>
+	export const Textarea: FC<ReactTextareaProps>
 	export const ThemeSwitcher: FC<ReactThemeSwitcherProps>
 	export const Timeline: FC<ReactTimelineProps>
 	export const TimelineItem: FC<ReactTimelineItemProps>

package/react.js

@@ -5,19 +5,26 @@ import BadgeComponent from './components/Badge/Badge.tsx'
 import ButtonComponent from './components/Button/Button.tsx'
 import CardComponent from './components/Card/Card.tsx'
 import CheckboxComponent from './components/Checkbox/Checkbox.tsx'
+import CollapsibleComponent from './components/Collapsible/Collapsible.tsx'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.tsx'
+import GroupComponent from './components/Group/Group.tsx'
 import IconComponent from './components/Icon/Icon.tsx'
 import InputComponent from './components/Input/Input.tsx'
+import ListComponent from './components/List/List.tsx'
 import MenuComponent from './components/Menu/Menu.tsx'
 import ModalComponent from './components/Modal/Modal.tsx'
+import PopoverComponent from './components/Popover/Popover.tsx'
 import ProgressComponent from './components/Progress/Progress.tsx'
 import RadioComponent from './components/Radio/Radio.tsx'
 import RatingComponent from './components/Rating/Rating.tsx'
+import SelectComponent from './components/Select/Select.tsx'
+import SheetComponent from './components/Sheet/Sheet.tsx'
 import SliderComponent from './components/Slider/Slider.tsx'
 import SpinnerComponent from './components/Spinner/Spinner.tsx'
 import SwitchComponent from './components/Switch/Switch.tsx'
 import TableComponent from './components/Table/Table.tsx'
 import TabsComponent from './components/Tabs/Tabs.tsx'
+import TextareaComponent from './components/Textarea/Textarea.tsx'
 import ThemeSwitcherComponent from './components/ThemeSwitcher/ThemeSwitcher.tsx'
 import TimelineComponent from './components/Timeline/Timeline.tsx'
 import TimelineItemComponent from './components/TimelineItem/TimelineItem.tsx'
@@ -30,19 +37,26 @@ export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
 export const Checkbox = CheckboxComponent
+export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
+export const List = ListComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Select = SelectComponent
+export const Sheet = SheetComponent
 export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent
+export const Textarea = TextareaComponent
 export const ThemeSwitcher = ThemeSwitcherComponent
 export const Timeline = TimelineComponent
 export const TimelineItem = TimelineItemComponent

package/scss/config/mixins.scss

@@ -330,18 +330,20 @@
 }
 
 @mixin transition($args...) {
-    $property: all;
-    $speed: .3s;
-
-    @each $arg in $args {
-        @if (meta.type-of($arg) == 'number') {
-            $speed: $arg;
-        } @else {
-            $property: $arg;
+    @if (not $disableAnimations) {
+        $property: all;
+        $speed: .3s;
+    
+        @each $arg in $args {
+            @if (meta.type-of($arg) == 'number') {
+                $speed: $arg;
+            } @else {
+                $property: $arg;
+            }
         }
+    
+        transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
     }
-
-    transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
 @mixin typography($args...) {

package/scss/config/variables.scss

@@ -0,0 +1 @@
+$disableAnimations: false !default;

package/scss/config.scss

@@ -2,5 +2,6 @@
 @import './config/color-palette';
 @import './config/css-values';
 @import './config/typography';
+@import './config/variables';
 @import './config/layout';
 @import './config/mixins';

package/scss/global/utility.scss

@@ -84,6 +84,8 @@ $alignments: (
     .grid {
         @include layout(grid, default);
 
+        grid-template-columns: minmax(0, 1fr);
+
         &.col-2 {
             grid-template-columns: repeat(2, minmax(0, 1fr));
         }

package/svelte.d.ts

@@ -5,24 +5,31 @@ import type { SvelteBadgeProps } from './components/Badge/badge'
 import type { SvelteButtonProps } from './components/Button/button'
 import type { CardProps } from './components/Card/card'
 import type { SvelteCheckboxProps } from './components/Checkbox/checkbox'
+import type { CollapsibleProps } from './components/Collapsible/collapsible'
 import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { GroupProps } from './components/Group/group'
 import type { IconProps } from './components/Icon/icon'
 import type { SvelteInputProps } from './components/Input/input'
+import type { SvelteListProps } from './components/List/list'
 import type { MenuProps } from './components/Menu/menu'
 import type { ModalProps } from './components/Modal/modal'
+import type { PopoverProps } from './components/Popover/popover'
 import type { ProgressProps } from './components/Progress/progress'
 import type { SvelteRadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
+import type { SvelteSelectProps } from './components/Select/select'
+import type { SheetProps } from './components/Sheet/sheet'
 import type { SvelteSliderProps } from './components/Slider/slider'
 import type { SpinnerProps } from './components/Spinner/spinner'
 import type { SvelteSwitchProps } from './components/Switch/switch'
 import type { TableProps } from './components/Table/table'
 import type { TabsProps } from './components/Tabs/tabs'
+import type { SvelteTextareaProps } from './components/Textarea/textarea'
 import type { ThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
 import type { TimelineProps } from './components/Timeline/timeline'
 import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
 import type { ToastProps } from './components/Toast/toast'
-    
+
 declare module 'webcoreui/svelte' {
     export function Accordion(_props: AccordionProps): any
 	export function Alert(_props: AlertProps): any
@@ -31,19 +38,26 @@ declare module 'webcoreui/svelte' {
 	export function Button(_props: SvelteButtonProps): any
 	export function Card(_props: CardProps): any
 	export function Checkbox(_props: SvelteCheckboxProps): any
+	export function Collapsible(_props: CollapsibleProps): any
 	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
+	export function Group(_props: GroupProps): any
 	export function Icon(_props: IconProps): any
 	export function Input(_props: SvelteInputProps): any
+	export function List(_props: SvelteListProps): any
 	export function Menu(_props: MenuProps): any
 	export function Modal(_props: ModalProps): any
+	export function Popover(_props: PopoverProps): any
 	export function Progress(_props: ProgressProps): any
 	export function Radio(_props: SvelteRadioProps): any
 	export function Rating(_props: RatingProps): any
+	export function Select(_props: SvelteSelectProps): any
+	export function Sheet(_props: SheetProps): any
 	export function Slider(_props: SvelteSliderProps): any
 	export function Spinner(_props: SpinnerProps): any
 	export function Switch(_props: SvelteSwitchProps): any
 	export function Table(_props: TableProps): any
 	export function Tabs(_props: TabsProps): any
+	export function Textarea(_props: SvelteTextareaProps): any
 	export function ThemeSwitcher(_props: ThemeSwitcherProps): any
 	export function Timeline(_props: TimelineProps): any
 	export function TimelineItem(_props: TimelineItemProps): any

package/svelte.js

@@ -5,19 +5,26 @@ import BadgeComponent from './components/Badge/Badge.svelte'
 import ButtonComponent from './components/Button/Button.svelte'
 import CardComponent from './components/Card/Card.svelte'
 import CheckboxComponent from './components/Checkbox/Checkbox.svelte'
+import CollapsibleComponent from './components/Collapsible/Collapsible.svelte'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
+import GroupComponent from './components/Group/Group.svelte'
 import IconComponent from './components/Icon/Icon.svelte'
 import InputComponent from './components/Input/Input.svelte'
+import ListComponent from './components/List/List.svelte'
 import MenuComponent from './components/Menu/Menu.svelte'
 import ModalComponent from './components/Modal/Modal.svelte'
+import PopoverComponent from './components/Popover/Popover.svelte'
 import ProgressComponent from './components/Progress/Progress.svelte'
 import RadioComponent from './components/Radio/Radio.svelte'
 import RatingComponent from './components/Rating/Rating.svelte'
+import SelectComponent from './components/Select/Select.svelte'
+import SheetComponent from './components/Sheet/Sheet.svelte'
 import SliderComponent from './components/Slider/Slider.svelte'
 import SpinnerComponent from './components/Spinner/Spinner.svelte'
 import SwitchComponent from './components/Switch/Switch.svelte'
 import TableComponent from './components/Table/Table.svelte'
 import TabsComponent from './components/Tabs/Tabs.svelte'
+import TextareaComponent from './components/Textarea/Textarea.svelte'
 import ThemeSwitcherComponent from './components/ThemeSwitcher/ThemeSwitcher.svelte'
 import TimelineComponent from './components/Timeline/Timeline.svelte'
 import TimelineItemComponent from './components/TimelineItem/TimelineItem.svelte'
@@ -30,19 +37,26 @@ export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
 export const Checkbox = CheckboxComponent
+export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
+export const List = ListComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Select = SelectComponent
+export const Sheet = SheetComponent
 export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent
+export const Textarea = TextareaComponent
 export const ThemeSwitcher = ThemeSwitcherComponent
 export const Timeline = TimelineComponent
 export const TimelineItem = TimelineItemComponent

package/utils/cookies.ts

@@ -4,17 +4,17 @@ export const setCookie = (name: string, value: string, days: number) => {
     if (days) {
         const date = new Date()
         date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
-        expires = '; expires=' + date.toUTCString()
+        expires = `; expires=${date.toUTCString()}`
     }
 
-    document.cookie = name + '=' + (value || '')  + expires + '; path=/'
+    document.cookie = `${name}=${value || ''}${expires}; path=/`
 }
 
 export const getCookie = (name: string) => {
     const cookies = document.cookie.split(';')
 
     for (const cookie of cookies) {
-        if (cookie.indexOf(name + '=') > -1) {
+        if (cookie.indexOf(`${name}=`) > -1) {
             return cookie.split('=')[1]
         }
     }
@@ -23,6 +23,6 @@ export const getCookie = (name: string) => {
 }
 
 export const removeCookie = (name: string) => {
-    document.cookie = name + '=; Max-Age=-1;'
+    document.cookie = `${name}=; Max-Age=-1;`
 }
 

package/utils/debounce.ts

@@ -0,0 +1,24 @@
+export const debounce = (fn: any, waitFor = 100) => {
+    let timeout: ReturnType<typeof setTimeout> | null
+
+    const clear = () => {
+        if (timeout !== null) {
+            clearTimeout(timeout)
+            timeout = null
+        }
+    }
+
+    const debouncedFn = (...args: any[]) => {
+        clear()
+
+        timeout = setTimeout(() => {
+            fn(...args)
+        }, waitFor)
+    }
+
+    debouncedFn.cancel = () => {
+        clear()
+    }
+
+    return debouncedFn
+}

package/utils/event.ts

@@ -1,10 +1,10 @@
-export const dispatch = (event: string, detail: any) => {
+export const dispatch = (event: string, detail: unknown) => {
     document.dispatchEvent(new CustomEvent(event, {
         detail
     }))
 }
 
-export const listen = (event: string, callback: (e: any) => any) => {
+export const listen = (event: string, callback: (e: any) => unknown) => {
     const fn = (e: any) => callback(e.detail)
 
     document.addEventListener(event, fn)

package/utils/interpolate.ts

@@ -3,21 +3,21 @@ export const clamp = (
     min: number,
     max: number
 ) => Math.min(Math.max(num, min), max)
-    
+
 export const lerp = (
     x: number,
     y: number,
     z: number
-) => x * (1 - z) + y * z
-        
+) => (x * (1 - z)) + (y * z)
+
 export const invlerp = (
     x: number,
     y: number,
     z: number
 ) => clamp((z - x) / (y - x), 0, 1)
-    
+
 export const interpolate = (
     value: number,
     input: [x: number, y: number],
-    output: [x: number, y: number],
+    output: [x: number, y: number]
 ) => lerp(output[0], output[1], invlerp(input[0], input[1], value))