Skip to content

Commit 6a555e8

Browse files
DawidWragaDawidWraga
committed
docs: imrpove readme and add store example
1 parent 55e51ac commit 6a555e8

18 files changed

+505
-101
lines changed

‎apps/docs-old/src/app/layout.tsx

-11
This file was deleted.

‎apps/docs-old/src/app/page.tsx

-10
This file was deleted.

‎apps/docs/package.json

-9
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,7 @@
99
"lint": "next lint",
1010
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next"
1111
},
12-
"repository": {
13-
"type": "git",
14-
"url": "git+https://github.com/shuding/nextra-docs-template.git"
15-
},
16-
"author": "Shu Ding <[email protected]>",
1712
"license": "MIT",
18-
"bugs": {
19-
"url": "https://github.com/shuding/nextra-docs-template/issues"
20-
},
21-
"homepage": "https://github.com/shuding/nextra-docs-template#readme",
2213
"dependencies": {
2314
"next": "^13.0.6",
2415
"nextra": "latest",

‎apps/docs-old/.eslintrc.js ‎examples/nextjs/.eslintrc.js

File renamed without changes.

‎apps/docs-old/next-env.d.ts ‎examples/nextjs/next-env.d.ts

File renamed without changes.

‎apps/docs-old/next.config.js ‎examples/nextjs/next.config.js

File renamed without changes.

‎apps/docs-old/package.json ‎examples/nextjs/package.json

+8-3
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,28 @@
55
"scripts": {
66
"build": "next build",
77
"start": "next start ",
8-
"dev": "next dev -p 3002",
8+
"dev": "next dev",
99
"lint": "next lint",
1010
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next"
1111
},
1212
"dependencies": {
1313
"@davstack/core": "workspace:*",
14+
"@davstack/store": "0.0.0",
1415
"@davstack/utils": "workspace:*",
1516
"next": "^14.1.1",
1617
"react": "^18.2.0",
17-
"react-dom": "^18.2.0"
18+
"react-dom": "^18.2.0",
19+
"zustand": "^4.5.2"
1820
},
1921
"devDependencies": {
22+
"@davstack/eslint-config": "workspace:*",
2023
"@davstack/tsconfig": "workspace:*",
2124
"@types/node": "^20.11.24",
2225
"@types/react": "^18.2.61",
2326
"@types/react-dom": "^18.2.19",
24-
"@davstack/eslint-config": "workspace:*",
27+
"autoprefixer": "^10.4.19",
28+
"postcss": "^8.4.38",
29+
"tailwindcss": "^3.4.1",
2530
"typescript": "^5.3.3"
2631
}
2732
}

