From cb3f530097834edd7180448aef2e611013d367de Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Tue, 11 Jun 2024 18:46:00 +0530 Subject: [PATCH] fix: updated suggested changes --- .../home/More/Releases/index.nw.stories.mdx | 6 +- .../home/More/Roadmap/index.nw.stories.mdx | 4 +- .../Introduction/index.nw.stories.mdx | 22 ++--- .../Upgrade to v2/index.nw.stories.mdx | 88 +------------------ 4 files changed, 14 insertions(+), 106 deletions(-) diff --git a/example/storybook-nativewind/src/home/More/Releases/index.nw.stories.mdx b/example/storybook-nativewind/src/home/More/Releases/index.nw.stories.mdx index 87ee4fdd7..ee71d767f 100644 --- a/example/storybook-nativewind/src/home/More/Releases/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/More/Releases/index.nw.stories.mdx @@ -7,4 +7,8 @@ description: The latest releases of various packages, featuring new updates, bug import { Canvas, Meta, Story } from '@storybook/addon-docs'; - \ No newline at end of file + + +# Releases + +To view releases, please visit [GitHub releases](https://github.com/gluestack/gluestack-ui/releases) \ No newline at end of file diff --git a/example/storybook-nativewind/src/home/More/Roadmap/index.nw.stories.mdx b/example/storybook-nativewind/src/home/More/Roadmap/index.nw.stories.mdx index 41e10a018..8aadd7d3c 100644 --- a/example/storybook-nativewind/src/home/More/Roadmap/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/More/Roadmap/index.nw.stories.mdx @@ -7,4 +7,6 @@ description: To stay updated on upcoming features, improvements, and innovations import { Canvas, Meta, Story } from '@storybook/addon-docs'; - \ No newline at end of file + + +Coming Soon! \ No newline at end of file diff --git a/example/storybook-nativewind/src/home/overview/Introduction/index.nw.stories.mdx b/example/storybook-nativewind/src/home/overview/Introduction/index.nw.stories.mdx index 6ffb44f53..0f0072789 100644 --- a/example/storybook-nativewind/src/home/overview/Introduction/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/overview/Introduction/index.nw.stories.mdx @@ -38,17 +38,13 @@ Customizable components and patterns for React, Next.js & React Native. - **Predefined Patterns**: Benefit from a variety of predefined patterns that ensure design consistency and streamline development. - **Theming Tokens**: gluestack-ui takes a config file in the GluestackUIProvider, which contains theme tokens, aliases, component themes, etc., to help with the project requirements. You can install and import the config as a module. See more about theming. -# But aren't React Native and React Native Web sufficient? - -gluestack-ui and React Native Web aren't directly comparable as they are different. While React Native and React Native Web can be used to create cross-platform applications, they require developers to write platform-specific code and customize their components for accessibility and performance. gluestack-ui provides a different approach by offering a set of universal, themed as well as unstyled components that work seamlessly on both web and mobile platforms.By using gluestack-ui, developers can create accessible and user-friendly interfaces with a consistent design language without worrying about the underlying platform. The focus on accessibility and performance means that developers can achieve a high level of usability with minimal effort.React Native Web is great! gluestack-ui needs React Native Web's "components" to build universal components. gluestack-ui builds upon the React Native Web components by adding accessibility props, focus management, and other functionality to ensure that the components are accessible and performant. But, gluestack-style doesn't use React Native Web's styling engine (which is highly performant)! gluestack-ui's babel-plugin (compiler) precompiles the declarative styling object into CSS classes and declarations and injects them directly during compile-time leading to zero style calculation during the runtime. - -# Why use gluestack-ui v2, when we already have NativeBase? +## Why use gluestack-ui v2, when we already have NativeBase? gluestack-ui was originally part of NativeBase, but it has since evolved into a standalone library with significantly improved performance. It prioritizes performance and is optimized for even complex applications with many elements. We have also shifted from prop-based APIs in NativeBase to compound APIs because that provides a more cohesive, robust and consistent interface for developers. -# Why Use Gluestack UI v2 When We Already Have Gluestack UI v1? +## Why Use Gluestack UI v2 When We Already Have Gluestack UI v1? gluestack-ui v2 is a major upgrade from v1, designed to address the evolving needs of modern developers. With enhanced performance, improved developer experience, and greater flexibility, gluestack-ui v2 offers several advantages over its predecessor: @@ -58,7 +54,7 @@ gluestack-ui v2 is a major upgrade from v1, designed to address the evolving nee - **RSC compatible components**: Optimize your applications with components that enhance performance by leveraging React Server Components. - **Full Customization**: Tailor components to fit your project's needs by adjusting styles and behaviors. -# What will happen to existing gluestack-ui v1 users? +## What will happen to existing gluestack-ui v1 users? Existing gluestack-ui v1 users will continue to have access to their current version, but we highly encourage upgrading to gluestack-ui v2 to take advantage of the new features and improvements. Here’s what you can expect: @@ -70,11 +66,11 @@ Existing gluestack-ui v1 users will continue to have access to their current ver We are committed to making the transition to gluestack-ui v2 as smooth and beneficial as possible for all our users. -# Future Considerations +## Future Considerations gluestack-ui is committed to continuously expanding its library of components to meet the needs of developers. We plan to add more components to the library, such as navigation, combo box, and grid. Apart from that, we are actively working on improving the performance of the styling library using techniques such as bundler-plugins, tree flattening, and more. -# Community +## Community ### Discord @@ -108,14 +104,6 @@ Stay updated about our company and collaborate on enterprise-level projects. # FAQs -### What is gluestack-ui, and how does it differ from other UI frameworks? - -gluestack-ui is a universal UI library that provides optionally styled and accessible components. These components are designed for easy integration into applications developed with React and React Native.gluestack-ui offers seamless accessibility features and uniform styling across both mobile and web platforms, making it a versatile component library. With gluestack-ui, you can write code once and deploy it anywhere. - -### What is the difference between gluestack-ui and gluestack-style? - -gluestack-style is a high-performing and universal CSS-in-JS library, whereas gluestack-ui provides a set of themed ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired. - ### What are the new components in the pipeline? We're currently working on adding new components which include Table, Tabs and many more. We've already prepared API drafts for some of these components, which you can find in our documentation. You can check out our new component development roadmap [here](https://www.notion.so/c7ab20877a8a4d6690e31faa51f52fe2?pvs=21) \ No newline at end of file diff --git a/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx b/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx index ce534265d..b05a7404c 100644 --- a/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx @@ -9,90 +9,4 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; -# Upgrade to v2 - -Upgrading to **gluestack-ui v2** offers enhanced performance, improved features, and better support. This guide will help you navigate the upgrade process smoothly and ensure a successful transition to the latest version. - -## Prerequisites - -Before upgrading to **gluestack-ui v2**, make sure you have the following: - -- A project using **gluestack-ui v1**. - -## Migration Guide - -Start by reading our comprehensive [migration guide](https://www.notion.so/48bd859c6198400d98afa1a375196bee?pvs=21). This guide provides detailed instructions, code examples, and best practices to help you seamlessly transition from v1 to v2. Understanding the changes and considerations outlined in the migration guide will prepare you for the upgrade process. - -## Backup Your Project - -Before making any changes, it's essential to backup your project to ensure you can revert to a previous state if needed. This includes backing up your codebase, configuration files, and any other relevant assets. - -## Optional: Install and Run Codemod Tool - -We've developed a codemod tool to assist with the transition. While optional, installing and running the codemod tool in your project directory can automatically upgrade your codebase. If you choose not to use the codemod tool, you can manually update your codebase following the migration guide. - -### Installation - -To install the codemod tool, follow these steps: - -1. Open your terminal or command prompt. -2. Navigate to your project directory. -3. Run the following command to install the codemod tool: - -```bash -npm install -g gluestack-ui-codemod -``` - -### Running the Codemod Tool - -Once installed, you can run the codemod tool in your project directory to automatically upgrade your codebase. Follow these steps to run the codemod tool: - -1. Open your terminal or command prompt. -2. Navigate to your project directory. -3. Run the following command to start the codemod tool: - -```bash -gluestack-ui-codemod v1-to-v2 -``` - -Replace `` with the path to your Gluestack UI v1 project directory. - -### Using the Codemod Tool - -The codemod tool will analyze your project's codebase and apply the necessary transformations to upgrade your code from v1 to v2. It will prompt you for confirmation before making any changes to ensure that you're comfortable with the modifications. - -### Benefits of Using the Codemod Tool - -- Automates many of the tedious code changes required for the upgrade. -- Saves time and effort, especially for larger codebases. -- Provides a consistent and reliable upgrade process. - -### Note - -While the codemod tool can automate many aspects of the upgrade process, it may not catch every possible code change or scenario. It's essential to review the changes made by the tool and manually verify that your codebase functions correctly after the upgrade. - -## Update Dependencies - -Next, update any dependencies that rely on gluestack-ui v1 to use the latest version, v2. This may include updating package.json, import statements, and any other references to gluestack-ui components or utilities. - -## Test Your Application - -After updating dependencies, thoroughly test your application to ensure that everything is working as expected with gluestack-ui v2. Check for any errors, warnings, or unexpected behavior and address them accordingly. - -## Refactor Code as Needed - -Depending on the changes introduced in Gluestack UI v2, you may need to refactor your code to align with the new API or features. Refer to the migration guide for specific instructions on refactoring code and updating components. - -## Deploy Your Application - -Once you're confident that your application is functioning correctly with Gluestack UI v2, deploy your changes to your production environment. Monitor your application for any issues after deployment and address them promptly. - -## Finalize the Upgrade - -After the upgrade process, review your codebase to ensure that everything is in order. Manually check for any remaining issues or inconsistencies that may have been missed. Make any necessary adjustments to finalize the upgrade process. - -## Need Help? - -If you encounter any issues or have questions during the upgrade process, don't hesitate to reach out to our support team or community for assistance. We're here to help ensure a smooth transition to **gluestack-ui v2**. - -Happy coding! \ No newline at end of file +You can check out our new component development roadmap [here](/ui/docs/home/more/roadmap). \ No newline at end of file