Creating Components

Learn how to create a component.

How to Create New Components

There are two methods of creating a new component for this project.

1. Manual creating components
2. ULTRAFAST component creation (optional)

Manually Creating Components

1. Create a folder under web/components with the name of your new component in Pascal case (capitalizing the first letter of every word with no spaces, example: "NewComponent")
2. Copy web/components/Template/_map.tsx into your new folder
3. Copy web/components/Template/index.stories.tsx into your new folder
4. Copy web/components/Template/index.tsx into your new folder
5. Copy web/components/Template/styles.tsx into your new folder
6. Copy web/components/Template/test.data.tsx into your new folder
7. Create a component schema in Contenful as a "Content Model"
8. Run yarn syncContentful to download, parse, and sync the new Contentful data
9. Go to the web/components/Template/test.data.tsx in your new component and change the word template to be the ID of your new Content Model in Contentful.
10. Add a new import in the web/components/BlockMapper/BlockMapList.ts

ULTRAFAST Component Creation (optional)

1. Run your local and run yarn syncContentful
2. Visit any page on your local, scroll to the bottom of the page and click the "New Component" button.
3. Click the checkmarks for any file you want to auto generate

Please note: autogeneration skips files that already exist, it does not overwrite any files for safety. This will autogenerate files and perform all of the manual steps for you in the project

Creating New Component Props

1. Avoid redundant work, if your prop already exists in the web/components/BlockMapper/BlockProps.tsx file, then use that name for your component's schema file field name.
2. Add your prop as optional to the Props interface inside web/components/BlockMapper/BlockProps.tsx
3. Add your prop to the block.fields variable
4. Add your prop to BlockMap object