‎examples/nextjs/postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎examples/nextjs/src/app/book-store/page.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
'use client';
2+
import { Button } from '@davstack/core';
3+
import { createStore } from '@davstack/store';
4+
import { useEffect, useMemo, useRef, useState } from 'react';
5+
6+
export default function Page() {
7+
return (
8+
<>
9+
<div className="w-[300px]">
10+
<BookInput />
11+
<ComponentUsingSearchBooks />
12+
</div>
13+
</>
14+
);
15+
}
16+
const books = [
17+
{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
18+
{ title: 'The Catcher in the Rye', author: 'J.D. Salinger' },
19+
{ title: 'To Kill a Mockingbird', author: 'Harper Lee' },
20+
{ title: 'The Lord of the Rings', author: 'J.R.R. Tolkien' },
21+
];
22+
23+
const altStore = createStore({
24+
searchTerm: '',
25+
}).extend((store) => ({
26+
useFilteredBooks: () => {
27+
const searchTerm = store.searchTerm.use();
28+
return books.filter((book) => {
29+
if (!searchTerm) return true;
30+
return book.title.toLowerCase().includes(searchTerm.toLowerCase());
31+
});
32+
},
33+
}));
34+
35+
const ComponentUsingSearchBooks = () => {
36+
const filteredBooks = altStore.useFilteredBooks();
37+
return (
38+
<>
39+
<h2>Books:</h2>
40+
<ul className="h-[300px]">
41+
{filteredBooks.map((book, index) => (
42+
<li key={index}>
43+
{book.title} by {book.author}
44+
</li>
45+
))}
46+
</ul>
47+
</>
48+
);
49+
};
50+
51+
function BookInput() {
52+
const searchTerm = altStore.searchTerm.use();
53+
return (
54+
<input
55+
type="text"
56+
value={searchTerm}
57+
onChange={(e) => altStore.searchTerm.set(e.target.value)}
58+
placeholder="Search for a book..."
59+
className="w-full p-2 border border-gray-300 rounded-md"
60+
/>
61+
);
62+
}

‎examples/nextjs/src/app/globals.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎examples/nextjs/src/app/layout.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Link from 'next/link';
2+
import './globals.css';
3+
4+
export default function RootLayout({
5+
children,
6+
}: {
7+
children: React.ReactNode;
8+
}) {
9+
return (
10+
<html lang="en">
11+
<body>
12+
<div className="grid place-content-center w-screen h-screen relative">
13+
{children}
14+
<Link
15+
className="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-xl"
16+
href="/"
17+
>
18+
home
19+
</Link>
20+
</div>
21+
</body>
22+
</html>
23+
);
24+
}

‎examples/nextjs/src/app/page.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Link from 'next/link';
2+
3+
export interface AppPageProps {}
4+
5+
export default function AppPage(props: AppPageProps) {
6+
const {} = props;
7+
8+
return (
9+
<>
10+
<div className="flex flex-col gap-2 p-5 ">
11+
<Link href="/book-store">Book Store</Link>
12+
<Link href="/counter">Counter</Link>
13+
<Link href="/todo">Todo</Link>
14+
</div>
15+
</>
16+
);
17+
}

‎examples/nextjs/src/app/todo/page.tsx

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
'use client';
2+
import { createStore } from '@davstack/store';
3+
4+
export const todoStore = createStore({
5+
todos: [] as { id: number; text: string; completed: boolean }[],
6+
}).extend((store) => ({
7+
addTodo(text: string) {
8+
store.set((draft) => {
9+
draft.todos.push({
10+
id: Date.now(),
11+
text,
12+
completed: false,
13+
});
14+
});
15+
},
16+
toggleTodo(id: number) {
17+
store.set((draft) => {
18+
const todo = draft.todos.find((todo) => todo.id === id);
19+
if (todo) {
20+
todo.completed = !todo.completed;
21+
}
22+
});
23+
},
24+
deleteTodo(id: number) {
25+
store.set((draft) => {
26+
const index = draft.todos.findIndex((todo) => todo.id === id);
27+
if (index !== -1) {
28+
draft.todos.splice(index, 1);
29+
}
30+
});
31+
},
32+
}));
33+
34+
import React, { useState } from 'react';
35+
36+
export default function TodoPage() {
37+
const [newTodo, setNewTodo] = useState('');
38+
const todos = todoStore.todos.use();
39+
40+
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
41+
e.preventDefault();
42+
if (newTodo.trim()) {
43+
todoStore.addTodo(newTodo.trim());
44+
setNewTodo('');
45+
}
46+
};
47+
48+
return (
49+
<div className="container mx-auto px-4 py-8">
50+
<h1 className="text-4xl font-bold mb-8">Todo App</h1>
51+
<form onSubmit={handleSubmit} className="mb-8">
52+
<input
53+
type="text"
54+
value={newTodo}
55+
onChange={(e) => setNewTodo(e.target.value)}
56+
placeholder="Enter a new todo"
57+
className="border border-gray-300 rounded px-4 py-2 mr-4"
58+
/>
59+
<button
60+
type="submit"
61+
className="bg-blue-500 text-white rounded px-4 py-2"
62+
>
63+
Add Todo
64+
</button>
65+
</form>
66+
<ul>
67+
{todos.map((todo) => (
68+
<li key={todo.id} className="mb-4">
69+
<label className="flex items-center">
70+
<input
71+
type="checkbox"
72+
checked={todo.completed}
73+
onChange={() => todoStore.toggleTodo(todo.id)}
74+
className="mr-2"
75+
/>
76+
<span className={todo.completed ? 'line-through' : ''}>
77+
{todo.text}
78+
</span>
79+
</label>
80+
<button
81+
onClick={() => todoStore.deleteTodo(todo.id)}
82+
className="text-red-500 ml-4"
83+
>
84+
Delete
85+
</button>
86+
</li>
87+
))}
88+
</ul>
89+
</div>
90+
);
91+
}

‎examples/nextjs/tailwind.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
'./app/**/*.{js,ts,jsx,tsx,mdx}',
5+
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
6+
'./components/**/*.{js,ts,jsx,tsx,mdx}',
7+
8+
// Or if using `src` directory:
9+
'./src/**/*.{js,ts,jsx,tsx,mdx}',
10+
],
11+
theme: {
12+
extend: {},
13+
},
14+
plugins: [],
15+
};

‎apps/docs-old/tsconfig.json ‎examples/nextjs/tsconfig.json

File renamed without changes.

0 commit comments

Comments
 (0)