Skip to content

Commit 247f3dd

Browse files
fyalavuzfyalavuz
authored
Merge pull request #1 from fyalavuz/project-improvement
Overhaul documentation structure and layout
2 parents 791b46b + 1025ff5 commit 247f3dd

58 files changed

Lines changed: 6771 additions & 8284 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/docs/app/docs/[[...slug]]/page.tsx‎

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

‎apps/docs/app/docs/components/app-shell/page.tsx‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import Link from "next/link";
2+
import { CodeBlock } from "@/components/docs/code-block";
3+
import { ComponentPreview } from "@/components/docs/component-preview";
4+
import { ArrowRight } from "lucide-react";
5+
6+
export const metadata = {
7+
title: "AppShell",
8+
description: "The root layout component that wraps your entire application.",
9+
};
10+
11+
const basicCode = `import { AppShell, Header, Content, Footer } from "appshell-react";
12+
13+
export default function App() {
14+
return (
15+
<AppShell safeArea>
16+
<Header behavior="fixed" logo={<span>Logo</span>} />
17+
<Content className="p-4">
18+
{/* Your content */}
19+
</Content>
20+
<Footer variant="tab-bar">
21+
{/* Footer items */}
22+
</Footer>
23+
</AppShell>
24+
);
25+
}`;
26+
27+
const withMotionCode = `import { AppShell, MotionProvider } from "appshell-react";
28+
import { framerMotionAdapter } from "appshell-react/motion-framer";
29+
30+
export default function App() {
31+
return (
32+
<MotionProvider adapter={framerMotionAdapter}>
33+
<AppShell safeArea>
34+
{/* Your app content with smooth animations */}
35+
</AppShell>
36+
</MotionProvider>
37+
);
38+
}`;
39+
40+
const propsTable = [
41+
{ name: "safeArea", type: "boolean", default: "false", description: "Enable safe area insets for notched devices" },
42+
{ name: "className", type: "string", default: "-", description: "Additional CSS classes" },
43+
{ name: "children", type: "ReactNode", default: "-", description: "Header, Content, Footer, and Sidebar components" },
44+
];
45+
46+
export default function AppShellPage() {
47+
return (
48+
<div className="space-y-8">
49+
<div>
50+
<h1 className="scroll-m-20 text-4xl font-bold tracking-tight">
51+
AppShell
52+
</h1>
53+
<p className="text-lg text-muted-foreground mt-4 text-balance">
54+
The root layout component that provides context for all child components
55+
and handles safe area insets for mobile devices.
56+
</p>
57+
</div>
58+
59+
<ComponentPreview
60+
name="AppShell Demo"
61+
code={basicCode}
62+
previewUrl="/examples/preview/tab-bar"
63+
isMobile={true}
64+
/>
65+
66+
<div className="space-y-4">
67+
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
68+
Installation
69+
</h2>
70+
<CodeBlock code="npm install appshell-react" language="bash" />
71+
</div>
72+
73+
<div className="space-y-4">
74+
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
75+
Usage
76+
</h2>
77+
<p className="text-muted-foreground">
78+
Wrap your application with AppShell to enable the layout system:
79+
</p>
80+
<CodeBlock code={basicCode} language="tsx" filename="app.tsx" />
81+
</div>
82+
83+
<div className="space-y-4">
84+
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
85+
With Animations
86+
</h2>
87+
<p className="text-muted-foreground">
88+
For smooth animations, wrap your app with MotionProvider and pass a motion adapter:
89+
</p>
90+
<CodeBlock code={withMotionCode} language="tsx" filename="app.tsx" />
91+
</div>
92+
93+
<div className="space-y-4">
94+
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
95+
Props
96+
</h2>
97+
<div className="rounded-lg border">
98+
<table className="w-full text-sm">
99+
<thead>
100+
<tr className="border-b bg-muted/50">
101+
<th className="px-4 py-3 text-left font-medium">Prop</th>
102+
<th className="px-4 py-3 text-left font-medium">Type</th>
103+
<th className="px-4 py-3 text-left font-medium">Default</th>
104+
<th className="px-4 py-3 text-left font-medium">Description</th>
105+
</tr>
106+
</thead>
107+
<tbody>
108+
{propsTable.map((prop, i) => (
109+
<tr key={prop.name} className={i < propsTable.length - 1 ? "border-b" : ""}>
110+
<td className="px-4 py-3 font-mono text-xs text-primary">{prop.name}</td>
111+
<td className="px-4 py-3 font-mono text-xs text-muted-foreground">{prop.type}</td>
112+
<td className="px-4 py-3 font-mono text-xs">{prop.default}</td>
113+
<td className="px-4 py-3 text-muted-foreground">{prop.description}</td>
114+
</tr>
115+
))}
116+
</tbody>
117+
</table>
118+
</div>
119+
</div>
120+
121+
<div className="space-y-4">
122+
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
123+
Safe Areas
124+
</h2>
125+
<p className="text-muted-foreground">
126+
When <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-sm">safeArea</code> is
127+
enabled, AppShell automatically handles insets for devices with notches, rounded corners,
128+
or home indicators. It sets CSS custom properties that child components use:
129+
</p>
130+
<CodeBlock
131+
code={`/* These variables are set automatically */
132+
:root {
133+
--sa-top: env(safe-area-inset-top);
134+
--sa-bottom: env(safe-area-inset-bottom);
135+
--sa-left: env(safe-area-inset-left);
136+
--sa-right: env(safe-area-inset-right);
137+
}`}
138+
language="css"
139+
/>
140+
</div>
141+
142+
<div className="flex items-center gap-4 pt-4">
143+
<Link
144+
href="/docs/components/header"
145+
className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors"
146+
>
147+
Next: Header
148+
<ArrowRight className="ml-2 size-4" />
149+
</Link>
150+
</div>
151+
</div>
152+
);
153+
}

