Patch

README.md

@@ -10,7 +10,7 @@
 
 ## Documentation
 
-You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/styledocs website.
+You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/style/docs website.
 
 ## Features
 

example/storybook/.ondevice/storybook.requires.js

@@ -7,7 +7,8 @@ import {
   addArgsEnhancer,
   clearDecorators,
 } from '@storybook/react-native';
-
+import { config } from '../src/components/nb.config';
+console.log(Object.keys(config));
 global.STORIES = [
   {
     titlePrefix: '',
@@ -52,8 +53,8 @@ const getStories = () => {
     // "./src/api/AsForwarder/AsForwarder.stories.tsx": require("../src/api/AsForwarder/AsForwarder.stories.tsx"),
     // "./src/api/ColorModeBasedStyles/ColorMode.stories.tsx": require("../src/api/ColorModeBasedStyles/ColorMode.stories.tsx"),
     // "./src/api/CompoundVariants/CompoundVarinats.stories.tsx": require("../src/api/CompoundVariants/CompoundVarinats.stories.tsx"),
-    './src/api/createStyled/createStyled.stories.tsx': require('../src/api/createStyled/createStyled.stories.tsx'),
-    './src/api/DescendantsStyles/ContextBasedStyles.stories.tsx': require('../src/api/DescendantsStyles/ContextBasedStyles.stories.tsx'),
+    // './src/api/createStyled/createStyled.stories.tsx': require('../src/api/createStyled/createStyled.stories.tsx'),
+    // './src/api/DescendantsStyles/ContextBasedStyles.stories.tsx': require('../src/api/DescendantsStyles/ContextBasedStyles.stories.tsx'),
     // "./src/api/MultipleProvder/MultipleProvider.stories.tsx": require("../src/api/MultipleProvder/MultipleProvider.stories.tsx"),
     // "./src/api/PlatformBasedStyles/PlatformBasedStyles.stories.tsx": require("../src/api/PlatformBasedStyles/PlatformBasedStyles.stories.tsx"),
     // "./src/api/PropertyResolver/PropertyResolver.stories.tsx": require("../src/api/PropertyResolver/PropertyResolver.stories.tsx"),
@@ -65,7 +66,7 @@ const getStories = () => {
     // "./src/api/Typescript/Typescript.stories.tsx": require("../src/api/Typescript/Typescript.stories.tsx"),
     // "./src/api/UtilityFunctions/UtilityFunctions.stories.tsx": require("../src/api/UtilityFunctions/UtilityFunctions.stories.tsx"),
     // "./src/api/Variants/BaseStyleVariantSizes.stories.tsx": require("../src/api/Variants/BaseStyleVariantSizes.stories.tsx"),
-    // "./src/plugins/AnimationPlugin/Animation.stories.tsx": require("../src/plugins/AnimationPlugin/Animation.stories.tsx"),
+    './src/plugins/AnimationPlugin/Animation.stories.tsx': require('../src/plugins/AnimationPlugin/Animation.stories.tsx'),
     // "./src/plugins/CSSVariables/CSSVariables.stories.tsx": require("../src/plugins/CSSVariables/CSSVariables.stories.tsx"),
     // "./src/plugins/FontsPlugin/FontsPlugin.stories.tsx": require("../src/plugins/FontsPlugin/FontsPlugin.stories.tsx"),
   };

example/storybook/.storybook/preview.js

@@ -35,7 +35,6 @@ export const parameters = {
           'Overriding Styles (sx)',
           'Overriding Styles (Utility Props)',
           'Property Resolver',
-          'createStyled()',
           'Props Passing',
           'Utility Functions',
           'AsForwarder',

example/storybook/babel.config.js

@@ -5,6 +5,7 @@ module.exports = function (api) {
   return {
     presets: ['babel-preset-expo'],
     plugins: [
+      'react-native-reanimated/plugin',
       process.env.NODE_ENV !== 'production'
         ? [
             'module-resolver',
@@ -15,14 +16,18 @@ module.exports = function (api) {
                   __dirname,
                   '../../packages/react/src'
                 ),
-                ['@gluestack-style/animation-plugin']: path.join(
+                ['@gluestack-style/legend-motion-animation-driver']: path.join(
                   __dirname,
-                  '../../packages/animation-plugin/src'
+                  '../../packages/animation-legend-motion-driver/src'
+                ),
+                ['@gluestack-style/moti-driver']: path.join(
+                  __dirname,
+                  '../../packages/animation-moti-animation-driver/src'
+                ),
+                ['@gluestack-style/animation-resolver']: path.join(
+                  __dirname,
+                  '../../packages/animation-resolver/src'
                 ),
-                // ['@gluestack-style/animation-plugin']: path.join(
-                //   __dirname,
-                //   '../../packages/animation-plugin/src'
-                // ),
                 // ['@dank-style/react']: path.join(
                 //   __dirname,
                 //   '../../packages/react/src'

example/storybook/package.json

@@ -23,7 +23,6 @@
   },
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
-    "@gluestack-style/animation-plugin": "latest",
     "@gluestack-style/react": "^0.2.11-alpha.0",
     "@gluestack-ui/actionsheet": "^0.2.16",
     "@gluestack-ui/alert-dialog": "^0.1.14",
@@ -53,8 +52,11 @@
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
     "lucide-react-native": "^0.236.0",
+    "moti": "^0.26.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
+    "react-native-gesture-handler": "^2.13.1",
+    "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "13.4.0",
     "react-native-web": "^0.19.7",
@@ -95,6 +97,9 @@
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
+    "@gluestack-style/legend-motion-animation-driver": "*",
+    "@gluestack-style/moti-animation-driver": "*",
+    "@gluestack-style/animation-resolver": "*",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",