-
Notifications
You must be signed in to change notification settings - Fork 58
/
StyleguideExamples.tsx
112 lines (99 loc) · 2.61 KB
/
StyleguideExamples.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/*
* Copy of Styleguide Examples from https://github.com/johnsonandjohnson/Bodiless-JS/tree/main/packages/vital-test/src/styleguide/Examples
* will render All items in flowcontainer with their ids.
*/
import React, { useMemo } from 'react';
import identity from 'lodash/identity';
import type { FC } from 'react';
import {
designable,
flowHoc,
DesignableComponentsProps,
ComponentOrTag,
Div,
H3,
DesignableComponents,
as,
} from '@bodiless/fclasses';
import { withDefaultContent, withNode, withNodeKey } from '@bodiless/data';
import { asFluidToken } from '../../util';
import { vitalSpacing } from '../../components/Spacing';
import { vitalTypography } from '../../components/Typography';
export type StyleGuideExamplesComponents = {
Wrapper: ComponentOrTag<any>;
ItemWrapper: ComponentOrTag<any>;
ItemTitle: ComponentOrTag<any>;
ItemContent: ComponentOrTag<any>;
};
export const styleGuideExamplesComponents: StyleGuideExamplesComponents = {
Wrapper: Div,
ItemWrapper: Div,
ItemTitle: H3,
ItemContent: Div,
};
export type StyleGuideExamplesBaseProps = DesignableComponentsProps & {
content?: any;
};
const StyleGuideExamplesBase: FC<StyleGuideExamplesBaseProps> = (props) => {
const { components, content } = props;
const {
Wrapper,
ItemWrapper,
ItemTitle,
ItemContent,
...restComponents
} = components;
const finalComponents: DesignableComponents = useMemo(
() => Object.entries(restComponents).reduce(
(acc, [key, value]) => ({
...acc,
[key]: flowHoc(
content ? withDefaultContent(content) : identity,
// Remove next 2 lines if we want shared content.
withNode,
withNodeKey(key),
)(value),
}),
{},
),
[components, content],
);
const items = Object.entries(finalComponents).map(([name, C]) => (
<ItemWrapper key={name} id={name}>
<ItemTitle>{name}</ItemTitle>
<ItemContent>
<C />
</ItemContent>
</ItemWrapper>
));
return <Wrapper>{items}</Wrapper>;
};
const StyleGuideExamplesClean = designable(
styleGuideExamplesComponents,
'StyleGuideExamples',
)(StyleGuideExamplesBase);
const Default = asFluidToken({
Layout: {
Wrapper: 'flex flex-wrap',
ItemWrapper: 'w-full',
},
Spacing: {
ItemWrapper: 'mb-4',
},
Theme: {
ItemTitle: as(vitalTypography.H2, 'block'),
},
Schema: {
_: withNode,
},
});
const WithMargin = asFluidToken({
Spacing: {
Wrapper: vitalSpacing.WithSiteMargin,
},
});
const vitalStyleGuideExamples = {
Default,
WithMargin,
};
export { StyleGuideExamplesClean, vitalStyleGuideExamples };