Merge branch 'main' into feature/avatar

.github/renovate.json

@@ -17,6 +17,19 @@
       "automerge": true
     },
 
+    {
+      "groupName": "Docs - Major Revisions",
+      "matchPaths": ["docs/**"],
+      "matchUpdateTypes": ["major"],
+      "automerge": false
+    },
+    {
+      "groupName": "Docs - Minor Revisions",
+      "matchPaths": ["docs/**"],
+      "matchUpdateTypes": ["minor", "patch", "pin", "digest"],
+      "automerge": true
+    },
+
     {
       "groupName": "Forui - Major Revisions",
       "matchPaths": ["forui/**"],

docs/package.json

@@ -13,7 +13,7 @@
   },
   "homepage": "https://forui.dev",
   "dependencies": {
-    "lucide-react": "^0.383.0",
+    "lucide-react": "^0.414.0",
     "next": "^13.5.6",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",

docs/pages/docs/resizable.mdx

@@ -0,0 +1,186 @@
+import { Tabs } from 'nextra/components';
+import { Widget } from "../../components/widget";
+
+# Resizable box
+A box which children can be resized along either the horizontal or vertical axis.
+
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='resizable' query={{}} height={700}/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```dart
+    class TimeOfDay extends StatelessWidget {
+      @override
+      Widget build(BuildContext context) => FResizable(
+        axis: Axis.vertical,
+        crossAxisExtent: 400,
+        interaction: const FResizableRegionInteraction.selectAndResize(0),
+        children: [
+          FResizableRegion.raw(
+            initialSize: 200,
+            minSize: 100,
+            builder: (context, data, _) {
+              final colorScheme = context.theme.colorScheme;
+              return Container(
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                  color: data.selected ? colorScheme.foreground : colorScheme.background,
+                  borderRadius: const BorderRadius.vertical(top: Radius.circular(8)),
+                  border: Border.all(color: colorScheme.border),
+                ),
+                child: Label(data: data, icon: FAssets.icons.sunrise, label: 'Morning'),
+              );
+            },
+          ),
+          FResizableRegion.raw(
+            initialSize: 200,
+            minSize: 100,
+            builder: (context, data, _) {
+              final colorScheme = context.theme.colorScheme;
+              return Container(
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                  color: data.selected ? colorScheme.foreground : colorScheme.background,
+                  border: Border.all(color: colorScheme.border),
+                ),
+                child: Label(data: data, icon: FAssets.icons.sun, label: 'Afternoon'),
+              );
+            },
+          ),
+          FResizableRegion.raw(
+            initialSize: 200,
+            minSize: 100,
+            builder: (context, data, _) {
+              final colorScheme = context.theme.colorScheme;
+              return Container(
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                  color: data.selected ? colorScheme.foreground : colorScheme.background,
+                  borderRadius: const BorderRadius.vertical(bottom: Radius.circular(8)),
+                  border: Border.all(color: colorScheme.border),
+                ),
+                child: Label(data: data, icon: FAssets.icons.moon, label: 'Night'),
+              );
+            },
+          ),
+        ],
+      );
+    }
+
+    class Label extends StatelessWidget {
+      static final DateFormat format = DateFormat.jm(); // Requires package:intl
+
+      final FResizableRegionData data;
+      final SvgAsset icon;
+      final String label;
+
+      const Label({required this.data, required this.icon, required this.label, super.key});
+
+      @override
+      Widget build(BuildContext context) {
+        final FThemeData(:colorScheme, :typography) = context.theme;
+        final color = data.selected ? colorScheme.background : colorScheme.foreground;
+        final start =
+        DateTime.fromMillisecondsSinceEpoch((data.percentage.min * Duration.millisecondsPerDay).round(), isUtc: true);
+        final end =
+        DateTime.fromMillisecondsSinceEpoch((data.percentage.max * Duration.millisecondsPerDay).round(), isUtc: true);
+
+        return Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Row(
+              mainAxisSize: MainAxisSize.min,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                icon(height: 15, colorFilter: ColorFilter.mode(color, BlendMode.srcIn)),
+                const SizedBox(width: 3),
+                Text(label, style: typography.sm.copyWith(color: color)),
+              ],
+            ),
+            const SizedBox(height: 5),
+            Text('${format.format(start)} - ${format.format(end)}', style: typography.sm.copyWith(color: color)),
+          ],
+        );
+      }
+    }
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+## Usage
+
+### `FResizable(...)`
+
+```dart
+FResizable(
+  axis: Axis.vertical,
+  crossAxisExtent: 400,
+  interaction: const FResizableRegionInteraction.selectAndResize(0),
+  children: [
+    FResizableRegion.raw(
+      initialSize: 200,
+      minSize: 100,
+      onPress: (index) {},
+      onResizeUpdate: (selected, neighbour) {},
+      onResizeEnd: (selected, neighbour) {},
+      builder: (context, data, child) => child!,
+      child: const Placeholder(),
+    ),
+  ],
+);
+```
+
+## Examples
+
+### Resize without selecting
+
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='resizable' variant='horizontal' query={{}} height={400}/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```dart
+    @override
+    Widget build(BuildContext context) => FResizable(
+      axis: Axis.horizontal,
+      crossAxisExtent: 300,
+      children: [
+        FResizableRegion.raw(
+          initialSize: 100,
+          minSize: 100,
+          builder: (context, data, _) {
+            final colorScheme = context.theme.colorScheme;
+            return Container(
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                color: data.selected ? colorScheme.foreground : colorScheme.background,
+                borderRadius: const BorderRadius.vertical(top: Radius.circular(8)),
+                border: Border.all(color: colorScheme.border),
+              ),
+              child: Text('Sidebar', style: context.theme.typography.sm)
+            );
+          },
+        ),
+        FResizableRegion.raw(
+          initialSize: 300,
+          minSize: 100,
+          builder: (context, data, _) {
+            final colorScheme = context.theme.colorScheme;
+            return Container(
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                borderRadius: const BorderRadius.vertical(bottom: Radius.circular(8)),
+                border: Border.all(color: colorScheme.border),
+              ),
+              child: Text('Content', style: context.theme.typography.sm),
+            );
+          },
+        ),
+      ],
+    );
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+

