Skip to content

Commit 6f0aff5

Browse files
casentinocasentino
authored
Release: v1.1.0
Release: v1.1.0
2 parents 22ddd9b + 32f79cf commit 6f0aff5

File tree

5 files changed

+121
-122
lines changed

5 files changed

+121
-122
lines changed

‎README.md‎

Lines changed: 43 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,61 @@
1-
# Turborepo starter
1+
## @simple-motion-dnd/grid
22

3-
This Turborepo starter is maintained by the Turborepo core team.
3+
### 개요
44

5-
## Using this example
5+
`@simple-motion-dnd/grid`는 Motion의 Reorder 개념을 참고했지만, Reorder 컴포넌트는 수직, 수평 방향만 지원해서 그리드 형태도 가능하도록 구현했어요.
6+
**위치 정보를 저장하지 않고 드래그 시점에만 계산하는 경량 구조**로 구현되었어요.
7+
DOM API를 직접 활용해 정확한 충돌 감지와 부드러운 전환을 제공합니다.
68

7-
Run the following command:
9+
---
810

9-
```sh
10-
npx create-turbo@latest
11-
```
12-
13-
## What's inside?
14-
15-
This Turborepo includes the following packages/apps:
16-
17-
### Apps and Packages
18-
19-
- `docs`: a [Next.js](https://nextjs.org/) app
20-
- `web`: another [Next.js](https://nextjs.org/) app
21-
- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
22-
- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
23-
- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
24-
25-
Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
26-
27-
### Utilities
28-
29-
This Turborepo has some additional tools already setup for you:
30-
31-
- [TypeScript](https://www.typescriptlang.org/) for static type checking
32-
- [ESLint](https://eslint.org/) for code linting
33-
- [Prettier](https://prettier.io) for code formatting
34-
35-
### Build
36-
37-
To build all apps and packages, run the following command:
11+
### 설치
3812

13+
```bash
14+
npm install @simple-motion-dnd/grid
15+
# or
16+
yarn add @simple-motion-dnd/grid
3917
```
40-
cd my-turborepo
4118

42-
# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
43-
turbo build
19+
---
4420

45-
# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
46-
npx turbo build
47-
yarn dlx turbo build
48-
pnpm exec turbo build
49-
```
21+
### 기본 사용 예시
5022

51-
You can build a specific package by using a [filter](https://turborepo.com/docs/crafting-your-repository/running-tasks#using-filters):
23+
```tsx
24+
import { MotionDnDGrid } from '@simple-motion-dnd/grid';
25+
import { useState } from 'react';
5226

53-
```
54-
# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
55-
turbo build --filter=docs
27+
export default function Example() {
28+
const [items, setItems] = useState([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]);
5629

57-
# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
58-
npx turbo build --filter=docs
59-
yarn exec turbo build --filter=docs
60-
pnpm exec turbo build --filter=docs
30+
return (
31+
<MotionDnDGrid.Group items={items} onSorted={setItems} cols={2} gap={10}>
32+
{items.map((item) => (
33+
<MotionDnDGrid.Item key={item.id} itemId={item.id}>
34+
<div>{item.id}</div>
35+
</MotionDnDGrid.Item>
36+
))}
37+
</MotionDnDGrid.Group>
38+
);
39+
}
6140
```
6241

63-
### Develop
64-
65-
To develop all apps and packages, run the following command:
66-
67-
```
68-
cd my-turborepo
69-
70-
# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
71-
turbo dev
72-
73-
# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
74-
npx turbo dev
75-
yarn exec turbo dev
76-
pnpm exec turbo dev
77-
```
42+
---
7843

79-
You can develop a specific package by using a [filter](https://turborepo.com/docs/crafting-your-repository/running-tasks#using-filters):
44+
### Props 요약
8045

81-
```
82-
# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
83-
turbo dev --filter=web
84-
85-
# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
86-
npx turbo dev --filter=web
87-
yarn exec turbo dev --filter=web
88-
pnpm exec turbo dev --filter=web
89-
```
90-
91-
### Remote Caching
92-
93-
> [!TIP]
94-
> Vercel Remote Cache is free for all plans. Get started today at [vercel.com](https://vercel.com/signup?/signup?utm_source=remote-cache-sdk&utm_campaign=free_remote_cache).
95-
96-
Turborepo can use a technique known as [Remote Caching](https://turborepo.com/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
97-
98-
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup?utm_source=turborepo-examples), then enter the following commands:
99-
100-
```
101-
cd my-turborepo
102-
103-
# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
104-
turbo login
105-
106-
# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
107-
npx turbo login
108-
yarn exec turbo login
109-
pnpm exec turbo login
110-
```
111-
112-
This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
113-
114-
Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
115-
116-
```
117-
# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
118-
turbo link
119-
120-
# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
121-
npx turbo link
122-
yarn exec turbo link
123-
pnpm exec turbo link
124-
```
46+
#### `MotionDnDGrid.Group`
12547

126-
## Useful Links
48+
| Prop | 설명 |
49+
| -------------- | ------------------------------------------- |
50+
| `items` | 재정렬할 아이템 배열 |
51+
| `onSorted` | 새로운 순서가 계산될 때 호출되는 콜백 |
52+
| `cols` | 한 줄의 열 개수 |
53+
| `gap` | 아이템 간 간격(px) |
54+
| `layoutScroll` | 스크롤 가능한 컨테이너에서 사용할 때 `true` |
12755

128-
Learn more about the power of Turborepo:
56+
#### `MotionDnDGrid.Item`
12957

130-
- [Tasks](https://turborepo.com/docs/crafting-your-repository/running-tasks)
131-
- [Caching](https://turborepo.com/docs/crafting-your-repository/caching)
132-
- [Remote Caching](https://turborepo.com/docs/core-concepts/remote-caching)
133-
- [Filtering](https://turborepo.com/docs/crafting-your-repository/running-tasks#using-filters)
134-
- [Configuration Options](https://turborepo.com/docs/reference/configuration)
135-
- [CLI Usage](https://turborepo.com/docs/reference/command-line-reference)
58+
| Prop | 설명 |
59+
| -------- | ----------------------------------- |
60+
| `itemId` | 아이템의 고유 ID |
61+
| `as` | 렌더링할 HTML 태그 (기본값: `'li'`) |

‎packages/simple-motion-dnd-grid/CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
# @simple-motion-dnd/grid
22

3+
## 1.1.0
4+
5+
### Minor Changes
6+
7+
- README.md 추가
8+
9+
## 1.0.0
10+
11+
### Major Changes
12+
13+
- Group 컴포넌트 Props 수정
14+
315
## 0.0.3
416

517
### Patch Changes

‎packages/simple-motion-dnd-grid/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
## @simple-motion-dnd/grid
2+
3+
### 개요
4+
5+
`@simple-motion-dnd/grid`는 Motion의 Reorder 개념을 참고했지만, Reorder 컴포넌트는 수직, 수평 방향만 지원해서 그리드 형태도 가능하도록 구현했어요.
6+
**위치 정보를 저장하지 않고 드래그 시점에만 계산하는 경량 구조**로 구현되었어요.
7+
DOM API를 직접 활용해 정확한 충돌 감지와 부드러운 전환을 제공합니다.
8+
9+
---
10+
11+
### 설치
12+
13+
```bash
14+
npm install @simple-motion-dnd/grid
15+
# or
16+
yarn add @simple-motion-dnd/grid
17+
```
18+
19+
---
20+
21+
### 기본 사용 예시
22+
23+
```tsx
24+
import { MotionDnDGrid } from '@simple-motion-dnd/grid';
25+
import { useState } from 'react';
26+
27+
export default function Example() {
28+
const [items, setItems] = useState([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]);
29+
30+
return (
31+
<MotionDnDGrid.Group items={items} onSorted={setItems} cols={2} gap={10}>
32+
{items.map((item) => (
33+
<MotionDnDGrid.Item key={item.id} itemId={item.id}>
34+
<div>{item.id}</div>
35+
</MotionDnDGrid.Item>
36+
))}
37+
</MotionDnDGrid.Group>
38+
);
39+
}
40+
```
41+
42+
---
43+
44+
### Props 요약
45+
46+
#### `MotionDnDGrid.Group`
47+
48+
| Prop | 설명 |
49+
| -------------- | ------------------------------------------- |
50+
| `items` | 재정렬할 아이템 배열 |
51+
| `onSorted` | 새로운 순서가 계산될 때 호출되는 콜백 |
52+
| `cols` | 한 줄의 열 개수 |
53+
| `gap` | 아이템 간 간격(px) |
54+
| `layoutScroll` | 스크롤 가능한 컨테이너에서 사용할 때 `true` |
55+
56+
#### `MotionDnDGrid.Item`
57+
58+
| Prop | 설명 |
59+
| -------- | ----------------------------------- |
60+
| `itemId` | 아이템의 고유 ID |
61+
| `as` | 렌더링할 HTML 태그 (기본값: `'li'`) |

‎packages/simple-motion-dnd-grid/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@simple-motion-dnd/grid",
3-
"version": "0.0.3",
3+
"version": "1.1.0",
44
"main": "./dist/index.cjs",
55
"module": "./dist/index.js",
66
"types": "./dist/index.d.ts",

‎packages/simple-motion-dnd-grid/src/components/MotionDnDGrid/Group.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import Grid from '../grid/Grid';
1010
import useContainerScroll from '../../hooks/useContainerScroll';
1111

1212
interface MotionDnDGroupProps<V extends MotionDnDValue>
13-
extends Omit<HTMLMotionProps<keyof HTMLElementTagNameMap>, 'values'> {
13+
extends HTMLMotionProps<keyof HTMLElementTagNameMap> {
1414
as?: keyof HTMLElementTagNameMap;
15-
values: V[];
15+
items: V[];
1616
onSorted?: (items: V[]) => void;
1717
layoutScroll?: boolean;
1818
cols: number;
@@ -22,7 +22,7 @@ interface MotionDnDGroupProps<V extends MotionDnDValue>
2222
export function MotionDnDGroup<V extends MotionDnDValue>({
2323
children,
2424
as = 'ul',
25-
values,
25+
items,
2626
onSorted,
2727
layoutScroll,
2828
cols,
@@ -32,7 +32,7 @@ export function MotionDnDGroup<V extends MotionDnDValue>({
3232
const Group = useMotionAsComponent(() => motion[as]);
3333

3434
const { container, scrollY, onPan } = useContainerScroll();
35-
let list = [...values];
35+
let list = [...items];
3636
const updateSort = (dragItem: string, target: string) => {
3737
const sortedList = sortItem(list, dragItem, target);
3838
list = sortedList;

0 commit comments

Comments
 (0)