Merge pull request #2390 from gluestack/feat/drawer

Feat/drawer

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

@@ -78,7 +78,15 @@ export const parameters = {
             'Textarea',
           ],
           'Overlay',
-          ['AlertDialog', 'Menu', 'Modal', 'Popover', 'Portal', 'Tooltip'],
+          [
+            'AlertDialog',
+            'Drawer',
+            'Menu',
+            'Modal',
+            'Popover',
+            'Portal',
+            'Tooltip',
+          ],
           'Disclosure',
           ['Actionsheet', 'Accordion', 'BottomSheet'],
           'Media And Icons',

example/storybook-nativewind/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,33 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import Drawer from './Drawer';
+
+const DrawerMeta: ComponentMeta<typeof Drawer> = {
+  title: 'stories/Drawer',
+  component: Drawer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `A Drawer component provides a slide-in panel from any screen edge, with customizable size and anchor positions, featuring smooth animations for opening and closing. It adapts dynamically based on screen dimensions.`,
+  },
+  args: {
+    size: 'sm',
+    anchor: 'left',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'full'],
+    },
+    anchor: {
+      control: 'select',
+      options: ['left', 'right', 'top', 'bottom'],
+    },
+  },
+};
+
+export default DrawerMeta;
+
+export { Drawer };

example/storybook-nativewind/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Button, ButtonText } from '@/components/ui/button';
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerBody,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+} from '@/components/ui/drawer';
+import { Heading } from '@/components/ui/heading';
+import { Text } from '@/components/ui/text';
+
+const DrawerBasic = ({ ...props }: any) => {
+  const [showDrawer, setShowDrawer] = React.useState(false);
+
+  return (
+    <>
+      <Button
+        onPress={() => {
+          setShowDrawer(true);
+        }}
+      >
+        <ButtonText>Show Drawer</ButtonText>
+      </Button>
+      <Drawer
+        isOpen={showDrawer}
+        onClose={() => {
+          setShowDrawer(false);
+        }}
+        {...props}
+      >
+        <DrawerBackdrop />
+        <DrawerContent>
+          <DrawerHeader>
+            <Heading size="3xl">Heading</Heading>
+          </DrawerHeader>
+          <DrawerBody>
+            <Text size="2xl" className="text-typography-800">
+              This is a sentence.
+            </Text>
+          </DrawerBody>
+          <DrawerFooter>
+            <Button
+              onPress={() => {
+                setShowDrawer(false);
+              }}
+              className="flex-1"
+            >
+              <ButtonText>Button</ButtonText>
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerBasic;