diff --git a/apps/schedulely-docs/docs/Components/Header.md b/apps/schedulely-docs/docs/Components/Header.md index 224421cc..f6dcb585 100644 --- a/apps/schedulely-docs/docs/Components/Header.md +++ b/apps/schedulely-docs/docs/Components/Header.md @@ -1,93 +1,88 @@ ---- -title: Header Component ---- - -## Description - -The `HeaderComponent` defines how the large banner at the top of the calendar appears. It can include as many or -as few controls as you want. - -## Component Props - -```tsx -export interface HeaderProps { - month: string; - year: number; - isCurrentMonth: boolean; - onNextMonth: () => void; - onNextYear: () => void; - onPrevMonth: () => void; - onPrevYear: () => void; -} -``` - -| Property | Type | Description | -| -------------- | --------------- | ------------------------------------------------------------------------------------ | -| month | `string` | The current month the calendar is displaying | -| year | `number` | The current year the calendar is displaying | -| isCurrentMonth | `boolean` | True if the selected month is the same as the current month | -| onNextMonth | `() => void` | Calling this functions moves to the next month | -| onNextYear | `() => void` | Calling this functions moves to the same month of the next year | -| onPrevMonth | `() => void` | Calling this functions moves to the previous month | -| onPrevYear | `() => void` | Calling this functions moves to the same month of the previous year | -| componentSize | `ComponentSize` | Enum value that indicates the current size of the calendar (used for element sizing) | - -## Example (DefaultHeader) - -```tsx live noInline -// This demo is an example of what a custom component might look like if you wanted to override the default. -// If you are using the default components, you don't need to worry about this. - -const DefaultHeader = ({ - month, - year, - onNextMonth, - onNextYear, - onPrevMonth, - onPrevYear, - isCurrentMonth, - componentSize, -}) => ( -
- - - -
- - {month} - {year} - - {isCurrentMonth && ( -
- )} -
- - - -
-); - -render( -
- -
-); -``` +--- +title: Header Component +--- + +## Description + +The `HeaderComponent` defines how the large banner at the top of the calendar appears. It can include as many or +as few controls as you want. + +## Component Props + +```tsx +export interface HeaderProps { + month: string; + year: number; + isCurrentMonth: boolean; + onNextMonth: () => void; + onNextYear: () => void; + onPrevMonth: () => void; + onPrevYear: () => void; +} +``` + +| Property | Type | Description | +| -------------- | ------------ | ------------------------------------------------------------------- | +| month | `string` | The current month the calendar is displaying | +| year | `number` | The current year the calendar is displaying | +| isCurrentMonth | `boolean` | True if the selected month is the same as the current month | +| onNextMonth | `() => void` | Calling this functions moves to the next month | +| onNextYear | `() => void` | Calling this functions moves to the same month of the next year | +| onPrevMonth | `() => void` | Calling this functions moves to the previous month | +| onPrevYear | `() => void` | Calling this functions moves to the same month of the previous year | + +## Example (DefaultHeader) + +```tsx live noInline +// This demo is an example of what a custom component might look like if you wanted to override the default. +// If you are using the default components, you don't need to worry about this. + +const DefaultHeader = ({ + month, + year, + onNextMonth, + onNextYear, + onPrevMonth, + onPrevYear, + isCurrentMonth, +}) => ( +
+ + + +
+ + {month} - {year} + + {isCurrentMonth && ( +
+ )} +
+ + + +
+); + +render( +
+ +
+); +``` diff --git a/packages/Schedulely/__tests__/dateAdapters/dateAdapter.spec.ts b/packages/Schedulely/__tests__/dateAdapters/dateAdapter.spec.ts index 1ba2ce67..61191e14 100644 --- a/packages/Schedulely/__tests__/dateAdapters/dateAdapter.spec.ts +++ b/packages/Schedulely/__tests__/dateAdapters/dateAdapter.spec.ts @@ -1,4 +1,3 @@ -import { ComponentSize } from '@/types/ComponentSize'; import { DateTimeAdapter } from '@/types/index'; import { createDefaultAdapter } from '@/dateAdapters/date'; import { diff --git a/packages/Schedulely/__tests__/testHelpers/dateAdapter.testHelper.ts b/packages/Schedulely/__tests__/testHelpers/dateAdapter.testHelper.ts index 21da648b..1182b436 100644 --- a/packages/Schedulely/__tests__/testHelpers/dateAdapter.testHelper.ts +++ b/packages/Schedulely/__tests__/testHelpers/dateAdapter.testHelper.ts @@ -1,4 +1,3 @@ -import { ComponentSize } from '@/types/ComponentSize'; import chance from 'chance'; const DEFAULT_ITERATIONS = 30; diff --git a/packages/Schedulely/src/dateAdapters/date.ts b/packages/Schedulely/src/dateAdapters/date.ts index f087450f..91f66ab8 100644 --- a/packages/Schedulely/src/dateAdapters/date.ts +++ b/packages/Schedulely/src/dateAdapters/date.ts @@ -1,4 +1,3 @@ -import { ComponentSize } from '@/types/ComponentSize'; import { DateTimeAdapter } from '@/types'; /** diff --git a/packages/Schedulely/src/types/DateAdapter.ts b/packages/Schedulely/src/types/DateAdapter.ts index 132446fd..a0463f73 100644 --- a/packages/Schedulely/src/types/DateAdapter.ts +++ b/packages/Schedulely/src/types/DateAdapter.ts @@ -1,5 +1,3 @@ -import { ComponentSize } from '@/types'; - /** * Common interface for porting date libraries so they can be used with Schedulely */ diff --git a/packages/Schedulely/src/types/SchedulelyProps.ts b/packages/Schedulely/src/types/SchedulelyProps.ts index ce66a8bf..ad4ad546 100644 --- a/packages/Schedulely/src/types/SchedulelyProps.ts +++ b/packages/Schedulely/src/types/SchedulelyProps.ts @@ -1,7 +1,6 @@ import { ActionContextState, CalendarEvent, - ComponentSize, DateTimeAdapter, SchedulelyComponents, } from '@/types'; diff --git a/packages/Schedulely/src/types/components/HeaderComponent.ts b/packages/Schedulely/src/types/components/HeaderComponent.ts index 7b22457e..dadbc626 100644 --- a/packages/Schedulely/src/types/components/HeaderComponent.ts +++ b/packages/Schedulely/src/types/components/HeaderComponent.ts @@ -1,4 +1,3 @@ -import { ComponentSize } from '@/types'; import { JSXElementConstructor } from 'react'; /** Props used when creating a Header */