Skip to content

Commit fb763eb

Browse files
FrontendlandFrontendland
committed
🏷️ Move framework-specific types to components
1 parent 57ce4c8 commit fb763eb

134 files changed

Lines changed: 598 additions & 612 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎scripts/buildTypes.js‎

Lines changed: 62 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,52 @@ import { utilityTypes } from './utilityTypes.js'
44

55
import fs from 'fs'
66

7+
const componentsWithGenericTypes = [
8+
'Image',
9+
'Modal'
10+
]
11+
12+
const componentsWithoutFrameworkSpecificTypes = [
13+
'Accordion',
14+
'Avatar',
15+
'BottomNavigation',
16+
'Breadcrumb',
17+
'Icon',
18+
'Image',
19+
'ImageLoader',
20+
'OTPInput',
21+
'Rating',
22+
'Skeleton',
23+
'Spinner',
24+
'Stepper',
25+
'Table',
26+
'Progress',
27+
'SpeedDial'
28+
]
29+
730
const getTypeName = (component, framework) => {
8-
const componentsWithoutFrameworkSpecificTypes = [
9-
'Accordion',
10-
'Avatar',
11-
'BottomNavigation',
12-
'Breadcrumb',
13-
'Icon',
14-
'Image',
15-
'ImageLoader',
16-
'OTPInput',
17-
'Rating',
18-
'Skeleton',
19-
'Spinner',
20-
'Stepper',
21-
'Table',
22-
'Progress',
23-
'SpeedDial'
24-
]
25-
26-
return componentsWithoutFrameworkSpecificTypes.includes(component)
31+
return componentsWithoutFrameworkSpecificTypes.includes(component) && !componentsWithGenericTypes.includes(component)
2732
? `${component}Props`
2833
: `${framework}${component}Props`
2934
}
3035

36+
const getImportFile = (component, framework) => {
37+
const typeName = getTypeName(component, framework)
38+
const isFrameworkSpecificType = typeName.includes(framework)
39+
const isGeneric = componentsWithGenericTypes.includes(component)
40+
41+
const extension = {
42+
Svelte: '.svelte',
43+
React: '.tsx'
44+
}
45+
46+
const importFile = (isFrameworkSpecificType || isGeneric)
47+
? `${component}${extension[framework]}`
48+
: component.toLowerCase()
49+
50+
return importFile
51+
}
52+
3153
const format = template => template.trim().replace(new RegExp('^[ \\t]{12}', 'gm'), '')
3254

