Final preparations
Things need to be in order before we continue.
In this lesson, we are just going to go through two more prep steps. First, we'll ensure our component exports are A-OK, and then it's time to enable the GitHub Chromatic step.
Verifying that we export all of our components#
Navigate to the component library project.
At this point in the course, your src/index.jsx should look similar to this:
1
// Demo component2
export { default as Demo } from "./components/Demo/Demo";
3
4
// Manually created components5
export { default as CartButton } from "./components/CartButton/CartButton";
6
export { default as CheckoutForm } from "./components/CheckoutForm/CheckoutForm";
7
export { default as CheckoutItem } from "./components/CheckoutItem/CheckoutItem";
8
export { default as FormInput } from "./components/FormInput/FormInput";
9
export { default as IconButton } from "./components/IconButton/IconButton";
10
export { default as ProductCard } from "./components/ProductCard/ProductCard";
11
12
// Figmagic-generated elements13
export { default as Button } from "./elements/Button/Button";
14
export { default as Card } from "./elements/Card/Card";
15
export { default as CartSymbol } from "./elements/CartSymbol/CartSymbol";
16
export { default as Description } from "./elements/Description/Description";
17
export { default as Footer } from "./elements/Footer/Footer";
18
export { default as Form } from "./elements/Form/Form";
19
export { default as Header } from "./elements/Header/Header";
20
export { default as Heading } from "./elements/Heading/Heading";
21
export { default as Image } from "./elements/Image/Image";
22
export { default as Input } from "./elements/Input/Input";
That should cover all we've done so far. Easy peasy.
If you have made fewer (or more) components and elements, then make sure your index.jsx file reflects your own conditions.
This page is a preview of The newline Guide to React Component Design Systems with Figmagic