Merge pull request #82 from pknu-wap/docs/#81/beautify-readme

Docs/#81/beautify readme
pknu-wap · Dec 26, 2022 · 96a8487 · 96a8487
2 parents 6f6c157 + 52aba3b
commit 96a8487
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
     <img src="https://badgen.net/github/license/pknu-wap/wap-ui">
   </a>
   <a href="https://www.npmjs.com/package/@wap-ui/react">
-    <img src="https://img.shields.io/npm/dm/wap-ui.svg?style=flat-round" alt="npm downloads">
+    <img src="https://img.shields.io/npm/dm/@wap-ui/react.svg?style=flat-round" alt="npm downloads">
   </a>
   <img alt="Github Stars" src="https://badgen.net/github/stars/pknu-wap/wap-ui" />
   <img src="https://badgen.net/github/release/pknu-wap/wap-ui">
@@ -22,32 +22,28 @@
 
 ## `Demo`
 
-<table align="center">
+<table align="center" width="100%">
   <tr align="center">
     <td colspan="2">
-      <a href="https://wap-ui.vercel.app/?path=/story/components-button--default">Demo Test</a>
+      <a href="https://wap-ui.vercel.app/?path=/story/components-button--default">Try using it in playground</a>
     </td>
   </tr>
   <tr>
-    <td>
-      <img src="https://user-images.githubusercontent.com/75781414/208494136-402c2f72-c2ed-422b-8569-4a8e6d7d2a6c.gif" width=380 />
+    <td width="50%">
+      <img src="https://user-images.githubusercontent.com/75781414/209562230-7f3e9d0d-fa5f-452c-be92-dfeebb251e48.gif"  />
     </td>
-    <td>
-      <img src="https://user-images.githubusercontent.com/75781414/208494143-7b6160eb-69ca-4b3a-aa96-8945ac424df4.gif" width=380 />
+    <td width="50%">
+      <img src="https://user-images.githubusercontent.com/75781414/209560781-9994d09d-6768-4555-833d-35d6ebe16a11.gif" />
     </td>
   </tr>
-  <tr>
-    <td>
-      <img src="https://user-images.githubusercontent.com/75781414/208494160-27c10e7a-665a-43c0-b76b-9efc4732d74b.gif" width=380 />
-    </td>
-    <td>
-      <img src="https://user-images.githubusercontent.com/75781414/208494166-1c2a715e-201b-4fbe-bdbe-f2309e9f0aab.gif" width=380 />
-    </td>
   </tr>
 </table>
 
 ## `Installing WAP-UI`
 
+To use WAP UI, Install the `@wap-ui/react` package and its peer dependencies.
+(`@emotion/react`, `@emotion/styled`, `framer-motion`)
+
 ```sh
 yarn add @wap-ui/react @emotion/react @emotion/styled framer-motion
 # or
@@ -56,6 +52,10 @@ npm i @wap-ui/react @emotion/react @emotion/styled framer-motion
 
 ## `Usage`
 
+To start using the components, follow these steps:
+
+1. For WAP UI to work correctly, Wrap `WapUIProvider` provided by `@wap-ui/react` at root of your application.
+
 ```tsx
 import React from 'react';
 
@@ -72,6 +72,8 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 );
 ```
 
+2. Bring components what you want and use them.
+
 ```tsx
 import { Button } from '@wap-ui/react';
 
