Merge pull request #1494 from gluestack/release/@gluestack-style/reac…

…[email protected]

Release/@gluestack style/[email protected]

example/storybook/src/ui/components/Feedback/Alert/index.stories.mdx

@@ -266,20 +266,6 @@ An example of an alert component with a heading, which further contains another
 
 All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component.
 
-## Spec Doc
-
-Explore the comprehensive details of the Alert in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
-
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5653%253A34732%26type%3Ddesign%26node-id%3D5658-36648%26viewport%3D1433%252C11%252C0.08%26t%3DWy4Bx2pKvlcvatlJ-1%26scaling%3Dcontain%26starting-point-node-id%3D5658%253A36648%26mode%3Ddesign"
-  allowFullScreen
-/>
-
 <!--
 
 ### Advanced

example/storybook/src/ui/components/Overlay/AlertDialog/index.stories.mdx

@@ -780,3 +780,17 @@ export default () => (
 );
 ```
 -->
+
+## Spec Doc
+
+Explore the comprehensive details of the AlertDialog in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
+
+<iframe
+  style={{
+    borderRadius: '8px',
+    border: ' 1px solid rgba(0, 0, 0, 0.1)',
+    aspectRatio: 736 / 585,
+  }}
+  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5653%253A34732%26type%3Ddesign%26node-id%3D5658-36648%26viewport%3D1433%252C11%252C0.08%26t%3DWy4Bx2pKvlcvatlJ-1%26scaling%3Dcontain%26starting-point-node-id%3D5658%253A36648%26mode%3Ddesign"
+  allowFullScreen
+/>

example/storybook/src/ui/overview/Accessibility/index.stories.mdx → example/storybook/src/ui/core-concepts/Accessibility/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
 title: Accessibility | gluestack-ui
-description: gluestack-ui is a React library that provides universal, unstyled, and accessible components. It includes keyboard accessibility and focus management features, making it a great choice for developers who prioritize accessibility and usability.
+description: gluestack-ui is a UI library that provides universal, unstyled, and accessible components. It includes keyboard accessibility and focus management features, making it a great choice for developers who prioritize accessibility and usability.
 ---
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
@@ -9,11 +9,11 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 # Accessibility
 
-Accessibility is an important aspect of web development, and at gluestack-ui, we strive to make our components accessible to all users. In this section, we will discuss the accessibility features of our components
+Accessibility is an important aspect of web and native development, and at gluestack-ui, we strive to make our components accessible to all users. In this section, we will discuss the accessibility features of our components.
 
 ### WAI-ARIA Guidelines
 
-gluestack-ui follows the WAI-ARIA Authoring Practices guidelines to ensure our components are accessible to users of assistive technologies. The WAI-ARIA Authoring Practices document provides guidance on how to create accessible widgets, navigation, and behaviors using WAI-ARIA roles, states, and properties.
+gluestack-ui follows the WAI-ARIA Authoring Practices guidelines to ensure our components are accessible to users of assistive technologies. The WAI-ARIA Authoring Practices document provides guidance on how to create accessible widgets, navigation, and behaviours using WAI-ARIA roles, states, and properties.
 
 ### Browser and Assistive Technology Testing
 

example/storybook/src/ui/core-concepts/ThemedLibrary/index.stories.mdx

@@ -38,9 +38,9 @@ After that, we enhance the components with accessibility features, interactivity
 - Themes
 - Overwriting components base styles
 
-`@gluestack-ui/config` exports a config file that allows us to manipulate the theme tokens and add new themes. Theme tokens are standardized values that represent various design attributes, such as colors, typography settings, spacing, and more. These tokens serve as a consistent and centralized way to define and manage the visual properties of UI components across your application. Customizing these tokens can also be done, for more information refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme).
+`@gluestack-ui/config` exports a config file that allows us to manipulate the theme tokens and add new themes. Theme tokens are standardized values that represent various design attributes, such as colors, typography settings, spacing, and more. These tokens serve as a consistent and centralized way to define and manage the visual properties of UI components across your application. Customizing these tokens can also be done, for more information refer to this [link](ui/docs/theme-configuration/customizing-theme).
 
-Component styling is accomplished through [`@gluestack-style/react`](https://gluestack.io/style). You can customize the styles of each component, and detailed information related to that is available [here](https://gluestack.io/ui/docs/theme-configuration/customizing-theme).
+Component styling is accomplished through [`@gluestack-style/react`](https://gluestack.io/style). You can customize the styles of each component, and detailed information related to that is available [here](ui/docs/theme-configuration/customizing-theme).
 
 ## Usage
 

example/storybook/src/ui/core-concepts/Universal/index.stories.mdx

@@ -19,7 +19,6 @@ You can also use `gluestack-ui` to create styles specific to a particular platfo
 import { Button, ButtonText} from 'gluestack-ui/themed';
 
 function App {
-
   return (
     <Button
         sx={{

example/storybook/src/ui/core-concepts/UnstyledLibrary/index.stories.mdx

@@ -30,14 +30,6 @@ import {
 } from 'react-native';
 // import the createButton function
 import { createButton } from '@gluestack-ui/button';
-// import {
-//   AppProvider,
-//   Box,
-//   HStack,
-//   Text,
-//   Hoverable,
-//   CodePreview,
-// } from '@gluestack/design-system';
 
 <Meta title="ui/Core Concepts/Unstyled Library" />
 
@@ -91,29 +83,29 @@ However, you can make these components look the way you want by adding your own
 
 Let's try creating an unstyled Button component
 
-We utilize a function named `createButton` for the creation of a customized button component. This function accepts a configuration object that contains the styled components you wish to apply to the button. For guidance on the usage of styled components, you can refer [gluestack.io/style](/style) function expects an object containing the styled components that can be tailored to meet your specifications. These styled components can be generated using the `styled` function, which is exported by `@gluestack-style/react`. Here is a basic example provided below.
+We utilize a function named `createButton` for the creation of a customized button component. This function accepts a configuration object that contains the styled components you wish to apply to the button. For guidance on the usage of styled components, you can refer [gluestack.io/style](/style). These styled components can be generated using the `styled` function, which is exported by `@gluestack-style/react`. Here is a basic example provided below.
 
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
     showArgsController={false}
     metaData={{
       code: `
