feat: first commit, working
Guillermo Pages
10 months ago
commit
b4abe21060
@ -0,0 +1 @@
|
||||
node_modules/
|
||||
@ -0,0 +1,178 @@
|
||||
# Minimal Calendar Component
|
||||
|
||||
A flexible and customizable calendar component built with React, TypeScript, and styled-components.
|
||||
|
||||
## Features
|
||||
|
||||
- 📅 Year, month, and week views
|
||||
- 🎨 Multiple header styles (expanded, compacted, tiny, none)
|
||||
- 🎯 Customizable month cutoff behavior
|
||||
- 🎭 Weekend highlighting
|
||||
- 📱 Fully responsive design
|
||||
- 🔧 TypeScript support
|
||||
- 💅 Styled with styled-components
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install date-fns styled-components
|
||||
```
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```tsx
|
||||
import { Year } from './components/calendar/Year';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Year
|
||||
year={2024}
|
||||
dayHeaderStyle="tiny"
|
||||
weekendDays={[6, 0]} // Saturday and Sunday
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced Usage
|
||||
|
||||
### With Date Selection
|
||||
|
||||
```tsx
|
||||
import { useState } from 'react';
|
||||
import { Year } from './components/calendar/Year';
|
||||
|
||||
function App() {
|
||||
const [selectedDate, setSelectedDate] = useState<Date | undefined>();
|
||||
|
||||
return (
|
||||
<Year
|
||||
year={2024}
|
||||
dayHeaderStyle="expanded"
|
||||
monthCutoff="truncate"
|
||||
weekendDays={[6, 0]}
|
||||
selectedDate={selectedDate}
|
||||
onDateSelect={setSelectedDate}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### With Controls
|
||||
|
||||
```tsx
|
||||
import { useState } from 'react';
|
||||
import { Year } from './components/calendar/Year';
|
||||
import { Controls } from './components/calendar/Controls';
|
||||
import { HeaderStyle, MonthCutoffType } from './types/calendar';
|
||||
|
||||
function App() {
|
||||
const [headerStyle, setHeaderStyle] = useState<HeaderStyle>('tiny');
|
||||
const [monthCutoff, setMonthCutoff] = useState<MonthCutoffType>('truncate');
|
||||
|
||||
return (
|
||||
<>
|
||||
<Controls
|
||||
headerStyle={headerStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
onHeaderStyleChange={setHeaderStyle}
|
||||
onMonthCutoffChange={setMonthCutoff}
|
||||
/>
|
||||
<Year
|
||||
year={2024}
|
||||
dayHeaderStyle={headerStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
weekendDays={[6, 0]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Component Props
|
||||
|
||||
### Year Component
|
||||
|
||||
| Prop | Type | Description |
|
||||
|------|------|-------------|
|
||||
| year | number | The year to display |
|
||||
| dayHeaderStyle | 'expanded' \| 'compacted' \| 'tiny' \| 'none' | Style of day headers |
|
||||
| monthDayOfWeekHeaderStyle | HeaderStyle (optional) | Style of month day headers |
|
||||
| monthCutoff | 'dimmed' \| 'truncate' \| undefined | How to handle days from other months |
|
||||
| weekendDays | number[] | Array of day indices to mark as weekends (0-6) |
|
||||
| selectedDate | Date (optional) | Currently selected date |
|
||||
| rangeStart | Date (optional) | Start date for range selection |
|
||||
| rangeEnd | Date (optional) | End date for range selection |
|
||||
| onDateSelect | (date: Date) => void (optional) | Date selection callback |
|
||||
| compact | boolean (optional) | Use compact layout |
|
||||
|
||||
### Controls Component
|
||||
|
||||
| Prop | Type | Description |
|
||||
|------|------|-------------|
|
||||
| headerStyle | HeaderStyle | Current header style |
|
||||
| monthCutoff | MonthCutoffType | Current month cutoff type |
|
||||
| onHeaderStyleChange | (type: HeaderStyle) => void | Header style change handler |
|
||||
| onMonthCutoffChange | (type: MonthCutoffType) => void | Month cutoff change handler |
|
||||
|
||||
## Styling
|
||||
|
||||
The calendar uses styled-components for styling. You can customize the appearance by:
|
||||
|
||||
1. Using the built-in props
|
||||
2. Extending the styled components
|
||||
3. Wrapping components with custom styled containers
|
||||
|
||||
Example of custom styling:
|
||||
|
||||
```tsx
|
||||
import styled from 'styled-components';
|
||||
import { Year } from './components/calendar/Year';
|
||||
|
||||
const CustomCalendarContainer = styled.div`
|
||||
padding: 2rem;
|
||||
background: #fafafa;
|
||||
|
||||
// Custom styles for the calendar
|
||||
.month-title {
|
||||
color: #1a73e8;
|
||||
}
|
||||
`;
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<CustomCalendarContainer>
|
||||
<Year
|
||||
year={2024}
|
||||
dayHeaderStyle="tiny"
|
||||
/>
|
||||
</CustomCalendarContainer>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Header Styles
|
||||
|
||||
- **expanded**: Full day names (e.g., "MONDAY")
|
||||
- **compacted**: Three-letter day names (e.g., "MON")
|
||||
- **tiny**: Single letter day names (e.g., "M")
|
||||
- **none**: No day headers, only numbers
|
||||
|
||||
## Month Cutoff Options
|
||||
|
||||
- **dimmed**: Show days from other months with reduced opacity
|
||||
- **truncate**: Hide days from other months
|
||||
- **undefined**: Show all days normally
|
||||
|
||||
## Browser Support
|
||||
|
||||
The calendar component supports all modern browsers:
|
||||
|
||||
- Chrome (latest)
|
||||
- Firefox (latest)
|
||||
- Safari (latest)
|
||||
- Edge (latest)
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Calendar</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "react-calendar",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"date-fns": "^2.30.0",
|
||||
"classnames": "^2.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.5",
|
||||
"sass": "^1.69.5"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,86 @@
|
||||
|
||||
$border-color;
|
||||
$border-color; // replaced shared.$border-color
|
||||
$content-normal-bg; // replaced shared.$content-background-color
|
||||
$content-normal-bg; // replaced shared.$content-background-color-selecting
|
||||
$content-normal-text; // replaced shared.$content-color
|
||||
$day-content-defaultmode-defaultstate-background-color;
|
||||
$day-content-defaultmode-defaultstate-color;
|
||||
$day-content-defaultmode-defaultstate-color; // replaced shared.$day-content-defaultmode-defaultstate-color
|
||||
$day-content-defaultmode-selectedstate-midrange-background-color;
|
||||
$day-content-defaultmode-selectedstate-midrange-color;
|
||||
$day-content-defaultmode-selectedstate-rangeend-background-color;
|
||||
$day-content-defaultmode-selectedstate-rangeend-color;
|
||||
$day-content-defaultmode-selectedstate-rangeend-hover-background-color;
|
||||
$day-content-defaultmode-selectedstate-rangestart-background-color;
|
||||
$day-content-defaultmode-selectedstate-rangestart-color;
|
||||
$day-content-defaultmode-selectedstate-rangestart-hover-background-color;
|
||||
$day-content-defaultmode-selectingstate-midrange-background-color;
|
||||
$day-content-defaultmode-selectingstate-midrange-color;
|
||||
$day-content-defaultmode-selectingstate-midrange-hover-background-color;
|
||||
$day-content-defaultmode-selectingstate-rangeend-background-color;
|
||||
$day-content-defaultmode-selectingstate-rangeend-color;
|
||||
$day-content-defaultmode-selectingstate-rangeend-hover-background-color;
|
||||
$day-content-defaultmode-selectingstate-rangestart-background-color;
|
||||
$day-content-defaultmode-selectingstate-rangestart-color;
|
||||
$day-content-defaultmode-selectingstate-rangestart-hover-background-color;
|
||||
$day-content-greyedmode-defaultstate-background-color;
|
||||
$day-content-greyedmode-defaultstate-color;
|
||||
$day-content-greyedmode-selectedstate-midrange-background-color;
|
||||
$day-content-greyedmode-selectedstate-midrange-color;
|
||||
$day-content-greyedmode-selectedstate-rangeend-background-color;
|
||||
$day-content-greyedmode-selectedstate-rangeend-color;
|
||||
$day-content-greyedmode-selectedstate-rangeend-hover-background-color;
|
||||
$day-content-greyedmode-selectedstate-rangestart-background-color;
|
||||
$day-content-greyedmode-selectedstate-rangestart-color;
|
||||
$day-content-greyedmode-selectedstate-rangestart-hover-background-color;
|
||||
$day-content-greyedmode-selectingstate-midrange-background-color;
|
||||
$day-content-greyedmode-selectingstate-midrange-color;
|
||||
$day-content-greyedmode-selectingstate-rangeend-background-color;
|
||||
$day-content-greyedmode-selectingstate-rangeend-color;
|
||||
$day-content-greyedmode-selectingstate-rangeend-hover-background-color;
|
||||
$day-content-greyedmode-selectingstate-rangestart-background-color;
|
||||
$day-content-greyedmode-selectingstate-rangestart-color;
|
||||
$day-content-greyedmode-selectingstate-rangestart-hover-background-color;
|
||||
$day-header-defaultmode-defaultstate-background-color;
|
||||
$day-header-defaultmode-defaultstate-color;
|
||||
$day-header-defaultmode-selectedstate-midrange-background-color;
|
||||
$day-header-defaultmode-selectedstate-midrange-color;
|
||||
$day-header-defaultmode-selectedstate-rangeend-background-color;
|
||||
$day-header-defaultmode-selectedstate-rangeend-color;
|
||||
$day-header-defaultmode-selectedstate-rangeend-hover-background-color;
|
||||
$day-header-defaultmode-selectedstate-rangestart-background-color;
|
||||
$day-header-defaultmode-selectedstate-rangestart-color;
|
||||
$day-header-defaultmode-selectedstate-rangestart-hover-background-color;
|
||||
$day-header-defaultmode-selectingstate-midrange-background-color;
|
||||
$day-header-defaultmode-selectingstate-midrange-color;
|
||||
$day-header-defaultmode-selectingstate-rangeend-background-color;
|
||||
$day-header-defaultmode-selectingstate-rangeend-color;
|
||||
$day-header-defaultmode-selectingstate-rangeend-hover-background-color;
|
||||
$day-header-defaultmode-selectingstate-rangestart-background-color;
|
||||
$day-header-defaultmode-selectingstate-rangestart-color;
|
||||
$day-header-defaultmode-selectingstate-rangestart-hover-background-color;
|
||||
$day-header-greyedmode-defaultstate-background-color;
|
||||
$day-header-greyedmode-defaultstate-background-color; // replaced shared.$header-background-color-greyed
|
||||
$day-header-greyedmode-defaultstate-color;
|
||||
$day-header-greyedmode-defaultstate-color; // replaced shared.$header-color-greyed
|
||||
$day-header-greyedmode-selectedstate-midrange-background-color;
|
||||
$day-header-greyedmode-selectedstate-midrange-color;
|
||||
$day-header-greyedmode-selectedstate-rangeend-background-color;
|
||||
$day-header-greyedmode-selectedstate-rangeend-color;
|
||||
$day-header-greyedmode-selectedstate-rangeend-hover-background-color;
|
||||
$day-header-greyedmode-selectedstate-rangestart-background-color;
|
||||
$day-header-greyedmode-selectedstate-rangestart-color;
|
||||
$day-header-greyedmode-selectedstate-rangestart-hover-background-color;
|
||||
$day-header-greyedmode-selectingstate-midrange-background-color;
|
||||
$day-header-greyedmode-selectingstate-midrange-color;
|
||||
$day-header-greyedmode-selectingstate-rangeend-background-color;
|
||||
$day-header-greyedmode-selectingstate-rangeend-color;
|
||||
$day-header-greyedmode-selectingstate-rangeend-hover-background-color;
|
||||
$day-header-greyedmode-selectingstate-rangestart-background-color;
|
||||
$day-header-greyedmode-selectingstate-rangestart-color;
|
||||
$day-header-greyedmode-selectingstate-rangestart-hover-background-color;
|
||||
$focus-blue;
|
||||
$header-normal-bg; // replaced shared.$header-background-color
|
||||
$header-normal-text; // replaced shared.$header-color
|
||||
scss)
|
||||
@ -0,0 +1,48 @@
|
||||
.container {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
background: #fafafa;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import { DateRangePicker } from './examples/DateRangePicker';
|
||||
import { SingleMonth } from './examples/SingleMonth';
|
||||
import { WeekView } from './examples/WeekView';
|
||||
import { CompactYear } from './examples/CompactYear';
|
||||
import styles from './App.module.scss';
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<DateRangePicker />
|
||||
<SingleMonth />
|
||||
<WeekView />
|
||||
<CompactYear />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -0,0 +1,16 @@
|
||||
.controlsContainer {
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,135 @@
|
||||
import React from 'react';
|
||||
import { Button } from '../ui/Button';
|
||||
import { ButtonGroup } from '../ui/ButtonGroup';
|
||||
import { RangeInput } from '../ui/RangeInput';
|
||||
import { HeaderStyle, MonthCutoffType, DaySize } from '../../types/calendar';
|
||||
import styles from './Controls.module.scss';
|
||||
|
||||
interface ControlsProps {
|
||||
headerStyle: HeaderStyle;
|
||||
monthCutoff: MonthCutoffType;
|
||||
size: DaySize;
|
||||
fontProportion: number;
|
||||
magnify: boolean;
|
||||
onHeaderStyleChange: (type: HeaderStyle) => void;
|
||||
onMonthCutoffChange: (type: MonthCutoffType) => void;
|
||||
onSizeChange: (size: DaySize) => void;
|
||||
onFontProportionChange: (proportion: number) => void;
|
||||
onMagnifyChange: (magnify: boolean) => void;
|
||||
}
|
||||
|
||||
export const Controls: React.FC<ControlsProps> = ({
|
||||
headerStyle,
|
||||
monthCutoff,
|
||||
size,
|
||||
fontProportion,
|
||||
magnify,
|
||||
onHeaderStyleChange,
|
||||
onMonthCutoffChange,
|
||||
onSizeChange,
|
||||
onFontProportionChange,
|
||||
onMagnifyChange,
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.controlsContainer}>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
active={headerStyle === 'expanded'}
|
||||
onClick={() => onHeaderStyleChange('expanded')}
|
||||
>
|
||||
Expanded
|
||||
</Button>
|
||||
<Button
|
||||
active={headerStyle === 'compacted'}
|
||||
onClick={() => onHeaderStyleChange('compacted')}
|
||||
>
|
||||
Compacted
|
||||
</Button>
|
||||
<Button
|
||||
active={headerStyle === 'tiny'}
|
||||
onClick={() => onHeaderStyleChange('tiny')}
|
||||
>
|
||||
Tiny
|
||||
</Button>
|
||||
<Button
|
||||
active={headerStyle === 'none'}
|
||||
onClick={() => onHeaderStyleChange('none')}
|
||||
>
|
||||
Numbers
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
active={monthCutoff === 'dimmed'}
|
||||
onClick={() => onMonthCutoffChange('dimmed')}
|
||||
>
|
||||
Dimmed
|
||||
</Button>
|
||||
<Button
|
||||
active={monthCutoff === 'truncate'}
|
||||
onClick={() => onMonthCutoffChange('truncate')}
|
||||
>
|
||||
Truncate
|
||||
</Button>
|
||||
<Button
|
||||
active={monthCutoff === undefined}
|
||||
onClick={() => onMonthCutoffChange(undefined)}
|
||||
>
|
||||
Show All
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
active={size === 'xl'}
|
||||
onClick={() => onSizeChange('xl')}
|
||||
>
|
||||
XL
|
||||
</Button>
|
||||
<Button
|
||||
active={size === 'l'}
|
||||
onClick={() => onSizeChange('l')}
|
||||
>
|
||||
L
|
||||
</Button>
|
||||
<Button
|
||||
active={size === 'm'}
|
||||
onClick={() => onSizeChange('m')}
|
||||
>
|
||||
M
|
||||
</Button>
|
||||
<Button
|
||||
active={size === 's'}
|
||||
onClick={() => onSizeChange('s')}
|
||||
>
|
||||
S
|
||||
</Button>
|
||||
<Button
|
||||
active={size === 'xs'}
|
||||
onClick={() => onSizeChange('xs')}
|
||||
>
|
||||
XS
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
active={magnify}
|
||||
onClick={() => onMagnifyChange(!magnify)}
|
||||
>
|
||||
{magnify ? 'Magnify On -> Turn off' : 'Magnify Off - Turn on'}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<RangeInput
|
||||
value={fontProportion}
|
||||
min={10}
|
||||
max={100}
|
||||
step={5}
|
||||
onChange={onFontProportionChange}
|
||||
label="Text Size"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,463 @@
|
||||
@use 'variables' as v;
|
||||
@use '../shared/variables' as shared;
|
||||
@use '../shared/colors' as colors;
|
||||
|
||||
.Day {
|
||||
|
||||
&__Header {
|
||||
color: colors.$day-header-defaultmode-defaultstate-color;
|
||||
background: colors.$day-header-defaultmode-defaultstate-background-color;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__HeaderText {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__Content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: v.$content-padding-base;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__Container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
border: shared.$border-size solid colors.$border-color;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
background: colors.$day-content-defaultmode-defaultstate-background-color;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: shared.$border-radius-sm;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
border-radius: shared.$border-radius;
|
||||
}
|
||||
|
||||
&--interactive {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: shared.$shadow-hover;
|
||||
background: colors.$day-content-defaultmode-selectingstate-midrange-hover-background-color;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: shared.$shadow-focus;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&--otherMonth {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
// *****************
|
||||
// Border Management
|
||||
// *****************
|
||||
&--selecting, &--selected {
|
||||
&:not(.Day__Container--rowStart):not(.Day__Container--rowEnd):not(.Day__Container--rangeStart):not(.Day__Container--rangeEnd) {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
&.Day__Container--rangeStart:not(.Day__Container--rangeEnd):not(.Day__Container--rowEnd) {
|
||||
border-right: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&.Day__Container--rangeEnd:not(.Day__Container--rangeStart):not(.Day__Container--rowStart) {
|
||||
border-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&.Day__Container--rowStart:not(.Day__Container--rangeEnd) {
|
||||
border-right: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&.Day__Container--rowEnd:not(.Day__Container--rangeStart) {
|
||||
border-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// implicit (defaultstate(not selected not selecting)) {
|
||||
// implicit (defaultmode(not greyed)) {
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-defaultmode-defaultstate-background-color;
|
||||
color: colors.$day-header-defaultmode-defaultstate-color;
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-defaultmode-defaultstate-color;
|
||||
}
|
||||
// end implicit (defaultmode(not greyed)) {
|
||||
|
||||
&.Day__Container--greyed {
|
||||
background: colors.$day-content-greyedmode-defaultstate-background-color;
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-greyedmode-defaultstate-background-color;
|
||||
color: colors.$day-header-greyedmode-defaultstate-color;
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-greyedmode-defaultstate-color;
|
||||
}
|
||||
}
|
||||
// end implicit (defaultstate(not selected not selecting))
|
||||
|
||||
// implicit (midrange) {
|
||||
&.Day__Container--selecting {
|
||||
// implicit (defaultmode(not greyed)) {
|
||||
background: colors.$day-content-defaultmode-selectingstate-midrange-background-color;
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-defaultmode-selectingstate-midrange-background-color;
|
||||
color: colors.$day-header-defaultmode-selectingstate-midrange-color;
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-defaultmode-selectingstate-midrange-color;
|
||||
}
|
||||
// end implicit (defaultmode(not greyed)) {
|
||||
|
||||
&.Day__Container--greyed {
|
||||
background: colors.$day-content-greyedmode-selectingstate-midrange-background-color;
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-greyedmode-selectingstate-midrange-background-color;
|
||||
color: colors.$day-header-greyedmode-selectingstate-midrange-color;
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-greyedmode-selectingstate-midrange-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.Day__Container--selected {
|
||||
// implicit (defaultmode(not greyed)) {
|
||||
background: colors.$day-content-defaultmode-selectedstate-midrange-background-color;
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-defaultmode-selectedstate-midrange-background-color;
|
||||
color: colors.$day-header-defaultmode-selectedstate-midrange-color;
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-defaultmode-selectedstate-midrange-color;
|
||||
}
|
||||
// end implicit (defaultmode(not greyed)) {
|
||||
|
||||
&.Day__Container--greyed {
|
||||
background: colors.$day-content-greyedmode-selectedstate-midrange-background-color;
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-greyedmode-selectedstate-midrange-background-color;
|
||||
color: colors.$day-header-greyedmode-selectedstate-midrange-color;
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-greyedmode-selectedstate-midrange-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// end implicit (midrange) {
|
||||
|
||||
// rangestart (selected|selecting)(greyed|defaultMode)
|
||||
&.Day__Container--rangeStart:not(.Day__Container--rangeEnd) {
|
||||
// implicit .Day__Container--selected {
|
||||
// implicit (defaultmode(not greyed)) {
|
||||
background: colors.$day-content-defaultmode-selectedstate-rangestart-background-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-content-defaultmode-selectedstate-rangestart-hover-background-color;
|
||||
}
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-defaultmode-selectedstate-rangestart-background-color;
|
||||
color: colors.$day-header-defaultmode-selectedstate-rangestart-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-header-defaultmode-selectedstate-rangestart-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-defaultmode-selectedstate-rangestart-color;
|
||||
}
|
||||
// end implicit (defaultmode(not greyed)) {
|
||||
|
||||
&.Day__Container--greyed {
|
||||
background: colors.$day-content-greyedmode-selectedstate-rangestart-background-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-content-greyedmode-selectedstate-rangestart-hover-background-color;
|
||||
}
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-greyedmode-selectedstate-rangestart-background-color;
|
||||
color: colors.$day-header-greyedmode-selectedstate-rangestart-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-header-greyedmode-selectedstate-rangestart-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-greyedmode-selectedstate-rangestart-color;
|
||||
}
|
||||
}
|
||||
// end implicit selected
|
||||
|
||||
// selecting
|
||||
&.Day__Container--selecting {
|
||||
// implicit (defaultmode(not greyed)) {
|
||||
background: colors.$day-content-defaultmode-selectingstate-rangestart-background-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-content-defaultmode-selectingstate-rangestart-hover-background-color;
|
||||
}
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-defaultmode-selectingstate-rangestart-background-color;
|
||||
color: colors.$day-header-defaultmode-selectingstate-rangestart-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-header-defaultmode-selectingstate-rangestart-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-defaultmode-selectingstate-rangestart-color;
|
||||
}
|
||||
// end implicit (defaultmode(not greyed)) {
|
||||
|
||||
&.Day__Container--greyed {
|
||||
background: colors.$day-content-greyedmode-selectingstate-rangestart-background-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-content-greyedmode-selectingstate-rangestart-hover-background-color;
|
||||
}
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-greyedmode-selectingstate-rangestart-background-color;
|
||||
color: colors.$day-header-greyedmode-selectingstate-rangestart-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-header-greyedmode-selectingstate-rangestart-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-greyedmode-selectingstate-rangestart-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RangeEnd (selected|selecting)(greyed|defaultMode)
|
||||
&.Day__Container--rangeEnd:not(.Day__Container--rangeStart) {
|
||||
// implicit .Day__Container--selected {
|
||||
// implicit (defaultmode(not greyed)) {
|
||||
background: colors.$day-content-defaultmode-selectedstate-rangeend-background-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-content-defaultmode-selectedstate-rangeend-hover-background-color;
|
||||
}
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-defaultmode-selectedstate-rangeend-background-color;
|
||||
color: colors.$day-header-defaultmode-selectedstate-rangeend-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-header-defaultmode-selectedstate-rangeend-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-defaultmode-selectedstate-rangeend-color;
|
||||
}
|
||||
// end implicit (defaultmode(not greyed)) {
|
||||
|
||||
&.Day__Container--greyed {
|
||||
background: colors.$day-content-greyedmode-selectedstate-rangeend-background-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-content-greyedmode-selectedstate-rangeend-hover-background-color;
|
||||
}
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-greyedmode-selectedstate-rangeend-background-color;
|
||||
color: colors.$day-header-greyedmode-selectedstate-rangeend-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-header-greyedmode-selectedstate-rangeend-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-greyedmode-selectedstate-rangeend-color;
|
||||
}
|
||||
}
|
||||
// end implicit selected
|
||||
|
||||
// selecting
|
||||
&.Day__Container--selecting {
|
||||
// implicit (defaultmode(not greyed)) {
|
||||
background: colors.$day-content-defaultmode-selectingstate-rangeend-background-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-content-defaultmode-selectingstate-rangeend-hover-background-color;
|
||||
}
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-defaultmode-selectingstate-rangeend-background-color;
|
||||
color: colors.$day-header-defaultmode-selectingstate-rangeend-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-header-defaultmode-selectingstate-rangeend-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-defaultmode-selectingstate-rangeend-color;
|
||||
}
|
||||
// end implicit (defaultmode(not greyed)) {
|
||||
|
||||
&.Day__Container--greyed {
|
||||
background: colors.$day-content-greyedmode-selectingstate-rangeend-background-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-content-greyedmode-selectingstate-rangeend-hover-background-color;
|
||||
}
|
||||
|
||||
.Day__Header {
|
||||
background: colors.$day-header-greyedmode-selectingstate-rangeend-background-color;
|
||||
color: colors.$day-header-greyedmode-selectingstate-rangeend-color;
|
||||
|
||||
&:hover {
|
||||
background: colors.$day-header-greyedmode-selectingstate-rangeend-hover-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.Day__Number {
|
||||
color: colors.$day-content-greyedmode-selectingstate-rangeend-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Base case (no magnify)
|
||||
.Day__Container:not(.magnify) {
|
||||
&.Day__Container--rangeStart:not(.Day__Container--rangeEnd) .Day__Content,
|
||||
&.Day__Container--selected:not(.Day__Container--rowEnd):not(.Day__Container--rangeEnd) .Day__Content,
|
||||
&.Day__Container--selecting:not(.Day__Container--rowEnd):not(.Day__Container--rangeEnd) .Day__Content {
|
||||
padding-right: v.$content-padding-base + v.$content-padding-border-compensation + shared.$week-wrapper-padding;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
padding-right: v.$content-padding-base + v.$content-padding-border-compensation + shared.$week-wrapper-padding-desktop;
|
||||
}
|
||||
}
|
||||
|
||||
&.Day__Container--rangeEnd:not(.Day__Container--rangeStart) .Day__Content,
|
||||
&.Day__Container--selected:not(.Day__Container--rowStart):not(.Day__Container--rangeStart) .Day__Content,
|
||||
&.Day__Container--selecting:not(.Day__Container--rowStart):not(.Day__Container--rangeStart) .Day__Content {
|
||||
padding-left: v.$content-padding-base + v.$content-padding-border-compensation + shared.$week-wrapper-padding;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
padding-left: v.$content-padding-base + v.$content-padding-border-compensation + shared.$week-wrapper-padding-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Magnify case
|
||||
.Day__Container.magnify {
|
||||
&.Day__Container--rangeStart:not(.Day__Container--rangeEnd) .Day__Content,
|
||||
&.Day__Container--selected:not(.Day__Container--rowEnd):not(.Day__Container--rangeEnd) .Day__Content,
|
||||
&.Day__Container--selecting:not(.Day__Container--rowEnd):not(.Day__Container--rangeEnd) .Day__Content {
|
||||
padding-right: v.$content-padding-base + v.$content-padding-border-compensation;
|
||||
}
|
||||
&.Day__Container--rangeStart:not(.Day__Container--rangeEnd) .Day__Content,
|
||||
&.Day__Container--selected.Day__Container--rowStart .Day__Content {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.Day__Container--rangeEnd:not(.Day__Container--rangeStart) .Day__Content,
|
||||
&.Day__Container--selected:not(.Day__Container--rowStart):not(.Day__Container--rangeStart) .Day__Content,
|
||||
&.Day__Container--selecting:not(.Day__Container--rowStart):not(.Day__Container--rangeStart) .Day__Content {
|
||||
padding-left: v.$content-padding-base + v.$content-padding-border-compensation;
|
||||
}
|
||||
&.Day__Container--rangeEnd:not(.Day__Container--rangeStart) .Day__Content,
|
||||
&.Day__Container--selected.Day__Container--rowEnd .Day__Content {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Size variants
|
||||
@each $size in ('xl', 'l', 'm', 's', 'xs') {
|
||||
.Day--#{$size} {
|
||||
.Day__Header {
|
||||
height: v.get-size-value($size, 'header-height');
|
||||
font-size: v.get-size-value($size, 'header-font');
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
height: v.get-size-value($size, 'header-height-desktop');
|
||||
font-size: v.get-size-value($size, 'header-font-desktop');
|
||||
}
|
||||
}
|
||||
|
||||
.Day__Content {
|
||||
height: v.get-size-value($size, 'header-height') * 2;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
height: v.get-size-value($size, 'header-height-desktop') * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Header style variants
|
||||
.Day--expanded .Day__Header {
|
||||
padding: 0 shared.$spacing-unit-quadruple;
|
||||
.Day__HeaderText {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.Day--compacted .Day__Header {
|
||||
padding: 0 shared.$spacing-unit-double;
|
||||
.Day__HeaderText {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.Day--tiny .Day__Header {
|
||||
padding: 0 shared.$spacing-unit;
|
||||
.Day__HeaderText {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
@use '../shared/variables' as shared;
|
||||
@use "sass:map";
|
||||
|
||||
// Content padding
|
||||
$content-padding-base: shared.$spacing-unit-double;
|
||||
$content-padding-border-compensation: shared.$border-size;
|
||||
$content-padding-border-compensation-magnify: shared.$border-size * 0.5;
|
||||
$content-padding-wrapper-compensation: shared.$week-wrapper-padding;
|
||||
|
||||
// Sizes
|
||||
$size-xl: (
|
||||
header-height: 48px,
|
||||
header-height-desktop: 56px,
|
||||
header-font: 1rem,
|
||||
header-font-desktop: 1.1rem
|
||||
);
|
||||
|
||||
$size-l: (
|
||||
header-height: 36px,
|
||||
header-height-desktop: 42px,
|
||||
header-font: 0.9rem,
|
||||
header-font-desktop: 1rem
|
||||
);
|
||||
|
||||
$size-m: (
|
||||
header-height: 32px,
|
||||
header-height-desktop: 36px,
|
||||
header-font: 0.8rem,
|
||||
header-font-desktop: 0.9rem
|
||||
);
|
||||
|
||||
$size-s: (
|
||||
header-height: 28px,
|
||||
header-height-desktop: 32px,
|
||||
header-font: 0.75rem,
|
||||
header-font-desktop: 0.8rem
|
||||
);
|
||||
|
||||
$size-xs: (
|
||||
header-height: 24px,
|
||||
header-height-desktop: 28px,
|
||||
header-font: 0.7rem,
|
||||
header-font-desktop: 0.75rem
|
||||
);
|
||||
|
||||
// Functions
|
||||
@function get-size-value($size, $property) {
|
||||
$size-map: null;
|
||||
|
||||
@if $size == 'xl' {
|
||||
$size-map: $size-xl;
|
||||
} @else if $size == 'l' {
|
||||
$size-map: $size-l;
|
||||
} @else if $size == 'm' {
|
||||
$size-map: $size-m;
|
||||
} @else if $size == 's' {
|
||||
$size-map: $size-s;
|
||||
} @else if $size == 'xs' {
|
||||
$size-map: $size-xs;
|
||||
}
|
||||
|
||||
@return map.get($size-map, $property);
|
||||
}
|
||||
@ -0,0 +1,86 @@
|
||||
import React, { useCallback, KeyboardEvent } from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import { getDayLabel } from '../utils';
|
||||
import styles from './Day.module.scss';
|
||||
import classNames from 'classnames';
|
||||
import { DayProps } from '../../../types/calendar';
|
||||
import { DayNumber } from '../DayNumber';
|
||||
|
||||
export const Day: React.FC<DayProps> = ({
|
||||
date,
|
||||
headerStyle,
|
||||
isOtherMonth,
|
||||
variations = [],
|
||||
onSelect,
|
||||
onHover,
|
||||
size = 'l',
|
||||
fontProportion = 100,
|
||||
magnify = false
|
||||
}) => {
|
||||
const isInteractive = Boolean(onSelect || onHover);
|
||||
|
||||
const handleKeyDown = useCallback((e: KeyboardEvent) => {
|
||||
if (!onSelect) return;
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onSelect();
|
||||
}
|
||||
}, [onSelect]);
|
||||
|
||||
const containerClasses = classNames(
|
||||
'Day__Container',
|
||||
styles.Day__Container,
|
||||
{
|
||||
[styles['Day__Container--interactive']]: isInteractive,
|
||||
[styles['Day__Container--otherMonth']]: isOtherMonth,
|
||||
[styles['Day__Container--selected']]: variations.includes('selected'),
|
||||
[styles['Day__Container--rangeStart']]: variations.includes('rangeStart'),
|
||||
[styles['Day__Container--rangeEnd']]: variations.includes('rangeEnd'),
|
||||
[styles['Day__Container--selecting']]: variations.includes('selecting'),
|
||||
[styles['Day__Container--greyed']]: variations.includes('greyed'),
|
||||
[styles['Day__Container--rowStart']]: variations.includes('rowStart'),
|
||||
[styles['Day__Container--rowEnd']]: variations.includes('rowEnd'),
|
||||
[styles['magnify']]: magnify && (variations.includes('selected') || variations.includes('selecting'))
|
||||
},
|
||||
styles[`Day--${headerStyle}`],
|
||||
styles[`Day--${size}`]
|
||||
);
|
||||
|
||||
const headerClasses = classNames(
|
||||
styles.Day__Header,
|
||||
{
|
||||
[styles['Day__Header--greyed']]: variations.includes('greyed')
|
||||
}
|
||||
);
|
||||
|
||||
const interactiveProps = isInteractive ? {
|
||||
onClick: onSelect,
|
||||
onMouseEnter: onHover,
|
||||
onKeyDown: handleKeyDown,
|
||||
role: "button",
|
||||
tabIndex: 0,
|
||||
"aria-label": `Select ${format(date, 'PPP')}`
|
||||
} : {};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={containerClasses}
|
||||
{...interactiveProps}
|
||||
>
|
||||
{headerStyle !== 'none' && (
|
||||
<div className={headerClasses}>
|
||||
<div className={styles.Day__HeaderText}>
|
||||
{getDayLabel(date, headerStyle)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.Day__Content}>
|
||||
<DayNumber
|
||||
number={parseInt(format(date, 'd'), 10)}
|
||||
proportion={fontProportion}
|
||||
isGreyed={variations.includes('greyed')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,17 @@
|
||||
import { HeaderStyle, DayVariation } from '../../../types/calendar';
|
||||
|
||||
export interface DayContainerProps {
|
||||
headerStyle: HeaderStyle;
|
||||
isOtherMonth?: boolean;
|
||||
variations?: DayVariation[];
|
||||
}
|
||||
|
||||
export interface DayHeaderProps {
|
||||
headerStyle: HeaderStyle;
|
||||
variations?: DayVariation[];
|
||||
}
|
||||
|
||||
export interface DayNumberProps {
|
||||
headerStyle: HeaderStyle;
|
||||
variations?: DayVariation[];
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
@use '../shared/colors' as shared;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.greyed {
|
||||
.text {
|
||||
fill: shared.$day-content-defaultmode-defaultstate-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
fill: shared.$day-content-defaultmode-defaultstate-color;
|
||||
font-weight: 700;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
font-feature-settings: 'tnum' on, 'lnum' on;
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
import React, { useRef, useEffect, useState } from 'react';
|
||||
import styles from './DayNumber.module.scss';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface DayNumberProps {
|
||||
number: number;
|
||||
proportion: number;
|
||||
isGreyed?: boolean;
|
||||
}
|
||||
|
||||
export const DayNumber: React.FC<DayNumberProps> = ({
|
||||
number,
|
||||
proportion,
|
||||
isGreyed
|
||||
}) => {
|
||||
const textRef = useRef<SVGTextElement>(null);
|
||||
const [scale, setScale] = useState({ x: 1, y: 1 });
|
||||
const isSingleDigit = number < 10;
|
||||
|
||||
useEffect(() => {
|
||||
if (textRef.current) {
|
||||
// Get the natural dimensions of the text
|
||||
const bbox = textRef.current.getBBox();
|
||||
const naturalWidth = bbox.width;
|
||||
const naturalHeight = bbox.height;
|
||||
|
||||
// Calculate desired width based on proportion and single/double digit
|
||||
const containerWidth = 100; // viewBox width
|
||||
const maxWidth = containerWidth * 0.8; // 80% of container width
|
||||
const baseWidth = maxWidth * (isSingleDigit ? 0.5 : 1);
|
||||
// Apply the proportion (0-100) to scale the base width
|
||||
const desiredWidth = baseWidth * (proportion / 100);
|
||||
|
||||
// Calculate scale factors
|
||||
const scaleX = desiredWidth / naturalWidth;
|
||||
// Use the same scale for height to maintain proportion
|
||||
const scaleY = scaleX;
|
||||
|
||||
setScale({ x: scaleX, y: scaleY });
|
||||
|
||||
// Debug log
|
||||
console.log(`Number: ${number}, Proportion: ${proportion}, Scale: ${scaleX}`);
|
||||
}
|
||||
}, [number, proportion, isSingleDigit]);
|
||||
|
||||
return (
|
||||
<div className={classNames(
|
||||
styles.container,
|
||||
{ [styles.greyed]: isGreyed }
|
||||
)}>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className={styles.svg}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="50"
|
||||
y="50"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
className={styles.text}
|
||||
transform={`matrix(${scale.x}, 0, 0, ${scale.y}, ${50 * (1 - scale.x)}, ${50 * (1 - scale.y)})`}
|
||||
>
|
||||
{number}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,103 @@
|
||||
@use '../shared/variables' as shared;
|
||||
@use '../shared/colors' as colors;
|
||||
|
||||
.Month {
|
||||
width: 100%;
|
||||
background: colors.$content-normal-bg; // replaced shared.$content-background-color
|
||||
border-radius: shared.$border-radius-sm;
|
||||
overflow: hidden;
|
||||
box-shadow: shared.$shadow-month;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
border-radius: shared.$border-radius;
|
||||
}
|
||||
|
||||
&__Container {
|
||||
display: flex;
|
||||
gap: shared.$spacing-unit;
|
||||
background: colors.$content-normal-bg; // replaced shared.$content-background-color-selecting
|
||||
padding: 0.75rem;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
gap: shared.$spacing-unit-double;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
&--row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&--column {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__Title {
|
||||
font-size: 1.25rem;
|
||||
padding: shared.$spacing-unit-double;
|
||||
margin: 0;
|
||||
color: colors.$day-content-defaultmode-defaultstate-color; // replaced shared.$day-content-defaultmode-defaultstate-color
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
border-bottom: shared.$border-size solid colors.$border-color; // replaced shared.$border-color
|
||||
background: colors.$content-normal-bg; // replaced shared.$content-background-color
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
font-size: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__WeeksContainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: shared.$spacing-unit;
|
||||
min-width: 0;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
gap: shared.$spacing-unit-double;
|
||||
}
|
||||
}
|
||||
|
||||
&__DayHeadersRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: shared.$spacing-unit;
|
||||
margin-bottom: shared.$spacing-unit;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
gap: shared.$spacing-unit-double;
|
||||
margin-bottom: shared.$spacing-unit-double;
|
||||
}
|
||||
}
|
||||
|
||||
&__DayHeader {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.4rem 0.1rem;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
background: transparent;
|
||||
color: colors.$content-normal-text; // replaced shared.$header-color
|
||||
border-bottom: shared.$spacing-unit solid colors.$header-normal-bg; // replaced shared.$header-background-color
|
||||
|
||||
&--weekend {
|
||||
color: colors.$day-header-greyedmode-defaultstate-color; // replaced shared.$header-color-greyed
|
||||
border-bottom-color: colors.$day-header-greyedmode-defaultstate-background-color; // replaced shared.$header-background-color-greyed
|
||||
}
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.5rem 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,86 @@
|
||||
import React from 'react';
|
||||
import { startOfMonth, startOfWeek, addDays, addWeeks, endOfMonth, format } from 'date-fns';
|
||||
import { MonthProps, HeaderStyle } from '../../../types/calendar';
|
||||
import { Week } from '../Week';
|
||||
import styles from './Month.module.scss';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export const Month: React.FC<MonthProps> = ({
|
||||
date,
|
||||
dayHeaderStyle,
|
||||
monthDayOfWeekHeaderStyle,
|
||||
direction,
|
||||
monthCutoff,
|
||||
weekendDays = [6, 0],
|
||||
dateRange,
|
||||
onDateSelect,
|
||||
onDateHover,
|
||||
size = 'l',
|
||||
fontProportion = 100,
|
||||
magnify = false
|
||||
}) => {
|
||||
const monthStart = startOfMonth(date);
|
||||
const start = startOfWeek(monthStart, { weekStartsOn: 1 });
|
||||
const end = endOfMonth(date);
|
||||
const referenceMonth = date.getMonth();
|
||||
const weeks: JSX.Element[] = [];
|
||||
|
||||
const effectiveMonthDayOfWeekHeaderStyle: HeaderStyle = monthDayOfWeekHeaderStyle ??
|
||||
(dayHeaderStyle === 'none' ? 'compacted' : 'none');
|
||||
|
||||
let current = start;
|
||||
|
||||
while (current <= end) {
|
||||
weeks.push(
|
||||
<Week
|
||||
key={current.toISOString()}
|
||||
startDate={current}
|
||||
headerStyle={dayHeaderStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
referenceMonth={referenceMonth}
|
||||
weekendDays={weekendDays}
|
||||
dateRange={dateRange}
|
||||
onDateSelect={onDateSelect}
|
||||
onDateHover={onDateHover}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
magnify={magnify}
|
||||
/>
|
||||
);
|
||||
current = addWeeks(current, 1);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.Month}>
|
||||
<h2 className={styles.Month__Title}>{format(date, 'MMMM yyyy')}</h2>
|
||||
<div className={classNames(styles.Month__Container, {
|
||||
[styles['Month__Container--row']]: direction === 'row',
|
||||
[styles['Month__Container--column']]: direction === 'column'
|
||||
})}>
|
||||
{effectiveMonthDayOfWeekHeaderStyle !== 'none' && (
|
||||
<div className={styles.Month__DayHeadersRow}>
|
||||
{Array.from({ length: 7 }, (_, i) => {
|
||||
const dayDate = addDays(start, i);
|
||||
const dayOfWeek = dayDate.getDay();
|
||||
const isWeekend = weekendDays.includes(dayOfWeek);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={classNames(styles.Month__DayHeader, {
|
||||
[styles['Month__DayHeader--weekend']]: isWeekend
|
||||
})}
|
||||
>
|
||||
{format(dayDate, 'EEEEE')}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.Month__WeeksContainer}>
|
||||
{weeks}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,56 @@
|
||||
@use '../shared/variables' as shared;
|
||||
@use '../shared/colors' as colors;
|
||||
|
||||
.Week {
|
||||
&__Container {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
&__DayWrapper {
|
||||
padding: shared.$week-wrapper-padding;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
padding: shared.$week-wrapper-padding-desktop;
|
||||
}
|
||||
|
||||
&--rangeStart:not(.Week__DayWrapper--rangeEnd),
|
||||
&--selected.Week__DayWrapper--rowStart:not(.Week__DayWrapper--rowEnd),
|
||||
&--selecting.Week__DayWrapper--rowStart:not(.Week__DayWrapper--rowEnd) {
|
||||
padding: shared.$week-wrapper-padding 0 shared.$week-wrapper-padding shared.$week-wrapper-padding;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
padding: shared.$week-wrapper-padding-desktop 0 shared.$week-wrapper-padding-desktop shared.$week-wrapper-padding-desktop;
|
||||
}
|
||||
}
|
||||
|
||||
&--rangeEnd:not(.Week__DayWrapper--rangeStart),
|
||||
&--selected.Week__DayWrapper--rowEnd:not(.Week__DayWrapper--rowStart),
|
||||
&--selecting.Week__DayWrapper--rowEnd:not(.Week__DayWrapper--rowStart) {
|
||||
padding: shared.$week-wrapper-padding shared.$week-wrapper-padding shared.$week-wrapper-padding 0;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
padding: shared.$week-wrapper-padding-desktop shared.$week-wrapper-padding-desktop shared.$week-wrapper-padding-desktop 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--selected:not(&--rangeStart):not(&--rangeEnd):not(&--rowStart):not(&--rowEnd),
|
||||
&--selecting:not(&--rangeStart):not(&--rangeEnd):not(&--rowStart):not(&--rowEnd) {
|
||||
padding: shared.$week-wrapper-padding 0;
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
padding: shared.$week-wrapper-padding-desktop 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__EmptyCell {
|
||||
padding: shared.$week-wrapper-padding;
|
||||
background: colors.$content-normal-bg; // replaced shared.$content-background-color
|
||||
|
||||
@media (min-width: shared.$breakpoint-tablet) {
|
||||
padding: shared.$week-wrapper-padding-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import { addDays } from 'date-fns';
|
||||
import { WeekProps } from '../../../types/calendar';
|
||||
import { Day } from '../Day';
|
||||
import { getDateVariations } from '../../../utils/dateUtils';
|
||||
import styles from './Week.module.scss';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export const Week: React.FC<WeekProps> = ({
|
||||
startDate,
|
||||
headerStyle,
|
||||
monthCutoff,
|
||||
referenceMonth,
|
||||
weekendDays = [6, 0],
|
||||
dateRange,
|
||||
onDateSelect,
|
||||
onDateHover,
|
||||
size = 'l',
|
||||
fontProportion = 100,
|
||||
magnify = false
|
||||
}) => {
|
||||
const allDays = Array.from({ length: 7 }, (_, i) => {
|
||||
const date = addDays(startDate, i);
|
||||
const isOtherMonth = date.getMonth() !== referenceMonth;
|
||||
const variations = getDateVariations(date, dateRange, weekendDays, i);
|
||||
|
||||
const wrapperClasses = classNames(
|
||||
styles.Week__DayWrapper,
|
||||
{
|
||||
[styles['Week__DayWrapper--rangeStart']]: variations.includes('rangeStart'),
|
||||
[styles['Week__DayWrapper--rangeEnd']]: variations.includes('rangeEnd'),
|
||||
[styles['Week__DayWrapper--selected']]: variations.includes('selected'),
|
||||
[styles['Week__DayWrapper--selecting']]: variations.includes('selecting'),
|
||||
[styles['Week__DayWrapper--rowStart']]: variations.includes('rowStart'),
|
||||
[styles['Week__DayWrapper--rowEnd']]: variations.includes('rowEnd')
|
||||
}
|
||||
);
|
||||
|
||||
if (monthCutoff && isOtherMonth) {
|
||||
if (monthCutoff === 'truncate') {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className={wrapperClasses} key={i}>
|
||||
<Day
|
||||
date={date}
|
||||
headerStyle={headerStyle}
|
||||
isOtherMonth={true}
|
||||
variations={variations}
|
||||
onSelect={onDateSelect ? () => onDateSelect(date) : undefined}
|
||||
onHover={onDateHover ? () => onDateHover(date) : undefined}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
magnify={magnify}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={wrapperClasses} key={i}>
|
||||
<Day
|
||||
date={date}
|
||||
headerStyle={headerStyle}
|
||||
variations={variations}
|
||||
onSelect={onDateSelect ? () => onDateSelect(date) : undefined}
|
||||
onHover={onDateHover ? () => onDateHover(date) : undefined}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
magnify={magnify}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const firstValidIndex = allDays.findIndex(Boolean);
|
||||
const lastValidIndex = allDays.length - [...allDays].reverse().findIndex(Boolean) - 1;
|
||||
|
||||
if (monthCutoff === 'truncate') {
|
||||
const truncatedDays = Array.from({ length: 7 }, (_, i) => {
|
||||
if (i < firstValidIndex || i > lastValidIndex) {
|
||||
return <div key={i} className={styles.Week__EmptyCell} />;
|
||||
}
|
||||
return allDays[i];
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={styles.Week__Container}>
|
||||
{truncatedDays}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.Week__Container}>
|
||||
{allDays}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -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[];
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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<YearProps> = ({
|
||||
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 (
|
||||
<Month
|
||||
key={index}
|
||||
date={monthDate}
|
||||
dayHeaderStyle={dayHeaderStyle}
|
||||
monthDayOfWeekHeaderStyle={monthDayOfWeekHeaderStyle}
|
||||
direction="column"
|
||||
monthCutoff={monthCutoff}
|
||||
weekendDays={weekendDays}
|
||||
dateRange={dateRange}
|
||||
onDateSelect={onDateSelect}
|
||||
onDateHover={onDateHover}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
magnify={magnify}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={styles.Year__Wrapper}>
|
||||
<h1 className={styles.Year__Title}>{year}</h1>
|
||||
<div className={styles.Year__MonthsGrid}>
|
||||
{months}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -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%);
|
||||
@ -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;
|
||||
@ -0,0 +1,51 @@
|
||||
import { HeaderStyle } from '../../types/calendar';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
export const getHeightByHeaderStyle = (headerStyle: HeaderStyle) => {
|
||||
const baseHeights: Record<HeaderStyle, [string, string]> = {
|
||||
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<HeaderStyle, string> = {
|
||||
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;
|
||||
}
|
||||
};
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import styles from './Button.module.scss';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
export const Button: React.FC<ButtonProps> = ({
|
||||
children,
|
||||
active,
|
||||
className,
|
||||
...props
|
||||
}) => (
|
||||
<button
|
||||
className={classNames(styles.button, { [styles.active]: active }, className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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<ButtonGroupProps> = ({ children, className }) => (
|
||||
<div className={classNames(styles.buttonGroup, className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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<RangeInputProps> = ({
|
||||
value,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
onChange,
|
||||
label
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.labelContainer}>
|
||||
<label className={styles.label}>{label}</label>
|
||||
<span className={styles.value}>{value}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={value}
|
||||
onChange={(e) => onChange(Number(e.target.value))}
|
||||
className={styles.range}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -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<HeaderStyle>('tiny');
|
||||
const [monthCutoff, setMonthCutoff] = useState<MonthCutoffType>('truncate');
|
||||
const [fontProportion, setFontProportion] = useState<number>(100);
|
||||
const [magnify, setMagnify] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<section className={styles.section}>
|
||||
<h2 className={styles.sectionTitle}>Compact Year View</h2>
|
||||
<p className={styles.sectionDescription}>
|
||||
Full year view optimized for compact display.
|
||||
</p>
|
||||
<Controls
|
||||
headerStyle={dayHeaderStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
magnify={magnify}
|
||||
size="xs"
|
||||
fontProportion={fontProportion}
|
||||
onHeaderStyleChange={setDayHeaderStyle}
|
||||
onMonthCutoffChange={setMonthCutoff}
|
||||
onMagnifyChange={setMagnify}
|
||||
onSizeChange={() => {}}
|
||||
onFontProportionChange={setFontProportion}
|
||||
/>
|
||||
<div className={styles.demoContainer}>
|
||||
<Year
|
||||
year={2025}
|
||||
dayHeaderStyle={dayHeaderStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
weekendDays={[6, 0]}
|
||||
size="xs"
|
||||
fontProportion={fontProportion}
|
||||
magnify={magnify}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@ -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<DateRange>({
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
selecting: false,
|
||||
hoverDate: null,
|
||||
anchorDate: null
|
||||
});
|
||||
|
||||
const [dayHeaderStyle, setDayHeaderStyle] = useState<HeaderStyle>('tiny');
|
||||
const [monthCutoff, setMonthCutoff] = useState<MonthCutoffType>('truncate');
|
||||
const [size, setSize] = useState<DaySize>('l');
|
||||
const [fontProportion, setFontProportion] = useState<number>(100);
|
||||
const [magnify, setMagnify] = useState<boolean>(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 (
|
||||
<section className={styles.section}>
|
||||
<h2 className={styles.sectionTitle}>Date Range Picker</h2>
|
||||
<p className={styles.sectionDescription}>
|
||||
Click to select start date, then hover and click to select end date.
|
||||
</p>
|
||||
<Controls
|
||||
headerStyle={dayHeaderStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
magnify={magnify}
|
||||
onHeaderStyleChange={setDayHeaderStyle}
|
||||
onMonthCutoffChange={setMonthCutoff}
|
||||
onSizeChange={setSize}
|
||||
onFontProportionChange={setFontProportion}
|
||||
onMagnifyChange={setMagnify}
|
||||
/>
|
||||
<div className={styles.demoContainer}>
|
||||
<Year
|
||||
year={2025}
|
||||
dayHeaderStyle={dayHeaderStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
weekendDays={[6, 0]}
|
||||
dateRange={dateRange}
|
||||
onDateSelect={handleDateSelect}
|
||||
onDateHover={handleDateHover}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
magnify={magnify}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.rangeInfo}>
|
||||
<div>Start Date: {formatDateOrNull(dateRange.startDate)}</div>
|
||||
<div>End Date: {formatDateOrNull(dateRange.endDate)}</div>
|
||||
<div>Selecting: {dateRange.selecting ? 'Yes' : 'No'}</div>
|
||||
<div>Hover Date: {formatDateOrNull(dateRange.hoverDate)}</div>
|
||||
<div>Anchor Date: {formatDateOrNull(dateRange.anchorDate)}</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@ -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;
|
||||
}
|
||||
@ -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<HeaderStyle>('tiny');
|
||||
const [monthCutoff, setMonthCutoff] = useState<MonthCutoffType>('truncate');
|
||||
const [size, setSize] = useState<DaySize>('l');
|
||||
const [fontProportion, setFontProportion] = useState<number>(100);
|
||||
|
||||
return (
|
||||
<section className={styles.section}>
|
||||
<h2 className={styles.sectionTitle}>Single Month View</h2>
|
||||
<p className={styles.sectionDescription}>
|
||||
Showcase of a single month component with various styling options.
|
||||
</p>
|
||||
<Controls
|
||||
headerStyle={dayHeaderStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
onHeaderStyleChange={setDayHeaderStyle}
|
||||
onMonthCutoffChange={setMonthCutoff}
|
||||
onSizeChange={setSize}
|
||||
onFontProportionChange={setFontProportion}
|
||||
/>
|
||||
<div className={styles.demoContainer}>
|
||||
<Month
|
||||
date={new Date(2025, 0, 1)}
|
||||
dayHeaderStyle={dayHeaderStyle}
|
||||
direction="column"
|
||||
monthCutoff={monthCutoff}
|
||||
weekendDays={[6, 0]}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@ -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<HeaderStyle>('tiny');
|
||||
const [monthCutoff, setMonthCutoff] = useState<MonthCutoffType>('truncate');
|
||||
const [size, setSize] = useState<DaySize>('l');
|
||||
const [fontProportion, setFontProportion] = useState<number>(100);
|
||||
|
||||
return (
|
||||
<section className={styles.section}>
|
||||
<h2 className={styles.sectionTitle}>Week View</h2>
|
||||
<p className={styles.sectionDescription}>
|
||||
Display of a single week with various styling options.
|
||||
</p>
|
||||
<Controls
|
||||
headerStyle={dayHeaderStyle}
|
||||
monthCutoff={monthCutoff}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
onHeaderStyleChange={setDayHeaderStyle}
|
||||
onMonthCutoffChange={setMonthCutoff}
|
||||
onSizeChange={setSize}
|
||||
onFontProportionChange={setFontProportion}
|
||||
/>
|
||||
<div className={styles.demoContainer}>
|
||||
<Week
|
||||
startDate={new Date(2025, 0, 1)}
|
||||
headerStyle={dayHeaderStyle}
|
||||
referenceMonth={0}
|
||||
weekendDays={[6, 0]}
|
||||
size={size}
|
||||
fontProportion={fontProportion}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
// src/global.d.ts
|
||||
declare module '*.module.scss' {
|
||||
const classes: { [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
@ -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(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
)
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.module.scss' {
|
||||
const classes: { [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
css: {
|
||||
modules: {
|
||||
localsConvention: 'camelCase'
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue