Merge pull request #2230 from gluestack/feat/nativewind-v2-docs

fix: updated docs with home changes

example/storybook-nativewind/.storybook/preview.js

@@ -34,18 +34,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',
         [

example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx

@@ -111,4 +111,49 @@ const ColorPaletteComponent = () => {
   );
 };
 
-export { ColorPaletteComponent };
+const ShadowComponent = () => {
+  const { colorMode } = useContext(LayoutContext);
+  return (
+    <GluestackUIProvider mode={colorMode}>
+      <VStack space="lg">
+        <Heading>Hard Shadows</Heading>
+        <HStack space="lg">
+          <Box className="h-20 w-20 rounded-lg items-center justify-center bg-blue-500 shadow-hard-1">
+            <Text>1</Text>
+          </Box>
+          <Box className="h-20 w-20 rounded-lg items-center justify-center bg-blue-500 shadow-hard-2">
+            <Text>2</Text>
+          </Box>
+          <Box className="h-20 w-20 rounded-lg items-center justify-center bg-blue-500 shadow-hard-3">
+            <Text>3</Text>
+          </Box>
+          <Box className="h-20 w-20 rounded-lg items-center justify-center bg-blue-500 shadow-hard-4">
+            <Text>4</Text>
+          </Box>
+          <Box className="h-20 w-20 rounded-lg items-center justify-center bg-blue-500 shadow-hard-5">
+            <Text>5</Text>
+          </Box>
+        </HStack>
+
+        <Heading>Soft Shadows</Heading>
+        <HStack space="lg">
+          <Box className="h-20 w-20 rounded-lg items-center justify-center bg-blue-500 shadow-soft-1">
+            <Text>1</Text>
+          </Box>
+          <Box className="h-20 w-20 rounded-lg items-center justify-center bg-blue-500 shadow-soft-2">
+            <Text>2</Text>
+          </Box>
+          <Box className="h-20 w-20 rounded-lg items-center justify-center bg-blue-500 shadow-soft-3">
+            <Text>3</Text>
+          </Box>
+          <Box className="h-20 w-20 rounded-lg items-center justify-center bg-blue-500 shadow-soft-4">
+            <Text>4</Text>
+          </Box>
+        </HStack>
+      </VStack>
+      {/* </SafeAreaView> */}
+    </GluestackUIProvider>
+  );
+};
+
+export { ColorPaletteComponent, ShadowComponent };

example/storybook-nativewind/src/home/More/Releases/index.nw.stories.mdx

@@ -0,0 +1,14 @@
+---
+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';
+
+<Meta title="with-nativewind/Home/More/Releases" />
+
+# Releases
+
+To view releases, please visit [GitHub releases](https://github.com/gluestack/gluestack-ui/releases).

example/storybook-nativewind/src/home/More/Roadmap/index.nw.stories.mdx

@@ -0,0 +1,14 @@
+---
+title: Roadmap | gluestack-ui
+
+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" />
+
+# Roadmap
+
+Coming Soon!

example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx

@@ -0,0 +1,14 @@
+---
+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';
+
+<Meta title="with-nativewind/Home/Getting Started/CLI" />
+
+# CLI
+
+Coming Soon!

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,17 +11,64 @@ 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.
+
+## Why use gluestack-ui v2, when we already have NativeBase?
 
-### Why use gluestack-ui with NativeWind?
+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.
 
-- Not a Library: Avoid unnecessary bloat by selecting only the components you need.
+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.
 
-- Easy Integration: Copy and paste component code snippets into your project files.
+## Why Use Gluestack UI v2 When We Already Have Gluestack UI v1?
 
-- Full Customization: Tailor components to fit your project's needs by adjusting styles and behaviors.
+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:
 
->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).
+- **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.
+
+## 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:
+
+- **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/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.
+
+## 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
 
@@ -52,3 +101,9 @@ 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 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](/ui/docs/home/more/roadmap).

example/storybook-nativewind/src/home/overview/Upgrade to v2/index.nw.stories.mdx

@@ -0,0 +1,14 @@
+---
+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';
+
+<Meta title="with-nativewind/Home/Overview/Upgrade to v2" />
+
+# Upgrade to v2
+
+Coming Soon!

example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx

@@ -11,19 +11,53 @@ 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';
 
 <Meta title="with-nativewind/Home/Theme Configuration/Default Tokens" />
 
 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.
 
-<ColorPaletteComponent />
+<ColorPaletteComponent />
+
+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. 
+
+<ShadowComponent />
+
+<br/>
+Please refer [this](https://tailwindcss.com/docs/customizing-spacing) link for customization.