From 273e3e32316ee369cac54fded56a5233a622073f Mon Sep 17 00:00:00 2001 From: Frontendland Date: Sat, 15 Jun 2024 14:19:56 +0200 Subject: [PATCH 01/11] =?UTF-8?q?=F0=9F=90=9B=20Add=20missing=20package.js?= =?UTF-8?q?on=20to=20build=20script?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/build.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/build.js b/scripts/build.js index adad365..eb70bf5 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -14,7 +14,8 @@ const files = { 'src/react.d.ts': 'dist/react.d.ts', 'src/react.js': 'dist/react.js', 'README.md': 'dist/README.md', - 'LICENSE': 'dist/LICENSE' + 'LICENSE': 'dist/LICENSE', + 'package.json': 'dist/package.json' } console.log('🚀 Preparing package build') From b410f7297c3c73006bf15075f2ec74ac0d875772 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Sat, 15 Jun 2024 14:26:19 +0200 Subject: [PATCH 02/11] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20=20Update=20package?= =?UTF-8?q?=20version?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 75b69ce..16a5b94 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "webcoreui", "type": "module", - "version": "0.0.4", + "version": "0.0.5", "scripts": { "dev": "astro dev", "build": "astro check && astro build", From 74aaf8a76f806daa9aa43102fe02fb4ee113a016 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Sat, 15 Jun 2024 22:56:36 +0200 Subject: [PATCH 03/11] Prepare icons component --- src/components/Icon/Icon.astro | 18 ++++++++++++++++++ src/components/Icon/Icon.svelte | 17 +++++++++++++++++ src/components/Icon/Icon.tsx | 30 ++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+) create mode 100644 src/components/Icon/Icon.astro create mode 100644 src/components/Icon/Icon.svelte create mode 100644 src/components/Icon/Icon.tsx diff --git a/src/components/Icon/Icon.astro b/src/components/Icon/Icon.astro new file mode 100644 index 0000000..569b78f --- /dev/null +++ b/src/components/Icon/Icon.astro @@ -0,0 +1,18 @@ +--- +const { + type, + size = 24, + color +} = Astro.props + +const { default: innerHTML } = await import(`../../icons/${type}.js`); + +--- + + diff --git a/src/components/Icon/Icon.svelte b/src/components/Icon/Icon.svelte new file mode 100644 index 0000000..fea5186 --- /dev/null +++ b/src/components/Icon/Icon.svelte @@ -0,0 +1,17 @@ + + +{#await icon() then module} + {@html module.default} +{/await} + diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx new file mode 100644 index 0000000..94b2734 --- /dev/null +++ b/src/components/Icon/Icon.tsx @@ -0,0 +1,30 @@ +import React, { useState, useEffect } from 'react' + +import github from '../../icons/github' + +export const Icon = ({ + type, + size = 24, + color +}) => { + const [icon, setIcon] = useState('') + + useEffect(() => { + (async () => { + const icon = (await import(`../../icons/${type}.js`)).default; + + setIcon(icon) + })() + }, []) + + return ( + + ) +} + From 92c7be0c608f0fc5f28065b773d920d2b949ecd2 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Sun, 16 Jun 2024 14:40:13 +0200 Subject: [PATCH 04/11] =?UTF-8?q?=E2=9C=A8=20Add=20icons=20component=20for?= =?UTF-8?q?=20Astro,=20Svelte=20and=20React?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- scripts/build.js | 2 +- src/astro.js | 2 ++ src/components/Accordion/Accordion.astro | 10 ++---- src/components/Accordion/Accordion.svelte | 8 ++--- src/components/Accordion/Accordion.tsx | 12 ++----- src/components/Accordion/accordion.scss | 9 ++++-- src/components/Icon/Icon.astro | 20 ++++++------ src/components/Icon/Icon.svelte | 32 +++++++++++-------- src/components/Icon/Icon.tsx | 38 ++++++++++------------- src/components/Icon/icon.ts | 5 +++ src/env.d.ts | 1 + {public => src}/icons/arrow-down.svg | 2 +- {public => src}/icons/github.svg | 4 +-- src/pages/button.astro | 10 ++---- src/pages/index.astro | 3 +- svelte.config.js | 13 ++++++-- 17 files changed, 88 insertions(+), 85 deletions(-) create mode 100644 src/components/Icon/icon.ts create mode 100644 src/env.d.ts rename {public => src}/icons/arrow-down.svg (85%) rename {public => src}/icons/github.svg (94%) diff --git a/package.json b/package.json index 16a5b94..1014957 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ }, "files": [ "components", - "public", + "icons", "scss", "astro.d.ts", "astro.js", diff --git a/scripts/build.js b/scripts/build.js index eb70bf5..4692376 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -1,7 +1,7 @@ import fs from 'fs' const folders = { - 'public': 'dist/public', + 'src/icons': 'dist/icons', 'src/components': 'dist/components', 'src/scss': 'dist/scss' } diff --git a/src/astro.js b/src/astro.js index 968a087..6d9c81f 100644 --- a/src/astro.js +++ b/src/astro.js @@ -1,7 +1,9 @@ import AccordionComponent from './components/Accordion/Accordion.astro' import ButtonComponent from './components/Button/Button.astro' import CardComponent from './components/Card/Card.astro' +import IconComponent from './components/Icon/Icon.astro' export const Accordion = AccordionComponent export const Button = ButtonComponent export const Card = CardComponent +export const Icon = IconComponent diff --git a/src/components/Accordion/Accordion.astro b/src/components/Accordion/Accordion.astro index 3957ec5..97504e5 100644 --- a/src/components/Accordion/Accordion.astro +++ b/src/components/Accordion/Accordion.astro @@ -1,5 +1,6 @@ --- import type { AccordionProps } from './accordion' +import Icon from '../Icon/Icon.astro' interface Props extends AccordionProps {} @@ -9,16 +10,11 @@ const { ---
    - {items.map(item => ( + {items.map((item: AccordionProps['items'][0]) => (
  • {item.title} - GitHub +
    diff --git a/src/components/Accordion/Accordion.svelte b/src/components/Accordion/Accordion.svelte index a095684..792302b 100644 --- a/src/components/Accordion/Accordion.svelte +++ b/src/components/Accordion/Accordion.svelte @@ -1,5 +1,6 @@ + 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'] -{#await icon() then module} - {@html module.default} -{/await} + 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}`) + +{@html icon} diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 94b2734..6641685 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -1,30 +1,24 @@ -import React, { useState, useEffect } from 'react' +import React from 'react' +import type { IconProps } from './icon' -import github from '../../icons/github' +import Github from '../../icons/github.svg?raw' +import ArrowDown from '../../icons/arrow-down.svg?raw' + +const iconMap = { + 'github': Github, + 'arrow-down': ArrowDown +} export const Icon = ({ type, size = 24, color -}) => { - const [icon, setIcon] = useState('') - - useEffect(() => { - (async () => { - const icon = (await import(`../../icons/${type}.js`)).default; +}: IconProps) => { + const icon = iconMap[type] + .replace('width="24"', `width=${size}`) + .replace('height="24"', color + ? `height=${size} color=${color}` + : `height=${size}`) - setIcon(icon) - })() - }, []) - - return ( - - ) + return
    } - diff --git a/src/components/Icon/icon.ts b/src/components/Icon/icon.ts new file mode 100644 index 0000000..5276d70 --- /dev/null +++ b/src/components/Icon/icon.ts @@ -0,0 +1,5 @@ +export type IconProps = { + type: string + size?: number + color?: string +} diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..8c34fb4 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1 @@ +/// \ No newline at end of file diff --git a/public/icons/arrow-down.svg b/src/icons/arrow-down.svg similarity index 85% rename from public/icons/arrow-down.svg rename to src/icons/arrow-down.svg index 2deceb1..ebc3432 100644 --- a/public/icons/arrow-down.svg +++ b/src/icons/arrow-down.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/github.svg b/src/icons/github.svg similarity index 94% rename from public/icons/github.svg rename to src/icons/github.svg index 35cdad9..e405807 100644 --- a/public/icons/github.svg +++ b/src/icons/github.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/pages/button.astro b/src/pages/button.astro index 18eb77a..21f2ed7 100644 --- a/src/pages/button.astro +++ b/src/pages/button.astro @@ -2,6 +2,7 @@ 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' @@ -43,14 +44,9 @@ import { Button as ReactButton } from '@components/Button/Button.tsx' Disabled - + - GitHub + With Icon diff --git a/src/pages/index.astro b/src/pages/index.astro index 64348af..c51ecdc 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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' --- @@ -22,7 +23,7 @@ import Accordion from '@components/Accordion/Accordion.astro' href="/Frontendland/webcoreui" target="_blank" theme="secondary" > - GitHub + GitHub
    diff --git a/svelte.config.js b/svelte.config.js index 542f7c5..a087de8 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -3,14 +3,21 @@ import { vitePreprocess } from '@astrojs/svelte' export default { preprocess: vitePreprocess(), onwarn: (warning, handler) => { - // Suppress false positive a11y warnings in terminal + // Suppress false positive warnings in terminal // Edit .vscode/settings.json to also suppress warnings in VSCode const ignoreWarnings = [ 'a11y-click-events-have-key-events', - 'a11y-no-static-element-interactions' + 'a11y-no-static-element-interactions', + '.accordion-title' ] - if (ignoreWarnings.includes(warning.code)) { + const warningText = [ + warning.code, + warning.message, + warning.filename + ].join(' ') + + if (new RegExp(ignoreWarnings.join('|'), 'gi').test(warningText)) { return } From 84dfd3d7f33ab6b2913417dbf8c227588de271bf Mon Sep 17 00:00:00 2001 From: Frontendland Date: Sun, 16 Jun 2024 15:16:42 +0200 Subject: [PATCH 05/11] =?UTF-8?q?=E2=9C=A8=20Build=20imports=20and=20types?= =?UTF-8?q?=20automatically?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/build.js | 16 ++++++++++------ scripts/buildImports.js | 13 +++++++++++++ scripts/buildTypes.js | 19 +++++++++++++++++++ src/astro.d.ts | 5 ----- src/astro.js | 9 --------- src/components/Accordion/Accordion.tsx | 4 +++- src/components/Button/Button.tsx | 4 +++- src/components/Card/Card.tsx | 5 +++++ src/components/Card/card.ts | 1 + src/components/Icon/Icon.svelte | 2 +- src/components/Icon/Icon.tsx | 4 +++- src/env.d.ts | 1 - src/pages/accordion.astro | 2 +- src/pages/button.astro | 2 +- src/react.d.ts | 5 ----- src/react.js | 7 ------- src/svelte.d.ts | 5 ----- src/svelte.js | 7 ------- 18 files changed, 60 insertions(+), 51 deletions(-) create mode 100644 scripts/buildImports.js create mode 100644 scripts/buildTypes.js delete mode 100644 src/astro.d.ts delete mode 100644 src/astro.js create mode 100644 src/components/Card/card.ts delete mode 100644 src/env.d.ts delete mode 100644 src/react.d.ts delete mode 100644 src/react.js delete mode 100644 src/svelte.d.ts delete mode 100644 src/svelte.js diff --git a/scripts/build.js b/scripts/build.js index 4692376..f37d3e1 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -1,4 +1,6 @@ import fs from 'fs' +import buildImports from './buildImports.js' +import buildTypes from './buildTypes.js' const folders = { 'src/icons': 'dist/icons', @@ -7,12 +9,6 @@ const folders = { } 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') diff --git a/scripts/buildImports.js b/scripts/buildImports.js new file mode 100644 index 0000000..b7c15c9 --- /dev/null +++ b/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 diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js new file mode 100644 index 0000000..3f1174b --- /dev/null +++ b/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 diff --git a/src/astro.d.ts b/src/astro.d.ts deleted file mode 100644 index 1a7f166..0000000 --- a/src/astro.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare module 'webcoreui/astro' { - import type { AccordionProps } from './components/Accordion/accordion' - - export function Accordion(_props: AccordionProps): any -} diff --git a/src/astro.js b/src/astro.js deleted file mode 100644 index 6d9c81f..0000000 --- a/src/astro.js +++ /dev/null @@ -1,9 +0,0 @@ -import AccordionComponent from './components/Accordion/Accordion.astro' -import ButtonComponent from './components/Button/Button.astro' -import CardComponent from './components/Card/Card.astro' -import IconComponent from './components/Icon/Icon.astro' - -export const Accordion = AccordionComponent -export const Button = ButtonComponent -export const Card = CardComponent -export const Icon = IconComponent diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index e42aec5..f2e5a5d 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -3,7 +3,7 @@ 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) => { @@ -32,3 +32,5 @@ export const Accordion = ({ items }: AccordionProps) => {
) } + +export default Accordion diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 8f3f558..4522d56 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.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 = ({ ) } + +export default Button diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index e69de29..6e5d056 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -0,0 +1,5 @@ +import React from 'react' + +const Card = () =>
+ +export default Card diff --git a/src/components/Card/card.ts b/src/components/Card/card.ts new file mode 100644 index 0000000..3a90b76 --- /dev/null +++ b/src/components/Card/card.ts @@ -0,0 +1 @@ +export type CardProps = {} diff --git a/src/components/Icon/Icon.svelte b/src/components/Icon/Icon.svelte index ffa6606..975b21c 100644 --- a/src/components/Icon/Icon.svelte +++ b/src/components/Icon/Icon.svelte @@ -1,4 +1,4 @@ - -
    +
      {#each items as item, index}
    • { } return ( -
        +
          {items.map((item, index) => (
        • \ No newline at end of file From 1098d7501828b06be96634670e1edf467d7d97ef Mon Sep 17 00:00:00 2001 From: Frontendland Date: Sun, 16 Jun 2024 16:54:33 +0200 Subject: [PATCH 08/11] =?UTF-8?q?=E2=9C=A8=20Add=20Svelte=20+=20React=20ca?= =?UTF-8?q?rd=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + src/components/Accordion/Accordion.astro | 4 +- src/components/Card/Card.astro | 12 +-- src/components/Card/Card.svelte | 36 ++++++++ src/components/Card/Card.tsx | 34 +++++++- src/components/Card/card.ts | 9 +- src/pages/button.astro | 101 +++++++++++++++-------- src/pages/card.astro | 70 ++++++++++------ 8 files changed, 197 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index 5979da5..4d96139 100644 --- a/README.md +++ b/README.md @@ -134,3 +134,4 @@ import { Accordion } from 'webcoreui/react' - [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion) - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button) - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card) +- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon) diff --git a/src/components/Accordion/Accordion.astro b/src/components/Accordion/Accordion.astro index db0b772..87820ad 100644 --- a/src/components/Accordion/Accordion.astro +++ b/src/components/Accordion/Accordion.astro @@ -9,7 +9,7 @@ const { } = Astro.props --- -
            +
              {items.map((item: AccordionProps['items'][0]) => (
            • @@ -26,7 +26,7 @@ const {
            + + + {#if title} + + {title} + + {/if} +
            + {#if compact && !secondary} +
            + {:else} + + {/if} +
            +             + + diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 6e5d056..9e97fb2 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -1,5 +1,37 @@ import React from 'react' +import type { CardProps } from './card' +import './card.scss' -const Card = () =>
            +const Card = ({ + Element = 'section', + title, + TitleTag = 'span', + compact, + className, + secondary, + children, + ...rest +}: CardProps) => { + const classes = [ + 'w-card', + className, + secondary && 'secondary', + 'card' + ].filter(Boolean).join(' ') + + return ( + + {title && ( + {title} + )} +
            + {compact && !secondary + ?
            {children}
            + : children + } +
            +             + ) +} export default Card diff --git a/src/components/Card/card.ts b/src/components/Card/card.ts index 3a90b76..c489b6a 100644 --- a/src/components/Card/card.ts +++ b/src/components/Card/card.ts @@ -1 +1,8 @@ -export type CardProps = {} +export type CardProps = { + element?: string + title?: string + compact?: boolean + className?: string + secondary?: boolean + [key: string]: any +} diff --git a/src/pages/button.astro b/src/pages/button.astro index 8c0fb13..0ea523f 100644 --- a/src/pages/button.astro +++ b/src/pages/button.astro @@ -6,11 +6,25 @@ import Icon from '@components/Icon/Icon.astro' import AstroButton from '@components/Button/Button.astro' import SvelteButton from '@components/Button/Button.svelte' import ReactButton from '@components/Button/Button.tsx' + +const sections = [ + { + title: 'Astro buttons', + component: AstroButton + }, + { + title: 'Svelte buttons', + component: SvelteButton + }, + { + title: 'React buttons', + component: ReactButton + } +] ---

            Button

            -
            Button in Astro @@ -26,45 +40,66 @@ import ReactButton from '@components/Button/Button.tsx' Button in React - + +
            - - Secondary - + {sections.map(section => ( +

            {section.title}

            +
            + + + Secondary + + - - Outline - + + + Outline + + - - Flat - + + + Flat + + - - Disabled - + + + Disabled + + - - - - With Icon - - + + + + With Icon + + - - Info - + + + Info + + - - Success - + + + Success + + - - Warning - + + + Warning + + - - Alert - -
            + + + Alert + + +
            + ))} diff --git a/src/pages/card.astro b/src/pages/card.astro index aa95aff..1f25f03 100644 --- a/src/pages/card.astro +++ b/src/pages/card.astro @@ -2,8 +2,23 @@ import Layout from '@static/Layout.astro' import AstroCard from '@components/Card/Card.astro' -import SvelteButton from '@components/Button/Button.svelte' -import { Button as ReactButton } from '@components/Button/Button.tsx' +import SvelteCard from '@components/Card/Card.svelte' +import ReactCard from '@components/Card/Card.tsx' + +const sections = [ + { + title: 'Astro cards', + component: AstroCard + }, + { + title: 'Svelte cards', + component: SvelteCard + }, + { + title: 'React cards', + component: ReactCard + } +] --- @@ -14,38 +29,43 @@ import { Button as ReactButton } from '@components/Button/Button.tsx' Card component using Astro - + Card component using Svelte - + - + Card component using React - + +
          - - Card with title - + {sections.map(section => ( +

          {section.title}

          +
          + + Card with title + - - Spacious card with title - + + Spacious card with title + - - Spacious card without title - + + Spacious card without title + - - Secondary card with title - + + Secondary card with title + - - Secondary card without title - + + Secondary card without title + - - Card with bold title using strong tag. - -
          + + Card with bold title using strong tag. + +
      + ))} diff --git a/src/components/Badge/Badge.svelte b/src/components/Badge/Badge.svelte new file mode 100644 index 0000000..e8ac191 --- /dev/null +++ b/src/components/Badge/Badge.svelte @@ -0,0 +1,20 @@ + + + + + + + diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx new file mode 100644 index 0000000..0703653 --- /dev/null +++ b/src/components/Badge/Badge.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import type { BadgeProps } from './badge' +import './badge.scss' + +const Badge = ({ theme, onClick, children }: BadgeProps) => { + const classes = [ + 'w-badge', + theme || null, + onClick && 'hover' + ].filter(Boolean).join(' ') + + return ( + + {children} + + ) +} + +export default Badge diff --git a/src/components/Badge/badge.scss b/src/components/Badge/badge.scss new file mode 100644 index 0000000..f3a7eea --- /dev/null +++ b/src/components/Badge/badge.scss @@ -0,0 +1,85 @@ +@import '../../scss/config.scss'; + +.w-badge { + @include Transition(); + padding: 5px 10px; + border-radius: 5px; + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 12px; + background: #FFF; + color: #252525; + + &.hover { + cursor: pointer; + + &:hover { + background: #BBB; + } + + &.secondary:hover { + background: #333; + } + + &.outline:hover { + color: #FFF; + background: transparent; + box-shadow: inset 0px 0px 0px 1px #FFF; + } + + &.flat:hover { + background: #333; + } + + &.info:hover { + background: #48dbfb; + } + + &.success:hover { + background: #1dd1a1; + } + + &.warning:hover { + background: #f7aa61; + } + + &.alert:hover { + background: #ee5253; + } + } + + + &.secondary { + background: #252525; + color: #FFF; + } + + &.outline { + background: #000; + color: #BBB; + box-shadow: inset 0px 0px 0px 1px #BBB; + } + + &.flat { + background: #000; + color: #FFF; + } + + &.info { + background: #0abde3; + } + + &.success { + background: #10ac84; + } + + &.warning { + background: #ff9f43; + } + + &.alert { + background: #e73f40; + color: #fff; + } +} diff --git a/src/components/Badge/badge.ts b/src/components/Badge/badge.ts new file mode 100644 index 0000000..f85feba --- /dev/null +++ b/src/components/Badge/badge.ts @@ -0,0 +1,12 @@ +export type BadgeProps = { + theme?: 'secondary' + | 'outline' + | 'flat' + | 'info' + | 'success' + | 'warning' + | 'alert' + | null + onClick?: () => any + [key: string]: any +} diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss index ba75181..e8a8a9e 100644 --- a/src/components/Button/button.scss +++ b/src/components/Button/button.scss @@ -35,12 +35,12 @@ &.outline { background: #000; - color: #FFF; - box-shadow: inset 0px 0px 0px 1px #FFF; - + color: #BBB; + box-shadow: inset 0px 0px 0px 1px #BBB; + &:hover { - color: #BBB; - box-shadow: inset 0px 0px 0px 1px #BBB; + color: #FFF; + box-shadow: inset 0px 0px 0px 1px #FFF; } } diff --git a/src/pages/badge.astro b/src/pages/badge.astro new file mode 100644 index 0000000..23a9bcc --- /dev/null +++ b/src/pages/badge.astro @@ -0,0 +1,106 @@ +--- +import Layout from '@static/Layout.astro' +import ComponentWrapper from '@static/ComponentWrapper.astro' + +import Icon from '@components/Icon/Icon.astro' +import AstroBadge from '@components/Badge/Badge.astro' +import SvelteBadge from '@components/Badge/Badge.svelte' +import ReactBadge from '@components/Badge/Badge.tsx' + +const sections = [ + { + title: 'Astro badges', + component: AstroBadge + }, + { + title: 'Svelte badges (Interactive)', + component: SvelteBadge, + onClick: () => {} + }, + { + title: 'React badges', + component: ReactBadge + } +] +--- + + +

      Badge

      +
      + + Badge in Astro + + + + + Badge in Svelte + + + + + + Badge in React + + +
      + + {sections.map(section => ( +

      {section.title}

      +
      + + + Primary + + + + + + Secondary + + + + + + Outline + + + + + + Flat + + + + + + + With Icon + + + + + + Info + + + + + + Success + + + + + + Warning + + + + + + Alert + + +
      + ))} +       diff --git a/src/pages/index.astro b/src/pages/index.astro index c51ecdc..2e2d3b7 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,6 +5,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' +import Badge from '@components/Badge/Badge.astro' --- @@ -49,6 +50,12 @@ import Icon from '@components/Icon/Icon.astro'

      Paragraph inside a card

       + + + + + Badge +
From f32345d1f7b3555838a2cc336457ad9befe71efe Mon Sep 17 00:00:00 2001 From: Frontendland Date: Sun, 16 Jun 2024 22:19:38 +0200 Subject: [PATCH 10/11] =?UTF-8?q?=E2=9C=A8=20Add=20example=20page=20for=20?= =?UTF-8?q?icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Icon/Icon.svelte | 6 +-- src/components/Icon/Icon.tsx | 4 +- src/pages/icon.astro | 81 +++++++++++++++++++++++++++++++++ 3 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 src/pages/icon.astro diff --git a/src/components/Icon/Icon.svelte b/src/components/Icon/Icon.svelte index 975b21c..eefc436 100644 --- a/src/components/Icon/Icon.svelte +++ b/src/components/Icon/Icon.svelte @@ -4,16 +4,16 @@ import Github from '../../icons/github.svg?raw' import ArrowDown from '../../icons/arrow-down.svg?raw' - export let type: IconProps['type'] + export let type: IconProps['type'] = '' export let size: IconProps['size'] = 24 - export let color: IconProps['color'] + export let color: IconProps['color'] = '' const iconMap = { 'github': Github, 'arrow-down': ArrowDown } - const icon = iconMap[type] + const icon = iconMap[type as keyof typeof iconMap] .replace('width="24"', `width=${size}`) .replace('height="24"', color ? `height=${size} color=${color}` diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 8437faa..ee235b9 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -14,13 +14,13 @@ const Icon = ({ size = 24, color }: IconProps) => { - const icon = iconMap[type] + const icon = iconMap[type as keyof typeof iconMap] .replace('width="24"', `width=${size}`) .replace('height="24"', color ? `height=${size} color=${color}` : `height=${size}`) - return
+ return } export default Icon diff --git a/src/pages/icon.astro b/src/pages/icon.astro new file mode 100644 index 0000000..c4062bc --- /dev/null +++ b/src/pages/icon.astro @@ -0,0 +1,81 @@ +--- +import Layout from '@static/Layout.astro' +import ComponentWrapper from '@static/ComponentWrapper.astro' + +import AstroIcon from '@components/Icon/Icon.astro' +import SvelteIcon from '@components/Icon/Icon.svelte' +import ReactIcon from '@components/Icon/Icon.tsx' + +const sections = [ + { + title: 'Astro icons', + component: AstroIcon + }, + { + title: 'Svelte icons', + component: SvelteIcon + }, + { + title: 'React icons', + component: ReactIcon + } +] +--- + + +

Icon

+
+ + + + + + + + + + + +
+ + {sections.map(section => ( +

{section.title}

+
+ + + + + + + + + + + + + + + +
+ ))} + From 6c16a194b8c13c1928c10f72ffd05cca706a0826 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Mon, 17 Jun 2024 22:43:31 +0200 Subject: [PATCH 11/11] =?UTF-8?q?=E2=9C=A8=20Add=20Alert=20and=20Condition?= =?UTF-8?q?alWrapper=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 + src/components/Alert/Alert.astro | 64 ++++++++++++++ src/components/Alert/Alert.svelte | 58 +++++++++++++ src/components/Alert/Alert.tsx | 57 +++++++++++++ src/components/Alert/alert.scss | 52 ++++++++++++ src/components/Alert/alert.ts | 13 +++ src/components/Card/Card.astro | 1 - src/components/Card/Card.svelte | 3 +- src/components/Card/Card.tsx | 3 +- src/components/Card/card.scss | 2 +- .../ConditionalWrapper.astro | 17 ++++ .../ConditionalWrapper.svelte | 14 ++++ .../ConditionalWrapper/ConditionalWrapper.tsx | 13 +++ .../ConditionalWrapper/conditionalwrapper.ts | 3 + src/env.d.ts | 2 +- src/icons/alert.svg | 3 + src/icons/check.svg | 4 + src/icons/info.svg | 4 + src/icons/warning.svg | 4 + src/pages/alert.astro | 83 +++++++++++++++++++ src/pages/index.astro | 4 + tsconfig.json | 1 + 22 files changed, 400 insertions(+), 7 deletions(-) create mode 100644 src/components/Alert/Alert.astro create mode 100644 src/components/Alert/Alert.svelte create mode 100644 src/components/Alert/Alert.tsx create mode 100644 src/components/Alert/alert.scss create mode 100644 src/components/Alert/alert.ts create mode 100644 src/components/ConditionalWrapper/ConditionalWrapper.astro create mode 100644 src/components/ConditionalWrapper/ConditionalWrapper.svelte create mode 100644 src/components/ConditionalWrapper/ConditionalWrapper.tsx create mode 100644 src/components/ConditionalWrapper/conditionalwrapper.ts create mode 100644 src/icons/alert.svg create mode 100644 src/icons/check.svg create mode 100644 src/icons/info.svg create mode 100644 src/icons/warning.svg create mode 100644 src/pages/alert.astro diff --git a/README.md b/README.md index 0039fbd..5737cfe 100644 --- a/README.md +++ b/README.md @@ -132,6 +132,8 @@ import { Accordion } from 'webcoreui/react' ## Components - [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) - [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) diff --git a/src/components/Alert/Alert.astro b/src/components/Alert/Alert.astro new file mode 100644 index 0000000..28f042a --- /dev/null +++ b/src/components/Alert/Alert.astro @@ -0,0 +1,64 @@ +--- +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 warning from '../../icons/warning.svg?raw' +import alert from '../../icons/alert.svg?raw' + +interface Props extends AlertProps {} + +const iconMap = { + info, + success, + warning, + alert +} + +const { + element = 'section', + title, + titleTag = 'strong', + className, + theme, + ...rest +} = Astro.props + +const Component = element +const Title = titleTag +const hasCustomIcon = Astro.slots.has('icon') + +const classes = [ + 'w-alert', + (!hasCustomIcon && !theme) && 'col', + theme, + className +].filter(Boolean).join(' ') + +const props = { + class: classes +} +--- + + + + + {!hasCustomIcon && theme && } + + +
+ children +
+ {title && ( + {title} + )} +
+ +
+ + + + diff --git a/src/components/Alert/Alert.svelte b/src/components/Alert/Alert.svelte new file mode 100644 index 0000000..916a556 --- /dev/null +++ b/src/components/Alert/Alert.svelte @@ -0,0 +1,58 @@ + + + + + + {#if !hasCustomIcon && theme} + {@html iconMap[theme]} + {/if} + + + {#if title} + + {title} + + {/if} +
+ +
+ + + + diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx new file mode 100644 index 0000000..b34fada --- /dev/null +++ b/src/components/Alert/Alert.tsx @@ -0,0 +1,57 @@ +import React from 'react' +import type { AlertProps } from './alert' +import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx' + +import info from '../../icons/info.svg?raw' +import success from '../../icons/check.svg?raw' +import warning from '../../icons/warning.svg?raw' +import alert from '../../icons/alert.svg?raw' + +import './alert.scss' + +const iconMap = { + info, + success, + warning, + alert +} + +const Alert = ({ + Element = 'section', + title, + TitleTag = 'strong', + className, + theme, + children, + icon, + ...rest +}: AlertProps & { icon?: any }) => { + const classes = [ + 'w-alert', + (!icon && !theme) && 'col', + theme, + className + ].filter(Boolean).join(' ') + + return ( + + {icon && icon} + {!icon && theme &&
} + + ( +
+ {children} +
+ )}> + {title && ( + {title} + )} +
+ {children} +
+ + + ) +} + +export default Alert diff --git a/src/components/Alert/alert.scss b/src/components/Alert/alert.scss new file mode 100644 index 0000000..bc1bf0d --- /dev/null +++ b/src/components/Alert/alert.scss @@ -0,0 +1,52 @@ +@import '../../scss/config.scss'; + +.w-alert { + border: 1px solid #252525; + border-radius: 5px; + padding: 15px; + display: flex; + + &.col { + flex-direction: column; + } + + &:not(.col) { + gap: 10px; + } + + &.info { + border: 1px solid #0abde3; + color: #0abde3; + } + + &.success { + border: 1px solid #1dd1a1; + color: #1dd1a1; + } + + &.warning { + border: 1px solid #ff9f43; + color: #ff9f43; + } + + &.alert { + border: 1px solid #e73f40; + color: #e73f40; + } + + svg { + width: 20px; + height: 20px; + margin-top: 1px; + } + + .alert-title { + display: block; + margin-bottom: 5px; + } + + .alert-body { + font-size: 16px; + color: #BBB; + } +} diff --git a/src/components/Alert/alert.ts b/src/components/Alert/alert.ts new file mode 100644 index 0000000..5b87fac --- /dev/null +++ b/src/components/Alert/alert.ts @@ -0,0 +1,13 @@ +export type AlertProps = { + element?: string + title?: string | null + titleTag?: string + icon?: string | null + className?: string | null + theme?: 'info' + | 'success' + | 'warning' + | 'alert' + | null + [key: string]: any +} diff --git a/src/components/Card/Card.astro b/src/components/Card/Card.astro index 4bada67..e531a9a 100644 --- a/src/components/Card/Card.astro +++ b/src/components/Card/Card.astro @@ -17,7 +17,6 @@ const classes = [ 'w-card', className, secondary && 'secondary', - 'card' ].filter(Boolean).join(' ') const props = { diff --git a/src/components/Card/Card.svelte b/src/components/Card/Card.svelte index 621344a..03860a9 100644 --- a/src/components/Card/Card.svelte +++ b/src/components/Card/Card.svelte @@ -11,8 +11,7 @@ const classes = [ 'w-card', className, - secondary && 'secondary', - 'card' + secondary && 'secondary' ].filter(Boolean).join(' ') diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 9e97fb2..55d7818 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -15,8 +15,7 @@ const Card = ({ const classes = [ 'w-card', className, - secondary && 'secondary', - 'card' + secondary && 'secondary' ].filter(Boolean).join(' ') return ( diff --git a/src/components/Card/card.scss b/src/components/Card/card.scss index 50f5664..9b545a6 100644 --- a/src/components/Card/card.scss +++ b/src/components/Card/card.scss @@ -1,4 +1,4 @@ -.card { +.w-card { border: 1px solid #252525; border-radius: 5px; display: flex; diff --git a/src/components/ConditionalWrapper/ConditionalWrapper.astro b/src/components/ConditionalWrapper/ConditionalWrapper.astro new file mode 100644 index 0000000..a0906d9 --- /dev/null +++ b/src/components/ConditionalWrapper/ConditionalWrapper.astro @@ -0,0 +1,17 @@ +--- +import type { ConditionalWrapperProps } from './conditionalwrapper' + +interface Props extends ConditionalWrapperProps {} + +const { condition } = Astro.props + +const wrapper = await Astro.slots.render('wrapper') +const children = await Astro.slots.render('default') +const wrapped = wrapper?.replace('children', children) + +if (!Astro.slots.has('wrapper')) { + console.error('Missing wrapper. Add slot="wrapper" to one of the elements.') +} +--- + + diff --git a/src/components/ConditionalWrapper/ConditionalWrapper.svelte b/src/components/ConditionalWrapper/ConditionalWrapper.svelte new file mode 100644 index 0000000..cce79f4 --- /dev/null +++ b/src/components/ConditionalWrapper/ConditionalWrapper.svelte @@ -0,0 +1,14 @@ + + +{#if condition} + + + +{:else} + +{/if} diff --git a/src/components/ConditionalWrapper/ConditionalWrapper.tsx b/src/components/ConditionalWrapper/ConditionalWrapper.tsx new file mode 100644 index 0000000..3a0b2bf --- /dev/null +++ b/src/components/ConditionalWrapper/ConditionalWrapper.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import type { ConditionalWrapperProps } from './conditionalwrapper' + +type ExtendedConditionalWrapperProps = { + condition: ConditionalWrapperProps['condition'] + wrapper: (_: React.ReactNode) => any + children: React.ReactNode +}; + +const ConditionalWrapper = ({ condition, wrapper, children }: ExtendedConditionalWrapperProps) => + condition ? wrapper(children) : children + +export default ConditionalWrapper diff --git a/src/components/ConditionalWrapper/conditionalwrapper.ts b/src/components/ConditionalWrapper/conditionalwrapper.ts new file mode 100644 index 0000000..82b2747 --- /dev/null +++ b/src/components/ConditionalWrapper/conditionalwrapper.ts @@ -0,0 +1,3 @@ +export type ConditionalWrapperProps = { + condition: boolean +} diff --git a/src/env.d.ts b/src/env.d.ts index 8c34fb4..f964fe0 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1 +1 @@ -/// \ No newline at end of file +/// diff --git a/src/icons/alert.svg b/src/icons/alert.svg new file mode 100644 index 0000000..49e4c73 --- /dev/null +++ b/src/icons/alert.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/check.svg b/src/icons/check.svg new file mode 100644 index 0000000..f5a1876 --- /dev/null +++ b/src/icons/check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/info.svg b/src/icons/info.svg new file mode 100644 index 0000000..b5d7377 --- /dev/null +++ b/src/icons/info.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/warning.svg b/src/icons/warning.svg new file mode 100644 index 0000000..23974a0 --- /dev/null +++ b/src/icons/warning.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/pages/alert.astro b/src/pages/alert.astro new file mode 100644 index 0000000..39f59d8 --- /dev/null +++ b/src/pages/alert.astro @@ -0,0 +1,83 @@ +--- +import Layout from '@static/Layout.astro' + +import Icon from '@components/Icon/Icon.astro' +import AstroAlert from '@components/Alert/Alert.astro' +import SvelteAlert from '@components/Alert/Alert.svelte' +import ReactAlert from '@components/Alert/Alert.tsx' + +const sections = [ + { + title: 'Astro alerts', + component: AstroAlert + }, + { + title: 'Svelte alerts', + component: SvelteAlert + }, + { + title: 'React alerts', + component: ReactAlert + } +] +--- + + +

Alert

+
+ + Alert in Astro + + + + Alert in Svelte + + + + Alert in React + +
+ + {sections.map(section => ( +

{section.title}

+
+ + Alert with only text. + + + + Alert with text and title. + + + + Alert with emoji in title + + + + Predefined info theme alert. + + + + Predefined success theme alert. + + + + Predefined warning theme alert. + + + + Predefined alert theme alert. + + + + + Alert element with custom icon. + + + + + Alert element with custom theme and icon. + +
+ ))} + diff --git a/src/pages/index.astro b/src/pages/index.astro index 2e2d3b7..0eb7320 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -6,6 +6,7 @@ import Button from '@components/Button/Button.astro' import Accordion from '@components/Accordion/Accordion.astro' import Icon from '@components/Icon/Icon.astro' import Badge from '@components/Badge/Badge.astro' +import Alert from '@components/Alert/Alert.astro' --- @@ -56,6 +57,9 @@ import Badge from '@components/Badge/Badge.astro' Badge + + You can create alert boxes. +
diff --git a/tsconfig.json b/tsconfig.json index 697802d..fb48aa1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,7 @@ "extends": "astro/tsconfigs/strict", "compilerOptions": { "baseUrl": ".", + "types": ["vite/client"], "paths": { "@components/*": ["src/components/*"], "@static/*": ["src/static/*"]