We decided to create a template component that could be dynamically customized based on developer inputted needs throughout a series of questions asked through a CLI tool. In it’s current state, it will only generate components to the Rocket Science core team’s opinionated standards/best practices - but we do intend to expand a broader degree of supported technologies and opinions in the future.
Newly generated components will contain the following files under a folder named by the developer in one of the questions the CLI asks.
📁 ExampleComponent
Due to the mixing of several technologies with their own configuration, we elected to aggregate components into a folder containing the isolated necessities for it’s use cases.
📁 stories
This folder contains the files that will populate storybook with the use cases defined by the developer.
📄 ExampleComponent.stories.ts
Client side render use cases, included by default with any newly generated component
📄 ExampleComponent.stories.ts
If the component is intended to be federated in a micro frontend use case, we have them split into their own file ExampleComponentFed.stories.ts.
📄 index.ts
An index file to aggregate the exported modules from the other files that makes it easier to import into consuming modules outside of this component folder. Currently you have to manually configure exports aside from the base components - but we do intend to have them included by default in the future.
// Without index.ts aggregate
import ExampleComponent from './src/components/ExampleComponent/ExampleComponent.tsx'
import ExampleComponentHereWrapper from './src/components/ExampleComponent/ExampleComponent.styles.ts'// With index.ts aggregate
import ExampleComponent, { ExampleComponentWrapper } from './src/components/ExampleComponent'📄 ExampleComponent.tsx
The react component file that contains a simple button component with a text prop, as well as commented out commonly used hooks for useState, useEffect and useMemo.
📄 ExampleComponent.styles.ts
The Styled Components file that contains a single wrapper component with commented out example styles for nested child elements with class names
📄 ExampleComponent.test.ts
The jest/react testing library file that contains simple tests to see if the generated component renders in two scenarios - “Does the component render with props?” And “Does the component render without props?”
📄 README.md
The documentation surrounding, at minimum, summarizing the component, the component’s consumption/usage and a table outlining the component’s props (their name, type, default value and description)