webcoreui 0.2.0 → 0.4.0

package/components/Collapsible/Collapsible.astro

@@ -0,0 +1,64 @@
+---
+import type { CollapsibleProps } from './collapsible'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './collapsible.module.scss'
+
+interface Props extends CollapsibleProps {}
+
+const {
+    initialHeight,
+    maxHeight,
+    toggled,
+    className,
+    togglesClassName
+} = Astro.props
+
+const classes = [
+    styles.collapsible,
+    maxHeight && styles.animated,
+    className
+]
+
+const styleVariables = classNames([
+    initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
+    maxHeight && `--w-collapsible-max-height: ${maxHeight};`
+])
+---
+
+<div
+    class:list={classes}
+    data-toggled={toggled ? 'true' : undefined}
+    data-id="w-collapsible"
+>
+    <div
+        class={styles.wrapper}
+        style={styleVariables}
+    >
+        <slot />
+    </div>
+    <div class:list={togglesClassName}>
+        <div data-toggle-on="true"><slot name="on" /></div>
+        <div data-toggle-off="true"><slot name="off" /></div>
+    </div>
+</div>
+
+<script>
+    const collapsibles = document.querySelectorAll('[data-id="w-collapsible"]')
+
+    Array.from(collapsibles).forEach(element => {
+        element.addEventListener('click', event => {
+            const collapsible = event.currentTarget as HTMLDivElement
+            const target = event.target as HTMLDivElement
+
+            if (target.parentElement?.dataset.toggleOn) {
+                collapsible.dataset.toggled = 'true'
+            }
+
+            if (target.parentElement?.dataset.toggleOff) {
+                collapsible.dataset.toggled = 'false'
+            }
+        })
+    })
+</script>

package/components/Collapsible/Collapsible.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import type { CollapsibleProps } from './collapsible'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './collapsible.module.scss'
+
+    export let initialHeight: CollapsibleProps['initialHeight'] = ''
+    export let maxHeight: CollapsibleProps['maxHeight'] = ''
+    export let toggled: CollapsibleProps['toggled'] = false
+    export let className: CollapsibleProps['className'] = ''
+    export let togglesClassName: CollapsibleProps['togglesClassName'] = ''
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = classNames([
+        initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
+        maxHeight && `--w-collapsible-max-height: ${maxHeight};`
+    ])
+</script>
+
+<div
+    class={classes}
+    data-toggled={toggled ? 'true' : undefined}
+>
+    <div
+        class={styles.wrapper}
+        style={styleVariables}
+    >
+        <slot />
+    </div>
+    <div
+        on:click={() => toggled = !toggled}
+        on:keyup={() => toggled = !toggled}
+        role="button"
+        tabindex={0}
+        class={togglesClassName}
+    >
+        {#if toggled}
+            <slot name="off" />
+        {:else}
+            <slot name="on" />
+        {/if}
+    </div>
+</div>

package/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import type { ReactCollapsibleProps } from './collapsible'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './collapsible.module.scss'
+
+const Collapsible = ({
+    initialHeight,
+    maxHeight,
+    toggled,
+    on,
+    off,
+    children,
+    className,
+    togglesClassName
+}: ReactCollapsibleProps) => {
+    const [toggle, setToggled] = useState(toggled)
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = {
+        ...(initialHeight && { '--w-collapsible-initial-height': initialHeight }),
+        ...(maxHeight && { '--w-collapsible-max-height': maxHeight })
+    } as React.CSSProperties
+
+    return (
+        <div
+            className={classes}
+            data-toggled={toggle ? 'true' : undefined}
+        >
+            <div
+                className={styles.wrapper}
+                style={styleVariables}
+            >
+                {children}
+            </div>
+            <div
+                onClick={() => setToggled(!toggle)}
+                onKeyUp={() => setToggled(!toggle)}
+                role="button"
+                tabIndex={0}
+                className={togglesClassName}
+            >
+                {toggle ? off : on}
+            </div>
+        </div>
+    )
+}
+
+export default Collapsible

package/components/Collapsible/collapsible.module.scss

@@ -0,0 +1,29 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-collapsible-initial-height: 0;
+    --w-collapsible-max-height: 100%;
+}
+
+.collapsible {
+    @include layout(flex, column, xs);
+
+    &:not([data-toggled="true"]) [data-toggle-off],
+    &[data-toggled="true"] [data-toggle-on] {
+        @include visibility(none);
+    }
+
+    &[data-toggled="true"] .wrapper {
+        max-height: var(--w-collapsible-max-height);
+    }
+
+    &.animated .wrapper {
+        @include transition(max-height, .5s);
+    }
+
+    .wrapper {
+        @include visibility(hidden);
+
+        max-height: var(--w-collapsible-initial-height);
+    }
+}

