Skip to content

Commit ec9ddd9

Browse files
HyunsDevHyunsDev
authored
Merge pull request #1 from HyunsDev:develop
🚀 Deploy 0.1.0
2 parents 4bc5fe3 + 45b48ae commit ec9ddd9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+2804
-17
lines changed

‎.storybook/manager.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { addons } from '@storybook/addons';
2+
import Theme from './theme';
3+
4+
addons.setConfig({
5+
theme: Theme,
6+
});

‎.storybook/theme.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { create } from '@storybook/theming';
2+
3+
export default create({
4+
base: 'light',
5+
brandTitle: 'Opize Storybook',
6+
brandUrl: 'https://design.opize.me',
7+
brandImage: 'https://media.discordapp.net/attachments/761930839893606400/1002916670710497332/unknown.png',
8+
brandTarget: '_self',
9+
});

‎package.json‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,24 @@
11
{
22
"name": "opize-design-system",
33
"version": "0.1.0",
4-
"private": true,
4+
"private": false,
5+
"license": "MIT",
6+
"description": "Opize Design System",
7+
"homepage": "https://github.com/HyunsDev/opize-design-system",
8+
"author": "Opize <[email protected]> (https://opize.me)",
9+
"module": "dist/index.js",
10+
"main": "dist/index.js",
11+
"types": "dist/index.d.ts",
12+
"bugs": {
13+
"url": "https://github.com/HyunsDev/opize-design-system/issues",
14+
"email": "[email protected]"
15+
},
16+
"babel": {
17+
"presets": [
18+
"@babel/preset-react",
19+
"@babel/preset-typescript"
20+
]
21+
},
522
"dependencies": {
623
"@testing-library/jest-dom": "^5.14.1",
724
"@testing-library/react": "^13.0.0",
@@ -10,9 +27,14 @@
1027
"@types/node": "^16.7.13",
1128
"@types/react": "^18.0.0",
1229
"@types/react-dom": "^18.0.0",
30+
"@types/styled-components": "^5.1.25",
31+
"phosphor-react": "^1.4.1",
1332
"react": "^18.2.0",
1433
"react-dom": "^18.2.0",
34+
"react-router-dom": "^6.3.0",
1535
"react-scripts": "5.0.1",
36+
"react-syntax-highlighter": "^15.5.0",
37+
"styled-components": "^5.3.5",
1638
"typescript": "^4.4.2",
1739
"web-vitals": "^2.1.0"
1840
},
@@ -22,7 +44,8 @@
2244
"test": "react-scripts test",
2345
"eject": "react-scripts eject",
2446
"storybook": "start-storybook -p 6006 -s public",
25-
"build-storybook": "build-storybook -s public"
47+
"build-storybook": "build-storybook -s public",
48+
"publish:npm": "rmdir dist /s /q && mkdir dist && babel src/lib -d dist --copy-files --extensions \".ts,.tsx\" --ignore \"src/**/*.stories.tsx\" --no-copy-ignored && tsc --p tsconfig.module.json"
2649
},
2750
"eslintConfig": {
2851
"extends": [
@@ -53,6 +76,9 @@
5376
]
5477
},
5578
"devDependencies": {
79+
"@babel/cli": "^7.17.6",
80+
"@babel/preset-react": "^7.16.7",
81+
"@babel/preset-typescript": "^7.16.7",
5682
"@storybook/addon-actions": "^6.5.9",
5783
"@storybook/addon-essentials": "^6.5.9",
5884
"@storybook/addon-interactions": "^6.5.9",
@@ -63,6 +89,7 @@
6389
"@storybook/preset-create-react-app": "^4.1.2",
6490
"@storybook/react": "^6.5.9",
6591
"@storybook/testing-library": "^0.0.13",
92+
"@types/react-router-dom": "^5.3.3",
6693
"babel-plugin-named-exports-order": "^0.0.2",
6794
"prop-types": "^15.8.1",
6895
"webpack": "^5.73.0"

‎src/assets/hyuns.jpg‎

83.2 KB
Loading

‎src/lib/components/actionMenu/actionMenu.stories.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React from 'react';
2+
import { ComponentStory, ComponentMeta } from '@storybook/react';
3+
import { DotsThreeVertical, Gear, X } from 'phosphor-react'
4+
5+
import { ActionMenu } from '.';
6+
import styled from 'styled-components';
7+
8+
import profileImg from '../../../assets/hyuns.jpg'
9+
10+
11+
export default {
12+
title: 'Library/actionMenu',
13+
component: ActionMenu,
14+
argTypes: {
15+
// backgroundColor: { control: 'color' },
16+
},
17+
} as ComponentMeta<typeof ActionMenu>;
18+
19+
const Template: ComponentStory<typeof ActionMenu> = (args) => <ActionMenu {...args} />;
20+
21+
export const Primary = Template.bind({});
22+
Primary.args = {
23+
label: 'Label',
24+
icon: <DotsThreeVertical />,
25+
actions: [
26+
[
27+
{
28+
label: '라벨',
29+
icon: <Gear />,
30+
onClick: () => null,
31+
}
32+
], [
33+
{
34+
label: '삭제',
35+
icon: <X />,
36+
onClick: () => null,
37+
color: 'red'
38+
}
39+
]
40+
]
41+
};
42+
43+
export const OnlyLabel = Template.bind({});
44+
OnlyLabel.args = {
45+
label: 'Label',
46+
actions: [
47+
[
48+
{
49+
label: '라벨',
50+
icon: <Gear />,
51+
onClick: () => null,
52+
}
53+
], [
54+
{
55+
label: '삭제',
56+
icon: <X />,
57+
onClick: () => null,
58+
color: 'red'
59+
}
60+
]
61+
]
62+
};
63+
64+
export const OnlyIcon = Template.bind({});
65+
OnlyIcon.args = {
66+
icon: <DotsThreeVertical />,
67+
actions: [
68+
[
69+
{
70+
label: '라벨',
71+
icon: <Gear />,
72+
onClick: () => null,
73+
}
74+
], [
75+
{
76+
label: '삭제',
77+
icon: <X />,
78+
onClick: () => null,
79+
color: 'red'
80+
}
81+
]
82+
]
83+
};
84+
85+
const RightPos = styled.div`
86+
float: right;
87+
`
88+
89+
const TemplateRight: ComponentStory<typeof ActionMenu> = (args) => <RightPos><ActionMenu {...args} /></RightPos>;
90+
export const Right = TemplateRight.bind({});
91+
Right.args = {
92+
icon: <DotsThreeVertical />,
93+
actions: [
94+
[
95+
{
96+
label: '라벨',
97+
icon: <Gear />,
98+
onClick: () => null,
99+
}
100+
], [
101+
{
102+
label: '삭제',
103+
icon: <X />,
104+
onClick: () => null,
105+
color: 'red'
106+
}
107+
]
108+
]
109+
};
110+
111+
const ProfileImg = styled.img`
112+
width: 28px;
113+
height: 28px;
114+
border-radius: 28px;
115+
`
116+
117+
const AvatarRight: ComponentStory<typeof ActionMenu> = (args) => <RightPos><ActionMenu {...args} /></RightPos>;
118+
export const Avatar = AvatarRight.bind({});
119+
Avatar.args = {
120+
icon: <ProfileImg src={profileImg} alt='' />,
121+
actions: [
122+
[
123+
{
124+
label: '라벨',
125+
icon: <Gear />,
126+
onClick: () => null,
127+
}
128+
], [
129+
{
130+
label: '삭제',
131+
icon: <X />,
132+
onClick: () => null,
133+
color: 'red'
134+
}
135+
]
136+
]
137+
};

0 commit comments

Comments
 (0)