Merge pull request #132 from gluestack/development

Development

Author: manuindersekhon

.pubignore

@@ -0,0 +1,2 @@
+example/lib/kitchensink_gluestack_example
+example/lib/example/storybook

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.0.1-alpha.5
+
+- Added GS Stack
+- Added GS Scroll
+- Widget specific enums for better developer experience
+- Added more examples
+
 ## 0.0.1-alpha.4
 
 - Add support to get custom JSON config for Gluestack Widgets.

README.md

@@ -6,11 +6,19 @@ _Package is in development. APIs may change in the future._
 
 ## Documentation
 
-You can try out the gluestack flutter widgets on this storybook link: https://gluestack-ui-example.web.app/#/storybook
+![Gluestack Flutter Banner](assets/gs_docs_flutter_cover.png)
 
-Web app build with gluestack:https://kitchensink-23184.web.app/
+The gluestack-ui-flutter library is designed to enhance web and mobile app development. It features platform-agnostic components for consistent UI across platforms, offers styling flexibility with pre-built themes and custom options, and emphasizes accessibility. Tailored for web development, it includes web-friendly widgets, native web styling, responsive design, and smooth animations. Key considerations are Flutter web specificity, performance optimization, and community engagement. The library also enables centralized styling, consistency, reusability, scalability, efficient development, and rapid prototyping, aiming to foster collaboration and ensure a unique, high-performance UI experience.
 
-We are referring gluestack-ui to create gluestack-ui-flutter. Flutter documentation is in progress. You can find the detailed documentation for each component, including a list of props and examples, in https://gluestack.io/ui/docs website.
+Here are few helpful links to give you an idea of what gluestack-ui-flutter is capable of:
+
+- Widget Examples (Storybook): https://gluestack-ui-example.web.app/#/storybook
+- Getting Started Example: https://github.com/gluestack/flutter-examples
+- KitchenSink (An example layout made with Gluestack): https://kitchensink-23184.web.app/
+
+To keep track of latest developments in gluestack-ui-flutter you can refer to this link: https://github.com/gluestack/gluestack-ui-flutter/tree/feature/core-widgets.
+
+Documentation: https://flutter.gluestack.io/
 
 ## Features
 
@@ -36,7 +44,7 @@ Add the package to your dependencies:
 
 ```yaml
 dependencies:
-  gluestack_ui: 0.0.1-alpha.4
+  gluestack_ui: 0.0.1-alpha.5
 ```
 
 OR
