webcoreui 0.0.9 → 0.0.10

package/README.md

@@ -43,7 +43,7 @@ Full documentation coming soon on [webcoreui.dev/docs](https://webcoreui.dev/doc
 
 ## Getting Started
 
-Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems.
+Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems. The easiest way to get started is to clone the repository and run `npm run dev` to start building your pages with the components available.
 
 ### Prerequisites
 
@@ -79,15 +79,7 @@ yarn add webcoreui
 
 ### Setup
 
-1. Add the following to your `tsconfig.json` to include TypeScript types:
-
-```json
-{
-  "include": ["webcoreui"]
-}
-```
-
-2. Setup default styles and fonts by calling the following in your global SCSS file:
+Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
 @import 'webcoreui/styles';
@@ -152,6 +144,12 @@ import { Accordion } from 'webcoreui/react'
 - [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
 - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
+- [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
+- [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
+- [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
+- [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)
+- [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)
+- [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro)

package/astro.d.ts

@@ -1,18 +1,23 @@
-
+import type { AccordionProps } from './components/Accordion/accordion'
+import type { AlertProps } from './components/Alert/alert'
+import type { AvatarProps } from './components/Avatar/avatar'
+import type { BadgeProps } from './components/Badge/badge'
+import type { ButtonProps } from './components/Button/button'
+import type { CardProps } from './components/Card/card'
+import type { CheckboxProps } from './components/Checkbox/checkbox'
+import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { IconProps } from './components/Icon/icon'
+import type { ProgressProps } from './components/Progress/progress'
+import type { RadioProps } from './components/Radio/radio'
+import type { RatingProps } from './components/Rating/rating'
+import type { SpinnerProps } from './components/Spinner/spinner'
+import type { SwitchProps } from './components/Switch/switch'
+import type { TabsProps } from './components/Tabs/tabs'
+import type { TimelineProps } from './components/Timeline/timeline'
+import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
+import type { ToastProps } from './components/Toast/toast'
+    
 declare module 'webcoreui/astro' {
-    import type { AccordionProps } from './components/Accordion/accordion'
-	import type { AlertProps } from './components/Alert/alert'
-	import type { AvatarProps } from './components/Avatar/avatar'
-	import type { BadgeProps } from './components/Badge/badge'
-	import type { ButtonProps } from './components/Button/button'
-	import type { CardProps } from './components/Card/card'
-	import type { CheckboxProps } from './components/Checkbox/checkbox'
-	import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
-	import type { IconProps } from './components/Icon/icon'
-	import type { RadioProps } from './components/Radio/radio'
-	import type { RatingProps } from './components/Rating/rating'
-	import type { SwitchProps } from './components/Switch/switch'
-
     export function Accordion(_props: AccordionProps): any
 	export function Alert(_props: AlertProps): any
 	export function Avatar(_props: AvatarProps): any
@@ -22,8 +27,13 @@ declare module 'webcoreui/astro' {
 	export function Checkbox(_props: CheckboxProps): any
 	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
 	export function Icon(_props: IconProps): any
+	export function Progress(_props: ProgressProps): any
 	export function Radio(_props: RadioProps): any
 	export function Rating(_props: RatingProps): any
+	export function Spinner(_props: SpinnerProps): any
 	export function Switch(_props: SwitchProps): any
-}
-    
+	export function Tabs(_props: TabsProps): any
+	export function Timeline(_props: TimelineProps): any
+	export function TimelineItem(_props: TimelineItemProps): any
+	export function Toast(_props: ToastProps): any
+}

package/astro.js

@@ -7,9 +7,15 @@ import CardComponent from './components/Card/Card.astro'
 import CheckboxComponent from './components/Checkbox/Checkbox.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
 import IconComponent from './components/Icon/Icon.astro'
+import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
 import RatingComponent from './components/Rating/Rating.astro'
+import SpinnerComponent from './components/Spinner/Spinner.astro'
 import SwitchComponent from './components/Switch/Switch.astro'
+import TabsComponent from './components/Tabs/Tabs.astro'
+import TimelineComponent from './components/Timeline/Timeline.astro'
+import TimelineItemComponent from './components/TimelineItem/TimelineItem.astro'
+import ToastComponent from './components/Toast/Toast.astro'
 
 export const Accordion = AccordionComponent
 export const Alert = AlertComponent
@@ -20,6 +26,12 @@ export const Card = CardComponent
 export const Checkbox = CheckboxComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
+export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
-export const Switch = SwitchComponent
+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/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { AlertProps } from './alert'
+import type { ReactAlertProps } from './alert'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import info from '../../icons/info.svg?raw'
@@ -16,13 +16,6 @@ const iconMap = {
     alert
 }
 
-type ReactAlertProps = {
-    Element?: keyof JSX.IntrinsicElements
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-    icon?: string
-} & AlertProps
-
 const Alert = ({
     Element = 'section',
     title,

package/components/Alert/alert.scss

@@ -48,5 +48,6 @@
     .alert-body {
         font-size: 16px;
         color: #BBB;
+        line-height: 1.5;
     }
 }

package/components/Alert/alert.ts

@@ -10,3 +10,9 @@ export type AlertProps = {
         | 'alert'
         | null
 }
+
+export type ReactAlertProps = {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<AlertProps, 'titleTag' | 'element'>

package/components/Avatar/Avatar.tsx

@@ -33,6 +33,7 @@ const Avatar = ({
         >
             {img.map((img, index) => (
                 <img
+                    key={index}
                     src={img}
                     alt={Array.isArray(alt) ? alt[index] : alt}
                     width={Array.isArray(size) ? size[index] : size}

package/components/Badge/Badge.astro

@@ -8,7 +8,8 @@ interface Props extends BadgeProps {
 
 const {
     theme,
-    interactive
+    interactive,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -18,6 +19,6 @@ const classes = [
 ]
 ---
 
-<span class:list={classes}>
+<span class:list={classes} {...rest}>
     <slot />
 </span>

package/components/Badge/Badge.svelte

@@ -12,6 +12,6 @@
     ].filter(Boolean).join(' ')
 </script>
 
-<span class={classes} on:click={onClick}>
+<span class={classes} on:click={onClick} {...$$restProps}>
     <slot />
 </span>

package/components/Badge/Badge.tsx

@@ -1,12 +1,8 @@
 import React from 'react'
-import type { BadgeProps } from './badge'
+import type { ReactBadgeProps } from './badge'
 import './badge.scss'
 
-type ReactBadgeProps = {
-    children: React.ReactNode
-} & BadgeProps
-
-const Badge = ({ theme, onClick, children }: ReactBadgeProps) => {
+const Badge = ({ theme, onClick, children, ...rest }: ReactBadgeProps) => {
     const classes = [
         'w-badge',
         theme || null,
@@ -14,7 +10,7 @@ const Badge = ({ theme, onClick, children }: ReactBadgeProps) => {
     ].filter(Boolean).join(' ')
 
     return (
-        <span className={classes} onClick={onClick}>
+        <span className={classes} onClick={onClick} {...rest}>
             {children}
         </span>
     )

package/components/Badge/badge.ts

@@ -9,3 +9,7 @@ export type BadgeProps = {
         | null
     onClick?: () => any
 }
+
+export type ReactBadgeProps = {
+    children: React.ReactNode
+} & BadgeProps

package/components/Button/Button.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
-import type { ButtonProps } from './button'
+import type { ReactButtonProps } from './button'
 import './button.scss'
 
-type ReactButtonProps = {
-    children: React.ReactNode
-} & ButtonProps
-
 const Button = ({
     theme,
     bold,

package/components/Button/button.scss

@@ -9,7 +9,6 @@
     align-items: center;
     gap: 5px;
     font-size: 16px;
-    font-family: Regular;
     cursor: pointer;
     border: 0;
     background: #FFF;

package/components/Button/button.ts

@@ -9,6 +9,10 @@ export type ButtonProps = {
         | null
     bold?: boolean
     href?: string
-    target?: string
     onClick?: () => any
+    [key: string]: any
 }
+
+export type ReactButtonProps = {
+    children: React.ReactNode
+} & ButtonProps

package/components/Card/Card.tsx

@@ -1,13 +1,7 @@
 import React from 'react'
-import type { CardProps } from './card'
+import type { ReactCardProps } from './card'
 import './card.scss'
 
-type ReactCardProps = {
-    Element?: keyof JSX.IntrinsicElements
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & CardProps
-
 const Card = ({
     Element = 'section',
     title,

package/components/Card/card.scss

@@ -22,6 +22,7 @@
     .card-body {
         padding: 20px;
         height: 100%;
+        position: relative;
 
         &.compact {
             background: #111;

package/components/Card/card.ts

@@ -7,3 +7,9 @@ export type CardProps = {
     secondary?: boolean
     [key: string]: any
 }
+
+export type ReactCardProps = {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<CardProps, 'titleTag' | 'element'>

package/components/Checkbox/Checkbox.tsx

@@ -1,15 +1,11 @@
 import React from 'react'
-import type { CheckboxProps } from './checkbox'
+import type { ReactCheckboxProps } from './checkbox'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import check from '../../icons/check.svg?raw'
 
 import './checkbox.scss'
 
-type ReactCheckboxProps = {
-    onClick?: () => any
-} & CheckboxProps
-
 const Checkbox = ({
     checked,
     label,
@@ -41,7 +37,7 @@ const Checkbox = ({
             >
                 <input
                     type="checkbox"
-                    checked={checked}
+                    defaultChecked={checked}
                     disabled={disabled}
                     onClick={onClick}
                 />

package/components/Checkbox/checkbox.ts

@@ -6,3 +6,7 @@ export type CheckboxProps = {
     boxed?: boolean
     color?: string
 }
+
+export type ReactCheckboxProps = {
+    onClick?: (key: any) => any
+} & CheckboxProps

package/components/ConditionalWrapper/ConditionalWrapper.tsx

@@ -1,13 +1,7 @@
 import React from 'react'
-import type { ConditionalWrapperProps } from './conditionalwrapper'
+import type { ReactConditionalWrapperProps } from './conditionalwrapper'
 
-type ExtendedConditionalWrapperProps = {
-  condition: ConditionalWrapperProps['condition']
-  wrapper: (_: React.ReactNode) => any
-  children: React.ReactNode
-};
-
-const ConditionalWrapper = ({ condition, wrapper, children }: ExtendedConditionalWrapperProps) =>
+const ConditionalWrapper = ({ condition, wrapper, children }: ReactConditionalWrapperProps) =>
   condition ? wrapper(children) : children
 
 export default ConditionalWrapper

package/components/ConditionalWrapper/conditionalwrapper.ts

@@ -1,3 +1,8 @@
 export type ConditionalWrapperProps = {
     condition: boolean
 }
+
+export type ReactConditionalWrapperProps = {
+    wrapper: (_: React.ReactNode) => any
+    children: React.ReactNode
+} & ConditionalWrapperProps

package/components/Progress/Progress.astro

@@ -0,0 +1,40 @@
+---
+import type { ProgressProps } from './progress'
+import './progress.scss'
+
+interface Props extends ProgressProps {}
+
+const {
+    value,
+    size,
+    label,
+    color,
+    background,
+    square,
+    striped,
+    stripeLight,
+    stripeDark,
+    className
+} = Astro.props
+
+const classes = [
+    'w-progress',
+    size,
+    striped && 'striped',
+    square && 'square',
+    className
+]
+
+const styles = [
+    color && `--w-progress-color: ${color};`,
+    background && `--w-progress-background: ${background};`,
+    stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
+    stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
+].filter(Boolean).join('')
+---
+
+<div class:list={classes} style={styles}>
+    <div class="progress" style={`--w-progress-width: ${value}%;`}>
+        {label && `${value}%`}
+    </div>
+</div>

package/components/Progress/Progress.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { ProgressProps } from './progress'
+    import './progress.scss'
+
+    export let value: ProgressProps['value'] = 0
+    export let size: ProgressProps['size'] = null
+    export let label: ProgressProps['label'] = false
+    export let color: ProgressProps['color'] = ''
+    export let background: ProgressProps['background'] = ''
+    export let square: ProgressProps['square'] = false
+    export let striped: ProgressProps['striped'] = false
+    export let stripeLight: ProgressProps['stripeLight'] = ''
+    export let stripeDark: ProgressProps['stripeDark'] = ''
+    export let className: ProgressProps['className'] = ''
+
+    const classes = [
+        'w-progress',
+        size,
+        striped && 'striped',
+        square && 'square',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = [
+        color && `--w-progress-color: ${color};`,
+        background && `--w-progress-background: ${background};`,
+        stripeLight && `--w-progress-stripe-light: ${stripeLight};`,
+        stripeDark && `--w-progress-stripe-dark: ${stripeDark};`
+    ].filter(Boolean).join('')
+</script>
+
+<div class={classes} style={styles}>
+    <div class="progress" style={`--w-progress-width: ${value}%;`}>
+        {#if label}
+            {`${value}%`}
+        {/if}
+    </div>
+</div>

package/components/Progress/Progress.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import type { ProgressProps } from './progress'
+
+import './progress.scss'
+
+const Progress = ({
+    value,
+    size,
+    label,
+    color,
+    background,
+    square,
+    striped,
+    stripeLight,
+    stripeDark,
+    className
+}: ProgressProps) => {
+    const classes = [
+        'w-progress',
+        size,
+        striped && 'striped',
+        square && 'square',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = {
+        ...(color && { '--w-progress-color': color }),
+        ...(background && { '--w-progress-background': background }),
+        ...(stripeLight && { '--w-progress-stripe-light': stripeLight }),
+        ...(stripeDark && { '--w-progress-stripe-dark': stripeDark }),
+    } as React.CSSProperties
+
+    const percent = {
+        '--w-progress-width': `${value}%`
+    } as React.CSSProperties
+
+    return (
+        <div className={classes} style={styles}>
+            <div className="progress" style={percent}>
+                {label && `${value}%`}
+            </div>
+        </div>
+    )
+}
+
+export default Progress
+

package/components/Progress/progress.scss

@@ -0,0 +1,66 @@
+@import '../../scss/config.scss';
+
+.w-progress {
+    width: 100%;
+    height: 10px;
+    background: var(--w-progress-background);
+    border-radius: 20px;
+    overflow: hidden;
+    color: var(--w-progress-background);
+    font-family: Bold;
+    font-size: 10px;
+    
+    &.medium {
+        height: 15px;
+        font-size: 12px;
+    }
+
+    &.large {
+        height: 20px;
+        font-size: 14px;
+    }
+
+    &.square {
+        border-radius: 2px;
+
+        .progress {
+            border-radius: 2px;
+        }
+    }
+
+    &.striped {
+
+        .progress {
+            background-size: 10px 10px;
+            background-image: linear-gradient(
+                -45deg,
+                var(--w-progress-stripe-light) 25%,
+                var(--w-progress-stripe-dark) 25%,
+                var(--w-progress-stripe-dark) 50%,
+                var(--w-progress-stripe-light) 50%,
+                var(--w-progress-stripe-light) 75%,
+                var(--w-progress-stripe-dark) 75%,
+                var(--w-progress-stripe-dark)
+            );
+        }
+
+        &.medium .progress {
+            background-size: 15px 15px;
+        }
+
+        &.large .progress {
+            background-size: 20px 20px;
+        }
+    }
+
+    .progress {
+        @include Transition(width);
+        width: var(--w-progress-width);
+        height: 100%;
+        background: var(--w-progress-color);
+        border-radius: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

package/components/Progress/progress.ts

@@ -0,0 +1,12 @@
+export type ProgressProps = {
+    value: number
+    size?: 'medium' | 'large' | null
+    label?: boolean
+    color?: string
+    background?: string
+    square?: boolean
+    striped?: boolean
+    stripeLight?: string
+    stripeDark?: string
+    className?: string
+}

package/components/Radio/Radio.tsx

@@ -1,14 +1,10 @@
 import React from 'react'
-import type { RadioProps } from './radio'
+import type { ReactRadioProps } from './radio'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import './radio.scss'
 
-type ReactRadioProps = {
-    onChange?: () => any
-} & RadioProps
-
 const Radio = ({
     name,
     items,
@@ -46,7 +42,7 @@ const Radio = ({
                             type="radio"
                             name={name}
                             value={item.value}
-                            checked={item.selected}
+                            defaultChecked={item.selected}
                             disabled={item.disabled}
                             onChange={onChange}
                         />

package/components/Radio/radio.ts

@@ -11,3 +11,7 @@ export type RadioProps = {
     inline?: boolean
     className?: string
 }
+
+export type ReactRadioProps = {
+    onChange?: (key: any) => any
+} & RadioProps

package/components/Spinner/Spinner.astro

@@ -0,0 +1,42 @@
+---
+import type { SpinnerProps } from './spinner'
+import './spinner.scss'
+
+interface Props extends SpinnerProps {}
+
+const {
+    color,
+    width,
+    speed,
+    size,
+    dashArray,
+} = Astro.props
+
+const classes = [
+    'w-spinner',
+    dashArray && 'dashed'
+]
+
+const styles = [
+    color && `--w-spinner-color: ${color};`,
+    width && `--w-spinner-width: ${width}px;`,
+    speed && `--w-spinner-speed: ${speed}s;`,
+    size && `--w-spinner-size: ${size}px;`,
+    dashArray && `--w-spinner-dash: ${dashArray}`,
+].filter(Boolean).join(' ')
+---
+
+<svg
+    class:list={classes}
+    viewBox="25 25 50 50"
+    role="status"
+    style={styles}
+>
+    <circle
+        class="spinner-path"
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+    />
+</svg>