Code Monkey home page Code Monkey logo

wap-ui's Introduction

<Awesome React UI Library />

npm downloads Github Stars

Demo

Try using it in playground

Installing WAP-UI

To use WAP UI, Install the wap-ui package and its peer dependencies. (@emotion/react, @emotion/styled, framer-motion)

pnpm add wap-ui @emotion/react @emotion/styled framer-motion
# or
yarn add wap-ui @emotion/react @emotion/styled framer-motion
# or
npm i wap-ui @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 at root of your application.
import React from 'react';

// 1. import `WapUIProvider` component
import ReactDOM from 'react-dom/client';
import App from './App';
import { WapUIProvider } from 'wap-ui';

// 2. Wrap WapUIProvider at the root of your app
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <WapUIProvider>
    <App />
  </WapUIProvider>,
);
  1. Bring components what you want and use them.
import { Button } from 'wap-ui';

const Home = () => {
  return (
    <Button size="md" color="success" shadow>
      버튼
    </Button>
  );
};

export default Home;
  1. You can refer to the components through Documents or Jsdocs like that.
Documents Jsdocs

Contributors


neko113 💻

sjyoung428 💻

mimpie 💻
컴공19 김민수 컴공16 성준영 컴공21 이예슬

Links

wap-ui's People

Contributors

alstn113 avatar mimpie avatar sjyoung428 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

wap-ui's Issues

Add Example Project

작업 리스트

  • example folder 만들고 대충 예제들 만들기

참고사항

예상 소요 시간

Add Hooks

작업 리스트

  • useDisclosure hooks: 열린 상태, 열기, 닫기, 토글의 기능이 있는 hook

  • useIntersectionObserver: 특정 element와 사용자의 widow가 겹치는 특정 비율에 따라 작동하게 하는 hook'

  • useThrottle: time 뒤에 callback이 실행되고 time이 지나기전 다시 호출될 경우 아직 time이 지나지 않았기 때문에 callback을 실행하지 않고 함수를 종료시키는 형태로 되어있다.

  • useDebounce: time 안에 함수가 한번더 실행되면 앞의 작업을 취소하고 time이 지날 때까지 다시 호출 되지 않으면 callback을 실행하는 형식으로 되어있다.

  • 모달 storybook에 useDisclosure 적용

참고사항

예상 소요 시간

Create Toggle

작업 리스트

참고사항

예전에 만들어 놓은 거 참고하면서 만들거라서 금방 할 듯

예상 소요 시간

Create Toast Component

작업 리스트

  • position
  • animation
  • timeout
  • message type

참고사항

예상 소요 시간

Add Color

작업 리스트

  • 색깔 테마 추가

참고사항

처음 이슈만들기

예상 소요 시간

1분

Add Dark Mode Theme

작업 리스트

  • 다크모드 관련 색 정하기
  • 다른 component 색 변경시키기
  • dark mode toggle 만들기

예정이었으나 시간관계상

theme은 그냥 제거

참고사항

예상 소요 시간

Button Ripple Effect

작업 리스트

  • ripple effect
  • 다른 컴포넌트 수정
  • [ ]

참고사항

예상 소요 시간

Spacer Component 생성

작업 리스트

  • Spacer Component 생성
  • Checkbox의 storybook에 Spacer 적용하기

참고사항

칸을 띄워주는 layout component

예상 소요 시간

20분

Create Dropdown

작업 리스트

  • 드롭다운 만들기
  • 각 menu당 hover시 effect
  • animation은 잘 모르겠음
  • 화면 위치에 따라 위에 생길지 아래에 생길지 고민해보기

참고사항

좀 어려울 듯

예상 소요 시간

✨ [Feature Request]: NumberInputStepper

어떤 기능을 제안하시나요? 🤔

방향키 버튼으로 숫자를 입력받는 NumberInputStepper

이 기능은 어떻게 구현할 수 있을까요? 🛠️

min, max, 방향키 버튼, size 등등

동의 👍

  • 다른 이슈가 있는지 확인했습니다. ✅

✨ [Feature Request]: DateRangeCalendar

어떤 기능을 제안하시나요? 🤔

범위 선택 달력

이 기능은 어떻게 구현할 수 있을까요? 🛠️

우선 날짜 선택 달력 구현 후 범위 선택 달력 구현

동의 👍

  • 다른 이슈가 있는지 확인했습니다. ✅

Create Portal

작업 리스트

  • ReactDOM.createPortal을 이용해서 Portal 컴포넌트 만들기
  • 최상단에 div태그 자동 생성

참고사항

예상 소요 시간

중간 발표 전까지

✨ [Feature Request]: BottomSheet (Draggable)

어떤 기능을 제안하시나요? 🤔

draggable한 bottom sheet

이 기능은 어떻게 구현할 수 있을까요? 🛠️

Mouse event listener를 통해 간단히 구현

동의 👍

  • 다른 이슈가 있는지 확인했습니다. ✅

Fix Dropdown Position

버그 설명

dropdown scroll 내린 상태에서 누르면 이상하게 나옴

해결 방안

어떻게 해결할 건지 작성해주세요.
ripple 만들면서 참고한 지식을 동원하여...

참고사항

예상 소요 시간

Rollup Bundler & initial settings

작업 리스트

  • commonjs format
  • es6 format
  • typescript 설정
  • .gitignore
  • .prettierrc
  • .npmignore

참고사항

초기세팅이므로 최적화까지는 시키지 않겠습니다

예상 소요 시간

20분

Refactor component

작업 리스트

  • dropdown
  • tooltip // 제거

참고사항

예상 소요 시간

✨ [Feature Request]: Toast

