From 53b7b1925e9b7ab7d66934fff6744c3478833eac Mon Sep 17 00:00:00 2001
From: Matthias Ngeo <matthiasngeo@gmail.com>
Date: Tue, 25 Jun 2024 23:22:28 +0800
Subject: [PATCH] Fix documentation (#55)

---
 docs/.env.development                    |   2 +-
 docs/components/widget.tsx               |   9 +-
 docs/pages/docs/dialog.mdx               |   2 +-
 docs/pages/docs/scaffold.mdx             |   2 +-
 docs/pages/docs/separator.mdx            |   6 +-
 docs/pages/docs/switch.mdx               |   4 +-
 docs/pages/docs/tabs.mdx                 |   2 +-
 forui/lib/src/widgets/header/header.dart |   2 +-
 forui/lib/src/widgets/switch.dart        |   5 +-
 samples/lib/sample_scaffold.dart         |  21 +++--
 samples/lib/widgets/scaffold.dart        |  86 ++++++++++--------
 samples/lib/widgets/separator.dart       |  78 ++++++++--------
 samples/lib/widgets/switch.dart          |   6 +-
 samples/lib/widgets/tabs.dart            | 111 ++++++++++++-----------
 samples/lib/widgets/text_field.dart      |  51 +++++++----
 15 files changed, 212 insertions(+), 175 deletions(-)

diff --git a/docs/.env.development b/docs/.env.development
index e348e032b..5678937ad 100644
--- a/docs/.env.development
+++ b/docs/.env.development
@@ -1 +1 @@
-NEXT_PUBLIC_DEMO_URL=https://demo.master.forui.dev/card
\ No newline at end of file
+NEXT_PUBLIC_DEMO_URL=https://dev.demo.forui.dev
\ No newline at end of file
diff --git a/docs/components/widget.tsx b/docs/components/widget.tsx
index 667bc5b09..3048f588f 100644
--- a/docs/components/widget.tsx
+++ b/docs/components/widget.tsx
@@ -3,20 +3,21 @@ import {useTheme} from "nextra-theme-docs";
 interface Props {
     name: string;
     variant?: string;
+    height?: number;
     query: Record<string, string>;
 }
 
-export function Widget({name, variant = 'default', query}: Props) {
+export function Widget({name, variant = 'default', height = 200, query}: Props) {
     const {resolvedTheme} = useTheme();
-    query['theme'] = resolvedTheme;
+    query['theme'] = `zinc-${resolvedTheme}`;
 
     const url = process.env['NEXT_PUBLIC_DEMO_URL'];
 
     return (
         <iframe
+            className="w-full border rounded dark:border-neutral-400/20"
+            style={{height: `${height}px`}}
             src={`${url}/${name}/${variant}?${new URLSearchParams(query).toString()}`}
-            width={0}
-            height={0}
         />
     );
 }
diff --git a/docs/pages/docs/dialog.mdx b/docs/pages/docs/dialog.mdx
index 1723696cf..3db1c8fb8 100644
--- a/docs/pages/docs/dialog.mdx
+++ b/docs/pages/docs/dialog.mdx
@@ -6,7 +6,7 @@ A modal dialog interrupts the user with important content and expects a response
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='dialog' query={{vertical: "false"}}/>
+    <Widget name='dialog' query={{vertical: "false"}} height={400}/>
   </Tabs.Tab>
   <Tabs.Tab>
     ```dart
diff --git a/docs/pages/docs/scaffold.mdx b/docs/pages/docs/scaffold.mdx
index cc0539e03..2b46303e2 100644
--- a/docs/pages/docs/scaffold.mdx
+++ b/docs/pages/docs/scaffold.mdx
@@ -6,7 +6,7 @@ Creates a visual scaffold for Forui widgets.
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='scaffold' query={{}}/>
+    <Widget name='scaffold' query={{}} height={600}/>
   </Tabs.Tab>
   <Tabs.Tab>
     ```dart
diff --git a/docs/pages/docs/separator.mdx b/docs/pages/docs/separator.mdx
index 965a8b8dc..aad5f2b5c 100644
--- a/docs/pages/docs/separator.mdx
+++ b/docs/pages/docs/separator.mdx
@@ -6,10 +6,14 @@ Visually or semantically separates content.
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='separator' query={{}}/>
+    <Widget name='separator' query={{}} height={300}/>
   </Tabs.Tab>
   <Tabs.Tab>
     ```dart
+    final theme = context.theme;
+    final colorScheme = theme.colorScheme;
+    final typography = theme.typography;
+
     Padding(
       padding: const EdgeInsets.all(16),
       child: Column(
diff --git a/docs/pages/docs/switch.mdx b/docs/pages/docs/switch.mdx
index b5d56c89a..fd978942b 100644
--- a/docs/pages/docs/switch.mdx
+++ b/docs/pages/docs/switch.mdx
@@ -14,8 +14,8 @@ A switch that allows the user to toggle between checked and unchecked.
 
     ValueListenableBuilder(
       valueListenable: notifier,
-      builder: (context, _, __) => FSwitch(
-        value: notifier.value,
+      builder: (context, value, __) => FSwitch(
+        value: value,
         onChanged: (value) => notifier.value = value,
       ),
     );
diff --git a/docs/pages/docs/tabs.mdx b/docs/pages/docs/tabs.mdx
index cb3c97882..855a6d1b0 100644
--- a/docs/pages/docs/tabs.mdx
+++ b/docs/pages/docs/tabs.mdx
@@ -6,7 +6,7 @@ A set of layered sections of content—known as tab entries—that are displayed
 
 <Tabs items={['Preview', 'Code']}>
   <Tabs.Tab>
-    <Widget name='tabs' query={{}}/>
+    <Widget name='tabs' query={{}} height={500}/>
   </Tabs.Tab>
   <Tabs.Tab>
     ```dart
diff --git a/forui/lib/src/widgets/header/header.dart b/forui/lib/src/widgets/header/header.dart
index d1ab0b445..d3e0c4f5e 100644
--- a/forui/lib/src/widgets/header/header.dart
+++ b/forui/lib/src/widgets/header/header.dart
@@ -125,7 +125,7 @@ final class FHeaderStyle with Diagnosticable {
           height: 1,
         ),
         action = FHeaderActionStyle.inherit(colorScheme: colorScheme),
-        padding = style.pagePadding.copyWith(bottom: 10);
+        padding = style.pagePadding.copyWith(bottom: 15);
 
   /// Returns a copy of this [FHeaderStyle] with the given properties replaced.
   ///
diff --git a/forui/lib/src/widgets/switch.dart b/forui/lib/src/widgets/switch.dart
index 851218efe..22b6f0da5 100644
--- a/forui/lib/src/widgets/switch.dart
+++ b/forui/lib/src/widgets/switch.dart
@@ -153,10 +153,7 @@ final class FSwitchStyle with Diagnosticable {
       : checkedColor = colorScheme.primary,
         uncheckedColor = colorScheme.border,
         thumbColor = colorScheme.background,
-        focusColor = HSLColor.fromColor(colorScheme.primary.withOpacity(0.80))
-            .withLightness(0.69)
-            .withSaturation(0.835)
-            .toColor();
+        focusColor = colorScheme.primary;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
diff --git a/samples/lib/sample_scaffold.dart b/samples/lib/sample_scaffold.dart
index 7591528f0..e8775747c 100644
--- a/samples/lib/sample_scaffold.dart
+++ b/samples/lib/sample_scaffold.dart
@@ -14,19 +14,20 @@ abstract class SampleScaffold extends StatelessWidget {
   SampleScaffold({
     String theme = 'zinc-light',
     super.key,
-  }):
-    theme = themes[theme]!;
+  }) : theme = themes[theme]!;
 
   @override
   Widget build(BuildContext context) => FTheme(
-      data: theme,
-      child: FScaffold(
-
-        content: Center(
-        child: child(context),
-      ),
-    ),
-  );
+        data: theme,
+        child: FScaffold(
+          content: Center(
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(maxWidth: 600),
+              child: child(context),
+            ),
+          ),
+        ),
+      );
 
   Widget child(BuildContext context);
 }