3355
const buildTypes = type => {
@@ -36,7 +58,16 @@ const buildTypes = type => {
3658
if (type === 'astro') {
3759
return format(`
3860
${components.map(component => {
39-
return `import type { ${component}Props as W${component}Props } from './components/${component}/${component.toLowerCase()}'`
61+
const isGeneric = componentsWithGenericTypes.includes(component)
62+
const typeImport = isGeneric
63+
? `Props as W${component}Props`
64+
: `${component}Props as W${component}Props`
65+
66+
const importFile = isGeneric
67+
? `${component}.astro`
68+
: component.toLowerCase()
69+
70+
return `import type { ${typeImport} } from './components/${component}/${importFile}'`
4071
}).join('\n')}
4172
4273
${getAdditionalTypeImports()}
@@ -58,8 +89,12 @@ const buildTypes = type => {
5889
if (type === 'svelte') {
5990
return format(`
6091
import type { Component } from 'svelte'
92+
6193
${components.map(component => {
62-
return `import type { ${getTypeName(component, 'Svelte')} as W${getTypeName(component, 'Svelte')} } from './components/${component}/${component.toLowerCase()}'`
94+
const typeName = getTypeName(component, 'Svelte')
95+
const importFile = getImportFile(component, 'Svelte')
96+
97+
return `import type { ${typeName} as W${typeName} } from './components/${component}/${importFile}'`
6398
}).join('\n')}
6499
65100
${getAdditionalTypeImports()}
@@ -81,8 +116,12 @@ const buildTypes = type => {
81116
if (type === 'react') {
82117
return format(`
83118
import { FC } from 'react'
119+
84120
${components.map(component => {
85-
return `import type { ${getTypeName(component, 'React')} as W${getTypeName(component, 'React')} } from './components/${component}/${component.toLowerCase()}'`
121+
const typeName = getTypeName(component, 'React')
122+
const importFile = getImportFile(component, 'React')
123+
124+
return `import type { ${typeName} as W${typeName} } from './components/${component}/${importFile}'`
86125
}).join('\n')}
87126
88127
${getAdditionalTypeImports()}
@@ -107,9 +146,7 @@ const buildTypes = type => {
107146

108147
return format(`
109148
declare module 'webcoreui/${type}' {
110-
${icons.map(icon => {
111-
return `export const ${camelize(icon)}: string`
112-
}).join('\n\t')}
149+
${icons.map(icon => `export const ${camelize(icon)}: string`).join('\n\t')}
113150
}
114151
`)
115152
}

‎src/components/Alert/Alert.svelte‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
2-
import type { SvelteAlertProps } from './alert'
2+
import type { Snippet } from 'svelte'
3+
import type { AlertProps } from './alert'
34
45
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
56
@@ -10,6 +11,11 @@
1011
1112
import styles from './alert.module.scss'
1213
14+
export type SvelteAlertProps = {
15+
icon?: Snippet
16+
children: Snippet
17+
} & AlertProps
18+
1319
const {
1420
element = 'section',
1521
title,

‎src/components/Alert/Alert.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react'
2-
import type { ReactAlertProps } from './alert'
1+
import React, { type JSX } from 'react'
2+
import type { AlertProps } from './alert'
33

44
import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
55

@@ -10,6 +10,13 @@ import warning from '../../icons/warning.svg?raw'
1010

1111
import styles from './alert.module.scss'
1212

13+
export type ReactAlertProps = {
14+
Element?: keyof JSX.IntrinsicElements
15+
TitleTag?: keyof JSX.IntrinsicElements
16+
icon?: React.ReactNode
17+
children: React.ReactNode
18+
} & Omit<AlertProps, 'titleTag' | 'element'>
19+
1320
const iconMap = {
1421
info,
1522
success,

‎src/components/Alert/alert.ts‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import type { JSX } from 'react'
2-
import type { Snippet } from 'svelte'
3-
41
export type AlertProps = {
52
element?: string
63
title?: string
@@ -14,15 +11,3 @@ export type AlertProps = {
1411
| 'alert'
1512
[key: string]: any
1613
}
17-
18-
export type SvelteAlertProps = {
19-
icon?: Snippet
20-
children: Snippet
21-
} & AlertProps
22-
23-
export type ReactAlertProps = {
24-
Element?: keyof JSX.IntrinsicElements
25-
TitleTag?: keyof JSX.IntrinsicElements
26-
icon?: React.ReactNode
27-
children: React.ReactNode
28-
} & Omit<AlertProps, 'titleTag' | 'element'>

‎src/components/AspectRatio/AspectRatio.svelte‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
<script lang="ts">
2-
import type { SvelteAspectRatioProps } from './aspectratio'
2+
import type { Snippet } from 'svelte'
3+
import type { AspectRatioProps } from './aspectratio'
34
45
import { classNames } from '../../utils/classNames'
56
67
import styles from './aspect-ratio.module.scss'
78
9+
export type SvelteAspectRatioProps = {
10+
children: Snippet
11+
} & AspectRatioProps
12+
813
const {
914
ratio,
1015
className,

‎src/components/AspectRatio/AspectRatio.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import React from 'react'
2-
import type { ReactAspectRatioProps } from './aspectratio'
2+
import type { AspectRatioProps } from './aspectratio'
33

44
import { classNames } from '../../utils/classNames'
55

66
import styles from './aspect-ratio.module.scss'
77

8+
export type ReactAspectRatioProps = {
9+
children: React.ReactNode
10+
} & AspectRatioProps
11+
812
const AspectRatio = ({
913
ratio,
1014
children,

‎src/components/AspectRatio/aspectratio.ts‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
1-
import type { Snippet } from 'svelte'
2-
31
export type AspectRatioProps = {
42
ratio: string
53
className?: string
64
}
7-
8-
export type SvelteAspectRatioProps = {
9-
children: Snippet
10-
} & AspectRatioProps
11-
12-
export type ReactAspectRatioProps = {
13-
children: React.ReactNode
14-
} & AspectRatioProps

‎src/components/Badge/Badge.svelte‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
<script lang="ts">
2-
import type { SvelteBadgeProps } from './badge'
2+
import type { Snippet } from 'svelte'
3+
import type { MouseEventHandler } from 'svelte/elements'
4+
import type { BadgeProps } from './badge'
35
46
import { classNames } from '../../utils/classNames'
57
68
import styles from './badge.module.scss'
79
10+
export type SvelteBadgeProps = {
11+
onClick?: MouseEventHandler<HTMLButtonElement> | null
12+
children?: Snippet
13+
} & BadgeProps
14+
815
const {
916
theme,
1017
hover,

‎src/components/Badge/Badge.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import React from 'react'
2-
import type { ReactBadgeProps } from './badge'
2+
import type { BadgeProps } from './badge'
33

44
import { classNames } from '../../utils/classNames'
55

66
import styles from './badge.module.scss'
77

8+
export type ReactBadgeProps = {
9+
onClick?: React.MouseEventHandler<HTMLButtonElement>
10+
children?: React.ReactNode
11+
} & BadgeProps
12+
813
const Badge = ({
914
theme,
1015
onClick,

‎src/components/Badge/badge.ts‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import type { Snippet } from 'svelte'
2-
import type { MouseEventHandler } from 'svelte/elements'
3-
41
export type BadgeProps = {
52
theme?: 'secondary'
63
| 'outline'
@@ -16,13 +13,3 @@ export type BadgeProps = {
1613
className?: string
1714
[key: string]: any
1815
}
19-
20-
export type SvelteBadgeProps = {
21-
onClick?: MouseEventHandler<HTMLButtonElement> | null
22-
children?: Snippet
23-
} & BadgeProps
24-
25-
export type ReactBadgeProps = {
26-
onClick?: React.MouseEventHandler<HTMLButtonElement>
27-
children?: React.ReactNode
28-
} & BadgeProps

0 commit comments

Comments
 (0)