‎apps/docs/app/docs/components/content/page.tsx‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import Link from "next/link";
2+
import { CodeBlock } from "@/components/docs/code-block";
3+
import { ArrowRight, ArrowLeft } from "lucide-react";
4+
5+
export const metadata = {
6+
title: "Content",
7+
description: "The main content area that handles scrolling and safe area padding.",
8+
};
9+
10+
const basicCode = `import { AppShell, Header, Content } from "appshell-react";
11+
12+
export default function App() {
13+
return (
14+
<AppShell safeArea>
15+
<Header behavior="fixed" logo={<span>App</span>} />
16+
<Content className="p-4">
17+
<h1 className="text-2xl font-bold">Welcome</h1>
18+
<p>Your content goes here...</p>
19+
</Content>
20+
</AppShell>
21+
);
22+
}`;
23+
24+
const withFooterCode = `<AppShell safeArea>
25+
<Header behavior="fixed" logo={<span>App</span>} />
26+
<Content className="pb-24">
27+
{/* Extra bottom padding for footer */}
28+
</Content>
29+
<Footer variant="tab-bar">
30+
{/* Footer items */}
31+
</Footer>
32+
</AppShell>`;
33+
34+
const propsTable = [
35+
{ name: "className", type: "string", default: "-", description: "Additional CSS classes" },
36+
{ name: "style", type: "CSSProperties", default: "-", description: "Inline styles" },
37+
{ name: "children", type: "ReactNode", default: "-", description: "Content children" },
38+
];
39+
40+
export default function ContentPage() {
41+
return (
42+
<div className="space-y-8">
43+
<div>
44+
<h1 className="scroll-m-20 text-4xl font-bold tracking-tight">
45+
Content
46+
</h1>
47+
<p className="text-lg text-muted-foreground mt-4 text-balance">
48+
The main scrollable area that automatically handles spacing for headers
49+
and footers.
50+
</p>
51+
</div>
52+
53+
<div className="space-y-4">
54+
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
55+
Usage
56+
</h2>
57+
<p className="text-muted-foreground">
58+
Content is the main scrollable container for your application:
59+
</p>
60+
<CodeBlock code={basicCode} language="tsx" filename="app.tsx" />
61+
</div>
62+
63+
<div className="space-y-4">
64+
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
65+
With Footer
66+
</h2>
67+
<p className="text-muted-foreground">
68+
When using a footer, add bottom padding to prevent content from being hidden:
69+
</p>
70+
<CodeBlock code={withFooterCode} language="tsx" />
71+
</div>
72+
73+
<div className="space-y-4">
74+
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
75+
Props
76+
</h2>
77+
<div className="rounded-lg border">
78+
<table className="w-full text-sm">
79+
<thead>
80+
<tr className="border-b bg-muted/50">
81+
<th className="px-4 py-3 text-left font-medium">Prop</th>
82+
<th className="px-4 py-3 text-left font-medium">Type</th>
83+
<th className="px-4 py-3 text-left font-medium">Default</th>
84+
<th className="px-4 py-3 text-left font-medium">Description</th>
85+
</tr>
86+
</thead>
87+
<tbody>
88+
{propsTable.map((prop, i) => (
89+
<tr key={prop.name} className={i < propsTable.length - 1 ? "border-b" : ""}>
90+
<td className="px-4 py-3 font-mono text-xs text-primary">{prop.name}</td>
91+
<td className="px-4 py-3 font-mono text-xs text-muted-foreground">{prop.type}</td>
92+
<td className="px-4 py-3 font-mono text-xs">{prop.default}</td>
93+
<td className="px-4 py-3 text-muted-foreground">{prop.description}</td>
94+
</tr>
95+
))}
96+
</tbody>
97+
</table>
98+
</div>
99+
</div>
100+
101+
<div className="space-y-4">
102+
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
103+
Scroll Events
104+
</h2>
105+
<p className="text-muted-foreground">
106+
Content automatically tracks scroll position and direction, which is used
107+
by Header and Footer components for auto-hide behavior. You can access this
108+
information using the <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-sm">useAppShell</code> hook.
109+
</p>
110+
</div>
111+
112+
<div className="flex items-center justify-between pt-4">
113+
<Link
114+
href="/docs/components/footer"
115+
className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
116+
>
117+
<ArrowLeft className="mr-2 size-4" />
118+
Footer
119+
</Link>
120+
<Link
121+
href="/docs/components/sidebar"
122+
className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors"
123+
>
124+
Next: Sidebar
125+
<ArrowRight className="ml-2 size-4" />
126+
</Link>
127+
</div>
128+
</div>
129+
);
130+
}

0 commit comments

Comments
 (0)