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 {
padding: 1rem;
width: 100%;
@ -25,7 +27,7 @@
.sectionTitle {
font-size: 2rem;
margin: 0 0 1rem;
color: #2c2c2c;
color: colors.$day-color-text;
}
.sectionDescription {

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

@ -1,27 +1,64 @@
@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;
}
@use '../shared/colors' as colors;
.DayNumber {
&__Container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.svg {
width: 100%;
height: 100%;
}
&__Svg {
width: 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 {
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;
.DayNumber__Container--greyed & {
fill: colors.$day-content-greyedmode-selectedstate-rangestart-color;
}
}
// 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 styles from './DayNumber.module.scss';
import classNames from 'classnames';
import { DayVariation } from '../../../types/calendar';
interface DayNumberProps {
number: number;
proportion: number;
isGreyed?: boolean;
variations?: DayVariation[];
}
export const DayNumber: React.FC<DayNumberProps> = ({
number,
export const DayNumber: React.FC<DayNumberProps> = ({
number,
proportion,
isGreyed
variations = []
}) => {
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 containerWidth = 100;
const maxWidth = containerWidth * 0.8;
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]);
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 (
<div className={classNames(
styles.container,
{ [styles.greyed]: isGreyed }
)}>
<svg
viewBox="0 0 100 100"
width="100%"
height="100%"
className={styles.svg}
<div className={containerClasses}>
<svg
viewBox="0 0 100 100"
width="100%"
height="100%"
className={styles.DayNumber__Svg}
preserveAspectRatio="xMidYMid meet"
>
<text
@ -61,7 +72,7 @@ export const DayNumber: React.FC<DayNumberProps> = ({
y="50"
textAnchor="middle"
dominantBaseline="central"
className={styles.text}
className={textClasses}
transform={`matrix(${scale.x}, 0, 0, ${scale.y}, ${50 * (1 - scale.x)}, ${50 * (1 - scale.y)})`}
>
{number}

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

@ -3,7 +3,7 @@
.Month {
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;
overflow: hidden;
box-shadow: shared.$shadow-month;
@ -17,7 +17,7 @@
&__Container {
display: flex;
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;
min-width: 0;
height: 100%;
@ -45,7 +45,7 @@
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
background: colors.$day-color-background; // replaced shared.$content-background-color
text-align: center;
@media (min-width: shared.$breakpoint-tablet) {
@ -87,8 +87,8 @@
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
color: colors.$day-color-text;
border-bottom: shared.$spacing-unit solid colors.$day-color-text;
&--weekend {
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 {
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) {
padding: shared.$week-wrapper-padding-desktop;

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

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

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

@ -4,55 +4,6 @@
// 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%);
// ----------------------------------
@ -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-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
$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

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

@ -20,7 +20,7 @@ $border-radius: 8px;
@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;
$shadow-focus: 0 0 0 2px colors.$day-color-primary;
// Breakpoints
$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 {
padding: 0.5rem 1rem;
border: none;
background: transparent;
color: #2c2c2c;
color: colors.$day-color-text;;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
@ -16,11 +18,11 @@
}
&.active {
background: #2c2c2c;
background: colors.$day-color-text;
color: white;
&: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 {
display: flex;
flex-direction: column;
@ -22,7 +24,7 @@
.label {
font-size: 0.875rem;
color: #2c2c2c;
color: colors.$day-color-text;
font-weight: 500;
}
@ -67,7 +69,7 @@
width: 16px;
height: 16px;
border-radius: 50%;
background: #2c2c2c;
background: colors.$day-color-text;
cursor: pointer;
margin-top: -7px; // Centers the thumb on the track: (thumb height - track height) / -2
transition: background 0.2s;
@ -82,7 +84,7 @@
height: 16px;
border: none;
border-radius: 50%;
background: #2c2c2c;
background: colors.$day-color-text;
cursor: pointer;
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 {
margin-bottom: 4rem;
padding: 2rem;
@ -13,7 +15,7 @@
.sectionTitle {
font-size: 2rem;
margin: 0 0 1rem;
color: #2c2c2c;
color: colors.$day-color-text;
}
.sectionDescription {

Write Preview
Loading…
Cancel
Save