(WIP) feat/calendar

example/storybook-nativewind/babel.config.js

@@ -47,6 +47,10 @@ module.exports = function (api) {
               __dirname,
               '../../packages/unstyled/image-viewer/src'
             ),
+            '@gluestack-ui/calendar': path.resolve(
+              __dirname,
+              '../../packages/unstyled/calendar/src'
+            ),
             '@gluestack-ui/tooltip': path.resolve(
               __dirname,
               '../../packages/unstyled/tooltip/src'

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  Calendar,
+  CalendarContent,
+  CalendarDays,
+  CalendarWeek,
+  CalendarHeader,
+  CalendarHeaderNext,
+  CalendarHeaderPrev,
+  CalendarHeaderTitle,
+} from '@/components/ui/calendar';
+
+const CalendarBasic = ({ ...props }: any) => {
+  return (
+    <Calendar
+      {...props}
+      value={new Date()}
+      className="w-72"
+      minDate={new Date(2024, 5, 1)}
+      maxDate={new Date(2025, 1, 15)}
+    >
+      <CalendarHeader>
+        <CalendarHeaderPrev />
+        <CalendarHeaderTitle />
+        <CalendarHeaderNext />
+      </CalendarHeader>
+      <CalendarContent>
+        <CalendarWeek />
+        <CalendarDays />
+      </CalendarContent>
+    </Calendar>
+  );
+};
+
+CalendarBasic.description =
+  'This is a basic Calendar component example. The Calendar component lets you quickly and easily add status indicators to your interface for improved usability. They are designed to be attention-grabbing and quickly convey important information.';
+
+export default CalendarBasic;
+
+export { Calendar };

example/storybook-nativewind/src/components/Calendar/Calender.stories.tsx

@@ -0,0 +1,18 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import Calendar from './Calendar';
+
+const CalendarMeta: ComponentMeta<typeof Calendar> = {
+  title: 'stories/Calendar',
+  component: Calendar,
+  // @ts-ignore
+  metaInfo: {
+    componentDescription:
+      'A calendar component that allows users to select dates and navigate between months.',
+  },
+  args: {},
+  argTypes: {},
+};
+
+export default CalendarMeta;
+
+export { Calendar };