Skip to content

Commit 81f1f8e

Browse files
michaelmkrausmichaelmkraus
committed
feat: add contract for examples and integrate it into config and button showcase
1 parent 61b80d4 commit 81f1f8e

File tree

3 files changed

+130
-16
lines changed

3 files changed

+130
-16
lines changed

‎packages/components/configs/mitosis.showcase.config.cjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
* @type {import('@builder.io/mitosis').MitosisConfig}
33
*/
44
module.exports = {
5-
files: ['src/**/*.showcase.lite.tsx', 'src/**/*.example.lite.tsx'],
5+
files: [
6+
'src/components/**/*.showcase.lite.tsx',
7+
'src/components/**/*.example.lite.tsx',
8+
'src/components/**/*.meta.lite.tsx'
9+
],
610
targets: ['angular', 'vue', 'react', 'stencil'],
711
dest: '../../output',
812
options: {

‎packages/components/src/components/button/examples/button.examples.meta.lite.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
export type ButtonExampleIdentifier =
2+
| 'density'
3+
| 'disabled'
4+
| 'multi-line-text'
5+
| 'no-text'
6+
| 'show-icon-leading'
7+
| 'show-icon-trailing'
8+
| 'size'
9+
| 'variant'
10+
| 'width';
11+
12+
export type ButtonExampleGroup =
13+
| 'Content'
14+
| 'Density'
15+
| 'Icons'
16+
| 'Layout'
17+
| 'Size'
18+
| 'State'
19+
| 'Variants';
20+
21+
export type ButtonExampleMeta = {
22+
/** Technical identifier */
23+
id: ButtonExampleIdentifier;
24+
25+
/** Readable name */
26+
exampleName: string;
27+
28+
/** Group to which the example belongs */
29+
group?: ButtonExampleGroup;
30+
31+
/** Names of the Storybook stories that are created from this example. */
32+
storybookNames?: string[];
33+
};
34+
35+
/**
36+
* All button examples, defined centrally.
37+
*/
38+
export const buttonExamplesMeta: ButtonExampleMeta[] = [
39+
{
40+
id: 'density',
41+
exampleName: 'Density',
42+
group: 'Density',
43+
storybookNames: ['Density']
44+
},
45+
{
46+
id: 'disabled',
47+
exampleName: 'Disabled',
48+
group: 'State',
49+
storybookNames: ['Disabled']
50+
},
51+
{
52+
id: 'multi-line-text',
53+
exampleName: 'Multi-line Text With Line Breaks',
54+
group: 'Content',
55+
storybookNames: ['Multi-line Text']
56+
},
57+
{
58+
id: 'no-text',
59+
exampleName: 'No Text',
60+
group: 'Content',
61+
storybookNames: ['Icon Only']
62+
},
63+
{
64+
id: 'show-icon-leading',
65+
exampleName: 'Show Icon Leading',
66+
group: 'Icons',
67+
storybookNames: ['Show Icon Leading']
68+
},
69+
{
70+
id: 'show-icon-trailing',
71+
exampleName: 'Show Icon Trailing',
72+
group: 'Icons',
73+
storybookNames: ['Show Icon Trailing']
74+
},
75+
{
76+
id: 'size',
77+
exampleName: 'Size',
78+
group: 'Size',
79+
storybookNames: ['Size']
80+
},
81+
{
82+
id: 'variant',
83+
exampleName: 'Variant',
84+
group: 'Variants',
85+
storybookNames: ['Outlined', 'Filled', 'Ghost', 'Brand']
86+
},
87+
{
88+
id: 'width',
89+
exampleName: 'Width',
90+
group: 'Layout',
91+
storybookNames: ['Width']
92+
}
93+
];
94+
95+
export default function ButtonExamplesMeta() {
96+
return null;
97+
}

‎packages/components/src/components/button/showcase/button.showcase.lite.tsx‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { PatternhubProps } from '../../../shared/model';
22
import CardWrapperShowcase from '../../../shared/showcase/card-wrapper.showcase.lite';
33
import ContainerWrapperShowcase from '../../../shared/showcase/container-wrapper.showcase.lite';
44
import LinkWrapperShowcase from '../../../shared/showcase/link-wrapper.showcase.lite';
5+
56
import ButtonDensity from '../examples/density.example.lite';
67
import ButtonDisabled from '../examples/disabled.example.lite';
78
import ButtonMultiLineText from '../examples/multi-line-text.example.lite';
@@ -12,54 +13,66 @@ import ButtonSize from '../examples/size.example.lite';
1213
import ButtonVariant from '../examples/variant.example.lite';
1314
import ButtonWidth from '../examples/width.example.lite';
1415

16+
import {
17+
buttonExamplesMeta,
18+
type ButtonExampleIdentifier
19+
} from '../examples/button.examples.meta.lite';
20+
21+
const getExampleName = (id: ButtonExampleIdentifier): string =>
22+
(buttonExamplesMeta.find((example) => example.id === id)?.exampleName ??
23+
id) as string;
24+
1525
export default function ButtonShowcase(props: PatternhubProps) {
1626
return (
1727
<ContainerWrapperShowcase
1828
title="DBButton"
1929
isPatternhub={props.isPatternhub}>
20-
<LinkWrapperShowcase exampleName="Density">
30+
<LinkWrapperShowcase exampleName={getExampleName('density')}>
2131
<CardWrapperShowcase>
2232
<ButtonDensity />
2333
</CardWrapperShowcase>
2434
</LinkWrapperShowcase>
25-
<LinkWrapperShowcase exampleName="Variant">
35+
<LinkWrapperShowcase exampleName={getExampleName('disabled')}>
2636
<CardWrapperShowcase>
27-
<ButtonVariant />
37+
<ButtonDisabled />
2838
</CardWrapperShowcase>
2939
</LinkWrapperShowcase>
30-
<LinkWrapperShowcase exampleName="Disabled">
40+
<LinkWrapperShowcase
41+
exampleName={getExampleName('multi-line-text')}>
3142
<CardWrapperShowcase>
32-
<ButtonDisabled />
43+
<ButtonMultiLineText />
3344
</CardWrapperShowcase>
3445
</LinkWrapperShowcase>
35-
<LinkWrapperShowcase exampleName="Size">
46+
<LinkWrapperShowcase exampleName={getExampleName('no-text')}>
3647
<CardWrapperShowcase>
37-
<ButtonSize />
48+
<ButtonNoText />
3849
</CardWrapperShowcase>
3950
</LinkWrapperShowcase>
40-
<LinkWrapperShowcase exampleName="Show Icon Leading">
51+
<LinkWrapperShowcase
52+
exampleName={getExampleName('show-icon-leading')}>
4153
<CardWrapperShowcase>
4254
<ButtonShowIconLeading />
4355
</CardWrapperShowcase>
4456
</LinkWrapperShowcase>
45-
<LinkWrapperShowcase exampleName="Show Icon Trailing">
57+
<LinkWrapperShowcase
58+
exampleName={getExampleName('show-icon-trailing')}>
4659
<CardWrapperShowcase>
4760
<ButtonShowIconTrailing />
4861
</CardWrapperShowcase>
4962
</LinkWrapperShowcase>
50-
<LinkWrapperShowcase exampleName="No Text">
63+
<LinkWrapperShowcase exampleName={getExampleName('size')}>
5164
<CardWrapperShowcase>
52-
<ButtonNoText />
65+
<ButtonSize />
5366
</CardWrapperShowcase>
5467
</LinkWrapperShowcase>
55-
<LinkWrapperShowcase exampleName="Width">
68+
<LinkWrapperShowcase exampleName={getExampleName('variant')}>
5669
<CardWrapperShowcase>
57-
<ButtonWidth />
70+
<ButtonVariant />
5871
</CardWrapperShowcase>
5972
</LinkWrapperShowcase>
60-
<LinkWrapperShowcase exampleName="Multi-line Text With Line Breaks">
73+
<LinkWrapperShowcase exampleName={getExampleName('width')}>
6174
<CardWrapperShowcase>
62-
<ButtonMultiLineText />
75+
<ButtonWidth />
6376
</CardWrapperShowcase>
6477
</LinkWrapperShowcase>
6578
</ContainerWrapperShowcase>

0 commit comments

Comments
 (0)