add date picker and calendar

.changeset/bright-hornets-chew.md

@@ -0,0 +1,5 @@
+---
+'@crossed/ui': minor
+---
+
+add calendar

.changeset/khaki-seas-complain.md

@@ -0,0 +1,5 @@
+---
+'@crossed/ui': minor
+---
+
+add date picker

apps/crossed-native/App.tsx

@@ -22,6 +22,8 @@ import SheetScreen from './src/app/sheet';
 import TooltipScreen from './src/app/tooltip';
 import { CrossedUIProvider } from '@crossed/ui';
 import ModalScreen from './src/app/modal.tsx';
+import CalendarScreen from './src/app/calendar.tsx';
+import DateInputScreen from './src/app/dateInput.tsx';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -44,6 +46,8 @@ function App(): React.JSX.Element {
             <Stack.Screen name="/select" component={SelectScreen} />
             <Stack.Screen name="/tooltip" component={TooltipScreen} />
             <Stack.Screen name="/modal" component={ModalScreen} />
+            <Stack.Screen name="/calendar" component={CalendarScreen} />
+            <Stack.Screen name="/dateInput" component={DateInputScreen} />
           </Stack.Navigator>
         </NavigationContainer>
       </SafeAreaView>

apps/crossed-native/babel.config.js

@@ -1,4 +1,15 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
-  plugins: ["react-native-reanimated/plugin"]
+  plugins: [
+    'react-native-reanimated/plugin',
+    [
+      'module-resolver',
+      {
+        root: ['./src'],
+        alias: {
+          'react-native-gesture-handler': './node_modules/react-native-gesture-handler',
+        },
+      },
+    ],
+  ],
 };

apps/crossed-native/package.json

@@ -17,16 +17,18 @@
     "@crossed/ui": "6.4.8",
     "@crossed/unicons": "workspace:*",
     "@gorhom/portal": "^1.0.14",
+    "@react-native-community/cli": "^15.1.3",
     "@react-native/gradle-plugin": "^0.75.3",
     "@react-navigation/native": "^6.0.2",
     "@react-navigation/native-stack": "^6.11.0",
     "@rnx-kit/metro-config": "^1.3.3",
     "@rnx-kit/metro-resolver-symlinks": "^0.1.22",
+    "babel-plugin-module-resolver": "^5.0.2",
     "react": "18.3.1",
     "react-native": "=0.75.2",
     "react-native-gesture-handler": "~2.21.2",
     "react-native-reanimated": "^3.10.1",
-    "react-native-safe-area-context": "4.10.8",
+    "react-native-safe-area-context": "5.2.0",
     "react-native-screens": "^3.34.0",
     "react-native-svg": "^15.1.0"
   },

apps/crossed-native/src/app/calendar.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+import { YBox, Calendar } from '@crossed/ui';
+import { createStyles } from '@crossed/styled';
+import { FlatList } from 'react-native';
+import { Card } from '@crossed/ui';
+
+const styles = createStyles(() => ({
+  scrollview: { base: { paddingHorizontal: 10, paddingVertical: 10 } },
+  between: {
+    base: {
+      width: '100%',
+      justifyContent: 'space-between',
+    },
+  },
+  end: { base: { alignSelf: 'flex-end', flexDirection: 'row' } },
+}));
+
+const Example = () => {
+  return (
+    <Card>
+      <Calendar />
+    </Card>
+  );
+};
+
+export default function CalendarScreen() {
+  return (
+    <FlatList
+      contentContainerStyle={styles.scrollview.rnw().style}
+      data={[]}
+      ListHeaderComponent={
+        <YBox alignItems="stretch" space="sm">
+          <Example />
+        </YBox>
+      }
+      renderItem={() => null}
+    />
+  );
+}

apps/crossed-native/src/app/dateInput.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+import { YBox, DateInput } from '@crossed/ui';
+import { createStyles } from '@crossed/styled';
+import { FlatList } from 'react-native';
+
+const styles = createStyles(() => ({
+  scrollview: { base: { paddingHorizontal: 10, paddingVertical: 10 } },
+  between: {
+    base: {
+      width: '100%',
+      justifyContent: 'space-between',
+    },
+  },
+  end: { base: { alignSelf: 'flex-end', flexDirection: 'row' } },
+}));
+
+const Example = () => {
+  return <DateInput picker />;
+};
+
+export default function DateInputScreen() {
+  return (
+    <FlatList
+      contentContainerStyle={styles.scrollview.rnw().style}
+      data={[]}
+      ListHeaderComponent={
+        <YBox alignItems="stretch" space="sm">
+          <Example />
+        </YBox>
+      }
+      renderItem={() => null}
+    />
+  );
+}

apps/crossed-native/src/app/index.tsx

@@ -40,6 +40,8 @@ const menus: Menu[] = [
   { to: '/sheet', title: 'Sheet' },
   { to: '/tooltip', title: 'Tooltip' },
   { to: '/modal', title: 'Modal' },
+  { to: '/calendar', title: 'Calendar' },
+  { to: '/dateInput', title: 'DateInput' },
 ] as const;
 
 export default function TabOneScreen({ navigation }: IndexScreenProps) {

apps/crossed-native/src/routes.ts

@@ -20,6 +20,8 @@ export type RootStackParamList = {
   '/sheet': undefined;
   '/tooltip': undefined;
   '/modal': undefined;
+  '/calendar': undefined;
+  '/dateInput': undefined;
 };
 
 export type AccordionScreenProps = NativeStackScreenProps<

apps/doc/src/@crossed-ui/Forms/Calendar.stories.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Calendar } from '@crossed/ui/src/forms/Calendar';
+import { Card } from '@crossed/ui/src/display/Card';
+
+const date = new Date();
+const first = new Date(date);
+const last = new Date(date);
+first.setFullYear(date.getFullYear() - 50);
+last.setFullYear(date.getFullYear() + 50);
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Calendar> = {
+  component: Calendar,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    locale: { control: 'radio', options: ['en', 'fr', 'default'] },
+  },
+  args: {
+    firstDayOfWeek: 1,
+    minDate: first,
+    maxDate: last,
+    monthsToDisplay: 1,
+    onDateSelected: fn(),
+    // selectedDate: date,
+    locale: 'default',
+  },
+  render(e) {
+    return (
+      <Card>
+        <Calendar {...e} />
+      </Card>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

apps/doc/src/@crossed-ui/Forms/DateInput.stories.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Paymium.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root of this projects source tree.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { DateInput } from '@crossed/ui/src/forms/DateInput';
+// import { Text } from '@crossed/ui';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof DateInput> = {
+  component: DateInput,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    locale: { control: 'select', options: ['default', 'en', 'fr'] },
+    format: { control: 'text', value: 'yyyy-mm-dd' },
+  },
+  args: { locale: 'default', onChange: fn() },
+};
+
+export default meta;
+type Story = StoryObj<typeof DateInput>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = { args: {} };
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: { day: 'day (dd)', month: 'month (mm)', year: 'year (yyyy)' },
+  },
+};
+export const WithPicker: Story = { args: { picker: true } };
+export const WithValue: Story = { args: { value: new Date() } };
+export const OnlyYearMonth: Story = { args: { format: 'yyyy-mm' } };