{format(date, 'MMMM yyyy')}

+ {effectiveMonthDayOfWeekHeaderStyle !== 'none' && ( +

+ {Array.from({ length: 7 }, (_, i) => { + const dayDate = addDays(start, i); + const dayOfWeek = dayDate.getDay(); + const isWeekend = weekendDays.includes(dayOfWeek); + + return ( +

+ {format(dayDate, 'EEEEE')} +

+ ); + })} +

+ )} +

+ {weeks} +

; + } + return allDays[i]; + }); + + return ( +

+ {truncatedDays} +

+ ); + } + + return ( +

+ {allDays} +

+ ); +}; diff --git a/src/components/calendar/Week/types.ts b/src/components/calendar/Week/types.ts new file mode 100644 index 0000000..9793095 --- /dev/null +++ b/src/components/calendar/Week/types.ts @@ -0,0 +1,17 @@ +import { DayViewType, DayVariation } from '../../../types/calendar'; + +export interface WeekContainerProps { + viewType: DayViewType; + isOtherMonth?: boolean; + variations?: DayVariation[]; +} + +export interface DayHeaderProps { + viewType: DayViewType; + variations?: DayVariation[]; +} + +export interface DayNumberProps { + viewType: DayViewType; + variations?: DayVariation[]; +} diff --git a/src/components/calendar/Year/Year.module.scss b/src/components/calendar/Year/Year.module.scss new file mode 100644 index 0000000..8308f1c --- /dev/null +++ b/src/components/calendar/Year/Year.module.scss @@ -0,0 +1,41 @@ +@use '../shared/variables' as shared; +@use '../shared/colors' as colors; + +.Year { + &__Wrapper { + display: flex; + flex-direction: column; + gap: shared.$spacing-unit-quadruple; + padding: shared.$spacing-unit-double; + width: 100%; + max-width: 1400px; + margin: 0 auto; + + @media (min-width: shared.$breakpoint-tablet) { + padding: shared.$spacing-unit-quadruple; + } + } + + &__Title { + font-size: 2rem; + color: colors.$content-normal-text; // replaced shared.$content-color + margin: 0 0 shared.$spacing-unit-quadruple; + text-align: center; + font-weight: 700; + letter-spacing: 0.1em; + } + + &__MonthsGrid { + display: grid; + gap: shared.$spacing-unit-quadruple; + width: 100%; + + @media (min-width: shared.$breakpoint-tablet) { + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: 1200px) { + grid-template-columns: repeat(3, 1fr); + } + } +} diff --git a/src/components/calendar/Year/index.tsx b/src/components/calendar/Year/index.tsx new file mode 100644 index 0000000..5da6248 --- /dev/null +++ b/src/components/calendar/Year/index.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { YearProps } from '../../../types/calendar'; +import { Month } from '../Month'; +import styles from './Year.module.scss'; + +export const Year: React.FC = ({ + year, + dayHeaderStyle, + monthDayOfWeekHeaderStyle, + monthCutoff, + weekendDays, + dateRange, + onDateSelect, + onDateHover, + size = 'l', + fontProportion = 100, + magnify = false +}) => { + const months = Array.from({ length: 12 }, (_, index) => { + const monthDate = new Date(year, index, 1); + return ( + + ); + }); + + return ( +

{year}

+ {months} +

+ ); +}; diff --git a/src/components/calendar/shared/_colors.scss b/src/components/calendar/shared/_colors.scss new file mode 100644 index 0000000..27b494e --- /dev/null +++ b/src/components/calendar/shared/_colors.scss @@ -0,0 +1,189 @@ +@use "sass:color"; + +// ----------------------------------------------------------------------------- +// BORDER COLORS +// ----------------------------------------------------------------------------- +$border-color: #e5e5e5; +$border-color-selecting: #d1d1d1; +$border-color-in-range: $border-color; + +// ----------------------------------------------------------------------------- +// FOCUS COLOR +// ----------------------------------------------------------------------------- +$focus-blue: #2196f3; + +// ----------------------------------------------------------------------------- +// HEADER BASE COLORS +// ----------------------------------------------------------------------------- +$header-normal-bg: #2c2c2c; // Anthracite +$header-normal-text: #ffffff; + +$header-selected-bg: #f321c9; // Blue +$header-selected-text: #ffffff; + +$header-selecting-bg: #404040; // Lighter anthracite +$header-selecting-text: #ffffff; + +// Hover variants for header +$header-normal-hover-bg: #383838; +$header-selected-hover-bg: #1976d2; +$header-selecting-hover-bg: #4a4a4a; + +// ----------------------------------------------------------------------------- +// CONTENT BASE COLORS +// ----------------------------------------------------------------------------- +$content-normal-bg: #ffffff; +$content-normal-text: #333333; + +$content-selected-bg: #2196f3; +$content-selected-text: #ffffff; + +$content-selecting-bg: #f5f5f5; +$content-selecting-text: #333333; + +// Hover variants for content +$content-normal-hover-bg: #f8f8f8; +$content-selected-hover-bg: #1976d2; +$content-selecting-hover-bg: #eeeeee; + +$content-selecting-bg: color.mix($content-normal-bg, $content-selected-bg, 50%); +$content-selecting-text: color.mix($content-normal-text, $content-selected-text, 50%); + +// Hover variants for content. +$content-normal-hover-bg: color.adjust($content-normal-bg, $lightness: -5%); +$content-selected-hover-bg: color.adjust($content-selected-bg, $lightness: 5%); +$content-selecting-hover-bg: color.adjust($content-selecting-bg, $lightness: -5%); + +// ---------------------------------- + +// Colors +$day-color-primary: #2196f3; // day default mode selected sate container +$day-color-primary-dark: #1976d2; // day default mode selected sate header +$day-color-background: white; // day default mode default state container background +$day-color-border: #f0f0f0; // any day container border +$day-color-text: #2c2c2c; // day default mode default state container text color +$day-color-text-light: #757575; // day greyed mode default state text color +$day-color-hover: #f5f5f5; // day default mode default state hover container +$day-color-greyed: #bcbcbc; // day greyed mode default state container + +// Range colors +$day-color-selected: #e3f2fd; // day default mode selected state container +$day-color-selected-hover: #bbdefb; // day default mode selected state hover container +$day-color-selecting: #f5f5f5; // day default mode selecting state container +$day-color-selecting-border: #e0e0e0; // day default|greyed mode selecting container border +$day-color-selecting-hover: #eeeeee; + +// Header colors +$day-color-header: #2c2c2c; // day default mode default state header +$day-color-header-text: white; // day default mode default state header text +$day-color-header-greyed: #acacac; // day greyed mode default state header +$day-color-header-greyed-text: #101010; // day default mode default state header text + +// Base Colors +$day-border-color: $day-color-border; +$day-header-defaultmode-defaultstate-background-color: $day-color-header; +$day-header-defaultmode-defaultstate-color: $day-color-header-text; + +$day-content-defaultmode-defaultstate-background-color: $day-color-background; +$day-content-defaultmode-defaultstate-color: $day-color-text; + +$day-content-greyedmode-defaultstate-background-color: color.adjust($day-color-greyed, $lightness: 25%); // Much lighter grey +$day-content-greyedmode-defaultstate-color: $day-color-text-light; + +$day-header-greyedmode-defaultstate-background-color: $day-color-header-greyed; +$day-header-greyedmode-defaultstate-color: $day-color-header-greyed-text; + +// Selecting State Colors +$day-content-defaultmode-selectingstate-midrange-background-color: $day-color-selecting; +$day-content-defaultmode-selectingstate-midrange-color: $day-color-text; +$day-content-defaultmode-selectingstate-midrange-hover-background-color: $day-color-selecting-hover; + +$day-content-greyedmode-selectingstate-midrange-background-color: color.mix($day-color-selecting, $day-color-greyed, 80%); +$day-content-greyedmode-selectingstate-midrange-color: $day-color-text-light; + +$day-header-defaultmode-selectingstate-midrange-background-color: $day-color-header; +$day-header-defaultmode-selectingstate-midrange-color: $day-color-header-text; + +$day-header-greyedmode-selectingstate-midrange-background-color: color.mix($day-color-header-greyed, $day-color-selecting, 80%); +$day-header-greyedmode-selectingstate-midrange-color: $day-color-header-greyed-text; + +// Selected State Colors +$day-content-defaultmode-selectedstate-midrange-background-color: $day-color-selected; +$day-content-defaultmode-selectedstate-midrange-color: $day-color-text; + +$day-content-greyedmode-selectedstate-midrange-background-color: color.mix($day-color-selected, $day-color-greyed, 80%); +$day-content-greyedmode-selectedstate-midrange-color: $day-color-text-light; + +$day-header-defaultmode-selectedstate-midrange-background-color: $day-color-primary-dark; +$day-header-defaultmode-selectedstate-midrange-color: $day-color-header-text; + +$day-header-greyedmode-selectedstate-midrange-background-color: color.mix($day-color-primary-dark, $day-color-greyed, 80%); +$day-header-greyedmode-selectedstate-midrange-color: $day-color-header-text; // Changed to white for visibility + +// Range Start Colors +$day-content-defaultmode-selectedstate-rangestart-background-color: $day-color-primary; +$day-content-defaultmode-selectedstate-rangestart-color: $day-color-header-text; // White text +$day-content-defaultmode-selectedstate-rangestart-hover-background-color: $day-color-selected-hover; + +$day-content-greyedmode-selectedstate-rangestart-background-color: color.mix($day-color-primary, $day-color-greyed, 80%); +$day-content-greyedmode-selectedstate-rangestart-color: $day-color-header-text; // White text +$day-content-greyedmode-selectedstate-rangestart-hover-background-color: color.mix($day-color-selected-hover, $day-color-greyed, 80%); + +$day-header-defaultmode-selectedstate-rangestart-background-color: $day-color-primary-dark; +$day-header-defaultmode-selectedstate-rangestart-color: $day-color-header-text; +$day-header-defaultmode-selectedstate-rangestart-hover-background-color: color.adjust($day-color-primary-dark, $lightness: 10%); + +$day-header-greyedmode-selectedstate-rangestart-background-color: color.mix($day-color-primary-dark, $day-color-greyed, 80%); +$day-header-greyedmode-selectedstate-rangestart-color: $day-color-header-text; // White text +$day-header-greyedmode-selectedstate-rangestart-hover-background-color: color.adjust(color.mix($day-color-primary-dark, $day-color-greyed, 80%), $lightness: 10%); + +// Range End Colors +$day-content-defaultmode-selectedstate-rangeend-background-color: $day-color-primary; +$day-content-defaultmode-selectedstate-rangeend-color: $day-color-header-text; // White text +$day-content-defaultmode-selectedstate-rangeend-hover-background-color: $day-color-selected-hover; + +$day-content-greyedmode-selectedstate-rangeend-background-color: color.mix($day-color-primary, $day-color-greyed, 80%); +$day-content-greyedmode-selectedstate-rangeend-color: $day-color-header-text; // White text +$day-content-greyedmode-selectedstate-rangeend-hover-background-color: color.mix($day-color-selected-hover, $day-color-greyed, 80%); + +$day-header-defaultmode-selectedstate-rangeend-background-color: $day-color-primary-dark; +$day-header-defaultmode-selectedstate-rangeend-color: $day-color-header-text; +$day-header-defaultmode-selectedstate-rangeend-hover-background-color: color.adjust($day-color-primary-dark, $lightness: 10%); + +$day-header-greyedmode-selectedstate-rangeend-background-color: color.mix($day-color-primary-dark, $day-color-greyed, 80%); +$day-header-greyedmode-selectedstate-rangeend-color: $day-color-header-text; // White text +$day-header-greyedmode-selectedstate-rangeend-hover-background-color: color.adjust(color.mix($day-color-primary-dark, $day-color-greyed, 80%), $lightness: 10%); + +// Selecting State for Range +$day-content-defaultmode-selectingstate-rangestart-background-color: $day-color-selecting; +$day-content-defaultmode-selectingstate-rangestart-color: $day-color-text; +$day-content-defaultmode-selectingstate-rangestart-hover-background-color: $day-color-selecting-hover; + +$day-content-greyedmode-selectingstate-rangestart-background-color: color.mix($day-color-selecting, $day-color-greyed, 80%); +$day-content-greyedmode-selectingstate-rangestart-color: $day-color-text-light; +$day-content-greyedmode-selectingstate-rangestart-hover-background-color: color.mix($day-color-selecting-hover, $day-color-greyed, 80%); + +$day-header-defaultmode-selectingstate-rangestart-background-color: $day-color-header; +$day-header-defaultmode-selectingstate-rangestart-color: $day-color-header-text; +$day-header-defaultmode-selectingstate-rangestart-hover-background-color: color.adjust($day-color-header, $lightness: 10%); + +$day-header-greyedmode-selectingstate-rangestart-background-color: color.mix($day-color-header-greyed, $day-color-selecting, 80%); +$day-header-greyedmode-selectingstate-rangestart-color: $day-color-header-greyed-text; +$day-header-greyedmode-selectingstate-rangestart-hover-background-color: color.adjust(color.mix($day-color-header-greyed, $day-color-selecting, 80%), $lightness: 10%); + +// Selecting Range End +$day-content-defaultmode-selectingstate-rangeend-background-color: $day-color-selecting; +$day-content-defaultmode-selectingstate-rangeend-color: $day-color-text; +$day-content-defaultmode-selectingstate-rangeend-hover-background-color: $day-color-selecting-hover; + +$day-content-greyedmode-selectingstate-rangeend-background-color: color.mix($day-color-selecting, $day-color-greyed, 80%); +$day-content-greyedmode-selectingstate-rangeend-color: $day-color-text-light; +$day-content-greyedmode-selectingstate-rangeend-hover-background-color: color.mix($day-color-selecting-hover, $day-color-greyed, 80%); + +$day-header-defaultmode-selectingstate-rangeend-background-color: $day-color-header; +$day-header-defaultmode-selectingstate-rangeend-color: $day-color-header-text; +$day-header-defaultmode-selectingstate-rangeend-hover-background-color: color.adjust($day-color-header, $lightness: 10%); + +$day-header-greyedmode-selectingstate-rangeend-background-color: color.mix($day-color-header-greyed, $day-color-selecting, 80%); +$day-header-greyedmode-selectingstate-rangeend-color: $day-color-header-greyed-text; +$day-header-greyedmode-selectingstate-rangeend-hover-background-color: color.adjust(color.mix($day-color-header-greyed, $day-color-selecting, 80%), $lightness: 10%); diff --git a/src/components/calendar/shared/_variables.scss b/src/components/calendar/shared/_variables.scss new file mode 100644 index 0000000..c926564 --- /dev/null +++ b/src/components/calendar/shared/_variables.scss @@ -0,0 +1,26 @@ +// Base units +$base-unit: 2px; +$border-size: 1px; + +// Spacing derived from base unit +$spacing-unit: $base-unit; +$spacing-unit-double: $spacing-unit * 2; +$spacing-unit-quadruple: $spacing-unit * 4; + +// Week wrapper padding +$week-wrapper-padding: $spacing-unit; +$week-wrapper-padding-desktop: $spacing-unit-double; + +// Border radiuses +$border-radius-sm: 6px; +$border-radius: 8px; + +// Shadows (importing the new focus color from colors.scss) +@use "sass:color"; +@use "colors" as colors; +$shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15); +$shadow-month: 0 2px 4px rgba(0, 0, 0, 0.15); +$shadow-focus: 0 0 0 2px colors.$focus-blue; + +// Breakpoints +$breakpoint-tablet: 768px; diff --git a/src/components/calendar/utils.ts b/src/components/calendar/utils.ts new file mode 100644 index 0000000..319d32a --- /dev/null +++ b/src/components/calendar/utils.ts @@ -0,0 +1,51 @@ +import { HeaderStyle } from '../../types/calendar'; +import { format } from 'date-fns'; + +export const getHeightByHeaderStyle = (headerStyle: HeaderStyle) => { + const baseHeights: Record = { + expanded: ['100px', '140px'], + compacted: ['80px', '100px'], + tiny: ['60px', '80px'], + none: ['50px', '60px'] + }; + + const [mobile, desktop] = baseHeights[headerStyle]; + return ` + height: ${mobile}; + @media (min-width: 768px) { + height: ${desktop}; + } + `; +}; + +export const getMinWidthByHeaderStyle = (headerStyle: HeaderStyle) => { + const baseWidths: Record = { + expanded: '120px', + compacted: '90px', + tiny: '60px', + none: '60px' + }; + + return `min-width: ${baseWidths[headerStyle]};`; +}; + +export const getDayLabel = (date: Date, headerStyle: HeaderStyle): string => { + const day = format(date, 'EEEE'); + switch (headerStyle) { + case 'expanded': + return day.toUpperCase(); + case 'compacted': + return day.slice(0, 3).toUpperCase(); + case 'tiny': + if (day === 'Thursday') return 'T'; + if (day === 'Tuesday') return 't'; + if (day === 'Saturday') return 's'; + if (day === 'Sunday') return 'S'; + if (day === 'Monday') return 'M'; + if (day === 'Wednesday') return 'W'; + if (day === 'Friday') return 'F'; + return day[0]; + default: + return day; + } +}; diff --git a/src/components/ui/Button.module.scss b/src/components/ui/Button.module.scss new file mode 100644 index 0000000..ef3357f --- /dev/null +++ b/src/components/ui/Button.module.scss @@ -0,0 +1,32 @@ +.button { + padding: 0.5rem 1rem; + border: none; + background: transparent; + color: #2c2c2c; + border-radius: 6px; + cursor: pointer; + font-family: inherit; + font-weight: 500; + font-size: 0.875rem; + // transition: all 0.2s ease; + flex: 1; + + &:hover { + background: #f0f0f0; + } + + &.active { + background: #2c2c2c; + color: white; + + &:hover { + background: #2c2c2c; + } + } + + @media (min-width: 768px) { + flex: 0 1 auto; + padding: 0.75rem 1.25rem; + font-size: 0.9rem; + } +} diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx new file mode 100644 index 0000000..c7f1401 --- /dev/null +++ b/src/components/ui/Button.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import styles from './Button.module.scss'; +import classNames from 'classnames'; + +interface ButtonProps extends React.ButtonHTMLAttributes { + active?: boolean; +} + +export const Button: React.FC = ({ + children, + active, + className, + ...props +}) => ( + +); diff --git a/src/components/ui/ButtonGroup.module.scss b/src/components/ui/ButtonGroup.module.scss new file mode 100644 index 0000000..2611a75 --- /dev/null +++ b/src/components/ui/ButtonGroup.module.scss @@ -0,0 +1,15 @@ +.buttonGroup { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + background: white; + padding: 0.25rem; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + width: 100%; + justify-content: center; + + @media (min-width: 768px) { + width: auto; + } +} diff --git a/src/components/ui/ButtonGroup.tsx b/src/components/ui/ButtonGroup.tsx new file mode 100644 index 0000000..e6eb977 --- /dev/null +++ b/src/components/ui/ButtonGroup.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import styles from './ButtonGroup.module.scss'; +import classNames from 'classnames'; + +interface ButtonGroupProps { + children: React.ReactNode; + className?: string; +} + +export const ButtonGroup: React.FC = ({ children, className }) => ( +

