Skip to content

Commit 9af7bef

Browse files
gabrogabro
authored
Merge pull request #554 from buildo/related-components-alternative-names
Add alternativeNames and relatedComponents to ComponentDoc
2 parents e9e1263 + c72f511 commit 9af7bef

26 files changed

+183
-67
lines changed

Diff for: ‎packages/website/docs/04-Components/Actions.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/Actions"
66
zeroheightSlug="76d584-actions"
77
storybookStoryId="components-actions"
8+
alternativeNames={["ButtonGroup"]}
9+
relatedComponents={["Button"]}
810
/>

Diff for: ‎packages/website/docs/04-Components/AreaLoader.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/AreaLoader"
66
zeroheightSlug="80fd92-loader"
77
storybookStoryId="components-arealoader"
8+
relatedComponents={["InlineLoader"]}
89
/>

Diff for: ‎packages/website/docs/04-Components/BarChart.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ import ComponentDoc from "./_ComponentDoc.mdx";
44
name="BarChart"
55
examplePath="Components/BarChart"
66
storybookStoryId="components-charts-barchart"
7+
relatedComponents={["DonutChart", "LineChart"]}
78
/>

Diff for: ‎packages/website/docs/04-Components/Checkbox.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/Checkbox"
66
zeroheightSlug="94a4b4-checkbox"
77
storybookStoryId="components-checkbox"
8+
relatedComponents={["CheckboxField", "Switch"]}
89
/>

Diff for: ‎packages/website/docs/04-Components/CheckboxField.mdx

+13
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,17 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/CheckboxField"
66
zeroheightSlug="260f01-input"
77
storybookStoryId="components-checkboxfield"
8+
relatedComponents={[
9+
"Checkbox",
10+
"DateField",
11+
"FileUploaderField",
12+
"Form",
13+
"NumberField",
14+
"RadioGroupField",
15+
"SelectField",
16+
"SliderField",
17+
"TextArea",
18+
"TextField",
19+
"TimeField",
20+
]}
821
/>

Diff for: ‎packages/website/docs/04-Components/Disclosure.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/Disclosure"
66
zeroheightSlug="098a65-disclosure"
77
storybookStoryId="components-disclosure"
8+
alternativeNames={["CollapsiblePanel"]}
9+
relatedComponents={["DisclosureGroup"]}
810
/>

Diff for: ‎packages/website/docs/04-Components/DisclosureGroup.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/DisclosureGroup"
66
zeroheightSlug="098a65-disclosure"
77
storybookStoryId="components-disclosuregroup"
8+
alternativeNames={["Accordion"]}
9+
relatedComponents={["Disclosure"]}
810
/>

Diff for: ‎packages/website/docs/04-Components/DonutChart.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ import ComponentDoc from "./_ComponentDoc.mdx";
44
name="DonutChart"
55
examplePath="Components/DonutChart"
66
storybookStoryId="components-charts-donutchart"
7+
relatedComponents={["BarChart", "LineChart"]}
78
/>

Diff for: ‎packages/website/docs/04-Components/FileUploaderField.mdx

+12
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,16 @@ import ComponentDoc from "./_ComponentDoc.mdx";
44
name="FileUploaderField"
55
examplePath="Components/FileUploaderField"
66
storybookStoryId="components-fileuploaderfield"
7+
relatedComponents={[
8+
"CheckboxField",
9+
"DateField",
10+
"Form",
11+
"NumberField",
12+
"RadioGroupField",
13+
"SelectField",
14+
"SliderField",
15+
"TextArea",
16+
"TextField",
17+
"TimeField",
18+
]}
719
/>

Diff for: ‎packages/website/docs/04-Components/Form.mdx

+12
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,16 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/Form"
66
zeroheightSlug="231049-form"
77
storybookStoryId="components-form"
8+
relatedComponents={[
9+
"CheckboxField",
10+
"DateField",
11+
"FileUploaderField",
12+
"NumberField",
13+
"RadioGroupField",
14+
"SelectField",
15+
"SliderField",
16+
"TextArea",
17+
"TextField",
18+
"TimeField",
19+
]}
820
/>

