From 850caa5f633d64065ccb781777664bfe476a36df Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Tue, 11 Jun 2024 17:07:51 +0530 Subject: [PATCH 1/5] fix: updated docs with home changes --- .../.storybook/preview.js | 5 +- .../docs-components/DefaultComponent.tsx | 47 +++++++- .../home/More/Releases/index.nw.stories.mdx | 10 ++ .../home/More/Roadmap/index.nw.stories.mdx | 10 ++ .../getting-started/cli/index.nw.stories.mdx | 10 ++ .../Introduction/index.nw.stories.mdx | 83 +++++++++++++-- .../Upgrade to v2/index.nw.stories.mdx | 100 ++++++++++++++++++ .../default-tokens/index.nw.stories.mdx | 43 +++++++- 8 files changed, 294 insertions(+), 14 deletions(-) create mode 100644 example/storybook-nativewind/src/home/More/Releases/index.nw.stories.mdx create mode 100644 example/storybook-nativewind/src/home/More/Roadmap/index.nw.stories.mdx create mode 100644 example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx create mode 100644 example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js index 21694db708..2c74ae907c 100644 --- a/example/storybook-nativewind/.storybook/preview.js +++ b/example/storybook-nativewind/.storybook/preview.js @@ -33,18 +33,21 @@ export const parameters = { 'Home', [ 'Overview', - ['Introduction', 'All Components'], + ['Introduction', 'All Components', 'Upgrade to v2'], 'Getting Started', [ 'Installation', 'Tooling Setup', 'VS Code Extensions', 'Figma UI Kit', + 'CLI', ], 'Core Concepts', ['Accessibility', 'Universal'], 'Theme Configuration', ['Default Tokens', 'Customizing Theme', 'Dark Mode'], + 'More', + ['Releases', 'Roadmap'], ], 'Components', [ diff --git a/example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx b/example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx index d454f21c3a..aa656a9c8e 100644 --- a/example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx +++ b/example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx @@ -111,4 +111,49 @@ const ColorPaletteComponent = () => { ); }; -export { ColorPaletteComponent }; +const ShadowComponent = () => { + const { colorMode } = useContext(LayoutContext); + return ( + + + Hard Shadows + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + + Soft Shadows + + + 1 + + + 2 + + + 3 + + + 4 + + + + {/* */} + + ); +}; + +export { ColorPaletteComponent, ShadowComponent }; 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 new file mode 100644 index 0000000000..87ee4fdd7f --- /dev/null +++ b/example/storybook-nativewind/src/home/More/Releases/index.nw.stories.mdx @@ -0,0 +1,10 @@ +--- +title: Releases | gluestack-ui + +description: The latest releases of various packages, featuring new updates, bug fixes, and enhancements to improve functionality and performance. + +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + \ 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 new file mode 100644 index 0000000000..41e10a0181 --- /dev/null +++ b/example/storybook-nativewind/src/home/More/Roadmap/index.nw.stories.mdx @@ -0,0 +1,10 @@ +--- +title: Roadmap | gluestack-ui + +description: To stay updated on upcoming features, improvements, and innovations. + +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + \ No newline at end of file diff --git a/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx b/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx new file mode 100644 index 0000000000..39c8f43eb8 --- /dev/null +++ b/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx @@ -0,0 +1,10 @@ +--- +title: CLI | gluestack-ui + +description: A CLI tool for seamlessly adding components from Gluestack UI to your projects. + +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + \ 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 dd1b77b960..e9d7a9b56e 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 @@ -1,6 +1,8 @@ --- title: Introduction | gluestack-ui + description: gluestack-ui is a React Native and React library that provides universal, styled, and accessible components. + --- import { Canvas, Meta, Story } from '@storybook/addon-docs'; @@ -9,19 +11,70 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; # Introduction -**gluestack-ui** with [NativeWind](https://www.nativewind.dev/) offers customizable, styled components for your projects. Unlike traditional libraries, it's not a pre-packaged dependency. Choose the components you need and copy-paste them directly into your React, Next.js & React Native projects. +Customizable components and patterns for React, Next.js & React Native. + +**gluestack-ui v2** offers customizable, beautifully designed components for your projects. Unlike traditional libraries, it's not a pre-packaged dependency. Choose the components you need and copy-paste them directly into your React, Next.js & React Native projects. + +## Why gluestack-ui v2? + +### Motivation for v2 + +**gluestack-ui v2** is a major upgrade designed to meet the needs of modern developers by enhancing performance, improving the developer experience, and offering greater flexibility. Here's why we're excited to release v2: + +- **Performance Optimization**: gluestack-ui v2 is lightweight and efficient, ensuring fast load times and smooth performance across all devices. +- **Enhanced Developer Experience**: The simplified, intuitive API and comprehensive documentation reduce the learning curve, allowing developers to get up to speed quickly and build exceptional user interfaces. +- **Moving Away from Bundled Libraries**: Avoid unnecessary bloat by selecting only the components you need and copying content directly from the documentation. +- **No Extra Dependencies**: gluestack-ui v2 minimizes additional dependencies, making your projects leaner and easier to maintain. +- **RSC Compatible Components**: Optimize your applications with React Server Components, reducing client-side JavaScript and improving performance. +- **ClassName Support**: Utilize Tailwind's intuitive className utility classes with NativeWind's robust styling engine for unparalleled customization. +- **Maximum Customization**: Gain complete control over your design with easy-to-integrate and customizable components, patterns, and screens. +- **No Default Primary Color**: Start with a non-opinionated design, as gluestack-ui v2 uses a default primary gray color that can be easily adjusted to fit your preferences. + +### Key Features of gluestack-ui v2 + +- **Consistency**: gluestack-ui provides a consistent design language across different platforms, making it easier to build interfaces that look and feel the same on all devices. +- **Accessibility**: gluestack-ui v2 aims to provide a set of accessible components that work across different platforms and devices. The components have accessibility features such as ARIA attributes, keyboard navigation, and focus management. +- **Ease of Use**: gluestack-ui v2 components are designed to be easily customizable. They have clear and concise APIs that make integration into existing projects simple. +- **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? + +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. -### Why use gluestack-ui with NativeWind? +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. -- Not a Library: Avoid unnecessary bloat by selecting only the components you need. +# Why Use Gluestack UI v2 When We Already Have Gluestack UI v1? -- Easy Integration: Copy and paste component code snippets into your project files. +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: -- Full Customization: Tailor components to fit your project's needs by adjusting styles and behaviors. +- **Modular Approach**: Avoid unnecessary bloat by selecting and using only the components you need. +- **Simple Integration**: Easily integrate components by copying and pasting code snippets directly into your project files. +- **Tailwind Class Support**: Enjoy seamless styling with Tailwind's intuitive utility classes with NativeWind. +- **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. ->Note: This pattern uses [NativeWind](https://www.nativewind.dev/v4/overview) version 4.0.36. For styling guidelines, please refer to NativeWind [documentation](https://www.nativewind.dev/v4/overview). +# What will happen to existing gluestack-ui v1 users? -## Community +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: + +- **Continued Support**: We will provide maintenance and support for gluestack-ui v1 for a limited time to ensure a smooth transition. +- **Migration Guide**: We have prepared a comprehensive migration guide to help you seamlessly transition from v1 to v2. The guide includes detailed instructions, code examples, and best practices to ease the process. Link to migration guide. +- **Enhanced Features**: By upgrading to v2, you will benefit from improved performance, better developer experience, and more customization options. +- **Community and Documentation**: Extensive documentation and an active community will support you through the upgrade process and beyond. +- **Codemod Tool**: Additionally, we've developed a codemod tool to assist with the transition, streamlining the process and reducing manual effort. You can find instructions on how to install the codemod tool in our documentation [here](/ui/docs/home/upgrade-to-v2/code-mod). + +We are committed to making the transition to gluestack-ui v2 as smooth and beneficial as possible for all our users. + +# 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 ### Discord @@ -52,3 +105,19 @@ Receive firsthand assistance from our community of developers. Stay updated about our company and collaborate on enterprise-level projects. [Follow us on LinkedIn](https://www.linkedin.com/company/gluestackio/) + +# 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 new file mode 100644 index 0000000000..5187c7b4a3 --- /dev/null +++ b/example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx @@ -0,0 +1,100 @@ +--- +title: Upgrade to v2 | gluestack-ui + +description: Upgrade to Gluestack UI v2 for enhanced performance, improved features, and better support. Follow our guide for a smooth and successful transition. + +--- + +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. 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. + +- [https://www.notion.so/geekyants/A-Migration-Guide-for-gluestack-ui-v1-to-v2-48bd859c6198400d98afa1a375196bee](https://www.notion.so/48bd859c6198400d98afa1a375196bee?pvs=21) + +## 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 diff --git a/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx b/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx index f56e9d92a1..ea1752c1c5 100644 --- a/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx @@ -11,19 +11,52 @@ showHeader: true --- import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import {ColorPaletteComponent} from '../../../components/docs-components/DefaultComponent.tsx'; - - +import {ColorPaletteComponent, ShadowComponent} from '../../../components/docs-components/DefaultComponent.tsx'; Theming in `@gluestack-ui with nativewind` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification). - ## Colors We recommend adding a palette that ranges from 50 to 900. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes. Below are the default color palette tokens provided in the gluestack-ui default config. - \ No newline at end of file + + +To add custom color or update token. Please refer [tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors) + +## Typography + +To manage Typography options, update **theme** in `tailwind.config.js` + +To add or update **Font Family**. Please refer [tailwind CSS documentation](https://tailwindcss.com/docs/font-family) + +To add or update **Font Size**. Please refer [tailwind CSS documentation](https://tailwindcss.com/docs/font-size) + +To add or update **Font Weight**. Please refer [tailwind CSS documentation](https://tailwindcss.com/docs/font-weight) + +To add or update **Line Height**. Please refer [tailwind CSS documentation](https://tailwindcss.com/docs/line-height) + +To add or update **Letter Spacing**. Please refer [tailwind CSS documentation](https://tailwindcss.com/docs/letter-spacing) + +## Breakpoints + +gluestack-ui comes with default tailwind CSS breakpoints. Please refer [this](https://tailwindcss.com/docs/responsive-design) link for customization. + +## Spacing + +gluestack-ui comes with default tailwind CSS spacing. Please refer [this](https://tailwindcss.com/docs/customizing-spacing) link for customization. + +## Radius + +gluestack-ui comes with default tailwind CSS border-radius. Please refer [this](https://tailwindcss.com/docs/border-radius) link for customization. + +## Shadows + +gluestack-ui comes with default tailwind CSS Shadows and we provide two more types of shadows. + + + +Please refer [this](https://tailwindcss.com/docs/customizing-spacing) link for customization. \ No newline at end of file From 5ce74aee58939c64f593246f47c7ea27aa9e00bf Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Tue, 11 Jun 2024 17:29:31 +0530 Subject: [PATCH 2/5] fix: docs ui changes --- .../src/home/overview/Introduction/index.nw.stories.mdx | 4 +--- .../src/home/overview/Upgrade to v2/index.nw.stories.mdx | 6 ++---- .../theme-configuration/default-tokens/index.nw.stories.mdx | 1 + 3 files changed, 4 insertions(+), 7 deletions(-) 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 e9d7a9b56e..6ffb44f53e 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 @@ -118,6 +118,4 @@ gluestack-style is a high-performing and universal CSS-in-JS library, whereas gl ### 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 +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 5187c7b4a3..ce534265d0 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 @@ -21,9 +21,7 @@ Before upgrading to **gluestack-ui v2**, make sure you have the following: ## Migration Guide -Start by reading our comprehensive migration guide. 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. - -- [https://www.notion.so/geekyants/A-Migration-Guide-for-gluestack-ui-v1-to-v2-48bd859c6198400d98afa1a375196bee](https://www.notion.so/48bd859c6198400d98afa1a375196bee?pvs=21) +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 @@ -95,6 +93,6 @@ After the upgrade process, review your codebase to ensure that everything is in ## 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. +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 diff --git a/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx b/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx index ea1752c1c5..60d406c62b 100644 --- a/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx @@ -59,4 +59,5 @@ gluestack-ui comes with default tailwind CSS Shadows and we provide two more typ +
Please refer [this](https://tailwindcss.com/docs/customizing-spacing) link for customization. \ No newline at end of file From cb3f530097834edd7180448aef2e611013d367de Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Tue, 11 Jun 2024 18:46:00 +0530 Subject: [PATCH 3/5] 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 87ee4fdd7f..ee71d767f2 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 41e10a0181..8aadd7d3c8 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 6ffb44f53e..0f00727897 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 ce534265d0..b05a7404cc 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 From 41864614a02a3f1eb039da9984eb068f23faf558 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Tue, 11 Jun 2024 19:02:30 +0530 Subject: [PATCH 4/5] fix: added coming soon! text --- .../src/home/More/Releases/index.nw.stories.mdx | 2 +- .../src/home/More/Roadmap/index.nw.stories.mdx | 2 ++ .../src/home/getting-started/cli/index.nw.stories.mdx | 6 +++++- .../src/home/overview/Introduction/index.nw.stories.mdx | 2 +- .../src/home/overview/Upgrade to v2/index.nw.stories.mdx | 4 +++- 5 files changed, 12 insertions(+), 4 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 ee71d767f2..fb012332c3 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 @@ -11,4 +11,4 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; # Releases -To view releases, please visit [GitHub releases](https://github.com/gluestack/gluestack-ui/releases) \ No newline at end of file +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 8aadd7d3c8..ba1cab32ce 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 @@ -9,4 +9,6 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; +# Roadmap + Coming Soon! \ No newline at end of file diff --git a/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx b/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx index 39c8f43eb8..1932196a43 100644 --- a/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx @@ -7,4 +7,8 @@ description: A CLI tool for seamlessly adding components from Gluestack UI to yo import { Canvas, Meta, Story } from '@storybook/addon-docs'; - \ No newline at end of file + + +# CLI + +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 0f00727897..cf8384c50e 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 @@ -106,4 +106,4 @@ Stay updated about our company and collaborate on enterprise-level projects. ### 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 +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](/ui/docs/home/more/roadmap). \ 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 b05a7404cc..2581d53ed6 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,4 +9,6 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; -You can check out our new component development roadmap [here](/ui/docs/home/more/roadmap). \ No newline at end of file +# Upgrade to v2 + +Coming Soon! \ No newline at end of file From 9a8e910c6c30affd651c2ce4d5bd94e9fc972964 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Tue, 11 Jun 2024 19:13:59 +0530 Subject: [PATCH 5/5] fix: link --- .../src/home/overview/Introduction/index.nw.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 cf8384c50e..7e2bd40526 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 @@ -62,7 +62,7 @@ Existing gluestack-ui v1 users will continue to have access to their current ver - **Migration Guide**: We have prepared a comprehensive migration guide to help you seamlessly transition from v1 to v2. The guide includes detailed instructions, code examples, and best practices to ease the process. Link to migration guide. - **Enhanced Features**: By upgrading to v2, you will benefit from improved performance, better developer experience, and more customization options. - **Community and Documentation**: Extensive documentation and an active community will support you through the upgrade process and beyond. -- **Codemod Tool**: Additionally, we've developed a codemod tool to assist with the transition, streamlining the process and reducing manual effort. You can find instructions on how to install the codemod tool in our documentation [here](/ui/docs/home/upgrade-to-v2/code-mod). +- **Codemod Tool**: Additionally, we've developed a codemod tool to assist with the transition, streamlining the process and reducing manual effort. You can find instructions on how to install the codemod tool in our documentation [here](/ui/docs/home/overview/upgrade-to-v2). We are committed to making the transition to gluestack-ui v2 as smooth and beneficial as possible for all our users.