Design System Component Library: PixelPioneers

Storybook 📚

Getting Started

Design System PixelPioneers is a Storybook with Tailwind integrated based on React Component Library. This is the first part of the CAS Frontend Engineering Advanced course which expect the result that this library can be installed in the Next.js application. In the Next.js application we can re-use components from this library.

Folder Overview

• docs: Introduction and styling in our Design System Component Library
• src: Components and utils
• src/base/base-button: Base of buttons
• src/docs: Assets for documentation, Borders, Colors and Spacing
• src/elements: Elements
• src/utils: Utils, context and helpers

Pre-requisites

We need the npm package manager to install this library.

npm install npm@latest -g

Built with

Bootstrapped with

This project was bootstrapped with Create React App.

Usage

How to install Library package and setup Tailwind configuration in your Next.js application

Make your Next.js app active for using the Tailwind presets of this Design System Library. Make sure that the following code snippet is added in the tailwind.config.js.

The easiest way, install Design System Component Library in your Next.js app:

In System Design Component Library, create a package of it:

npm pack

In Next.js:

This can be used instead via NPM for checking or whatever too.

npm i -D @ost-cas-fee-adv-23-24/[email protected]

In Next.js, this loads design tokens as presets.

presets: [
    require('@ost-cas-fee-adv-23-24/design-system-component-library-pixelpioneers/preset')
],

Check that this Component Library is also added in using the Tailwind CSS of the Next.js app. Please add the following code snippet in your tailwind.config.js.

content: [
    ...
    './node_modules/@ost-cas-fee-adv-23-24/design-system-component-library-pixelpioneers/lib/esm/components/**/*.js'
],

For having more information related this configuration, it can be found here: Install Tailwind CSS with Next.js.

Technology Stack

📎 Link Create React App with the TypeScript Template. npx create-react-app my-app --template typescript

📎 Link Install and integrate Storybook. npx storybook@latest init

📎 Link Get started with Tailwind. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init

Important! 📣 If you are using Vite, @storybook/nextjs, @storybook/angular, or @storybook/preset-create-react-app with [email protected], then leave the options object empty, see Reference

Tailwind CSS as a PostCSS installation and configuration, see here and How to setup Tailwind and StoryBook.

📎 Link TypeScript configuration, see also Configure Storybook with TypeScript. Then re-write stories in TypeScript only.

📎 Link Prettier npm install --save-dev --save-exact prettier

📎 Link postcss PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack. It also supports Autoprefixer. See the part of Tailwind above.

📎 Link husky / Git hooks You can use it to lint your commit messages, run tests, lint code and many more when you commit or push. See here husky - github.

📎 Link lint-staged Run linters against staged git files and don't let 💩 slip into your code base! Linting makes more sense when run before committing your code. By doing so you can ensure no errors go into the repository and enforce code style. Check there lint-staged - github.

📎 Link ESLint ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, see also ESLint - npm.

📎 Link commitlint commitlint checks if your commit messages meet the [conventional commit format](commitlint checks if your commit messages meet the conventional commit format). See also commitlint - github.

📎 Link clsx A tiny (234B) utility for constructing className strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames module.

📎 Link framer-motion A simple and powerful JavaScript animation library.

📎 Link headlessui Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

Workround

A way of dealing with a problem or making something work despite the problem, without completely solving it.

Override TypeScript@5, see also there: Workaround (We need TS@5 to bundle CJS and ESM)

Run scripts

npm run storybook runs the storybook locally on port http://localhost:6006.

npm run build builds a cjs and esm module for production to the lib folder.

npm run build:cjs builds the cjs module to the lib/cjs folder.

npm run build:esm builds the esm module to the lib/esm folder.

npm run build:cjs:tailwind bundles the index.css in the lib/cjs folder.

npm run build:esm:tailwind bundles the index.css in the lib/esm folder.

npm run clean removes the lib folder.

npm run lint checks lint.

npm run lint:fix fixes lint.

npm run prettier runs prettier.

npm run prettier:check check code-format with prettier and print out warnings if available.

npm pack creates a tarball from a package.

npm start runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm test launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Visual Overview of Folder Structure

Collaboration

Development Agreement

Conventional Commits

A specification for adding human and machine readable meaning to commit messages, see also Conventional Commits.

Contribution

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag name: enhancement. Don't forget to give the project a star! ⭐️ Thanks! 🙏

1. Fork the Project
2. Create your Feature Branch git checkout -b feature/amazingFeature
3. Commit your Changes git commit -m 'Add some amazingFeature'
4. Push to the Branch git push origin feature/amazingFeature
5. Open a Pull Request

Developers

👋 Nico Lutz - write an e-mail to Nico 👨‍💻 👋 André Ceres - write an e-mail to André 👨‍💻

Licence

Distributed under the MIT License. See LICENSE for more information.