Skip to content

Commit

Permalink
docs: 문서 사용성 개선 (#117)
Browse files Browse the repository at this point in the history
* docs: 문서 개선

* fix: README

* docs: fix parseJson docs
  • Loading branch information
ssi02014 authored May 12, 2024
1 parent 1e51a93 commit ad4505f
Show file tree
Hide file tree
Showing 69 changed files with 362 additions and 178 deletions.
5 changes: 2 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,6 @@ yarn build:docs
<img src="https://contrib.rocks/image?repo=Modern-Agile-Team/modern-kit">
</a>

<br />
<br />

## Stack
Expand All @@ -141,11 +140,11 @@ yarn build:docs

- `Yarn Berry``workspaces`를 활용해 **Monolithic Repository** 환경을 구축
- packages 내부의 패키지들은 **로컬 패키지**처럼 **상호 의존성**을 갖습니다.
- `lerna`를 활용한 **통합 빌드**, **테스트**, **배포 환경** 구축
- `lerna`를 활용한 **통합 빌드**, **통합 테스트**, **통합 배포** 환경 구축
- `github actions`를 활용한 **CI/CD** 구축
- `changeset`을 활용한 모노레포 환경에서 **패키지 일관성 유지****NPM 배포** 진행
- `dependabot`을 활용한 **자동 의존성** 관리
- `codecov`를 활용한 **테스트 코드 커버리지 체크****코드 신뢰도 향상**
- `codecov`를 활용한 **테스트 코드 커버리지 체크****신뢰성 있는 코드** 제공
- `docusaurus`를 활용한 **문서화**

<br />
Expand Down
9 changes: 6 additions & 3 deletions docs/docs/react/components/DebounceWrapper.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ import { DebounceWrapper } from '@modern-kit/react';

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/DebounceWrapper/index.tsx)

## Interface
```tsx
```ts title="typescript"
type DebounceParameters = Parameters<typeof debounce>;

