Merge branch 'main' into pooja/style-guide

Author: PoojaB26

docs/ff-concepts/design-system/design-system.md

@@ -196,6 +196,47 @@ If you prefer watching a video tutorial, here is the guide for you:
 </div>
 <p></p>
 
+## Use Library as Design System
+
+You can also import a design system from the [Library](../../resources/projects/libraries.md) added to your project. A library can serve as a central repository for your design assets, components, and styles—effectively becoming a Design Library for your application(s).
+
+:::tip[possible use cases]
+
+- **Enterprise Applications:** Large organizations can develop a centralized design system as a library to ensure all internal applications maintain a cohesive look and feel, enhancing brand identity and user experience.
+- **Startup MVPs:** Startups can expedite the development of Minimum Viable Products (MVPs) by leveraging a pre-built design library like [**shadcn**](https://marketplace.flutterflow.io/item/cNlm0zWW1Nfq11cFXBmp), allowing them to focus on functionality and user validation.
+- **Cross-Platform Consistency:** Teams aiming to deploy apps across multiple platforms (iOS, Android, Web) can use a popular design system library to ensure uniformity in design, reducing the effort required for platform-specific adjustments.
+
+:::
+
+To add a design system from a library, first, ensure that you [add a library dependency to your project](../../resources/projects/libraries.md#importing-a-library). Then, navigate to **Theme Settings > Design System** and click on **No Design System Selected**. From the dropdown menu, **Select a library** you want to use.
+
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/G3PekDcZNsWYrKoz3xnE?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
 ---
 
 ## Loading Indicators

docs/resources/projects/libraries.md

@@ -85,7 +85,6 @@ To publish a FlutterFlow project as a library, start by creating a FlutterFlow p
 When a project is converted into a library, the following features are disabled to ensure compatibility and functionality limitations:
 
 - App settings 
-  - Firebase
   - Supabase
   - Development environments
   - Authentication
@@ -98,8 +97,6 @@ When a project is converted into a library, the following features are disabled
   - Google Analytics 
   - OneSignal 
   - Mux 
-- Cloud functions
-- Firestore Collections
 
 ## Importing a Library
 
@@ -318,6 +315,24 @@ To set library values, navigate to **Settings and Integrations > Project Setup >
 For different [**development environments**](../../testing-deployment-publishing/development-environments/development-environments.md) (e.g., development vs. production), you can bind Library Values to [**environment values**](../../testing-deployment-publishing/development-environments/development-environments.md#use-environment-values). For instance, you could have two different Library Values for an API key, such as `DEV_OPENAI_API_KEY` and `PROD_OPENAI_API_KEY`, and bind them to the development and production environments to track API usage separately.
 :::
 
+## Libraries with Firebase
+You can create collections and enable various Firebase features in library projects without connecting a separate Firebase project.
+
+In library projects, you won’t see an option to link to a Firebase project. Instead, the project that imports the library handles the actual Firebase connection.
+
+Any indexes or security rules defined in the library are recognized by the importing project and deployed accordingly.
+
+:::warning[Limitations]
+Libraries work with Firebase but have **some limitations**. The **Firebase Auth** and **Firebase Storage** are not directly supported in library projects at this time. If you need these features in your library’s functionality, you can include an action that accomplishes this task as a [**callback**](../../resources/ui/components/callbacks.md). 
+:::
+
+If your team has multiple projects that share a common Firebase feature, turning it into a library is a great idea. This ensures the same logic is used and connects to the same Firestore project across all apps.
+
+Here are some examples of library projects you can build with Firebase:
+
+- **Basic Analytics or Tracking**: A library that logs events to Firestore; useful for aggregating usage data at an application level.
+- **Configuration or Settings**: A library that serves app-wide configurations (like feature flags, UI themes, or layout choices) is handled in Firebase Remote Config.
+
 ## FAQs
 
 <details>
@@ -328,16 +343,16 @@ Team code and API libraries will be migrated to library Projects. These projects
 </details>
 
 <details>
-<summary>Will libraries work with Marketplace?</summary>
+<summary>Do libraries work with Marketplace?</summary>
 <p>
-We plan to allow users to import a marketplace project as a library, making it easier to integrate marketplace resources into your projects.
+Yes, you can add and import a Marketplace project as a library.
 </p>
 </details>
 
 <details>
-<summary>How do libraries work with themes?</summary>
+<summary>How do libraries work with themes (design systems)?</summary>
 <p>
-The parent project's design system takes precedence over the imported library's design system. For example, if a library uses the standard FlutterFlow color scheme, the values defined in the parent project will override those in the library. However, if the library project has a custom color that the parent project does not have, it will be used as-is in the parent project.
+By default, the design system of the parent project takes precedence over the imported library's design system. If you want to use a library's design system, you must [**select or set the library in the Design System**](../../ff-concepts/design-system/design-system.md#use-library-as-design-system) page.
 </p>
 </details>
 

docs/resources/ui/widgets/composing-widgets/list-grid.md

@@ -51,7 +51,7 @@ Prefer “Items Spacing” set on the parent row or column instead of padding on
 
 ![listview-reverse.png](../built-in-widgets/imgs/listview-reverse.png)
 
-#### Make List Reorderable
+### Reorderable List
 Whether to allow reordering of items in the list. On Web or Desktop this will 
 add drag handles, but on mobile
   the reorder is triggerred by long pressing an item.
@@ -68,7 +68,7 @@ action trigger to make any necessary changes yourself.
 
 Here's a quick tutorial to set up your Reorderable ListView:
 
-##### Using App State variable
+#### Using App State variable
 
 1. First, create an app state variable with a few items of type String and display them on the 
 ListView widget.
@@ -120,7 +120,7 @@ return list;
 com/embed/bb961c71d11a4e7d8869170727d1423d?sid=a356162d-76df-45bb-930c-bebf8358ce6c" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
 
 
-##### Reordering Items in a Firebase Query
+#### Reordering Items in a Firebase Query
 
 If you want to reorder the list items retrieved via Firebase query collection, the steps are almost similar except for the following changes.
 
@@ -544,4 +544,4 @@ Follow the steps below to add this action to any widget.
         allow="clipboard-write">
     </iframe>
 </div>
-<p></p>
+<p></p>