feat: generate landing stub types outside (#33)

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

package-lock.json

@@ -35,7 +35,6 @@
                 "eslint-plugin-react": "^7.37.2",
                 "globals": "^15.11.0",
                 "prettier": "3.3.3",
-                "ts-json-as-const": "^1.0.7",
                 "typescript-eslint": "^8.12.2"
             }
         },
@@ -2865,20 +2864,6 @@
                 "react": ">=18"
             }
         },
-        "node_modules/@dfoverdx/tocamelcase": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/@dfoverdx/tocamelcase/-/tocamelcase-1.0.7.tgz",
-            "integrity": "sha512-QDlMJqwcE4eVCvxxQXp8nh7Nw9m5VQHPCAiyTD+W86Tl89VGhVJRb//RJRZKpn5A/Bq3EQNYDYlepurQ805MOQ==",
-            "dev": true,
-            "license": "ISC"
-        },
-        "node_modules/@dfoverdx/tocamelcase": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/@dfoverdx/tocamelcase/-/tocamelcase-1.0.7.tgz",
-            "integrity": "sha512-QDlMJqwcE4eVCvxxQXp8nh7Nw9m5VQHPCAiyTD+W86Tl89VGhVJRb//RJRZKpn5A/Bq3EQNYDYlepurQ805MOQ==",
-            "dev": true,
-            "license": "ISC"
-        },
         "node_modules/@emotion/babel-plugin": {
             "version": "11.12.0",
             "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
@@ -7044,20 +7029,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/get-own-enumerable-property-symbols": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
-            "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
-            "dev": true,
-            "license": "ISC"
-        },
-        "node_modules/get-own-enumerable-property-symbols": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
-            "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
-            "dev": true,
-            "license": "ISC"
-        },
         "node_modules/get-symbol-description": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
@@ -7854,32 +7825,6 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/is-obj": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-3.0.0.tgz",
-            "integrity": "sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/is-obj": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-3.0.0.tgz",
-            "integrity": "sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/is-path-cwd": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
@@ -7942,32 +7887,6 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/is-regexp": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-3.1.0.tgz",
-            "integrity": "sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
-        "node_modules/is-regexp": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-3.1.0.tgz",
-            "integrity": "sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/sindresorhus"
-            }
-        },
         "node_modules/is-root": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
@@ -8116,32 +8035,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/isbinaryfile": {
-            "version": "4.0.10",
-            "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
-            "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 8.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/gjtorikian/"
-            }
-        },
-        "node_modules/isbinaryfile": {
-            "version": "4.0.10",
-            "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
-            "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 8.0.0"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/gjtorikian/"
-            }
-        },
         "node_modules/isexe": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -10497,36 +10390,6 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/stringify-object": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-4.0.1.tgz",
-            "integrity": "sha512-qpV1FBpN0R1gDAhCHIU71SYGZb35Te+gOQbQ6lYRmVJT7pF1NB8mkHeEJvyYNiHXw+fB4KIbeIjQl1rgiIijiA==",
-            "dev": true,
-            "license": "BSD-2-Clause",
-            "dependencies": {
-                "get-own-enumerable-property-symbols": "^3.0.2",
-                "is-obj": "^3.0.0",
-                "is-regexp": "^3.0.0"
-            },
-            "engines": {
-                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-            }
-        },
-        "node_modules/stringify-object": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-4.0.1.tgz",
-            "integrity": "sha512-qpV1FBpN0R1gDAhCHIU71SYGZb35Te+gOQbQ6lYRmVJT7pF1NB8mkHeEJvyYNiHXw+fB4KIbeIjQl1rgiIijiA==",
-            "dev": true,
-            "license": "BSD-2-Clause",
-            "dependencies": {
-                "get-own-enumerable-property-symbols": "^3.0.2",
-                "is-obj": "^3.0.0",
-                "is-regexp": "^3.0.0"
-            },
-            "engines": {
-                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-            }
-        },
         "node_modules/strip-ansi": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -10827,23 +10690,30 @@
                 "typescript": ">=4.2.0"
             }
         },
