Merge pull request #1 from Frontendland/feature/icons-component

Add icons component

Author: Frontendland

package.json

@@ -28,7 +28,7 @@
     },
     "files": [
         "components",
-        "public",
+        "icons",
         "scss",
         "astro.d.ts",
         "astro.js",

scripts/build.js

@@ -1,18 +1,14 @@
 import fs from 'fs'
+import buildImports from './buildImports.js'
+import buildTypes from './buildTypes.js'
 
 const folders = {
-    'public': 'dist/public',
+    'src/icons': 'dist/icons',
     'src/components': 'dist/components',
     'src/scss': 'dist/scss'
 }
 
 const files = {
-    'src/astro.d.ts': 'dist/astro.d.ts',
-    'src/astro.js': 'dist/astro.js',
-    'src/svelte.d.ts': 'dist/svelte.d.ts',
-    'src/svelte.js': 'dist/svelte.js',
-    'src/react.d.ts': 'dist/react.d.ts',
-    'src/react.js': 'dist/react.js',
     'README.md': 'dist/README.md',
     'LICENSE': 'dist/LICENSE',
     'package.json': 'dist/package.json'
@@ -40,4 +36,12 @@ Object.keys(files).forEach(key => {
     })
 })
 
+fs.writeFileSync('dist/astro.js', buildImports('astro'))
+fs.writeFileSync('dist/svelte.js', buildImports('svelte'))
+fs.writeFileSync('dist/react.js', buildImports('tsx'))
+
+fs.writeFileSync('dist/astro.d.ts', buildTypes('astro'))
+fs.writeFileSync('dist/svelte.d.ts', buildTypes('svelte'))
+fs.writeFileSync('dist/react.d.ts', buildTypes('react'))
+
 console.log('✅ Package built')

scripts/buildImports.js

@@ -0,0 +1,13 @@
+import fs from 'fs'
+
+const buildImports = extension => {
+    const components = fs.readdirSync('src/components')
+
+    return components.map(component => {
+        return `import ${component}Component from './components/${component}/${component}.${extension}'`
+    }).join('\n')
+        + `\n\n`
+        + components.map(component => `export const ${component} = ${component}Component`).join('\n')
+}
+
+export default buildImports

scripts/buildTypes.js

