Feature/use module css

.vscode/settings.json

@@ -1,7 +1,3 @@
 {
-    "svelte.plugin.svelte.compilerWarnings": {
-        "a11y-click-events-have-key-events": "ignore",
-        "a11y-no-static-element-interactions": "ignore",
-        "a11y-no-noninteractive-element-interactions": "ignore"
-    }
+    "svelte.plugin.svelte.compilerWarnings": {}
 }

package.json

@@ -21,6 +21,7 @@
         "typescript": "5.4.5"
     },
     "exports": {
+        ".": "./index.js",
         "./astro": "./astro.js",
         "./svelte": "./svelte.js",
         "./react": "./react.js",

scripts/buildTypes.js

@@ -20,14 +20,24 @@ const buildTypes = type => {
     }
 
     if (type === 'svelte') {
+        const getTypeName = component => {
+            const componentsWithSvelteSpecificTypes = [
+                'Badge'
+            ]
+
+            return componentsWithSvelteSpecificTypes.includes(component)
+                ? `Svelte${component}Props`
+                : `${component}Props`
+        }
+
         return format(`
             ${components.map(component => {
-                return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'`
+                return `import type { ${getTypeName(component)} } from './components/${component}/${component.toLowerCase()}'`
             }).join('\n')}
 
             declare module 'webcoreui/${type}' {
                 ${components.map(component => {
-                    return `export function ${component}(_props: ${component}Props): any`
+                    return `export function ${component}(_props: ${getTypeName(component)}): any`
                 }).join('\n\t')}
             }
         `)

scripts/createComponent.js

@@ -24,7 +24,7 @@ const templates = {
     astro: `
         ---
         import type { ${component}Props } from './${lowerCaseComponent}'
-        import './${lowerCaseComponent}.scss'
+        import styles from './${lowerCaseComponent}.module.scss'
 
         interface Props extends ${component}Props {}
 
@@ -33,20 +33,20 @@ const templates = {
         } = Astro.props
 
         const classes = [
-            'w-${lowerCaseComponent}',
+            styles.${lowerCaseComponent},
             className
         ]
         ---
     `,
     svelte: `
         <script lang="ts">
             import type { ${component}Props } from './${lowerCaseComponent}'
-            import './${lowerCaseComponent}.scss'
+            import styles from './${lowerCaseComponent}.module.scss'
 
             export let className: ${component}Props['className'] = ''
 
             const classes = [
-                'w-${lowerCaseComponent}',
+                styles.${lowerCaseComponent},
                 className
             ].filter(Boolean).join(' ')
         </script>
