webcoreui 0.2.0 → 0.3.0

package/components/Sheet/sheet.ts

@@ -0,0 +1,10 @@
+import type { ModalProps, ReactModalProps } from '../Modal/modal'
+
+export type SheetProps = {
+    position?: 'left'
+        | 'top'
+        | 'bottom'
+        | null
+} & ModalProps
+
+export type ReactSheetProps = SheetProps & ReactModalProps

package/components/Textarea/Textarea.astro

@@ -0,0 +1,44 @@
+---
+import type { TextareaProps } from './textarea'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './textarea.module.scss'
+
+interface Props extends TextareaProps {}
+
+const {
+    label,
+    placeholder,
+    subText,
+    value = '',
+    disabled,
+    className
+} = Astro.props
+
+const classes = [
+    styles.textarea,
+    className
+]
+
+const useLabel = !!(label || subText)
+---
+
+<ConditionalWrapper condition={useLabel}>
+    <label slot="wrapper" class={styles['label-wrapper']}>
+        {label && (
+            <div class={styles.label}>{label}</div>
+        )}
+        children
+        {subText && (
+            <div class={styles.subtext}>
+                <Fragment set:html={subText} />
+            </div>
+        )}
+    </label>
+
+    <textarea
+        placeholder={placeholder}
+        disabled={disabled}
+        class:list={classes}
+    >{value}</textarea>
+</ConditionalWrapper>

package/components/Textarea/Textarea.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { SvelteTextareaProps } from './textarea'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import styles from './textarea.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let label: SvelteTextareaProps['label'] = ''
+    export let placeholder: SvelteTextareaProps['placeholder'] = ''
+    export let subText: SvelteTextareaProps['subText'] = ''
+    export let value: SvelteTextareaProps['value'] = ''
+    export let disabled: SvelteTextareaProps['disabled'] = false
+    export let className: SvelteTextareaProps['className'] = ''
+    export let onChange: SvelteTextareaProps['onChange'] = () => {}
+    export let onKeyUp: SvelteTextareaProps['onKeyUp'] = () => {}
+
+    const classes = classNames([
+        styles.textarea,
+        className
+    ])
+
+    const useLabel = !!(label || subText)
+</script>
+
+<ConditionalWrapper
+    condition={useLabel}
+    element="label"
+    class={styles['label-wrapper']}
+>
+    {#if label}
+        <div class={styles.label}>{label}</div>
+    {/if}
+    <textarea
+        placeholder={placeholder}
+        disabled={disabled}
+        class={classes}
+        on:change={onChange}
+        on:keyup={onKeyUp}
+    >{value}</textarea>
+    {#if subText}
+        <div class={styles.subtext}>
+            {@html subText}
+        </div>
+    {/if}
+</ConditionalWrapper>

package/components/Textarea/Textarea.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import type { ReactTextareaProps } from './textarea'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import styles from './textarea.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Textarea = ({
+    label,
+    placeholder,
+    subText,
+    value = '',
+    disabled,
+    className,
+    ...rest
+}: ReactTextareaProps) => {
+    const classes = classNames([
+        styles.textarea,
+        className
+    ])
+
+    const useLabel = !!(label || subText)
+
+    return (
+        <ConditionalWrapper condition={useLabel} wrapper={children => (
+            <label className={styles['label-wrapper']}>
+                {label && (
+                    <div className={styles.label}>{label}</div>
+                )}
+                {children}
+                {subText && (
+                    <div
+                        className={styles.subtext}
+                        dangerouslySetInnerHTML={{ __html: subText }}
+                    />
+                )}
+            </label>
+        )}>
+            <textarea
+                placeholder={placeholder}
+                disabled={disabled}
+                className={classes}
+                defaultValue={value}
+                {...rest}
+            />
+        </ConditionalWrapper>
+    )
+}
+
+export default Textarea

package/components/Textarea/textarea.module.scss

