✨ Add Svelte and React playgrounds for interactive component

Author: Frontendland

src/components/Card/card.ts

@@ -5,4 +5,5 @@ export type CardProps = {
     compact?: boolean
     className?: string
     secondary?: boolean
+    [key: string]: any
 }

src/components/Checkbox/Checkbox.svelte

@@ -13,7 +13,7 @@
     export let boxed: CheckboxProps['boxed'] = false
     export let color: CheckboxProps['color'] = ''
     export let onClick: () => any = () => {}
-    
+
     const classes = [
         'w-checkbox',
         boxed && 'boxed',
@@ -25,13 +25,18 @@
         : null
 </script>
 
-<label class={classes} style={style} on:click={onClick}>
+<label class={classes} style={style}>
     <ConditionalWrapper
         condition={!!(label && subText)}
         element="div"
         class="checkbox-wrapper"
     >
-        <input type="checkbox" checked={checked} disabled={disabled} />
+        <input
+            type="checkbox"
+            checked={checked}
+            disabled={disabled}
+            on:click={onClick}
+        />
         <span class="check">
             {@html check}
         </span>

src/components/Checkbox/Checkbox.tsx

@@ -30,7 +30,7 @@ const Checkbox = ({
         : undefined
 
     return (
-        <label className={classes} style={style} onClick={onClick}>
+        <label className={classes} style={style}>
             <ConditionalWrapper
                 condition={!!(label && subText)}
                 wrapper={children => (
@@ -43,6 +43,7 @@ const Checkbox = ({
                     type="checkbox"
                     checked={checked}
                     disabled={disabled}
+                    onClick={onClick}
                 />
                 <span
                     className="check"

src/components/Radio/Radio.astro

@@ -37,7 +37,8 @@ const style = color
                 </div>
                 <input
                     type="radio"
-                    name={name} 
+                    name={name}
+                    value={item.value}
                     checked={item.selected}
                     disabled={item.disabled}
                 />

src/components/Radio/Radio.svelte

@@ -35,7 +35,8 @@
             >
                 <input
                     type="radio"
-                    name={name} 
+                    name={name}
+                    value={item.value}
                     checked={item.selected}
                     disabled={item.disabled}
                     on:change={onChange}

src/components/Radio/Radio.tsx

@@ -29,11 +29,11 @@ const Radio = ({
 
     return (
         <div className={classes} style={style}>
-            {items.map(item => (
+            {items.map((item, index) => (
                 <label className={[
                     item.subText && 'col',
                     item.disabled && 'disabled'
-                ].filter(Boolean).join(' ')}>
+                ].filter(Boolean).join(' ')} key={index}>
                     <ConditionalWrapper
                         condition={!!(item.subText)}
                         wrapper={children => (
@@ -44,7 +44,8 @@ const Radio = ({
                     >
                         <input
                             type="radio"
-                            name={name} 
+                            name={name}
+                            value={item.value}
                             checked={item.selected}
                             disabled={item.disabled}
                             onChange={onChange}

src/components/Radio/radio.ts

@@ -1,6 +1,7 @@
 export type RadioProps = {
     items: {
         label: string
+        value: string
         subText?: string
         selected?: boolean
         disabled?: boolean

src/components/Switch/Switch.svelte

@@ -28,8 +28,13 @@
     ].filter(Boolean).join(' ')
 </script>
 
-<label class={classes} style={styles || null} on:click={onClick}>
-    <input type="checkbox" checked={toggled} disabled={disabled} />
+<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>

src/components/Switch/Switch.tsx

@@ -33,8 +33,13 @@ const Switch = ({
     } as React.CSSProperties
 
     return (
-        <label className={classes} style={styles || null} onClick={onClick}>
-            <input type="checkbox" checked={toggled} disabled={disabled} />
+        <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>

src/pages/accordion.astro

@@ -3,7 +3,7 @@ import Layout from '@static/Layout.astro'
 import ComponentWrapper from '@static/ComponentWrapper.astro'
 
 import AstroAccordion from '@components/Accordion/Accordion.astro'
-import SvelteAccorion from '@components/Accordion/Accordion.svelte'
+import SvelteAccordion from '@components/Accordion/Accordion.svelte'
 import ReactAccordion from '@components/Accordion/Accordion.tsx'
 
 const accordionItems = [{
@@ -27,7 +27,7 @@ const accordionItems = [{
         </ComponentWrapper>
 
         <ComponentWrapper type="Svelte">
-            <SvelteAccorion items={accordionItems} client:load />
+            <SvelteAccordion items={accordionItems} client:load />
         </ComponentWrapper>
 
         <ComponentWrapper type="React">

src/pages/index.astro

@@ -28,11 +28,16 @@ import Checkbox from '@components/Checkbox/Checkbox.astro'
     <div class="cta">
         <Button
             href="https://github.com/Frontendland/webcoreui" target="_blank"
-            theme="secondary"
         >
             <Icon type="github" size={20} />
             GitHub
         </Button>
+        <Button theme="secondary" href="/svelte">
+            Svelte Playground
+        </Button>
+        <Button theme="secondary" href="/react">
+            React Playground
+        </Button>
     </div>
     <div class="grid md-2 lg-3">
         <CardWrapper title="Accordion" href="/accordion">
@@ -106,7 +111,7 @@ import Checkbox from '@components/Checkbox/Checkbox.astro'
         </CardWrapper>
         <CardWrapper title="Radio" href="/radio">
             <Radio
-                items={[{ label: 'Radio', selected: true }]}
+                items={[{ label: 'Radio', selected: true, value: '1' }]}
                 name="radio"
             />
         </CardWrapper>
@@ -139,6 +144,9 @@ import Checkbox from '@components/Checkbox/Checkbox.astro'
 
     .cta {
         text-align: center;
+        display: flex;
+        justify-content: center;
+        gap: 10px;
     }
 
     .grid {

src/pages/radio.astro

@@ -27,22 +27,22 @@ const sections = [
     <div class="grid md-2 lg-3">
         <ComponentWrapper type="Astro">
             <AstroRadio
-                items={[{ label: 'Radio', selected: true }]}
+                items={[{ label: 'Radio', selected: true, value: '1' }]}
                 name="radio1"
             />
         </ComponentWrapper>
 
         <ComponentWrapper type="Svelte">
             <SvelteRadio
-                items={[{ label: 'Radio', selected: true }]}
+                items={[{ label: 'Radio', selected: true, value: '1' }]}
                 name="radio2"
                 color="#ee5253"
             />
         </ComponentWrapper>
 
         <ComponentWrapper type="React">
             <ReactRadio
-                items={[{ label: 'Radio', selected: true }]}
+                items={[{ label: 'Radio', selected: true, value: '1' }]}
                 name="radio3"
                 color="#48dbfb"
             />
@@ -55,9 +55,9 @@ const sections = [
             <ComponentWrapper title="Default with link">
                 <section.component
                     items={[
-                        { label: 'Small' },
-                        { label: 'Medium with <a href="/" target="_blank">link</a>' },
-                        { label: 'Large' }
+                        { label: 'Small', value: 'sm' },
+                        { label: 'Medium with <a href="/" target="_blank">link</a>', value: 'md' },
+                        { label: 'Large', value: 'lg' }
                     ]}
                     name={`radio1-${index}`}
                 />
@@ -66,9 +66,9 @@ const sections = [
             <ComponentWrapper title="Preselected option">
                 <section.component
                     items={[
-                        { label: 'Small' },
-                        { label: 'Medium', selected: true },
-                        { label: 'Large' }
+                        { label: 'Small', value: 'sm' },
+                        { label: 'Medium', selected: true, value: 'md' },
+                        { label: 'Large', value: 'lg' }
                     ]}
                     name={`radio2-${index}`}
                 />
@@ -77,9 +77,9 @@ const sections = [
             <ComponentWrapper title="Disabled option">
                 <section.component
                     items={[
-                        { label: 'Small' },
-                        { label: 'Medium', selected: true, disabled: true },
-                        { label: 'Large', disabled: true }
+                        { label: 'Small', value: 'sm' },
+                        { label: 'Medium', selected: true, disabled: true, value: 'md' },
+                        { label: 'Large', disabled: true, value: 'lg' }
                     ]}
                     name={`radio3-${index}`}
                 />
@@ -88,9 +88,9 @@ const sections = [
             <ComponentWrapper title="Options with subtext and link">
                 <section.component
                     items={[
-                        { label: 'Starter', subText: 'For getting started' },
-                        { label: 'Standard', subText: 'For existing small <a href="/" target="_blank">businesses</a>' },
-                        { label: 'Premium', subText: 'For enterprise solutions' }
+                        { label: 'Starter', subText: 'For getting started', value: 'starter' },
+                        { label: 'Standard', subText: 'For existing small <a href="/" target="_blank">businesses</a>', value: 'standard' },
+                        { label: 'Premium', subText: 'For enterprise solutions', value: 'premium' }
                     ]}
                     name={`radio4-${index}`}
                 />
@@ -99,9 +99,9 @@ const sections = [
             <ComponentWrapper title="With custom color">
                 <section.component
                     items={[
-                        { label: 'Small' },
-                        { label: 'Medium' },
-                        { label: 'Large' }
+                        { label: 'Small', value: 'sm' },
+                        { label: 'Medium', value: 'md' },
+                        { label: 'Large', value: 'lg' }
                     ]}
                     color="#1dd1a1"
                     name={`radio5-${index}`}
@@ -111,9 +111,9 @@ const sections = [
             <ComponentWrapper title="With inline display">
                 <section.component
                     items={[
-                        { label: 'Small' },
-                        { label: 'Medium' },
-                        { label: 'Large' }
+                        { label: 'Small', value: 'sm' },
+                        { label: 'Medium', value: 'md' },
+                        { label: 'Large', value: 'lg' }
                     ]}
                     inline={true}
                     name={`radio6-${index}`}

src/pages/react.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '@static/Layout.astro'
+import ReactPlayground from '@playground/ReactPlayground.tsx'
+---
+
+<Layout>
+    <h1>React Playground</h1>
+    <h2>For interactive elements</h2>
+    <ReactPlayground client:load />
+</Layout>

src/pages/svelte.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '@static/Layout.astro'
+import SveltePlayground from '@playground/SveltePlayground.svelte'
+---
+
+<Layout>
+    <h1>Svelte Playground</h1>
+    <h2>For interactive elements</h2>
+    <SveltePlayground client:load />
+</Layout>

src/playground/ReactPlayground.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import Card from '@components/Card/Card.tsx'
+import Accordion from '@components/Accordion/Accordion.tsx'
+import Badge from '@components/Badge/Badge.tsx'
+import Button from '@components/Button/Button.tsx'
+import Checkbox from '@components/Checkbox/Checkbox.tsx'
+import Radio from '@components/Radio/Radio.tsx'
+import Switch from '@components/Switch/Switch.tsx'
+
+const ReactPlayground = () => {
+    return (
+        <div className="grid md-2 lg-3">
+            <Card title="Accordion">
+                <Accordion items={[{
+                    title: 'Do you offer support?',
+                    content: 'We provide 30 days of support.'
+                }, {
+                    title: 'Can I request customizations?',
+                    content: 'Yes!'
+                }]} />
+            </Card>
+
+            <Card title="Badge">
+                <Badge onClick={() => console.log('👋')}>Click me</Badge>
+            </Card>
+
+            <Card title="Button">
+                <Button onClick={() => console.log('👋')} theme="alert">
+                    Click me
+                </Button>
+            </Card>
+
+            <Card title="Checkbox">
+                <Checkbox
+                    label="Accept"
+                    onClick={e => console.log(`checked: ${e.target.checked}`)}
+                />
+            </Card>
+
+            <Card title="Radio">
+                <Radio
+                    items={[
+                        { label: 'Small', value: 'sm' },
+                        { label: 'Medium', value: 'md' },
+                        { label: 'Large', value: 'lg' }
+                    ]}
+                    name="radio"
+                    onChange={e => console.log('changed to:', e.target.value)}
+                />
+            </Card>
+
+            <Card title="Switch">
+                <Switch
+                    onClick={e => console.log(`switched: ${e.target.checked}`)}
+                />
+            </Card>
+        </div>
+    )
+    
+}
+
+export default ReactPlayground