@@ -64,9 +72,9 @@ Here's an example of how to use `GSButton` widget into your flutter app:
 import 'package:gluestack_ui/gluestack_ui.dart';
 
 GSButton(
-  action: GSActions.negative,
-  variant: GSVariants.solid,
-  size: GSSizes.$lg,
+  action: GSButtonActions.negative,
+  variant: GSButtonVariants.solid,
+  size: GSButtonSizes.$lg,
   onPressed: () {},
   style: GSStyle(
     web: GSStyle(

assets/gs_docs_flutter_cover.png

@@ -1,30 +1,29 @@
-flutter_service_worker.js,1704962362449,4d9b34fbb385414e71bc1bbbf2ba76cbba288e271d870b828d74777b726ec71b
-404.html,1704962428696,05cbc6f94d7a69ce2e29646eab13be2c884e61ba93e3094df5028866876d18b3
-favicon.png,1704949439191,fcc7c4545d5b62ad01682589e6fdc7ea03d0a3b42069963c815c344b632eb5cf
-index.html,1704962361856,8e7d53f14394dd1d93179ff2cb6efadc1bb92595448fbbb3fd209c92be927fa6
-manifest.json,1704949439197,f81e4554dc7f05633a2c5597416813859de5ace688342db41b201d42790fb8a7
-version.json,1704962359564,5bb140941d838dc5fb6e3c70ce026cc5bcfc0b3ef65c057bc0251982e5951bae
-assets/AssetManifest.bin.json,1704962359826,eb6fa32d28b0a3cd253fcc35110e0aac1fe7a94f71d3b6221f8e42d62fa085a0
-flutter.js,1704962382904,4ce6015fec2b419cefbf1222b977f169be64e9036f722f1405e0f178e6025fe0
-assets/AssetManifest.bin,1704962359826,34ca72820736a4fd2f53350ce82082f9663c05f12e016aa6a784dcda3d7bc633
-assets/FontManifest.json,1704962359826,9ea504185602e57d97b7c3517d382b8627a13c0181c490c96a9b55a5d5c8810c
-assets/AssetManifest.json,1704962359826,da1c19fcb57b37bdfc1ffc3e25fb8079d39a8881da0c8b8f35d8d76bf641c1db
-assets/packages/cupertino_icons/assets/CupertinoIcons.ttf,1704962361843,53ea433b22c061859c03c35b908eef1e49786ab0ec09bf1e01df03a5df5397ea
 assets/packages/fluttertoast/assets/toastify.css,1700575544226,e47b28badc6ccfc424aa2525fbfed8f4fc6476a0f4145488c07c9d51ec6b9408
 assets/packages/fluttertoast/assets/toastify.js,1700575544221,f75f8bed11d1d89cd09f480882907363946f39e887bf6f7168a92e07dc2fe314
 assets/packages/storybook_flutter/assets/README.md,1702283093376,99c34916089fabfa9698edff60886be0dad94c496e85d713d886fd053185c537
-assets/shaders/ink_sparkle.frag,1704962360158,62c36b32f67b76a3eb26439167a58be81631592706c55fde8956e32661d1b9f1
-assets/fonts/MaterialIcons-Regular.otf,1704962361843,dbf5e70050c904ed84439f8c4d2c4073578c90d0197e3929f905a3e45a1dde2b
-canvaskit/skwasm.worker.js,1700636264000,d480228d9a755f2a0b3c3ff0c171ade188993bfc427eb3489790ee4db93ecb60
-icons/Icon-192.png,1704949439192,d2e0131bb7851eb9d98f7885edb5ae4b4d6b7a6c7addf8a25b9b712b39274c0f
-icons/Icon-512.png,1704949439193,7a31ce91e554f1941158ca46f31c7f3f2b7c8c129229ea74a8fae1affe335033
-icons/Icon-maskable-192.png,1704949439194,dd96c123fdf6817cdf7e63d9693bcc246bac2e3782a41a6952fa41c0617c5573
-icons/Icon-maskable-512.png,1704949439195,e7983524dc70254adc61764657d7e03d19284de8da586b5818d737bc08c6d14e
 canvaskit/canvaskit.js,1700636118000,385293d6197873e296c6b4ce320bb5dd301f07d2f77b93bbf0aff5b2a5efcdbf
-canvaskit/chromium/canvaskit.js,1700636178000,dd8792ae84119f9ec24a401f5d67dc84980ea8e316d997568658c3d0e3f15427
+canvaskit/canvaskit.wasm,1700636108000,0ca123d6147e392bcb1fbda49fe5b94318de5a5a4ebc12b2ab3dad388cb85abc
 canvaskit/skwasm.js,1700636264000,3e9442f556491c85546f535c104c7e529b9636e3c68719f27b1712129a0c2302
-assets/NOTICES,1704962359828,b57fd33dfb1b0b00593c0cb5b83eb8cc4f1498f02f3922d2f7c995cdc08baa11
-main.dart.js,1704962358889,7521dda579b221992dfdd1a4702e432bc6128423f4da9800b58524ef78f01bfb
 canvaskit/skwasm.wasm,1700636258000,884ed3a9aff46dc41c970f99a6d97591704a1190c7a41878a5cb862624e87fe4
+canvaskit/skwasm.worker.js,1700636264000,d480228d9a755f2a0b3c3ff0c171ade188993bfc427eb3489790ee4db93ecb60
+canvaskit/chromium/canvaskit.js,1700636178000,dd8792ae84119f9ec24a401f5d67dc84980ea8e316d997568658c3d0e3f15427
 canvaskit/chromium/canvaskit.wasm,1700636170000,d156345b85fef78ed05a47745ed9f33d8edc3f19d699807f6d11b8b73c11faaf
-canvaskit/canvaskit.wasm,1700636108000,0ca123d6147e392bcb1fbda49fe5b94318de5a5a4ebc12b2ab3dad388cb85abc
+favicon.png,1705560615383,c023e85c356b33452a71456926b38343b06e82352785091f9bc4debc68956529
+index.html,1705560783774,15cd3a5f8bf629aa8705409e373b04d397f1a6dde641cfd0c24237449ccc0acf
+flutter_service_worker.js,1705560784636,7c664a6d719d766beaca2ff0664fa2e0a3b138f54fb2c736db2725c82840eff6
+manifest.json,1705560615385,7c827f5719aaf3bc3cadfc33494d1a5d9cfb55cc7ad3bc8777aa15d0b58a078a
+flutter.js,1705560734144,49a4ad487943285f50500865a9b83ced5d46e375df2c0b04b4928d8a9b593295
+version.json,1705560781236,3e63769199600f43ea2a8a3610bc2e13b726ca38ecd88a5f421969106cdbc79e
+assets/AssetManifest.json,1705560781513,78824689f229719e8e68623312230ea5b8d119489ff2f68d9e245267122d823d
+assets/FontManifest.json,1705560781515,4eebc51684a189590cf731751ceeca7cad975e484c3b88d90f3a8d204c9108c9
+assets/AssetManifest.bin.json,1705560781513,68d4f2f06b872aaf05d7b04ef29a9b2696c1fa24df8de0ce3e35a6153cdbbbe6
+assets/AssetManifest.bin,1705560781513,2a3ecf94e17c5528912c704f53d555243c2cec133f71ad861bbd105c5bc33bd9
+assets/packages/cupertino_icons/assets/CupertinoIcons.ttf,1705560783758,5278e713f3e1f15c42d2f3d464e4a7b14cd8d808efa514dc1c8d2f224790ffc8
+assets/fonts/MaterialIcons-Regular.otf,1705560783760,7e951a3d68394e9e6abbfad88f69655456fe37b7589c61cd625eb2df2f55d53d
+assets/shaders/ink_sparkle.frag,1705560782010,6e2530c69d325aaa39ca78f320704b3eced1fb1f363d41bc632d204ab0236887
+icons/Icon-192.png,1705560615383,84c73fff6a50c2573b3a7d2e09b2d55c628db625c8ca61c632a0add7028d2926
+icons/Icon-maskable-192.png,1705560615384,1c3ba0c948915ce01efa0bcb9c9b22dffc63f30df9ff6c3288531c5209a86908
+icons/Icon-512.png,1705560615384,db4e589fa57af5d94440c1679ae7b9248d82ddd3002614cf473439d0728d868f
+icons/Icon-maskable-512.png,1705560615384,acb883dcd1c47b0c08d93b9f838459a0a14957b1f044f759310893e89557a5e1
+assets/NOTICES,1705560781516,43a4594f10416b1a93ae4b79661d579c50d9f32bc32c249c0953d80bc8bc451f
+main.dart.js,1705560780263,14e094ec1b5ac99a46b8c8fe1b93bb4ce1968928734c35e4a9078b05c13c6e40

example/.firebase/hosting.YnVpbGQvd2Vi.cache

@@ -6,7 +6,6 @@
 // // For more information about Flutter integration tests, please see
 // // https://docs.flutter.dev/cookbook/testing/integration/introduction
 
-
 // import 'package:flutter_test/flutter_test.dart';
 // import 'package:integration_test/integration_test.dart';
 

example/integration_test/plugin_integration_test.dart

@@ -30,7 +30,6 @@ Map<String, dynamic> customButton2 = {
             'bg': '\$primary600',
             'borderColor': '\$primary300',
           },
-          
         },
       },
       ':disabled': {

example/lib/custom_config.dart

@@ -9,12 +9,12 @@ class AlertExample extends StatelessWidget {
   Widget build(BuildContext context) {
     var code = '''
           GSButton(
-            size: GSSizes.\$lg,
+            size: GSButtonSizes.\$lg,
             child: const GSButtonText(text: "Click Me"),
             onPressed: () {
               GSAlertDialog.show(
                 context,
-                size: GSSizes.\$full,
+                size: GSAlertDialogSizes.\$full,
                 content: GSAlertDialogContent(
                   header: GSAlertDialogHeader(
                     style: GSStyle(
@@ -30,13 +30,13 @@ class AlertExample extends StatelessWidget {
                     child: GSButtonGroup(
                       buttons: [
                         GSButton(
-                            action: GSActions.positive,
-                            variant: GSVariants.outline,
+                            action: GSButtonActions.positive,
+                            variant: GSButtonVariants.outline,
                             child: const Text("Yes"),
                             onPressed: () {}),
                         GSButton(
-                            action: GSActions.negative,
-                            variant: GSVariants.outline,
+                            action: GSButtonActions.negative,
+                            variant: GSButtonVariants.outline,
                             child: const Text("No"),
                             onPressed: () {}),
                       ],
@@ -55,12 +55,12 @@ class AlertExample extends StatelessWidget {
         code: code,
         component: Center(
           child: GSButton(
-            size: GSSizes.$lg,
+            size: GSButtonSizes.$lg,
             child: const GSButtonText(text: "Click Me"),
             onPressed: () {
               GSAlertDialog.show(
                 context,
-                size: GSSizes.$full,
+                size: GSAlertDialogSizes.$full,
                 content: GSAlertDialogContent(
                   header: GSAlertDialogHeader(
                     style: GSStyle(
@@ -76,13 +76,13 @@ class AlertExample extends StatelessWidget {
                     child: GSButtonGroup(
                       buttons: [
                         GSButton(
-                            action: GSActions.positive,
-                            variant: GSVariants.outline,
+                            action: GSButtonActions.positive,
+                            variant: GSButtonVariants.outline,
                             child: const Text("Yes"),
                             onPressed: () {}),
                         GSButton(
-                            action: GSActions.negative,
-                            variant: GSVariants.outline,
+                            action: GSButtonActions.negative,
+                            variant: GSButtonVariants.outline,
                             child: const Text("No"),
                             onPressed: () {}),
                       ],

example/lib/example/alert_example.dart

@@ -12,32 +12,32 @@ class AvatarExample extends StatefulWidget {
 
 class _AvatarExampleState extends State<AvatarExample> {
   final List dropdownSizeOptions = [
-    GSSizes.$xs,
-    GSSizes.$sm,
-    GSSizes.$md,
-    GSSizes.$lg,
-    GSSizes.$xl,
-    GSSizes.$2xl,
+    GSAvatarSizes.$xs,
+    GSAvatarSizes.$sm,
+    GSAvatarSizes.$md,
+    GSAvatarSizes.$lg,
+    GSAvatarSizes.$xl,
+    GSAvatarSizes.$2xl,
   ];
-  GSSizes selectedSizeOption = GSSizes.$md;
+  GSAvatarSizes selectedSizeOption = GSAvatarSizes.$md;
   void updateSizeSelectedOption(dynamic newOption) {
     setState(() {
       selectedSizeOption = newOption;
     });
   }
 
   final List dropdownRadiusOptions = [
-    GSBorderRadius.$none,
-    GSBorderRadius.$xs,
-    GSBorderRadius.$sm,
-    GSBorderRadius.$md,
-    GSBorderRadius.$lg,
-    GSBorderRadius.$xl,
-    GSBorderRadius.$2xl,
-    GSBorderRadius.$3xl,
-    GSBorderRadius.$full,
+    GSAvatarRadius.$none,
+    GSAvatarRadius.$xs,
+    GSAvatarRadius.$sm,
+    GSAvatarRadius.$md,
+    GSAvatarRadius.$lg,
+    GSAvatarRadius.$xl,
+    GSAvatarRadius.$2xl,
+    GSAvatarRadius.$3xl,
+    GSAvatarRadius.$full,
   ];
-  GSBorderRadius selectedRadiusOption = GSBorderRadius.$full;
+  GSAvatarRadius selectedRadiusOption = GSAvatarRadius.$full;
   void updateRadiusSelectedOption(dynamic newOption) {
     setState(() {
       selectedRadiusOption = newOption;
@@ -48,8 +48,8 @@ class _AvatarExampleState extends State<AvatarExample> {
   Widget build(BuildContext context) {
     var code = '''
         GSAvatar(
-            radius: selectedRadiusOption,
-            size: selectedSizeOption,
+            radius: GSAvatarRadius.\$full,
+            size: GSAvatarSizes.\$md,
             style: GSStyle(
               bg: Colors.orange,
               textStyle: const TextStyle(color: Colors.white),

example/lib/example/avatar_example.dart

@@ -12,36 +12,40 @@ class BadgeExample extends StatefulWidget {
 }
 
 class _BadgeExampleState extends State<BadgeExample> {
-  final List dropdownSizeOptions = [GSSizes.$sm, GSSizes.$md, GSSizes.$lg];
-  GSSizes selectedSizeOption = GSSizes.$md;
+  final List dropdownSizeOptions = [
+    GSBadgeSizes.$sm,
+    GSBadgeSizes.$md,
+    GSBadgeSizes.$lg
+  ];
+  GSBadgeSizes selectedSizeOption = GSBadgeSizes.$md;
 
   final List dropdownVariantOptions = [
-    GSVariants.solid,
-    GSVariants.outline,
+    GSBadgeVariants.solid,
+    GSBadgeVariants.outline,
   ];
-  GSVariants selectedVariantOption = GSVariants.solid;
+  GSBadgeVariants selectedVariantOption = GSBadgeVariants.solid;
 
   final List dropdownRadiusOptions = [
-    GSBorderRadius.$none,
-    GSBorderRadius.$xs,
-    GSBorderRadius.$sm,
-    GSBorderRadius.$md,
-    GSBorderRadius.$lg,
-    GSBorderRadius.$xl,
-    GSBorderRadius.$2xl,
-    GSBorderRadius.$3xl,
-    GSBorderRadius.$full,
+    GSBadgeRadius.$none,
+    GSBadgeRadius.$xs,
+    GSBadgeRadius.$sm,
+    GSBadgeRadius.$md,
+    GSBadgeRadius.$lg,
+    GSBadgeRadius.$xl,
+    GSBadgeRadius.$2xl,
+    GSBadgeRadius.$3xl,
+    GSBadgeRadius.$full,
   ];
-  GSBorderRadius selectedRadiusOption = GSBorderRadius.$full;
+  GSBadgeRadius selectedRadiusOption = GSBadgeRadius.$full;
 
   final List dropdownActionOptions = [
-    GSActions.error,
-    GSActions.warning,
-    GSActions.success,
-    GSActions.info,
-    GSActions.muted,
+    GSBadgeActions.error,
+    GSBadgeActions.warning,
+    GSBadgeActions.success,
+    GSBadgeActions.info,
+    GSBadgeActions.muted,
   ];
-  GSActions selectedActionOption = GSActions.success;
+  GSBadgeActions selectedActionOption = GSBadgeActions.success;
 
   void updateSizeSelectedOption(dynamic newOption) {
     setState(() {