feat: generate landing stub types outside (#33 )

feat: create success stubs json with type generation (#33 )
fix: eslint imports order
2024-11-25 23:39:39 +03:00 · 2024-11-25 21:30:14 +03:00 · 2024-11-17 18:39:31 +03:00 · 2024-11-17 18:38:32 +03:00 · 2024-11-17 18:36:57 +03:00 · 2024-11-17 18:36:26 +03:00
38 changed files with 364 additions and 362 deletions
--- a/README.md
+++ b/README.md
@@ -45,10 +45,12 @@
 ### MVP1

 **1. Landing**
+
 - преимущества сервиса
  - оставить заявку (редирект на Страницу оформления заказа)

 **2. Страница для оформления заказа**
+
 - форма
  - номер машины (mask input)
  - цвет машины
@@ -58,10 +60,12 @@
 - после заполнения редирект на страницу с деталями заказа

 **3. Страница с деталями заказа**
+
 - описание заказа
 - детали заказа (id, статус)

 **3. АРМ оператора**
+
 - список заказов (RUD)
  - id заказа
  - статус заказа (готово / не готово)
@@ -72,7 +76,6 @@
  - кнопка "Добавить"
  - кнопка "Удалить"

-
 ### Built With

 [![React][React.js]][React-url]
@@ -103,6 +106,14 @@

 <p align="right">(<a href="#readme-top">back to top</a>)</p>

+## Instructions
+### Stubs types generation
+1. generate types with json-literal-typer (should be installed globally)
+   ```sh
+   npx json-literal-typer -i <path to json> -o <path to output ts-file>
+   ```
+2. export default type from output file
+
 <!-- PARTICIPANTS -->

 ## Participants
--- a/locales/en.json
+++ b/locales/en.json
@@ -13,41 +13,5 @@
  "dry-wash.landing.hero-section.headline": "Revitalize Your Ride with Eco-Friendly Care!",
  "dry-wash.landing.make-order-button": "Make order",
  "dry-wash.landing.site-logo": "The logo of the \"Dry Master\" company",
-  "dry-wash.landing.social-proof-section.heading": "We are being chosen",
-  "dry-wash.arm.master.add": "Add",
-  "dry-wash.arm.order.title": "Orders",
-  "dry-wash.arm.order.status.progress": "In Progress",
-  "dry-wash.arm.order.status.complete": "Completed",
-  "dry-wash.arm.order.status.pending": "Pending",
-  "dry-wash.arm.order.status.working": "Working",
-  "dry-wash.arm.order.status.canceled": "Canceled",
-  "dry-wash.arm.order.status.placeholder": "Select Status",
-  "dry-wash.arm.order.table.header.carNumber": "Car Number",
-  "dry-wash.arm.order.table.header.washingTime": "Washing Time",
-  "dry-wash.arm.order.table.header.orderDate": "Order Date",
-  "dry-wash.arm.order.table.header.status": "Status",
-  "dry-wash.arm.order.table.header.telephone": "Telephone",
-  "dry-wash.arm.order.table.header.location": "Location",
-  "dry-wash.arm.master.title": "Masters",
-  "dry-wash.arm.master.table.header.name": "Name",
-  "dry-wash.arm.master.table.header.currentJob": "Current Job",
-  "dry-wash.arm.master.table.header.phone": "Phone",
-  "dry-wash.arm.master.table.header.actions": "Actions",
-  "dry-wash.arm.master.table.actionsMenu.delete": "Delete Master",
-  "dry-wash.arm.master.drawer.title": "Add New Master",
-  "dry-wash.arm.master.drawer.inputName.label": "Full Name",
-  "dry-wash.arm.master.drawer.inputName.placeholder": "Enter Full Name",
-  "dry-wash.arm.master.drawer.inputPhone.label": "Phone Number",
-  "dry-wash.arm.master.drawer.inputPhone.placeholder": "Enter Phone Number",
-  "dry-wash.arm.master.drawer.button.save": "Save",
-  "dry-wash.arm.master.drawer.button.cancel": "Cancel",
-  "dry-wash.arm.master.sideBar.orders": "Orders",
-  "dry-wash.arm.master.sideBar.master": "Masters",
-  "dry-wash.arm.master.sideBar.title": "Dry Master",
-  "dry-wash.notFound.title": "Page Not Found",
-  "dry-wash.notFound.description": "Unfortunately, the page you are looking for does not exist.",
-  "dry-wash.notFound.button.back": "Back to Home",
-  "dry-wash.errorBoundary.title": "Something went wrong",
-  "dry-wash.errorBoundary.description": "We are already working on fixing the issue",
-  "dry-wash.errorBoundary.button.reload": "Reload Page"
+  "dry-wash.landing.social-proof-section.heading": "We are being chosen"
 }
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -3,7 +3,7 @@
  "dry-wash.arm.order.title": "Заказы",
  "dry-wash.arm.order.status.progress": "Выполняется",
  "dry-wash.arm.order.status.complete": "Завершено",
-  "dry-wash.arm.order.status.pending": "В ожидании",
+  "dry-wash.arm.order.status.pending": "в ожидании",
  "dry-wash.arm.order.status.working": "В работе",
  "dry-wash.arm.order.status.canceled": "Отменено",
  "dry-wash.arm.order.status.placeholder": "Выберите статус",
@@ -26,9 +26,9 @@
  "dry-wash.arm.master.drawer.inputPhone.placeholder": "Введите номер телефона",
  "dry-wash.arm.master.drawer.button.save": "Сохранить",
  "dry-wash.arm.master.drawer.button.cancel": "Отменить",
-  "dry-wash.arm.master.sideBar.orders": "Заказы",
-  "dry-wash.arm.master.sideBar.master": "Мастера",
-  "dry-wash.arm.master.sideBar.title": "Сухой мастер",
+  "dry-wash.arm.master.sideBar.title": " Сухой мастер",
+  "dry-wash.arm.master.sideBar.title.master": "Мастера",
+  "dry-wash.arm.master.sideBar.title.orders": "Заказы",
  "dry-wash.landing.benefits-section.description": "Откройте для себя преимущества наших услуг по химчистке автомобилей",
  "dry-wash.landing.benefits-section.heading": "Преимущества экологичной автомойки",
  "dry-wash.landing.benefits-section.list.0": "Экологически безопасные продукты",
@@ -46,9 +46,8 @@
  "dry-wash.landing.social-proof-section.heading": "Нас выбирают",
  "dry-wash.notFound.title": "Страница не найдена",
  "dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
-  "dry-wash.notFound.button.back": "Вернуться на главную",
+  "dry-wash.notFound.button.back": " Вернуться на главную",
  "dry-wash.errorBoundary.title":"Что-то пошло не так",
-  "dry-wash.errorBoundary.description": "Мы уже работаем над исправлением проблемы",
-  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу",
-  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
+  "dry-wash.errorBoundary.description": " Мы уже работаем над исправлением проблемы",
+  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу"
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,6 @@
                "@fontsource/open-sans": "^5.1.0",
                "@lottiefiles/react-lottie-player": "^3.5.4",
                "@types/react": "^18.3.12",
-                "dayjs": "^1.11.13",
                "express": "^4.21.1",
                "framer-motion": "^6.2.8",
                "i18next": "^23.16.4",
@@ -5305,11 +5304,6 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
-        "node_modules/dayjs": {
-            "version": "1.11.13",
-            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
-            "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
-        },
        "node_modules/debug": {
            "version": "4.3.7",
            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -6964,20 +6958,6 @@
            "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
            "license": "ISC"
        },
-        "node_modules/fsevents": {
-            "version": "2.3.3",
-            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-            "hasInstallScript": true,
-            "license": "MIT",
-            "optional": true,
-            "os": [
-                "darwin"
-            ],
-            "engines": {
-                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-            }
-        },
        "node_modules/function-bind": {
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
        "@fontsource/open-sans": "^5.1.0",
        "@lottiefiles/react-lottie-player": "^3.5.4",
        "@types/react": "^18.3.12",
-        "dayjs": "^1.11.13",
        "express": "^4.21.1",
        "framer-motion": "^6.2.8",
        "i18next": "^23.16.4",
--- a/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -34,16 +34,15 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  render() {
    const { hasError } = this.state;
    //TODO: добавить анимацию после залива 404 страницы
-    //TODO: может сделать обертку для хука, чтоб язык менялся без перезагрузки
    if (hasError) {
      return (
        <Center minH='100vh'>
          <VStack spacing={4} textAlign='center'>
            <Heading as='h1' size='2xl'>
-              {i18next.t('~:dry-wash.errorBoundary.title')}
+              {i18next.t('dry-wash.errorBoundary.title')}
            </Heading>
            <Text fontSize='lg'>
-              {i18next.t('~:dry-wash.errorBoundary.description')}
+              {i18next.t('dry-wash.errorBoundary.description')}
            </Text>
            <Button
              colorScheme='teal'
@@ -51,7 +50,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
              variant='outline'
              onClick={() => window.location.reload()}
            >
-              {i18next.t('~:dry-wash.errorBoundary.button.reload')}
+              {i18next.t('dry-wash.errorBoundary.button.reload')}
            </Button>
          </VStack>
        </Center>
--- a/src/components/MasterActionsMenu/MasterActionsMenu.tsx
+++ b/src/components/MasterActionsMenu/MasterActionsMenu.tsx
@@ -7,18 +7,16 @@ import {
  IconButton,
 } from '@chakra-ui/react';
 import { EditIcon } from '@chakra-ui/icons';
-import { useTranslation } from 'react-i18next';
+import i18next from 'i18next';

 const MasterActionsMenu = () => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.arm.master.table.actionsMenu',
-  });
-
  return (
    <Menu>
      <MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
      <MenuList>
-        <MenuItem>{t('delete')}</MenuItem>
+        <MenuItem>
+          {i18next.t('dry-wash.arm.master.table.actionsMenu.delete')}
+        </MenuItem>
      </MenuList>
    </Menu>
  );
--- a/src/components/MasterDrawer/MasterDrawer.tsx
+++ b/src/components/MasterDrawer/MasterDrawer.tsx
@@ -12,7 +12,7 @@ import {
  DrawerHeader,
  DrawerOverlay,
 } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
+import i18next from 'i18next';

 const MasterDrawer = ({ isOpen, onClose }) => {
  const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
@@ -22,44 +22,51 @@ const MasterDrawer = ({ isOpen, onClose }) => {
    onClose();
  };

-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.arm.master.drawer',
-  });
-
  return (
    <Drawer isOpen={isOpen} onClose={onClose} size='md'>
      <DrawerOverlay />
      <DrawerContent>
        <DrawerCloseButton />
-        <DrawerHeader>{t('title')}</DrawerHeader>
+        <DrawerHeader>
+          {i18next.t('dry-wash.arm.master.drawer.title')}
+        </DrawerHeader>
        <DrawerBody>
          <FormControl mb='4'>
-            <FormLabel>{t('inputName.label')}</FormLabel>
+            <FormLabel>
+              {i18next.t('dry-wash.arm.master.drawer.inputName.label')}
+            </FormLabel>
            <Input
              value={newMaster.name}
              onChange={(e) =>
                setNewMaster({ ...newMaster, name: e.target.value })
              }
-              placeholder={t('inputName.placeholder')}
+              placeholder={i18next.t(
+                'dry-wash.arm.master.drawer.inputName.placeholder',
+              )}
            />
          </FormControl>
          <FormControl>
-            <FormLabel> {t('inputPhone.label')}</FormLabel>
+            <FormLabel>
+              {' '}
+              {i18next.t('dry-wash.arm.master.drawer.inputPhone.label')}
+            </FormLabel>
            <Input
              value={newMaster.phone}
              onChange={(e) =>
                setNewMaster({ ...newMaster, phone: e.target.value })
              }
-              placeholder={t('inputPhone.placeholder')}
+              placeholder={i18next.t(
+                'dry-wash.arm.master.drawer.inputPhone.placeholder',
+              )}
            />
          </FormControl>
        </DrawerBody>
        <DrawerFooter>
          <Button colorScheme='teal' mr={3} onClick={handleSave}>
-            {t('button.save')}
+            {i18next.t('dry-wash.arm.master.drawer.button.save')}
          </Button>
          <Button variant='ghost' onClick={onClose}>
-            {t('button.cancel')}
+            {i18next.t('dry-wash.arm.master.drawer.button.cancel')}
          </Button>
        </DrawerFooter>
      </DrawerContent>
--- a/src/components/MasterItem/MasterItem.tsx
+++ b/src/components/MasterItem/MasterItem.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';

 import MasterActionsMenu from '../MasterActionsMenu';
-import { getTimeSlot } from '../../lib/date-helpers';

 const MasterItem = ({ name, schedule, phone }) => {
  return (
@@ -10,9 +9,9 @@ const MasterItem = ({ name, schedule, phone }) => {
      <Td>{name}</Td>
      <Td>
        <Stack direction='row'>
-          {schedule.map(({ startWashTime, endWashTime }, index) => (
+          {schedule.map((time, index) => (
            <Badge colorScheme={'green'} key={index}>
-              {getTimeSlot(startWashTime, endWashTime)}
+              {time}
            </Badge>
          ))}
        </Stack>
--- a/src/components/Masters/Masters.tsx
+++ b/src/components/Masters/Masters.tsx
@@ -11,44 +11,37 @@ import {
  useDisclosure,
  Flex,
 } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
+import i18next from 'i18next';

+import { mastersData } from '../../mocks';
 import MasterItem from '../MasterItem';
 import MasterDrawer from '../MasterDrawer';
-import data from '../../../stubs/json/arm-masters/success.json';

-const TABLE_HEADERS = [
-  'name' as const,
-  'currentJob' as const,
-  'phone' as const,
-  'actions' as const,
-];
+const TABLE_HEADERS = ['name', 'currentJob', 'phone', 'actions'];

 const Masters = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.arm.master',
-  });
-
  return (
    <Box p='8'>
      <Flex justifyContent='space-between' alignItems='center' mb='5'>
-        <Heading size='lg'> {t('title')}</Heading>
+        <Heading size='lg'> {i18next.t('dry-wash.arm.master.title')}</Heading>
        <Button colorScheme='green' onClick={onOpen}>
-          + {t('add')}
+          + {i18next.t('dry-wash.arm.master.add')}
        </Button>
      </Flex>
      <Table variant='simple' colorScheme='blackAlpha'>
        <Thead>
          <Tr>
            {TABLE_HEADERS.map((name) => (
-              <Th key={name}>{t(`table.header.${name}`)}</Th>
+              <Th key={name}>
+                {i18next.t(`dry-wash.arm.master.table.header.${name}`)}
+              </Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
-          {data.body.map((master, index) => (
+          {mastersData.map((master, index) => (
            <MasterItem key={index} {...master} />
          ))}
        </Tbody>
--- a/src/components/OrderItem/OrderItem.tsx
+++ b/src/components/OrderItem/OrderItem.tsx
@@ -1,60 +1,33 @@
 import React, { useState } from 'react';
 import { Td, Tr, Link, Select } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
+import i18next from 'i18next';

-import { getTimeSlot } from '../../lib/date-helpers';
-
-const statuses = [
-  'pending' as const,
-  'progress' as const,
-  'working' as const,
-  'canceled' as const,
-  'complete' as const,
-];
-
-type GetArrItemType<ArrType> =
-  ArrType extends Array<infer ItemType> ? ItemType : never;
-
-export type OrderProps = {
-  carNumber?: string;
-  startWashTime?: string;
-  endWashTime?: string;
-  orderDate?: string;
-  status?: GetArrItemType<typeof statuses>;
-  phone?: string;
-  location?: string;
-};
+const statuses = ['pending', 'progress', 'working', 'canceled', 'complete'];

 const OrderItem = ({
  carNumber,
-  startWashTime,
-  endWashTime,
+  washTime,
  orderDate,
  status,
  phone,
  location,
-}: OrderProps) => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.arm.order',
-  });
-
+}) => {
  const [statusSelect, setStatus] = useState(status);

  return (
    <Tr>
      <Td>{carNumber}</Td>
-      <Td>{getTimeSlot(startWashTime, endWashTime)}</Td>
-      <Td>{dayjs(orderDate).format('DD.MM.YYYY')}</Td>
+      <Td>{washTime}</Td>
+      <Td>{orderDate}</Td>
      <Td>
        <Select
          value={statusSelect}
-          onChange={(e) => setStatus(e.target.value as OrderProps['status'])}
-          placeholder={t(`status.placeholder`)}
+          onChange={(e) => setStatus(e.target.value)}
+          placeholder={i18next.t(`dry-wash.arm.order.status.placeholder`)}
        >
          {statuses.map((status) => (
            <option key={status} value={status}>
-              {t(`status.${status}`)}
+              {i18next.t(`dry-wash.arm.order.status.${status}`)}
            </option>
          ))}
        </Select>
--- a/src/components/Orders/Orders.tsx
+++ b/src/components/Orders/Orders.tsx
@@ -1,45 +1,36 @@
-import React from 'react';
 import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
+import React from 'react';
+import i18next from 'i18next';

+import { ordersData } from '../../mocks';
 import OrderItem from '../OrderItem';
-import { OrderProps } from '../OrderItem/OrderItem';
-import data from '../../../stubs/json/arm-orders/success.json';
-
 const Orders = () => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.arm.order',
-  });
-
  const TABLE_HEADERS = [
-    'carNumber' as const,
-    'washingTime' as const,
-    'orderDate' as const,
-    'status' as const,
-    'telephone' as const,
-    'location' as const,
+    'carNumber',
+    'washingTime',
+    'orderDate',
+    'status',
+    'telephone',
+    'location',
  ];
-
  return (
    <Box p='8'>
      <Heading size='lg' mb='5'>
-        {t('title')}
+        {i18next.t('dry-wash.arm.order.title')}
      </Heading>
      <Table variant='simple' colorScheme='blackAlpha'>
        <Thead>
          <Tr>
            {TABLE_HEADERS.map((name, key) => (
-              <Th key={key}>{t(`table.header.${name}`)}</Th>
+              <Th key={key}>
+                {i18next.t(`dry-wash.arm.order.table.header.${name}`)}
+              </Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
-          {data.body.map((order, index) => (
-            <OrderItem
-              key={index}
-              {...order}
-              status={order.status as OrderProps['status']}
-            />
+          {ordersData.map((order, index) => (
+            <OrderItem key={index} {...order} />
          ))}
        </Tbody>
      </Table>
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,14 +1,10 @@
-import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
+import { Box, Button, Heading, VStack } from '@chakra-ui/react';
 import React from 'react';
+import { Divider } from '@chakra-ui/react';
+import i18next from 'i18next';
 import { Link } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';

-const Sidebar = () => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.arm.master.sideBar',
-  });
-
-  return (
+const Sidebar = () => (
  <Box
    borderRight='1px solid black'
    bg='gray.50'
@@ -18,7 +14,7 @@ const Sidebar = () => {
    pt='8'
  >
    <Heading color='green' size='lg' mb='5'>
-        {t('title')}
+      {i18next.t(`dry-wash.arm.master.sideBar.title`)}
    </Heading>

    <VStack align='start' spacing='4'>
@@ -30,7 +26,7 @@ const Sidebar = () => {
        colorScheme='green'
        variant='ghost'
      >
-          {t('orders')}
+        {i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
      </Button>
      <Divider />
      <Button
@@ -40,12 +36,11 @@ const Sidebar = () => {
        colorScheme='green'
        variant='ghost'
      >
-          {t('master')}
+        {i18next.t(`dry-wash.arm.master.sideBar.title.master`)}
      </Button>
      <Divider />
    </VStack>
  </Box>
-  );
-};
+);

 export default Sidebar;
--- a/src/components/landing/BenefitsSection/BenefitsSection.tsx
+++ b/src/components/landing/BenefitsSection/BenefitsSection.tsx
@@ -1,52 +1,29 @@
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  MdEco,
-  MdMiscellaneousServices,
-  MdPlace,
-  MdHandshake,
-} from 'react-icons/md';
 import { Heading, HStack, List, Text, VStack } from '@chakra-ui/react';

 import { CtaButton, PageSection } from '../';

 import { ListItem } from './ListItem';
+import { BenefitsSectionProps } from './types';
+import { iconsMap } from './helper';

-export const BenefitsSection: FC = () => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.landing.benefits-section',
-  });
-
-  const listData = [
-    {
-      Icon: MdEco,
-      children: t('list.0'),
-    },
-    {
-      Icon: MdMiscellaneousServices,
-      children: t('list.1'),
-    },
-    {
-      Icon: MdPlace,
-      children: t('list.2'),
-    },
-    {
-      Icon: MdHandshake,
-      children: t('list.3'),
-    },
-  ];
+export const BenefitsSection: FC<BenefitsSectionProps> = ({
+  data: { heading, description, list } = {},
+}) => {
+  const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });

  return (
    <PageSection>
      <VStack w='full' spacing={2}>
-        <Heading as='h2'>{t('heading')}</Heading>
-        <Text>
-          {t('description')}
-        </Text>
+        <Heading as='h2'>{t(heading)}</Heading>
+        <Text>{t(description)}</Text>
      </VStack>
      <List display='flex' flexDirection='column' spacing={3}>
-        {listData.map((props, i) => (
-          <ListItem key={i} {...props} />
+        {list.map((itemKey, i) => (
+          <ListItem key={i} Icon={iconsMap[itemKey]}>
+            {t(itemKey)}
+          </ListItem>
        ))}
      </List>
      <HStack w='full' justify='flex-end'>
--- a/src/components/landing/BenefitsSection/helper.ts
+++ b/src/components/landing/BenefitsSection/helper.ts
@@ -0,0 +1,13 @@
+import { IconType } from "react-icons";
+import { MdEco, MdMiscellaneousServices, MdPlace, MdHandshake } from "react-icons/md";
+
+import { ArrElement } from "../../../lib";
+
+import { BenefitsList } from "./types";
+
+export const iconsMap: Record<ArrElement<BenefitsList>, IconType> = {
+  "benefits-section.list.0": MdEco,
+  "benefits-section.list.1": MdMiscellaneousServices,
+  "benefits-section.list.2": MdPlace,
+  "benefits-section.list.3": MdHandshake,
+};
--- a/src/components/landing/BenefitsSection/index.ts
+++ b/src/components/landing/BenefitsSection/index.ts
@@ -1 +1,2 @@
+export type { BenefitsSectionProps } from './types';
 export { BenefitsSection } from './BenefitsSection';
--- a/src/components/landing/BenefitsSection/types.ts
+++ b/src/components/landing/BenefitsSection/types.ts
@@ -0,0 +1,14 @@
+export type BenefitsList = [
+  'benefits-section.list.0',
+  'benefits-section.list.1',
+  'benefits-section.list.2',
+  'benefits-section.list.3',
+];
+
+export type BenefitsSectionProps = {
+  data: {
+    heading: 'benefits-section.heading';
+    description: 'benefits-section.description';
+    list: BenefitsList;
+  };
+};
--- a/src/components/landing/CtaButton/CtaButton.tsx
+++ b/src/components/landing/CtaButton/CtaButton.tsx
@@ -6,7 +6,7 @@ import { ButtonProps, Button } from '@chakra-ui/react';
 import { URLs } from '../../../__data__/urls';

 export const CtaButton: FC<ButtonProps> = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });

  return (
    <Button
@@ -15,7 +15,7 @@ export const CtaButton: FC<ButtonProps> = (props) => {
      colorScheme='primary'
      {...props}
    >
-      {t('~:dry-wash.landing.make-order-button')}
+      {t('make-order-button')}
    </Button>
  );
 };
--- a/src/components/landing/HeroSection/HeroSection.tsx
+++ b/src/components/landing/HeroSection/HeroSection.tsx
@@ -1,22 +1,23 @@
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Box, Heading, Text, Center, VStack, BoxProps } from '@chakra-ui/react';
+import { Box, Heading, Text, Center, VStack } from '@chakra-ui/react';

 import { DemoVideoPosterImg } from '../../../assets/images';
 import { CtaButton, SiteLogo, PageSection } from '../';

-type HeroSectionProps = Pick<BoxProps, 'flexShrink'>;
+import { HeroSectionProps } from './types';

-export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.landing.hero-section',
-  });
+export const HeroSection: FC<HeroSectionProps> = ({
+  data: { headline, description, video } = {},
+  flexShrink,
+}) => {
+  const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });

  return (
    <Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
      <Box
        as='video'
-        src={`${__webpack_public_path__}/remote-assets/demo.mp4`}
+        src={`${__webpack_public_path__}/remote-assets/${video}`}
        poster={DemoVideoPosterImg}
        autoPlay
        loop
@@ -47,14 +48,14 @@ export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
            color='white'
            __css={{ textWrap: 'balance' }}
          >
-            {t('headline')}
+            {t(headline)}
          </Heading>
          <Text
            textAlign='center'
            __css={{ textWrap: 'balance' }}
            color='white'
          >
-            {t('description')}
+            {t(description)}
          </Text>
        </VStack>
        <CtaButton size='lg' />
--- a/src/components/landing/HeroSection/types.ts
+++ b/src/components/landing/HeroSection/types.ts
@@ -0,0 +1,9 @@
+import { BoxProps } from "@chakra-ui/react";
+
+export type HeroSectionProps = {
+  data: {
+    headline: 'hero-section.headline';
+    description: 'hero-section.description';
+    video: string;
+  };
+} & Pick<BoxProps, 'flexShrink'>;
--- a/src/components/landing/SiteLogo/SiteLogo.tsx
+++ b/src/components/landing/SiteLogo/SiteLogo.tsx
@@ -7,7 +7,7 @@ import { LogoSvg } from '../../../assets/icons';
 export const SiteLogo: FC = () => {
  const { t } = useTranslation();

-  return <Image src={LogoSvg} alt={t('~:dry-wash.landing.site-logo')} w={40} />;
+  return <Image src={LogoSvg} alt={t('dry-wash.landing.site-logo')} w={40} />;
 };

 // todo: replace Image by SVG React component
--- a/src/components/landing/SocialProofSection/SocialProofSection.tsx
+++ b/src/components/landing/SocialProofSection/SocialProofSection.tsx
@@ -5,15 +5,16 @@ import { Heading, HStack } from '@chakra-ui/react';
 import { CtaButton, PageSection } from '../';

 import { ReviewsSlider } from './ReviewsSlider';
+import { SocialProofSectionProps } from './types';

-export const SocialProofSection: FC = () => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.landing.social-proof-section',
-  });
+export const SocialProofSection: FC<SocialProofSectionProps> = ({
+  data: { heading } = {},
+}) => {
+  const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });

  return (
    <PageSection>
-      <Heading as='h2'>{t('heading')}</Heading>
+      <Heading as='h2'>{t(heading)}</Heading>
      <ReviewsSlider />
      <HStack w='full' justify='flex-end'>
        <CtaButton />
--- a/src/components/landing/SocialProofSection/index.ts
+++ b/src/components/landing/SocialProofSection/index.ts
@@ -1 +1,2 @@
+export type { SocialProofSectionProps } from './types';
 export { SocialProofSection } from './SocialProofSection';
--- a/src/components/landing/SocialProofSection/types.ts
+++ b/src/components/landing/SocialProofSection/types.ts
@@ -0,0 +1,5 @@
+export type SocialProofSectionProps = {
+  data: {
+    heading: 'social-proof-section.heading';
+  };
+};
--- a/src/lib/date-helpers.ts
+++ b/src/lib/date-helpers.ts
@@ -1,12 +0,0 @@
-import dayjs from 'dayjs';
-import i18next from 'i18next';
-
-export const getTimeSlot = (start: string, end: string) => {
-  const startDay = dayjs(start).format('HH:mm');
-  const endDay = dayjs(end).format('HH:mm');
-
-  return i18next.t('~:dry-wash.washTime.timeSlot', {
-    start: startDay,
-    end: endDay,
-  });
-};
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -0,0 +1 @@
+export * from './types';
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -0,0 +1,41 @@
+/**
+ * @example type Output = ArrElement<['a', 'b', 'c']>;
+ * // "a" | "b" | "c"
+ */
+export type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[]
+  ? ElementType
+  : never;
+
+/** 
+ * @example type Output = Split<'a.b1' | 'a.b2', '.'>;
+ * // ["a", "b1"] | ["a", "b2"]
+*/
+type Split<S extends string, D extends string> =
+  S extends `${infer A}${D}${infer B}` ? [A, ...Split<B, D>] : [S];
+
+/** 
+ * @example type Output = NestedObject<["a", "b1"] | ["a", "b2"]>;
+ * // { a: { b1: string; }; } | { a: { b2: string; }; }
+*/
+type NestedObject<T extends string[]> =
+  T extends [infer Head, ...infer Tail] ?
+    Head extends string ?
+      { [key in Head]: NestedObject<Tail extends string[] ? Tail : []> } : never :
+    string;
+
+/** 
+ * @example type Output = UnionToIntersection<{ a: { b1: string; }; } | { a: { b2: string; }; }>;
+ * // { a: { b1: string; }; } & { a: { b2: string; }; }
+*/
+type UnionToIntersection<U> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+
+/** 
+ * @example type Output = CreateTree<'a.b1' | 'a.b2', '.'>;
+ * // { a: { b1: string; }; } & { a: { b2: string; }; }
+*/
+export type CreateTree<T> =
+  UnionToIntersection<T extends infer U ?
+    U extends string ?
+      NestedObject<Split<U, '.'>> : never : never>;
--- a/src/mocks/index.ts
+++ b/src/mocks/index.ts
@@ -0,0 +1,35 @@
+export const mastersData = [
+  {
+    id: 'masters1',
+    name: 'Иван Иванов',
+    schedule: ['15:00 - 16:30', '17:00 - 18:00'],
+    phone: '+7 900 123 45 67',
+  },
+  {
+    id: 'masters2',
+    name: 'Сергей Петров',
+    schedule: ['10:00 - 12:30', '14:00 - 15:30', '16:00 - 17:00'],
+    phone: '+7 900 234 56 78',
+  },
+];
+
+export const ordersData = [
+  {
+    id: 'order1',
+    carNumber: 'A123BC',
+    washTime: '10:30',
+    orderDate: '2024-10-31',
+    status: 'progress',
+    phone: '79001234567',
+    location: 'Казань, ул. Баумана, 1',
+  },
+  {
+    id: 'order2',
+    carNumber: 'B456CD',
+    washTime: '11:00',
+    orderDate: '2024-10-31',
+    status: 'complete',
+    phone: '79002345678',
+    location: 'Казань, ул. Кремлёвская, 3',
+  },
+];
--- a/src/models/i18next.d.ts
+++ b/src/models/i18next.d.ts
@@ -1,24 +1,5 @@
 import defaultLocale from '../../locales/ru.json';
-
-type Split<S extends string, D extends string> =
-  S extends `${infer A}${D}${infer B}` ? [A, ...Split<B, D>] : [S];
-
-type NestedObject<T extends string[]> =
-  T extends [infer Head, ...infer Tail] ?
-    Head extends string ?
-      { [key in Head]: NestedObject<Tail extends string[] ? Tail : []> } : never :
-    string;
-
-// Основная утилита для обработки union type
-type CreateTree<T> =
-  UnionToIntersection<T extends infer U ?
-    U extends string ?
-      NestedObject<Split<U, '.'>> : never : never>;
-
-// Утилита для объединения типов
-type UnionToIntersection<U> =
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+import { CreateTree } from '../lib';

 type LanguageResource = CreateTree<keyof typeof defaultLocale>;

@@ -26,6 +7,6 @@ declare module "i18next" {
  interface CustomTypeOptions {
    resources: {
      '~': LanguageResource
-    };
+    }
  }
 }
--- a/src/models/landing/index.ts
+++ b/src/models/landing/index.ts
@@ -0,0 +1 @@
+export * from './stubs';
--- a/src/models/landing/stubs/index.ts
+++ b/src/models/landing/stubs/index.ts
@@ -0,0 +1 @@
+export { default as LandingSuccessStub } from './success';
--- a/src/models/landing/stubs/success.ts
+++ b/src/models/landing/stubs/success.ts
@@ -0,0 +1,27 @@
+// Generated by json-literal-typer
+// <-- BEGIN
+interface HeroXsection {
+  description: "hero-section.description";
+  headline: "hero-section.headline";
+  video: "demo.mp4";
+}
+
+interface Sections {
+  description?: "benefits-section.description";
+  heading: "benefits-section.heading" | "social-proof-section.heading";
+  list?: ("benefits-section.list.0" | "benefits-section.list.1" | "benefits-section.list.2" | "benefits-section.list.3")[];
+  type: "benefits-section" | "social-proof-section";
+}
+
+interface Body {
+  "hero-section": HeroXsection;
+  sections: Sections[];
+}
+
+interface Root {
+  body: Body;
+  success: true;
+}
+// END -->
+
+export default Root;
--- a/src/pages/arm/index.tsx
+++ b/src/pages/arm/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';

 import LayoutArm from '../../components/LayoutArm';

--- a/src/pages/landing/index.tsx
+++ b/src/pages/landing/index.tsx
@@ -8,6 +8,12 @@ import {
  SocialProofSection,
 } from '../../components/landing';
 import { LandingThemeProvider } from '../../containers';
+import { LandingSuccessStub } from '../../models/landing';
+const landingSuccessStub = import(
+  '../../../stubs/json/landing/success.json'
+) as unknown as LandingSuccessStub;
+
+import { isBenefitsSectionData, isSocialProofSectionData } from './types';

 const Page: FC = () => {
  return (
@@ -21,10 +27,19 @@ const Page: FC = () => {
        centerContent
      >
        <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
-          <HeroSection flexShrink={0} />
+          <HeroSection
+            data={landingSuccessStub['body']['hero-section']}
+            flexShrink={0}
+          />
          <VStack as='main' flexGrow={1}>
-            <BenefitsSection />
-            <SocialProofSection />
+            {landingSuccessStub.body.sections.map(({ type, ...data }, i) => {
+              if (isBenefitsSectionData(type, data)) {
+                return <BenefitsSection key={i} data={data} />;
+              }
+              if (isSocialProofSectionData(type, data)) {
+                return <SocialProofSection key={i} data={data} />;
+              }
+            })}
          </VStack>
          <Footer />
        </VStack>
--- a/src/pages/landing/types.ts
+++ b/src/pages/landing/types.ts
@@ -0,0 +1,15 @@
+import LandingSuccess from "../../../stubs/json/landing/success.json";
+import { BenefitsSectionProps, SocialProofSectionProps } from "../../components/landing";
+import { ArrElement } from "../../lib";
+
+type SectionsItemData = ArrElement<typeof LandingSuccess['body']['sections']>;
+type SectionType = SectionsItemData['type'];
+type SectionData = Omit<SectionsItemData, 'type'>;
+
+export const isBenefitsSectionData = (type: SectionType, data: SectionData): data is BenefitsSectionProps['data'] => {
+  return type === 'benefits-section';
+};
+
+export const isSocialProofSectionData = (type: SectionType, data: SectionData): data is SocialProofSectionProps['data'] => {
+  return type === 'social-proof-section';
+};
--- a/stubs/json/arm-masters/success.json
+++ b/stubs/json/arm-masters/success.json
@@ -1,35 +0,0 @@
-{
-  "success": true,
-  "body": [
-    {
-      "id": "masters1",
-      "name": "Иван Иванов",
-      "schedule": [ {
-        "id": "order1",
-        "startWashTime": "2024-11-24T10:30:00.000Z",
-        "endWashTime": "2024-11-24T16:30:00.000Z"
-      },
-        {
-          "id": "order2",
-          "startWashTime": "2024-11-24T11:30:00.000Z",
-          "endWashTime": "2024-11-24T17:30:00.000Z"
-        }],
-      "phone": "+7 900 123 45 67"
-    },
-    {
-      "id": "masters12",
-      "name": "Иван Иванов",
-      "schedule": [ {
-        "id": "order1",
-        "startWashTime": "2024-11-24T10:30:00.000Z",
-        "endWashTime": "2024-11-24T16:30:00.000Z"
-      },
-        {
-          "id": "order2",
-          "startWashTime": "2024-11-24T11:30:00.000Z",
-          "endWashTime": "2024-11-24T17:30:00.000Z"
-        }],
-      "phone": "+7 900 123 45 67"
-    }
-  ]
-}
--- a/stubs/json/arm-orders/success.json
+++ b/stubs/json/arm-orders/success.json
@@ -1,25 +0,0 @@
-{
-  "success": true,
-  "body": [
-    {
-      "id": "order1",
-      "carNumber": "A123BC",
-      "startWashTime": "2024-11-24T10:30:00.000Z",
-      "endWashTime": "2024-11-24T16:30:00.000Z",
-      "orderDate": "2024-11-24T08:41:46.366Z",
-      "status": "progress",
-      "phone": "79001234563",
-      "location": "Казань, ул. Баумана, 1"
-    },
-    {
-      "id": "order2",
-      "carNumber": "A245BC",
-      "startWashTime": "2024-11-24T11:30:00.000Z",
-      "endWashTime": "2024-11-24T17:30:00.000Z",
-      "orderDate": "2024-11-24T07:40:46.366Z",
-      "status": "progress",
-      "phone": "79001234567",
-      "location": "Казань, ул. Баумана, 43"
-    }
-  ]
-}
--- a/stubs/json/landing/success.json
+++ b/stubs/json/landing/success.json
@@ -0,0 +1,27 @@
+{
+  "success": true,
+  "body": {
+    "hero-section": {
+      "headline": "hero-section.headline",
+      "description": "hero-section.description",
+      "video": "demo.mp4"
+    },
+    "sections": [
+      {
+        "type": "benefits-section",
+        "heading": "benefits-section.heading",
+        "description": "benefits-section.description",
+        "list": [
+          "benefits-section.list.0",
+          "benefits-section.list.1",
+          "benefits-section.list.2",
+          "benefits-section.list.3"
+        ]
+      },
+      {
+        "type": "social-proof-section",
+        "heading": "social-proof-section.heading"
+      }
+    ]
+  }
+}
Author	SHA1	Message	Date
RustamRu	d4965b7aba	feat: generate landing stub types outside (#33 ) Some checks failed it-academy/dry-wash-pl/pipeline/pr-main There was a failure building this commit Details	2024-11-25 23:39:39 +03:00
RustamRu	16b4627166	feat: create success stubs json with type generation (#33 ) Some checks failed it-academy/dry-wash-pl/pipeline/pr-main There was a failure building this commit Details	2024-11-25 21:30:14 +03:00
RustamRu	181198c0cb	fix: eslint imports order	2024-11-17 18:39:31 +03:00
RustamRu	5ca3fd2613	feat: apply success stubs to landing content (#33 )	2024-11-17 18:38:32 +03:00
RustamRu	0cd7ec8b22	feat: create success stubs json with type generation (#33 )	2024-11-17 18:36:57 +03:00
RustamRu	66c1323f00	feat: move i18n type utils to lib and describe (#33 )	2024-11-17 18:36:26 +03:00
				`@@ -0,0 +1 @@`
				`export { default as LandingSuccessStub } from './success';`