package/components/Collapsible/collapsible.ts

@@ -0,0 +1,14 @@
+export type CollapsibleProps = {
+    initialHeight?: string
+    maxHeight?: string
+    toggled?: boolean
+    className?: string
+    togglesClassName?: string
+}
+
+export type ReactCollapsibleProps = {
+    on: React.ReactNode
+    off: React.ReactNode
+    children?: React.ReactNode
+} & CollapsibleProps
+

package/components/ConditionalWrapper/ConditionalWrapper.astro

@@ -10,7 +10,8 @@ const children = await Astro.slots.render('default')
 const wrapped = wrapper?.replace('children', children)
 
 if (!Astro.slots.has('wrapper')) {
-  console.error('Missing wrapper. Add slot="wrapper" to one of the elements.')
+    // eslint-disable-next-line no-console
+    console.error('Missing wrapper. Add slot="wrapper" to one of the elements.')
 }
 ---
 

package/components/ConditionalWrapper/ConditionalWrapper.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
 import type { ReactConditionalWrapperProps } from './conditionalwrapper'
 
 const ConditionalWrapper = ({ condition, wrapper, children }: ReactConditionalWrapperProps) =>
-  condition ? wrapper(children) : children
+    condition ? wrapper(children) : children
 
 export default ConditionalWrapper

package/components/Group/Group.astro

@@ -0,0 +1,22 @@
+---
+import type { GroupProps } from './group'
+
+import styles from './group.module.scss'
+
+interface Props extends GroupProps {}
+
+const {
+    withSeparator,
+    className
+} = Astro.props
+
+const classes = [
+    styles.group,
+    withSeparator && styles.separator,
+    className
+]
+---
+
+<div class:list={classes}>
+    <slot />
+</div>

package/components/Group/Group.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { GroupProps } from './group'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './group.module.scss'
+
+    export let withSeparator: GroupProps['withSeparator'] = false
+    export let className: GroupProps['className'] = ''
+
+    const classes = classNames([
+        styles.group,
+        withSeparator && styles.separator,
+        className
+    ])
+</script>
+
+<div class={classes}>
+    <slot />
+</div>

package/components/Group/Group.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import type { ReactGroupProps } from './group'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './group.module.scss'
+
+const Group = ({
+    withSeparator,
+    className,
+    children
+}: ReactGroupProps) => {
+    const classes = classNames([
+        styles.group,
+        withSeparator && styles.separator,
+        className
+    ])
+
+    return <div className={classes}>{children}</div>
+}
+
+export default Group

package/components/Group/group.module.scss

@@ -0,0 +1,43 @@
+@import '../../scss/config.scss';
+
+.group {
+    @include layout(flex, none);
+    @include visibility(auto);
+
+    button,
+    span {
+        @include border-radius(none);
+
+        &:first-child {
+            @include border-radius(left, md);
+        }
+
+        &:last-child {
+            @include border-radius(right, md);
+        }
+    }
+
+    &.separator button:not(:last-child),
+    &.separator span:not(:last-child) {
+        @include border(1px, right, primary-70);
+    }
+
+    &.outline button
+    &.outline span {
+        @include border(1px, primary-20);
+        box-shadow: none;
+
+        &:hover {
+            @include border(1px, primary);
+            box-shadow: none;
+        }
+
+        &:first-child {
+            @include border(right, 0);
+        }
+
+        &:last-child {
+            @include border(left, 0);
+        }
+    }
+}

package/components/Group/group.ts

@@ -0,0 +1,8 @@
+export type GroupProps = {
+    withSeparator?: boolean
+    className?: string
+}
+
+export type ReactGroupProps = {
+    children: React.ReactNode
+} & GroupProps

package/components/Icon/map.ts

@@ -6,6 +6,7 @@ import Close from '../../icons/close.svg?raw'
 import Github from '../../icons/github.svg?raw'
 import Info from '../../icons/info.svg?raw'
 import Moon from '../../icons/moon.svg?raw'
+import Search from '../../icons/search.svg?raw'
 import Sun from '../../icons/sun.svg?raw'
 import Warning from '../../icons/warning.svg?raw'
 