+ {children} +

+); diff --git a/src/components/ui/RangeInput.module.scss b/src/components/ui/RangeInput.module.scss new file mode 100644 index 0000000..16b2859 --- /dev/null +++ b/src/components/ui/RangeInput.module.scss @@ -0,0 +1,106 @@ +.container { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 0.75rem; + background: white; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + width: 100%; + + @media (min-width: 768px) { + width: auto; + min-width: 200px; + } +} + +.labelContainer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.label { + font-size: 0.875rem; + color: #2c2c2c; + font-weight: 500; +} + +.value { + font-size: 0.875rem; + color: #666; + font-weight: 500; + font-feature-settings: 'tnum' on, 'lnum' on; + font-family: monospace; +} + +.range { + position: relative; + width: 100%; + height: 20px; // Increased height to center the thumb + margin: 0; + background: transparent; + outline: none; + appearance: none; + cursor: pointer; + + // Track styles + &::-webkit-slider-runnable-track { + width: 100%; + height: 2px; + background: #e0e0e0; + border-radius: 2px; + border: none; + } + + &::-moz-range-track { + width: 100%; + height: 2px; + background: #e0e0e0; + border-radius: 2px; + border: none; + } + + // Thumb styles + &::-webkit-slider-thumb { + appearance: none; + width: 16px; + height: 16px; + border-radius: 50%; + background: #2c2c2c; + cursor: pointer; + margin-top: -7px; // Centers the thumb on the track: (thumb height - track height) / -2 + transition: background 0.2s; + + &:hover { + background: #404040; + } + } + + &::-moz-range-thumb { + width: 16px; + height: 16px; + border: none; + border-radius: 50%; + background: #2c2c2c; + cursor: pointer; + transition: background 0.2s; + + &:hover { + background: #404040; + } + } + + // Focus styles + &:focus { + outline: none; + + &::-webkit-slider-thumb { + box-shadow: 0 0 0 2px rgba(44, 44, 44, 0.2); + } + + &::-moz-range-thumb { + box-shadow: 0 0 0 2px rgba(44, 44, 44, 0.2); + } + } +} diff --git a/src/components/ui/RangeInput.tsx b/src/components/ui/RangeInput.tsx new file mode 100644 index 0000000..863cf14 --- /dev/null +++ b/src/components/ui/RangeInput.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import styles from './RangeInput.module.scss'; + +interface RangeInputProps { + value: number; + min: number; + max: number; + step: number; + onChange: (value: number) => void; + label: string; +} + +export const RangeInput: React.FC = ({ + value, + min, + max, + step, + onChange, + label +}) => { + return ( +

+ {label} + {value}% +

+ onChange(Number(e.target.value))} + className={styles.range} + /> +