interface DebounceWrapperProps {
Expand All @@ -28,7 +31,7 @@ const DebounceWrapper: ({

## Usage
### Button Click Case
```tsx
```tsx title="typescript"
import { DebounceWrapper } from '@modern-kit/react'

const Example = () => {
Expand All @@ -45,7 +48,7 @@ const Example = () => {
```

### Input Change Case
```tsx
```tsx title="typescript"
const Input = ({ onChange }: { onChange: (value: string) => void }) => {
const [value, setValue] = useState('');

Expand Down
8 changes: 5 additions & 3 deletions docs/docs/react/components/InView.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@ import { InView } from '@modern-kit/react';

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/InView/index.tsx)

## Interface
```tsx
```ts title="typescript"
type InViewProps = React.ComponentProps<'div'> & UseIntersectionObserverProps;

const InView: React.ForwardRefExoticComponent<
Expand All @@ -17,8 +20,7 @@ const InView: React.ForwardRefExoticComponent<
```

## Usage

```tsx
```tsx title="typescript"
import { InView } from '@modern-kit/react';

const Example = () => {
Expand Down
13 changes: 8 additions & 5 deletions docs/docs/react/components/LazyImage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,11 @@ Intersection Observer Option을 설정할 수 있습니다.(하단 `Note` 참고

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/LazyImage/index.tsx)

## Interface
```tsx
```ts title="typescript"
interface LazyImageProps
extends React.ComponentProps<'img'>,
IntersectionObserverInit {
Expand All @@ -23,7 +26,7 @@ const LazyImage: React.ForwardRefExoticComponent<Omit<LazyImageProps, "ref"> & R
## Usage
### Default
```tsx
```tsx title="typescript"
import { LazyImage } from '@modern-kit/react';
import img1 from '../assets/img1.png';
import img2 from '../assets/img2.png';
Expand All @@ -44,7 +47,7 @@ const Example = () => {
<br />

### Fallback
```tsx
```tsx title="typescript"
import { LazyImage } from '@modern-kit/react';
import img1 from '../assets/img1.png';

Expand All @@ -69,7 +72,7 @@ const Example = () => {
width: '400px',
height: '400px',
backgroundColor: '#cdcbcb',
}
};

return (
<div style={wrapperStyle}>
Expand All @@ -84,7 +87,7 @@ const Example = () => {
/>
</div>
);
};
};
```

## Example
Expand Down
11 changes: 7 additions & 4 deletions docs/docs/react/components/Portal.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,11 @@ Portal 컴포넌트는 `Modal`, `Dialog`, `Tooltip`과 같은 기능과 함께

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/Portal/index.tsx)

## Interface
```tsx
```ts title="typescript"
function Portal({
children,
containerRef,
Expand All @@ -26,7 +29,7 @@ function Portal({
## Usage
### Default

```tsx
```tsx title="typescript"
import { Portal } from '@modern-kit/react'

const Example = () => {
Expand All @@ -40,7 +43,7 @@ const Example = () => {

### Container

```tsx
```tsx title="typescript"
import { Portal } from '@modern-kit/react'

const Example = () => {
Expand All @@ -60,7 +63,7 @@ const Example = () => {

### Nested

```tsx
```tsx title="typescript"
import { Portal } from '@modern-kit/react'

const Example = () => {
Expand Down
8 changes: 5 additions & 3 deletions docs/docs/react/components/SwithCase.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@ import { SwitchCase } from '@modern-kit/react';

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/SwitchCase/index.tsx)

## Interface
```tsx
```ts title="typescript"
type Component = Nullable<React.ReactNode>;

interface SwitchCaseProps<Condition extends string | number> {
Expand All @@ -29,8 +32,7 @@ const SwitchCase: <Condition extends string | number>({
```

## Usage

```tsx
```tsx title="typescript"
import { SwitchCase } from '@modern-kit/react';


Expand Down
8 changes: 5 additions & 3 deletions docs/docs/react/components/When.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,11 @@ condition prop으로 `boolean을 반환하는 함수`도 허용됩니다.

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/When/index.tsx)

## Interface
```tsx
```ts title="typescript"
type Condition = boolean | (() => boolean);

interface WhenProps {
Expand All @@ -26,8 +29,7 @@ const When: ({
```

## Usage

```tsx
```tsx title="typescript"
import { When } from '@modern-kit/react';

const Example = () => {
Expand Down
7 changes: 5 additions & 2 deletions docs/docs/react/hooks/useAsyncPreservedCallback.mdx
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
# useAsyncPreservedCallback

[usePreservedCallback](https://modern-agile-team.github.io/modern-kit/docs/react/hooks/usePreservedCallback) 과 유사하나 Promise를 반환하는 커스텀 훅입니다.
[usePreservedCallback](https://modern-agile-team.github.io/modern-kit/docs/react/hooks/usePreservedCallback) 과 유사하나 `Promise` 반환하는 커스텀 훅입니다.

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useAsyncPreservedCallback/index.ts)

## Interface
```tsx
```ts title="typescript"
const useAsyncPreservedCallback: <T extends (...args: any[]) => Promise<any>>(
callback: T
) => (...args: any[]) => Promise<any>;
Expand Down
7 changes: 5 additions & 2 deletions docs/docs/react/hooks/useBlockPromiseMultipleClick.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@ import { useBlockPromiseMultipleClick } from '@modern-kit/react';

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useBlockPromiseMultipleClick/index.ts)

## Interface
```tsx
```ts title="typescript"
const useBlockPromiseMultipleClick: () => {
isLoading: boolean;
blockMultipleClick: (callback: () => Promise<unknown>) => Promise<void>;
Expand All @@ -21,7 +24,7 @@ const useBlockPromiseMultipleClick: () => {

## Usage

```tsx
```tsx title="typescript"
import React, { useState } from 'react';
import { useBlockPromiseMultipleClick } from '@modern-kit/react';

Expand Down
8 changes: 5 additions & 3 deletions docs/docs/react/hooks/useDebounce.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ import { useDebounce } from '@modern-kit/react'

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebounce/index.ts)

## Interface
```tsx
```ts title="typescript"
// lodash-es DebounceSettings
// https://www.geeksforgeeks.org/lodash-_-debounce-method/
interface DebounceSettings {
Expand All @@ -27,8 +30,7 @@ const useDebounce: (
```

## Usage

```tsx
```tsx title="typescript"
import { useState } from 'react';
import { useDebounce } from '@modern-kit/react';

Expand Down
8 changes: 5 additions & 3 deletions docs/docs/react/hooks/useFileReader.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useFileReader/index.ts)

## Interface
```tsx
```ts title="typescript"
type ReadType = 'readAsText' | 'readAsDataURL' | 'readAsArrayBuffer';

interface FileContent {
Expand All @@ -32,8 +35,7 @@ const useFileReader: () => {
```

## Usage

```tsx
```tsx title="typescript"
import React, { useState } from 'react';
import { useFileReader } from '@modern-kit/react';

Expand Down
8 changes: 5 additions & 3 deletions docs/docs/react/hooks/useForceUpdate.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useForceUpdate/index.ts)

## Interface
```tsx
```ts title="typescript"
// type DispatchWithoutAction = () => void;
const useForceUpdate: () => React.DispatchWithoutAction
```
## Usage
```tsx
```tsx title="typescript"
import { useForceUpdate } from '@modern-kit/react';

const Example = () => {
Expand Down
8 changes: 5 additions & 3 deletions docs/docs/react/hooks/useImageStatus.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useImageStatus/index.ts)

## Interface
```tsx
```ts title="typescript"
type ImageStatus = 'pending' | 'loading' | 'complete' | 'error';

const useImageStatus: () => {
Expand All @@ -15,8 +18,7 @@ const useImageStatus: () => {
```
## Usage
```tsx
```tsx title="typescript"
import { useImageStatus } from '@modern-kit/react';
import img1 from '../assets/img1.png';

Expand Down
8 changes: 5 additions & 3 deletions docs/docs/react/hooks/useIntersectionObserver.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@ Intersection Observer Option을 설정할 수 있습니다.(하단 `Note` 참고

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useIntersectionObserver/index.ts)

## Interface
```tsx
```ts title="typescript"
interface UseIntersectionObserverProps extends IntersectionObserverInit {
action: (entry: IntersectionObserverEntry) => void;
calledOnce?: boolean;
Expand All @@ -23,8 +26,7 @@ const useIntersectionObserver: <T extends HTMLElement>({
```

## Usage

```tsx
```tsx title="typescript"
import { useIntersectionObserver } from '@modern-kit/react';

const Example = () => {
Expand Down
8 changes: 5 additions & 3 deletions docs/docs/react/hooks/useInterval.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,18 @@

<br />

## Code
[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useInterval/index.ts)

## Interface
```tsx
```ts title="typescript"
type SetIntervalParameters = Parameters<typeof setInterval>;

const useInterval: (callback: SetIntervalParameters[0], delay?: SetIntervalParameters[1]) => void
```
## Usage
```tsx
```tsx title="typescript"
import { useInterval } from '@modern-kit/react';

const Example = () => {
Expand Down
Loading

0 comments on commit ad4505f

Please sign in to comment.