Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamal-saadeddin/taskbox
Implementation of the Storybook tutorial, developed during my internship at Foothill Technology Solutions. It covers Chromatic integration, deployment, story writing, error/loading state handling, and creating a components screen.
https://github.com/jamal-saadeddin/taskbox
components design-system react storybook testing ui-components web-components
Last synced: 4 months ago
JSON representation
Implementation of the Storybook tutorial, developed during my internship at Foothill Technology Solutions. It covers Chromatic integration, deployment, story writing, error/loading state handling, and creating a components screen.
- Host: GitHub
- URL: https://github.com/jamal-saadeddin/taskbox
- Owner: Jamal-SaadEddin
- License: mit
- Created: 2024-07-12T09:24:19.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-13T14:41:28.000Z (7 months ago)
- Last Synced: 2024-10-13T21:44:11.552Z (4 months ago)
- Topics: components, design-system, react, storybook, testing, ui-components, web-components
- Language: JavaScript
- Homepage: https://669263416afbabf92f8e1e25-dnrdjjwvgb.chromatic.com/
- Size: 3.29 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Taskbox - Storybook Tutorial Project
This project was developed as part of my internship at [Foothill Technology Solutions](https://github.com/FoothillSolutions). The purpose of this repository is to showcase what I've learned from the [Intro to Storybook](https://storybook.js.org/tutorials/intro-to-storybook/) tutorial, which focuses on building UI components with Storybook in a React application.
## Overview
This repository contains the complete implementation of the Storybook tutorial, covering the setup, building components, adding data, and deploying Storybook.
### Features Learned
- **Chromatic Integration**: Set up [Chromatic](https://www.chromatic.com/) for UI testing and visual regression tests.
- **Deployment**: Learned how to deploy Storybook to Chromatic.
- **Writing Stories**: Developed stories in a bottom-up approach, starting from atomic task component to complex task list screen.
- **Error & Loading States**: Implemented and handled error and loading states in the Task component.
- **Inbox Screen**: Created an Inbox screen that displays the entire task list using Storybook.
## Demo
You can view the live Storybook demo [here](https://669263416afbabf92f8e1e25-dnrdjjwvgb.chromatic.com/).
## Getting Started
To get a copy of this project up and running on your local machine, follow these steps:
### Prerequisites
Make sure you have the following installed on your machine:
- Node.js
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/Jamal-SaadEddin/Taskbox.git
cd Taskbox
```
2. Install the dependencies:
```bash
npm install
# or
yarn install
```
### Running Storybook
To start Storybook locally, run the following command:
```bash
npm run storybook
# or
yarn storybook
```
This will start the Storybook server and you can view it in your browser at `http://localhost:6006`.
## Learn More
To learn more about Storybook and follow the tutorial, visit the [Intro to Storybook](https://storybook.js.org/tutorials/intro-to-storybook/) page.
---
Developed through my internship at [Foothill Technology Solutions](https://github.com/FoothillSolutions).
Thx to my trainer [@Huthaifa-Dev](https://github.com/Huthaifa-Dev)