webcoreui 0.6.1 → 0.7.0

package/components/Banner/Banner.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import type { ReactBannerProps } from './banner'
+
+import Button from '../Button/Button.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import closeIcon from '../../icons/close.svg?raw'
+
+import styles from './banner.module.scss'
+
+const Banner = ({
+    top,
+    bottom,
+    closeable,
+    padded,
+    sticky = true,
+    className,
+    children
+}: ReactBannerProps) => {
+    const [visible, setVisible] = useState(true)
+
+    const classes = classNames([
+        styles.banner,
+        bottom && styles.bottom,
+        padded && styles.padded,
+        !sticky && styles.relative,
+        className
+    ])
+
+    const style = top
+        ? { '--w-banner-top': `${top}px` } as React.CSSProperties
+        : undefined
+
+    if (!visible) {
+        return null
+    }
+
+    return (
+        <div className={classes} style={style}>
+            {children}
+            {closeable && (
+                <Button
+                    theme="flat"
+                    className={styles.close}
+                    dangerouslySetInnerHTML={{ __html: closeIcon }}
+                    onClick={() => setVisible(false)}
+                />
+            )}
+        </div>
+    )
+}
+
+export default Banner

package/components/Banner/banner.module.scss

@@ -0,0 +1,57 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-banner-top: 0;
+}
+
+.banner {
+    @include background(primary-60);
+    @include spacing(p-default);
+    @include position(sticky);
+    @include layer(top);
+    @include typography(center);
+
+    top: var(--w-banner-top);
+
+    &.padded {
+        @include border-radius();
+        @include position(l20px);
+
+        width: calc(100% - 40px);
+        top: calc(var(--w-banner-top) + 20px);
+
+        &.bottom {
+            @include position(l20px, b20px);
+        }
+    }
+
+    &.relative {
+        @include position(relative);
+        top: auto;
+    }
+
+    &.bottom {
+        @include position(fixed, b0, l0, r0);
+
+        top: auto;
+    }
+
+    &.closeable {
+        @include spacing(pl-default, pt-default, pb-default, pr-3xl);
+    }
+
+    .close {
+        @include position(absolute, v-center, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+}
+
+@include media(xs) {
+    .banner.closeable {
+        @include spacing(p-default);
+    }
+}

package/components/Banner/banner.ts

@@ -0,0 +1,12 @@
+export type BannerProps = {
+    top?: number
+    bottom?: boolean
+    closeable?: boolean
+    padded?: boolean
+    sticky?: boolean
+    className?: string
+}
+
+export type ReactBannerProps = {
+    children: React.ReactNode
+} & BannerProps

package/components/Icon/map.ts

@@ -13,6 +13,7 @@ import Home from '../../icons/home.svg?raw'
 import Info from '../../icons/info.svg?raw'
 import Moon from '../../icons/moon.svg?raw'
 import Order from '../../icons/order.svg?raw'
+import Plus from '../../icons/plus.svg?raw'
 import Search from '../../icons/search.svg?raw'
 import Sun from '../../icons/sun.svg?raw'
 import Warning from '../../icons/warning.svg?raw'
@@ -33,6 +34,7 @@ const iconMap = {
     'info': Info,
     'moon': Moon,
     'order': Order,
+    'plus': Plus,
     'search': Search,
     'sun': Sun,
     'warning': Warning

package/components/Kbd/Kbd.astro

@@ -0,0 +1,20 @@
+---
+import type { KbdProps } from './kbd'
+import { keyMap } from './keyMap'
+
+import styles from './kbd.module.scss'
+
+interface Props extends KbdProps {}
+
+const {
+    keys,
+    className
+} = Astro.props
+
+const classes = [
+    styles.kbd,
+    className
+]
+---
+
+<kbd class:list={classes}>{keys?.map(key => keyMap[key])}<slot /></kbd>

package/components/Kbd/Kbd.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { KbdProps } from './kbd'
+    import { keyMap } from './keyMap'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './kbd.module.scss'
+
+    export let keys: KbdProps['keys'] = []
+    export let className: KbdProps['className'] = ''
+
+    const classes = classNames([
+        styles.kbd,
+        className
+    ])
+</script>
+
+<kbd class={classes}>{keys?.map(key => keyMap[key]).join('')}<slot /></kbd>

package/components/Kbd/Kbd.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import type { ReactKbdProps } from './kbd'
+import { keyMap } from './keyMap'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './kbd.module.scss'
+
+const Kbd = ({
+    keys,
+    className,
+    children
+}: ReactKbdProps) => {
+    const classes = classNames([
+        styles.kbd,
+        className
+    ])
+
+    return (
+        <kbd className={classes}>
+            {keys?.map(key => keyMap[key]).join('')}
+            {children}
+        </kbd>
+    )
+}
+
+export default Kbd

package/components/Kbd/kbd.module.scss

@@ -0,0 +1,8 @@
+@import '../../scss/config.scss';
+
+.kbd {
+    @include background(primary-50);
+    @include border-radius(md);
+    @include typography(md, regular);
+    @include spacing(py-xs, px-xs);
+}

package/components/Kbd/kbd.ts

@@ -0,0 +1,26 @@
+export type KbdProps = {
+    keys?: ('cmd'
+        | 'shift'
+        | 'ctrl'
+        | 'option'
+        | 'enter'
+        | 'del'
+        | 'esc'
+        | 'tab'
+        | 'capslock'
+        | 'up'
+        | 'down'
+        | 'left'
+        | 'right'
+        | 'pageup'
+        | 'pagedown'
+        | 'home'
+        | 'end'
+        | 'help'
+        | 'space')[]
+    className?: string
+}
+
+export type ReactKbdProps = {
+    children?: React.ReactNode
+} & KbdProps

package/components/Kbd/keyMap.ts

@@ -0,0 +1,21 @@
+export const keyMap = {
+    cmd: '⌘',
+    shift: '⇧',
+    ctrl: '⌃',
+    option: '⌥',
+    enter: '↵',
+    del: '⌫',
+    esc: '⎋',
+    tab: '⇥',
+    capslock: '⇪',
+    up: '↑',
+    down: '↓',
+    left: '←',
+    right: '→',
+    pageup: '⇞',
+    pagedown: '⇟',
+    home: '↖',
+    end: '↘',
+    help: '?',
+    space: '␣'
+}

package/components/Spoiler/Spoiler.astro

@@ -0,0 +1,50 @@
+---
+import type { SpoilerProps } from './spoiler'
+
+import styles from './spoiler.module.scss'
+
+interface Props extends SpoilerProps {}
+
+const {
+    color,
+    animated = true,
+    block,
+    tooltip,
+    tooltipPosition
+} = Astro.props
+
+const classes = [
+    styles.spoiler,
+    animated && styles.anim,
+    block && styles.block
+]
+
+const style = color
+    ? `--w-spoiler-color: ${color};`
+    : null
+---
+
+<span
+    class:list={classes}
+    style={style}
+    data-tooltip={tooltip}
+    data-position={tooltipPosition}
+    data-id="w-spoiler"
+    role="button"
+    tabindex="0"
+>
+    <slot />
+</span>
+
+<script>
+    import { on } from '../../utils/DOMUtils'
+
+    on('[data-id="w-spoiler"]', 'click', (event: Event) => {
+        const target = event.currentTarget as HTMLDivElement
+
+        target.dataset.visible = 'true'
+        target.removeAttribute('data-tooltip')
+        target.removeAttribute('role')
+        target.removeAttribute('tabindex')
+    }, true)
+</script>

package/components/Spoiler/Spoiler.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { SpoilerProps } from './spoiler'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './spoiler.module.scss'
+
+    export let color: SpoilerProps['color'] = ''
+    export let animated: SpoilerProps['animated'] = true
+    export let block: SpoilerProps['block'] = false
+    export let tooltip: SpoilerProps['tooltip'] = ''
+    export let tooltipPosition: SpoilerProps['tooltipPosition'] = null
+
+    const classes = classNames([
+        styles.spoiler,
+        animated && styles.anim,
+        block && styles.block
+    ])
+
+    const style = color
+        ? `--w-spoiler-color: ${color};`
+        : null
+
+    const toggle = (event: MouseEvent | KeyboardEvent) => {
+        const target = event.currentTarget as HTMLSpanElement
+
+        target.dataset.visible = 'true'
+        target.removeAttribute('data-tooltip')
+        target.removeAttribute('role')
+        target.removeAttribute('tabindex')
+    }
+</script>
+
+<span
+    class={classes}
+    style={style}
+    data-tooltip={tooltip || null}
+    data-position={tooltipPosition}
+    role="button"
+    tabindex="0"
+    on:click={toggle}
+    on:keyup={toggle}
+>
+    <slot />
+</span>

package/components/Spoiler/Spoiler.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import type { ReactSpoilerProps } from './spoiler'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './spoiler.module.scss'
+
+const Spoiler = ({
+    color,
+    animated = true,
+    block,
+    tooltip,
+    tooltipPosition,
+    children
+}: ReactSpoilerProps) => {
+    const classes = classNames([
+        styles.spoiler,
+        animated && styles.anim,
+        block && styles.block
+    ])
+
+    const style = color
+        ? { '--w-spoiler-color': color } as React.CSSProperties
+        : undefined
+
+    const toggle = (event: React.MouseEvent<HTMLSpanElement>) => {
+        const target = event.currentTarget
+
+        target.dataset.visible = 'true'
+        target.removeAttribute('data-tooltip')
+        target.removeAttribute('role')
+        target.removeAttribute('tabindex')
+    }
+
+    return (
+        <span
+            className={classes}
+            style={style}
+            data-tooltip={tooltip}
+            data-position={tooltipPosition}
+            role="button"
+            tabIndex={0}
+            onClick={toggle}
+        >
+            {children}
+        </span>
+    )
+}
+
+export default Spoiler

package/components/Spoiler/spoiler.module.scss

@@ -0,0 +1,40 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-spoiler-color: var(--w-color-primary);
+}
+
+span.spoiler {
+    @include border-radius();
+    @include background(var(--w-spoiler-color));
+    @include typography(hmd);
+    @include visibility(inline);
+
+    color: transparent;
+    user-select: none;
+    cursor: pointer;
+
+    &.anim {
+        @include transition();
+    }
+
+    &.block {
+        @include visibility(block);
+    }
+
+    code {
+        @include border(0);
+    }
+
+    &[data-visible] {
+        @include background(transparent);
+        
+        color: inherit;
+        user-select: auto;
+        cursor: auto;
+
+        code {
+            @include border(primary-50);
+        }
+    }
+}

package/components/Spoiler/spoiler.ts

@@ -0,0 +1,11 @@
+export type SpoilerProps = {
+    color?: string
+    animated?: boolean
+    block?: boolean
+    tooltip?: string
+    tooltipPosition?: 'bottom' | null
+}
+
+export type ReactSpoilerProps = {
+    children: React.ReactNode
+} & SpoilerProps

package/components/Stepper/Stepper.astro

@@ -0,0 +1,61 @@
+---
+import type { StepperProps } from './stepper'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+import Icon from '../Icon/Icon.astro'
+
+import styles from './stepper.module.scss'
+
+import type { IconProps } from '../Icon/icon'
+
+interface Props extends StepperProps {}
+
+const {
+    items,
+    color,
+    completedColor,
+    activeColor,
+    borderless,
+    vertical,
+    className
+} = Astro.props
+
+const classes = [
+    styles.stepper,
+    borderless && styles.borderless,
+    vertical && styles.vertical,
+    className
+]
+
+const styleVariables = [
+    color && `--w-stepper-color-border: ${color}`,
+    completedColor && `--w-stepper-color-complete: ${completedColor}`,
+    activeColor && `--w-stepper-color-active: ${activeColor}`
+].filter(Boolean).join(';')
+---
+
+<ol class:list={classes} style={styleVariables}>
+    {items?.map((item, index) => (
+        <li class:list={[
+            index !== 0 && styles.connect,
+            item.active && styles.active,
+            item.completed && styles.completed
+        ]}>
+            <span class={styles.number}>
+                {item.icon ? (
+                    <Fragment>
+                        {item.icon.startsWith('<svg')
+                            ? <Fragment set:html={item.icon} />
+                            : <Icon type={item.icon as IconProps['type']} />
+                        }
+                    </Fragment>
+                ) : index + 1}
+            </span>
+            <ConditionalWrapper condition={!!(item.title && item.subTitle)}>
+                <div slot="wrapper" class={styles.container}>children</div>
+                {item.title && <span>{item.title}</span>}
+                {item.subTitle && <span class={styles.muted}>{item.subTitle}</span>}
+            </ConditionalWrapper>
+        </li>
+    ))}
+</ol>

package/components/Stepper/Stepper.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { StepperProps } from './stepper'
+
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './stepper.module.scss'
+
+    export let items: StepperProps['items'] = []
+    export let color: StepperProps['color'] = ''
+    export let completedColor: StepperProps['completedColor'] = ''
+    export let activeColor: StepperProps['activeColor'] = ''
+    export let borderless: StepperProps['vertical'] = false
+    export let vertical: StepperProps['vertical'] = false
+    export let className: StepperProps['className'] = ''
+
+    const classes = classNames([
+        styles.stepper,
+        borderless && styles.borderless,
+        vertical && styles.vertical,
+        className
+    ])
+
+    const styleVariables = [
+        color && `--w-stepper-color-border: ${color}`,
+        completedColor && `--w-stepper-color-complete: ${completedColor}`,
+        activeColor && `--w-stepper-color-active: ${activeColor}`
+    ].filter(Boolean).join(';')
+</script>
+
+<ol class={classes} style={styleVariables || null}>
+    {#each items as item, index}
+        <li class={classNames([
+            index !== 0 && styles.connect,
+            item.active && styles.active,
+            item.completed && styles.completed
+        ])}>
+            <span class={styles.number}>
+                {#if item.icon}
+                    {@html item.icon}
+                {:else}
+                    {index + 1}
+                {/if}
+            </span>
+            <ConditionalWrapper
+                condition={!!(item.title && item.subTitle)}
+                class={styles.container}
+            >
+                {#if item.title}
+                    <span>{item.title}</span>
+                {/if}
+                {#if item.subTitle}
+                    <span class={styles.muted}>{item.subTitle}</span>
+                {/if}
+            </ConditionalWrapper>
+        </li>
+    {/each}
+</ol>

package/components/Stepper/Stepper.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import type { StepperProps } from './stepper'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './stepper.module.scss'
+
+const Stepper = ({
+    items,
+    color,
+    completedColor,
+    activeColor,
+    borderless,
+    vertical,
+    className
+}: StepperProps) => {
+    const classes = classNames([
+        styles.stepper,
+        borderless && styles.borderless,
+        vertical && styles.vertical,
+        className
+    ])
+
+    const styleVariables = {
+        ...(color && { '--w-stepper-color-border': color }),
+        ...(completedColor && { '--w-stepper-color-complete': completedColor }),
+        ...(activeColor && { '--w-stepper-color-active': activeColor })
+    } as React.CSSProperties
+
+    return (
+        <ol className={classes} style={styleVariables}>
+            {items?.map((item, index) => (
+                <li className={classNames([
+                    index !== 0 && styles.connect,
+                    item.active && styles.active,
+                    item.completed && styles.completed
+                ])} key={index}>
+                    <span
+                        className={styles.number}
+                        dangerouslySetInnerHTML={{ __html: item.icon
+                            ? item.icon
+                            : index + 1
+                        }}
+                    />
+                    <ConditionalWrapper
+                        condition={!!(item.title && item.subTitle)}
+                        wrapper={children => <div className={styles.container}>{children}</div>}
+                    >
+                        {item.title && <span>{item.title}</span>}
+                        {item.subTitle && <span className={styles.muted}>{item.subTitle}</span>}
+                    </ConditionalWrapper>
+                </li>
+            ))}
+        </ol>
+    )
+}
+
+export default Stepper