Patch

example/expo-project/App.tsx

@@ -17,7 +17,7 @@ TempProvider.displayName = 'Provider';
 
 export const Provider = ({ children }: any) => {
   return (
-    <TempProvider config={config.theme}>
+    <TempProvider config={config}>
       <Box
         sx={{
           _dark: {

example/next-project/pages/_app.tsx

@@ -6,7 +6,7 @@ import { config } from '../../storybook/src/gluestack-ui.config';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <GluestackUIProvider config={config.theme}>
+    <GluestackUIProvider config={config}>
       <Component {...pageProps} />
     </GluestackUIProvider>
   );

example/storybook/.ondevice/preview.js

@@ -1,11 +1,10 @@
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 import { addParameters } from '@storybook/client-api';
-import { GluestackUIProvider } from '@gluestack-ui/themed';
-import { config } from '@gluestack-ui/themed';
+import { GluestackUIProvider, Box, VStack } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
+
 import { useState } from 'react';
 
-// export const decorators = [];
-//
 export const parameters = {
   backgrounds: {
     default: 'plain',
@@ -46,8 +45,10 @@ export const decorators = [
       }
     }
     return (
-      <GluestackUIProvider config={config.theme}>
-        <Story />
+      <GluestackUIProvider config={config}>
+        <Box flex={1} p="$10">
+          <Story />
+        </Box>
       </GluestackUIProvider>
     );
   },
@@ -74,7 +75,7 @@ addParameters({
       }
       return (
         <DocsContainer context={context}>
-          <GluestackUIProvider config={config.theme} colorMode={getColorMode()}>
+          <GluestackUIProvider config={config} colorMode={getColorMode()}>
             {children}
           </GluestackUIProvider>
         </DocsContainer>

example/storybook/.storybook/gluestack-ui.config.ts

@@ -1,9 +1,10 @@
 // gluestack-ui.config.ts
 import { LinearGradient } from 'expo-linear-gradient';
-import { createConfig, config as defaultConfig } from '@gluestack-ui/themed';
+import { createConfig } from '@gluestack-ui/themed';
+import { config as defaultConfig } from '@gluestack-ui/config';
 
 export const config = createConfig({
-  ...defaultConfig.theme,
+  ...defaultConfig,
   components: {
     LinearGradient: {
       theme: {

example/storybook/.storybook/main.js

@@ -1,5 +1,4 @@
 const path = require('path');
-
 // console.log(path.resolve('../../', 'node_modules/@gluestack-style/react'));
 module.exports = {
   stories: [

example/storybook/.storybook/preview.js

@@ -1,7 +1,7 @@
 import { addParameters } from '@storybook/client-api';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { config } from '@gluestack-ui/config';
 import { Center, GluestackUIProvider } from '@gluestack-ui/themed';
-import { config } from './gluestack-ui.config';
 import { useState } from 'react';
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -19,19 +19,18 @@ export const parameters = {
       method: '',
       order: [
         'Overview',
-        ['Introduction'],
+        ['Introduction', 'All Components'],
         'Getting Started',
         ['Installation', 'VS Code Extensions'],
         'Core Concepts',
-        ['Themed Library', 'Unstyled Components', 'Accessibility'],
+        ['Themed Library', 'Unstyled Library', 'Accessibility'],
         'Performance',
         ['Overview', 'Benchmarks'],
-        'Theme',
+        'Theme Configuration',
         [
-          'Overview',
-          'Default Tokens',
-          'Customizing Tokens',
-          'Customizing Components',
+          'Theme',
+          ['Default Tokens', 'Default Components'],
+          'Customizing Theme',
         ],
         'Styling',
         [
@@ -46,7 +45,6 @@ export const parameters = {
         ],
         'Components',
         [
-          'Component Catalog',
           'Provider',
           ['GluestackUIProvider'],
           'Typography',
@@ -140,7 +138,11 @@ export const decorators = [
       }
     }
     return (
-      <GluestackUIProvider config={config} colorMode={getColorMode()}>
+      <GluestackUIProvider
+        config={config}
+        // colorMode={getColorMode()}
+        // components={components}
+      >
         <Center>
           <Story />
         </Center>
@@ -168,6 +170,7 @@ addParameters({
           return isDark ? 'dark' : 'light';
         }
       }
+
       return (
         <DocsContainer context={context}>
           <GluestackUIProvider config={config} colorMode={getColorMode()}>

example/storybook/babel.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+console.log('herher');
 module.exports = function (api) {
   api.cache(true);
   return {
@@ -8,10 +9,28 @@ module.exports = function (api) {
         ? [
             'module-resolver',
             {
-              '@gluestack-ui/themed': path.join(
-                __dirname,
-                '../../packages/themed/src'
-              ),
+              alias: {
+                // '@gluestack-ui/themed': path.join(
+                //   __dirname,
+                //   '../../packages/themed/src'
+                // ),
+                // '@gluestack-ui/config': path.join(
+                //   __dirname,
+                //   '../../packages/config/src/gluestack-ui.config'
+                // ),
+                // '@gluestack-style/react': path.join(
+                //   __dirname,
+                //   '../../../dank-style/packages/react/src'
+                // ),
+                // '@gluestack-style/animation-resolver': path.join(
+                //   __dirname,
+                //   '../../../dank-style/packages/animation-resolver/src'
+                // ),
+                // '@gluestack-style/legend-motion-animation-driver': path.join(
+                //   __dirname,
+                //   '../../../dank-style/packages/animation-legend-motion-driver/src'
+                // ),
+              },
             },
           ]
         : [

example/storybook/package.json

@@ -24,9 +24,6 @@
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
     "@geometricpanda/storybook-addon-iframe": "^0.2.2",
-    "@gluestack-style/animation-plugin": "^0.1.11",
-    "@gluestack-style/react": "^0.2.50",
-    "@gluestack-ui/themed": "*",
     "@gluestack/design-system": "^0.4.70",
     "@legendapp/motion": "^2.2.0",
     "@react-aria/button": "^3.7.0",
@@ -49,9 +46,12 @@
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
     "lucide-react-native": "^0.236.0",
+    "next": "^13.5.3",
     "prism-react-renderer": "^1.3.5",
     "re-resizable": "^6.9.11",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "0.72.5",
     "react-native-gesture-handler": "^2.12.1",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "13.4.0",

example/storybook/src/CLI/gluestack-ui-scripts/index.stories.mdx

@@ -26,7 +26,7 @@ import {
 
 `@gluestack-ui/themed` is a component library which provides universal, accessible, interactive, styled components.
 
-The accessibility, interactivity and other features of the components are provided by `@gluestack-ui/themed`. The styling of the components is done by using another library [gluestack-style](https://style.gluestack.io/). We can use customised styles, theme tokens, dark and light mode, breakpoints etc with the help of `@gluestack-style`
+The accessibility, interactivity and other features of the components are provided by `@gluestack-ui/themed`. The styling of the components is done by using another library [gluestack-style](https://style.gluestack.io/style/). We can use customised styles, theme tokens, dark and light mode, breakpoints etc with the help of `@gluestack-style`
 
 By default gluestack-ui components comes with a default base styling for all components, which is acheived when the components are wrapped with a Provider that takes in a theme file. `@gluestack-ui/themed` ships a theme created by team of designers after a lot of research. But what if there is a need to customise the base styling for all components or just the theme file. Don't worry we got you covered.
 

example/storybook/src/advanced/Animations/index.stories.mdx

@@ -14,14 +14,17 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 # Animations
 
-gluestack-ui leverages the power of the [Animation plugin](https://style.gluestack.io/docs/plugins/animation-plugin) from [style.gluestack.io](https://style.gluestack.io) to provide animations for a more engaging user experience. By default, all of our animated components are built using the [@legendapp/motion](https://legendapp.com/open-source/motion/), which provides declarative animations for React Native.
+gluestack-ui leverages the power of the [Animation plugin](/style/docs/plugins/animation-plugin) from [gluestack.io/style](/style) to provide animations for a more engaging user experience. By default, all of our animated components are built using the [@legendapp/motion](https://legendapp.com/open-source/motion/), which provides declarative animations for React Native.
 
 ### Usage:
 
-By default, gluestack-ui exports styled function with `animation plugin` enabled. You can use it to create your own animated components.
+By default, gluestack-ui/themed comes with with `animation plugin` plugin installed with `@legendapp/motion` animation driver. You can use the Animatable Components from `@gluestack-style/animation-resolver` and from them you can create your own animated components.
 
 ```jsx
-const Box = styled(Motion.View, {
+import { AnimatedView } from '@gluestack-style/animation-resolver';
+import { styled } from '@gluestack-style/react';
+
+const AnimatedBox = styled(AnimatedView, {
   ':initial': {
     opacity: 0,
   },
@@ -34,30 +37,43 @@ const Box = styled(Motion.View, {
 });
 ```
 
-## Overlay components:
+or You can also extend the style of the animated components and customize it.
 
-gluestack-ui also provides a set of overlay components that can be used to create a modal-like experience. All the animation props works out of the box with these components. However, to animate component on exit you need to pass [AnimatePresence](https://legendapp.com/open-source/motion/animate-presence/) while creating component.
+```jsx
+const componentTheme = createComponents({
+  ...defaultConfig.components,
+  ModalContent: {
+    theme: {
+      ':initial': {
+        bg: 'white',
+      },
+    },
+  },
+});
 
-If you are using [@legendapp/motion](https://legendapp.com/open-source/motion/), you can use `<component-name>.AnimatePresence`, which internally uses `AnimatePresence` from `@legendapp/motion`.
+// Pass this componentTheme in the provider.
+```
 
-### Why ComponentName.AnimatePresence and not AnimatePresence from @legendapp/motion?
+## Overlay components:
 
-For exit animation, `@legendapp/motion` internally loops over children and tries to find the `exit` prop directly. However, with our wrapper component, we can pass the `exit` prop to the component, and it will work as expected with `AnimatePresence`.
+gluestack-ui also provides a set of overlay components that can be used to create a modal-like experience. All the animation props works out of the box with these components. However, to animate component on exit you need to pass [AnimatePresence](https://legendapp.com/open-source/motion/animate-presence/) while creating component.
 
-> Note: If you are using any other animation library, you can use `AnimatePresence` or something similar(which animates component on exit) from your library.
+If you can use `AnimatePresence` from `@gluestack-style/animation-resolver`, which internally uses `AnimatePresence` from your chosen driver.
 
 ### Example:
 
 ```jsx
+import { AnimatePresence } from '@gluestack-style/animation-resolver';
+
 export const Tooltip = createTooltip({
   Root,
   Content,
-  AnimatePresence: Content.AnimatePresence, // Can be AnimatePresence from the library you are using
+  AnimatePresence, // Can be AnimatePresence from the library you are using
 });
 ```
 
 ## Advanced concepts for animations in gluestack-ui
 
-However, you are not limited to use only that library. You can use any declarative animation library you prefer, such as [framer-motion](https://www.framer.com/motion/), and [moti](https://moti.fyi/), or others. You can add aliases for animation props from your library. For example, if you are using moti, you can add aliases for `from`, `animate`, and `exit` props.
+However, you are not limited to use only `@legendapp/motion`. You can use any declarative animation library you prefer, such as [framer-motion](https://www.framer.com/motion/), and [moti](https://moti.fyi/), or others. You can add your own animation driver to the `animation-resolver` plugin and use it with gluestack-ui. Currently we only provide 2 drivers, `@legendapp/motion` and `moti`.
 
-You can refer to [animation plugin](https://style.gluestack.io/docs/plugins/animation-plugin) documentation for more details.
+You can refer to [customizing animations](/ui/docs/theme-configuration/customizing-theme) section's documentation for more details on customizing the Animation Components.

example/storybook/src/advanced/Fonts/index.stories.mdx

@@ -142,7 +142,7 @@ Add the font name in the `gluestack.config.js` file in the `fonts` object.
 
 ## Advanced concepts for fonts in gluestack-ui
 
-In gluestack-ui, components are styled using `styled` provided by `@gluestack-style/react` package, [check here](https://style.gluestack.io/).
+In gluestack-ui, components are styled using `styled` provided by `@gluestack-style/react` package, [check here](https://style.gluestack.io/style
 This package provides a way to add plugins using `createStyled` function.
 
 ```bash
@@ -165,6 +165,6 @@ const StyledText = styled(Text, {
 });
 ```
 
-You can use this `styled` function which has the [font plugin](https://style.gluestack.io/docs/plugins/fonts-plugin) added to it to style your components. For gluestack-ui components, we have used this styled function to style the components.
+You can use this `styled` function which has the [font plugin](https://style.gluestack.io/styleplugin) added to it to style your components. For gluestack-ui components, we have used this styled function to style the components.
 
 Similarly, we can pass font styles to any component and then use the returned component (with font styles added).