webcoreui 0.0.8 → 0.0.10

package/components/Timeline/timeline.ts

@@ -0,0 +1,61 @@
+export type TimelineProps = {
+    theme?: 'fill' | 'stroke' | 'stroke fill' | null
+    alternate?: boolean
+    centered?: boolean
+    color?: string
+    textColor?: string
+    className?: string
+    counter?: 'arabic-indic'
+    | 'armenian'
+    | 'bengali'
+    | 'cambodian'
+    | 'circle'
+    | 'cjk-decimal'
+    | 'cjk-earthly-branch'
+    | 'cjk-heavenly-stem'
+    | 'decimal-leading-zero'
+    | 'devanagari'
+    | 'disc'
+    | 'disclosure-closed'
+    | 'disclosure-open'
+    | 'ethiopic-numeric'
+    | 'georgian'
+    | 'gujarati'
+    | 'gurmukhi'
+    | 'hebrew'
+    | 'hiragana'
+    | 'hiragana-iroha'
+    | 'japanese-formal'
+    | 'kannada'
+    | 'katakana'
+    | 'katakana-iroha'
+    | 'khmer'
+    | 'korean-hangul-formal'
+    | 'korean-hanja-formal'
+    | 'lao'
+    | 'lower-alpha'
+    | 'lower-alpha'
+    | 'lower-armenian'
+    | 'lower-greek'
+    | 'lower-roman'
+    | 'malayalam'
+    | 'mongolian'
+    | 'myanmar'
+    | 'oriya'
+    | 'persian'
+    | 'simp-chinese-formal'
+    | 'square'
+    | 'tamil'
+    | 'telugu'
+    | 'thai'
+    | 'tibetan'
+    | 'trad-chinese-formal'
+    | 'upper-alpha'
+    | 'upper-armenian'
+    | 'upper-roman'
+    | null
+}
+
+export type ReactTimelineProps = {
+    children: React.ReactNode
+} & TimelineProps

package/components/TimelineItem/TimelineItem.astro

@@ -0,0 +1,26 @@
+---
+import type { TimelineItemProps } from './timelineitem'
+import './timelineitem.scss'
+
+interface Props extends TimelineItemProps {}
+
+const {
+    title,
+    titleTag = 'span',
+    className
+} = Astro.props
+
+const classes = [
+    'w-timeline-item',
+    className
+]
+
+const Title = titleTag
+---
+
+<li class:list={classes}>
+    {title && (
+        <Title class:list="timeline-title">{title}</Title>
+    )}
+    <slot />
+</li>

