Mumble component library development with Yarn Workspaces + Next.js + Storybook + Typescript + StyledComponents + Twin
This setup includes a TypeScript Next.js App (packages/app) importing a separate component library (packages/design-system-component-library-yeahyeahyeah) using yarn workspaces.
We created this setup in the course of further education, a CAS Frontend-Engineering-Advanced course, to develop a component library for a Twitter Clone named Mumble. The goal is to provide a reusable and maintainable set of UI components, that can be released as a npm package and integrated into a Next.js App.
- Storybook
After installing dependencies withyarn install, you can start storybook withyarn storybook, work on the components and stories inpackages/design-system-component-library-yeahyeahyeahand receive updates in storybook. - Testing components in a Next.js app
After installing dependencies withyarn installand starting the next app withyarn dev, the watcher for the component library can be started withyarn watchand you can work on the components inpackages/design-system-component-library-yeahyeahyeahand receive HMR updates in your app. There are some demo sites inside the Next.js app inpackages/app/pages, where you can see how the components are imported. - Simple multi-project configs
- Shared styles in
tailwind.config.js - Shared babel settings in
babel.config.js - Shared twin config in
package.json - Shared global types in
types
- Shared styles in
- Automatic component and type generation
Start live component build updates withyarn watchStart build withyarn build
In the next steps you will learn how to setup this project and get some useful information about using this stack.
Please use node version 16.17.0. If you use nvm you can use the next command.
nvm use 16.17.0[email protected]+ is required to use the workspaces feature.
Update to latest with:npm install -g npm@latest
git clone [email protected]:smartive-education/design-system-component-library-yeahyeahyeah.git
cd design-system-component-library-yeahyeahyeah
yarn installStorybook is located in packages/design-system-component-library-yeahyeahyeah but you can start it also from the root folder of the project setup with following command.
yarn storybookThen navigate to http://localhost:6006.
Sidenote: We wrote 2 Interaction Tests for InputForm component and TextArea component. You will find it in the respective stories under the tab Interactions.
If you wanna test the component library inside a Nextjs app, you can use the ts-watcher and the Next.js app. The watcher will generate a dist folder inside packages/design-system-component-library-yeahyeahyeah, where the components are located. You can use them inside the Next.js app located at packages/app. There are some demo pages located at packages/app/pages, where you can see how you should import the components. Use following steps to start the watcher and the Next.js app.
From inside the root folder start the watcher and watch changes in the bundle with:
yarn watchAlso from inside the root folder, start the dev server with yarn:
yarn devIf you just want to create a build, use following command:
yarn buildThis command will generate a dist folder inside packages/design-system-component-library-yeahyeahyeah, where the compiled components are located.
There is a separate README.md located inside packages/design-system-component-library-yeahyeahyeah. In this Mumble NPM Package README you will learn, how to setup a TypeScript Next.js app using Twin and Styled Components. You will also learn how to install the Mumble Component Library NPM package, and how you can use it inside the Next.js app. You can find our Mumble NPM Package README also on github.