diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..425ca3d --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,31 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Environment (please complete the following information):** + - Browser [e.g. chrome, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.gitignore b/.gitignore index 6d4c0aa..90037c0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ # build output -dist/ +dist +build # generated types .astro/ diff --git a/README.md b/README.md index 8a8a2b9..9627883 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ Full documentation coming soon on [webcoreui.dev/docs](https://webcoreui.dev/doc ## Getting Started -Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems. +Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems. The easiest way to get started is to clone the repository and run `npm run dev` to start building your pages with the components available. ### Prerequisites @@ -79,15 +79,7 @@ yarn add webcoreui ### Setup -1. Add the following to your `tsconfig.json` to include TypeScript types: - -```json -{ - "include": ["webcoreui"] -} -``` - -2. Setup default styles and fonts by calling the following in your global SCSS file: +Setup default styles and fonts by calling the following in your global SCSS file: ```scss @import 'webcoreui/styles'; @@ -152,6 +144,12 @@ import { Accordion } from 'webcoreui/react' - [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox) - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper) - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon) +- [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) +- [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner) - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch) +- [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs) +- [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/package.json b/package.json index 9ab943e..a684fe3 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "webcoreui", "type": "module", - "version": "0.0.8", + "version": "0.0.10", "scripts": { "dev": "astro dev", "build": "astro check && astro build", @@ -31,12 +31,14 @@ "components", "icons", "scss", + "utils", "astro.d.ts", "astro.js", "svelte.d.ts", "svelte.js", "react.d.ts", "react.js", + "index.js", "README.md", "LICENSE" ], diff --git a/scripts/build.js b/scripts/build.js index f37d3e1..db8fa06 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -1,11 +1,12 @@ import fs from 'fs' -import buildImports from './buildImports.js' +import { buildImports, buildUtilImports } from './buildImports.js' import buildTypes from './buildTypes.js' const folders = { 'src/icons': 'dist/icons', 'src/components': 'dist/components', - 'src/scss': 'dist/scss' + 'src/scss': 'dist/scss', + 'src/utils': 'dist/utils' } const files = { @@ -44,4 +45,6 @@ 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/index.js', buildUtilImports()) + console.log('βœ… Package built') diff --git a/scripts/buildImports.js b/scripts/buildImports.js index b7c15c9..bb5ad98 100644 --- a/scripts/buildImports.js +++ b/scripts/buildImports.js @@ -1,6 +1,6 @@ import fs from 'fs' -const buildImports = extension => { +export const buildImports = extension => { const components = fs.readdirSync('src/components') return components.map(component => { @@ -10,4 +10,8 @@ const buildImports = extension => { + components.map(component => `export const ${component} = ${component}Component`).join('\n') } -export default buildImports +export const buildUtilImports = () => { + const utils = fs.readdirSync('src/utils') + + return utils.map(util => `export * from './utils/${util}'`).join('\n') +} diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js index 3f1174b..a76389a 100644 --- a/scripts/buildTypes.js +++ b/scripts/buildTypes.js @@ -1,19 +1,68 @@ import fs from 'fs' +const format = template => template.trim().replace(new RegExp('^[ \\t]{12}', 'gm'), '') + 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')} + if (type === 'astro') { + return format(` + ${components.map(component => { + return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'` + }).join('\n')} + + declare module 'webcoreui/${type}' { + ${components.map(component => { + return `export function ${component}(_props: ${component}Props): any` + }).join('\n\t')} + } + `) + } - ${components.map(component => { - return `export function ${component}(_props: ${component}Props): any` - }).join('\n\t')} -} - ` + if (type === 'svelte') { + return format(` + ${components.map(component => { + return `import type { ${component}Props } from './components/${component}/${component.toLowerCase()}'` + }).join('\n')} + + declare module 'webcoreui/${type}' { + ${components.map(component => { + return `export function ${component}(_props: ${component}Props): any` + }).join('\n\t')} + } + `) + } + + if (type === 'react') { + const getTypeName = component => { + const componentsWithoutReactSpecificTypes = [ + 'Accordion', + 'Avatar', + 'Icon', + 'Rating', + 'Spinner', + 'TimelineItem', + 'Progress' + ] + + return componentsWithoutReactSpecificTypes.includes(component) + ? `${component}Props` + : `React${component}Props` + } + + return format(` + import { FC } from 'react' + ${components.map(component => { + return `import type { ${getTypeName(component)} } from './components/${component}/${component.toLowerCase()}'` + }).join('\n')} + + declare module 'webcoreui/${type}' { + ${components.map(component => { + return `export const ${component}: FC<${getTypeName(component)}>` + }).join('\n\t')} + } + `) + } } export default buildTypes diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index bdc0a76..bd039ad 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -1,5 +1,5 @@ import React from 'react' -import type { AlertProps } from './alert' +import type { ReactAlertProps } from './alert' import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx' import info from '../../icons/info.svg?raw' @@ -16,13 +16,6 @@ const iconMap = { alert } -type ReactAlertProps = { - Element?: keyof JSX.IntrinsicElements - TitleTag?: keyof JSX.IntrinsicElements - children: React.ReactNode - icon?: string -} & AlertProps - const Alert = ({ Element = 'section', title, diff --git a/src/components/Alert/alert.scss b/src/components/Alert/alert.scss index bc1bf0d..90c1fea 100644 --- a/src/components/Alert/alert.scss +++ b/src/components/Alert/alert.scss @@ -48,5 +48,6 @@ .alert-body { font-size: 16px; color: #BBB; + line-height: 1.5; } } diff --git a/src/components/Alert/alert.ts b/src/components/Alert/alert.ts index d76a8af..04bfcef 100644 --- a/src/components/Alert/alert.ts +++ b/src/components/Alert/alert.ts @@ -10,3 +10,9 @@ export type AlertProps = { | 'alert' | null } + +export type ReactAlertProps = { + Element?: keyof JSX.IntrinsicElements + TitleTag?: keyof JSX.IntrinsicElements + children: React.ReactNode +} & Omit diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 74e5ed9..9a08a40 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -33,6 +33,7 @@ const Avatar = ({ > {img.map((img, index) => ( {Array.isArray(alt) + diff --git a/src/components/Badge/Badge.svelte b/src/components/Badge/Badge.svelte index d99a169..b5b0d5b 100644 --- a/src/components/Badge/Badge.svelte +++ b/src/components/Badge/Badge.svelte @@ -12,6 +12,6 @@ ].filter(Boolean).join(' ') - + diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index d30722f..f8c9788 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -1,12 +1,8 @@ import React from 'react' -import type { BadgeProps } from './badge' +import type { ReactBadgeProps } from './badge' import './badge.scss' -type ReactBadgeProps = { - children: React.ReactNode -} & BadgeProps - -const Badge = ({ theme, onClick, children }: ReactBadgeProps) => { +const Badge = ({ theme, onClick, children, ...rest }: ReactBadgeProps) => { const classes = [ 'w-badge', theme || null, @@ -14,7 +10,7 @@ const Badge = ({ theme, onClick, children }: ReactBadgeProps) => { ].filter(Boolean).join(' ') return ( - + {children} ) diff --git a/src/components/Badge/badge.ts b/src/components/Badge/badge.ts index fe737b2..63b8ec6 100644 --- a/src/components/Badge/badge.ts +++ b/src/components/Badge/badge.ts @@ -9,3 +9,7 @@ export type BadgeProps = { | null onClick?: () => any } + +export type ReactBadgeProps = { + children: React.ReactNode +} & BadgeProps diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 497eb76..35a2fe5 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,11 +1,7 @@ import React from 'react' -import type { ButtonProps } from './button' +import type { ReactButtonProps } from './button' import './button.scss' -type ReactButtonProps = { - children: React.ReactNode -} & ButtonProps - const Button = ({ theme, bold, diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss index e8a8a9e..83f5380 100644 --- a/src/components/Button/button.scss +++ b/src/components/Button/button.scss @@ -9,7 +9,6 @@ align-items: center; gap: 5px; font-size: 16px; - font-family: Regular; cursor: pointer; border: 0; background: #FFF; diff --git a/src/components/Button/button.ts b/src/components/Button/button.ts index 9b9fb42..2b0131a 100644 --- a/src/components/Button/button.ts +++ b/src/components/Button/button.ts @@ -9,6 +9,10 @@ export type ButtonProps = { | null bold?: boolean href?: string - target?: string onClick?: () => any + [key: string]: any } + +export type ReactButtonProps = { + children: React.ReactNode +} & ButtonProps diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 25f10dc..160a22c 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -1,13 +1,7 @@ import React from 'react' -import type { CardProps } from './card' +import type { ReactCardProps } from './card' import './card.scss' -type ReactCardProps = { - Element?: keyof JSX.IntrinsicElements - TitleTag?: keyof JSX.IntrinsicElements - children: React.ReactNode -} & CardProps - const Card = ({ Element = 'section', title, diff --git a/src/components/Card/card.scss b/src/components/Card/card.scss index 9b545a6..a06dc85 100644 --- a/src/components/Card/card.scss +++ b/src/components/Card/card.scss @@ -22,6 +22,7 @@ .card-body { padding: 20px; height: 100%; + position: relative; &.compact { background: #111; diff --git a/src/components/Card/card.ts b/src/components/Card/card.ts index 34c6708..71af3eb 100644 --- a/src/components/Card/card.ts +++ b/src/components/Card/card.ts @@ -7,3 +7,9 @@ export type CardProps = { secondary?: boolean [key: string]: any } + +export type ReactCardProps = { + Element?: keyof JSX.IntrinsicElements + TitleTag?: keyof JSX.IntrinsicElements + children: React.ReactNode +} & Omit diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 55d80d9..829c745 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,15 +1,11 @@ import React from 'react' -import type { CheckboxProps } from './checkbox' +import type { ReactCheckboxProps } from './checkbox' import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx' import check from '../../icons/check.svg?raw' import './checkbox.scss' -type ReactCheckboxProps = { - onClick?: () => any -} & CheckboxProps - const Checkbox = ({ checked, label, @@ -41,7 +37,7 @@ const Checkbox = ({ > diff --git a/src/components/Checkbox/checkbox.ts b/src/components/Checkbox/checkbox.ts index 51b073f..1231b6e 100644 --- a/src/components/Checkbox/checkbox.ts +++ b/src/components/Checkbox/checkbox.ts @@ -6,3 +6,7 @@ export type CheckboxProps = { boxed?: boolean color?: string } + +export type ReactCheckboxProps = { + onClick?: (key: any) => any +} & CheckboxProps diff --git a/src/components/ConditionalWrapper/ConditionalWrapper.tsx b/src/components/ConditionalWrapper/ConditionalWrapper.tsx index 3a0b2bf..6208004 100644 --- a/src/components/ConditionalWrapper/ConditionalWrapper.tsx +++ b/src/components/ConditionalWrapper/ConditionalWrapper.tsx @@ -1,13 +1,7 @@ import React from 'react' -import type { ConditionalWrapperProps } from './conditionalwrapper' +import type { ReactConditionalWrapperProps } from './conditionalwrapper' -type ExtendedConditionalWrapperProps = { - condition: ConditionalWrapperProps['condition'] - wrapper: (_: React.ReactNode) => any - children: React.ReactNode -}; - -const ConditionalWrapper = ({ condition, wrapper, children }: ExtendedConditionalWrapperProps) => +const ConditionalWrapper = ({ condition, wrapper, children }: ReactConditionalWrapperProps) => condition ? wrapper(children) : children export default ConditionalWrapper diff --git a/src/components/ConditionalWrapper/conditionalwrapper.ts b/src/components/ConditionalWrapper/conditionalwrapper.ts index 82b2747..570f0d9 100644 --- a/src/components/ConditionalWrapper/conditionalwrapper.ts +++ b/src/components/ConditionalWrapper/conditionalwrapper.ts @@ -1,3 +1,8 @@ export type ConditionalWrapperProps = { condition: boolean } + +export type ReactConditionalWrapperProps = { + wrapper: (_: React.ReactNode) => any + children: React.ReactNode +} & ConditionalWrapperProps diff --git a/src/components/Progress/Progress.astro b/src/components/Progress/Progress.astro new file mode 100644 index 0000000..a9545b4 --- /dev/null +++ b/src/components/Progress/Progress.astro @@ -0,0 +1,40 @@ +--- +import type { ProgressProps } from './progress' +import './progress.scss' + +interface Props extends ProgressProps {} + +const { + value, + size, + label, + color, + background, + square, + striped, + stripeLight, + stripeDark, + className +} = Astro.props + +const classes = [ + 'w-progress', + size, + striped && 'striped', + square && 'square', + className +] + +const styles = [ + color && `--w-progress-color: ${color};`, + background && `--w-progress-background: ${background};`, + stripeLight && `--w-progress-stripe-light: ${stripeLight};`, + stripeDark && `--w-progress-stripe-dark: ${stripeDark};` +].filter(Boolean).join('') +--- + +
+
+ {label && `${value}%`} +
+
diff --git a/src/components/Progress/Progress.svelte b/src/components/Progress/Progress.svelte new file mode 100644 index 0000000..acfcb9f --- /dev/null +++ b/src/components/Progress/Progress.svelte @@ -0,0 +1,38 @@ + + +
+
+ {#if label} + {`${value}%`} + {/if} +
+
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx new file mode 100644 index 0000000..44696c6 --- /dev/null +++ b/src/components/Progress/Progress.tsx @@ -0,0 +1,47 @@ +import React from 'react' +import type { ProgressProps } from './progress' + +import './progress.scss' + +const Progress = ({ + value, + size, + label, + color, + background, + square, + striped, + stripeLight, + stripeDark, + className +}: ProgressProps) => { + const classes = [ + 'w-progress', + size, + striped && 'striped', + square && 'square', + className + ].filter(Boolean).join(' ') + + const styles = { + ...(color && { '--w-progress-color': color }), + ...(background && { '--w-progress-background': background }), + ...(stripeLight && { '--w-progress-stripe-light': stripeLight }), + ...(stripeDark && { '--w-progress-stripe-dark': stripeDark }), + } as React.CSSProperties + + const percent = { + '--w-progress-width': `${value}%` + } as React.CSSProperties + + return ( +
+
+ {label && `${value}%`} +
+
+ ) +} + +export default Progress + diff --git a/src/components/Progress/progress.scss b/src/components/Progress/progress.scss new file mode 100644 index 0000000..83aac40 --- /dev/null +++ b/src/components/Progress/progress.scss @@ -0,0 +1,66 @@ +@import '../../scss/config.scss'; + +.w-progress { + width: 100%; + height: 10px; + background: var(--w-progress-background); + border-radius: 20px; + overflow: hidden; + color: var(--w-progress-background); + font-family: Bold; + font-size: 10px; + + &.medium { + height: 15px; + font-size: 12px; + } + + &.large { + height: 20px; + font-size: 14px; + } + + &.square { + border-radius: 2px; + + .progress { + border-radius: 2px; + } + } + + &.striped { + + .progress { + background-size: 10px 10px; + background-image: linear-gradient( + -45deg, + var(--w-progress-stripe-light) 25%, + var(--w-progress-stripe-dark) 25%, + var(--w-progress-stripe-dark) 50%, + var(--w-progress-stripe-light) 50%, + var(--w-progress-stripe-light) 75%, + var(--w-progress-stripe-dark) 75%, + var(--w-progress-stripe-dark) + ); + } + + &.medium .progress { + background-size: 15px 15px; + } + + &.large .progress { + background-size: 20px 20px; + } + } + + .progress { + @include Transition(width); + width: var(--w-progress-width); + height: 100%; + background: var(--w-progress-color); + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + } +} diff --git a/src/components/Progress/progress.ts b/src/components/Progress/progress.ts new file mode 100644 index 0000000..f53c67c --- /dev/null +++ b/src/components/Progress/progress.ts @@ -0,0 +1,12 @@ +export type ProgressProps = { + value: number + size?: 'medium' | 'large' | null + label?: boolean + color?: string + background?: string + square?: boolean + striped?: boolean + stripeLight?: string + stripeDark?: string + className?: string +} diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx index bdf88e0..525e44d 100644 --- a/src/components/Radio/Radio.tsx +++ b/src/components/Radio/Radio.tsx @@ -1,14 +1,10 @@ import React from 'react' -import type { RadioProps } from './radio' +import type { ReactRadioProps } from './radio' import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx' import './radio.scss' -type ReactRadioProps = { - onChange?: () => any -} & RadioProps - const Radio = ({ name, items, @@ -46,7 +42,7 @@ const Radio = ({ type="radio" name={name} value={item.value} - checked={item.selected} + defaultChecked={item.selected} disabled={item.disabled} onChange={onChange} /> diff --git a/src/components/Radio/radio.ts b/src/components/Radio/radio.ts index 2e3d764..d37f5df 100644 --- a/src/components/Radio/radio.ts +++ b/src/components/Radio/radio.ts @@ -11,3 +11,7 @@ export type RadioProps = { inline?: boolean className?: string } + +export type ReactRadioProps = { + onChange?: (key: any) => any +} & RadioProps diff --git a/src/components/Spinner/Spinner.astro b/src/components/Spinner/Spinner.astro new file mode 100644 index 0000000..7530049 --- /dev/null +++ b/src/components/Spinner/Spinner.astro @@ -0,0 +1,42 @@ +--- +import type { SpinnerProps } from './spinner' +import './spinner.scss' + +interface Props extends SpinnerProps {} + +const { + color, + width, + speed, + size, + dashArray, +} = Astro.props + +const classes = [ + 'w-spinner', + dashArray && 'dashed' +] + +const styles = [ + color && `--w-spinner-color: ${color};`, + width && `--w-spinner-width: ${width}px;`, + speed && `--w-spinner-speed: ${speed}s;`, + size && `--w-spinner-size: ${size}px;`, + dashArray && `--w-spinner-dash: ${dashArray}`, +].filter(Boolean).join(' ') +--- + + + + diff --git a/src/components/Spinner/Spinner.svelte b/src/components/Spinner/Spinner.svelte new file mode 100644 index 0000000..1d31ff3 --- /dev/null +++ b/src/components/Spinner/Spinner.svelte @@ -0,0 +1,38 @@ + + + + + diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx new file mode 100644 index 0000000..ccb6cb3 --- /dev/null +++ b/src/components/Spinner/Spinner.tsx @@ -0,0 +1,44 @@ +import React from 'react' +import type { SpinnerProps } from './spinner' + +import './spinner.scss' + +const Spinner = ({ + color, + width, + speed, + size, + dashArray +}: SpinnerProps) => { + const classes = [ + 'w-spinner', + dashArray && 'dashed' + ].filter(Boolean).join(' ') + + const styles = { + ...(color && { '--w-spinner-color': color }), + ...(width && { '--w-spinner-width': `${width}px;` }), + ...(speed && { '--w-spinner-speed': `${speed}s;` }), + ...(size && { '--w-spinner-size': `${size}px;` }), + ...(dashArray && { '--w-spinner-dash': dashArray }), + } as React.CSSProperties + + return ( + + + + ) +} + +export default Spinner diff --git a/src/components/Spinner/spinner.scss b/src/components/Spinner/spinner.scss new file mode 100644 index 0000000..13d9800 --- /dev/null +++ b/src/components/Spinner/spinner.scss @@ -0,0 +1,41 @@ +@import '../../scss/config.scss'; + +.w-spinner { + margin: 0px auto; + width: var(--w-spinner-size); + height: var(--w-spinner-size); + animation: rotate var(--w-spinner-speed) linear infinite; + + &.dashed .spinner-path { + stroke-dasharray: var(--w-spinner-dash); + animation: none; + } + + .spinner-path { + stroke: var(--w-spinner-color); + stroke-width: var(--w-spinner-width); + animation: dash 1.5s ease-in-out infinite; + stroke-linecap: round; + } +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124; + } +} diff --git a/src/components/Spinner/spinner.ts b/src/components/Spinner/spinner.ts new file mode 100644 index 0000000..c5a4776 --- /dev/null +++ b/src/components/Spinner/spinner.ts @@ -0,0 +1,7 @@ +export type SpinnerProps = { + color?: string + width?: number + speed?: number + size?: number + dashArray?: number +} diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx index 791d591..a0c9ca4 100644 --- a/src/components/Switch/Switch.tsx +++ b/src/components/Switch/Switch.tsx @@ -1,11 +1,7 @@ import React from 'react' -import type { SwitchProps } from './switch' +import type { ReactSwitchProps } from './switch' import './switch.scss' -type ReactSwitchProps = { - onClick?: () => any -} & SwitchProps - const Switch = ({ label, toggled, @@ -36,7 +32,7 @@ const Switch = ({