diff --git a/samples/lib/widgets/scaffold.dart b/samples/lib/widgets/scaffold.dart
index 38f084b3a..a2b22defc 100644
--- a/samples/lib/widgets/scaffold.dart
+++ b/samples/lib/widgets/scaffold.dart
@@ -12,46 +12,56 @@ class ScaffoldPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => FScaffold(
-        header: FHeader(
-          title: 'Settings',
-          actions: [
-            FHeaderAction(
-              icon: FAssets.icons.ellipsis,
-              onPress: () {},
-            ),
-          ],
-        ),
-        content: ListView(
-          children: [
-            FCard(
-              title: 'Account',
-              subtitle: 'Make changes to your account here. Click save when you are done.',
-              child: Padding(
-                padding: const EdgeInsets.only(top: 10),
-                child: Column(
-                  children: [
-                    const FTextField(
-                      label: 'Name',
-                      hint: 'John Renalo',
-                    ),
-                    const SizedBox(height: 10),
-                    const FTextField(
-                      label: 'Email',
-                      hint: 'john@doe.com',
-                    ),
-                    Padding(
-                      padding: const EdgeInsets.only(top: 24, bottom: 16),
-                      child: FButton(
-                        label: 'Save',
-                        onPress: () {},
+  Widget child(BuildContext context) => Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+      const SizedBox(height: 30),
+      SizedBox(
+        height: 420,
+        child: FScaffold(
+              header: FHeader(
+                title: 'Settings',
+                actions: [
+                  FHeaderAction(
+                    icon: FAssets.icons.ellipsis,
+                    onPress: () {},
+                  ),
+                ],
+              ),
+              content: Column(
+                children: [
+                  const SizedBox(height: 5),
+                  FCard(
+                    title: 'Account',
+                    subtitle: 'Make changes to your account here. Click save when you are done.',
+                    child: Padding(
+                      padding: const EdgeInsets.only(top: 10),
+                      child: Column(
+                        children: [
+                          const FTextField(
+                            label: 'Name',
+                            hint: 'John Renalo',
+                          ),
+                          const SizedBox(height: 10),
+                          const FTextField(
+                            label: 'Email',
+                            hint: 'john@doe.com',
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 24, bottom: 16),
+                            child: FButton(
+                              label: 'Save',
+                              onPress: () {},
+                            ),
+                          ),
+                        ],
                       ),
                     ),
-                  ],
-                ),
+                  ),
+                ],
               ),
             ),
-          ],
-        ),
-      );
+      ),
+    ],
+  );
 }