Diff for: ‎packages/website/docs/04-Components/InlineLoader.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/InlineLoader"
66
zeroheightSlug="80fd92-loader"
77
storybookStoryId="components-inlineloader"
8+
relatedComponents={["AreaLoader"]}
89
/>

Diff for: ‎packages/website/docs/04-Components/LineChart.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ import ComponentDoc from "./_ComponentDoc.mdx";
44
name="LineChart"
55
examplePath="Components/LineChart"
66
storybookStoryId="components-charts-linechart"
7+
relatedComponents={["BarChart", "DonutChart"]}
78
/>

Diff for: ‎packages/website/docs/04-Components/Navigation.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/Navigation"
66
zeroheightSlug="5115d6-navigation"
77
storybookStoryId="components-navigation"
8+
relatedComponents={["Tabs"]}
89
/>

Diff for: ‎packages/website/docs/04-Components/NumberField.mdx

+12
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,16 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/NumberField"
66
zeroheightSlug="260f01-input"
77
storybookStoryId="components-numberfield"
8+
relatedComponents={[
9+
"CheckboxField",
10+
"DateField",
11+
"FileUploaderField",
12+
"Form",
13+
"RadioGroupField",
14+
"SelectField",
15+
"SliderField",
16+
"TextArea",
17+
"TextField",
18+
"TimeField",
19+
]}
820
/>

Diff for: ‎packages/website/docs/04-Components/RadioGroupField.mdx

+12
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,16 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/RadioGroupField"
66
zeroheightSlug="260f01-input"
77
storybookStoryId="components-radiogroupfield"
8+
relatedComponents={[
9+
"CheckboxField",
10+
"DateField",
11+
"FileUploaderField",
12+
"Form",
13+
"NumberField",
14+
"SelectField",
15+
"SliderField",
16+
"TextArea",
17+
"TextField",
18+
"TimeField",
19+
]}
820
/>

Diff for: ‎packages/website/docs/04-Components/SelectField.mdx

+12
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,16 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/SelectField"
66
zeroheightSlug="1130fb-select"
77
storybookStoryId="components-selectfield"
8+
relatedComponents={[
9+
"CheckboxField",
10+
"DateField",
11+
"FileUploaderField",
12+
"Form",
13+
"NumberField",
14+
"RadioGroupField",
15+
"SliderField",
16+
"TextArea",
17+
"TextField",
18+
"TimeField",
19+
]}
820
/>

Diff for: ‎packages/website/docs/04-Components/SliderField.mdx

+12
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,16 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/SliderField"
66
zeroheightSlug="54de03-slider"
77
storybookStoryId="components-sliderfield"
8+
relatedComponents={[
9+
"CheckboxField",
10+
"DateField",
11+
"FileUploaderField",
12+
"Form",
13+
"NumberField",
14+
"RadioGroupField",
15+
"SelectField",
16+
"TextArea",
17+
"TextField",
18+
"TimeField",
19+
]}
820
/>

Diff for: ‎packages/website/docs/04-Components/Switch.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/Switch"
66
zeroheightSlug="022a76-selection-controls"
77
storybookStoryId="components-switch"
8+
relatedComponents={["Checkbox"]}
89
/>

Diff for: ‎packages/website/docs/04-Components/Tabs.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/Tabs"
66
zeroheightSlug="290569-tabs"
77
storybookStoryId="components-tabs"
8+
relatedComponents={["Navigation"]}
89
/>

Diff for: ‎packages/website/docs/04-Components/TextArea.mdx

+12
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,16 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/TextArea"
66
zeroheightSlug="126d39-text-area"
77
storybookStoryId="components-textarea"
8+
relatedComponents={[
9+
"CheckboxField",
10+
"DateField",
11+
"FileUploaderField",
12+
"Form",
13+
"NumberField",
14+
"RadioGroupField",
15+
"SelectField",
16+
"SliderField",
17+
"TextField",
18+
"TimeField",
19+
]}
820
/>

Diff for: ‎packages/website/docs/04-Components/TextField.mdx