forui/.gitignore

@@ -30,3 +30,4 @@ migrate_working_dir/
 .flutter-plugins-dependencies
 build/
 test/golden/failures/
+test/**/*_test.mocks.dart

forui/CHANGELOG.md

@@ -1,3 +1,9 @@
+## Next
+
+### Additions
+* Add `FResizable`
+
+
 ## 0.3.0
 
 ### Additions

forui/example/lib/example.dart

@@ -1,7 +1,5 @@
 import 'package:flutter/material.dart';
 
-import 'package:forui/forui.dart';
-
 class Example extends StatefulWidget {
   const Example({super.key});
 
@@ -16,18 +14,5 @@ class _ExampleState extends State<Example> {
   }
 
   @override
-  Widget build(BuildContext context) => Column(
-        mainAxisSize: MainAxisSize.min,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          const SizedBox(height: 100),
-          FProgress(value: 0.9),
-          const SizedBox(height: 10),
-           FAvatar(
-            image: const NetworkImage('https://picsum.photos/'),
-            placeholderBuilder: (_) => const Text('DC'),
-          ),
-          const SizedBox(height: 20),
-        ],
-      );
+  Widget build(BuildContext context) => const Placeholder();
 }

forui/example/lib/main.dart

@@ -21,7 +21,7 @@ class _ApplicationState extends State<Application> {
   @override
   Widget build(BuildContext context) => MaterialApp(
         builder: (context, child) => FTheme(
-          data: FThemes.zinc.light,
+          data: FThemes.zinc.dark,
           child: FScaffold(
             header: FHeader(
               title: const Text('Example'),
@@ -32,7 +32,7 @@ class _ApplicationState extends State<Application> {
                 ),
               ],
             ),
-            content: child ?? const SizedBox(),
+            content: const Example(),
             footer: FBottomNavigationBar(
               index: index,
               onChange: (index) => setState(() => this.index = index),

forui/example/pubspec.lock

@@ -274,10 +274,10 @@ packages:
     dependency: transitive
     description:
       name: graphs
-      sha256: aedc5a15e78fc65a6e23bcd927f24c64dd995062bcd1ca6eda65a3cff92a4d19
+      sha256: "741bbf84165310a68ff28fe9e727332eef1407342fca52759cb21ad8177bb8d0"
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.1"
+    version: "2.3.2"
   http:
     dependency: transitive
     description:
@@ -303,7 +303,7 @@ packages:
     source: hosted
     version: "4.0.2"
   intl:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: intl
       sha256: d6f56758b7d3014a48af9701c085700aac781a92a87a62b1333b46d8879661cf

forui/example/pubspec.yaml

@@ -27,6 +27,7 @@ dependencies:
     sdk: flutter
   forui:
     path: ../
+  intl: ^0.19.0
   sugar: ^3.1.0
 
 dev_dependencies:

forui/lib/src/widgets/alert/alert_icon.dart

@@ -35,7 +35,7 @@ final class FAlertIconStyle with Diagnosticable {
 
   /// Creates a [FButtonIconStyle].
   ///
-  /// ## Contract:
+  /// ## Contract
   /// Throws [AssertionError] if:
   /// * `height` <= 0.0
   /// * `height` is Nan

forui/lib/src/widgets/badge/badge.dart

@@ -121,7 +121,7 @@ final class FBadgeCustomStyle with Diagnosticable implements FBadgeStyle {
 
   /// The border width (thickness).
   ///
-  /// ## Contract:
+  /// ## Contract
   /// Throws [AssertionError] if:
   /// * `borderWidth` <= 0.0
   /// * `borderWidth` is Nan

forui/lib/src/widgets/button/button_icon.dart

@@ -38,7 +38,7 @@ final class FButtonIconStyle with Diagnosticable {
 
   /// Creates a [FButtonIconStyle].
   ///
-  /// ## Contract:
+  /// ## Contract
   /// Throws [AssertionError] if:
   /// * `height` <= 0.0
   /// * `height` is Nan