Skip to content

Commit

Permalink
fix: updated suggested changes
Browse files Browse the repository at this point in the history
  • Loading branch information
Rajat Chaudhary authored and Rajat Chaudhary committed Jun 11, 2024
1 parent 5ce74ae commit cb3f530
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 106 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,8 @@ description: The latest releases of various packages, featuring new updates, bug

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="with-nativewind/Home/More/Releases" />
<Meta title="with-nativewind/Home/More/Releases" />

# Releases

To view releases, please visit [GitHub releases](https://github.com/gluestack/gluestack-ui/releases)
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,6 @@ description: To stay updated on upcoming features, improvements, and innovations

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="with-nativewind/Home/More/Roadmap" />
<Meta title="with-nativewind/Home/More/Roadmap" />

Coming Soon!
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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:

Expand All @@ -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

Expand Down Expand Up @@ -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)
Original file line number Diff line number Diff line change
Expand Up @@ -9,90 +9,4 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="with-nativewind/Home/Overview/Upgrade to v2" />

# 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 <path/to/your/project>
```

Replace `<path/to/your/project>` 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!
You can check out our new component development roadmap [here](/ui/docs/home/more/roadmap).

0 comments on commit cb3f530

Please sign in to comment.