webcoreui 0.0.11 → 0.1.0

package/components/Input/Input.tsx

@@ -1,59 +1,59 @@
-import React from 'react'
-import type { ReactInputProps } from './input'
-import ConditionalWrapper from '@components/ConditionalWrapper/ConditionalWrapper.tsx'
-
-import './input.scss'
-
-const Input = ({
-    type = 'text',
-    theme,
-    label,
-    subText,
-    fill,
-    icon,
-    value,
-    className,
-    ...rest
-}: ReactInputProps) => {
-    const classes = [
-        'w-input',
-        theme,
-        fill && 'fill',
-        className
-    ].filter(Boolean).join(' ')
-
-    const useLabel = !!(label || subText || icon)
-
-    return (
-        <ConditionalWrapper condition={useLabel} wrapper={children => (
-            <label className="w-input-label">
-                {children}
-            </label>
-        )}>
-            {label && (
-                <div className="label">{label}</div>
-            )}
-            <ConditionalWrapper condition={!!icon} wrapper={children => (
-                <div className="input-wrapper">
-                    {children}
-                </div>
-            )}>
-                {icon && icon}
-                <input
-                    type={type}
-                    className={classes}
-                    defaultValue={value}
-                    {...rest}
-                />
-            </ConditionalWrapper>
-            {subText && (
-                <div
-                    className="subtext"
-                    dangerouslySetInnerHTML={{ __html: subText }}
-                />
-            )}
-        </ConditionalWrapper>
-    )
-}
-
-export default Input
+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'
+
+const Input = ({
+    type = 'text',
+    theme,
+    label,
+    subText,
+    icon,
+    value,
+    className,
+    children,
+    ...rest
+}: ReactInputProps) => {
+    const classes = classNames([
+        styles.input,
+        theme && styles[theme],
+        className
+    ])
+
+    const useLabel = !!(label || subText || children)
+
+    return (
+        <ConditionalWrapper condition={useLabel} wrapper={children => (
+            <label className={styles['input-label']}>
+                {children}
+            </label>
+        )}>
+            {label && (
+                <div className={styles.label}>{label}</div>
+            )}
+            <ConditionalWrapper condition={!!children} wrapper={children => (
+                <div className={styles.wrapper}>
+                    {children}
+                </div>
+            )}>
+                {children}
+                <input
+                    type={type}
+                    className={classes}
+                    defaultValue={value}
+                    {...rest}
+                />
+            </ConditionalWrapper>
+            {subText && (
+                <div
+                    className={styles.subtext}
+                    dangerouslySetInnerHTML={{ __html: subText }}
+                />
+            )}
+        </ConditionalWrapper>
+    )
+}
+
+export default Input

package/components/Input/input.module.scss

@@ -0,0 +1,79 @@
+@use '../../scss/config.scss' as *;
+
+.input {
+    @include border-radius(sm);
+    @include spacing(py-xs, px-sm);
+    @include border(primary-50);
+    @include background(transparent);    
+    @include typography(regular, primary, hlg);
+    @include size('w100%');
+
+    color-scheme: var(--w-color-scheme);
+
+    &[disabled] {
+        @include typography(primary-30);
+        cursor: no-drop;
+    }
+
+    &::file-selector-button {
+        @include background(transparent);
+        @include border(0);
+        @include typography(primary);
+    }
+
+    &::placeholder {
+        @include typography(primary-30);
+    }
+
+    &[type="color"] {
+        @include spacing(p0);
+    }
+
+    &.info {
+        @include border(info);
+    }
+
+    &.success {
+        @include border(success);
+    }
+
+    &.warning {
+        @include border(warning);
+    }
+
+    &.alert {
+        @include border(alert);
+    }
+
+    &.fill {
+        @include background(primary-50);
+    }
+}
+
+.input-label {
+    @include layout(flex, column);
+
+    .label {
+        @include typography(md, primary-20);
+        @include spacing(mb-xs);
+    }
+
+    .wrapper {
+        @include layout(flex, v-center, sm);
+        @include position(relative);
+
+        input {
+            padding-left: 40px;
+        }
+
+        svg {
+            @include position(absolute, l10px);
+            @include size(20px);
+        }
+    }
+
+    .subtext {
+        @include typography(sm, primary-30);
+        @include spacing(mt-xs);
+    }
+}

package/components/Input/input.ts

