Skip to content

Commit 99a2528

Browse files
chrisvxdchrisvxd
committed
docs: add Puck demo app
1 parent 28e34c3 commit 99a2528

File tree

13 files changed

+60
-218
lines changed

13 files changed

+60
-218
lines changed

‎apps/puck/.eslintrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
extends: ['@dnd-kit/eslint-config'],
3+
};

‎apps/puck/.gitignore‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎apps/puck/README.md‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎apps/puck/eslint.config.js‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎apps/puck/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React</title>
6+
<title>Puck demo</title>
87
</head>
98
<body>
109
<div id="root"></div>

‎apps/puck/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@measured/puck": "0.19.0-canary.4b545576",
1314
"react": "^19.0.0",
1415
"react-dom": "^19.0.0"
1516
},

‎apps/puck/public/vite.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/puck/src/App.css‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎apps/puck/src/App.jsx‎

Lines changed: 48 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,51 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
1+
// App.jsx
2+
import {Puck} from '@measured/puck';
3+
import '@measured/puck/puck.css';
54

6-
function App() {
7-
const [count, setCount] = useState(0)
5+
const config = {
6+
components: {
7+
Card: {
8+
inline: true,
9+
render: ({puck}) => {
10+
return (
11+
<div
12+
style={{
13+
alignItems: 'center',
14+
background: 'white',
15+
border: '1px solid black',
16+
borderRadius: 8,
17+
display: 'flex',
18+
justifyContent: 'center',
19+
flexGrow: 1,
20+
padding: 24,
21+
height: 128,
22+
}}
23+
ref={puck.dragRef} // Use inline ref so we can use flexGrow
24+
>
25+
Card
26+
</div>
27+
);
28+
},
29+
},
30+
Container: {
31+
fields: {
32+
Content: {
33+
type: 'slot', // NB This is triggering DropZone deprecation warning when it shouldn't. Puck bug.
34+
},
35+
},
36+
render: ({Content}) => {
37+
return (
38+
<div style={{background: '#eee', padding: 32}}>
39+
<Content style={{display: 'flex', flexWrap: 'wrap', gap: 16}} />
40+
</div>
41+
);
42+
},
43+
},
44+
},
45+
};
846

9-
return (
10-
<>
11-
<div>
12-
<a href="https://vite.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
18-
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.jsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
31-
</>
32-
)
33-
}
47+
const App = () => {
48+
return <Puck config={config} data={{}} />;
49+
};
3450

35-
export default App
51+
export default App;

‎apps/puck/src/assets/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)