musma / react-libraries Goto Github PK
View Code? Open in Web Editor NEWReact 기반 Button, TextInput, Select 등 UI Element Component 라이브러리입니다.
React 기반 Button, TextInput, Select 등 UI Element Component 라이브러리입니다.
FE 파트에서 사용할 eslint-config를 따로 개발하였습니다.
Musma Developers에 @musma/eslint-config-react 설치 방법 및 매뉴얼, 린트 규칙 등을 설명하는 페이지를 만들어야 합니다.
@storybook/builder-vite 의존성 추가 후 린트 제대로 작동하지 않는 문제 발생
@storybook/builder-vite -> sveltedoc-parser -> dependencies -> eslint
실제 사용함에 여럿 버그가 있어, DatePicker와 RangePicker를 분리하였습니다.
아래는 샘플 코드 입니다.
import { Fragment } from 'react'
import { Controller, SubmitHandler, useForm } from 'react-hook-form'
import { useTheme } from '@emotion/react'
import { yupResolver } from '@hookform/resolvers/yup'
import { DateTime } from 'luxon'
import { mixed, object, SchemaOf } from 'yup'
import { Card, DateRangePicker, Grid, SearchForm } from './components'
interface RegisterInput {
dateRange?: (DateTime | null)[] // 게시기간
}
const schema: SchemaOf<RegisterInput> = object().shape({
dateRange: mixed().required(),
})
const Component = () => {
const theme = useTheme()
const { control, handleSubmit } = useForm<RegisterInput>({
defaultValues: {
dateRange: [DateTime.now(), DateTime.now()],
},
resolver: yupResolver(schema),
})
const onSubmit: SubmitHandler<RegisterInput> = (data) => {
const date = data.dateRange
console.log(date)
}
return (
<Fragment>
<Card css={{ padding: 120 }}>
<SearchForm onSubmit={handleSubmit(onSubmit)}>
<Grid
itemWidth={200}
cols={3}
css={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
columnGap: theme.spacing.sm,
}}
>
<Controller
name="dateRange"
control={control}
render={({ field }) => {
return <DateRangePicker label="기본 타입" {...field} />
}}
/>
</Grid>
</SearchForm>
</Card>
</Fragment>
)
}
export default Component
현재 DateRangePicker 컴포넌트는 react-datepicker 라이브러리를 조금 변경하여 사용하고 있습니다.
자체적으로 만들어서 빌드 용량을 줄어야겠습니다.
이메일 뒷자리에 숫자, 영문자, Dot, 외에는 입력되지 않게 하도록 하기 위하여,
util 에서 regExp 수정 및, TextInput을 수정해야합니다
react-libraries-document 패키지를 Amplify에 배포한다.
배포 주소는 react-libraries.musma.net 로 하면 어떨까 싶습니다.
https://github.com/changesets/changesets
버전업시 커밋 메세지로 변경내용 기록 자동화하기
라이브러리 설치
yarn add --dev @storybook/builder-vite
vite.config.ts 수정
...
import { resolve } from "path"
export default defineConfig({
...
resolve: {
alias: [{ find: "src", replacement: resolve("src") }],
},
})
const path = require("path")
const { loadConfigFromFile, mergeConfig } = require("vite")
module.exports = {
...
core: {
builder: "@storybook/builder-vite",
},
...
async viteFinal(config, { configType }) {
const { config: userConfig } = await loadConfigFromFile(
path.resolve(__dirname, "../vite.config.ts")
)
return mergeConfig(config, {
...userConfig,
// manually specify plugins to avoid conflict
plugins: [],
})
},
}
참고
DatePicker에서 onChange로 변경되는 값이 문자열이기 때문에, 커스터마이징을 할 수 없습니다.
이에, DateTime 객체로 변환하고자 합니다.
사용자가 다크모드를 사용할 경우를 대비하자.
- ToastPopup 컴포넌트, ToastContainer 컴포넌트, ToastPopupManager 를 두고 컴포넌트 핸들링
- transition 효과가 어쩔땐 되고 어쩔땐 안되는 버그가 생김... 원인이 뭘까 & componentUnMount에는 동작하지 않음
- componentDidMount와 UnMount Transition은 react-transition-group 을 많이 쓴다고 함 (공식 React 에서 추천함)
- react-transition-group을 적용해서 버그는 해결했지만, UnMount는 똑같이 안되는 중
- 3.5초 후 삭제 로직 위치를 변경하고 react-transition-group을 적용해서 transition 효과는 잘 됨. 근데 첫 렌더링에서만 따닥거리는 버그 발생........
- ToastContainer에서 props로 받는 newToastPopup 부분을 함수 형태로 바꿔야 할 듯 => 도전 중
- react-simple-snackbar 참고해서 ContextAPI로 하는건 어떨까 => feat/46-popup-context 브랜치에 저장해둠
Storybook에 SVG 이미지를 ReactComponent로 사용하는 방법이 잘 되질 않는다
방법을 찾아본다.
@musma/react-component 사용하는 곳에서 컴포넌트에 css Prop으로 스타일 전달 시 CSS 우선순위에 밀려 적용이 안되는 현상 발생
스택오버플로우에 올려놔봤음..
https://stackoverflow.com/questions/74052923/emotion-js-ui-component-library-css-prop-pass-problem
디자인시스템 Figma 에 있는 UI 컴포넌트 개발
대동 프로젝트에서.. rows per page를 특정 개수로 맞춰달라는 기획이 있어서
변경할 수 있는 Props가 필요합니다.
useSearchForm으로 검색 후에 새로고침을 하거나, 페이지네이션 사용 중 페이지가 멈춥니다.
error 명
x.toFormat in not a function
시작일, 종료일을 모두 선택했을 때만 onChange 함수를 실행하도록 수정합니다.
시작일만 선택 후 Calendar 창을 닫는다면 디폴트로 설정된 날로 돌아갑니다.
Storybook이 pnpm을 완벽하게 지원하지 않음.
"@storybook/channel-postmessage": "^6.5.9",
"@storybook/channel-websocket": "^6.5.9",
"@storybook/client-api": "^6.5.9",
"@storybook/preview-web": "^6.5.9",
"@storybook/addon-measure": "^6.5.9",
"@storybook/addon-outline": "^6.5.9",
"@storybook/addons": "^6.5.9",
"@storybook/addon-backgrounds": "^6.5.9",
"@storybook/addon-docs": "^6.5.9",
Storybook 빌드중에 에러가 발생하여 위의 의존성을 추가하였음.
Chromatic에 배포할 때마다 Permalink가 달라지므로 디자이너 및 개발자가 아닌 다른 사람이 보기에 힘들 것으로 예상
Chromatic에 커스텀 도메인(예: react-component.musma.net 같이 접속하려면)을 연결하려면 유료 플랜 결제해야함
Storybook을 사용하지 말고 Next.js + MDX를 사용하여 Material-UI 같이 정적으로 페이지를 만들어 보여주는 것이 나을 수도 있겠다는 생각이 있음.
<div className="text-black-dark text-blue-500">test</div>
이렇게 하면 뒤에 있는 text-blue-500이 적용되어 파란색 글씨가 나올 것 같지만 그렇지 않다.
className속성에 부여한 class 순서가 아닌, 실제로 만들어지는 styleSheet에 정의되는 순서에 따라 스타일이 입혀진다
https://dev.to/diogoko/overriding-tailwind-classes-in-react-4po3
https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/
Input Mask와 흡사한 기능 구현
react-component를 분석해보면서, 주석이 미비한 부분을 작성하거나
리팩토링을 하고, 이에대한 검증을 합니다
설정 파일에 주석을 달고자 합니다
NPM 퍼블릭 배포합니다
특정 프로젝트에서 검색 필드를 초기화 함과 동시에 재검색 하는 것이 아니라
검색 필드만 초기화해달라는 요청으로
useFormSearch의 기능을 수정하게 되었습니다
useFormSearch에 불린타입 props가 추가되어,
default로는 검색 필드를 초기화 함과 동시에 재검색하고,
false값을 주면, 검색 필드만 초기화 합니다
�react-component, icons, utils 패키지 배포 자동화 구상
날짜를 선택할 수 있는 DatePicker 컴포넌트에서, 선택 가능한 날짜에 제한을 두는 기능이 필요하다
기본적으로 일주일치의 데이터를 보여주는 화면에서, 시작일자와 종료일자를 최대 일주일치만(또는 한달) 선택 가능하도록 제한을 두고싶다는 고객의 요청이 있었다. 예를들어 최대 기간을 일주일로 설정한다면, 시작일자를 3월6일로 선택했을 때 종료일자는 3월6일부터 12일까지만 선택이 가능해야한다.
만약 종료일자를 먼저 선택한다면 시작일자를 그에따라 바꿔줘야 할까? 예를들어, 시작일자는 3월1일, 종료일자는 3월7일로 기본값이 설정되어 있는데, 종료일자로 3월30일을 선택한다면 시작일자도 그에따라 일주일전인 24일로 자동으로 바뀌어야 하는가?
시작일자를 먼저 선택해야 종료일자를 선택할 수 있게 한다면 해결되는 문제다. 어떤게 좋을까...
윈도우 사이즈가 일정 크기 이하로 작아질 경우
다음 페이지를 클릭했을 때, 바로 이전 페이지를 기억하고 있습니다
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.