+    // import {styled} from '@gluestack-style/react';
+    // import {View, Pressable, Text as RNText, ActivityIndicator} from 'react-native';
     function App() {
       const Root = styled(Pressable, {});
       const Text = styled(RNText, {});
       const Group = styled(View, {});
-      const GroupHSpacer = styled(View, {});
-      const GroupVSpacer = styled(View, {});
       const Spinner = styled(ActivityIndicator, {});
+      const Icon = styled(View, {});
       // Understanding the API
       const Button = createButton({
         Root,
         Text,
         Group,
-        GroupHSpacer,
-        GroupVSpacer,
         Spinner,
+        Icon
       });
       return (
         <Button.Group>
@@ -146,3 +138,23 @@ We utilize a function named `createButton` for the creation of a customized butt
 In the above example, we are creating an accessible, universal `Button` component by using `createButton` function exported by `@gluestack-ui/button` package. We create various unstyled library using the API employed by `styled` function. These components are then passed as arguments to `createButton` function. Likewise, for each component, there exists a distinct package and API, specified in the documentation of the respective components.
 
 Styling these components is achieved with the aid of the `@gluestack-style/react` library. We generate styled components and encapsulate them within an object, which is then provided as input to the function.
+
+### Usecase for unstyled components without any config
+
+Let's say you want to use the `Button` component from `@gluestack-ui/button` package, but you don't want to use any of the pre-defined styles. In this case, you can use the `createButton` function without any configuration object. And you can pass inline styles without tokenization to style them.
+
+```jsx
+// import {GluestackUIProvider, ButtonGroup, Button, ButtonText } from '@gluestack-style/react';
+// import {View, Pressable, Text as RNText, ActivityIndicator} from 'react-native';
+function App() {
+  return (
+    <GluestackUIProvider>
+      <ButtonGroup>
+        <Button backgroundColor="blue">
+          <ButtonText color="white">Hello world</ButtonText>
+        </Button>
+      </ButtonGroup>
+    </GluestackUIProvider>
+  );
+}
+```

example/storybook/src/ui/getting-started/Installation/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Fold2 from './index1';
+import Fold2 from './Fold2';
 import { Box, VStack, Text } from '@gluestack/design-system';
 import Talk from './Talk';
 import Socail from './Socail';

example/storybook/src/ui/getting-started/Installation/RadioDemo.tsx

@@ -12,8 +12,7 @@ const ToastDemo = () => {
     <Toast nativeID={1} action="info" variant="accent">
       <VStack space="xs">
         <ToastTitle>Info</ToastTitle>
-        <ToastDescription>Your order has</ToastDescription>
-        <ToastDescription>been received.</ToastDescription>
+        <ToastDescription>Your order has been received.</ToastDescription>
       </VStack>
     </Toast>
   );

example/storybook/src/ui/getting-started/increamental-adoption/index.stories.mdx → example/storybook/src/ui/getting-started/incremental-adoption/index.stories.mdx

@@ -19,13 +19,13 @@ Incremental adoption is a strategy for implementing changes gradually instead of
   - `npm install react-dom react-native-web`
   - For build-time optimizations, install the babel plugin as well - `npm install --save-dev babel-plugin-react-native-web`
 - If it’s a typescript project install React Native types as well - `npm i @types/react-native`
-- Install `@gluestack-ui/themed` and follow the steps mentioned in the [Docs](https://ui.gluestack.io/docs/guides/install-nextjs) according to your use case.
+- Install `@gluestack-ui/themed` and follow the steps mentioned in the [Docs](ui/docs/guides/install-nextjs) according to your use case.
 
 ### If you are building a universal app:
 
 - Install `@gluestack-ui/themed`
-  - Follow [these](https://gluestack.io/ui/docs/guides/install-expo) steps if you are using Expo
-  - Follow [these](https://gluestack.io/ui/docs/guides/install-rn) steps if you are using React Native Bare App.
+  - Follow [these](ui/docs/guides/install-expo) steps if you are using Expo
+  - Follow [these](ui/docs/install-rn) steps if you are using React Native Bare App.
 
 ## How to incrementally add @gluestack-ui/themed to your Project?
 
@@ -36,7 +36,7 @@ Don’t worry, we’ve got your back! All you need to get started is 4 steps-
 - Install all the prerequisites (Which most probably you already did).
 - Create a config file named `gluestack-ui.config.ts` and export your config from there.
 - Use `GluestackUIProvider` and wrap the root of your app.
-- Now you can replace your components that you were importing from `X-Components`, with Box from `@gluestack-ui/themed`
+- Now you can replace your components that you were importing from `X-Components`, with components from `@gluestack-ui/themed`
 
 That’s it!
 
@@ -46,62 +46,4 @@ Similarly, when needed you can replace the components from `X-Components` with c
 
 If you had made customizations to the older components from `X-Components` or the design from `X-Components` is completely different from `@gluestack-ui/themed`, you can still incorporate those customizations into the new components from `@gluestack-ui/themed`. The theming capabilities of `@gluestack-ui/themed` allow you to customize the appearance of the components to match your specific requirements.
 
-There are 2 ways you can customize your theme:
-
-- Using `createComponents` & `createStyle` API:
-
-  ```jsx
-  // gluestack-ui.config.ts
-  export const config = createConfig({
-    aliases: {},
-    tokens: {},
-    themes: {},
-    globalStyles: {}
-  } as const);
-
-  type Config = typeof config;
-
-  // components
-  export const components = createComponents({
-    Box: createStyle({
-       theme: {},
-       componentConfig: {
-        descendants: [],
-        ancestors: [],
-        resolvedProps: [],
-       },
-    }),
-    Text: createStyle( {
-      ...
-   })
-  })
-
-  type Components = typeof components;
-
-  declare module '@gluestack-style/react' {
-    interface ICustomConfig extends Config {}
-    interface ICustomComponents extends Components {}
-  }
-  ```
-
-  ```jsx
-  // App.tsx
-  import { config, components } from './gluestack-ui.config.ts';
-
-  export default function ({ children }) {
-    return (
-      <StyledProvider config={config} components={components}>
-        {children}
-      </StyledProvider>
-    );
-  }
-  ```
-
-### API Reference
-
-- `createConfig` - To define core config
-- `createStyle` - Defines `style/theme` of component
-- `createComponents`Define key value pair of component name and theme
-
-- Using npx cli tool or copying the theme folder and eject the complete styling of `@gluestack-ui/themed`.
-  - on the root of your project run `npx gluestack-ui-scripts eject-theme` or you can copy this [folder](https://github.com/gluestack/gluestack-ui/tree/main/packages/config/src) in your project and import everything from this folder.
+To customize your theme, please follow the steps mentioned in the [docs](ui/docs/theme-configuration/customizing-theme).

example/storybook/src/ui/more/Roadmap/index.stories.mdx

@@ -9,7 +9,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 # Roadmap
 
-For the most up-to-date roadmap for `gluestack-ui`, please visit our dedicated [roadmap page](https://geekyants.notion.site/geekyants/2b6d17f43abc4a05b54ad55330e31fac?v=83c47b3670674003a8677f0dcf76953a).
+For the most up-to-date roadmap for `gluestack-ui`, please visit our dedicated [roadmap page](https://geekyants.notion.site/c7ab20877a8a4d6690e31faa51f52fe2?v=a7a141e2f82f43c3ada04e99bf73cb8d).
 
 This page provides an insightful overview of our projects' timeline, key milestones, features, improvements and keeping you informed about our ongoing initiatives. We regularly update the roadmap to reflect our progress and to ensure that our library evolves in a strategic and systematic manner, meeting the needs of developers and staying ahead of industry trends.
 

example/storybook/src/ui/more/contribution-guidelines/index.stories.mdx

@@ -198,11 +198,3 @@ The process of proposing a change to `gluestack-ui` can be summarized as follows
 9. Review and address comments on your pull request.
 
 If all goes well, your pull request will be merged. If it is not merged, maintainers will do their best to explain the reason why.
-
-```
-
-```
-
-```
-
-```

example/storybook/src/ui/more/faqs/index.stories.mdx

@@ -9,16 +9,16 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 # 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, Accordion, 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://geekyants.notion.site/geekyants/2b6d17f43abc4a05b54ad55330e31fac?v=83c47b3670674003a8677f0dcf76953a).
+
+We're currently working on adding new components which include Table, Accordion, 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://geekyants.notion.site/c7ab20877a8a4d6690e31faa51f52fe2?v=a7a141e2f82f43c3ada04e99bf73cb8d).

example/storybook/src/ui/overview/AllComponents/Demos/AccordionDemo.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionTitleText,
+  AccordionIcon,
+  AccordionContent,
+  AccordionContentText,
+  ScrollView,
+} from '@gluestack-ui/themed';
+import { ChevronDownIcon } from 'lucide-react-native';
+import { ChevronUpIcon } from 'lucide-react-native';
+const AccordionDemo = () => {
+  return (
+    <ScrollView contentContainerStyle={{ maxHeight: 50 }}>
+      <Accordion mt="$5">
+        <AccordionItem value="a">
+          <AccordionHeader>
+            <AccordionTrigger>
+              {(states: any) => (
+                <>
+                  <AccordionTitleText>
+                    How do I place an order?
+                  </AccordionTitleText>
+                  {states.isExpanded ? (
+                    <AccordionIcon as={ChevronUpIcon} />
+                  ) : (
+                    <AccordionIcon as={ChevronDownIcon} />
+                  )}
+                </>
+              )}
+            </AccordionTrigger>
+          </AccordionHeader>
+          <AccordionContent>
+            <AccordionContentText>
+              You can place your order by clicking the "Order Now" button.
+            </AccordionContentText>
+          </AccordionContent>
+        </AccordionItem>
+
+        <AccordionItem value="b">
+          <AccordionHeader>
+            <AccordionTrigger>
+              {({ isExpanded }: { isExpanded: boolean }) => {
+                return (
+                  <>
+                    <AccordionTitleText>
+                      What payment methods do you accept?
+                    </AccordionTitleText>
+                    {isExpanded ? (
+                      <AccordionIcon as={ChevronUpIcon} />
+                    ) : (
+                      <AccordionIcon as={ChevronDownIcon} />
+                    )}
+                  </>
+                );
+              }}
+            </AccordionTrigger>
+          </AccordionHeader>
+          <AccordionContent>
+            <AccordionContentText>
+              We accept Visa, Mastercard, and American Express.
+            </AccordionContentText>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </ScrollView>
+  );
+};
+
+export default AccordionDemo;

example/storybook/src/ui/overview/AllComponents/content.tsx

@@ -29,6 +29,7 @@ import FabDemo from './Demos/FabDemo';
 import CenterDemo from './Demos/CenterDemo';
 import AlertDialogDemo from './Demos/AlertDialogDemo';
 import ModalDemo from './Demos/ModalDemo';
+import AccordionDemo from './Demos/AccordionDemo';
 // import MenuDemo from './Demos/MenuDemo';
 // import PopoverDemo from './Demos/PopoverDemo';
 import ActionsheetDemo from './Demos/ActionsheetDemo';
@@ -56,6 +57,11 @@ export const content = [
     child: <AvatarDemo />,
     href: '/ui/docs/components/media-and-icons/avatar',
   },
+  {
+    title: 'Accordion',
+    child: <AccordionDemo />,
+    href: '/ui/docs/components/disclosure/accordion',
+  },
 
   {
     title: 'Badge',