+13
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,17 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/TextField"
66
zeroheightSlug="260f01-input"
77
storybookStoryId="components-textfield"
8+
alternativeNames={["InputField", "Input", "TextBox", "TextInput"]}
9+
relatedComponents={[
10+
"CheckboxField",
11+
"DateField",
12+
"FileUploaderField",
13+
"Form",
14+
"NumberField",
15+
"RadioGroupField",
16+
"SelectField",
17+
"SliderField",
18+
"TextArea",
19+
"TimeField",
20+
]}
821
/>

Diff for: ‎packages/website/docs/04-Components/TimeField.mdx

+12
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,16 @@ import ComponentDoc from "./_ComponentDoc.mdx";
55
examplePath="Components/TimeField"
66
zeroheightSlug="260f01-input"
77
storybookStoryId="components-timefield"
8+
relatedComponents={[
9+
"CheckboxField",
10+
"DateField",
11+
"FileUploaderField",
12+
"Form",
13+
"NumberField",
14+
"RadioGroupField",
15+
"SelectField",
16+
"SliderField",
17+
"TextArea",
18+
"TextField",
19+
]}
820
/>

Diff for: ‎packages/website/docs/04-Components/_ComponentDoc.mdx

+35
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,38 @@ import { ComponentHeader } from "@site/src/components/ComponentHeader";
3030
</>
3131
)}
3232
</>
33+
34+
<>
35+
{props.alternativeNames && props.alternativeNames.length > 0 && (
36+
<>
37+
<h3>Also known as</h3>
38+
This component may also be known in other UI libraries as {new Intl.ListFormat("en", { type: "disjunction", style: "long" }).formatToParts(props.alternativeNames).map((part, i) => (
39+
part.type === "element" ? (
40+
<strong key={i}>
41+
{part.value}
42+
</strong>
43+
) : (
44+
<React.Fragment key={i}>{part.value}</React.Fragment>
45+
)
46+
))}
47+
</>
48+
)}
49+
50+
</>
51+
52+
<>
53+
{props.relatedComponents && props.relatedComponents.length > 0 && (
54+
<>
55+
<h3>Related components</h3>
56+
<ul>
57+
{props.relatedComponents.map((component) => (
58+
<li key={component}>
59+
<code>
60+
<a href={`./${component}`}>{component}</a>
61+
</code>
62+
</li>
63+
))}
64+
</ul>
65+
</>
66+
)}
67+
</>

Diff for: ‎packages/website/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"assert": "2.0.0",
3636
"buffer": "6.0.3",
3737
"clsx": "1.2.1",
38-
"docusaurus-plugin-react-docgen-typescript": "1.0.2",
38+
"docusaurus-plugin-react-docgen-typescript": "1.1.0",
3939
"playroom": "0.29.0",
4040
"prettier": "2.7.1",
4141
"prism-react-renderer": "1.3.5",

Diff for: ‎packages/website/src/snippets/index.tsx

+2-52
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,5 @@
1-
import { createBentoComponents } from "@buildo/bento-design-system";
1+
import { createBentoProvider } from "@buildo/bento-design-system";
22

33
export * from "@buildo/bento-design-system";
44

5-
export const {
6-
Actions,
7-
AreaLoader,
8-
Avatar,
9-
Banner,
10-
Breadcrumb,
11-
Body,
12-
Box,
13-
Button,
14-
Card,
15-
Checkbox,
16-
CheckboxField,
17-
Chip,
18-
Column,
19-
Columns,
20-
ContentBlock,
21-
ContentWithSidebar,
22-
DateField,
23-
DesignSystemProvider,
24-
Disclosure,
25-
Feedback,
26-
FileUploaderField,
27-
Form,
28-
FormSection,
29-
FormRow,
30-
Inline,
31-
InlineLoader,
32-
Inset,
33-
List,
34-
Menu,
35-
Modal,
36-
Navigation,
37-
Placeholder,
38-
NumberField,
39-
ProgressBar,
40-
RadioGroupField,
41-
SearchBar,
42-
SliderField,
43-
Stack,
44-
Stepper,
45-
Switch,
46-
Table,
47-
tableColumn,
48-
Tabs,
49-
TextField,
50-
TextArea,
51-
Tiles,
52-
Toast,
53-
Tooltip,
54-
SelectField,
55-
} = createBentoComponents();
5+
export const DesignSystemProvider = createBentoProvider();

0 commit comments

Comments
 (0)