https://github.com/ybrusentsov/dao-test-task
https://github.com/ybrusentsov/dao-test-task
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/ybrusentsov/dao-test-task
- Owner: ybrusentsov
- Created: 2020-08-09T13:57:11.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-10T14:26:15.000Z (almost 6 years ago)
- Last Synced: 2025-02-04T11:52:44.244Z (over 1 year ago)
- Language: TypeScript
- Size: 153 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Привет
Это ваша тестовая задача на позицию front-end developer в компании DAO.
Необходимо сверстать небольшой виджет переключения цены и добавления товара в корзину.
### [Дизайн лежит здесь.](https://www.figma.com/file/c4pen0zOuE08xqhInTsqfv/DAO-Front-end-developer-test-task?node-id=0%3A1)
### Что нужно сделать:
1. Сверстать компонент
2. Добавить модель для price option
3. Добавить возможность переключать цену
4. Добавить callback
### Критерии приёма:
1. API компонента включает следующее
1. `prices` – модель ценовой опции
2. `onSubmit` - callback для получения выбранной модели
2. Компонент должен быть responsive и нормально выглядеть на мобильной и десктоп версиях (на ваше усмотрение как конкретно, просто не должно быть визуальных багов)
3. Как закончите – отправьте мне ссылку на репозиторий ответом на вакансию в djinni
### Процесс
1. Весь код можете делить на файлы как удобно
2. Для проверки внешнего API компонента можете использовать файл `src/index.stories.tsx`
3. Для стилей можете использовать любые возможности (`css`, `styled-components`, `inline-css`, `scss`). Но текущий сетап уже сделан с помощью `styled-components`, поэтому, думаю, будет удобнее использовать именно его.
4. Можно использовать хуки и другие преимущества реакта
---
### Как с этим работать:
#### Setup
`npm install`
#### Start
`npm run storybook`
Страница откроется в браузере. Дальше слева в панели найдите `Common/TestApp/Regular`