Merge pull request #2173 from gluestack/fix/components-nw

Fix/components nw
gluestack · May 21, 2024 · 27e15e6 · 27e15e6
2 parents 74f67bd + d411111
commit 27e15e6
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 7 deletions.
diff --git a/example/storybook-nativewind/src/components/Modal/Modal.tsx b/example/storybook-nativewind/src/components/Modal/Modal.tsx
@@ -49,7 +49,7 @@ const ModalBasic = () => {
               variant="outline"
               size="sm"
               action="secondary"
-              mr="$3"
+              className="mr-3"
               onPress={() => {
                 setShowModal(false);
               }}
@@ -59,7 +59,7 @@ const ModalBasic = () => {
             <Button
               size="sm"
               action="positive"
-              borderWidth="$0"
+              className="border-0"
               onPress={() => {
                 setShowModal(false);
               }}

diff --git a/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx
@@ -75,7 +75,7 @@ const alertDialogCloseButtonStyle = tva({
 });
 
 const alertDialogHeaderStyle = tva({
-  base: 'p-4 justify-between items-center flex-row',
+  base: 'p-4 pb-0 justify-between items-center flex-row',
 });
 
 const alertDialogFooterStyle = tva({

diff --git a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx
@@ -81,7 +81,14 @@ cssInterop(UICheckbox.Icon, {
 });
 
 const checkboxStyle = tva({
-  base: 'group/checkbox flex-row items-center justify-start gap-2 web:cursor-pointer data-[disabled=true]:cursor-not-allowed',
+  base: 'group/checkbox flex-row items-center justify-start web:cursor-pointer data-[disabled=true]:cursor-not-allowed',
+  variants: {
+    size: {
+      lg: 'gap-2',
+      md: 'gap-2',
+      sm: 'gap-1.5',
+    },
+  },
 });
 
 const checkboxIndicatorStyle = tva({
@@ -135,6 +142,7 @@ const Checkbox = React.forwardRef(
       <UICheckbox
         className={checkboxStyle({
           class: className,
+          size,
         })}
         {...props}
         context={{

diff --git a/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/menu/index.tsx
@@ -8,11 +8,11 @@ import { Motion, AnimatePresence } from '@legendapp/motion';
 import type { VariantProps } from '@gluestack-ui/nativewind-utils';
 
 const menuStyle = tva({
-  base: 'min-w-[200px] py-2 rounded-sm bg-background-0',
+  base: 'rounded bg-background-0 overflow-hidden border border-outline-200 p-1',
 });
 
 const menuItemStyle = tva({
-  base: 'p-3 flex-row items-center data-[hover=true]:bg-background-100 data-[active=true]:bg-background-200 data-[focus=true]:bg-background-100 data-[focus=true]:web:outline-noe data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer  data-[disabled=true]:data-[focus=true]:bg-transparent ',
+  base: 'min-w-[200px] p-3 flex-row items-center data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100 data-[focus=true]:bg-background-50 data-[focus=true]:web:outline-none data-[focus=true]:web:outline-0 data-[disabled=true]:opacity-40 data-[disabled=true]:web:cursor-not-allowed data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[focus-visible=true]:web:cursor-pointer data-[disabled=true]:data-[focus=true]:bg-transparent rounded-sm',
 });
 
 const menuBackdropStyle = tva({

diff --git a/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx
@@ -69,7 +69,7 @@ const radioIconStyle = tva({
 
   parentVariants: {
     size: {
-      sm: 'h-2 w-2',
+      sm: 'h-[9px] w-[9px]',
       md: 'h-3 w-3',
       lg: 'h-4 w-4',
     },

diff --git a/example/storybook-v7/.ondevice/storybook.requires.ts b/example/storybook-v7/.ondevice/storybook.requires.ts
@@ -0,0 +1,63 @@
+/* do not change this file, it is auto generated by storybook. */
+
+import {
+  start,
+  prepareStories,
+  getProjectAnnotations,
+} from '@storybook/react-native';
+
+import '@storybook/addon-ondevice-notes/register';
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-backgrounds/register';
+import '@storybook/addon-ondevice-actions/register';
+
+const normalizedStories = [
+  {
+    titlePrefix: '',
+    directory: '../storybook-nativewind/src/components',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      '../../storybook-nativewind/src/components',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+];
+
+declare global {
+  var view: ReturnType<typeof start>;
+  var STORIES: typeof normalizedStories;
+}
+
+const annotations = [
+  require('./preview'),
+  require('@storybook/react-native/dist/preview'),
+  require('@storybook/addon-actions/preview'),
+];
+
+global.STORIES = normalizedStories;
+
+// @ts-ignore
+module?.hot?.accept?.();
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+  });
+} else {
+  const { importMap } = prepareStories({ storyEntries: normalizedStories });
+
+  global.view._preview.onStoriesChanged({
+    importFn: async (importPath: string) => importMap[importPath],
+  });
+
+  global.view._preview.onGetProjectAnnotationsChanged({
+    getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+  });
+}
+
+export const view = global.view;