[React - Storybook] Selector Update Components UI & Storybook

Job ID: 34968305

Budget: $99 – $100 USD

【Notice】
1. We have a lot of development work, considering technology, quality, schedule and price stability, we prefer to find long-term cooperation with frontend teams, please let me know how many Frontend Teammates you have that can cooperate for a long time
2. We don’t want to wast two parties time, please check you have skill to complete this job :

1. Technical ability is insufficient, the project will be cancelled and no pay but disput ,If necessary, the code you wrote will be published.
2. Minor problem, front-end team will discuss with you until it is completed.
3. Done very well, it will become our long-term outsourcing
---

【Skill stack】
1. React Storybook
2. ReactJS
3. React Material
4. Typescript

---
【Provide First】
Please provide the react storybook reference you ever do before.
This is testing project, this is exist component and job demand is update the UI ,not from scratch.
And all the UI we will update asap , and we want to check the developer has expirence and the refernfce.

---
# Project
## Please must be sure to understand clearly before developing
- [[L] ISMS-01-015 Front-end Development - Architecture & Specification](https://paper.dropbox.com/doc/L-ISMS-01-015-Front-end-Development-Architecture-Specification-TZgIPtemZwVtvPmaOX147#:h2=[L]-ISMS-01-015-Front-end-Deve)
- [Coding Specification](https://paper.dropbox.com/doc/L-ISMS-01-015-Front-end-Development-Architecture-Specification-TZgIPtemZwVtvPmaOX147#:uid=902083922869456272782841&h2=Coding-Specification)
- [Component library introduction](https://paper.dropbox.com/doc/L-ISMS-01-015-Front-end-Development-Architecture-Specification-TZgIPtemZwVtvPmaOX147#:uid=389847008630544294996817&h2=Component-library-introduction)

---
## Budget
USD 80

---
## Deadline
Deadline need to push the code.
- 2022/10/14 18:00 (GMT+8)

---
- [ ] Exist component , need you update
- [ ] Structure :
- Components/ReactSelect
- Default
- WithMultiSelect
- WithDefaultValue
- WithCustomizedOption
- WIthDialog
- WithReduxFormField
- WithImageTitle - New Page
- WithImageTitleContent - New Page
- ![image](https://user-images.githubusercontent.com/10756817/194310479-9625be21-8685-425e-b49a-7f23f6bf4753.png)
- Components/TextLoading
- With Select
- ![image](https://user-images.githubusercontent.com/10756817/195544091-77bc3691-6cd6-47ee-b83f-46d064a635f1.png)
- [ ] Storybook Update
- [Storybook](https://6315727d26061e4ff69beeea-lfqjbcdfze.chromatic.com/?path=/story/components-reactselect--default)
- Design
- [Figma](https://www.figma.com/file/OlUxH6H4u3DLEmeytXgNkV/Infocenter-UI-Kit?node-id=599%3A1731)
- ![image](https://user-images.githubusercontent.com/10756817/195489324-02d20866-e9d9-4da6-89e8-d480b20a9cdb.png)
- ![image](https://user-images.githubusercontent.com/10756817/195544210-2bfc530d-a4f8-4c47-a630-5e21e32d2508.png)
---
## Branch
- Create branch from : branch main
- If the branch exist just use it , if not can create by your self
- “issue/" issue's NO.
- for example
- issue/1009
---
## Goal
- [ ] Follow the naming, package's structure ,
- [ ] Follow the UI Design
- [ ] Follow the UX Prototype Design
- [ ] Implements each status of the component
- [ ] Sync With Figma

---
# Resources
## Figma
- [Figma](https://www.figma.com/file/OlUxH6H4u3DLEmeytXgNkV/Infocenter-UI-Kit?node-id=397%3A3119)

## Storybook
- [Storybook-Chromatic](https://6315727d26061e4ff69beeea-lfqjbcdfze.chromatic.com)

---
# Acceptance
## Function Review
- [ ] Follow the naming, package's structure ,
- [ ] Follow the UI Design
- [ ] Follow the UX Prototype Design
- [ ] Implements each status of the component
- [ ] Sync With Figma

---
## Salary penalty
- Submission over deadline
- Salary deduction 25%/day
- Quality problem
- Salary deduction 1% per questions
- Test by QC team