webcoreui 0.3.0 → 0.4.1

package/index.d.ts

@@ -1,3 +1,16 @@
+
+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'
@@ -11,12 +24,20 @@ type PopoverPosition = 'top'
     | '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 = {
@@ -24,46 +45,55 @@ type Toast = {
     timeout?: number
     title?: string
     content?: string
-    theme?: 'info' | 'success' | 'warning' | 'alert' | null
     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) => {}
-    export const getCookie = (name: string) => string | null
-    export const removeCookie = (name: string) => {}
+    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 = (fn: any, waitFor: number) => any
+    export const debounce: <T extends (...args: any[]) => any>(
+        fn: T,
+        waitFor?: number
+    ) => {
+        (...args: Parameters<T>): void
+        cancel: () => void
+    }
 
-    export const dispatch = (event: string, detail: any) => {}
-    export const listen = (event: string, callback: (e: any) => any) => {
-        remove()
+    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 = (
+    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],
+        output: [start: number, end: number]
     ) => number
 
-    export const modal = (selector: string) => {}
-    export const closeModal = (selector: string) => {}
+    export const modal: (config: Modal | string) => {
+        open: () => void
+        remove: () => void
+    } | void
+    export const closeModal: (modal: string) => void
 
-    export const popover = (config: Popover) => {
-        remove()
-    }
-    export const closePopover = (selector: string) => {}
+    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) => {}
-    export const hideToast = (element: string) => {}
-}
+    export const setDefaultTimeout: (time: number) => number
+    export const toast: (config: Toast | string) => void
+    export const hideToast: (element: string) => void
+}

package/package.json

@@ -1,13 +1,16 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.3.0",
+    "version": "0.4.1",
     "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": {
         "@astrojs/check": "0.7.0",
@@ -20,6 +23,20 @@
         "svelte": "4.2.18",
         "typescript": "5.4.5"
     },
+    "devDependencies": {
+        "@eslint/js": "9.9.1",
+        "@typescript-eslint/parser": "8.3.0",
+        "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",
+        "svelte-eslint-parser": "0.41.0",
+        "typescript-eslint": "8.3.0"
+    },
     "exports": {
         ".": "./index.js",
         "./astro": "./astro.js",
@@ -69,5 +86,8 @@
     },
     "bugs": {
         "url": "https://github.com/Frontendland/webcoreui/issues"
+    },
+    "lint-staged": {
+        "*.{js,ts,jsx,tsx,svelte,astro}": "eslint src/**/*"
     }
 }

package/react.d.ts

@@ -8,14 +8,17 @@ 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'
@@ -38,14 +41,17 @@ declare module 'webcoreui/react' {
 	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>

package/react.js

@@ -7,14 +7,17 @@ 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'
@@ -36,14 +39,17 @@ 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

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

@@ -7,14 +7,17 @@ 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'
@@ -26,7 +29,7 @@ import type { ThemeSwitcherProps } from './components/ThemeSwitcher/themeswitche
 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
@@ -37,14 +40,17 @@ declare module 'webcoreui/svelte' {
 	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

package/svelte.js

@@ -7,14 +7,17 @@ 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'
@@ -36,14 +39,17 @@ 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

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

@@ -10,7 +10,7 @@ export const debounce = (fn: any, waitFor = 100) => {
 
     const debouncedFn = (...args: any[]) => {
         clear()
-    
+
         timeout = setTimeout(() => {
             fn(...args)
         }, waitFor)

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))

package/utils/modal.ts

@@ -1,59 +1,122 @@
-export const modal = (element: string) => {
-    const htmlElement = document.querySelector(element) as HTMLElement
+type Callback = {
+    trigger: Element | null
+    modal: HTMLElement
+}
+
+type Modal = {
+    trigger: string
+    modal: string
+    onOpen?: (args: Callback) => unknown
+    onClose?: (args: Callback) => unknown
+}
+
+export const modal = (config: Modal | string) => {
+    const {
+        trigger,
+        modal,
+        onOpen,
+        onClose
+    } = (typeof config === 'string' ? {} : config) as Modal
+
+    const modalSelector = typeof config === 'string' ? config : modal
+
+    const triggerDOM = document.querySelector(trigger)
+    const modalDOM = document.querySelector(modalSelector) as HTMLElement
+
+    if (modalDOM) {
+        const closeOptions = modalDOM.dataset.close?.split(',')
 
-    if (htmlElement) {
         const handleClose = {
-            icon: () => {
-                const close = htmlElement.querySelector('[data-id="close"]')
+            icon() {
+                const close = modalDOM.querySelector('[data-id="close"]')
 
                 const listener = () => {
-                    htmlElement.dataset.show = ''
+                    modalDOM.dataset.show = ''
 
-                    close?.removeEventListener('click', listener)
+                    onClose?.({
+                        trigger: triggerDOM,
+                        modal: modalDOM
+                    })
                 }
 
-                close?.addEventListener('click', listener)
+                return {
+                    add: () => close?.addEventListener('click', listener),
+                    remove: () => close?.removeEventListener('click', listener)
+                }
             },
-    
-            esc: () => {
+
+            esc() {
                 const listener = (event: KeyboardEvent) => {
-                    if (event.key === 'Escape') {
-                        htmlElement.dataset.show = ''
+                    if (modalDOM.dataset.show && event.key === 'Escape') {
+                        modalDOM.dataset.show = ''
+
+                        onClose?.({
+                            trigger: triggerDOM,
+                            modal: modalDOM
+                        })
 
-                        document.removeEventListener('keydown', listener)
                     }
                 }
 
-                document.addEventListener('keydown', listener)
+                return {
+                    add: () => document.addEventListener('keydown', listener),
+                    remove: () => document.removeEventListener('keydown', listener)
+                }
             },
-    
-            overlay: () => {
-                const close = htmlElement.nextElementSibling
+
+            overlay() {
+                const close = modalDOM.nextElementSibling
 
                 const listener = () => {
-                    htmlElement.dataset.show = ''
+                    modalDOM.dataset.show = ''
 
-                    close?.removeEventListener('click', listener)
+                    onClose?.({
+                        trigger: triggerDOM,
+                        modal: modalDOM
+                    })
                 }
 
-                close?.addEventListener('click', listener)
+                return {
+                    add: () => close?.addEventListener('click', listener),
+                    remove: () => close?.removeEventListener('click', listener)
+                }
             }
         }
 
-        const closeOptions = htmlElement.dataset.close?.split(',')
+        const handleOpen = () => {
+            modalDOM.dataset.show = 'true'
+
+            onOpen?.({
+                trigger: triggerDOM,
+                modal: modalDOM
+            })
+        }
 
-        htmlElement.dataset.show = 'true'
+        triggerDOM?.addEventListener('click', handleOpen)
 
         closeOptions?.forEach(option => {
-            handleClose[option as keyof typeof handleClose]()
+            handleClose[option as keyof typeof handleClose]().add()
         })
+
+        return {
+            open() {
+                handleOpen()
+            },
+            remove() {
+                triggerDOM?.removeEventListener('click', handleOpen)
+
+                closeOptions?.forEach(option => {
+                    handleClose[option as keyof typeof handleClose]().remove()
+                })
+            }
+        }
     }
 }
 
-export const closeModal = (element: string) => {
-    const htmlElement = document.querySelector(element) as HTMLElement
+export const closeModal = (modal: string) => {
+    const modalDOM = document.querySelector(modal) as HTMLElement
 
-    if (htmlElement) {
-        htmlElement.dataset.show = ''
+    if (modalDOM) {
+        modalDOM.dataset.show = ''
     }
 }