@@ -18,6 +19,7 @@ const iconMap = {
     'github': Github,
     'info': Info,
     'moon': Moon,
+    'search': Search,
     'sun': Sun,
     'warning': Warning
 }

package/components/Input/Input.astro

@@ -1,5 +1,6 @@
 ---
 import type { InputProps } from './input'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import styles from './input.module.scss'
@@ -12,6 +13,7 @@ const {
     label,
     subText,
     className,
+    labelClassName,
     ...rest
 } = Astro.props
 
@@ -21,11 +23,16 @@ const classes = [
     className
 ]
 
+const labelClasses = [
+    styles['input-label'],
+    labelClassName
+]
+
 const useLabel = !!(label || subText || Astro.slots.has('default'))
 ---
 
 <ConditionalWrapper condition={useLabel}>
-    <label slot="wrapper" class={styles['input-label']}>
+    <label slot="wrapper" class:list={labelClasses}>
         {label && (
             <div class={styles.label}>{label}</div>
         )}

package/components/Input/Input.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
     import type { SvelteInputProps } from './input'
+
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
-    import styles from './input.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './input.module.scss'
+
     export let type: SvelteInputProps['type'] = 'text'
     export let theme: SvelteInputProps['theme'] = null
     export let label: SvelteInputProps['label'] = ''
     export let subText: SvelteInputProps['subText'] = ''
     export let className: SvelteInputProps['className'] = ''
+    export let labelClassName: SvelteInputProps['labelClassName'] = ''
     export let onChange: SvelteInputProps['onChange'] = () => {}
     export let onKeyUp: SvelteInputProps['onKeyUp'] = () => {}
+    export let onInput: SvelteInputProps['onInput'] = () => {}
+    export let onClick: SvelteInputProps['onClick'] = () => {}
 
     const classes = classNames([
         styles.input,
@@ -19,13 +24,18 @@
         className
     ])
 
+    const labelClasses = classNames([
+        styles['input-label'],
+        labelClassName
+    ])
+
     const useLabel = !!(label || subText || $$slots.default)
 </script>
 
 <ConditionalWrapper
     condition={useLabel}
     element="label"
-    class={styles['input-label']}
+    class={labelClasses}
 >
     {#if label}
         <div class={styles.label}>{label}</div>
@@ -41,10 +51,12 @@
             class={classes}
             on:change={onChange}
             on:keyup={onKeyUp}
+            on:input={onInput}
+            on:click={onClick}
             {...$$restProps}
         />
     </ConditionalWrapper>
-    {#if label}
+    {#if subText}
         <div class={styles.subtext}>
             {@html subText}
         </div>

package/components/Input/Input.tsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import type { ReactInputProps } from './input'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
-import styles from './input.module.scss'
 import { classNames } from '../../utils/classNames'
 
+import styles from './input.module.scss'
+
 const Input = ({
     type = 'text',
     theme,
     label,
     subText,
-    icon,
     value,
     className,
+    labelClassName,
     children,
     ...rest
 }: ReactInputProps) => {
@@ -22,11 +24,16 @@ const Input = ({
         className
     ])
 
+    const labelClasses = classNames([
+        styles['input-label'],
+        labelClassName
+    ])
+
     const useLabel = !!(label || subText || children)
 
     return (
         <ConditionalWrapper condition={useLabel} wrapper={children => (
-            <label className={styles['input-label']}>
+            <label className={labelClasses}>
                 {children}
             </label>
         )}>

package/components/Input/input.module.scss

@@ -68,7 +68,10 @@
 
         svg {
             @include position(absolute, l10px);
-            @include size(20px);
+            @include size(18px);
+            @include typography(primary-30);
+
+            pointer-events: none;
         }
     }
 

package/components/Input/input.ts

@@ -35,16 +35,21 @@ export type InputProps = {
     autofocus?: boolean
     autocomplete?: 'on' | 'off'
     className?: string
+    labelClassName?: string
     [key: string]: any
 }
 
 export type SvelteInputProps = {
-    onChange?: (e: any) => any
-    onKeyUp?: (e: any) => any
+    onChange?: (event: Event & { currentTarget: HTMLInputElement }) => void
+    onKeyUp?: (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => void
+    onInput?: (event: any) => void
+    onClick?: (event: MouseEvent & { currentTarget: HTMLInputElement }) => void
 } & InputProps
 
 export type ReactInputProps = {
-    onChange?: (e: any) => any
-    onKeyUp?: (e: any) => any
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void
+    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
     children?: React.ReactNode
 } & InputProps