const calculateDistance = (firstPoint, secondPoint) => {
const deltaX = secondPoint.x - firstPoint.x;
const deltaY = secondPoint.y - firstPoint.y;
return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
};
/** @module Helpers */
/**
* @typedef {Object} Point
* @property {number} x - Координата X.
* @property {number} y - Координата Y.
*/
/**
* Рассчитывает расстояние между двумя точками.
*
* @param {Point} firstPoint - Первая точка.
* @param {Point} secondPoint - Вторая точка.
* @returns {number} Расстояние между точками.
*
* @example
* const firstPoint = { x: 0, y: 0 };
* const secondPoint = { x: 3, y: 4 };
* calculateDistance(firstPoint, secondPoint); // Возвращает 5
*/
const calculateDistance = (firstPoint, secondPoint) => {
const deltaX = secondPoint.x - firstPoint.x;
const deltaY = secondPoint.y - firstPoint.y;
return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
};
npm install jsdoc --save-dev
"jsdoc index.js -d docs"
"source": {
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack'],
});
const ThemeDecoratorProvider = ({ theme, children }: ThemeDecoratorComponentProps) => {
useEffect(() => {
if (theme) {
document.documentElement.setAttribute('data-theme', theme);
return () => {
document.documentElement.removeAttribute('data-theme');
};
}
return undefined;
}, [theme]);
return children;
};
export const ThemeDecorator = (theme?: Theme) => (StoryComponent: StoryFn) => (
<ThemeDecoratorProvider theme={theme}>
<StoryComponent />
</ThemeDecoratorProvider>
);
export const AppLayoutDecorator =
(state: DeepPartial<StateSchema>) => (StoryComponent: StoryFn) => {
const queryClient = new QueryClient();
return (
<SessionProvider session={null}>
<QueryClientProvider client={queryClient}>
<StoreProvider initialState={state}>
<WebSocketProvider>
<MainLayoutDecorator>
<StoryComponent />
</MainLayoutDecorator>
</WebSocketProvider>
</StoreProvider>
</QueryClientProvider>
</SessionProvider>
);
};
export default {
title: 'pages/BidsPage',
component: BidsPage,
parameters: {
layout: 'centered',
},
argTypes: {},
} satisfies Meta<typeof BidsPage>;
const Template: StoryFn = () => <BidsPage />;
const state: DeepPartial<StateSchema> = {
bids: {
entities: {
1: {...данные заявки},
},
page: 0,
isNextPage: false,
isInitialLoading: false,
isRefetchCache: false,
pageSize: 9,
isLoadingMore: false,
ids: [1],
},
folders: {
currentFolder: 'actual',
folders: [
{...данные папки},
],
isFoldersError: false,
isFoldersInitialLoading: false,
},
sellerBids: {
entities: {
1: {...данные заявки},
},
page: 0,
isNextPage: false,
isInitialLoading: false,
isRefetchCache: false,
pageSize: 9,
isLoadingMore: false,
ids: [1],
},
subscriptions: {
subscriptions: [
{...данные подборки},
],
currentSubscription: 'actual',
isSubscriptionsInitialLoading: false,
isSubscriptionsError: false,
},
};
export const BidsPageCustomer = Template.bind({});
BidsPageCustomer.decorators = [ThemeDecorator(Theme.CUSTOMER), AppLayoutDecorator(state)];
export const BidsPageSeller = Template.bind({});
BidsPageSeller.decorators = [ThemeDecorator(Theme.SELLER), AppLayoutDecorator(state)];
export default {
title: 'pages/BidDetail',
component: BidDetail,
parameters: {
layout: 'centered',
},
argTypes: {},
} satisfies Meta<typeof BidDetail>;
const Template: StoryFn<BidDetailProps> = (args: BidDetailProps) => <BidDetail {...args} />;
const args: BidDetailProps = {
id: 1,
count: 1,
created_date: new Date().toDateString(),
bid_photos: [],
customer: {...данные покупателя},
delivery_place: 'Москва',
delivery_type: { id: 4, name: 'ПЭК' },
description: 'Вот такое описание',
find_only_in_my_city: true,
name: 'Название',
number: 4,
offer_id: 5,
offers_count: 6,
originality: true,
photos: [],
published: true,
request_on_order: true,
spare_part_type: { id: 7, name: 'Запчасть' },
taxation: 8,
relevance_in_days: 9,
technique_card: {...данные о технической карточке},
is_favorite: true,
};
export const BidDetailSeller = Template.bind({});
BidDetailSeller.args = args;
BidDetailSeller.decorators = [ThemeDecorator(Theme.SELLER), AppLayoutDecorator({})];
export const BidDetailCustomer = Template.bind({});
BidDetailCustomer.args = args;
BidDetailCustomer.decorators = [ThemeDecorator(Theme.CUSTOMER), AppLayoutDecorator({})];