chore(react-datepicker): Create Calendar components and DatePicker co…

…mponent (microsoft#26325)

* add Calendar components and DatePicker component

* fix lint error

* missed one

packages/react-components/react-datepicker/.storybook/main.js

@@ -0,0 +1,14 @@
+const rootMain = require('../../../../.storybook/main');
+
+module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+  ...rootMain,
+  stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    // add your own webpack tweaks if needed
+
+    return localConfig;
+  },
+});

packages/react-components/react-datepicker/.storybook/preview.js

@@ -0,0 +1,7 @@
+import * as rootPreview from '../../../../.storybook/preview';
+
+/** @type {typeof rootPreview.decorators} */
+export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = { ...rootPreview.parameters };

packages/react-components/react-datepicker/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "",
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["static-assets", "environment", "storybook__addons"]
+  },
+  "include": ["../stories/**/*.stories.ts", "../stories/**/*.stories.tsx", "*.js"]
+}

packages/react-components/react-datepicker/etc/react-datepicker.api.md

@@ -4,6 +4,195 @@
 
 ```ts
 
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+// @public
+export const Calendar: ForwardRefComponent<CalendarProps>;
+
+// @public (undocumented)
+export const calendarClassNames: SlotClassNames<CalendarSlots>;
+
+// @public
+export const CalendarDay: ForwardRefComponent<CalendarDayProps>;
+
+// @public (undocumented)
+export const calendarDayClassNames: SlotClassNames<CalendarDaySlots>;
+
+// @public
+export type CalendarDayProps = ComponentProps<CalendarDaySlots> & {};
+
+// @public (undocumented)
+export type CalendarDaySlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type CalendarDayState = ComponentState<CalendarDaySlots>;
+
+// @public
+export const CalendarGrid: ForwardRefComponent<CalendarGridProps>;
+
+// @public (undocumented)
+export const calendarGridClassNames: SlotClassNames<CalendarGridSlots>;
+
+// @public
+export type CalendarGridProps = ComponentProps<CalendarGridSlots> & {};
+
+// @public (undocumented)
+export type CalendarGridSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type CalendarGridState = ComponentState<CalendarGridSlots>;
+
+// @public
+export const CalendarMonth: ForwardRefComponent<CalendarMonthProps>;
+
+// @public (undocumented)
+export const calendarMonthClassNames: SlotClassNames<CalendarMonthSlots>;
+
+// @public
+export type CalendarMonthProps = ComponentProps<CalendarMonthSlots> & {};
+
+// @public (undocumented)
+export type CalendarMonthSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type CalendarMonthState = ComponentState<CalendarMonthSlots>;
+
+// @public
+export const CalendarPicker: ForwardRefComponent<CalendarPickerProps>;
+
+// @public (undocumented)
+export const calendarPickerClassNames: SlotClassNames<CalendarPickerSlots>;
+
+// @public
+export type CalendarPickerProps = ComponentProps<CalendarPickerSlots> & {};
+
+// @public (undocumented)
+export type CalendarPickerSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type CalendarPickerState = ComponentState<CalendarPickerSlots>;
+
+// @public
+export type CalendarProps = ComponentProps<CalendarSlots> & {};
+
+// @public (undocumented)
+export type CalendarSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type CalendarState = ComponentState<CalendarSlots>;
+
+// @public
+export const CalendarYear: ForwardRefComponent<CalendarYearProps>;
+
+// @public (undocumented)
+export const calendarYearClassNames: SlotClassNames<CalendarYearSlots>;
+
+// @public
+export type CalendarYearProps = ComponentProps<CalendarYearSlots> & {};
+
+// @public (undocumented)
+export type CalendarYearSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type CalendarYearState = ComponentState<CalendarYearSlots>;
+
+// @public
+export const DatePicker: ForwardRefComponent<DatePickerProps>;
+
+// @public (undocumented)
+export const datePickerClassNames: SlotClassNames<DatePickerSlots>;
+
+// @public
+export type DatePickerProps = ComponentProps<DatePickerSlots> & {};
+
+// @public (undocumented)
+export type DatePickerSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type DatePickerState = ComponentState<DatePickerSlots>;
+
+// @public
+export const renderCalendar_unstable: (state: CalendarState) => JSX.Element;
+
+// @public
+export const renderCalendarDay_unstable: (state: CalendarDayState) => JSX.Element;
+
+// @public
+export const renderCalendarGrid_unstable: (state: CalendarGridState) => JSX.Element;
+
+// @public
+export const renderCalendarMonth_unstable: (state: CalendarMonthState) => JSX.Element;
+
+// @public
+export const renderCalendarPicker_unstable: (state: CalendarPickerState) => JSX.Element;
+
+// @public
+export const renderCalendarYear_unstable: (state: CalendarYearState) => JSX.Element;
+
+// @public
+export const renderDatePicker_unstable: (state: DatePickerState) => JSX.Element;
+
+// @public
+export const useCalendar_unstable: (props: CalendarProps, ref: React_2.Ref<HTMLElement>) => CalendarState;
+
+// @public
+export const useCalendarDay_unstable: (props: CalendarDayProps, ref: React_2.Ref<HTMLElement>) => CalendarDayState;
+
+// @public
+export const useCalendarDayStyles_unstable: (state: CalendarDayState) => CalendarDayState;
+
+// @public
+export const useCalendarGrid_unstable: (props: CalendarGridProps, ref: React_2.Ref<HTMLElement>) => CalendarGridState;
+
+// @public
+export const useCalendarGridStyles_unstable: (state: CalendarGridState) => CalendarGridState;
+
+// @public
+export const useCalendarMonth_unstable: (props: CalendarMonthProps, ref: React_2.Ref<HTMLElement>) => CalendarMonthState;
+
+// @public
+export const useCalendarMonthStyles_unstable: (state: CalendarMonthState) => CalendarMonthState;
+
+// @public
+export const useCalendarPicker_unstable: (props: CalendarPickerProps, ref: React_2.Ref<HTMLElement>) => CalendarPickerState;
+
+// @public
+export const useCalendarPickerStyles_unstable: (state: CalendarPickerState) => CalendarPickerState;
+
+// @public
+export const useCalendarStyles_unstable: (state: CalendarState) => CalendarState;
+
+// @public
+export const useCalendarYear_unstable: (props: CalendarYearProps, ref: React_2.Ref<HTMLElement>) => CalendarYearState;
+
+// @public
+export const useCalendarYearStyles_unstable: (state: CalendarYearState) => CalendarYearState;
+
+// @public
+export const useDatePicker_unstable: (props: DatePickerProps, ref: React_2.Ref<HTMLElement>) => DatePickerState;
+
+// @public
+export const useDatePickerStyles_unstable: (state: DatePickerState) => DatePickerState;
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-components/react-datepicker/package.json

@@ -20,7 +20,9 @@
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",
     "type-check": "tsc -b tsconfig.json",
-    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor",
+    "storybook": "start-storybook",
+    "start": "yarn storybook"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

packages/react-components/react-datepicker/src/Calendar.ts

@@ -0,0 +1 @@
+export * from './components/Calendar/index';

packages/react-components/react-datepicker/src/CalendarDay.ts

@@ -0,0 +1 @@
+export * from './components/CalendarDay/index';

packages/react-components/react-datepicker/src/CalendarGrid.ts

@@ -0,0 +1 @@
+export * from './components/CalendarGrid/index';

packages/react-components/react-datepicker/src/CalendarMonth.ts

@@ -0,0 +1 @@
+export * from './components/CalendarMonth/index';

packages/react-components/react-datepicker/src/CalendarPicker.ts

@@ -0,0 +1 @@
+export * from './components/CalendarPicker/index';

packages/react-components/react-datepicker/src/CalendarYear.ts

@@ -0,0 +1 @@
+export * from './components/CalendarYear/index';

packages/react-components/react-datepicker/src/DatePicker.ts

@@ -0,0 +1 @@
+export * from './components/DatePicker/index';

packages/react-components/react-datepicker/src/components/Calendar/Calendar.test.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Calendar } from './Calendar';
+import { isConformant } from '../../testing/isConformant';
+
+describe('Calendar', () => {
+  isConformant({
+    Component: Calendar,
+    displayName: 'Calendar',
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<Calendar>Default Calendar</Calendar>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components/react-datepicker/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useCalendar_unstable } from './useCalendar';
+import { renderCalendar_unstable } from './renderCalendar';
+import { useCalendarStyles_unstable } from './useCalendarStyles';
+import type { CalendarProps } from './Calendar.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * Calendar component - TODO: add more docs
+ */
+export const Calendar: ForwardRefComponent<CalendarProps> = React.forwardRef((props, ref) => {
+  const state = useCalendar_unstable(props, ref);
+
+  useCalendarStyles_unstable(state);
+  return renderCalendar_unstable(state);
+});
+
+Calendar.displayName = 'Calendar';

packages/react-components/react-datepicker/src/components/Calendar/Calendar.types.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type CalendarSlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * Calendar Props
+ */
+export type CalendarProps = ComponentProps<CalendarSlots> & {};
+
+/**
+ * State used in rendering Calendar
+ */
+export type CalendarState = ComponentState<CalendarSlots>;
+// & Required<Pick<CalendarProps, 'propName'>>

packages/react-components/react-datepicker/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Calendar renders a default state 1`] = `
+<div>
+  <div
+    class="fui-Calendar"
+  >
+    Default Calendar
+  </div>
+</div>
+`;