-        "node_modules/ts-json-as-const": {
+        "node_modules/tsconfig-paths": {
-            "version": "1.0.7",
+            "version": "3.15.0",
-            "resolved": "https://registry.npmjs.org/ts-json-as-const/-/ts-json-as-const-1.0.7.tgz",
+            "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
-            "integrity": "sha512-UMM24g4uBevqBuEqeMUNm2yBEd6VrpJt2hhGWSpmr3nGuhQYwYcLpmxUjsAh5qxJbafF+ICrHvOvHn16zh9Ojg==",
+            "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
             "dev": true,
-            "license": "ISC",
+            "license": "MIT",
             "dependencies": {
-                "@dfoverdx/tocamelcase": "^1.0.7",
+                "@types/json5": "^0.0.29",
-                "isbinaryfile": "^4.0.8",
+                "json5": "^1.0.2",
-                "json5": "^2.2.0",
+                "minimist": "^1.2.6",
-                "stringify-object": "^4.0.0"
+                "strip-bom": "^3.0.0"
+            }
+        },
+        "node_modules/tsconfig-paths/node_modules/json5": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+            "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "minimist": "^1.2.0"
             },
             "bin": {
-                "ts-json-as-const": "index.js"
+                "json5": "lib/cli.js"
-            },
-            "peerDependencies": {
-                "typescript": ">=3"
             }
         },
         "node_modules/tslib": {

package.json

@@ -43,7 +43,6 @@
         "eslint-plugin-react": "^7.37.2",
         "globals": "^15.11.0",
         "prettier": "3.3.3",
-        "ts-json-as-const": "^1.0.7",
         "typescript-eslint": "^8.12.2"
     }
 }

src/components/landing/BenefitsSection/BenefitsSection.tsx

@@ -9,7 +9,7 @@ import { BenefitsSectionProps } from './types';
 import { iconsMap } from './helper';
 
 export const BenefitsSection: FC<BenefitsSectionProps> = ({
-  data: { heading, description, list },
+  data: { heading, description, list } = {},
 }) => {
   const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
 

src/components/landing/HeroSection/HeroSection.tsx

@@ -8,7 +8,7 @@ import { CtaButton, SiteLogo, PageSection } from '../';
 import { HeroSectionProps } from './types';
 
 export const HeroSection: FC<HeroSectionProps> = ({
-  data: { headline, description, video },
+  data: { headline, description, video } = {},
   flexShrink,
 }) => {
   const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });

src/components/landing/SocialProofSection/SocialProofSection.tsx

@@ -8,7 +8,7 @@ import { ReviewsSlider } from './ReviewsSlider';
 import { SocialProofSectionProps } from './types';
 
 export const SocialProofSection: FC<SocialProofSectionProps> = ({
-  data: { heading },
+  data: { heading } = {},
 }) => {
   const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
 

src/models/landing/index.ts

@@ -0,0 +1 @@
+export * from './stubs';

src/models/landing/stubs/index.ts

@@ -0,0 +1 @@
+export { default as LandingSuccessStub } from './success';

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;

src/pages/landing/index.tsx

@@ -1,9 +1,17 @@
 import React, { FC } from 'react';
 import { Container, VStack } from '@chakra-ui/react';
 
-import LandingSuccess from '../../../stubs/json/landing/landing-success.json';
+import {
-import { BenefitsSection, Footer, HeroSection, SocialProofSection } from '../../components/landing';
+  BenefitsSection,
+  Footer,
+  HeroSection,
+  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';
 
@@ -20,11 +28,11 @@ const Page: FC = () => {
       >
         <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
           <HeroSection
-            data={LandingSuccess.body['hero-section']}
+            data={landingSuccessStub['body']['hero-section']}
             flexShrink={0}
           />
           <VStack as='main' flexGrow={1}>
-            {LandingSuccess.body.sections.map(({ type, ...data }, i) => {
+            {landingSuccessStub.body.sections.map(({ type, ...data }, i) => {
               if (isBenefitsSectionData(type, data)) {
                 return <BenefitsSection key={i} data={data} />;
               }

src/pages/landing/types.ts

@@ -1,8 +1,8 @@
-import LandingSuccess from "../../../stubs/json/landing/landing-success.json";
+import LandingSuccess from "../../../stubs/json/landing/success.json";
 import { BenefitsSectionProps, SocialProofSectionProps } from "../../components/landing";
 import { ArrElement } from "../../lib";
 
-type SectionsItemData = ArrElement<LandingSuccess['body']['sections']>;
+type SectionsItemData = ArrElement<typeof LandingSuccess['body']['sections']>;
 type SectionType = SectionsItemData['type'];
 type SectionData = Omit<SectionsItemData, 'type'>;
 

stubs/json/landing/landing-success.json.d.ts

@@ -1,28 +0,0 @@
-interface LandingSuccess {
-  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'}
-    ]
-  }
-}
-
-declare const LandingSuccess: LandingSuccess;
-
-export = LandingSuccess;