어떤 기능을 제안하시나요? 🤔

Toast Component

이 기능은 어떻게 구현할 수 있을까요? 🛠️

다양한 Positon과 Info, Success, Error status, duration 조절
useToast hook

동의 👍

  • 다른 이슈가 있는지 확인했습니다. ✅

✨ [Feature Request]: upgrade package

여기저기 충돌나서 그냥 걍 업그레이드 안함 ㅠㅠ

어떤 기능을 제안하시나요? 🤔

  • upgrade dependencies
  • 1. storybook (upgrade dependencies()
  • change pakage manager -> 충돌로 인해 X
  • add some libraries

이 기능은 어떻게 구현할 수 있을까요? 🛠️

열심히

동의 👍

  • 다른 이슈가 있는지 확인했습니다. ✅

Storybook Setting

작업 리스트

  • storybook 설치
  • @emotion/babel-plugin 설치하기

참고사항

storybook 최신 plugin들은 webpack5에서 지원함

npx sb init --builder webpack5

@emotion/babel-plugin은 css-selector를 사용하게 해줌

예상 소요 시간

20분

Button Component 생성

작업 리스트

  • 주요 theme 및 type 설정
  • Button Component 생성
  • size
  • color
  • shadow
  • export 설정

참고사항

packages 진입점에 맞게 export 하기

예상 소요 시간

20분

Button과 Checkbox Component style 개선

버그 설명

1. Button Component border 설정

image

2. Checkbox Component의 box-sizing 설정

image

해결 방안

Button Component border : none으로 변경
Checkbox Component box-sizing : border-box로 변경

css - reset를 그냥 없애버리기

참고사항

예상 소요 시간

40분

✨ [Refactor]: use portal 관련 코드 수정

어떤 기능을 제안하시나요? 🤔

use portal을 index.html에

이렇게 안 넣고 그냥 자동 생성으로 변경

이 기능은 어떻게 구현할 수 있을까요? 🛠️

usePortal hooks 만들거임.

동의 👍

  • 다른 이슈가 있는지 확인했습니다. ✅

Refactor Modal

작업 리스트

  • 주석 달기
  • 리팩토링 하기
  • 폴더 구조 변경
  • 애니메이션 framer motion 사용
  • etc...

참고사항

예상 소요 시간

React, Emotion, Framer-motion 세팅

작업 리스트

  • react, react-dom
  • @emotion/styled, @emotion/react
  • framer-motion
  • build시 진입점 잡기 ex) packages/index.ts

참고사항

peerDependencies 어떻게 처리할 지 고민하기

예상 소요 시간

20분

Card Component 생성

작업 리스트

  • Card Component 생성
  • 배포

참고사항

예상 소요 시간

20분

Husky 잘못 사용

작업 리스트

package.json 에서

// package.json

script: {
"prepare": "husky install"
}

참고사항

예상 소요 시간

Create Sidebar

작업 리스트

  • 체크 리스트를 작성하세요

참고사항

예상 소요 시간

Create ContextMenu

작업 리스트

  • 체크 리스트를 작성하세요

참고사항

예상 소요 시간

Create TextInput

작업 리스트

참고사항

예전에 만들어 놓은 거 참고할거라서 금방 할 듯

예상 소요 시간

Button Component size error

버그 설명

Button Component의 size="md" 시
width: auto가 되는 에러

해결 방안

size가 md일 경우를 분기시켜줌.

참고사항

예상 소요 시간

20분

Rollup Refactoring

작업 리스트

  • @rollup/plugin-typescript -> rollup-plugin-typescript2로 변경
    ㄴ알고보니까 업그레이드 버전이 아닌 다른 버전이었음
  • 다른 rollup 라이브러리도 찾아서 추가하고 수정하기
  • Comment 달기

참고사항

예상 소요 시간

Create Modal

작업 리스트

  • Modal 만들기
  • Modal Header 만들기
  • Modal Body 만들기
  • Modal Footer 만들기
  • Overlay 만들기
  • 스크롤 방지
  • close 기능

참고사항

모달참고

예상 소요 시간

중간 발표 전까지

Docusaurus를 이용하여 공식문서 틀 만들기

작업 리스트

  • docusaurus 사용법 익히기
  • 지금까지 만든 것들 문서화하기
  • wap-ui.xyz에 deploy하기 // git action 사용??
  • description에 website 링크 달기
  • storybook도 vercel로 deploy하기

참고사항

링크 https://docusaurus.io/
처음이라 잘 모름
image

예상 소요 시간

중간 발표 전까지

✨ [Feature Request]: Tooltip Component

어떤 기능을 제안하시나요? 🤔

Tooltip Component

  • placemnet
  • color

이 기능은 어떻게 구현할 수 있을까요? 🛠️

next-ui를 심각하게 많이 참고할 예정

동의 👍

  • 다른 이슈가 있는지 확인했습니다. ✅

Make Navbar

작업 리스트

  • Making Navbar

참고사항

예상 소요 시간

1달

Refactoring ESlint script directory & export folder

작업 리스트

  • ESlint script directory 변경
  • packages 폴더 내부에 export 구체적으로 변경하기

참고사항

이거 병합시키면 main pull 받을 때 충돌날 거 같으니까
잘 대처하세요 ㅎㅎ

예상 소요 시간

30m

Radio Component 생성

작업 리스트

  • Radio Component 생성
  • radio color
  • export
  • Button 살짝 수정

참고사항

예상 소요 시간

30분

Create Tooltip Component

작업 리스트

  • color
  • position
  • storybook

참고사항

Accordion Component 만들다가 토할 것 같아서 피신왔음

예상 소요 시간

중간 발표 전까지

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.