Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/serifcolakel/ui-design
I'm experimenting npm package.
https://github.com/serifcolakel/ui-design
chromatic eslint react storybook typescript vite
Last synced: 23 days ago
JSON representation
I'm experimenting npm package.
- Host: GitHub
- URL: https://github.com/serifcolakel/ui-design
- Owner: serifcolakel
- Created: 2023-07-02T13:40:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-09T11:35:38.000Z (over 1 year ago)
- Last Synced: 2024-04-26T23:43:04.010Z (6 months ago)
- Topics: chromatic, eslint, react, storybook, typescript, vite
- Language: TypeScript
- Homepage: https://64aa94e27694bd7a11a4815b-eqlxvotska.chromatic.com/
- Size: 1.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Table of Contents
## DEV COMMIT TAGS
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. |
## 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.
## **Built With**
In this section, the technologies used in the construction of the project are included.
- [TypeScript](https://www.typescriptlang.org/)
- [React](https://reactjs.org/)
- [Storybook](https://storybook.js.org/)
- [Styled-Components](https://styled-components.com/)
- [TailwindCSS](https://tailwindcss.com/)
- [React-Icons](https://react-icons.github.io/react-icons/)
- [Vite](https://vitejs.dev/)
- [Rollup](https://rollupjs.org/guide/en/)
- [ESLint](https://eslint.org/)
- [Prettier](https://prettier.io/)
## **Getting Started**
In this section, the steps for the cloning of the project and the improvements to be made by you are shown.
## Prerequisites
By following the steps below, your project can be run after the local installation.
- npm
```sh
npm install npm@latest -g
```
## **Installation**
_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._
1. Clone the repo
```sh
git clone https://github.com/serifcolakel/ui-design.git
```
2. Install NPM packages
```sh
npm install
```
3. Run the project
```sh
npm run storybook
```
4. Build the project of the storybook
```sh
npm run build-storybook
```
5. Run the project on the server
```sh
npm run dev
```
6. Build the project with vite & rollup & tailwindcss
```sh
npm run build
```
7. Add the CHROMATIC_PROJECT_TOKEN in your .env file
```sh
CHROMATIC_PROJECT_TOKEN=your_chromatic_project_token
```
8. Add the chromatic to the project. [reference](https://www.youtube.com/watch?v=2tqRpBcV8ug)
```sh
npx chromatic --project-token=%CHROMATIC_PROJECT_TOKEN%
```
9. Add The Script to the package.json
```sh
"scripts": {
"chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
}
```
10. Publish the project to the chromatic. [reference](https://www.youtube.com/watch?v=2tqRpBcV8ug)
```sh
npx chromatic --project-token=%CHROMATIC_PROJECT_TOKEN%
```
## **Usage**
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](
https://www.typescriptlang.org/
) and [React](https://reactjs.org/) and [Storybook](https://storybook.js.org/) and [Styled-Components](https://styled-components.com/) and [TailwindCSS](https://tailwindcss.com/) and [React-Icons](https://react-icons.github.io/react-icons/) and [Vite](https://vitejs.dev/) and [Rollup](https://rollupjs.org/guide/en/) and [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) and [npm](https://www.npmjs.com/) and more._
## **Roadmap**
- [ ] Try to add more components and pages.
See the [Open Issues](https://github.com/serifcolakel/storybook-desing.git) for a full list of proposed features (and known issues).
## **Contributing**
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!
## **Contact**