+ ); +}; diff --git a/src/examples/CompactYear.tsx b/src/examples/CompactYear.tsx new file mode 100644 index 0000000..be395e6 --- /dev/null +++ b/src/examples/CompactYear.tsx @@ -0,0 +1,44 @@ +import React, { useState } from 'react'; +import { Year } from '../components/calendar/Year'; +import { Controls } from '../components/calendar/Controls'; +import { HeaderStyle, MonthCutoffType } from '../types/calendar'; +import styles from './Examples.module.scss'; + +export const CompactYear: React.FC = () => { + const [dayHeaderStyle, setDayHeaderStyle] = useState('tiny'); + const [monthCutoff, setMonthCutoff] = useState('truncate'); + const [fontProportion, setFontProportion] = useState(100); + const [magnify, setMagnify] = useState(false); + + return ( +

Compact Year View

+ Full year view optimized for compact display. +

+ {}} + onFontProportionChange={setFontProportion} + /> +

+ +

+ ); +}; diff --git a/src/examples/DateRangePicker.tsx b/src/examples/DateRangePicker.tsx new file mode 100644 index 0000000..ef451eb --- /dev/null +++ b/src/examples/DateRangePicker.tsx @@ -0,0 +1,131 @@ +import React, { useState, useCallback } from 'react'; +import { format, isBefore, isEqual } from 'date-fns'; +import { Year } from '../components/calendar/Year'; +import { Controls } from '../components/calendar/Controls'; +import { HeaderStyle, MonthCutoffType, DaySize, DateRange } from '../types/calendar'; +import styles from './Examples.module.scss'; + +export const DateRangePicker: React.FC = () => { + const [dateRange, setDateRange] = useState({ + startDate: null, + endDate: null, + selecting: false, + hoverDate: null, + anchorDate: null + }); + + const [dayHeaderStyle, setDayHeaderStyle] = useState('tiny'); + const [monthCutoff, setMonthCutoff] = useState('truncate'); + const [size, setSize] = useState('l'); + const [fontProportion, setFontProportion] = useState(100); + const [magnify, setMagnify] = useState(false); + + const handleDateSelect = useCallback((date: Date) => { + setDateRange(prev => { + if (!prev.selecting || !prev.anchorDate) { + return { + startDate: date, + endDate: date, + selecting: true, + hoverDate: date, + anchorDate: date + }; + } + + if (isEqual(date, prev.anchorDate)) { + return { + startDate: date, + endDate: date, + selecting: false, + hoverDate: null, + anchorDate: null + }; + } + + const [start, end] = isBefore(date, prev.anchorDate) + ? [date, prev.anchorDate] + : [prev.anchorDate, date]; + + return { + startDate: start, + endDate: end, + selecting: false, + hoverDate: null, + anchorDate: null + }; + }); + }, []); + + const handleDateHover = useCallback((date: Date) => { + setDateRange(prev => { + if (prev.selecting && prev.anchorDate) { + if (isEqual(date, prev.anchorDate)) { + return { + ...prev, + startDate: date, + endDate: date, + hoverDate: date + }; + } + + const [start, end] = isBefore(date, prev.anchorDate) + ? [date, prev.anchorDate] + : [prev.anchorDate, date]; + + return { + ...prev, + startDate: start, + endDate: end, + hoverDate: date + }; + } + return prev; + }); + }, []); + + const formatDateOrNull = (date: Date | null) => { + return date ? format(date, 'PPP') : 'Not selected'; + }; + + return ( +

Date Range Picker

+ Click to select start date, then hover and click to select end date. +

+ +

Start Date: {formatDateOrNull(dateRange.startDate)}

End Date: {formatDateOrNull(dateRange.endDate)}

Selecting: {dateRange.selecting ? 'Yes' : 'No'}

Hover Date: {formatDateOrNull(dateRange.hoverDate)}

Anchor Date: {formatDateOrNull(dateRange.anchorDate)}

+ ); +}; diff --git a/src/examples/Examples.module.scss b/src/examples/Examples.module.scss new file mode 100644 index 0000000..13bf4f9 --- /dev/null +++ b/src/examples/Examples.module.scss @@ -0,0 +1,36 @@ +.section { + margin-bottom: 4rem; + padding: 2rem; + background: white; + border-radius: 12px; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); + + &:last-child { + margin-bottom: 0; + } +} + +.sectionTitle { + font-size: 2rem; + margin: 0 0 1rem; + color: #2c2c2c; +} + +.sectionDescription { + font-size: 1rem; + color: #666; + margin: 0 0 2rem; +} + +.demoContainer { + margin-top: 2rem; +} + +.rangeInfo { + margin-top: 1rem; + padding: 1rem; + background: #f5f5f5; + border-radius: 8px; + font-family: monospace; + font-size: 0.9rem; +} diff --git a/src/examples/SingleMonth.tsx b/src/examples/SingleMonth.tsx new file mode 100644 index 0000000..eaf0f22 --- /dev/null +++ b/src/examples/SingleMonth.tsx @@ -0,0 +1,42 @@ +import React, { useState } from 'react'; +import { Month } from '../components/calendar/Month'; +import { Controls } from '../components/calendar/Controls'; +import { HeaderStyle, MonthCutoffType, DaySize } from '../types/calendar'; +import styles from './Examples.module.scss'; + +export const SingleMonth: React.FC = () => { + const [dayHeaderStyle, setDayHeaderStyle] = useState('tiny'); + const [monthCutoff, setMonthCutoff] = useState('truncate'); + const [size, setSize] = useState('l'); + const [fontProportion, setFontProportion] = useState(100); + + return ( +

Single Month View

+ Showcase of a single month component with various styling options. +

+ +

+ ); +}; diff --git a/src/examples/WeekView.tsx b/src/examples/WeekView.tsx new file mode 100644 index 0000000..ab129f0 --- /dev/null +++ b/src/examples/WeekView.tsx @@ -0,0 +1,41 @@ +import React, { useState } from 'react'; +import { Week } from '../components/calendar/Week'; +import { Controls } from '../components/calendar/Controls'; +import { HeaderStyle, MonthCutoffType, DaySize } from '../types/calendar'; +import styles from './Examples.module.scss'; + +export const WeekView: React.FC = () => { + const [dayHeaderStyle, setDayHeaderStyle] = useState('tiny'); + const [monthCutoff, setMonthCutoff] = useState('truncate'); + const [size, setSize] = useState('l'); + const [fontProportion, setFontProportion] = useState(100); + + return ( +

Week View

+ Display of a single week with various styling options. +

+ +

+ ); +}; diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..6638b60 --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,5 @@ +// src/global.d.ts +declare module '*.module.scss' { + const classes: { [key: string]: string }; + export default classes; +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..2a6077e --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App' +import './style.css' + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + +) diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..7360a52 --- /dev/null +++ b/src/style.css @@ -0,0 +1,34 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + background: white; +} + +@media (max-width: 768px) { + html { + font-size: 14px; + } +} + +@media (max-width: 480px) { + html { + font-size: 12px; + } +} diff --git a/src/types/calendar.ts b/src/types/calendar.ts new file mode 100644 index 0000000..26f833e --- /dev/null +++ b/src/types/calendar.ts @@ -0,0 +1,75 @@ +export type DateRange = { + startDate: Date | null; + endDate: Date | null; + selecting: boolean; + hoverDate: Date | null; + anchorDate: Date | null; +}; + +export type HeaderStyle = 'expanded' | 'compacted' | 'tiny' | 'none'; +export type MonthCutoffType = 'dimmed' | 'truncate' | undefined; +export type DirectionType = 'row' | 'column'; +export type DayVariation = + | 'greyed' + | 'selected' + | 'rangeStart' + | 'rangeEnd' + | 'selecting' + | 'rowStart' + | 'rowEnd'; +export type DaySize = 'xl' | 'l' | 'm' | 's' | 'xs'; + +export interface YearProps { + year: number; + dayHeaderStyle: HeaderStyle; + monthDayOfWeekHeaderStyle?: HeaderStyle; + monthCutoff?: MonthCutoffType; + weekendDays?: number[]; + dateRange?: DateRange; + onDateSelect?: (date: Date) => void; + onDateHover?: (date: Date) => void; + size?: DaySize; + fontProportion?: number; + magnify?: boolean; +} + +export interface MonthProps { + date: Date; + dayHeaderStyle: HeaderStyle; + monthDayOfWeekHeaderStyle?: HeaderStyle; + direction: DirectionType; + monthCutoff?: MonthCutoffType; + weekendDays?: number[]; + dateRange?: DateRange; + onDateSelect?: (date: Date) => void; + onDateHover?: (date: Date) => void; + size?: DaySize; + fontProportion?: number; + magnify?: boolean; +} + +export interface WeekProps { + startDate: Date; + headerStyle: HeaderStyle; + monthCutoff?: MonthCutoffType; + referenceMonth: number; + weekendDays?: number[]; + dateRange?: DateRange; + onDateSelect?: (date: Date) => void; + onDateHover?: (date: Date) => void; + size?: DaySize; + fontProportion?: number; + magnify?: boolean; +} + +export interface DayProps { + date: Date; + headerStyle: HeaderStyle; + isOtherMonth?: boolean; + variations?: DayVariation[]; + onSelect?: () => void; + onHover?: () => void; + size?: DaySize; + fontProportion?: number; + magnify?: boolean; +} diff --git a/src/utils/dateUtils.ts b/src/utils/dateUtils.ts new file mode 100644 index 0000000..f3f4041 --- /dev/null +++ b/src/utils/dateUtils.ts @@ -0,0 +1,54 @@ +import { isSameDay, isWithinInterval, startOfDay } from 'date-fns'; +import { DateRange, DayVariation } from '../types/calendar'; + +export const getDateVariations = ( + date: Date, + dateRange: DateRange | undefined, + weekendDays: number[] = [], + dayIndex: number = 0 +): DayVariation[] => { + const greyedClasses: DayVariation[] = weekendDays.includes(date.getDay()) + ? ['greyed'] + : []; + + const greyedAndRowRelativeClasses = ['rowStart', 'rowEnd'].reduce((p, c) => { + switch (c) { + case 'rowStart': + return dayIndex === 0 ? [...p, c] : p; + case 'rowEnd': + return dayIndex === 6 ? [...p, c] : p; + default: + return p; + } + }, greyedClasses); + + if (!dateRange?.startDate || !dateRange?.endDate) { + return greyedAndRowRelativeClasses; + } + + const currentDate = startOfDay(date); + const startDate = startOfDay(dateRange.startDate); + const endDate = startOfDay(dateRange.endDate); + + if (!isWithinInterval(currentDate, { start: startDate, end: endDate })) { + return greyedAndRowRelativeClasses; + } + + const withSelectingOrSelected: DayVariation[] = [ + ...greyedAndRowRelativeClasses, + dateRange.selecting + ? 'selecting' + : 'selected', + ]; + + return ['rangeStart', 'rangeEnd'].reduce((p, c) => { + switch (c) { + case 'rangeStart': + return isSameDay(currentDate, startDate) ? [...p, c] : p; + case 'rangeEnd': + return isSameDay(currentDate, endDate) ? [...p, c] : p; + default: + return p; + } + }, withSelectingOrSelected); +}; \ No newline at end of file diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..057caf8 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,6 @@ +/// + +declare module '*.module.scss' { + const classes: { [key: string]: string }; + export default classes; +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..e408291 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,11 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], + css: { + modules: { + localsConvention: 'camelCase' + } + } +})