@@ -55,13 +55,13 @@ const templates = {
         import React from 'react'
         import type { ${component}Props } from './${lowerCaseComponent}'
 
-        import './${lowerCaseComponent}.scss'
+        import styles from './${lowerCaseComponent}.module.scss'
 
         const ${component} = ({
             className
         }: ${component}Props) => {
             const classes = [
-                'w-${lowerCaseComponent}',
+                styles.${lowerCaseComponent},
                 className
             ].filter(Boolean).join(' ')
 
@@ -78,7 +78,7 @@ const templates = {
     styles: `
         @import '../../scss/config.scss';
 
-        .w-${lowerCaseComponent} {
+        .${lowerCaseComponent} {
 
         }
     `,
@@ -133,7 +133,7 @@ fs.writeFileSync(`${rootPath}/${component}/${component}.astro`, format(templates
 fs.writeFileSync(`${rootPath}/${component}/${component}.svelte`, format(templates.svelte))
 fs.writeFileSync(`${rootPath}/${component}/${component}.tsx`, format(templates.react))
 fs.writeFileSync(`${rootPath}/${component}/${lowerCaseComponent}.ts`, format(templates.types))
-fs.writeFileSync(`${rootPath}/${component}/${lowerCaseComponent}.scss`, format(templates.styles))
+fs.writeFileSync(`${rootPath}/${component}/${lowerCaseComponent}.module.scss`, format(templates.styles))
 fs.writeFileSync(`src/pages/${lowerCaseComponent}.astro`, format(templates.page))
 
 console.log(`✅ Component ${component} created at ${rootPath}/${component}.`)

src/components/Accordion/Accordion.astro

@@ -1,7 +1,7 @@
 ---
 import type { AccordionProps } from './accordion'
 import ArrowDown from '../../icons/arrow-down.svg?raw'
-import './accordion.scss'
+import styles from './accordion.module.scss'
 
 interface Props extends AccordionProps {}
 
@@ -10,15 +10,15 @@ const {
 } = Astro.props
 ---
 
-<ul class="w-accordion" data-id="w-accordion">
+<ul class={styles.accordion} data-id="w-accordion">
     {items.map((item: AccordionProps['items'][0]) => (
         <li>
-            <div class="accordion-title">
+            <button class={styles.title} data-toggle="true">
                 {item.title}
                 <Fragment set:html={ArrowDown} />
-            </div>
-            <div class="accordion-wrapper">
-                <div class="accordion-content">
+            </button>
+            <div class={styles.wrapper}>
+                <div class={styles.content}>
                     <Fragment set:html={item.content} />
                 </div>
             </div>
@@ -33,8 +33,10 @@ const {
         element.addEventListener('click', event => {
             const target = event.target as HTMLDivElement
 
-            if (target.classList.contains('accordion-title')) {
-                target.classList.toggle('open')
+            if (target.dataset.toggle) {
+                target.dataset.open = target.dataset.open === 'true'
+                    ? 'false'
+                    : 'true'
             }
         })
     })

src/components/Accordion/Accordion.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { AccordionProps } from './accordion'
     import ArrowDown from '../../icons/arrow-down.svg?raw'
-    import './accordion.scss'
+    import styles from './accordion.module.scss'
 
     export let items: AccordionProps['items']
 
@@ -15,19 +15,19 @@
     }
 </script>
 
-<ul class="w-accordion">
+<ul class={styles.accordion}>
     {#each items as item, index}
         <li>
-            <div
-                class="accordion-title"
-                class:open={state[index]}
+            <button
+                class={styles.title}
+                data-open={state[index]}
                 on:click={() => toggle(index)}
             >
                 {item.title}
                 {@html ArrowDown}
-            </div>
-            <div class="accordion-wrapper">
-                <div class="accordion-content">
+            </button>
+            <div class={styles.wrapper}>
+                <div class={styles.content}>
                     {@html item.content}
                 </div>
             </div>

src/components/Accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import type { AccordionProps } from './accordion'
 import ArrowDown from '../../icons/arrow-down.svg?raw'
-import './accordion.scss'
+import styles from './accordion.module.scss'
 
 const Accordion = ({ items }: AccordionProps) => {
     const [state, setState] = useState(Array(items.length).fill(false))
@@ -14,16 +14,17 @@ const Accordion = ({ items }: AccordionProps) => {
     }
 
     return (
-        <ul className="w-accordion">
+        <ul className={styles.accordion}>
             {items.map((item, index) => (
                 <li key={index}>
-                    <div
-                        className={state[index] ? 'accordion-title open' : 'accordion-title'}
+                    <button
+                        className={styles.title}
+                        data-open={state[index]}
                         onClick={() => toggle(index)}
                         dangerouslySetInnerHTML={{ __html: `${item.title} ${ArrowDown}` }}
                     />
-                    <div className="accordion-wrapper">
-                        <div className="accordion-content">
+                    <div className={styles.wrapper}>
+                        <div className={styles.content}>
                             <div dangerouslySetInnerHTML={{ __html: item.content }} />
                         </div>
                     </div>

src/components/Accordion/accordion.scss → src/components/Accordion/accordion.module.scss

@@ -1,6 +1,6 @@
 @import '../../scss/config.scss';
 
-.w-accordion {
+.accordion {
     margin: 0;
     padding: 0;
     list-style-type: none;
@@ -19,10 +19,16 @@
             padding-bottom: 0;
         }
 
-        .accordion-title {
+        .title {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            width: 100%;
+            background: transparent;
+            border: 0;
+            color: #FFF;
+            font-size: 16px;
+            padding: 0;
             cursor: pointer;
 
             svg {
@@ -33,28 +39,28 @@
                 pointer-events: none;
             }
 
-            &.open {
+            &[data-open="true"] {
                 svg {
                     transform: rotate(180deg);
                 }
 
-                + .accordion-wrapper {
+                + .wrapper {
                     grid-template-rows: 1fr;
 
-                    .accordion-content {
+                    .content {
                         padding: 10px 0;
                     }
                 }
             }
         }
 
-        .accordion-wrapper {
+        .wrapper {
             @include Transition(grid-template-rows);
             display: grid;
             grid-template-rows: 0fr;
         }
 
-        .accordion-content {
+        .content {
             @include Transition();
             overflow: hidden;
             color: #BBB;

src/components/Alert/Alert.astro

@@ -7,7 +7,7 @@ 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'
+import styles from './alert.module.scss'
 
 interface Props extends AlertProps {}
 
@@ -22,6 +22,8 @@ const {
     element = 'section',
     title,
     titleTag = 'strong',
+    titleProps,
+    bodyProps,
     className,
     theme,
     ...rest
@@ -32,9 +34,9 @@ const Title = titleTag
 const hasCustomIcon = Astro.slots.has('icon')
 
 const classes = [
-    'w-alert',
-    (!hasCustomIcon && !theme) && 'col',
-    theme,
+    styles['w-alert'],
+    (!hasCustomIcon && !theme) && styles.col,
+    theme && styles[theme],
     className
 ].filter(Boolean).join(' ')
 
@@ -49,13 +51,15 @@ const props = {
     {!hasCustomIcon && theme && <Fragment set:html={iconMap[theme]} />}
 
     <ConditionalWrapper condition={!!(hasCustomIcon || theme)}>
-        <div class="alert-wrapper" slot="wrapper">
+        <div class={styles.wrapper} slot="wrapper">
             children
         </div>
         {title && (
-            <Title class:list="alert-title">{title}</Title>
+            <Title class:list={styles.title} {...titleProps}>
+                {title}
+            </Title>
         )}
-        <div class="alert-body">
+        <div class={styles.body} {...bodyProps}>
             <slot />
         </div>
     </ConditionalWrapper>

src/components/Alert/Alert.svelte

@@ -7,11 +7,13 @@
     import warning from '../../icons/warning.svg?raw'
     import alert from '../../icons/alert.svg?raw'
 
-    import './alert.scss'
+    import styles from './alert.module.scss'
 
     export let element: AlertProps['element'] = 'section'
     export let title: AlertProps['title'] = null
     export let titleTag: AlertProps['title'] = 'strong'
+    export let titleProps: AlertProps['titleProps'] = null
+    export let bodyProps: AlertProps['bodyProps'] = null
     export let className: AlertProps['className'] = null
     export let theme: AlertProps['theme'] = null
 
@@ -25,9 +27,9 @@
     const hasCustomIcon = $$slots.icon
 
     const classes = [
-        'w-alert',
-        (!hasCustomIcon && !theme) && 'col',
-        theme,
+        styles['w-alert'],
+        (!hasCustomIcon && !theme) && styles.col,
+        theme && styles[theme],
         className
     ].filter(Boolean).join(' ')
 </script>
@@ -42,14 +44,14 @@
     <ConditionalWrapper
         condition={!!(hasCustomIcon || theme)}
         element="div"
-        class="alert-wrapper"
+        class={styles.wrapper}
     >
         {#if title}
-            <svelte:element this={titleTag} class="alert-title">
+            <svelte:element this={titleTag} class={styles.title} {...titleProps}>
                 {title}
             </svelte:element>
         {/if}
-        <div class="alert-body">
+        <div class={styles.body} {...bodyProps}>
             <slot />
         </div>
     </ConditionalWrapper>