From d52f779b9b062f978d8a83201b4375249eaecc5a Mon Sep 17 00:00:00 2001 From: Guillermo Pages Date: Wed, 16 Jul 2025 19:31:31 +0200 Subject: [PATCH] docs: customize --- .npmignore | 46 +++++ README.md | 178 ++++++++++++++++++-- src/components/calendar/shared/_colors.scss | 38 +++-- src/index.ts | 23 +++ vite.config.lib.ts | 33 ++++ 5 files changed, 297 insertions(+), 21 deletions(-) create mode 100644 .npmignore create mode 100644 src/index.ts create mode 100644 vite.config.lib.ts diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..244926e --- /dev/null +++ b/.npmignore @@ -0,0 +1,46 @@ +# Source files +src/ +!dist/ + +# Development files +.git/ +.github/ +.vscode/ +node_modules/ + +# Config files +vite.config.ts +vite.config.lib.ts +tsconfig.json +tsconfig.node.json +.gitignore + +# Example and demo files +src/examples/ +src/App.tsx +src/App.module.scss +src/main.tsx +src/index.css +public/ +index.html + +# Documentation +README.md +*.log + +# Build files +.DS_Store +*.local + +# Docker files +Dockerfile +docker-compose.yml +.dockerignore +.env* + +# CI/CD files +.drone.yml +.deploy.yml + +# Keep the npm README +!README-npm.md \ No newline at end of file diff --git a/README.md b/README.md index 60d59a0..7a6bc7b 100644 --- a/README.md +++ b/README.md @@ -200,22 +200,180 @@ function InteractiveCalendar() { } ``` -## Styling +## Customization -The components use CSS modules and CSS variables for theming. You can override the default styles by: +### 1. Built-in Props -1. Using the built-in props for common customizations -2. Overriding CSS variables in your global styles -3. Applying custom CSS classes +The easiest way to customize the calendar is through props: -### CSS Variables +```tsx + +``` + +### 2. CSS Variables + +Override CSS variables in your global styles for theme customization: + +```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; +} + +/* Dark theme example */ +[data-theme="dark"] { + --rc-background: #1a1a1a; + --rc-text: #ffffff; + --rc-border: #333333; + --rc-hover: #2a2a2a; +} +``` + +### 3. Custom Styling + +The components use CSS modules with predictable class names: + +```css +/* Target specific components */ +.rc_Month__Container { + /* Custom month container styles */ +} + +.rc_Day__Container { + /* Custom day styles */ +} + +.rc_Day__Container--selected { + /* Custom selected day styles */ +} + +.rc_Day__Container--active { + /* Custom active day styles */ +} + +/* Custom weekend styling */ +.rc_Day__Container--greyed { + opacity: 0.5; +} +``` + +### 4. Size Customization + +Create custom sizes beyond the built-in options: + +```css +/* Custom size classes */ +.rc_Day--custom .rc_Day__Header { + height: 64px; + font-size: 1.2rem; +} + +.rc_Day--custom .rc_Day__Content { + height: 128px; /* 2x header height */ +} +``` + +Then use it: +```tsx + +``` + +### 5. Complete Theme Example ```css +/* Purple theme */ :root { - --color-primary: #2196f3; - --color-primary-dark: #1976d2; - --color-selected: #e3f2fd; - /* ... and more */ + --rc-primary: #7c3aed; + --rc-primary-dark: #6d28d9; + --rc-selected: #ede9fe; + --rc-selected-hover: #ddd6fe; + --rc-text: #1f2937; + --rc-hover: #f3f4f6; +} + +/* Rounded corners */ +.rc_Day__Container { + border-radius: 12px; + overflow: hidden; +} + +/* Spacing between days */ +.rc_Week__Container { + gap: 4px; +} + +/* Custom header style */ +.rc_Day__Header { + text-transform: uppercase; + letter-spacing: 0.05em; + font-weight: 600; +} +``` + +### 6. Advanced Customization + +For complete control, you can: + +1. **Import SCSS variables** (if using Sass): +```scss +@use 'react-calendario/styles/variables' as rc; + +.custom-calendar { + padding: rc.$week-wrapper-padding; +} +``` + +2. **Override specific component styles**: +```css +/* Remove borders */ +.rc_Day__Container { + border: none; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +/* Custom hover effect */ +.rc_Day__Container--interactive:hover { + transform: scale(1.05); + transition: transform 0.2s; +} +``` + +3. **Customize date number rendering**: +```css +/* Circle style for dates */ +.rc_DayNumber__Container { + background: #f0f0f0; + border-radius: 50%; + width: 32px; + height: 32px; + margin: auto; } ``` diff --git a/src/components/calendar/shared/_colors.scss b/src/components/calendar/shared/_colors.scss index 6f6915e..1318f7e 100644 --- a/src/components/calendar/shared/_colors.scss +++ b/src/components/calendar/shared/_colors.scss @@ -1,5 +1,21 @@ @use "sass:color"; +// CSS Variables for customization +:root { + --rc-primary: #2196f3; + --rc-primary-dark: #1976d2; + --rc-selected: #e3f2fd; + --rc-selected-hover: #bbdefb; + --rc-text: #2c2c2c; + --rc-text-light: #757575; + --rc-background: white; + --rc-hover: #f5f5f5; + --rc-greyed: #bcbcbc; + --rc-border: #f0f0f0; + --rc-header-bg: #2c2c2c; + --rc-header-text: white; +} + // ----------------------------------------------------------------------------- // BORDER COLORS // ----------------------------------------------------------------------------- @@ -7,19 +23,19 @@ $border-color: #e5e5e5; // ---------------------------------- -// 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 +// 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 // 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-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-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 diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..719e11b --- /dev/null +++ b/src/index.ts @@ -0,0 +1,23 @@ +// Components +export { Year } from './components/calendar/Year'; +export { Month } from './components/calendar/Month'; +export { Week } from './components/calendar/Week'; +export { DateRange } from './components/calendar/DateRange'; +export { Day } from './components/calendar/Day'; + +// Types +export type { + DateRange as DateRangeType, + HeaderStyle, + MonthCutoffType, + DirectionType, + DayVariation, + DaySize, + YearProps, + MonthProps, + WeekProps, + DayProps +} from './types/calendar'; + +// Utilities (if needed by consumers) +export { getDateVariations } from './utils/dateUtils'; \ No newline at end of file diff --git a/vite.config.lib.ts b/vite.config.lib.ts new file mode 100644 index 0000000..3b36b6e --- /dev/null +++ b/vite.config.lib.ts @@ -0,0 +1,33 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import { fileURLToPath } from 'node:url'; + +export default defineConfig({ + plugins: [react()], + build: { + lib: { + entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)), + name: 'ReactCalendario', + formats: ['es', 'umd'], + fileName: (format) => `index.${format}.js` + }, + rollupOptions: { + external: ['react', 'react-dom', 'react/jsx-runtime'], + output: { + globals: { + react: 'React', + 'react-dom': 'ReactDOM', + 'react/jsx-runtime': 'react/jsx-runtime' + } + } + }, + outDir: 'dist', + sourcemap: true, + emptyOutDir: true + }, + css: { + modules: { + generateScopedName: 'rc_[local]_[hash:base64:5]' + } + } +}); \ No newline at end of file