webcoreui 0.0.8 → 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';
@@ -108,6 +100,18 @@ The `Setup` mixin can also accept the following options:
 |-----------|---------------|---------|
 | `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
 | `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). |
+| `includeElementStyles` | `true` | Adds styles for native HTML elements, such as `code`, `pre`, or `ul`.
+
+Default component styles can also be changed by overriding the following CSS variables:
+
+```css
+:root {
+    --w-avatar-border: #000;
+    --w-rating-color: #FFF;
+    --w-rating-empty-color: #BBB;
+    --w-rating-size: 18px;
+}
+```
 
 ### Using Components
 
@@ -133,8 +137,19 @@ import { Accordion } from 'webcoreui/react'
 
 - [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
 - [Alert](https://github.com/Frontendland/webcoreui/tree/main/src/components/Alert)
-- [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
+- [Avatar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Avatar)
 - [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)
 - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
 - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
+- [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,19 +1,39 @@
-
+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 { 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 Avatar(_props: AvatarProps): any
 	export function Badge(_props: BadgeProps): any
 	export function Button(_props: ButtonProps): any
 	export function Card(_props: CardProps): any
+	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

@@ -1,15 +1,37 @@
 import AccordionComponent from './components/Accordion/Accordion.astro'
 import AlertComponent from './components/Alert/Alert.astro'
+import AvatarComponent from './components/Avatar/Avatar.astro'
 import BadgeComponent from './components/Badge/Badge.astro'
 import ButtonComponent from './components/Button/Button.astro'
 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
+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/components/Alert/Alert.astro

@@ -3,10 +3,12 @@ import type { AlertProps } from './alert'
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import info from '../../icons/info.svg?raw'
-import success from '../../icons/check.svg?raw'
+import success from '../../icons/circle-check.svg?raw'
 import warning from '../../icons/warning.svg?raw'
 import alert from '../../icons/alert.svg?raw'
 
+import './alert.scss'
+
 interface Props extends AlertProps {}
 
 const iconMap = {
@@ -58,7 +60,3 @@ const props = {
         </div>
     </ConditionalWrapper>
 </Component>
-
-<style lang="scss">
-    @import './alert.scss';
-</style>

package/components/Alert/Alert.svelte

@@ -3,10 +3,12 @@
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
     import info from '../../icons/info.svg?raw'
-    import success from '../../icons/check.svg?raw'
+    import success from '../../icons/circle-check.svg?raw'
     import warning from '../../icons/warning.svg?raw'
     import alert from '../../icons/alert.svg?raw'
 
+    import './alert.scss'
+
     export let element: AlertProps['element'] = 'section'
     export let title: AlertProps['title'] = null
     export let titleTag: AlertProps['title'] = 'strong'
@@ -52,7 +54,3 @@
         </div>
     </ConditionalWrapper>
 </svelte:element>
-
-<style lang="scss">
-    @import './alert.scss';
-</style>

package/components/Alert/Alert.tsx

@@ -1,9 +1,9 @@
 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'
-import success from '../../icons/check.svg?raw'
+import success from '../../icons/circle-check.svg?raw'
 import warning from '../../icons/warning.svg?raw'
 import alert from '../../icons/alert.svg?raw'
 
@@ -25,7 +25,7 @@ const Alert = ({
     children,
     icon,
     ...rest
-}: AlertProps & { icon?: any }) => {
+}: ReactAlertProps) => {
     const classes = [
         'w-alert',
         (!icon && !theme) && 'col',

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

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

package/components/Avatar/Avatar.astro

@@ -0,0 +1,51 @@
+---
+import type { AvatarProps } from './avatar'
+import './avatar.scss'
+
+interface Props extends AvatarProps {}
+
+const {
+    img,
+    alt = 'Avatar',
+    size = 40,
+    lazy = true,
+    borderColor,
+    borderless,
+    reverse,
+    className,
+} = Astro.props
+
+const classes = [
+    'w-avatar',
+    borderless && 'borderless',
+    className
+]
+---
+
+{Array.isArray(img) ? (
+    <div class:list={['w-avatar-group', reverse && 'reverse']}
+        style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
+    >
+        {img.map((img, index) => (
+            <img
+                src={img}
+                alt={Array.isArray(alt) ? alt[index] : alt}
+                width={Array.isArray(size) ? size[index] : size}
+                height={Array.isArray(size) ? size[index] : size}
+                loading={lazy ? 'lazy' : null}
+                class:list={classes}
+                style={Array.isArray(size) ? `--w-avatar-index: ${size[index]}` : null}
+            />
+        ))}
+    </div>
+) : (
+    <img
+        src={img}
+        alt={Array.isArray(alt) ? alt[0] : alt}
+        width={Array.isArray(size) ? size[0] : size}
+        height={Array.isArray(size) ? size[0] : size}
+        class:list={classes}
+        loading={lazy ? 'lazy' : null}
+        style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
+    />
+)}

package/components/Avatar/Avatar.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import type { AvatarProps } from './avatar'
+    import './avatar.scss'
+
+    export let img: AvatarProps['img'] = ''
+    export let alt: AvatarProps['alt'] = 'Avatar'
+    export let size: AvatarProps['size'] = 40
+    export let lazy: AvatarProps['lazy'] = true
+    export let borderColor: AvatarProps['borderColor'] = ''
+    export let borderless: AvatarProps['borderless'] = false
+    export let reverse: AvatarProps['reverse'] = false
+    export let className: AvatarProps['className'] = ''
+
+    const classes = [
+        'w-avatar',
+        borderless && 'borderless',
+        className
+    ].filter(Boolean).join(' ')
+</script>
+
+{#if Array.isArray(img)}
+    <div class="w-avatar-group"
+        class:reverse
+        style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
+    >
+        {#each img as img, index}
+            <img
+                src={img}
+                alt={Array.isArray(alt) ? alt[index] : alt}
+                width={Array.isArray(size) ? size[index] : size}
+                height={Array.isArray(size) ? size[index] : size}
+                loading={lazy ? 'lazy' : null}
+                class={classes}
+                style={Array.isArray(size) ? `--w-avatar-index: ${size[index]}` : null}
+            />
+        {/each}
+    </div>
+{:else}
+    <img
+        src={img}
+        alt={Array.isArray(alt) ? alt[0] : alt}
+        width={Array.isArray(size) ? size[0] : size}
+        height={Array.isArray(size) ? size[0] : size}
+        class={classes}
+        loading={lazy ? 'lazy' : null}
+        style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
+    />
+{/if}

package/components/Avatar/Avatar.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import type { AvatarProps } from './avatar'
+import './avatar.scss'
+
+const Avatar = ({
+    img,
+    alt = 'Avatar',
+    size = 40,
+    lazy = true,
+    borderColor,
+    borderless,
+    reverse,
+    className,
+}: AvatarProps) => {
+    const classes = [
+        'w-avatar',
+        borderless && 'borderless',
+        className
+    ].filter(Boolean).join(' ')
+
+    const groupStyles = [
+        'w-avatar-group',
+        reverse && 'reverse'
+    ].filter(Boolean).join(' ')
+
+    const borderColorStyle = borderColor
+        ? { '--w-avatar-border': borderColor } as React.CSSProperties
+        : undefined
+
+    return Array.isArray(img) ? (
+        <div className={groupStyles}
+            style={borderColorStyle}
+        >
+            {img.map((img, index) => (
+                <img
+                    key={index}
+                    src={img}
+                    alt={Array.isArray(alt) ? alt[index] : alt}
+                    width={Array.isArray(size) ? size[index] : size}
+                    height={Array.isArray(size) ? size[index] : size}
+                    loading={lazy ? 'lazy' : undefined}
+                    className={classes}
+                    style={Array.isArray(size)
+                        ? { '--w-avatar-index': size[index] } as React.CSSProperties
+                        : undefined
+                    }
+                />
+            ))}
+        </div>
+    ) : (
+        <img
+            src={img}
+            alt={Array.isArray(alt) ? alt[0] : alt}
+            width={Array.isArray(size) ? size[0] : size}
+            height={Array.isArray(size) ? size[0] : size}
+            className={classes}
+            loading={lazy ? 'lazy' : undefined}
+            style={borderColorStyle}
+        />
+    )
+    
+}
+
+export default Avatar

package/components/Avatar/avatar.scss

@@ -0,0 +1,35 @@
+@import '../../scss/config.scss';
+
+.w-avatar {
+    border-radius: 100%;
+
+    &:not(.borderless) {
+        border: 3px solid var(--w-avatar-border);
+    }
+}
+
+.w-avatar-group {
+    display: inline-flex;
+    align-items: center;
+
+    &.reverse {
+        flex-direction: row-reverse;
+
+        img {
+            z-index: 1;
+        }
+
+        img:not(:first-child) {
+            margin-right: -10px;
+            margin-left: 0;
+        }
+    }
+
+    img:not(:first-child) {
+        margin-left: -10px;
+    }
+
+    img {
+        z-index: var(--w-avatar-index);
+    }
+}

package/components/Avatar/avatar.ts

@@ -0,0 +1,10 @@
+export type AvatarProps = {
+    img: string | string[]
+    alt?: string | string[]
+    size?: number | number[]
+    lazy?: boolean
+    borderColor?: string
+    borderless?: boolean
+    reverse?: boolean
+    className?: string
+}

package/components/Badge/Badge.astro

@@ -1,5 +1,6 @@
 ---
 import type { BadgeProps } from './badge'
+import './badge.scss'
 
 interface Props extends BadgeProps {
     interactive?: boolean
@@ -7,7 +8,8 @@ interface Props extends BadgeProps {
 
 const {
     theme,
-    interactive
+    interactive,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -17,11 +19,6 @@ const classes = [
 ]
 ---
 
-<span class:list={classes}>
+<span class:list={classes} {...rest}>
     <slot />
 </span>
-
-
-<style lang="scss">
-    @import './badge.scss';
-</style>

package/components/Badge/Badge.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { BadgeProps } from './badge'
+    import './badge.scss'
     
     export let theme: BadgeProps['theme'] = null
     export let onClick: BadgeProps['onClick'] = () => {}
@@ -11,10 +12,6 @@
     ].filter(Boolean).join(' ')
 </script>
 
-<span class={classes} on:click={onClick}>
+<span class={classes} on:click={onClick} {...$$restProps}>
     <slot />
 </span>
-
-<style lang="scss">
-    @import './badge.scss';
-</style>

package/components/Badge/Badge.tsx

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

package/components/Badge/badge.ts

@@ -8,5 +8,8 @@ export type BadgeProps = {
         | 'alert'
         | null
     onClick?: () => any
-    [key: string]: any
 }
+
+export type ReactBadgeProps = {
+    children: React.ReactNode
+} & BadgeProps

package/components/Button/Button.astro

@@ -1,5 +1,6 @@
 ---
 import type { ButtonProps } from './button'
+import './button.scss'
 
 interface Props extends ButtonProps {}
 
@@ -26,7 +27,3 @@ const classes = [
         <slot />
     </button>
 )}
-
-<style lang="scss">
-    @import './button.scss';
-</style>

package/components/Button/Button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { ButtonProps } from './button'
+    import './button.scss'
 
     export let theme: ButtonProps['theme'] = null
     export let bold: ButtonProps['bold'] = false
@@ -23,7 +24,3 @@
         <slot />
     </button>
 {/if}
-
-<style lang="scss">
-    @import './button.scss';
-</style>

package/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ButtonProps } from './button'
+import type { ReactButtonProps } from './button'
 import './button.scss'
 
 const Button = ({
@@ -9,7 +9,7 @@ const Button = ({
     children,
     onClick,
     ...rest
-}: ButtonProps) => {
+}: ReactButtonProps) => {
     const classes = [
         'w-button',
         bold && '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

@@ -12,3 +12,7 @@ export type ButtonProps = {
     onClick?: () => any
     [key: string]: any
 }
+
+export type ReactButtonProps = {
+    children: React.ReactNode
+} & ButtonProps

package/components/Card/Card.astro

@@ -1,5 +1,6 @@
 ---
 import type { CardProps } from './card'
+import './card.scss'
 
 interface Props extends CardProps {}
 
@@ -29,7 +30,7 @@ const Title = titleTag
 
 <Component {...props} {...rest}>
     {title && (
-        <Title class="card-title">{title}</Title>
+        <Title class:list="card-title">{title}</Title>
     )}
     <div class="card-body" class:list={[compact && 'compact']}>
         {compact && !secondary ? (
@@ -39,7 +40,3 @@ const Title = titleTag
         )}
     </div>
 </Component>
-
-<style lang="scss">
-    @import './card.scss';
-</style>

package/components/Card/Card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { CardProps } from './card'
+    import './card.scss'
 
     export let element: CardProps['element'] = 'section'
     export let title: CardProps['title'] = ''
@@ -29,7 +30,3 @@
         {/if}
     </div>
 </svelte:element>
-
-<style lang="scss">
-    @import './card.scss';
-</style>

package/components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { CardProps } from './card'
+import type { ReactCardProps } from './card'
 import './card.scss'
 
 const Card = ({
@@ -11,7 +11,7 @@ const Card = ({
     secondary,
     children,
     ...rest
-}: CardProps) => {
+}: ReactCardProps) => {
     const classes = [
         'w-card',
         className,

package/components/Card/card.scss

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