Merge pull request #47 from pknu-wap/refactor/#46/WapUIProvider

Refactor/#46/wap UI provider
pknu-wap · Nov 2, 2022 · aecc548 · aecc548
2 parents 6e3e8b3 + 1c409f4
commit aecc548
Show file tree

Hide file tree

Showing 8 changed files with 284 additions and 30 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,5 +1,4 @@
-import { ThemeProvider } from '@emotion/react';
-import lightTheme from '../packages/theme/light-theme';
+import { WapUIProvider } from '../packages/index';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -13,8 +12,8 @@ export const parameters = {
 
 export const decorators = [
   (Story) => (
-    <ThemeProvider theme={lightTheme}>
+    <WapUIProvider>
       <Story />
-    </ThemeProvider>
+    </WapUIProvider>
   ),
 ];
diff --git a/README.md b/README.md
@@ -13,6 +13,22 @@ npm i wap-ui @emotion/react @emotion/styled framer-motion
 
 ## `Usage`
 
+```jsx
+import React from 'react';
+
+// 1. import `WapUIProvider` component
+import { ChakraProvider } from '@chakra-ui/react';
+
+function App() {
+  // 2. Wrap WapUIProvider at the root of your app
+  return (
+    <WapUIProvider>
+      <WriteYourCode />
+    </WapUIProvider>
+  );
+}
+```
+
 ```jsx
 import React from 'react';
 import { Button } from 'wap-ui';

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "wap-ui",
-  "version": "1.1.2",
-  "repository": "https://github.com/neko113/wap-ui.git",
+  "version": "1.1.4",
+  "repository": "https://github.com/pknu-wap/2022_2_WAP_WEB_TEAM1.git",
   "author": "neko113 <alstn113@gmail.com>",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -72,5 +72,16 @@
   "dependencies": {},
   "files": [
     "dist"
+  ],
+  "keywords": [
+    "react",
+    "emotion",
+    "framer-motion",
+    "ui",
+    "components",
+    "react-component-library",
+    "react-ui-kit",
+    "wap",
+    "design-system"
   ]
 }
diff --git a/packages/components/Button/Button.stories.tsx b/packages/components/Button/Button.stories.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
+import styled from '@emotion/styled';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { Spacer } from '../../layouts/Spacer';
 import { Button, Props } from './Button';
 
 export default {
@@ -8,11 +10,77 @@ export default {
 } as ComponentMeta<typeof Button>;
 
 const Template: ComponentStory<typeof Button> = (args: Props) => (
-  <Button {...args} />
+  <FlexColumn>
+    <Button {...args} />
+  </FlexColumn>
 );
 
 export const Default = Template.bind({});
 
 Default.args = {
-  children: 'Button',
+  children: 'Default',
 };
+
+export const Size = () => {
+  return (
+    <FlexColumn>
+      <Button shadow size="sm">
+        sm
+      </Button>
+      <Spacer />
+      <Button shadow size="md">
+        md
+      </Button>
+      <Spacer />
+      <Button shadow size="lg">
+        lg
+      </Button>
+      <Spacer />
+      <Button shadow size="auto">
+        auto
+      </Button>
+    </FlexColumn>
+  );
+};
+
+export const Color = () => {
+  return (
+    <FlexColumn>
+      <Button shadow color="primary">
+        primary
+      </Button>
+      <Spacer />
+      <Button shadow color="error">
+        error
+      </Button>
+      <Spacer />
+      <Button shadow color="secondary">
+        secondary
+      </Button>
+      <Spacer />
+      <Button shadow color="success">
+        success
+      </Button>
+      <Spacer />
+      <Button shadow color="warning">
+        warning
+      </Button>
+    </FlexColumn>
+  );
+};
+
+export const Shadow = () => {
+  return (
+    <FlexColumn>
+      <Button>default</Button>
+      <Spacer />
+      <Button shadow>shadow</Button>
+    </FlexColumn>
+  );
+};
+
+const FlexColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
diff --git a/packages/components/Button/Button.styles.ts b/packages/components/Button/Button.styles.ts
@@ -8,8 +8,6 @@ export const StyledButton = styled.button<{
   color: NormalColorType;
   shadow: boolean;
 }>`
-  box-sizing: border-box;
-  border: none;
   background: ${({ color }) => palette[color]};
   color: #fff;
   border-radius: 0.7rem;
@@ -24,32 +22,22 @@ export const StyledButton = styled.button<{
       border-radius: 0.5rem;
       padding: 0.5rem 1rem;
       min-width: 50px;
-      width: 75px;
       line-height: 15px;
       font-size: 13px;
     `}
-  ${({ size }) =>
-    size === 'md' &&
-    css`
-      border-radius: 0.5rem;
-      padding: 0.5rem 1rem;
-      width: 100px;
-      line-height: 16px;
-      font-size: 16px;
-    `}
   ${({ size }) =>
     size === 'lg' &&
     css`
-      width: 150px;
+      min-width: 150px;
       line-height: 25px;
       font-size: 20px;
     `}
-  ${({ size }) =>
+    ${({ size }) =>
     size === 'auto' &&
     css`
       width: 100%;
     `}
-  ${({ shadow, color }) =>
+    ${({ shadow, color }) =>
     shadow &&
     css`
       box-shadow: 0 4px 14px 0 ${palette[color]};

diff --git a/packages/components/Checkbox/Checkbox.stories.tsx b/packages/components/Checkbox/Checkbox.stories.tsx
@@ -32,9 +32,8 @@ const Template: ComponentStory<typeof Checkbox> = (_: Props) => {
   return (
     <FlexColumn>
       {CHECKBOX_LIST.map((checkbox) => (
-        <>
+        <FlexColumn key={checkbox.id}>
           <Checkbox
-            key={checkbox.id}
             color={checkbox.data}
             labelText={checkbox.data}
             value={checkbox.data}
@@ -45,7 +44,7 @@ const Template: ComponentStory<typeof Checkbox> = (_: Props) => {
             checked={selected.includes(checkbox.data) ? true : false}
           />
           <Spacer />
-        </>
+        </FlexColumn>
       ))}
       <div>Selected : {selected.join(', ')}</div>
     </FlexColumn>

diff --git a/packages/theme/GlobalStyle.tsx b/packages/theme/GlobalStyle.tsx
@@ -0,0 +1,164 @@
+import { Global, css } from '@emotion/react';
+import React from 'react';
+
+const GlobalStyle = () => {
+  return (
+    <>
+      <Global
+        styles={css`
+          ${reset}
+          * {
+            box-sizing: border-box;
+          }
+          input {
+            outline: none;
+            border: none;
+          }
+          button {
+            border: none;
+            outline: none;
+            background: none;
+            cursor: pointer;
+          }
+          a {
+            text-decoration: none;
+          }
+        `}
+      />
+    </>
+  );
+};
+
+const reset = css`
+  /* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+`;
+
+export default GlobalStyle;