packages/react-components/react-datepicker/src/components/Calendar/index.ts

@@ -0,0 +1,5 @@
+export * from './Calendar';
+export * from './Calendar.types';
+export * from './renderCalendar';
+export * from './useCalendar';
+export * from './useCalendarStyles';

packages/react-components/react-datepicker/src/components/Calendar/renderCalendar.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { CalendarState, CalendarSlots } from './Calendar.types';
+
+/**
+ * Render the final JSX of Calendar
+ */
+export const renderCalendar_unstable = (state: CalendarState) => {
+  const { slots, slotProps } = getSlots<CalendarSlots>(state);
+
+  // TODO Add additional slots in the appropriate place
+  return <slots.root {...slotProps.root} />;
+};

packages/react-components/react-datepicker/src/components/Calendar/useCalendar.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { CalendarProps, CalendarState } from './Calendar.types';
+
+/**
+ * Create the state required to render Calendar.
+ *
+ * The returned state can be modified with hooks such as useCalendarStyles_unstable,
+ * before being passed to renderCalendar_unstable.
+ *
+ * @param props - props from this instance of Calendar
+ * @param ref - reference to root HTMLElement of Calendar
+ */
+export const useCalendar_unstable = (props: CalendarProps, ref: React.Ref<HTMLElement>): CalendarState => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      // TODO add each slot's element type or component
+      root: 'div',
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+    }),
+  };
+};