diff --git a/samples/lib/widgets/separator.dart b/samples/lib/widgets/separator.dart
index 03f9cdc06..2585268d4 100644
--- a/samples/lib/widgets/separator.dart
+++ b/samples/lib/widgets/separator.dart
@@ -13,50 +13,54 @@ class SeparatorPage extends SampleScaffold {
 
   @override
   Widget child(BuildContext context) {
-    final theme = context.theme;
     final colorScheme = theme.colorScheme;
     final typography = theme.typography;
 
     return Padding(
       padding: const EdgeInsets.all(16),
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Text(
-            'Flutter Forui',
-            style: typography.xl2.copyWith(
-              color: colorScheme.foreground,
-              fontWeight: FontWeight.w600,
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 300),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              'Flutter Forui',
+              style: typography.xl2.copyWith(
+                color: colorScheme.foreground,
+                fontWeight: FontWeight.w600,
+              ),
             ),
-          ),
-          Text(
-            'An open-source widget library.',
-            style: typography.sm.copyWith(color: colorScheme.mutedForeground),
-          ),
-          const FSeparator(),
-          SizedBox(
-            height: 30,
-            child: Row(
-              children: [
-                Text(
-                  'Blog',
-                  style: typography.sm.copyWith(color: colorScheme.foreground),
-                ),
-                const FSeparator(vertical: true),
-                Text(
-                  'Docs',
-                  style: typography.sm.copyWith(color: colorScheme.foreground),
-                ),
-                const FSeparator(vertical: true),
-                Text(
-                  'Source',
-                  style: typography.sm.copyWith(color: colorScheme.foreground),
-                ),
-              ],
+            Text(
+              'An open-source widget library.',
+              style: typography.sm.copyWith(color: colorScheme.mutedForeground),
             ),
-          ),
-        ],
+            const FSeparator(),
+            SizedBox(
+              height: 30,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    'Blog',
+                    style: typography.sm.copyWith(color: colorScheme.foreground),
+                  ),
+                  const FSeparator(vertical: true),
+                  Text(
+                    'Docs',
+                    style: typography.sm.copyWith(color: colorScheme.foreground),
+                  ),
+                  const FSeparator(vertical: true),
+                  Text(
+                    'Source',
+                    style: typography.sm.copyWith(color: colorScheme.foreground),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }
diff --git a/samples/lib/widgets/switch.dart b/samples/lib/widgets/switch.dart
index 848582e35..ed5e4138b 100644
--- a/samples/lib/widgets/switch.dart
+++ b/samples/lib/widgets/switch.dart
@@ -18,10 +18,10 @@ class SwitchPage extends SampleScaffold {
       padding: const EdgeInsets.all(16),
       child: ValueListenableBuilder(
         valueListenable: notifier,
-        builder: (context, _, __) => FSwitch(
-          value: true,
+        builder: (context, value, __) => FSwitch(
+          value: value,
           autofocus: true,
-          onChanged: (value) {},
+          onChanged: (value) => notifier.value = value,
         ),
       ),
     );
diff --git a/samples/lib/widgets/tabs.dart b/samples/lib/widgets/tabs.dart
index f83131209..1d3ff1c3d 100644
--- a/samples/lib/widgets/tabs.dart
+++ b/samples/lib/widgets/tabs.dart
@@ -12,65 +12,70 @@ class TabsPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => Padding(
-        padding: const EdgeInsets.all(16),
-        child: FTabs(
-          tabs: [
-            FTabEntry(
-              label: 'Account',
-              content: FCard(
-                title: 'Account',
-                subtitle: 'Make changes to your account here. Click save when you are done.',
-                child: Padding(
-                  padding: const EdgeInsets.only(top: 10),
-                  child: Column(
-                    children: [
-                      const FTextField(
-                        label: 'Name',
-                        hint: 'John Renalo',
+  Widget child(BuildContext context) => Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(16),
+            child: FTabs(
+              tabs: [
+                FTabEntry(
+                  label: 'Account',
+                  content: FCard(
+                    title: 'Account',
+                    subtitle: 'Make changes to your account here. Click save when you are done.',
+                    child: Padding(
+                      padding: const EdgeInsets.only(top: 10),
+                      child: Column(
+                        children: [
+                          const FTextField(
+                            label: 'Name',
+                            hint: 'John Renalo',
+                          ),
+                          const SizedBox(height: 10),
+                          const FTextField(
+                            label: 'Email',
+                            hint: 'john@doe.com',
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 24, bottom: 16),
+                            child: FButton(
+                              label: 'Save',
+                              onPress: () {},
+                            ),
+                          ),
+                        ],
                       ),
-                      const SizedBox(height: 10),
-                      const FTextField(
-                        label: 'Email',
-                        hint: 'john@doe.com',
-                      ),
-                      Padding(
-                        padding: const EdgeInsets.only(top: 24, bottom: 16),
-                        child: FButton(
-                          label: 'Save',
-                          onPress: () {},
-                        ),
-                      ),
-                    ],
+                    ),
                   ),
                 ),
-              ),
-            ),
-            FTabEntry(
-              label: 'Password',
-              content: FCard(
-                title: 'Password',
-                subtitle: 'Change your password here. After saving, you will be logged out.',
-                child: Padding(
-                  padding: const EdgeInsets.only(top: 10),
-                  child: Column(
-                    children: [
-                      const FTextField(label: 'Current password'),
-                      const SizedBox(height: 10),
-                      const FTextField(label: 'New password'),
-                      Padding(
-                        padding: const EdgeInsets.only(top: 24, bottom: 16),
-                        child: FButton(
-                          label: 'Save',
-                          onPress: () {},
-                        ),
+                FTabEntry(
+                  label: 'Password',
+                  content: FCard(
+                    title: 'Password',
+                    subtitle: 'Change your password here. After saving, you will be logged out.',
+                    child: Padding(
+                      padding: const EdgeInsets.only(top: 10),
+                      child: Column(
+                        children: [
+                          const FTextField(label: 'Current password'),
+                          const SizedBox(height: 10),
+                          const FTextField(label: 'New password'),
+                          Padding(
+                            padding: const EdgeInsets.only(top: 24, bottom: 16),
+                            child: FButton(
+                              label: 'Save',
+                              onPress: () {},
+                            ),
+                          ),
+                        ],
                       ),
-                    ],
+                    ),
                   ),
                 ),
-              ),
+              ],
             ),
-          ],
-        ),
+          ),
+        ],
       );
 }
diff --git a/samples/lib/widgets/text_field.dart b/samples/lib/widgets/text_field.dart
index db6b07370..0d6bf966e 100644
--- a/samples/lib/widgets/text_field.dart
+++ b/samples/lib/widgets/text_field.dart
@@ -15,13 +15,18 @@ class TextFieldPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => Padding(
-    padding: const EdgeInsets.symmetric(horizontal: 20, vertical:10),
-    child: FTextField(
-      enabled: enabled,
-      label: 'Email',
-      hint: 'john@doe.com',
-    ),
+  Widget child(BuildContext context) => Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+      Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30),
+        child: FTextField(
+          enabled: enabled,
+          label: 'Email',
+          hint: 'john@doe.com',
+        ),
+      ),
+    ],
   );
 }
 
@@ -33,12 +38,17 @@ class PasswordTextFieldPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => Padding(
-    padding: const EdgeInsets.symmetric(horizontal: 20, vertical:10),
-    child: FTextField.password(
-      controller: TextEditingController(text: 'My password'),
-      label: 'Password',
-    ),
+  Widget child(BuildContext context) => Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+      Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 20, vertical:30),
+        child: FTextField.password(
+          controller: TextEditingController(text: 'My password'),
+          label: 'Password',
+        ),
+      ),
+    ],
   );
 }
 
@@ -50,10 +60,15 @@ class MultilineTextFieldPage extends SampleScaffold {
   });
 
   @override
-  Widget child(BuildContext context) => const Padding(
-    padding: EdgeInsets.symmetric(horizontal: 20, vertical:10),
-    child: FTextField.multiline(
-      label: 'Leave a review',
-    ),
+  Widget child(BuildContext context) => const Column(
+    mainAxisAlignment: MainAxisAlignment.center,
+    children: [
+      Padding(
+        padding: EdgeInsets.symmetric(horizontal: 20, vertical:30),
+        child: FTextField.multiline(
+          label: 'Leave a review',
+        ),
+      ),
+    ],
   );
 }