webcoreui 0.0.11 → 0.1.0

package/components/Tabs/Tabs.tsx

@@ -1,69 +1,70 @@
-import React, { useState, useRef } from 'react'
-import type { ReactTabsProps } from './tabs'
-
-import './tabs.scss'
-
-const Tabs = ({
-    items,
-    theme,
-    vertical,
-    even,
-    className,
-    children
-}: ReactTabsProps) => {
-    const tabContainer = useRef<HTMLDivElement>(null)
-    const [active, setActive] = useState('')
-
-    const classes = [
-        'w-tabs',
-        theme && theme,
-        vertical && 'vertical',
-        even && 'even',
-        className
-    ].filter(Boolean).join(' ')
-
-    const setTab = (tab: string) => {
-        const tabs = tabContainer.current!.querySelectorAll('[data-tab]')
-
-        Array.from(tabs).forEach((item: any) => {
-            item.dataset.active = false
-
-            if (item.dataset.tab === tab) {
-                item.dataset.active = true
-            }
-        })
-    
-        setActive(tab)
-    }
-
-    const isActive = (item: ReactTabsProps['items'][0]) => {
-        if (!active) {
-            return item.active ? 'active' : undefined
-        }
-
-        return active === item.value ? 'active' : undefined
-    }
-
-    return (
-        <section className={classes}>
-            <div className="tabs-wrapper">
-                <div className="tabs">
-                    {items.map((item, index) => (
-                        <button
-                            key={index}
-                            disabled={item.disabled}
-                            dangerouslySetInnerHTML={{ __html: item.label }}
-                            onClick={() => setTab(item.value)}
-                            className={isActive(item)}
-                        />
-                    ))}
-                </div>
-            </div>
-            <div className="tab-content" ref={tabContainer}>
-                {children}
-            </div>
-        </section>
-    )
-}
-
-export default Tabs
+import React, { useState, useRef } from 'react'
+import type { ReactTabsProps } from './tabs'
+
+import styles from './tabs.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Tabs = ({
+    items,
+    theme,
+    vertical,
+    even,
+    className,
+    children
+}: ReactTabsProps) => {
+    const tabContainer = useRef<HTMLDivElement>(null)
+    const [active, setActive] = useState('')
+
+    const classes = classNames([
+        styles.tabs,
+        theme && styles[theme],
+        vertical && styles.vertical,
+        even && styles.even,
+        className
+    ])
+
+    const setTab = (tab: string) => {
+        const tabs = tabContainer.current!.querySelectorAll('[data-tab]')
+
+        Array.from(tabs).forEach((item: any) => {
+            item.dataset.active = false
+
+            if (item.dataset.tab === tab) {
+                item.dataset.active = true
+            }
+        })
+    
+        setActive(tab)
+    }
+
+    const isActive = (item: ReactTabsProps['items'][0]) => {
+        if (!active) {
+            return item.active ? 'true' : undefined
+        }
+
+        return active === item.value ? 'true' : undefined
+    }
+
+    return (
+        <section className={classes}>
+            <div className={styles.wrapper}>
+                <div className={styles.items}>
+                    {items.map((item, index) => (
+                        <button
+                            key={index}
+                            disabled={item.disabled}
+                            dangerouslySetInnerHTML={{ __html: item.label }}
+                            onClick={() => setTab(item.value)}
+                            data-active={isActive(item)}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div className={styles.content} ref={tabContainer}>
+                {children}
+            </div>
+        </section>
+    )
+}
+
+export default Tabs

package/components/Tabs/tabs.module.scss

@@ -0,0 +1,125 @@
+@use '../../scss/config.scss' as *;
+
+.tabs {
+    &.boxed .items,
+    &.outline .items {
+        @include background(primary-50);
+        @include border-radius(md);
+        @include spacing(p-xs);
+        @include size(wmax-content);
+
+        button {
+            @include transition();
+            @include border-radius(md);
+            @include spacing(p-sm);
+
+            &[data-active="true"] {
+                @include border(0);
+                @include background(primary-70);
+                padding-bottom: 10px;
+            }
+        }
+    }
+
+    &.outline .items {
+        @include background(transparent);
+        @include border(primary-50);
+
+        button {
+            margin-bottom: 0;
+
+            &[data-active="true"] {
+                @include background(primary-50);
+            }
+        }
+    }
+
+    &.even .items button {
+        @include layout(h-center);
+        flex: 1;
+    }
+
+    &.vertical {
+        @include layout(flex, default);
+
+        &.boxed .items button,
+        &.outline .items button {
+            @include border(bottom, 0);
+        }
+        
+        .items {
+            @include layout(column, xs);
+            
+            button {
+                @include spacing(p-sm);
+                @include border(2px, bottom, primary-50);
+
+                &[data-active="true"] {
+                    padding-bottom: 10px;
+                }
+            }
+        }
+
+        .content {
+            @include spacing(m0);
+        }
+    }
+
+    .wrapper {
+        @include visibility(auto);
+    }
+
+    .items {
+        @include border(2px, bottom, primary-50);
+        @include layout(flex, sm);
+
+        button {
+            @include transition(color);
+            @include background(transparent);
+            @include typography(md, primary-20);
+            @include border(0);
+            @include spacing(p-md);
+            @include layout(flex, v-center, sm);
+
+            cursor: pointer;
+            flex-shrink: 0;
+
+            svg {
+                @include size(20px);
+                pointer-events: none;
+            }
+
+            &[disabled] {
+                @include typography(primary-30);
+                cursor: no-drop;
+            }
+            
+            &[data-active="true"] {
+                @include typography(primary);
+                @include border(2px, bottom, primary);
+
+                padding-bottom: 13px;
+            }
+        }
+    }
+
+    .content {
+        @include spacing(mt-default);
+    }
+
+    [data-tab] {
+        @include visibility(none);
+
+        &[data-active="true"] {
+            @include visibility(block);
+        }
+    }
+}
+
+@include media('xs') {
+    .tabs {
+        &.even .items {
+            @include size(wauto);
+        }
+    }
+}

package/components/ThemeSwitcher/ThemeSwitcher.astro

@@ -0,0 +1,106 @@
+---
+import type { ThemeSwitcherProps } from './themeswitcher'
+import styles from './themeswitcher.module.scss'
+
+interface Props extends ThemeSwitcherProps {}
+
+const {
+    themes,
+    toggle,
+    size,
+    className
+} = Astro.props
+
+const classes = [
+    styles.switcher,
+    toggle && styles.toggle,
+    className
+]
+
+const primaryTheme = themes[Object.keys(themes)[0]]
+const secondaryTheme = themes[Object.keys(themes)[1]]
+const useIcons = Astro.slots.has('primaryIcon') && Astro.slots.has('secondaryIcon') 
+
+const buttonClasses = [
+    styles.switch,
+    useIcons && styles.icons
+]
+---
+
+<div
+    class:list={classes}
+    style={size ? `--w-theme-switcher-size: ${size}px;` : null}
+    data-id="w-theme-switcher"
+    data-primary-theme={primaryTheme}
+    data-secondary-theme={toggle ? secondaryTheme : undefined}
+>
+    {Object.keys(themes as {}).map((theme, index) => (
+        <button
+            style={!useIcons ? `background:${theme};` : undefined}
+            data-theme={themes[theme]}
+            class:list={buttonClasses}
+        >
+            {index === 0 && <slot name="primaryIcon" />}
+            {index !== 0 && <slot name="secondaryIcon" />}
+        </button>
+    ))}
+</div>
+
+<script>
+    import { setCookie, getCookie } from '../../utils/cookies'
+    import { listen, dispatch } from '../../utils/event'
+
+    const switchers = document.querySelectorAll('[data-id="w-theme-switcher"]')
+    
+    let currentTheme = localStorage.getItem('w-theme')
+        || getCookie('w-theme')
+        || (switchers[0] as HTMLDivElement).dataset.primaryTheme
+        || ''
+
+    const setActiveButton = (buttons: HTMLButtonElement[]) => {
+        buttons.forEach(button => button.dataset.active = 'false')
+
+        buttons.forEach(button => {
+            if (button.dataset.theme === currentTheme) {
+                button.dataset.active = 'true'
+            }
+        })
+    }
+
+    Array.from(switchers).forEach(switcher => {
+        const buttons = Array.from(switcher.querySelectorAll('button'))
+
+        setActiveButton(buttons)
+
+        listen('theme-switched', theme => {
+            currentTheme = theme
+
+            setActiveButton(buttons)
+        })
+
+        switcher.addEventListener('click', event => {
+            const target = event.target as HTMLButtonElement
+
+            if (target.nodeName === 'BUTTON') {
+                const toggleTheme = (switcher as HTMLDivElement).dataset.secondaryTheme
+
+                const theme = toggleTheme
+                    ? toggleTheme === target.dataset.theme
+                        ? (target.previousElementSibling as HTMLButtonElement).dataset.theme as string
+                        : (target.nextElementSibling as HTMLButtonElement).dataset.theme as string
+                    : target.dataset.theme as string
+
+                document.body.classList.replace(currentTheme, theme)
+
+                currentTheme = theme
+
+                setActiveButton(buttons)
+                setCookie('w-theme', currentTheme, 30)
+                localStorage.setItem('w-theme', currentTheme)
+
+                dispatch('theme-switched', currentTheme)
+            }
+        })
+    })
+</script>
+

package/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import type { ThemeSwitcherProps } from './themeswitcher'
+    
+    import { classNames } from '../../utils/classNames'
+    import { listen, dispatch } from '../../utils/event'
+    import { setCookie, getCookie } from '../../utils/cookies'
+
+    import styles from './themeswitcher.module.scss'
+
+    export let themes: ThemeSwitcherProps['themes'] = {}
+    export let toggle: ThemeSwitcherProps['toggle'] = false
+    export let size: ThemeSwitcherProps['size'] = 20
+    export let className: ThemeSwitcherProps['className'] = ''
+
+    let currentTheme = ''
+    let toggled = false
+
+    const classes = classNames([
+        styles.switcher,
+        toggle && styles.toggle,
+        className
+    ])
+
+    const primaryTheme = themes[Object.keys(themes)[0]]
+    const secondaryTheme = themes[Object.keys(themes)[1]]
+    const useIcons = $$slots.primaryIcon && $$slots.secondaryIcon 
+
+    const setTheme = (theme: string | number) => {
+        if (typeof theme === 'number') {
+            theme = toggled ? primaryTheme : secondaryTheme
+        }
+
+        document.body.classList.replace(currentTheme, theme)
+
+        setCookie('w-theme', theme, 30)
+        localStorage.setItem('w-theme', theme)
+
+        dispatch('theme-switched', theme)
+    }
+
+    onMount(() => {
+        currentTheme = localStorage.getItem('w-theme')
+            || getCookie('w-theme')
+            || themes[Object.keys(themes)[0]]
+
+        if (toggle && currentTheme === secondaryTheme) {
+            toggled = true
+        }
+
+        listen('theme-switched', theme => {
+            currentTheme = theme
+            toggled = currentTheme === secondaryTheme
+        })
+    })
+</script>
+
+<div
+    class={classes}
+    style={size ? `--w-theme-switcher-size: ${size}px;` : null}
+>
+    {#each Object.keys(themes) as theme, index}
+        <button
+            style={!useIcons ? `background:${theme};` : undefined}
+            data-active={currentTheme === themes[theme]}
+            on:click={() => setTheme(toggle ? index : themes[theme])}
+            class={classNames([
+                styles.switch,
+                useIcons && styles.icons
+            ])}
+        >
+            {#if index === 0}<slot name="primaryIcon" />{/if}
+            {#if index !== 0}<slot name="secondaryIcon" />{/if}
+        </button>
+    {/each}
+</div>

package/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react'
+import type { ReactThemeSwitcherProps } from './themeswitcher'
+
+import { setCookie, getCookie } from '../../utils/cookies'
+import { listen, dispatch } from '../../utils/event'
+import { classNames } from '../../utils/classNames'
+
+import styles from './themeswitcher.module.scss'
+
+const ThemeSwitcher = ({
+    themes,
+    toggle,
+    size,
+    primaryIcon,
+    secondaryIcon,
+    className
+}: ReactThemeSwitcherProps) => {
+    const [currentTheme, setCurrentTheme] = useState('')
+    const [toggled, setToggled] = useState(false)
+
+    const classes = classNames([
+        styles.switcher,
+        toggle && styles.toggle,
+        className
+    ])
+
+    const sizeStyles = size
+        ? { '--w-theme-switcher-size': `${size}px` } as React.CSSProperties
+        : undefined
+
+    const primaryTheme = themes[Object.keys(themes)[0]]
+    const secondaryTheme = themes[Object.keys(themes)[1]]
+    const useIcons = primaryIcon && secondaryIcon 
+
+    const setTheme = (theme: string | number) => {
+        if (typeof theme === 'number') {
+            theme = toggled ? primaryTheme : secondaryTheme
+        }
+
+        document.body.classList.replace(currentTheme, theme)
+
+        setCookie('w-theme', theme, 30)
+        localStorage.setItem('w-theme', theme)
+
+        dispatch('theme-switched', theme)
+    }
+
+    useEffect(() => {
+        setCurrentTheme(
+            localStorage.getItem('w-theme')
+            || getCookie('w-theme')
+            || themes[Object.keys(themes)[0]]
+        )
+
+        if (toggle && currentTheme === secondaryTheme) {
+            setToggled(true)
+        }
+
+        listen('theme-switched', theme => {
+            setCurrentTheme(theme)
+            setToggled(theme === secondaryTheme)
+        })
+    }, [])
+
+    return (
+        <div
+            className={classes}
+            style={sizeStyles}
+        >
+            {Object.keys(themes as {}).map((theme, index) => (
+                <button
+                    key={index}
+                    data-active={currentTheme === themes[theme]}
+                    onClick={() => setTheme(toggle ? index : themes[theme])}
+                    style={!useIcons ? { background: theme } : undefined}
+                    className={classNames([
+                        styles.switch,
+                        useIcons && styles.icons
+                    ])}
+                >
+                    {index === 0 && primaryIcon}
+                    {index !== 0 && secondaryIcon}
+                </button>
+            ))}
+        </div>
+    )
+}
+
+export default ThemeSwitcher

package/components/ThemeSwitcher/themeswitcher.module.scss

@@ -0,0 +1,76 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-theme-switcher-size: 20px;
+}
+
+.switcher {
+    @include layout(flex, sm);
+
+    &.toggle {
+        @include position(relative);
+        width: var(--w-theme-switcher-size);
+        height: var(--w-theme-switcher-size);
+
+        .switch {
+            position: absolute;
+
+            &:first-child {
+                @include layer(overlay);
+            }
+
+            &:nth-child(2) {
+                @include layer(fg);
+            }
+
+            &[data-active="true"] {
+                @include layer(popup);
+            }
+        }
+    }
+}
+
+.switch {
+    @include border(0);
+    @include border-radius(max);
+    @include position(relative);
+
+    width: var(--w-theme-switcher-size);
+    height: var(--w-theme-switcher-size);
+    cursor: pointer;
+
+    &.icons {
+        @include transition(opacity);
+        @include typography(primary);
+        @include background(transparent);
+        @include spacing(p0);
+        @include visibility(0);
+
+        &[data-active="true"] {
+            @include visibility(1);
+        }
+
+        svg, img {
+            pointer-events: none;
+            width: var(--w-theme-switcher-size);
+            height: var(--w-theme-switcher-size);
+        }
+    }
+
+    &:not(.icons)::after {
+        @include position(absolute, center);
+        @include border(primary);
+        @include border-radius(max);
+        @include layer(bg);
+        @include transition();
+        @include size(0);
+
+        content: '';
+    }
+
+    &[data-active="true"]::after {
+        @include layer(default);
+        width: calc(var(--w-theme-switcher-size) + 5px);
+        height: calc(var(--w-theme-switcher-size) + 5px);
+    }
+}

package/components/ThemeSwitcher/themeswitcher.ts

@@ -0,0 +1,13 @@
+export type ThemeSwitcherProps = {
+    themes: {
+        [key: string]: string
+    }
+    toggle?: boolean
+    size?: number
+    className?: string
+}
+
+export type ReactThemeSwitcherProps = {
+    primaryIcon?: React.ReactNode
+    secondaryIcon?: React.ReactNode
+} & ThemeSwitcherProps