Table of Contents
You can access the details of the commits made by the developers here.
Click for Dev Tags details.
TAGS |
EXPLAIN |
|---|---|
| ADDED (username) | It gives information about newly added Component, package and files. |
| CREATED (username) | It gives information about the Component, package and files created for the first time. |
| CHANGED (username) | It gives information about the changed function or method related to the problem or design. |
| REMOVED (username) | It gives information about the removed function or method related to the problem or design. |
| UPDATED (username) | It gives information about the updated function or method related to the problem or design. |
| FIXED (username) | It gives information about the solution of the problem caused by the problem. |
| TODO (username) | It gives information about the planned and encountered problem in the future. |
| TEST (username) | It is a tag created to test whether the functions added during build or for projects working in separate environments can work synchronously. |
| INFO (username) | It is a tag given to the commit to give information about the project. |
In this project, the basic concepts of Storybook were learned and the components were designed. The project was created with the aim of learning the basic concepts of Storybook and improving the design skills. I'm trying to create npm packages for the components I've designed. I will continue to add new components and pages to the project.
In this section, the technologies used in the construction of the project are included.
In this section, the steps for the cloning of the project and the improvements to be made by you are shown.
By following the steps below, your project can be run after the local installation.
- npm
npm install npm@latest -g
Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.
-
Clone the repo
git clone https://github.com/serifcolakel/ui-design.git
-
Install NPM packages
npm install
-
Run the project
npm run storybook
-
Build the project of the storybook
npm run build-storybook
-
Run the project on the server
npm run dev
-
Build the project with vite & rollup & tailwindcss
npm run build
-
Add the CHROMATIC_PROJECT_TOKEN in your .env file
CHROMATIC_PROJECT_TOKEN=your_chromatic_project_token
-
Add the chromatic to the project. reference
npx chromatic --project-token=%CHROMATIC_PROJECT_TOKEN%
-
Add The Script to the package.json
"scripts": { "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN" }
-
Publish the project to the chromatic. reference
npx chromatic --project-token=%CHROMATIC_PROJECT_TOKEN%
In this section, you can access the documentation of the libraries used during the creation of the project.
For more examples, please refer to the TypeScript and React and Storybook and Styled-Components and TailwindCSS and React-Icons and Vite and Rollup and ESLint and Prettier and npm and more.
- Try to add more components and pages.
See the Open Issues for a full list of proposed features (and known issues).
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 "enhancement". Don't forget to give the project a star! Thanks again!
