webcoreui 0.0.7 → 0.0.9

package/components/Rating/Rating.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import type { RatingProps } from './rating'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+import './rating.scss'
+
+const Rating = ({
+    score,
+    total = 5,
+    showText,
+    text = '{0} out of {1}',
+    showEmpty = true,
+    outline = true,
+    reviewCount,
+    reviewText = '{0} reviews',
+    reviewLink,
+    reviewTarget,
+    color,
+    emptyColor,
+    size,
+    className
+}: RatingProps) => {
+    const classes = [
+        'w-rating',
+        outline && 'outline',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = {
+        ...(color && { '--w-rating-color': color }),
+        ...(size && { '--w-rating-size': `${size}px` }),
+        ...(emptyColor && { '--w-rating-empty-color': emptyColor })
+    } as React.CSSProperties
+ 
+    const translatedText = text
+        .replace('{0}', `${score}`)
+        .replace('{1}', `${total}`)
+
+    const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`)
+
+    return (
+        <span className={classes} style={styles}>
+            <span className="score">{Array(score).fill('★').join('')}</span>
+            {showEmpty && (
+                <span className={total === 10 ? 'empty ten-star' : 'empty'}>
+                    {Array(total - score).fill('★').join('')}
+                </span>
+            )}
+            {showText && (
+                <span className={reviewCount ? 'text m' : 'text'}>
+                    {translatedText}
+                </span>
+            )}
+            {reviewCount && '•'}
+            {reviewCount && (
+                <ConditionalWrapper condition={!!reviewLink} wrapper={children => (
+                    <a href={reviewLink} target={reviewTarget}>
+                        {children}
+                    </a>
+                )}>
+                    <span className="text">{translatedReviewText}</span>
+                </ConditionalWrapper>
+            )}
+        </span>
+    )
+}
+
+export default Rating

package/components/Rating/rating.scss

@@ -0,0 +1,37 @@
+@import '../../scss/config.scss';
+
+.w-rating {
+    display: inline-flex;
+    align-items: center;
+    color: var(--w-rating-color);
+    font-size: var(--w-rating-size);
+
+    &.outline .empty {
+        transform: scale(.88);
+        color: black;
+        text-shadow: -1px 0 var(--w-rating-color), 0 1px var(--w-rating-color), 1px 0 var(--w-rating-color), 0 -1px var(--w-rating-color);
+        letter-spacing: 2px;
+    }
+
+    .empty {
+        color: var(--w-rating-empty-color);
+
+        &.ten-star {
+            margin-left: -3px;
+        }
+    }
+
+    a {
+        text-decoration: underline;
+    }
+    
+    .text {
+        font-size: 16px;
+        color: #BBB;
+        margin-left: 5px;
+
+        &.m {
+            margin-right: 5px;
+        }
+    }
+}

package/components/Rating/rating.ts

@@ -0,0 +1,16 @@
+export type RatingProps = {
+    score: number
+    total?: number
+    showText?: boolean
+    text?: string
+    showEmpty?: boolean
+    outline?: boolean
+    reviewCount?: number
+    reviewText?: string
+    reviewLink?: string
+    reviewTarget?: string
+    color?: string
+    emptyColor?: string
+    size?: number
+    className?: string
+}

package/components/Switch/Switch.astro

@@ -0,0 +1,38 @@
+---
+import type { SwitchProps } from './switch'
+import './switch.scss'
+
+interface Props extends SwitchProps {}
+
+const {
+    label,
+    toggled,
+    offColor,
+    onColor,
+    reverse,
+    small,
+    square,
+    disabled,
+    className
+} = Astro.props
+
+const classes = [
+    'w-switch',
+    reverse && 'reverse',
+    small && 'small',
+    square && 'square',
+    disabled && 'disabled',
+    className
+]
+
+const styles = [
+    offColor && `--w-switch-off-color: ${offColor};`,
+    onColor && `--w-switch-on-color: ${onColor};`
+].filter(Boolean).join(' ')
+---
+
+<label class:list={classes} style={styles || null}>
+    <input type="checkbox" checked={toggled} disabled={disabled} />
+    <span class="toggle"></span>
+    {label && <span class="label">{label}</span>}
+</label>

package/components/Switch/Switch.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import type { SwitchProps } from './switch'
+    import './switch.scss'
+    
+    export let label: SwitchProps['label'] = ''
+    export let toggled: SwitchProps['toggled'] = false
+    export let offColor: SwitchProps['offColor'] = ''
+    export let onColor: SwitchProps['onColor'] = ''
+    export let reverse: SwitchProps['reverse'] = false
+    export let small: SwitchProps['small'] = false
+    export let square: SwitchProps['square'] = false
+    export let disabled: SwitchProps['disabled'] = false
+    export let className: SwitchProps['className'] = ''
+    export let onClick: () => any = () => {}
+    
+    const classes = [
+        'w-switch',
+        reverse && 'reverse',
+        small && 'small',
+        square && 'square',
+        disabled && 'disabled',
+        className
+    ].filter(Boolean).join(' ')
+    
+    const styles = [
+        offColor && `--w-switch-off-color: ${offColor};`,
+        onColor && `--w-switch-on-color: ${onColor};`
+    ].filter(Boolean).join(' ')
+</script>
+
+<label class={classes} style={styles || null}>
+    <input
+        type="checkbox"
+        checked={toggled}
+        disabled={disabled}
+        on:click={onClick}
+    />
+    <span class="toggle"></span>
+    {#if label}
+        <span class="label">{label}</span>
+    {/if}
+</label>

package/components/Switch/Switch.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import type { SwitchProps } from './switch'
+import './switch.scss'
+
+type ReactSwitchProps = {
+    onClick?: () => any
+} & SwitchProps
+
+const Switch = ({
+    label,
+    toggled,
+    offColor,
+    onColor,
+    reverse,
+    small,
+    square,
+    disabled,
+    className,
+    onClick
+}: ReactSwitchProps) => {
+    const classes = [
+        'w-switch',
+        reverse && 'reverse',
+        small && 'small',
+        square && 'square',
+        disabled && 'disabled',
+        className
+    ].filter(Boolean).join(' ')
+
+    const styles = {
+        ...(offColor && { '--w-switch-off-color': offColor }),
+        ...(onColor && { '--w-switch-on-color': onColor })
+    } as React.CSSProperties
+
+    return (
+        <label className={classes} style={styles || null}>
+            <input
+                type="checkbox"
+                checked={toggled}
+                disabled={disabled}
+                onClick={onClick}
+            />
+            <span className="toggle"></span>
+            {label && <span className="label">{label}</span>}
+        </label>
+    )
+    
+}
+
+export default Switch

package/components/Switch/switch.scss

@@ -0,0 +1,84 @@
+@import '../../scss/config.scss';
+
+.w-switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+
+    &.reverse {
+        flex-direction: row-reverse;
+    }
+
+    &.disabled .toggle {
+        cursor: no-drop;
+        background: #333;
+
+        &::before {
+            background: #252525;
+        }
+    }
+
+    &.small {
+        input:checked + span::before {
+            transform: translateX(20px);
+        }
+
+        .toggle {
+            width: 40px;
+            height: 20px;
+    
+            &::before {
+                height: 14px;
+                width: 14px;
+            }
+        }
+
+        .label {
+            font-size: 14px;
+        }
+    }
+
+    &.square .toggle {
+        border-radius: 5px;
+
+        &::before {
+            border-radius: 5px;
+        }
+    }
+
+    input {
+        display: none;
+
+        &:checked + span {
+            background-color: var(--w-switch-on-color);
+    
+            &::before {
+                transform: translateX(30px);
+            }
+        }
+    }
+
+    .toggle {
+        @include Transition(background);
+        position: relative;
+        width: 60px;
+        height: 30px;
+        background: var(--w-switch-off-color);
+        border-radius: 30px;
+
+        &::before {
+            content: "";
+            position: absolute;
+            height: 24px;
+            width: 24px;
+            left: 3px;
+            bottom: 3px;
+            background: #000;
+            border-radius: 50%;
+            transition: 0.3s;
+        }
+    }
+}
+  
+  

package/components/Switch/switch.ts

@@ -0,0 +1,11 @@
+export type SwitchProps = {
+    label?: string
+    toggled?: boolean
+    offColor?: string
+    onColor?: string
+    reverse?: boolean
+    small?: boolean
+    square?: boolean
+    disabled?: boolean
+    className?: string
+}

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/package.json

@@ -1,12 +1,13 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.7",
+    "version": "0.0.9",
     "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",

package/react.d.ts

@@ -2,18 +2,28 @@
 declare module 'webcoreui/react' {
     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
 	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 Radio(_props: RadioProps): any
+	export function Rating(_props: RatingProps): any
+	export function Switch(_props: SwitchProps): any
 }
     

package/react.js

@@ -1,15 +1,25 @@
 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 RadioComponent from './components/Radio/Radio.tsx'
+import RatingComponent from './components/Rating/Rating.tsx'
+import SwitchComponent from './components/Switch/Switch.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 Radio = RadioComponent
+export const Rating = RatingComponent
+export const Switch = SwitchComponent

package/scss/setup.scss

@@ -6,6 +6,17 @@ $config: (
     includeElementStyles: true
 );
 
+:root {
+    --w-avatar-border: #000;
+    --w-rating-color: #FFF;
+    --w-rating-empty-color: #BBB;
+    --w-rating-size: 18px;
+    --w-switch-off-color: #252525;
+    --w-switch-on-color: #FFF;
+    --w-checkbox-color: #FFF;
+    --w-radio-color: #FFF;
+}
+
 @function config($key) {
     @return map.get($config, $key);
 }

package/svelte.d.ts

@@ -2,18 +2,28 @@
 declare module 'webcoreui/svelte' {
     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
 	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 Radio(_props: RadioProps): any
+	export function Rating(_props: RatingProps): any
+	export function Switch(_props: SwitchProps): any
 }
     

package/svelte.js

@@ -1,15 +1,25 @@
 import AccordionComponent from './components/Accordion/Accordion.svelte'
 import AlertComponent from './components/Alert/Alert.svelte'
+import AvatarComponent from './components/Avatar/Avatar.svelte'
 import BadgeComponent from './components/Badge/Badge.svelte'
 import ButtonComponent from './components/Button/Button.svelte'
 import CardComponent from './components/Card/Card.svelte'
+import CheckboxComponent from './components/Checkbox/Checkbox.svelte'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.svelte'
 import IconComponent from './components/Icon/Icon.svelte'
+import RadioComponent from './components/Radio/Radio.svelte'
+import RatingComponent from './components/Rating/Rating.svelte'
+import SwitchComponent from './components/Switch/Switch.svelte'
 
 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 Radio = RadioComponent
+export const Rating = RatingComponent
+export const Switch = SwitchComponent