From d236ab1a7b35c614dc5674643fa2dd1cc0349aa1 Mon Sep 17 00:00:00 2001 From: Igor Aralov Date: Wed, 4 Dec 2024 21:13:40 +0300 Subject: [PATCH 1/2] Fix modal form --- src/shared/modal-form/ModalForm.module.scss | 3 --- src/shared/modal-form/ModalForm.tsx | 8 +++----- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/shared/modal-form/ModalForm.module.scss b/src/shared/modal-form/ModalForm.module.scss index 72a1f0258..41b30f745 100644 --- a/src/shared/modal-form/ModalForm.module.scss +++ b/src/shared/modal-form/ModalForm.module.scss @@ -33,6 +33,3 @@ } } -.modal-hide { - display: none; -} diff --git a/src/shared/modal-form/ModalForm.tsx b/src/shared/modal-form/ModalForm.tsx index 88699e282..2f5171ded 100644 --- a/src/shared/modal-form/ModalForm.tsx +++ b/src/shared/modal-form/ModalForm.tsx @@ -1,5 +1,4 @@ import React, { ReactNode, MouseEvent } from 'react'; -import cn from 'clsx'; import s from './ModalForm.module.scss'; type ModalFormProps = { @@ -8,9 +7,9 @@ type ModalFormProps = { onClose?: (event: MouseEvent) => void; }; -export const ModalForm = ({ visible = true, onClose, children }: ModalFormProps) => { - return ( -
+export const ModalForm = ({ visible = true, onClose, children }: ModalFormProps) => + !!visible && ( +
× @@ -19,4 +18,3 @@ export const ModalForm = ({ visible = true, onClose, children }: ModalFormProps)
); -}; From 8341dd3c48679742a27fa24d0dcc0ec51d11c933 Mon Sep 17 00:00:00 2001 From: Igor Aralov Date: Thu, 5 Dec 2024 21:38:16 +0300 Subject: [PATCH 2/2] =?UTF-8?q?[10]=20=D0=A1=D0=BF=D0=B8=D1=81=D0=BA=D0=B8?= =?UTF-8?q?,=20=D0=BA=D0=BB=D1=8E=D1=87=D0=B8,=20=D1=81=D0=BE=D0=B1=D1=8B?= =?UTF-8?q?=D1=82=D0=B8=D1=8F,=20=D0=BF=D0=BE=D1=80=D1=82=D0=B0=D0=BB?= =?UTF-8?q?=D1=8B=20=D0=9C=D0=BE=D0=B4=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=B5?= =?UTF-8?q?=20=D0=BE=D0=BA=D0=BD=D0=BE=20=D0=9A=D0=BE=D0=BC=D0=BF=D0=BE?= =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=82=20=D1=81=D0=BF=D0=B8=D1=81=D0=BA=D0=B0?= =?UTF-8?q?=20=D1=82=D0=BE=D0=B2=D0=B0=D1=80=D0=BE=D0=B2/=D0=BE=D0=BF?= =?UTF-8?q?=D0=B5=D1=80=D0=B0=D1=86=D0=B8=D0=B9=20=D0=94=D0=B8=D0=BD=D0=B0?= =?UTF-8?q?=D0=BC=D0=B8=D1=87=D0=B5=D1=81=D0=BA=D0=BE=D0=B5=20=D0=B4=D0=BE?= =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=82=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D1=80=D0=BE=D0=B2/=D0=BE=D0=BF=D0=B5=D1=80=D0=B0?= =?UTF-8?q?=D1=86=D0=B8=D0=B9=20=D0=9D=D0=BE=D0=B2=D1=8B=D0=B5=20=D0=BE?= =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B4=D0=BE=D0=B1?= =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D1=8F=D1=8E=D1=82=D1=81=D1=8F=20=D1=81=20?= =?UTF-8?q?=D0=BF=D0=BE=D0=BC=D0=BE=D1=89=D1=8C=D1=8E=20IntersectionObserv?= =?UTF-8?q?er?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/homeworks/ts1/3_write.ts | 19 ++- src/homeworks/ts1/data.ts | 122 ++++++++++++++++++ .../OperationContainer.module.scss | 1 - .../OperationDynamicList.module.scss | 5 + .../OperationDynamicList.tsx | 26 ++++ .../OperationListAddMore.module.scss | 5 + .../OperationListAddMore.tsx | 20 +++ .../operation-list/OperationList.module.scss | 5 + .../operation-list/OperationList.tsx | 29 +++++ .../operation/Operation.module.scss | 4 + .../operation/Operation.tsx | 3 +- src/shared/modal-form/ModalForm.tsx | 9 +- .../PortalModalForm.module.scss | 10 ++ .../portal-modal-form/PortalModalForm.tsx | 28 ++++ src/stories/InputToModal.stories.ts | 2 +- src/stories/InputToPortalModal.stories.ts | 13 ++ src/stories/ModalForm.stories.tsx | 2 +- src/stories/OpearationDynamicList.stories.tsx | 13 ++ src/stories/OperationDetail.stories.tsx | 2 +- src/stories/OperationList.stories.tsx | 29 +++++ src/stories/OperationListAddMore.stories.tsx | 13 ++ src/stories/OperationSummary.stories.tsx | 2 +- 22 files changed, 344 insertions(+), 18 deletions(-) create mode 100644 src/shared/icome-expenses-accounting/operation-dynamic-list/OperationDynamicList.module.scss create mode 100644 src/shared/icome-expenses-accounting/operation-dynamic-list/OperationDynamicList.tsx create mode 100644 src/shared/icome-expenses-accounting/operation-list-add-more/OperationListAddMore.module.scss create mode 100644 src/shared/icome-expenses-accounting/operation-list-add-more/OperationListAddMore.tsx create mode 100644 src/shared/icome-expenses-accounting/operation-list/OperationList.module.scss create mode 100644 src/shared/icome-expenses-accounting/operation-list/OperationList.tsx create mode 100644 src/shared/portal-modal-form/PortalModalForm.module.scss create mode 100644 src/shared/portal-modal-form/PortalModalForm.tsx create mode 100644 src/stories/InputToPortalModal.stories.ts create mode 100644 src/stories/OpearationDynamicList.stories.tsx create mode 100644 src/stories/OperationList.stories.tsx create mode 100644 src/stories/OperationListAddMore.stories.tsx diff --git a/src/homeworks/ts1/3_write.ts b/src/homeworks/ts1/3_write.ts index d94010070..f6bdf5c79 100644 --- a/src/homeworks/ts1/3_write.ts +++ b/src/homeworks/ts1/3_write.ts @@ -4,8 +4,7 @@ * Поэтому в идеале чтобы функции возвращали случайные данные, но в то же время не абракадабру. * В целом сделайте так, как вам будет удобно. * */ -import crypto from 'crypto'; -import { names, photos, nouns, adjectives } from './data'; +import { names, photos, nouns, adjectives, bankCategories, bankOperations } from './data'; type Category = { id: string; @@ -24,7 +23,7 @@ type Product = { category: Category; }; -type Operation = Cost | Profit; +export type Operation = Cost | Profit; type Cost = { id: string; @@ -49,30 +48,30 @@ type Profit = { const getRandomItemFromArray = (arr: T[]): T => arr[Math.floor(Math.random() * arr.length)]; const getRandomNumber = (min: number, max: number): number => Math.floor(Math.random() * (max - min + 1)) + min; const getRandomDescription = (nouns: string[], adjectives: string[]): string => { - const fourAdjectives = [...Array(4)].map(() => getRandomItemFromArray(adjectives)).join(' '); + const someAdjectives = [...Array(50)].map(() => getRandomItemFromArray(adjectives)).join(' '); const noun = getRandomItemFromArray(nouns); - return `${fourAdjectives} ${noun}`; + return `${someAdjectives} ${noun}`; }; -const getRandomId = crypto.randomUUID; +const getRandomId = () => `${getRandomNumber(1000, 9999)}-${getRandomNumber(1000, 9999)}`; const createRandomCategory = (): Category => ({ id: getRandomId(), - name: getRandomItemFromArray(names), + name: getRandomItemFromArray(bankCategories), photo: getRandomItemFromArray(photos), }); const createRandomCost = (createdAt: string): Cost => ({ id: getRandomId(), - name: getRandomItemFromArray(names), + name: getRandomItemFromArray(bankOperations), desc: getRandomDescription(nouns, adjectives), createdAt, - amount: getRandomNumber(100, 1000), + amount: getRandomNumber(-100, -1000), category: createRandomCategory(), type: 'Cost', }); const createRandomProfit = (createdAt: string): Profit => ({ id: getRandomId(), - name: getRandomItemFromArray(names), + name: getRandomItemFromArray(bankOperations), desc: getRandomDescription(nouns, adjectives), createdAt, amount: getRandomNumber(100, 1000), diff --git a/src/homeworks/ts1/data.ts b/src/homeworks/ts1/data.ts index 9bd520d32..fe3e440a7 100644 --- a/src/homeworks/ts1/data.ts +++ b/src/homeworks/ts1/data.ts @@ -1,3 +1,125 @@ +export const bankCategories = [ + 'Account Management', + 'Transactions', + 'Loan Services', + 'Credit Card Services', + 'Investment Services', + 'Online and Mobile Banking', + 'Customer Support', + 'Foreign Exchange Services', + 'Other Services', + 'Security Services', + 'Digital Banking', + 'Insurance Services', + 'Financial Planning', + 'Mortgage Services', + 'Business Banking Services', + 'ATM Services', +]; + +export const bankOperations = [ + 'Open Savings Account', + 'Close Savings Account', + 'Open Checking Account', + 'Close Checking Account', + 'Open Fixed Deposit Account', + 'Close Fixed Deposit Account', + 'Open Joint Account', + 'Close Joint Account', + 'Update Account Information', + 'Change Account Type', + 'Deposit Cash', + 'Withdraw Cash', + 'Transfer Funds', + 'Receive Funds', + 'Pay Bills', + 'Online Payment', + 'Recurring Payments', + 'Stop Payment Request', + 'Issue Checks', + 'Cancel Checks', + 'Apply for Personal Loan', + 'Apply for Home Loan', + 'Apply for Auto Loan', + 'Apply for Student Loan', + 'Pay Loan Installment', + 'Pay Loan Off Early', + 'Refinance Loan', + 'Loan Balance Inquiry', + 'Loan Statement Request', + 'Loan Insurance', + 'Apply for Credit Card', + 'Activate Credit Card', + 'Block Credit Card', + 'Unblock Credit Card', + 'Increase Credit Limit', + 'Decrease Credit Limit', + 'Pay Credit Card Bill', + 'Credit Card Balance Inquiry', + 'Report Lost Credit Card', + 'Credit Card Statement Request', + 'Open Investment Account', + 'Close Investment Account', + 'Buy Stocks', + 'Sell Stocks', + 'Buy Bonds', + 'Sell Bonds', + 'Mutual Fund Investment', + 'Withdraw Investment', + 'Investment Account Statement', + 'Investment Advisory Services', + 'Register for Online Banking', + 'Login to Online Banking', + 'Reset Online Banking Password', + 'Mobile Banking Registration', + 'Mobile Banking App Download', + 'Mobile Check Deposit', + 'Online Fund Transfer', + 'View Account Statements', + 'Set Up Alerts', + 'Online Bill Payment', + 'Account Inquiry', + 'Transaction Dispute', + 'Account Lock/Unlock', + 'Complaint Registration', + 'General Banking Information', + 'ATM Card Issues', + 'Branch Locator', + 'Update Contact Details', + 'Request for Document Copies', + 'Fraud Alert Reporting', + 'Currency Exchange', + 'Foreign Currency Account Opening', + 'International Fund Transfer', + 'International Check Deposit', + 'Foreign Currency Loan', + 'Forex Card Application', + 'Forex Card Reload', + 'Forex Card Balance Inquiry', + 'Currency Rate Inquiry', + 'Foreign Draft Issue', + 'Safe Deposit Box Rental', + 'Safe Deposit Box Access', + 'Notary Services', + 'Document Certification', + 'Tax Payment Services', + 'Utility Bill Payments', + 'Property Valuation Services', + 'Mortgage Services', + 'Wealth Management Services', + 'Retirement Planning Services', + 'Activate Two-Factor Authentication', + 'Deactivate Two-Factor Authentication', + 'Change PIN/Password', + 'Set Up Security Questions', + 'Biometric Authentication Setup', + 'Review Security Settings', + 'Security Alerts & Notifications', + 'Anti-Money Laundering Reports', + 'Suspicious Activity Monitoring', + 'Data Privacy Requests', +]; + export const names = [ 'Emma', 'Liam', diff --git a/src/shared/icome-expenses-accounting/operation-container/OperationContainer.module.scss b/src/shared/icome-expenses-accounting/operation-container/OperationContainer.module.scss index 08374062b..6a14ec792 100644 --- a/src/shared/icome-expenses-accounting/operation-container/OperationContainer.module.scss +++ b/src/shared/icome-expenses-accounting/operation-container/OperationContainer.module.scss @@ -3,6 +3,5 @@ border: 1px solid #ddd; border-radius: 5px; padding: 15px; - margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } diff --git a/src/shared/icome-expenses-accounting/operation-dynamic-list/OperationDynamicList.module.scss b/src/shared/icome-expenses-accounting/operation-dynamic-list/OperationDynamicList.module.scss new file mode 100644 index 000000000..0994f9c57 --- /dev/null +++ b/src/shared/icome-expenses-accounting/operation-dynamic-list/OperationDynamicList.module.scss @@ -0,0 +1,5 @@ +.operation-dynamic-list { + display: flex; + flex-direction: column; + gap: 15px; +} \ No newline at end of file diff --git a/src/shared/icome-expenses-accounting/operation-dynamic-list/OperationDynamicList.tsx b/src/shared/icome-expenses-accounting/operation-dynamic-list/OperationDynamicList.tsx new file mode 100644 index 000000000..a724198a4 --- /dev/null +++ b/src/shared/icome-expenses-accounting/operation-dynamic-list/OperationDynamicList.tsx @@ -0,0 +1,26 @@ +import React, { useCallback, useRef, useState } from 'react'; +import { OperationList } from '../operation-list/OperationList'; +import { createRandomOperation, Operation } from '../../../homeworks/ts1/3_write'; +import s from './OperationDynamicList.module.scss'; + +const createOpearation = () => createRandomOperation(new Date().toLocaleDateString()); +const createBatchOperations = (nr: number) => Array.from(Array(nr), () => createOpearation()); + +export const OperationDynamicList = () => { + const [operations, setOperations] = useState(createBatchOperations(5)); + const addMoreOperations = () => setOperations((prev) => [...prev, ...createBatchOperations(5)]); + const observer = useRef(null); + + const lastOperationRef = useCallback((node: HTMLDivElement) => { + observer.current && observer.current.disconnect(); + observer.current = new IntersectionObserver((items) => items[0].isIntersecting && addMoreOperations()); + node && observer.current.observe(node); + }, []); + + return ( +
+ +
+
+ ); +}; diff --git a/src/shared/icome-expenses-accounting/operation-list-add-more/OperationListAddMore.module.scss b/src/shared/icome-expenses-accounting/operation-list-add-more/OperationListAddMore.module.scss new file mode 100644 index 000000000..da70d5209 --- /dev/null +++ b/src/shared/icome-expenses-accounting/operation-list-add-more/OperationListAddMore.module.scss @@ -0,0 +1,5 @@ +.container { + display: flex; + flex-direction: column; + gap: 20px; +} \ No newline at end of file diff --git a/src/shared/icome-expenses-accounting/operation-list-add-more/OperationListAddMore.tsx b/src/shared/icome-expenses-accounting/operation-list-add-more/OperationListAddMore.tsx new file mode 100644 index 000000000..885108573 --- /dev/null +++ b/src/shared/icome-expenses-accounting/operation-list-add-more/OperationListAddMore.tsx @@ -0,0 +1,20 @@ +import React, { useState } from 'react'; +import { OperationList } from '../operation-list/OperationList'; +import { Button } from '../../button/Button'; +import { createRandomOperation, Operation } from '../../../homeworks/ts1/3_write'; +import s from './OperationListAddMore.module.scss'; + +const createOpearation = () => createRandomOperation(new Date().toLocaleDateString()); +const createBatchOperations = (nr: number) => Array.from(Array(nr), () => createOpearation()); + +export const OperationListAddMore = () => { + const [operations, setOperations] = useState(createBatchOperations(2)); + const addMoreOperations = () => setOperations((prev) => [...prev, ...createBatchOperations(2)]); + + return ( +
+ + +
+ ); +}; diff --git a/src/shared/icome-expenses-accounting/operation-list/OperationList.module.scss b/src/shared/icome-expenses-accounting/operation-list/OperationList.module.scss new file mode 100644 index 000000000..bf390d6dd --- /dev/null +++ b/src/shared/icome-expenses-accounting/operation-list/OperationList.module.scss @@ -0,0 +1,5 @@ +.operation-list { + display: flex; + flex-direction: column; + gap: 15px; +} \ No newline at end of file diff --git a/src/shared/icome-expenses-accounting/operation-list/OperationList.tsx b/src/shared/icome-expenses-accounting/operation-list/OperationList.tsx new file mode 100644 index 000000000..c89d1aea6 --- /dev/null +++ b/src/shared/icome-expenses-accounting/operation-list/OperationList.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { OperationDetail } from '../operation-detail/OperationDetail'; +import { Operation as OperationProps } from '../../../homeworks/ts1/3_write'; +import s from './OperationList.module.scss'; + +type OperationItemProps = Omit; + +const OperationItem = (data: OperationItemProps) => ( + +); + +type OperationListProps = { + items: OperationProps[]; +}; + +export const OperationList = ({ items }: OperationListProps) => ( +
+ {items.map((item) => { + const { id, ...rest } = item; + return ; + })} +
+); diff --git a/src/shared/icome-expenses-accounting/operation/Operation.module.scss b/src/shared/icome-expenses-accounting/operation/Operation.module.scss index a58796d24..c2137bcfa 100644 --- a/src/shared/icome-expenses-accounting/operation/Operation.module.scss +++ b/src/shared/icome-expenses-accounting/operation/Operation.module.scss @@ -19,3 +19,7 @@ font-weight: bold; margin-top: 10px; } + +.cost { + color: crimson; +} diff --git a/src/shared/icome-expenses-accounting/operation/Operation.tsx b/src/shared/icome-expenses-accounting/operation/Operation.tsx index 522fe000e..f5ee24653 100644 --- a/src/shared/icome-expenses-accounting/operation/Operation.tsx +++ b/src/shared/icome-expenses-accounting/operation/Operation.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import cn from 'clsx'; import s from './Operation.module.scss'; export type OperationProps = { @@ -9,7 +10,7 @@ export type OperationProps = { export const Operation = (data: OperationProps) => ( <> -
{data.amount}
+
{data.amount}
{data.category}
{data.title}
diff --git a/src/shared/modal-form/ModalForm.tsx b/src/shared/modal-form/ModalForm.tsx index 2f5171ded..b8ec9c772 100644 --- a/src/shared/modal-form/ModalForm.tsx +++ b/src/shared/modal-form/ModalForm.tsx @@ -7,8 +7,12 @@ type ModalFormProps = { onClose?: (event: MouseEvent) => void; }; -export const ModalForm = ({ visible = true, onClose, children }: ModalFormProps) => - !!visible && ( +export const ModalForm = ({ visible = true, onClose, children }: ModalFormProps) => { + if (!visible) { + return null; + } + + return (
@@ -18,3 +22,4 @@ export const ModalForm = ({ visible = true, onClose, children }: ModalFormProps)
); +}; diff --git a/src/shared/portal-modal-form/PortalModalForm.module.scss b/src/shared/portal-modal-form/PortalModalForm.module.scss new file mode 100644 index 000000000..d71cf65a2 --- /dev/null +++ b/src/shared/portal-modal-form/PortalModalForm.module.scss @@ -0,0 +1,10 @@ +.portal-modal { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + + input { + align-self: stretch; + } +} diff --git a/src/shared/portal-modal-form/PortalModalForm.tsx b/src/shared/portal-modal-form/PortalModalForm.tsx new file mode 100644 index 000000000..2feeb0eae --- /dev/null +++ b/src/shared/portal-modal-form/PortalModalForm.tsx @@ -0,0 +1,28 @@ +import React, { useState, FormEvent } from 'react'; +import { createPortal } from 'react-dom'; +import { Button } from '../button/Button'; +import { TextInput } from '../text-input/TextInput'; +import { ModalForm } from '../modal-form/ModalForm'; +import s from './PortalModalForm.module.scss'; + +export const PortalModalForm = () => { + const [inputValue, setInputValue] = useState(''); + const [isModalFormVisible, setIsModalFormVisible] = useState(false); + + const openModalForm = () => setIsModalFormVisible(true); + const closeModalForm = () => setIsModalFormVisible(false); + const saveInputValue = (event: FormEvent) => setInputValue(event.currentTarget.value); + + return ( +
+ + + {createPortal( + +

{inputValue}

+ , + document.body + )} +
+ ); +}; diff --git a/src/stories/InputToModal.stories.ts b/src/stories/InputToModal.stories.ts index 316fe5eb7..b44835707 100644 --- a/src/stories/InputToModal.stories.ts +++ b/src/stories/InputToModal.stories.ts @@ -4,7 +4,7 @@ import { StatefullModalForm } from '../shared/statefull-modal-form/StatefullModa const meta: Meta = { component: StatefullModalForm, - title: 'Общее задание/Состояние модального окна', + title: 'Общее задание/Модальное окно/С состоянием', tags: ['autodocs'], parameters: { docs: { diff --git a/src/stories/InputToPortalModal.stories.ts b/src/stories/InputToPortalModal.stories.ts new file mode 100644 index 000000000..acc9f8b36 --- /dev/null +++ b/src/stories/InputToPortalModal.stories.ts @@ -0,0 +1,13 @@ +import type { Meta } from '@storybook/react'; + +import { PortalModalForm } from '../shared/portal-modal-form/PortalModalForm'; + +const meta: Meta = { + component: PortalModalForm, + title: 'Общее задание/Модальное окно/С порталом', + tags: ['autodocs'], +}; + +export default meta; + +export const Test = {}; diff --git a/src/stories/ModalForm.stories.tsx b/src/stories/ModalForm.stories.tsx index e4d70d61d..899486b85 100644 --- a/src/stories/ModalForm.stories.tsx +++ b/src/stories/ModalForm.stories.tsx @@ -13,7 +13,7 @@ const SomeContent = () => ( const meta: Meta = { component: ModalForm, - title: 'Общее задание/Модальное окно', + title: 'Общее задание/Модальное окно/Модальное окно', tags: ['autodocs'], argTypes: { children: { diff --git a/src/stories/OpearationDynamicList.stories.tsx b/src/stories/OpearationDynamicList.stories.tsx new file mode 100644 index 000000000..9bdf4e500 --- /dev/null +++ b/src/stories/OpearationDynamicList.stories.tsx @@ -0,0 +1,13 @@ +import type { Meta } from '@storybook/react'; + +import { OperationDynamicList } from '../shared/icome-expenses-accounting/operation-dynamic-list/OperationDynamicList'; + +const meta: Meta = { + component: OperationDynamicList, + title: 'Учет доходов-расходов/Список операций/Динамический с автодобавлением', + tags: ['autodocs'], +}; + +export default meta; + +export const Test = {}; diff --git a/src/stories/OperationDetail.stories.tsx b/src/stories/OperationDetail.stories.tsx index b2ade689a..7d1fc2782 100644 --- a/src/stories/OperationDetail.stories.tsx +++ b/src/stories/OperationDetail.stories.tsx @@ -4,7 +4,7 @@ import { OperationDetail } from '../shared/icome-expenses-accounting/operation-d const meta: Meta = { component: OperationDetail, - title: 'Учет доходов-расходов/Полная операция', + title: 'Учет доходов-расходов/Операция/Полная', tags: ['autodocs'], }; diff --git a/src/stories/OperationList.stories.tsx b/src/stories/OperationList.stories.tsx new file mode 100644 index 000000000..9599615c3 --- /dev/null +++ b/src/stories/OperationList.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta } from '@storybook/react'; + +import { OperationList } from '../shared/icome-expenses-accounting/operation-list/OperationList'; +import { createRandomOperation } from '../homeworks/ts1/3_write'; + +const meta: Meta = { + component: OperationList, + title: 'Учет доходов-расходов/Список операций/Простой', + tags: ['autodocs'], +}; + +export default meta; + +export const Test = { + args: { + items: [ + createRandomOperation(new Date().toLocaleDateString()), + createRandomOperation(new Date().toLocaleDateString()), + createRandomOperation(new Date().toLocaleDateString()), + createRandomOperation(new Date().toLocaleDateString()), + createRandomOperation(new Date().toLocaleDateString()), + createRandomOperation(new Date().toLocaleDateString()), + createRandomOperation(new Date().toLocaleDateString()), + createRandomOperation(new Date().toLocaleDateString()), + createRandomOperation(new Date().toLocaleDateString()), + createRandomOperation(new Date().toLocaleDateString()), + ], + }, +}; diff --git a/src/stories/OperationListAddMore.stories.tsx b/src/stories/OperationListAddMore.stories.tsx new file mode 100644 index 000000000..a7f41d485 --- /dev/null +++ b/src/stories/OperationListAddMore.stories.tsx @@ -0,0 +1,13 @@ +import type { Meta } from '@storybook/react'; + +import { OperationListAddMore } from '../shared/icome-expenses-accounting/operation-list-add-more/OperationListAddMore'; + +const meta: Meta = { + component: OperationListAddMore, + title: 'Учет доходов-расходов/Список операций/Динамический с кнопкой', + tags: ['autodocs'], +}; + +export default meta; + +export const Test = {}; diff --git a/src/stories/OperationSummary.stories.tsx b/src/stories/OperationSummary.stories.tsx index d3bd83b18..33aadc38c 100644 --- a/src/stories/OperationSummary.stories.tsx +++ b/src/stories/OperationSummary.stories.tsx @@ -4,7 +4,7 @@ import { OperationSummary } from '../shared/icome-expenses-accounting/operation- const meta: Meta = { component: OperationSummary, - title: 'Учет доходов-расходов/Краткая операция', + title: 'Учет доходов-расходов/Операция/Краткая', tags: ['autodocs'], };