gbili
/
calendar-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: remove unused and use bem

Browse Source
master
Guillermo Pages 10 months ago
parent 9f441c31c7
commit 416c6895b0
11 changed files with 126 additions and 119 deletions
Show Stats Download Patch File Download Diff File

4
src/App.module.scss
Unescape Escape View File

@ -1,3 +1,5 @@
@use '../shared/colors' as colors;
.container { .container {
padding: 1rem; padding: 1rem;
width: 100%; width: 100%;
@ -25,7 +27,7 @@
.sectionTitle { .sectionTitle {
font-size: 2rem; font-size: 2rem;
margin: 0 0 1rem; margin: 0 0 1rem;
color: #2c2c2c; color: colors.$day-color-text;
} }
.sectionDescription { .sectionDescription {

83
src/components/calendar/DayNumber/DayNumber.module.scss
Unescape Escape View File

@ -1,27 +1,64 @@
@use '../shared/colors' as shared; @use '../shared/colors' as colors;
.container { .DayNumber {
width: 100%; &__Container {
height: 100%; width: 100%;
display: flex; height: 100%;
align-items: center; display: flex;
justify-content: center; align-items: center;
justify-content: center;
&.greyed {
.text {
fill: shared.$day-content-defaultmode-defaultstate-color;
}
} }
}
.svg { &__Svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&__Text {
fill: colors.$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;
// Greyed state
&--greyed {
fill: colors.$day-content-greyedmode-defaultstate-color;
}
// Selected states
&--selected {
fill: colors.$day-content-defaultmode-selectedstate-midrange-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectedstate-midrange-color;
}
}
// Selecting states
&--selecting {
fill: colors.$day-content-defaultmode-selectingstate-midrange-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectingstate-midrange-color;
}
}
// Range start
&--rangeStart:not(&--rangeEnd) {
fill: colors.$day-content-defaultmode-selectedstate-rangestart-color;
.text { .DayNumber__Container--greyed & {
fill: shared.$day-content-defaultmode-defaultstate-color; fill: colors.$day-content-greyedmode-selectedstate-rangestart-color;
font-weight: 700; }
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
font-feature-settings: 'tnum' on, 'lnum' on;
// Range end
&--rangeEnd:not(&--rangeStart) {
fill: colors.$day-content-defaultmode-selectedstate-rangeend-color;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectedstate-rangeend-color;
}
}
}
} }

69
src/components/calendar/DayNumber/index.tsx
Unescape Escape View File

@ -1,58 +1,69 @@
import React, { useRef, useEffect, useState } from 'react'; import React, { useRef, useEffect, useState } from 'react';
import styles from './DayNumber.module.scss'; import styles from './DayNumber.module.scss';
import classNames from 'classnames'; import classNames from 'classnames';
import { DayVariation } from '../../../types/calendar';
interface DayNumberProps { interface DayNumberProps {
number: number; number: number;
proportion: number; proportion: number;
isGreyed?: boolean; variations?: DayVariation[];
} }
export const DayNumber: React.FC<DayNumberProps> = ({ export const DayNumber: React.FC<DayNumberProps> = ({
number, number,
proportion, proportion,
isGreyed variations = []
}) => { }) => {
const textRef = useRef<SVGTextElement>(null); const textRef = useRef<SVGTextElement>(null);
const [scale, setScale] = useState({ x: 1, y: 1 }); const [scale, setScale] = useState({ x: 1, y: 1 });
const isSingleDigit = number < 10; const isSingleDigit = number < 10;
useEffect(() => { useEffect(() => {
if (textRef.current) { if (textRef.current) {
// Get the natural dimensions of the text
const bbox = textRef.current.getBBox(); const bbox = textRef.current.getBBox();
const naturalWidth = bbox.width; const naturalWidth = bbox.width;
const naturalHeight = bbox.height;
const containerWidth = 100;
// Calculate desired width based on proportion and single/double digit const maxWidth = containerWidth * 0.8;
const containerWidth = 100; // viewBox width
const maxWidth = containerWidth * 0.8; // 80% of container width
const baseWidth = maxWidth * (isSingleDigit ? 0.5 : 1); const baseWidth = maxWidth * (isSingleDigit ? 0.5 : 1);
// Apply the proportion (0-100) to scale the base width
const desiredWidth = baseWidth * (proportion / 100); const desiredWidth = baseWidth * (proportion / 100);
// Calculate scale factors
const scaleX = desiredWidth / naturalWidth; const scaleX = desiredWidth / naturalWidth;
// Use the same scale for height to maintain proportion
const scaleY = scaleX; const scaleY = scaleX;
setScale({ x: scaleX, y: scaleY }); setScale({ x: scaleX, y: scaleY });
// Debug log
console.log(`Number: ${number}, Proportion: ${proportion}, Scale: ${scaleX}`);
} }
}, [number, proportion, isSingleDigit]); }, [number, proportion, isSingleDigit]);
const containerClasses = classNames(
styles.DayNumber__Container,
{
[styles['DayNumber__Container--greyed']]: variations.includes('greyed'),
[styles['DayNumber__Container--selected']]: variations.includes('selected'),
[styles['DayNumber__Container--selecting']]: variations.includes('selecting'),
[styles['DayNumber__Container--rangeStart']]: variations.includes('rangeStart'),
[styles['DayNumber__Container--rangeEnd']]: variations.includes('rangeEnd'),
}
);
const textClasses = classNames(
styles.DayNumber__Text,
{
[styles['DayNumber__Text--greyed']]: variations.includes('greyed'),
[styles['DayNumber__Text--selected']]: variations.includes('selected'),
[styles['DayNumber__Text--selecting']]: variations.includes('selecting'),
[styles['DayNumber__Text--rangeStart']]: variations.includes('rangeStart'),
[styles['DayNumber__Text--rangeEnd']]: variations.includes('rangeEnd'),
}
);
return ( return (
<div className={classNames( <div className={containerClasses}>
styles.container, <svg
{ [styles.greyed]: isGreyed } viewBox="0 0 100 100"
)}> width="100%"
<svg height="100%"
viewBox="0 0 100 100" className={styles.DayNumber__Svg}
width="100%"
height="100%"
className={styles.svg}
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"
> >
<text <text
@ -61,7 +72,7 @@ export const DayNumber: React.FC<DayNumberProps> = ({
y="50" y="50"
textAnchor="middle" textAnchor="middle"
dominantBaseline="central" dominantBaseline="central"
className={styles.text} className={textClasses}
transform={`matrix(${scale.x}, 0, 0, ${scale.y}, ${50 * (1 - scale.x)}, ${50 * (1 - scale.y)})`} transform={`matrix(${scale.x}, 0, 0, ${scale.y}, ${50 * (1 - scale.x)}, ${50 * (1 - scale.y)})`}
> >
{number} {number}

10
src/components/calendar/Month/Month.module.scss
Unescape Escape View File

@ -3,7 +3,7 @@
.Month { .Month {
width: 100%; width: 100%;
background: colors.$content-normal-bg; // replaced shared.$content-background-color background: colors.$day-color-background; // replaced shared.$content-background-color
border-radius: shared.$border-radius-sm; border-radius: shared.$border-radius-sm;
overflow: hidden; overflow: hidden;
box-shadow: shared.$shadow-month; box-shadow: shared.$shadow-month;
@ -17,7 +17,7 @@
&__Container { &__Container {
display: flex; display: flex;
gap: shared.$spacing-unit; gap: shared.$spacing-unit;
background: colors.$content-normal-bg; // replaced shared.$content-background-color-selecting background: colors.$day-color-background; // replaced shared.$content-background-color
padding: 0.75rem; padding: 0.75rem;
min-width: 0; min-width: 0;
height: 100%; height: 100%;
@ -45,7 +45,7 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
border-bottom: shared.$border-size solid colors.$border-color; // replaced shared.$border-color border-bottom: shared.$border-size solid colors.$border-color; // replaced shared.$border-color
background: colors.$content-normal-bg; // replaced shared.$content-background-color background: colors.$day-color-background; // replaced shared.$content-background-color
text-align: center; text-align: center;
@media (min-width: shared.$breakpoint-tablet) { @media (min-width: shared.$breakpoint-tablet) {
@ -87,8 +87,8 @@
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
background: transparent; background: transparent;
color: colors.$content-normal-text; // replaced shared.$header-color color: colors.$day-color-text;
border-bottom: shared.$spacing-unit solid colors.$header-normal-bg; // replaced shared.$header-background-color border-bottom: shared.$spacing-unit solid colors.$day-color-text;
&--weekend { &--weekend {
color: colors.$day-header-greyedmode-defaultstate-color; // replaced shared.$header-color-greyed color: colors.$day-header-greyedmode-defaultstate-color; // replaced shared.$header-color-greyed

2
src/components/calendar/Week/Week.module.scss
Unescape Escape View File

@ -47,7 +47,7 @@
&__EmptyCell { &__EmptyCell {
padding: shared.$week-wrapper-padding; padding: shared.$week-wrapper-padding;
background: colors.$content-normal-bg; // replaced shared.$content-background-color background: colors.$day-color-background; // replaced shared.$content-background-color
@media (min-width: shared.$breakpoint-tablet) { @media (min-width: shared.$breakpoint-tablet) {
padding: shared.$week-wrapper-padding-desktop; padding: shared.$week-wrapper-padding-desktop;

2
src/components/calendar/Year/Year.module.scss
Unescape Escape View File

@ -18,7 +18,7 @@
&__Title { &__Title {
font-size: 2rem; font-size: 2rem;
color: colors.$content-normal-text; // replaced shared.$content-color color: colors.$day-color-text;
margin: 0 0 shared.$spacing-unit-quadruple; margin: 0 0 shared.$spacing-unit-quadruple;
text-align: center; text-align: center;
font-weight: 700; font-weight: 700;

53
src/components/calendar/shared/_colors.scss
Unescape Escape View File

@ -4,55 +4,6 @@
// BORDER COLORS // BORDER COLORS
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
$border-color: #e5e5e5; $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%);
// ---------------------------------- // ----------------------------------
@ -63,8 +14,8 @@ $day-color-background: white; // day default mode default state container backgr
$day-color-border: #f0f0f0; // any day container border $day-color-border: #f0f0f0; // any day container border
$day-color-text: #2c2c2c; // day default mode default state container text color $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-text-light: #757575; // day greyed mode default state text color
$day-color-hover: #f5f5f5; // day default mode default state hover container $day-color-hover: #f5f5f5; // day default mode default state hover container
$day-color-greyed: #bcbcbc; // day greyed mode default state container $day-color-greyed: #bcbcbc; // day greyed mode default state container
// Range colors // Range colors
$day-color-selected: #e3f2fd; // day default mode selected state container $day-color-selected: #e3f2fd; // day default mode selected state container

2
src/components/calendar/shared/_variables.scss
Unescape Escape View File

@ -20,7 +20,7 @@ $border-radius: 8px;
@use "colors" as colors; @use "colors" as colors;
$shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15); $shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
$shadow-month: 0 2px 4px 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; $shadow-focus: 0 0 0 2px colors.$day-color-primary;
// Breakpoints // Breakpoints
$breakpoint-tablet: 768px; $breakpoint-tablet: 768px;

8
src/components/ui/Button.module.scss
Unescape Escape View File

@ -1,8 +1,10 @@
@use "../calendar/shared/colors" as colors;
.button { .button {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border: none; border: none;
background: transparent; background: transparent;
color: #2c2c2c; color: colors.$day-color-text;;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
@ -16,11 +18,11 @@
} }
&.active { &.active {
background: #2c2c2c; background: colors.$day-color-text;
color: white; color: white;
&:hover { &:hover {
background: #2c2c2c; background: colors.$day-color-text;
} }
} }

8
src/components/ui/RangeInput.module.scss
Unescape Escape View File

@ -1,3 +1,5 @@
@use "../calendar/shared/colors" as colors;
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -22,7 +24,7 @@
.label { .label {
font-size: 0.875rem; font-size: 0.875rem;
color: #2c2c2c; color: colors.$day-color-text;
font-weight: 500; font-weight: 500;
} }
@ -67,7 +69,7 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
background: #2c2c2c; background: colors.$day-color-text;
cursor: pointer; cursor: pointer;
margin-top: -7px; // Centers the thumb on the track: (thumb height - track height) / -2 margin-top: -7px; // Centers the thumb on the track: (thumb height - track height) / -2
transition: background 0.2s; transition: background 0.2s;
@ -82,7 +84,7 @@
height: 16px; height: 16px;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: #2c2c2c; background: colors.$day-color-text;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;

4
src/examples/Examples.module.scss
Unescape Escape View File

@ -1,3 +1,5 @@
@use "../components/calendar/shared/colors" as colors;
.section { .section {
margin-bottom: 4rem; margin-bottom: 4rem;
padding: 2rem; padding: 2rem;
@ -13,7 +15,7 @@
.sectionTitle { .sectionTitle {
font-size: 2rem; font-size: 2rem;
margin: 0 0 1rem; margin: 0 0 1rem;
color: #2c2c2c; color: colors.$day-color-text;
} }
.sectionDescription { .sectionDescription {

Write Preview
Loading…
Cancel
Save