diff --git a/example/react-ts/package.json b/example/react-ts/package.json index 72e4f75..42102f1 100644 --- 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.1", + "@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 index ac7a5d6..bf5f736 100644 --- 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.1": - version "1.3.1" - resolved "https://registry.yarnpkg.com/@wap-ui/react/-/react-1.3.1.tgz#3657ced567d707cdc05c6434270b05c7e306fd7d" - integrity sha512-a4cc5LLLpWruDov9Tjx47aKJFB65nyZDFeEdNC9NHCOTUHnVnU+2xC5zPdOdcVC7tJsWFjM4UoKNFxv0geuNbQ== +"@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 index ac79544..796374a 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -8,7 +8,7 @@ - npm downloads + npm downloads Github Stars @@ -22,32 +22,28 @@ ## `Demo` - +
- - - - -
- Demo Test + Try using it in playground
- + + - + +
- - - -
## `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)(소프트웨어·인공지능전공 16학번) +3. You can refer to the components through Documents or Jsdocs like that. + + + + + + + + + +
+ Documents + + Jsdocs +
+ + + +
-### [이예슬](https://github.com/mimpie)(소프트웨어·인공지능전공 21학번) +## `Contributors` -### [김민수](https://github.com/neko113)(컴퓨터공학전공 19학번) + + + + + + + + + + + +
+ + +
+ neko113 💻 + 		+ + +
+ sjyoung428 💻 + 		+ + +
+ mimpie 💻 +
컴공19 김민수컴공16 성준영컴공21 이예슬
## `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)