This article explores the project workflow for a Next.js project combined with Tailwind, Storybook, Plop, Jest, and other tech stack dependencies. It begins by introducing the project as a demo and provides a link to a separate article that details the tech stack and dependencies used.

🔬 Understanding the Atomic Approach

To understand the workflow for this project, it is important to grasp the concept of the Atomic Approach. This approach is further explained in the article titled Unlocking Efficiency: The Atomic Approach.

🚀 Component Generation

To get started, open the terminal and run the command Yarn Generate. This will prompt you to choose the type of component you want to create, such as Atom, Molecule, or Organism. Once selected, the generated component will be placed inside the /components folder. The generated component will consist of various files, including interface.tsx, stories.tsx, styles.tsx, test.tsx, component.tsx, and index.tsx.

⚙️ Configuring the Generated Files

For a more detailed understanding of the project setup and how to configure the generated files, refer to the article Decoding Project Setup. Each file can be refactored based on your specific needs. Here are some considerations for each file:

Interface.tsx: Add interfaces and types while removing unnecessary keys.

component.tsx: Refactor the container and content if a component requires different behavior.

stories.tsx: Add values inside args: {} to further test the component within Storybook.

test.tsx: No changes are typically required, but you can add more tests and configure them if needed.

styles.tsx: This will enhance styles for your component. You can also improve readability using ctl(), and organize classes on new lines and will still be rendered on a single line. You can also pass parameters using syntax like title: () => ctl(``).

👀 Previewing Components

After configuring the files, you can preview the components in Storybook by running the command Yarn Storybook. This allows you to test and view the components in an isolated environment.

🖥️ Displaying Components on Pages

To display the components on actual pages, ensure that the added component is included in the componentMap file located at /lib/constants/componentMap.tsx. Once added, the component will be automatically rendered as long as it is present in the data.json file located at /data/data.json.

🎯 Rendering Process

To understand how the rendering process works, examine the [...slug].tsx file. It showcases how the components are mapped and returns a 404 error if the requested URL does not correspond to a valid page.

💡 Conclusion

By following this project workflow, developers can efficiently work with Next.js, Tailwind, Storybook, Plop, Jest, and other tech stack dependencies while adhering to coding standards and best practices.