package/components/TimelineItem/TimelineItem.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { TimelineItemProps } from './timelineitem'
+    import './timelineitem.scss'
+
+    export let title: TimelineItemProps['title'] = ''
+    export let titleTag: TimelineItemProps['titleTag'] = 'span'
+    export let className: TimelineItemProps['className'] = ''
+
+    const classes = [
+        'w-timeline-item',
+        className
+    ].filter(Boolean).join(' ')
+</script>
+
+<li class={classes}>
+    {#if title}
+        <svelte:element this={titleTag} class="timeline-title">
+            {title}
+        </svelte:element>
+    {/if}
+    <slot />
+</li>

package/components/TimelineItem/TimelineItem.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { TimelineItemProps } from './timelineitem'
+
+import './timelineitem.scss'
+
+type ReactTimelineItemProps = {
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<TimelineItemProps, 'titleTag'>
+
+const TimelineItem = ({
+    title,
+    TitleTag = 'span',
+    className,
+    children
+}: ReactTimelineItemProps) => {
+    const classes = [
+        'w-timeline-item',
+        className
+    ].filter(Boolean).join(' ')
+
+    return (
+        <li className={classes}>
+            {title && (
+                <TitleTag className="timeline-title">{title}</TitleTag>
+            )}
+            {children}
+        </li>
+    )
+}
+
+export default TimelineItem

package/components/TimelineItem/timelineitem.scss

@@ -0,0 +1,31 @@
+@import '../../scss/config.scss';
+
+.w-timeline-item {
+    position: relative;
+    font-size: 16px;
+
+    &::before {
+        content: counter(item, var(--w-timeline-counter));
+        counter-increment: item;
+        position: absolute;
+        top: -5px;
+        width: 25px;
+        height: 25px;
+        border-radius: 100%;
+        background: var(--w-timeline-color);
+        color: var(--w-timeline-text-color);
+        font-size: 14px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid #000;
+        margin-left: -40px;
+    }
+
+    .timeline-title {
+        display: block;
+        margin-bottom: 10px;
+        font-family: Bold;
+        font-size: 18px;
+    }
+}

package/components/TimelineItem/timelineitem.ts

@@ -0,0 +1,5 @@
+export type TimelineItemProps = {
+    title?: string
+    titleTag?: string
+    className?: string
+}

package/components/Toast/Toast.astro

@@ -0,0 +1,30 @@
+---
+import type { ToastProps } from './toast'
+import Alert from '../Alert/Alert.astro'
+
+import './toast.scss'
+
+interface Props extends ToastProps {}
+
+const {
+    position,
+    className
+} = Astro.props
+
+const classes = [
+    'w-toast',
+    position,
+    className
+].filter(Boolean).join(' ')
+---
+
+{Astro.slots.has('icon') ? (
+    <Alert {...Astro.props} className={classes}>
+        <slot slot="icon" name="icon" />
+        <slot />
+    </Alert>
+) : (
+    <Alert {...Astro.props} className={classes}>
+        <slot />
+    </Alert>
+)}

package/components/Toast/Toast.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { ToastProps } from './toast'
+    import Alert from '../Alert/Alert.svelte'
+    import './toast.scss'
+
+    export let position: ToastProps['position'] = ''
+    export let className: ToastProps['className'] = ''
+
+    const classes = [
+        'w-toast',
+        position,
+        className
+    ].filter(Boolean).join(' ')
+</script>
+
+<Alert {...$$restProps} className={classes}>
+    {#if $$slots.icon}
+        <slot name="icon" />
+    {/if}
+    <slot />
+</Alert>

package/components/Toast/Toast.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import type { ReactToastProps } from './toast'
+import Alert from '../Alert/Alert.tsx'
+
+import './toast.scss'
+
+const Toast = ({
+    icon,
+    position,
+    className,
+    children,
+    ...rest
+}: ReactToastProps) => {
+    const classes = [
+        'w-toast',
+        position,
+        className
+    ].filter(Boolean).join(' ')
+
+    return (
+        <Alert {...rest} className={classes} icon={icon}>
+            {children}
+        </Alert>
+
+    )
+}
+
+export default Toast

package/components/Toast/toast.scss

@@ -0,0 +1,43 @@
+@import '../../scss/config.scss';
+
+.w-toast {
+    background: #000;
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    transform: translateY(calc(100% + 25px));
+
+    &:not(.no-anim) {
+        @include Transition(transform);
+    }
+
+    &.show {
+        transform: translateY(0);
+    }
+
+    &.bottom-left,
+    &.top-left {
+        right: auto;
+        left: 20px;
+    }
+
+    &.top-left,
+    &.top-right,
+    &.top-full {
+        bottom: auto;
+        top: 20px;
+        transform: translateY(calc(-100% - 25px));
+
+        &.show {
+            transform: translateY(0);
+        }
+    }
+
+    &.bottom-full {
+        left: 20px;
+    }
+
+    &.top-full {
+        left: 20px;
+    }
+}

package/components/Toast/toast.ts

@@ -0,0 +1,11 @@
+import type { AlertProps } from '../Alert/alert'
+
+export type ToastProps = {
+    position?: string
+    [key: string]: any
+} & AlertProps
+
+export type ReactToastProps = {
+    children: React.ReactNode
+    icon?: string
+} & ToastProps

package/icons/check.svg

@@ -1,4 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6425 7.92858C17.0558 8.22704 17.1489 8.80404 16.8505 9.21734L12.4237 15.3474C12.4236 15.3475 12.4238 15.3473 12.4237 15.3474C12.2341 15.6102 11.9873 15.8271 11.7024 15.9814C11.4174 16.1357 11.1011 16.2237 10.7773 16.2389C10.4535 16.254 10.1304 16.1958 9.83224 16.0687C9.53413 15.9416 9.26855 15.7489 9.05527 15.5049C9.0552 15.5048 9.05534 15.505 9.05527 15.5049L7.20296 13.3867C6.86736 13.003 6.90641 12.4198 7.29017 12.0842C7.67393 11.7486 8.25709 11.7877 8.59268 12.1714L10.445 14.2896C10.4755 14.3245 10.5136 14.3522 10.5562 14.3704C10.5988 14.3886 10.645 14.3969 10.6912 14.3947C10.7375 14.3925 10.7827 14.38 10.8234 14.3579C10.8641 14.3359 10.8993 14.3049 10.9264 14.2674L15.3538 8.13651C15.6522 7.72321 16.2292 7.63012 16.6425 7.92858Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.84615C6.39219 1.84615 1.84615 6.39219 1.84615 12C1.84615 17.6078 6.39219 22.1538 12 22.1538C17.6078 22.1538 22.1538 17.6078 22.1538 12C22.1538 6.39219 17.6078 1.84615 12 1.84615ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.086 2.4174C24.073 3.13011 24.2953 4.50795 23.5827 5.49488L13.0118 20.1331C13.012 20.1328 13.0116 20.1333 13.0118 20.1331C12.559 20.7606 11.9697 21.2786 11.2894 21.647C10.6088 22.0155 9.85351 22.2256 9.0803 22.2619C8.30708 22.298 7.53554 22.159 6.82355 21.8555C6.11169 21.552 5.4775 21.0918 4.9682 20.5092C4.96837 20.5094 4.96803 20.5089 4.9682 20.5092L0.544999 15.451C-0.256393 14.5348 -0.163144 13.1422 0.753251 12.3408C1.66965 11.5394 3.06219 11.6327 3.86356 12.549L8.28678 17.6071C8.35962 17.6905 8.4506 17.7566 8.55232 17.8001C8.65405 17.8435 8.76437 17.8633 8.8747 17.8581C8.98526 17.8528 9.09319 17.823 9.19038 17.7702C9.28757 17.7177 9.37163 17.6437 9.43634 17.5541L20.0087 2.91393C20.7212 1.92699 22.0991 1.7047 23.086 2.4174Z" fill="currentColor"/>
 </svg>

package/icons/circle-check.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6425 7.92858C17.0558 8.22704 17.1489 8.80404 16.8505 9.21734L12.4237 15.3474C12.4236 15.3475 12.4238 15.3473 12.4237 15.3474C12.2341 15.6102 11.9873 15.8271 11.7024 15.9814C11.4174 16.1357 11.1011 16.2237 10.7773 16.2389C10.4535 16.254 10.1304 16.1958 9.83224 16.0687C9.53413 15.9416 9.26855 15.7489 9.05527 15.5049C9.0552 15.5048 9.05534 15.505 9.05527 15.5049L7.20296 13.3867C6.86736 13.003 6.90641 12.4198 7.29017 12.0842C7.67393 11.7486 8.25709 11.7877 8.59268 12.1714L10.445 14.2896C10.4755 14.3245 10.5136 14.3522 10.5562 14.3704C10.5988 14.3886 10.645 14.3969 10.6912 14.3947C10.7375 14.3925 10.7827 14.38 10.8234 14.3579C10.8641 14.3359 10.8993 14.3049 10.9264 14.2674L15.3538 8.13651C15.6522 7.72321 16.2292 7.63012 16.6425 7.92858Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.84615C6.39219 1.84615 1.84615 6.39219 1.84615 12C1.84615 17.6078 6.39219 22.1538 12 22.1538C17.6078 22.1538 22.1538 17.6078 22.1538 12C22.1538 6.39219 17.6078 1.84615 12 1.84615ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z" fill="currentColor"/>
+</svg>

package/index.js

@@ -0,0 +1 @@
+export * from './utils/toast.ts'

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.8",
+    "version": "0.0.10",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",
         "build:package": "node scripts/build.js",
-        "test": "echo \"Error: no test specified\""
+        "test": "echo \"Error: no test specified\"",
+        "create-component": "node scripts/createComponent.js"
     },
     "dependencies": {
         "@astrojs/check": "0.7.0",
@@ -30,12 +31,14 @@
         "components",
         "icons",
         "scss",
+        "utils",
         "astro.d.ts",
         "astro.js",
         "svelte.d.ts",
         "svelte.js",
         "react.d.ts",
         "react.js",
+        "index.js",
         "README.md",
         "LICENSE"
     ],

package/react.d.ts

@@ -1,19 +1,40 @@
+import { FC } from 'react'
+import type { AccordionProps } from './components/Accordion/accordion'
+import type { ReactAlertProps } from './components/Alert/alert'
+import type { AvatarProps } from './components/Avatar/avatar'
+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 { ReactConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { IconProps } from './components/Icon/icon'
+import type { ProgressProps } from './components/Progress/progress'
+import type { ReactRadioProps } from './components/Radio/radio'
+import type { RatingProps } from './components/Rating/rating'
+import type { SpinnerProps } from './components/Spinner/spinner'
+import type { ReactSwitchProps } from './components/Switch/switch'
+import type { ReactTabsProps } from './components/Tabs/tabs'
+import type { ReactTimelineProps } from './components/Timeline/timeline'
+import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
+import type { ReactToastProps } from './components/Toast/toast'
 
 declare module 'webcoreui/react' {
-    import type { AccordionProps } from './components/Accordion/accordion'
-	import type { AlertProps } from './components/Alert/alert'
-	import type { BadgeProps } from './components/Badge/badge'
-	import type { ButtonProps } from './components/Button/button'
-	import type { CardProps } from './components/Card/card'
-	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
-	import type { IconProps } from './components/Icon/icon'
-
-    export function Accordion(_props: AccordionProps): any
-	export function Alert(_props: AlertProps): any
-	export function Badge(_props: BadgeProps): any
-	export function Button(_props: ButtonProps): any
-	export function Card(_props: CardProps): any
-	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
-	export function Icon(_props: IconProps): any
-}
-    
+    export const Accordion: FC<AccordionProps>
+	export const Alert: FC<ReactAlertProps>
+	export const Avatar: FC<AvatarProps>
+	export const Badge: FC<ReactBadgeProps>
+	export const Button: FC<ReactButtonProps>
+	export const Card: FC<ReactCardProps>
+	export const Checkbox: FC<ReactCheckboxProps>
+	export const ConditionalWrapper: FC<ReactConditionalWrapperProps>
+	export const Icon: FC<IconProps>
+	export const Progress: FC<ProgressProps>
+	export const Radio: FC<ReactRadioProps>
+	export const Rating: FC<RatingProps>
+	export const Spinner: FC<SpinnerProps>
+	export const Switch: FC<ReactSwitchProps>
+	export const Tabs: FC<ReactTabsProps>
+	export const Timeline: FC<ReactTimelineProps>
+	export const TimelineItem: FC<TimelineItemProps>
+	export const Toast: FC<ReactToastProps>
+}

package/react.js

@@ -1,15 +1,37 @@
 import AccordionComponent from './components/Accordion/Accordion.tsx'
 import AlertComponent from './components/Alert/Alert.tsx'
+import AvatarComponent from './components/Avatar/Avatar.tsx'
 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 ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.tsx'
 import IconComponent from './components/Icon/Icon.tsx'
+import ProgressComponent from './components/Progress/Progress.tsx'
+import RadioComponent from './components/Radio/Radio.tsx'
+import RatingComponent from './components/Rating/Rating.tsx'
+import SpinnerComponent from './components/Spinner/Spinner.tsx'
+import SwitchComponent from './components/Switch/Switch.tsx'
+import TabsComponent from './components/Tabs/Tabs.tsx'
+import TimelineComponent from './components/Timeline/Timeline.tsx'
+import TimelineItemComponent from './components/TimelineItem/TimelineItem.tsx'
+import ToastComponent from './components/Toast/Toast.tsx'
 
 export const Accordion = AccordionComponent
 export const Alert = AlertComponent
+export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
+export const Checkbox = CheckboxComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
-export const Icon = IconComponent
+export const Icon = IconComponent
+export const Progress = ProgressComponent
+export const Radio = RadioComponent
+export const Rating = RatingComponent
+export const Spinner = SpinnerComponent
+export const Switch = SwitchComponent
+export const Tabs = TabsComponent
+export const Timeline = TimelineComponent
+export const TimelineItem = TimelineItemComponent
+export const Toast = ToastComponent

package/scss/global/tooltip.scss

@@ -0,0 +1,133 @@
+@import '../config';
+
+@mixin Tooltip() {
+    [data-tooltip] {
+        display: inline-block;
+        position: relative;
+
+        &::before,
+        &::after {
+            @include Transition();
+            opacity: 0;
+            left: 50%;
+            transform: translate(-50%, 5px);
+        }
+
+        &::before {
+            content: attr(data-tooltip);
+            border-radius: 5px;
+            font-size: 14px;
+            position: absolute;
+            background: var(--w-tooltip-background);
+            color: var(--w-tooltip-color);
+            padding: 0 5px;
+            top: -30px;
+            width: max-content;
+            line-height: 1.8;
+            max-width: 300px;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            width: 0; 
+            height: 0; 
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid var(--w-tooltip-background);
+            top: -5px;
+        }
+
+        &:hover::before,
+        &:hover::after {
+            opacity: 1;
+            transform: translate(-50%, 0);
+        }
+
+        &[data-position="bottom"] {
+            &::before,
+            &::after {
+                transform: translate(-50%, -5px);
+            }
+
+            &::before {
+                top: auto;
+                bottom: -30px;
+            }
+
+            &::after {
+                border-left: 5px solid transparent;
+                border-right: 5px solid transparent;
+                border-top: 5px solid transparent;
+                border-bottom: 5px solid var(--w-tooltip-background);
+                top: auto;
+                bottom: -5px;
+            }
+
+            &:hover::before,
+            &:hover::after {
+                transform: translate(-50%, 0);
+            }
+        }
+
+        &[data-position="left"] {
+            &::before,
+            &::after {
+                transform: translate(0, 0);
+                left: auto;
+                right: 105%;
+            }
+
+            &::before {
+                top: auto;
+            }
+
+            &::after {
+                border-left: 5px solid var(--w-tooltip-background);
+                border-right: 5px solid transparent;
+                border-top: 5px solid transparent;
+                border-bottom: 5px solid transparent;
+                top: 50%;
+                transform: translate(10px, -40%);
+            }
+
+            &:hover::before {
+                transform: translate(-5px, 0);
+            }
+
+            &:hover::after {
+                transform: translate(5px, -40%);
+            }
+        }
+
+        &[data-position="right"] {
+            &::before,
+            &::after {
+                transform: translate(0, 0);
+                left: 105%;
+            }
+
+            &::before {
+                top: auto;
+            }
+
+            &::after {
+                border-left: 5px solid transparent;
+                border-right: 5px solid var(--w-tooltip-background);
+                border-top: 5px solid transparent;
+                border-bottom: 5px solid transparent;
+                top: 50%;
+                transform: translate(-10px, -40%);
+            }
+
+            &:hover::before {
+                transform: translate(5px, 0);
+            }
+
+            &:hover::after {
+                transform: translate(-5px, -40%);
+            }
+        }
+    }
+}
+

package/scss/global/utility.scss

@@ -12,6 +12,23 @@
         gap: 20px;
     }
 
+    .flex {
+        display: flex;
+        gap: 20px;
+
+        &.xs {
+            gap: 5px;
+        }
+
+        &.wrap {
+            flex-wrap: wrap;
+        }
+    }
+
+    .my {
+        margin: 20px auto;
+    }
+
     @include Media('md') {
         .grid.md-2 {
             grid-template-columns: repeat(2, minmax(0, 1fr));

package/scss/global.scss

@@ -1,2 +1,3 @@
 @import './global/elements.scss';
+@import './global/tooltip.scss';
 @import './global/utility.scss';

package/scss/resets.scss

@@ -41,4 +41,8 @@
         color: #FFF;
         text-decoration: none;
     }
+
+    button {
+        font-family: Regular;
+    }
 }