From 14c08de5541be5a61454d3d3b0d9ff0f4eb7c563 Mon Sep 17 00:00:00 2001 From: neko113 Date: Sun, 25 Sep 2022 15:54:29 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Issue=20#15=20feat=20:=20Card=20Component?= =?UTF-8?q?=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/components/Card/Card.stories.tsx | 52 +++++++++++++++++++++++ packages/components/Card/Card.styles.ts | 37 ++++++++++++++++ packages/components/Card/Card.tsx | 22 ++++++++++ packages/components/Card/index.ts | 1 + 4 files changed, 112 insertions(+) create mode 100644 packages/components/Card/Card.stories.tsx create mode 100644 packages/components/Card/Card.styles.ts create mode 100644 packages/components/Card/Card.tsx create mode 100644 packages/components/Card/index.ts diff --git a/packages/components/Card/Card.stories.tsx b/packages/components/Card/Card.stories.tsx new file mode 100644 index 0000000..84e01a1 --- /dev/null +++ b/packages/components/Card/Card.stories.tsx @@ -0,0 +1,52 @@ +import styled from '@emotion/styled'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { Spacer } from '../../layouts/Spacer'; +import { Card, Props } from './Card'; +import React from 'react'; + +export default { + title: 'Components/Card', + component: Card, +} as ComponentMeta; + +const Template: ComponentStory = (args: Props) => { + return ( + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima officia + eius velit excepturi distinctio, blanditiis sunt, quod architecto + voluptate perspiciatis ea corporis voluptatum, reprehenderit vero harum + ratione animi hic cum. + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima officia + eius velit excepturi distinctio, blanditiis sunt, quod architecto + voluptate perspiciatis ea corporis voluptatum, reprehenderit vero harum + ratione animi hic cum. + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima officia + eius velit excepturi distinctio, blanditiis sunt, quod architecto + voluptate perspiciatis ea corporis voluptatum, reprehenderit vero harum + ratione animi hic cum. + + + ); +}; + +const FlexColumn = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + width: 250px; +`; + +export const Default = Template.bind({}); + +Default.args = { + children: 'A Basic Card', +}; diff --git a/packages/components/Card/Card.styles.ts b/packages/components/Card/Card.styles.ts new file mode 100644 index 0000000..6e900a7 --- /dev/null +++ b/packages/components/Card/Card.styles.ts @@ -0,0 +1,37 @@ +import styled from '@emotion/styled'; +import { css } from '@emotion/react'; +import { CardVariantType } from './Card'; + +export const StyledCard = styled.div<{ + variant: CardVariantType; + isPressable: boolean; +}>` + padding: 20px 12px; + border-radius: 14px; + color: #000; + width: 100%; + height: auto; + display: flex; + flex-direction: column; + justify-content: center; + ${({ variant }) => + variant === 'shadow' && + css` + box-shadow: 0 12px 20px 6px rgba(0, 0, 0, 0.1); + `}; + ${({ variant }) => + variant === 'bordered' && + css` + border: 1px solid #dfe3e6; + `}; + ${({ variant }) => + variant === 'flat' && + css` + background-color: #dfe3e6; + `}; + ${({ isPressable }) => + isPressable && + css` + cursor: pointer; + `} +`; diff --git a/packages/components/Card/Card.tsx b/packages/components/Card/Card.tsx new file mode 100644 index 0000000..eca4240 --- /dev/null +++ b/packages/components/Card/Card.tsx @@ -0,0 +1,22 @@ +import * as S from './Card.styles'; +import React from 'react'; + +export type CardVariantType = 'shadow' | 'flat' | 'bordered'; + +export interface Props { + children: React.ReactNode; + variant?: CardVariantType; + isPressable?: boolean; +} + +export const Card = ({ + children, + variant = 'shadow', + isPressable = false, +}: Props) => { + return ( + + {children} + + ); +}; diff --git a/packages/components/Card/index.ts b/packages/components/Card/index.ts new file mode 100644 index 0000000..1e15afd --- /dev/null +++ b/packages/components/Card/index.ts @@ -0,0 +1 @@ +export { Card } from './Card'; From bb98f0ee344057e820568ad0ccdad104a0a3ed69 Mon Sep 17 00:00:00 2001 From: neko113 Date: Sun, 25 Sep 2022 15:55:03 +0900 Subject: [PATCH 2/4] Issue #15 chore : export Card Component --- packages/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/index.ts b/packages/index.ts index c028476..edbb10b 100644 --- a/packages/index.ts +++ b/packages/index.ts @@ -2,6 +2,7 @@ export { Button } from './components/Button'; export { Checkbox } from './components/Checkbox'; +export { Card } from './components/Card'; // layouts From 5ad7ad1550a1ada02d4079884eeb38340dc7ef38 Mon Sep 17 00:00:00 2001 From: neko113 Date: Sun, 25 Sep 2022 15:58:33 +0900 Subject: [PATCH 3/4] v1.0.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fff3cf1..9a0ade3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "wap-ui", - "version": "1.0.0", + "version": "1.0.8", "repository": "https://github.com/neko113/wap-ui.git", "author": "neko113 ", "license": "MIT", From 640f6e70712a3fa6f8fa044c5bfad8ebac41d402 Mon Sep 17 00:00:00 2001 From: neko113 Date: Sun, 25 Sep 2022 16:19:59 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Issue=20#15=20chore=20:=20README.md=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7a8a2a3..691b4c3 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,24 @@ -# 2022_2_WAP_WEB_TEAM1 -🌊 Awesome React Component Libraray "wap-ui" .💦 +#
🌊 WAP-UI 💦
+ +#
Awesome React Component Libraray
+ +## `Installing WAP-UI` + +```sh +yarn add wap-ui @emotion/react @emotion/styled framer-motion +# or +npm i wap-ui @emotion/react @emotion/styled framer-motion +``` + +## `Usage` + +```jsx +import React from 'react'; +import { Button } from 'wap-ui'; + +const App = () => { + return ; +}; + +export default App; +```