@@ -86,14 +88,60 @@ const Home = () => {
 export default Home;
 ```
 
-## `Contributors`
-
-### [성준영](https://github.com/sjyoung428)<span style="font-size:50%">(소프트웨어·인공지능전공 16학번)</small>
+3. You can refer to the components through Documents or Jsdocs like that.
+<table align="center">
+  <tr>
+    <td align="center">
+      Documents
+    </td>
+    <td align="center">
+      Jsdocs
+    </td>
+  </tr>
+  <tr>
+    <td align="center" >
+      <img src="https://user-images.githubusercontent.com/75781414/209562964-ae0b74b4-c604-4ac7-94d6-b5f0a3cb4a02.png" width="100%" />
+    </td>
+    <td align="center">
+      <img src="https://user-images.githubusercontent.com/75781414/209560523-74cb3b4e-f1e9-4a5d-a5e1-ae54c2aa4150.png" width="100%" />
+    </td>
+  </tr>  
+</table>
 
-### [이예슬](https://github.com/mimpie)<span style="font-size:50%">(소프트웨어·인공지능전공 21학번)</small>
+## `Contributors`
 
-### [김민수](https://github.com/neko113)<span style="font-size:50%">(컴퓨터공학전공 19학번)</small>
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/neko113">
+        <img src="https://avatars.githubusercontent.com/u/75781414?v=4" width="120px;"/>
+        <br />
+        <a href="https://github.com/pknu-wap/wap-ui/commits/main?author=neko113" title="Code">neko113 💻</a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/sjyoung428">
+        <img src="https://avatars.githubusercontent.com/u/77968955?v=4" width="120px;"/>
+        <br />
+        <a href="https://github.com/pknu-wap/wap-ui/commits/main?author=sjyoung428" title="Code">sjyoung428 💻</a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/mimpie">
+        <img src="https://avatars.githubusercontent.com/u/108365477?v=4" width="120px;"/>
+        <br />
+        <a href="https://github.com/pknu-wap/wap-ui/commits/main?author=mimpie" title="Code">mimpie 💻</a>
+    </td>
+  </tr>
+  <tr>
+    <td align="center">컴공19 김민수</td>
+    <td align="center">컴공16 성준영</td>
+    <td align="center">컴공21 이예슬</td>
+  </tr>
+</table>
 
 ## `Links`
 
-### [Docs](https://github.com/pknu-wap/wap-ui/tree/main/docs) / [NPM](https://www.npmjs.com/package/wap-ui) / [Storybook](https://wap-ui.vercel.app/) / [PPT](https://github.com/pknu-wap/wap-ui/tree/main/ppt) / [Example](https://github.com/pknu-wap/wap-ui/tree/main/example)
+- #### [Documents](https://github.com/pknu-wap/wap-ui/tree/main/docs)
+- #### [NPM](https://www.npmjs.com/package/wap-ui)
+- #### [Playground](https://wap-ui.vercel.app/)
+- #### [Presentations](https://github.com/pknu-wap/wap-ui/tree/main/ppt)
+- #### [Example](https://github.com/pknu-wap/wap-ui/tree/main/example)
diff --git a/example/react-ts/package.json b/example/react-ts/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@wap-ui/react": "^1.3.0",
+    "@wap-ui/react": "^1.3.2",
     "framer-motion": "^7.6.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/example/react-ts/yarn.lock b/example/react-ts/yarn.lock
@@ -567,10 +567,10 @@
     magic-string "^0.26.7"
     react-refresh "^0.14.0"
 
-"@wap-ui/react@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@wap-ui/react/-/react-1.3.0.tgz#6570a875536e723643184cc1330f594c9672c6b2"
-  integrity sha512-vqYEfCOIUU8oinkGe+oV2MNnXwt8EhleZgz5N4ekfjt7/uhRovnMNFhbjrIKMOr1id9BCYbmts1pxBud8MdZKg==
+"@wap-ui/react@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@wap-ui/react/-/react-1.3.2.tgz#000708a4851ee01f6611c1f3b0e1c30a291d62c6"
+  integrity sha512-B9tvID8PuFepEy2z5+iQFpHykqmdneeRgRFKs9T4o3PjraB84lCTlbxqfnNeX+IA34+LLr6EtH2Sg9BAzlUOBA==
   dependencies:
     "@emotion/react" "^11.10.4"
     "@emotion/styled" "^11.10.4"

diff --git a/packages/react/README.md b/packages/react/README.md
@@ -8,7 +8,7 @@
     <img src="https://badgen.net/github/license/pknu-wap/wap-ui">
   </a>
   <a href="https://www.npmjs.com/package/@wap-ui/react">
-    <img src="https://img.shields.io/npm/dm/wap-ui.svg?style=flat-round" alt="npm downloads">
+    <img src="https://img.shields.io/npm/dm/@wap-ui/react.svg?style=flat-round" alt="npm downloads">
   </a>
   <img alt="Github Stars" src="https://badgen.net/github/stars/pknu-wap/wap-ui" />
   <img src="https://badgen.net/github/release/pknu-wap/wap-ui">
@@ -22,32 +22,28 @@
 
 ## `Demo`
 
-<table align="center">
+<table align="center" width="100%">
   <tr align="center">
     <td colspan="2">
-      <a href="https://wap-ui.vercel.app/?path=/story/components-button--default">Demo Test</a>
+      <a href="https://wap-ui.vercel.app/?path=/story/components-button--default">Try using it in playground</a>
     </td>
   </tr>
   <tr>
-    <td>
-      <img src="https://user-images.githubusercontent.com/75781414/208494136-402c2f72-c2ed-422b-8569-4a8e6d7d2a6c.gif" width=380 />
+    <td width="50%">
+      <img src="https://user-images.githubusercontent.com/75781414/209562230-7f3e9d0d-fa5f-452c-be92-dfeebb251e48.gif"  />
     </td>
-    <td>
-      <img src="https://user-images.githubusercontent.com/75781414/208494143-7b6160eb-69ca-4b3a-aa96-8945ac424df4.gif" width=380 />
+    <td width="50%">
+      <img src="https://user-images.githubusercontent.com/75781414/209560781-9994d09d-6768-4555-833d-35d6ebe16a11.gif" />
     </td>
   </tr>
-  <tr>
-    <td>
-      <img src="https://user-images.githubusercontent.com/75781414/208494160-27c10e7a-665a-43c0-b76b-9efc4732d74b.gif" width=380 />
-    </td>
-    <td>
-      <img src="https://user-images.githubusercontent.com/75781414/208494166-1c2a715e-201b-4fbe-bdbe-f2309e9f0aab.gif" width=380 />
-    </td>
   </tr>
 </table>
 
 ## `Installing WAP-UI`
 
+To use WAP UI, Install the `@wap-ui/react` package and its peer dependencies.
+(`@emotion/react`, `@emotion/styled`, `framer-motion`)
+
 ```sh
 yarn add @wap-ui/react @emotion/react @emotion/styled framer-motion
 # or
@@ -56,6 +52,10 @@ npm i @wap-ui/react @emotion/react @emotion/styled framer-motion
 
 ## `Usage`
 
+To start using the components, follow these steps:
+
+1. For WAP UI to work correctly, Wrap `WapUIProvider` provided by `@wap-ui/react` at root of your application.
+
 ```tsx
 import React from 'react';
 
@@ -72,6 +72,8 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 );
 ```
 
+2. Bring components what you want and use them.
+
 ```tsx
 import { Button } from '@wap-ui/react';
 
@@ -86,14 +88,60 @@ const Home = () => {
 export default Home;
 ```
 
-## `Contributors`
-
-### [성준영](https://github.com/sjyoung428)<span style="font-size:50%">(소프트웨어·인공지능전공 16학번)</small>
+3. You can refer to the components through Documents or Jsdocs like that.
+<table align="center">
+  <tr>
+    <td align="center">
+      Documents
+    </td>
+    <td align="center">
+      Jsdocs
+    </td>
+  </tr>
+  <tr>
+    <td align="center" >
+      <img src="https://user-images.githubusercontent.com/75781414/209562964-ae0b74b4-c604-4ac7-94d6-b5f0a3cb4a02.png" width="100%" />
+    </td>
+    <td align="center">
+      <img src="https://user-images.githubusercontent.com/75781414/209560523-74cb3b4e-f1e9-4a5d-a5e1-ae54c2aa4150.png" width="100%" />
+    </td>
+  </tr>  
+</table>
 
-### [이예슬](https://github.com/mimpie)<span style="font-size:50%">(소프트웨어·인공지능전공 21학번)</small>
+## `Contributors`
 
-### [김민수](https://github.com/neko113)<span style="font-size:50%">(컴퓨터공학전공 19학번)</small>
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/neko113">
+        <img src="https://avatars.githubusercontent.com/u/75781414?v=4" width="120px;"/>
+        <br />
+        <a href="https://github.com/pknu-wap/wap-ui/commits/main?author=neko113" title="Code">neko113 💻</a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/sjyoung428">
+        <img src="https://avatars.githubusercontent.com/u/77968955?v=4" width="120px;"/>
+        <br />
+        <a href="https://github.com/pknu-wap/wap-ui/commits/main?author=sjyoung428" title="Code">sjyoung428 💻</a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/mimpie">
+        <img src="https://avatars.githubusercontent.com/u/108365477?v=4" width="120px;"/>
+        <br />
+        <a href="https://github.com/pknu-wap/wap-ui/commits/main?author=mimpie" title="Code">mimpie 💻</a>
+    </td>
+  </tr>
+  <tr>
+    <td align="center">컴공19 김민수</td>
+    <td align="center">컴공16 성준영</td>
+    <td align="center">컴공21 이예슬</td>
+  </tr>
+</table>
 
 ## `Links`
 
-### [Docs](https://github.com/pknu-wap/wap-ui/tree/main/docs) / [NPM](https://www.npmjs.com/package/wap-ui) / [Storybook](https://wap-ui.vercel.app/) / [PPT](https://github.com/pknu-wap/wap-ui/tree/main/ppt) / [Example](https://github.com/pknu-wap/wap-ui/tree/main/example)
+- #### [Documents](https://github.com/pknu-wap/wap-ui/tree/main/docs)
+- #### [NPM](https://www.npmjs.com/package/wap-ui)
+- #### [Playground](https://wap-ui.vercel.app/)
+- #### [Presentations](https://github.com/pknu-wap/wap-ui/tree/main/ppt)
+- #### [Example](https://github.com/pknu-wap/wap-ui/tree/main/example)
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wap-ui/react",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "WAP UI / React UI Components Library",
   "repository": "https://github.com/pknu-wap/2022_2_WAP_WEB_TEAM1.git",
   "author": "neko113 <[email protected]>",