(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 };