From d492bac1557be36b83b8716b0331ac5b82371e55 Mon Sep 17 00:00:00 2001 From: Guillermo Pages Date: Wed, 16 Jul 2025 19:47:22 +0200 Subject: [PATCH] fix: tsc errors --- README.md | 58 ++++++++++----------- package.json | 2 +- src/components/calendar/DateRange/index.tsx | 2 +- src/components/calendar/Month/index.tsx | 2 +- src/components/calendar/shared/_colors.scss | 22 ++++---- 5 files changed, 43 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index 7a6bc7b..b7e5bca 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ yarn add react-calendario date-fns classnames ```tsx import { Month } from 'react-calendario'; +import 'react-calendario/dist/react-calendario.css'; function App() { return ( @@ -218,41 +219,40 @@ The easiest way to customize the calendar is through props: /> ``` -### 2. CSS Variables +### 2. Theming with CSS -Override CSS variables in your global styles for theme customization: +The library uses CSS modules with predictable class names (prefixed with `rc_`). While the internal Sass variables don't support CSS custom properties due to color manipulation functions, you can still customize the appearance through CSS overrides: ```css -:root { - /* Primary colors */ - --rc-primary: #2196f3; - --rc-primary-dark: #1976d2; - - /* Selection colors */ - --rc-selected: #e3f2fd; - --rc-selected-hover: #bbdefb; - - /* Text colors */ - --rc-text: #2c2c2c; - --rc-text-light: #757575; - - /* Background colors */ - --rc-background: white; - --rc-hover: #f5f5f5; - - /* Weekend/disabled colors */ - --rc-greyed: #bcbcbc; - - /* Border colors */ - --rc-border: #f0f0f0; +/* Override component styles */ +.rc_Day__Container { + background: var(--my-bg-color, white); + color: var(--my-text-color, #2c2c2c); + border-color: var(--my-border-color, #f0f0f0); +} + +.rc_Day__Header { + background: var(--my-header-bg, #2c2c2c); + color: var(--my-header-text, white); } -/* Dark theme example */ +/* Custom theme example */ [data-theme="dark"] { - --rc-background: #1a1a1a; - --rc-text: #ffffff; - --rc-border: #333333; - --rc-hover: #2a2a2a; + --my-bg-color: #1a1a1a; + --my-text-color: #ffffff; + --my-border-color: #333333; + --my-header-bg: #2a2a2a; + --my-header-text: #ffffff; +} + +/* Selected state */ +.rc_Day__Container--selected { + background: var(--my-selected-bg, #e3f2fd) !important; +} + +/* Hover state */ +.rc_Day__Container--interactive:hover { + background: var(--my-hover-bg, #f5f5f5); } ``` diff --git a/package.json b/package.json index 5dbf5d7..171d2c4 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "scripts": { "dev": "vite", "build": "tsc && vite build", - "build:lib": "tsc --declaration --emitDeclarationOnly --outDir dist && vite build --config vite.config.lib.ts", + "build:lib": "tsc -p tsconfig.build.json && vite build --config vite.config.lib.ts", "preview": "vite preview", "prepublishOnly": "npm run build:lib" }, diff --git a/src/components/calendar/DateRange/index.tsx b/src/components/calendar/DateRange/index.tsx index 022c5d7..68d260e 100644 --- a/src/components/calendar/DateRange/index.tsx +++ b/src/components/calendar/DateRange/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { eachDayOfInterval, startOfDay } from 'date-fns'; import { Day } from '../Day'; import { getDateVariations } from '../../../utils/dateUtils'; -import { HeaderStyle, DaySize } from '../../../types/calendar'; +import { HeaderStyle, DaySize, DayVariation } from '../../../types/calendar'; import styles from './DateRange.module.scss'; import classNames from 'classnames'; diff --git a/src/components/calendar/Month/index.tsx b/src/components/calendar/Month/index.tsx index ba29bf9..8fff541 100644 --- a/src/components/calendar/Month/index.tsx +++ b/src/components/calendar/Month/index.tsx @@ -23,7 +23,7 @@ export const Month: React.FC = ({ const start = startOfWeek(monthStart, { weekStartsOn: 1 }); const end = endOfMonth(date); const referenceMonth = date.getMonth(); - const weeks: JSX.Element[] = []; + const weeks: React.JSX.Element[] = []; const effectiveMonthDayOfWeekHeaderStyle: HeaderStyle = monthDayOfWeekHeaderStyle ?? (dayHeaderStyle === 'none' ? 'compacted' : 'none'); diff --git a/src/components/calendar/shared/_colors.scss b/src/components/calendar/shared/_colors.scss index 1318f7e..074ccf7 100644 --- a/src/components/calendar/shared/_colors.scss +++ b/src/components/calendar/shared/_colors.scss @@ -23,19 +23,19 @@ $border-color: #e5e5e5; // ---------------------------------- -// Colors - using CSS variables with fallbacks -$day-color-primary: var(--rc-primary, #2196f3); // day default mode selected sate container -$day-color-primary-dark: var(--rc-primary-dark, #1976d2); // day default mode selected sate header -$day-color-background: var(--rc-background, white); // day default mode default state container background -$day-color-border: var(--rc-border, #f0f0f0); // any day container border -$day-color-text: var(--rc-text, #2c2c2c); // day default mode default state container text color -$day-color-text-light: var(--rc-text-light, #757575); // day greyed mode default state text color -$day-color-hover: var(--rc-hover, #f5f5f5); // day default mode default state hover container -$day-color-greyed: var(--rc-greyed, #bcbcbc); // day greyed mode default state container +// Colors - Note: Colors used in Sass functions cannot use CSS variables +$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: var(--rc-selected, #e3f2fd); // day default mode selected state container -$day-color-selected-hover: var(--rc-selected-hover, #bbdefb); // day default mode selected state hover container +$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-rangestartend-content: #aeaeae; // day default mode selecting state container $day-color-selecting-border: #e0e0e0; // day default|greyed mode selecting container border