-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
* chore: 프로젝트 세팅 * feat: Container 요구사항 구현 * feat: Flex 요구사항 구현 * feat: Grid 요구사항 구현 * feat: 진입점 생성 * chore: 빌드 파일 업로드 * chore: 빌드 파일 업로드 * chore: 배포설정 변경 * fix: Flex 타입 에러 수정 * fix: import/export 방식 변경 * 1.0.1 * chore: 불필요한 파일 삭제 * chore: styled-components 설치 * refactor: css를 styled-components로 마이그레이션 * chore: 1.0.2버전 * 1.0.2 * docs: README 수정 * feat: grid item 속성 추가 * 1.1.0 * test: 스토리북 추가 * chore: storybook 배포를 위한 chromatic 설치 * feat: background color 속성 추가 * 1.1.1 * feat: 새로운 빌드 버전 * 1.1.2 * fix: 에러가 나는 컴포넌트 props 네이밍 수정
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
{ | ||
"sourceType": "unambiguous", | ||
"presets": [ | ||
[ | ||
"@babel/preset-env", | ||
{ | ||
"targets": { | ||
"chrome": 100, | ||
"safari": 15, | ||
"firefox": 91 | ||
} | ||
} | ||
], | ||
"@babel/preset-typescript", | ||
"@babel/preset-react" | ||
], | ||
"plugins": [] | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
node_modules/ |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import type { StorybookConfig } from '@storybook/react-webpack5'; | ||
|
||
const config: StorybookConfig = { | ||
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], | ||
addons: [ | ||
'@storybook/addon-links', | ||
'@storybook/addon-essentials', | ||
'@storybook/addon-onboarding', | ||
'@storybook/addon-interactions', | ||
], | ||
framework: { | ||
name: '@storybook/react-webpack5', | ||
options: {}, | ||
}, | ||
docs: { | ||
autodocs: 'tag', | ||
}, | ||
}; | ||
export default config; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import type { Preview } from "@storybook/react"; | ||
|
||
const preview: Preview = { | ||
parameters: { | ||
actions: { argTypesRegex: "^on[A-Z].*" }, | ||
controls: { | ||
matchers: { | ||
color: /(background|color)$/i, | ||
date: /Date$/, | ||
}, | ||
}, | ||
}, | ||
}; | ||
|
||
export default preview; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,132 @@ | ||
<p align="middle" > | ||
<img width="100px;" src="https://em-content.zobj.net/source/skype/289/straight-ruler_1f4cf.png"/> | ||
</p> | ||
<h2 align="middle">누구나 사용할 수 있는 레이아웃 컴포넌트</h2> | ||
<p align="middle">재사용 가능한 레이아웃 컴포넌트 제작과 배포</p> | ||
<br/> | ||
# yunseong-layout-component | ||
|
||
## 개요 | ||
|
||
react 프레임워크에서 사용할 수 있는 여러가지 layout 컴포넌트 라이브러리입니다. | ||
|
||
## 설치 | ||
|
||
``` | ||
npm i yunseong-layout-component | ||
``` | ||
|
||
## Container | ||
|
||
### 설명 | ||
|
||
중앙에 배치하는 레이아웃입니다. 속성을 이용해 최대 너비와 최소 너비를 설정할 수 있습니다. | ||
|
||
### 속성 | ||
|
||
기본적으로 너비는 `maxWidth`값을 따릅니다. 지정하지 않을 시, 뷰포트의 너비값을 가집니다. | ||
|
||
`maxWidth?:number` : 픽셀단위의 최대 너비를 지정합니다. 지정하지 않을 시, 뷰포트의 | ||
너비로 지정됩니다. | ||
|
||
`minWidth?` : 픽셀 단위의 최소 너비를 지정합니다. 지정하지 않으면, 최대 너비값으로 지정합니다. | ||
|
||
### 사용 예시 | ||
|
||
```tsx | ||
<Container minWidth={500} maxWidth={1440}> | ||
<div>...</div> | ||
</Container> | ||
``` | ||
|
||
## Flex | ||
|
||
### 설명 | ||
|
||
요소를 선형적으로 배치하기 위한 Flex 레이아웃 입니다. 너비와 높이는 부모 요소의 값을 상속합니다. | ||
|
||
### 속성 | ||
|
||
`direction?:'row' | 'row-reverse' | 'column' | 'column-reverse'` : flex layout의 메인 축의 정렬 방향을 지정합니다. 기본 값은 row 입니다. | ||
|
||
`justify: 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly'` : flex에 속하는 아이템의 메인 축에 따른 정렬 방식을 지정합니다. 기본값은 start 입니다. | ||
|
||
`align: 'center' | 'start' | 'end'`: 메인 축과 교차하는 축의 정렬 방식을 지정합니다. 기본 값은 start입니다. | ||
|
||
`gap:number`: 픽셀 단위의 간격을 지정합니다. 기본값은 0 입니다. | ||
|
||
### 사용 예시 | ||
|
||
```tsx | ||
<Flex direction='column' justify='center' align='center' gap={4}> | ||
<FlexItem>1</FlexItem> | ||
<FlexItem>2</FlexItem> | ||
<FlexItem>3</FlexItem> | ||
</Flex> | ||
``` | ||
|
||
## FlexItem | ||
|
||
### 설명 | ||
|
||
Flex 레이아웃의 개별 요소를 배치시킬 수 있는 레이아웃 입니다. | ||
|
||
### 속성 | ||
|
||
`align: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'`: 개별 요소에 지정되는 정렬 기준입니다. 기본 값은 auto이며, 부모의 정렬 기준(align-items)을 상속합니다. | ||
|
||
### 사용 예시 | ||
|
||
```tsx | ||
<Flex direction='column' justify='center' align='center' gap={4}> | ||
<FlexItem align='end'>1</FlexItem> | ||
<FlexItem>2</FlexItem> | ||
<FlexItem>3</FlexItem> | ||
</Flex> | ||
``` | ||
|
||
## Grid | ||
|
||
### 설명 | ||
|
||
격자형 레이아웃입니다. 행과 열을 지정할 수 있습니다. 기본 행과 열 값은 10행 10열입니다. 너비는 부모값을 상속 받습니다. | ||
|
||
### 속성 | ||
|
||
`columns: number` : 열의 갯수를 지정합니다. 크기는 기준 너비를 동일한 비율로 가져갑니다. 기본 값은 10입니다. | ||
|
||
`rows: number` : 행의 갯수를 지정합니다. 기본값은 10입니다. | ||
|
||
`gap: number` : 픽셀 단위의 간격을 지정합니다. 기본값은 0입니다. | ||
|
||
### 사용 예시 | ||
|
||
```tsx | ||
<Grid columns={3}> | ||
<GridItem>A</GridItem> | ||
<GridItem>B</GridItem> | ||
<GridItem>C</GridItem> | ||
<GridItem>D</GridItem> | ||
<GridItem>E</GridItem> | ||
</Grid> | ||
``` | ||
|
||
## GridItem | ||
|
||
### 설명 | ||
|
||
Grid 컴포넌트에 속하는 아이템입니다. 각 요소가 그리드에서 얼마나 차지할 지 비율을 조절할 수 있습니다. | ||
|
||
### 속성 | ||
|
||
기본 grid-row, grid column 속성을 따릅니다. grid-direction-start, end 의 단축 속성만 사용합니다. | ||
|
||
`gridRow: ${number}/${number} | 'auto'` : 단축 속성을 사용합니다. 숫자는 정수만 유효합니다. 기본값은 auto 입니다. | ||
|
||
`gridCol: ${number}/${number} | 'auto'` : 단축 속성을 사용합니다. 숫자는 정수만 유효합니다. 기본값은 auto 입니다. | ||
|
||
### 사용 예시 | ||
|
||
```tsx | ||
<Grid columns={3}> | ||
<GridItem gridRow='1/3'>A</GridItem> | ||
<GridItem>B</GridItem> | ||
<GridItem>C</GridItem> | ||
<GridItem>D</GridItem> | ||
<GridItem>E</GridItem> | ||
</Grid> | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { PropsWithChildren } from 'react'; | ||
interface ContainerProps extends PropsWithChildren { | ||
maxWidth?: number; | ||
minWidth?: number; | ||
} | ||
declare const Container: ({ minWidth, maxWidth, children, }: Partial<ContainerProps>) => import("react/jsx-runtime").JSX.Element; | ||
export default Container; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { PropsWithChildren } from 'react'; | ||
interface FlexProps extends PropsWithChildren { | ||
direction: 'row' | 'row-reverse' | 'column' | 'column-reverse'; | ||
justify: 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly'; | ||
align: 'center' | 'start' | 'end'; | ||
gap: number; | ||
} | ||
declare const Flex: ({ direction, justify, align, gap, children, }: Partial<FlexProps>) => import("react/jsx-runtime").JSX.Element; | ||
export default Flex; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { PropsWithChildren } from 'react'; | ||
interface FlexItemProps extends PropsWithChildren { | ||
align: 'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'; | ||
} | ||
declare const FlexItem: ({ align, children }: Partial<FlexItemProps>) => import("react/jsx-runtime").JSX.Element; | ||
export default FlexItem; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { PropsWithChildren } from 'react'; | ||
interface GridProps extends PropsWithChildren { | ||
rows: number; | ||
columns: number; | ||
gap: number; | ||
} | ||
declare const Grid: ({ children, rows, columns, gap, }: Partial<GridProps>) => import("react/jsx-runtime").JSX.Element; | ||
export default Grid; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { PropsWithChildren } from 'react'; | ||
interface GridItemProps extends PropsWithChildren { | ||
} | ||
declare const GridItem: ({ children }: GridItemProps) => import("react/jsx-runtime").JSX.Element; | ||
export default GridItem; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import Container from './components/Container'; | ||
import Grid from './components/Grid'; | ||
import GridItem from './components/GridItem'; | ||
import Flex from './components/Flex'; | ||
import FlexItem from './components/FlexItem'; | ||
export { Container }; | ||
export { Grid }; | ||
export { GridItem }; | ||
export { Flex }; | ||
export { FlexItem }; |