diff --git a/.vscode/settings.json b/.vscode/settings.json index ac20139..4408657 100644 --- a/.vscode/settings.json +++ b/.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": {} } diff --git a/README.md b/README.md index 57f5fb9..bdc9f08 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@

> [!IMPORTANT] -> This library is still in early development. New changes can break existing functionality, and no functionality should be considered final. The library will be considered stable once it reaches v1.0. +> This library is still in early development. New changes can break existing functionality, and no functionality should be considered final at this stage. The library will be considered stable once it reaches v1.0. --- ## Table of Contents @@ -39,7 +39,7 @@ ## Documentation -Full documentation coming soon on [webcoreui.dev/docs](https://webcoreui.dev/docs). +Full documentation available on [webcoreui.dev](https://webcoreui.dev). ## Getting Started @@ -101,15 +101,39 @@ The `Setup` mixin can also accept the following options: | `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. | | `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). | | `includeElementStyles` | `true` | Adds styles for native HTML elements, such as `code`, `pre`, or `ul`. +| `includeTooltip` | `true` | Adds styles for using tooltips. +| `includeScrollbarStyles` | `true` | Adds styles for scrollbars. -Default component styles can also be changed by overriding the following CSS variables: +Default component styles can be changed by overriding the following CSS variables: ```css -:root { - --w-avatar-border: #000; - --w-rating-color: #FFF; - --w-rating-empty-color: #BBB; +body { + --w-avatar-border: var(--w-color-primary-70); + --w-checkbox-color: var(--w-color-primary); + --w-progress-color: var(--w-color-primary); + --w-progress-background: var(--w-color-primary-50); + --w-progress-stripe-light: var(--w-color-primary); + --w-progress-stripe-dark: var(--w-color-primary-10); + --w-radio-color: var(--w-color-primary); + --w-rating-color: var(--w-color-primary); + --w-rating-empty-color: var(--w-color-primary); + --w-rating-empty-background: var(--w-color-primary-70); --w-rating-size: 18px; + --w-scrollbar-bg: var(--w-color-primary-60); + --w-scrollbar-fg: var(--w-color-primary-50); + --w-spinner-color: var(--w-color-primary); + --w-spinner-width: 2px; + --w-spinner-speed: 2s; + --w-spinner-size: 30px; + --w-spinner-dash: 8; + --w-switch-off-color: var(--w-color-primary-50); + --w-switch-on-color: var(--w-color-primary); + --w-theme-switcher-size: 20px; + --w-timeline-color: var(--w-color-primary-50); + --w-timeline-text-color: var(--w-color-primary); + --w-timeline-counter: decimal; + --w-tooltip-background: var(--w-color-primary); + --w-tooltip-color: var(--w-color-primary-70); } ``` @@ -145,6 +169,7 @@ import { Accordion } from 'webcoreui/react' - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper) - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon) - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input) +- [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu) - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress) - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio) - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating) @@ -152,6 +177,7 @@ import { Accordion } from 'webcoreui/react' - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch) - [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table) - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs) +- [ThemeSwitcher](https://github.com/Frontendland/webcoreui/tree/main/src/components/ThemeSwitcher) - [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro) - [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast) - [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro) diff --git a/astro.config.mjs b/astro.config.mjs index 12eb02b..86f16cf 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -6,6 +6,7 @@ import react from '@astrojs/react' export default defineConfig({ outDir: 'build', trailingSlash: 'never', + output: 'server', integrations: [ svelte(), react() diff --git a/package.json b/package.json index a684fe3..b519c78 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "webcoreui", "type": "module", - "version": "0.0.10", + "version": "0.0.11", "scripts": { "dev": "astro dev", "build": "astro check && astro build", @@ -21,10 +21,12 @@ "typescript": "5.4.5" }, "exports": { + ".": "./index.js", "./astro": "./astro.js", "./svelte": "./svelte.js", "./react": "./react.js", "./styles": "./scss/index.scss", + "./icons": "./icons.js", "./config": "./scss/config.scss" }, "files": [ diff --git a/public/img/banner.png b/public/img/banner.png index 00d6800..1399128 100644 Binary files a/public/img/banner.png and b/public/img/banner.png differ diff --git a/public/img/logo-light.png b/public/img/logo-light.png new file mode 100644 index 0000000..f23c833 Binary files /dev/null and b/public/img/logo-light.png differ diff --git a/public/img/logo.png b/public/img/logo.png index a5573fc..1b7c3af 100644 Binary files a/public/img/logo.png and b/public/img/logo.png differ diff --git a/public/img/logo.svg b/public/img/logo.svg new file mode 100644 index 0000000..a0b9d4e --- /dev/null +++ b/public/img/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/scripts/build.js b/scripts/build.js index db8fa06..2df9444 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -1,5 +1,5 @@ import fs from 'fs' -import { buildImports, buildUtilImports } from './buildImports.js' +import { buildImports, buildUtilImports, buildIconImports } from './buildImports.js' import buildTypes from './buildTypes.js' const folders = { @@ -41,10 +41,13 @@ fs.writeFileSync('dist/astro.js', buildImports('astro')) fs.writeFileSync('dist/svelte.js', buildImports('svelte')) fs.writeFileSync('dist/react.js', buildImports('tsx')) +fs.writeFileSync('dist/index.js', buildUtilImports()) +fs.writeFileSync('dist/icons.js', buildIconImports()) + fs.writeFileSync('dist/astro.d.ts', buildTypes('astro')) fs.writeFileSync('dist/svelte.d.ts', buildTypes('svelte')) fs.writeFileSync('dist/react.d.ts', buildTypes('react')) +fs.writeFileSync('dist/icons.d.ts', buildTypes('icons')) -fs.writeFileSync('dist/index.js', buildUtilImports()) console.log('✅ Package built') diff --git a/scripts/buildImports.js b/scripts/buildImports.js index bb5ad98..7618c5f 100644 --- a/scripts/buildImports.js +++ b/scripts/buildImports.js @@ -15,3 +15,10 @@ export const buildUtilImports = () => { return utils.map(util => `export * from './utils/${util}'`).join('\n') } + +export const buildIconImports = () => { + const icons = fs.readdirSync('src/icons') + const camelize = string => string.replace(/-./g, x => x[1].toUpperCase()).split('.')[0] + + return icons.map(icon => `export { default as ${camelize(icon)} } from './icons/${icon}?raw'`).join('\n') +} diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js index b3e94e6..ec59c18 100644 --- a/scripts/buildTypes.js +++ b/scripts/buildTypes.js @@ -20,14 +20,29 @@ const buildTypes = type => { } if (type === 'svelte') { + const getTypeName = component => { + const componentsWithSvelteSpecificTypes = [ + 'Badge', + 'Button', + 'Checkbox', + 'Input', + 'Radio', + 'Switch' + ] + + 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')} } `) @@ -64,6 +79,19 @@ const buildTypes = type => { } `) } + + if (type === 'icons') { + const icons = fs.readdirSync('src/icons') + const camelize = string => string.replace(/-./g, x => x[1].toUpperCase()).split('.')[0] + + return format(` + declare module 'webcoreui/${type}' { + ${icons.map(icon => { + return `export const ${camelize(icon)}: string` + }).join('\n\t')} + } + `) + } } export default buildTypes diff --git a/scripts/createComponent.js b/scripts/createComponent.js index 7db50aa..701ed62 100644 --- a/scripts/createComponent.js +++ b/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,7 +33,7 @@ const templates = { } = Astro.props const classes = [ - 'w-${lowerCaseComponent}', + styles.${lowerCaseComponent}, className ] --- @@ -41,29 +41,32 @@ const templates = { svelte: ` `, react: ` import React from 'react' import type { ${component}Props } from './${lowerCaseComponent}' - import './${lowerCaseComponent}.scss' + import styles from './${lowerCaseComponent}.module.scss' + import { classNames } from '../../utils/classNames' const ${component} = ({ className }: ${component}Props) => { - const classes = [ - 'w-${lowerCaseComponent}', + const classes = classNames([ + styles.${lowerCaseComponent}, className - ].filter(Boolean).join(' ') + ]) return
${component}
} @@ -78,7 +81,7 @@ const templates = { styles: ` @import '../../scss/config.scss'; - .w-${lowerCaseComponent} { + .${lowerCaseComponent} { } `, @@ -133,7 +136,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}.`) diff --git a/src/components/Accordion/Accordion.astro b/src/components/Accordion/Accordion.astro index 76d1ca8..eb4dfb6 100644 --- a/src/components/Accordion/Accordion.astro +++ b/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 --- -