@@ -0,0 +1,36 @@
+@import '../../scss/config.scss';
+
+.textarea {
+    @include size('w100%');
+    @include background(transparent);
+    @include border-radius(sm);
+    @include border(primary-50);
+    @include spacing(p-sm);
+    @include typography(regular, primary, hlg);
+
+    min-height: 50px;
+    resize: vertical;
+
+    &[disabled] {
+        @include typography(primary-30);
+        cursor: no-drop;
+    }
+
+    &::placeholder {
+        @include typography(primary-30);
+    }
+}
+
+.label-wrapper {
+    @include layout(flex, column);
+
+    .label {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+
+    .subtext {
+        @include typography(md, primary-30);
+        @include spacing(mt-xs);
+    }
+}

package/components/Textarea/textarea.ts

@@ -0,0 +1,18 @@
+export type TextareaProps = {
+    label?: string
+    placeholder?: string
+    subText?: string
+    value?: string
+    disabled?: boolean
+    className?: string
+}
+
+export type SvelteTextareaProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & TextareaProps
+
+export type ReactTextareaProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & TextareaProps

package/components/Toast/Toast.svelte

@@ -24,9 +24,14 @@
     }
 </script>
 
-<Alert {...$$restProps} className={classes} {...additionalProps}>
-    {#if $$slots.icon}
-        <slot name="icon" />
-    {/if}
-    <slot />
-</Alert>
+{#if $$slots.icon}
+    <Alert {...$$restProps} className={classes} {...additionalProps}>
+        <slot slot="icon" name="icon" />
+        <slot />
+    </Alert>
+{:else}
+    <Alert {...$$restProps} className={classes} {...additionalProps}>
+        <slot />
+    </Alert>
+{/if}
+

package/index.d.ts

@@ -0,0 +1,69 @@
+type PopoverPosition = 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+
+type Popover = {
+    trigger: string
+    popover: string
+    position?: PopoverPosition
+    offset?: number
+    closeOnBlur?: boolean
+}
+
+type Toast = {
+    element: string
+    timeout?: number
+    title?: string
+    content?: string
+    theme?: 'info' | 'success' | 'warning' | 'alert' | null
+    position?: 'bottom-left'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-full'
+        | 'top-full'
+}
+
+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 debounce = (fn: any, waitFor: number) => any
+
+    export const dispatch = (event: string, detail: any) => {}
+    export const listen = (event: string, callback: (e: any) => any) => {
+        remove()
+    }
+
+    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 = (selector: string) => {}
+    export const closeModal = (selector: string) => {}
+
+    export const popover = (config: Popover) => {
+        remove()
+    }
+    export const closePopover = (selector: string) => {}
+
+    export const setDefaultTimeout = (time: number) => number
+    export const toast = (config: Toast | string) => {}
+    export const hideToast = (element: string) => {}
+}

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,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",
@@ -43,6 +43,7 @@
         "react.d.ts",
         "react.js",
         "index.js",
+        "index.d.ts",
         "README.md",
         "LICENSE"
     ],

package/react.d.ts

@@ -6,19 +6,23 @@ 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 { IconProps } from './components/Icon/icon'
 import type { ReactInputProps } from './components/Input/input'
 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 { 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 +36,23 @@ 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 Icon: FC<IconProps>
 	export const Input: FC<ReactInputProps>
 	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 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,23 @@ 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 IconComponent from './components/Icon/Icon.tsx'
 import InputComponent from './components/Input/Input.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 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 +34,23 @@ 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 Icon = IconComponent
 export const Input = InputComponent
 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 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/svelte.d.ts

@@ -5,19 +5,23 @@ 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 { IconProps } from './components/Icon/icon'
 import type { SvelteInputProps } from './components/Input/input'
 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 { 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'
@@ -31,19 +35,23 @@ 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 Icon(_props: IconProps): any
 	export function Input(_props: SvelteInputProps): 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 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,23 @@ 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 IconComponent from './components/Icon/Icon.svelte'
 import InputComponent from './components/Input/Input.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 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 +34,23 @@ 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 Icon = IconComponent
 export const Input = InputComponent
 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 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/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
+}