dry_wash_inc/dry-wash-pl
dry_wash_inc/dry-wash-pl
4
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: generate landing stub types outside (#33)

Browse Source
This commit is contained in:
RustamRu 2024-11-25 23:37:14 +03:00
parent 409c339b3c
commit 012de3c670
13 changed files with 78 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -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

170
package-lock.json generated
View File

@ -36,7 +36,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"
}
},
@ -2866,20 +2865,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",
@ -7050,20 +7035,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",
@ -7860,32 +7831,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",
@ -7948,32 +7893,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",
@ -8122,32 +8041,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",
@ -10503,36 +10396,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",
@ -10833,23 +10696,30 @@
"typescript": ">=4.2.0"
}
},
"node_modules/ts-json-as-const": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/ts-json-as-const/-/ts-json-as-const-1.0.7.tgz",
"integrity": "sha512-UMM24g4uBevqBuEqeMUNm2yBEd6VrpJt2hhGWSpmr3nGuhQYwYcLpmxUjsAh5qxJbafF+ICrHvOvHn16zh9Ojg==",
"node_modules/tsconfig-paths": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
"integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
"dev": true,
"license": "ISC",
"license": "MIT",
"dependencies": {
"@dfoverdx/tocamelcase": "^1.0.7",
"isbinaryfile": "^4.0.8",
"json5": "^2.2.0",
"stringify-object": "^4.0.0"
"@types/json5": "^0.0.29",
"json5": "^1.0.2",
"minimist": "^1.2.6",
"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"
},
"peerDependencies": {
"typescript": ">=3"
"json5": "lib/cli.js"
}
},
"node_modules/tslib": {

1
package.json
View File

@ -44,7 +44,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"
}
}

2
src/components/landing/BenefitsSection/BenefitsSection.tsx
View File

@ -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' });

2
src/components/landing/HeroSection/HeroSection.tsx
View File

@ -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' });

2
src/components/landing/SocialProofSection/SocialProofSection.tsx
View File

@ -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' });

1
src/models/landing/index.ts Normal file
View File

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

1
src/models/landing/stubs/index.ts Normal file
View File

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

27
src/models/landing/stubs/success.ts Normal file
View File

@ -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;

16
src/pages/landing/index.tsx
View File

@ -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 { BenefitsSection, Footer, HeroSection, SocialProofSection } from '../../components/landing';
import {
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} />;
}

4
src/pages/landing/types.ts
View File

@ -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'>;

28
stubs/json/landing/landing-success.json.d.ts vendored
View File

@ -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;

0
stubs/json/landing/landing-success.json → stubs/json/landing/success.json
View File