@@ -17,6 +17,7 @@ export type InputProps = {
         | 'success'
         | 'warning'
         | 'alert'
+        | 'fill'
         | null
     value?: string | number
     name?: string
@@ -24,7 +25,6 @@ export type InputProps = {
     label?: string
     disabled?: boolean
     subText?: string
-    fill?: boolean
     maxLength?: number
     min?: number
     max?: number
@@ -38,7 +38,13 @@ export type InputProps = {
     [key: string]: any
 }
 
+export type SvelteInputProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & InputProps
+
 export type ReactInputProps = {
-    icon?: string
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
     children?: React.ReactNode
 } & InputProps

package/components/Menu/Menu.astro

@@ -0,0 +1,107 @@
+---
+import type { MenuProps } from './menu'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './menu.module.scss'
+
+interface Props extends MenuProps {}
+
+const {
+    items,
+    logo,
+    centerLogo,
+    className,
+    wrapperClassName
+} = Astro.props
+
+const classes = [
+    styles.menu,
+    className
+]
+
+const containerClasses = [
+    styles.container,
+    wrapperClassName
+]
+
+const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('default')
+---
+
+<header class:list={classes}>
+    <div class:list={containerClasses}>
+        <ConditionalWrapper condition={!!wrapMenu}>
+            <div slot="wrapper" class={styles.wrapper}>
+                children
+            </div>
+            {logo?.url && !centerLogo && (
+                <a href="/">
+                    <img
+                        src={logo.url}
+                        alt={logo.alt || 'Logo'}
+                        width={logo.width}
+                        height={logo.height}
+                    />
+                </a>
+            )}
+
+            {!centerLogo && logo?.html && (
+                <a href="/">
+                    <Fragment set:html={logo.html} />
+                </a>
+            )}
+
+            {items?.length && (
+                <ul>
+                    {items.map(item => (
+                        <li>
+                            <a href={item.url} target={item.target}>
+                                {item.name}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </ConditionalWrapper>
+
+        {items?.length && (
+            <button class={styles.hamburger} data-id="hamburger">
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+            </button>
+        )}
+
+        {centerLogo && logo?.html && (
+            <a href="/">
+                <Fragment set:html={logo.html} />
+            </a>
+        )}
+
+        {logo?.url && centerLogo && (
+            <a href="/">
+                <img
+                    src={logo.url}
+                    alt={logo.alt || 'Logo'}
+                    width={logo.width}
+                    height={logo.height}
+                />
+            </a>
+        )}
+
+        <slot />
+    </div>
+</header>
+
+<script>
+    document
+        .querySelector('[data-id="hamburger"]')
+        ?.addEventListener('click', event => {
+            const hamburger = event.currentTarget as HTMLDivElement
+            const header = hamburger.parentElement?.parentElement as HTMLHeadElement
+
+            header.dataset.active = header.dataset.active === 'true'
+                ? 'false'
+                : 'true'
+    })
+</script>

package/components/Menu/Menu.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import type { MenuProps } from './menu'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import styles from './menu.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let items: MenuProps['items'] = []
+    export let logo: MenuProps['logo'] = null
+    export let centerLogo: MenuProps['centerLogo'] = false
+    export let className: MenuProps['className'] = ''
+    export let wrapperClassName: MenuProps['wrapperClassName'] = ''
+
+    const classes = classNames([
+        styles.menu,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        wrapperClassName
+    ])
+
+    const wrapMenu = (logo?.url || logo?.html) && items?.length && $$slots.default
+
+    let active = false
+
+    const toggleMenu = () => active = !active
+</script>
+
+<header class={classes} data-active={active || null}>
+    <div class={containerClasses}>
+        <ConditionalWrapper condition={!!wrapMenu} class={styles.wrapper}>
+            {#if logo?.url && !centerLogo}
+                <a href="/">
+                    <img
+                        src={logo.url}
+                        alt={logo.alt || 'Logo'}
+                        width={logo.width}
+                        height={logo.height}
+                    />
+                </a>
+            {/if}
+
+            {#if !centerLogo && logo?.html}
+                <a href="/">{@html logo.html}</a>
+            {/if}
+        
+            {#if items?.length}
+                <ul>
+                    {#each items as item}
+                        <li>
+                            <a href={item.url} target={item.target}>
+                                {item.name}
+                            </a>
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
+        </ConditionalWrapper>
+    
+        {#if items?.length}
+            <button class={styles.hamburger} on:click={toggleMenu}>
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+                <span class={styles.meat}></span>
+            </button>
+        {/if}
+            
+        {#if centerLogo && logo?.html}
+            <a href="/">{@html logo.html}</a>
+        {/if}
+
+        {#if logo?.url && centerLogo}
+            <a href="/">
+                <img
+                    src={logo.url}
+                    alt={logo.alt || 'Logo'}
+                    width={logo.width}
+                    height={logo.height}
+                />
+            </a>
+        {/if}
+    
+        <slot />
+    </div>
+</header>

package/components/Menu/Menu.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react'
+import type { ReactMenuProps } from './menu'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import styles from './menu.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Menu = ({
+    items,
+    logo,
+    centerLogo,
+    className,
+    wrapperClassName,
+    children
+}: ReactMenuProps) => {
+    const [active, setActive] = useState(false)
+
+    const classes = classNames([
+        styles.menu,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        wrapperClassName
+    ])
+
+    const wrapMenu = (logo?.url || logo?.html) && items?.length && children
+
+    const toggleMenu = () => setActive(!active)
+
+    return (
+        <header className={classes} data-active={active || null}>
+            <div className={containerClasses}>
+                <ConditionalWrapper
+                    condition={!!wrapMenu}
+                    wrapper={children => (
+                        <div className={styles.wrapper}>
+                            {children}
+                        </div>
+                    )}
+                >
+                    {logo?.url && !centerLogo &&  (
+                        <a href="/">
+                            <img
+                                src={logo.url}
+                                alt={logo.alt || 'Logo'}
+                                width={logo.width}
+                                height={logo.height}
+                            />
+                        </a>
+                    )}
+
+                    {!centerLogo && logo?.html && (
+                        <a
+                            href="/"
+                            dangerouslySetInnerHTML={{ __html: logo.html }}
+                        />
+                    )}
+
+                    {!!items?.length && (
+                        <ul>
+                            {items.map((item, index) => (
+                                <li key={index}>
+                                    <a href={item.url} target={item.target}>
+                                        {item.name}
+                                    </a>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </ConditionalWrapper>
+                
+                {!!items?.length && (
+                    <button className={styles.hamburger} onClick={toggleMenu}>
+                        <span className={styles.meat}></span>
+                        <span className={styles.meat}></span>
+                        <span className={styles.meat}></span>
+                        <span className={styles.meat}></span>
+                    </button>
+                )}
+
+                {centerLogo && logo?.html && (
+                    <a
+                        href="/"
+                        dangerouslySetInnerHTML={{ __html: logo.html }}
+                    />
+                )}
+
+                {logo?.url && centerLogo && (
+                    <a href="/">
+                        <img
+                            src={logo.url}
+                            alt={logo.alt || 'Logo'}
+                            width={logo.width}
+                            height={logo.height}
+                        />
+                    </a>
+                )}
+
+                {children}
+            </div>
+        </header>
+    )
+}
+
+export default Menu

package/components/Menu/menu.module.scss

@@ -0,0 +1,141 @@
+@use '../../scss/config.scss' as *;
+
+.menu {
+    @include background(primary-70);
+    @include spacing(p-md);
+    @include typography(md);
+    @include border(bottom, primary-50);
+    @include position(sticky, t0);
+    @include layer(header);
+
+    &[data-active="true"] {
+        .hamburger {
+            box-shadow: 0 0 0 1000px var(--w-color-primary-70);
+
+            .meat:first-child,
+            .meat:last-child {
+                @include visibility(0);
+            }
+
+            .meat:first-child {
+                transform: translateY(20px) scale(0);
+            }
+
+            .meat:last-child {
+                transform: translateY(-20px) scale(0);
+            }
+
+            .meat:nth-child(2) {
+                transform: rotate(45deg);
+            }
+
+            .meat:nth-child(3) {
+                transform: rotate(-45deg);
+            }
+        }
+
+        ul {
+            @include transition(opacity);
+            @include visibility(1);
+            @include layer(header);
+            pointer-events: all;
+        }
+    }
+
+    .wrapper {
+        @include layout(flex, v-center, default);
+    }
+
+    a {
+        @include typography(none);
+    }
+
+    img,
+    svg {
+        display: block;
+    }
+
+    ul {
+        @include spacing(0);
+        @include layout(flex, default, column);
+        @include position(fixed, t20px, l20px);
+        @include visibility(0);
+        @include typography(normal);
+
+        list-style-type: none;
+        pointer-events: none;
+
+        li {
+            @include spacing(m0);
+        }
+
+        a {
+            @include typography(primary-20);
+    
+            &:hover {
+                @include typography(primary);
+            }
+        }
+    }
+
+    .hamburger {
+        @include transition(box-shadow);
+        @include position(relative);
+        @include size(w30px, h20px);
+        @include border-radius(max);
+        @include spacing(p0);
+        @include border(0);
+        @include background(transparent);
+        @include layer(top);
+
+        box-shadow: 0 0 0 0 var(--w-color-primary-70);
+        cursor: pointer;
+
+        .meat {
+            @include transition();
+            @include size('w100%', h2px);
+            @include position(absolute);
+            @include background(primary);
+            @include border-radius(md);
+
+            display: block;
+
+            &:first-child {
+                @include position(t0);
+            }
+
+            &:nth-child(2),
+            &:nth-child(3) {
+                @include position(v-center);
+            }
+
+            &:last-child {
+                @include position(b0);
+            }
+        }
+    }
+}
+
+.container {
+    @include layout(flex, v-center, default, h-between, wrap);
+    @include spacing(auto-none, px-default);
+
+    max-width: 1200px;
+}
+
+@include media('sm') {
+    .menu {
+        .hamburger {
+            @include visibility(none);
+        }
+
+        ul {
+            @include position(static);
+            @include visibility(1);
+            @include layout(row);
+
+            pointer-events: all;
+            transform: none;
+        }
+    }
+}

package/components/Menu/menu.ts

@@ -0,0 +1,21 @@
+export type MenuProps = {
+    items?: {
+        url: string
+        name: string
+        target?: string
+    }[]
+    logo?: {
+        url?: string
+        alt?: string
+        width?: number
+        height?: number
+        html?: string
+    } | null
+    centerLogo?: boolean
+    className?: string
+    wrapperClassName?: string
+}
+
+export type ReactMenuProps = {
+    children?: React.ReactNode
+} & MenuProps