Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#223] 스토리북 처리 안 되어있던 컴포넌트들 스토리북 추가 #237

Merged
merged 4 commits into from
Dec 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 0 additions & 28 deletions apps/client/src/entities/home/GuideVideo/GuideVideo.stories.tsx

This file was deleted.

28 changes: 0 additions & 28 deletions apps/client/src/entities/home/GuideVideo/GuideVideo.tsx

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Meta, StoryObj } from '@storybook/react';

import { WorkspaceSampleButton } from './WorkspaceSampleButton';

const meta: Meta<typeof WorkspaceSampleButton> = {
title: 'entities/home/WorkspaceSampleButton',
component: WorkspaceSampleButton,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof WorkspaceSampleButton>;

export const Default: Story = {};
1 change: 0 additions & 1 deletion apps/client/src/entities/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
export { GuideVideo } from './home/GuideVideo/GuideVideo';
export { WorkspaceItem } from './home/WorkspaceItem/WorkspaceItem';
export { WorkspaceAddBtn } from './home/WorkspaceAddBtn/WorkspaceAddBtn';
export { WorkspaceLoadError } from './home/WorkspaceLoadError/WorkspaceLoadError';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { Meta, StoryObj } from '@storybook/react';

import { ImageTagModalButton } from './ImageTagModalButton';

const meta: Meta<typeof ImageTagModalButton> = {
title: 'entities/workspace/ImageTagModalButton',
component: ImageTagModalButton,
parameters: {
layout: 'centered',
docs: {
description: {
component: 'img 태그 src 속성 적용을 위한 모달창에 사용되는 버튼 컴포넌트',
},
},
},
tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof ImageTagModalButton>;

export const Default: Story = {
args: {
content: '이미지 선택하기',
isBlue: true,
onClick: () => {},
},
render: (args) => {
return (
<ImageTagModalButton content={args.content} isBlue={args.isBlue} onClick={args.onClick} />
);
},
};

export const Close: Story = {
args: {
content: '닫기',
isBlue: false,
onClick: () => {},
},
render: (args) => {
return (
<ImageTagModalButton content={args.content} isBlue={args.isBlue} onClick={args.onClick} />
);
},
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Meta, StoryObj } from '@storybook/react';

import { ImageTagModalHeader } from './ImageTagModalHeader';

const meta: Meta<typeof ImageTagModalHeader> = {
title: 'entities/workspace/ImageTagModalHeader',
component: ImageTagModalHeader,
parameters: {
layout: 'centered',
docs: {
description: {
component: 'img 태그 src 속성 적용을 위한 모달창에 사용되는 헤더',
},
},
},
tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof ImageTagModalHeader>;

export const Default: Story = {
args: {
onClose: () => {},
},
render: (args) => {
return (
<div className="w-80">
<ImageTagModalHeader onClose={args.onClose} />
</div>
);
},
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Meta, StoryObj } from '@storybook/react';

import { ImageTagModalImg } from './ImageTagModalImg';

const meta: Meta<typeof ImageTagModalImg> = {
title: 'entities/workspace/ImageTagModalImg',
component: ImageTagModalImg,
parameters: {
layout: 'centered',
docs: {
description: {
component: 'img 태그 src 속성 적용을 위한 모달창에 사용되는 이미지 미리보기 컴포넌트',
},
},
},
tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof ImageTagModalImg>;

export const Default: Story = {
args: {
imageSrc: `${import.meta.env.VITE_STATIC_STORAGE_URL}boolock_logo.png`,
},
render: (args) => {
return (
<div className="h-32 w-32">
<ImageTagModalImg imageSrc={args.imageSrc} />
</div>
);
},
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { Meta, StoryObj } from '@storybook/react';

import { ImageTagModalList } from './ImageTagModalList';
import { useState } from 'react';
import { useImageModalStore } from '@/shared/store';

const meta: Meta<typeof ImageTagModalList> = {
title: 'entities/workspace/ImageTagModalList',
component: ImageTagModalList,
parameters: {
layout: 'centered',
docs: {
description: {
component: 'img 태그 src 속성 적용을 위한 모달창에 사용되는 이미지 리스트 컴포넌트',
},
},
},
tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof ImageTagModalList>;

export const Default: Story = {
args: {
tagSrc: '/mock/image2.png',
onSetTagSrc: () => {},
},
render: (args) => {
const [tagSrc, setTagSrc] = useState(args.tagSrc);
const mockImageList = new Map([
['example1<png', '/mock/image1.png'],
['example2<png', '/mock/image2.png'],
['example3<png', '/mock/image3.png'],
['example4<png', '/mock/image4.png'],
['example5<png', '/mock/image5.png'],
]);

const imageList = JSON.stringify(Object.fromEntries(mockImageList));

const { setInitialImageList } = useImageModalStore.getState();
setInitialImageList(imageList);

return (
<div className="h-[32rem]">
<ImageTagModalList tagSrc={tagSrc} onSetTagSrc={setTagSrc} />
</div>
);
},
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import { Meta, StoryObj } from '@storybook/react';

import { ImageTagModalListItem } from '../ImageTagModalListItem/ImageTagModalListItem';
import { useState } from 'react';

const meta: Meta<typeof ImageTagModalListItem> = {
title: 'entities/workspace/ImageTagModalListItem',
component: ImageTagModalListItem,
parameters: {
layout: 'centered',
docs: {
description: {
component: 'img 태그 src 속성 적용을 위한 모달창에 사용되는 이미지 리스트 아이템 컴포넌트',
},
},
},
tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof ImageTagModalListItem>;

export const Default: Story = {
args: {
isSelected: false,
onDeleteImage: () => {},
onSelectImage: () => {},
filename: 'logo.png',
},
render: (args) => {
return (
<ImageTagModalListItem
isSelected={args.isSelected}
onDeleteImage={args.onDeleteImage}
onSelectImage={args.onSelectImage}
filename={args.filename}
/>
);
},
};

export const Selected: Story = {
args: {
isSelected: true,
onDeleteImage: () => {},
onSelectImage: () => {},
filename: 'logo.png',
},
render: (args) => {
return (
<ImageTagModalListItem
isSelected={args.isSelected}
onDeleteImage={args.onDeleteImage}
onSelectImage={args.onSelectImage}
filename={args.filename}
/>
);
},
};

export const ActiveAndResize: Story = {
args: {
isSelected: false,
onDeleteImage: () => {},
onSelectImage: () => {},
filename: 'logo.png',
},
render: (args) => {
const [isSelected, setIsSelected] = useState<boolean>(args.isSelected);

return (
<div style={{ width: '400px', resize: 'horizontal', overflow: 'auto' }}>
<ImageTagModalListItem
isSelected={isSelected}
onDeleteImage={args.onDeleteImage}
onSelectImage={() => setIsSelected(!isSelected)}
filename={args.filename}
/>
</div>
);
},
};
27 changes: 27 additions & 0 deletions apps/client/src/pages/ErrorPage/ErrorPage.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Meta, StoryObj } from '@storybook/react';

import { ErrorPage } from './ErrorPage';

const meta: Meta<typeof ErrorPage> = {
title: 'pages/ErrorPage',
component: ErrorPage,
parameters: {
layout: 'fullscreen',
},
decorators: [
(Story) => {
return (
<div className="flex h-screen w-screen flex-1">
<Story />
</div>
);
},
],
tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof ErrorPage>;

export const Default: Story = {};
1 change: 0 additions & 1 deletion apps/client/src/shared/blockly/defineBlocks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,6 @@ export const defineBlocks = (blockContents: TBlockContents) => {
.appendField(
new Blockly.FieldDropdown([
['_blank', '_blank'],
['_self', '_self'],
['_parent', '_parent'],
['_top', '_top'],
]),
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/shared/blockly/htmlBlockContents.ts
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ const linkBlockContents: TBlockInfo[] = [
kind: 'block',
type: addPreviousTypeName('a'),
description:
'다른 페이지나 웹사이트로 이동하는 버튼이에요.\n누르면 새로운 곳으로 가요.\ntarget의 속성은 아래와 같습니다.\nself - 미리보기창에서 열어요.\nblank - 새로운 탭에서 열어요\nparent - 현재 탭에서 열어요\ntop - 현재 탭에서 열어요',
'다른 페이지나 웹사이트로 이동하는 버튼이에요.\n누르면 새로운 곳으로 가요.\ntarget의 속성은 아래와 같습니다.\nblank - 새로운 탭에서 열어요\nparent - 현재 탭에서 열어요\ntop - 현재 탭에서 열어요',
},
];

Expand Down
Loading
Loading