@@ -0,0 +1,19 @@
+import fs from 'fs'
+
+const buildTypes = type => {
+    const components = fs.readdirSync('src/components')
+
+    return `
+declare module 'webcoreui/${type}' {
+    ${components.map(component => {
+        return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'`
+    }).join('\n\t')}
+
+    ${components.map(component => {
+        return `export function ${component}(_props: ${component}Props): any`
+    }).join('\n\t')}
+}
+    `
+}
+
+export default buildTypes

src/astro.d.ts

@@ -1,5 +1,6 @@
 ---
 import type { AccordionProps } from './accordion'
+import Icon from '../Icon/Icon.astro'
 
 interface Props extends AccordionProps {}
 
@@ -9,16 +10,11 @@ const {
 ---
 
 <ul data-id="accordion">
-    {items.map(item => (
+    {items.map((item: AccordionProps['items'][0]) => (
         <li>
             <div class="accordion-title">
                 {item.title}
-                <img
-                    src="/icons/arrow-down.svg"
-                    alt="GitHub"
-                    width={15}
-                    height={15}
-                />
+                <Icon type="arrow-down" size={15} />
             </div>
             <div class="accordion-wrapper">
                 <div class="accordion-content">

src/astro.js

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { AccordionProps } from './accordion'
+    import ArrowDown from '../../icons/arrow-down.svg?raw'
 
     export let items: AccordionProps['items']
 
@@ -22,12 +23,7 @@
                 on:click={() => toggle(index)}
             >
                 {item.title}
-                <img
-                    src="/icons/arrow-down.svg"
-                    alt="GitHub"
-                    width={15}
-                    height={15}
-                />
+                {@html ArrowDown}
             </div>
             <div class="accordion-wrapper">
                 <div class="accordion-content">

src/components/Accordion/Accordion.astro

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import type { AccordionProps } from './accordion'
+import ArrowDown from '../../icons/arrow-down.svg?raw'
 import './accordion.scss'
 
-export const Accordion = ({ items }: AccordionProps) => {
+const Accordion = ({ items }: AccordionProps) => {
     const [state, setState] = useState(Array(items.length).fill(false))
 
     const toggle = (index: number) => {
@@ -19,15 +20,8 @@ export const Accordion = ({ items }: AccordionProps) => {
                     <div
                         className={state[index] ? 'accordion-title open' : 'accordion-title'}
                         onClick={() => toggle(index)}
-                    >
-                        {item.title}
-                        <img
-                            src="/icons/arrow-down.svg"
-                            alt="GitHub"
-                            width={15}
-                            height={15}
-                        />
-                    </div>
+                        dangerouslySetInnerHTML={{ __html: `${item.title} ${ArrowDown}` }}
+                    />
                     <div className="accordion-wrapper">
                         <div className="accordion-content">
                             <div dangerouslySetInnerHTML={{ __html: item.content }} />
@@ -38,3 +32,5 @@ export const Accordion = ({ items }: AccordionProps) => {
         </ul>
     )
 }
+
+export default Accordion

src/components/Accordion/Accordion.svelte

@@ -25,13 +25,16 @@ ul {
             align-items: center;
             cursor: pointer;
 
-            img {
+            svg {
                 @include Transition(transform);
-                filter: brightness(.7);
+                color: #BBB;
+                width: 15px;
+                height: 15px;
+                pointer-events: none;
             }
 
             &.open {
-                img {
+                svg {
                     transform: rotate(180deg);
                 }
 

src/components/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { ButtonProps } from './button'
 import './button.scss'
 
-export const Button = ({
+const Button = ({
     theme,
     bold,
     href,
@@ -30,3 +30,5 @@ export const Button = ({
         </button>
     )
 }
+
+export default Button

src/components/Accordion/accordion.scss

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const Card = () => <div />
+
+export default Card

src/components/Button/Button.tsx

@@ -0,0 +1 @@
+export type CardProps = {}

src/components/Card/Card.tsx

@@ -0,0 +1,20 @@
+---
+import type { IconProps } from './icon'
+
+interface Props extends IconProps {}
+
+const {
+    type,
+    size = 24,
+    color
+} = Astro.props
+
+const { default: markup } = await import(`../../icons/${type}.svg?raw`)
+const icon = markup
+    .replace('width="24"', `width=${size}`)
+    .replace('height="24"', color
+        ? `height=${size} color=${color}`
+        : `height=${size}`)
+---
+
+<Fragment set:html={icon} />

src/components/Card/card.ts

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { IconProps } from './icon'
+
+    import Github from '../../icons/github.svg?raw'
+    import ArrowDown from '../../icons/arrow-down.svg?raw'
+
+    export let type: IconProps['type']
+    export let size: IconProps['size'] = 24
+    export let color: IconProps['color']
+
+    const iconMap = {
+        'github': Github,
+        'arrow-down': ArrowDown
+    }
+
+    const icon = iconMap[type]
+        .replace('width="24"', `width=${size}`)
+        .replace('height="24"', color
+            ? `height=${size} color=${color}`
+            : `height=${size}`)
+</script>
+
+{@html icon}

src/components/Icon/Icon.astro

@@ -0,0 +1,26 @@
+import React from 'react'
+import type { IconProps } from './icon'
+
+import Github from '../../icons/github.svg?raw'
+import ArrowDown from '../../icons/arrow-down.svg?raw'
+
+const iconMap = {
+    'github': Github,
+    'arrow-down': ArrowDown
+}
+
+const Icon = ({
+    type,
+    size = 24,
+    color
+}: IconProps) => {
+    const icon = iconMap[type]
+        .replace('width="24"', `width=${size}`)
+        .replace('height="24"', color
+            ? `height=${size} color=${color}`
+            : `height=${size}`)
+
+    return <div dangerouslySetInnerHTML={{ __html: icon }} />
+}
+
+export default Icon

src/components/Icon/Icon.svelte

@@ -0,0 +1,5 @@
+export type IconProps = {
+    type: string
+    size?: number
+    color?: string
+}

src/components/Icon/Icon.tsx

@@ -4,7 +4,7 @@ import ComponentWrapper from '@static/ComponentWrapper.astro'
 
 import AstroAccordion from '@components/Accordion/Accordion.astro'
 import SvelteAccorion from '@components/Accordion/Accordion.svelte'
-import { Accordion as ReactAccordion } from '@components/Accordion/Accordion.tsx'
+import ReactAccordion from '@components/Accordion/Accordion.tsx'
 
 const accordionItems = [{
     title: 'Do you offer support?',

src/components/Icon/icon.ts

@@ -2,9 +2,10 @@
 import Layout from '@static/Layout.astro'
 import ComponentWrapper from '@static/ComponentWrapper.astro'
 
+import Icon from '@components/Icon/Icon.astro'
 import AstroButton from '@components/Button/Button.astro'
 import SvelteButton from '@components/Button/Button.svelte'
-import { Button as ReactButton } from '@components/Button/Button.tsx'
+import ReactButton from '@components/Button/Button.tsx'
 ---
 
 <Layout>
@@ -43,14 +44,9 @@ import { Button as ReactButton } from '@components/Button/Button.tsx'
             <AstroButton disabled>Disabled</AstroButton>
         </ComponentWrapper>
 
-        <ComponentWrapper title="Wiht Icon">
+        <ComponentWrapper title="With Icon">
             <AstroButton theme="secondary">
-                <img
-                    src="/icons/github.svg"
-                    alt="GitHub"
-                    width={20}
-                    height={20}
-                />
+                <Icon type="github" size={20} />
                 With Icon
             </AstroButton>
         </ComponentWrapper>

public/icons/arrow-down.svg renamed to src/icons/arrow-down.svg

@@ -4,6 +4,7 @@ import CardWrapper from '@static/CardWrapper.astro'
 
 import Button from '@components/Button/Button.astro'
 import Accordion from '@components/Accordion/Accordion.astro'
+import Icon from '@components/Icon/Icon.astro'
 ---
 
 <Layout>
@@ -22,7 +23,7 @@ import Accordion from '@components/Accordion/Accordion.astro'
             href="https://github.com/Frontendland/webcoreui" target="_blank"
             theme="secondary"
         >
-            <img src="/icons/github.svg" alt="GitHub" width={20} height={20} />
+            <Icon type="github" size={20} />
             GitHub
         </Button>
     </div>