Skip to content

Commit

Permalink
chore(new-hope): CSF 3 for Modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@kayman233
kayman233 committed Nov 14, 2023
1 parent 33d7ac5 commit f247d98
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 31 deletions.
57 changes: 46 additions & 11 deletions packages/plasma-new-hope/src/examples/plasma_b2c/components/Modal/Modal.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useEffect } from 'react';
import React from 'react';
import { styled } from '@linaria/react';
import { Story, Meta } from '@storybook/react';
import type { ComponentProps } from 'react';
import type { StoryObj, Meta } from '@storybook/react';
import { SSRProvider } from '@salutejs/plasma-core';

import { PopupProvider, popupClasses } from '../Popup/Popup';
Expand Down Expand Up @@ -28,11 +29,42 @@ export default {
control: {
type: 'select',
},
table: { defaultValue: { summary: 'center' } },
},
offsetX: {
control: {
type: 'number',
},
table: { defaultValue: { summary: 0 } },
},
offsetY: {
control: {
type: 'number',
},
table: { defaultValue: { summary: 0 } },
},
closeOnEsc: {
control: {
type: 'boolean',
},
table: { defaultValue: { summary: true } },
},
closeOnOverlayClick: {
control: {
type: 'boolean',
},
table: { defaultValue: { summary: true } },
},
withBlur: {
control: {
type: 'boolean',
},
table: { defaultValue: { summary: false } },
},
},
} as Meta;

type ModalStoryProps = {
type ModalStoryProps = ComponentProps<typeof Modal> & {
placement: string;
offsetX: number;
offsetY: number;
Expand Down Expand Up @@ -89,7 +121,7 @@ const StyledModal = styled(Modal)`
}
`;

export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY, ...rest }) => {
const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: ModalStoryProps) => {
const [isOpenA, setIsOpenA] = React.useState(false);
const [isOpenB, setIsOpenB] = React.useState(false);
const [isOpenC, setIsOpenC] = React.useState(false);
Expand Down Expand Up @@ -158,11 +190,14 @@ export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY,
);
};

ModalDemo.args = {
placement: 'center',
withBlur: false,
closeOnEsc: true,
closeOnOverlayClick: true,
offsetX: 0,
offsetY: 0,
export const ModalDemo: StoryObj<ModalStoryProps> = {
args: {
placement: 'center',
withBlur: false,
closeOnEsc: true,
closeOnOverlayClick: true,
offsetX: 0,
offsetY: 0,
},
render: (args) => <StoryModalDemo {...args} />,
};
55 changes: 45 additions & 10 deletions packages/plasma-new-hope/src/examples/plasma_web/components/Modal/Modal.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { styled } from '@linaria/react';
import { Story, Meta } from '@storybook/react';
import type { ComponentProps } from 'react';
import type { StoryObj, Meta } from '@storybook/react';
import { SSRProvider } from '@salutejs/plasma-core';

import { PopupProvider, popupClasses } from '../Popup/Popup';
Expand Down Expand Up @@ -28,11 +29,42 @@ export default {
control: {
type: 'select',
},
table: { defaultValue: { summary: 'center' } },
},
offsetX: {
control: {
type: 'number',
},
table: { defaultValue: { summary: 0 } },
},
offsetY: {
control: {
type: 'number',
},
table: { defaultValue: { summary: 0 } },
},
closeOnEsc: {
control: {
type: 'boolean',
},
table: { defaultValue: { summary: true } },
},
closeOnOverlayClick: {
control: {
type: 'boolean',
},
table: { defaultValue: { summary: true } },
},
withBlur: {
control: {
type: 'boolean',
},
table: { defaultValue: { summary: false } },
},
},
} as Meta;

type ModalStoryProps = {
type ModalStoryProps = ComponentProps<typeof Modal> & {
placement: string;
offsetX: number;
offsetY: number;
Expand Down Expand Up @@ -89,7 +121,7 @@ const StyledModal = styled(Modal)`
}
`;

export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY, ...rest }) => {
const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: ModalStoryProps) => {
const [isOpenA, setIsOpenA] = React.useState(false);
const [isOpenB, setIsOpenB] = React.useState(false);
const [isOpenC, setIsOpenC] = React.useState(false);
Expand Down Expand Up @@ -158,11 +190,14 @@ export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY,
);
};

ModalDemo.args = {
placement: 'center',
withBlur: false,
closeOnEsc: true,
closeOnOverlayClick: true,
offsetX: 0,
offsetY: 0,
export const ModalDemo: StoryObj<ModalStoryProps> = {
args: {
placement: 'center',
withBlur: false,
closeOnEsc: true,
closeOnOverlayClick: true,
offsetX: 0,
offsetY: 0,
},
render: (args) => <StoryModalDemo {...args} />,
};
55 changes: 45 additions & 10 deletions packages/plasma-new-hope/src/examples/sds_engineer/components/Modal/Modal.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { styled } from '@linaria/react';
import { Story, Meta } from '@storybook/react';
import type { ComponentProps } from 'react';
import type { StoryObj, Meta } from '@storybook/react';
import { SSRProvider } from '@salutejs/plasma-core';

import { PopupProvider, popupClasses } from '../Popup/Popup';
Expand Down Expand Up @@ -28,11 +29,42 @@ export default {
control: {
type: 'select',
},
table: { defaultValue: { summary: 'center' } },
},
offsetX: {
control: {
type: 'number',
},
table: { defaultValue: { summary: 0 } },
},
offsetY: {
control: {
type: 'number',
},
table: { defaultValue: { summary: 0 } },
},
closeOnEsc: {
control: {
type: 'boolean',
},
table: { defaultValue: { summary: true } },
},
closeOnOverlayClick: {
control: {
type: 'boolean',
},
table: { defaultValue: { summary: true } },
},
withBlur: {
control: {
type: 'boolean',
},
table: { defaultValue: { summary: false } },
},
},
} as Meta;

type ModalStoryProps = {
type ModalStoryProps = ComponentProps<typeof Modal> & {
placement: string;
offsetX: number;
offsetY: number;
Expand Down Expand Up @@ -89,7 +121,7 @@ const StyledModal = styled(Modal)`
}
`;

export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY, ...rest }) => {
const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: ModalStoryProps) => {
const [isOpenA, setIsOpenA] = React.useState(false);
const [isOpenB, setIsOpenB] = React.useState(false);
const [isOpenC, setIsOpenC] = React.useState(false);
Expand Down Expand Up @@ -158,11 +190,14 @@ export const ModalDemo: Story<ModalStoryProps> = ({ placement, offsetX, offsetY,
);
};

ModalDemo.args = {
placement: 'center',
withBlur: false,
closeOnEsc: true,
closeOnOverlayClick: true,
offsetX: 0,
offsetY: 0,
export const ModalDemo: StoryObj<ModalStoryProps> = {
args: {
placement: 'center',
withBlur: false,
closeOnEsc: true,
closeOnOverlayClick: true,
offsetX: 0,
offsetY: 0,
},
render: (args) => <StoryModalDemo {...args} />,
};

0 comments on commit f247d98

Please sign in to comment.