Skip to content

Commit

Permalink
add year calendar
Browse files Browse the repository at this point in the history
  • Loading branch information
@PixeledCode
PixeledCode committed Jan 12, 2024
1 parent 577aa9e commit cbdcfba
Show file tree
Hide file tree
Showing 3 changed files with 316 additions and 131 deletions.
218 changes: 118 additions & 100 deletions packages/opub-ui/src/components/Calendar/Calendar.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,131 @@
@import '../../../styles/common';

.Calendar {
max-width: 290px;
padding: var(--space-5);
background-color: var(--surface-default);
box-shadow: var(--shadow-element-popover);
border-radius: var(--border-radius-2);

table {
width: 100%;
}
max-width: 290px;
padding: var(--space-5);
background-color: var(--surface-default);
box-shadow: var(--shadow-element-popover);
border-radius: var(--border-radius-2);

table {
width: 100%;
}

&.YearCalendar {
max-width: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
}

.Header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
margin: 0 8px;

button {
@include unstyled-button;
@include focus-ring;
&:focus-visible:not(:active) {
@include focus-ring($style: 'focused');
outline: var(--border-width-2) solid transparent;
}

border-radius: var(--border-radius-1);
padding: var(--space-05) var(--space-1);
transition: background-color var(--duration-100) var(--ease-in-out);

&:hover {
background-color: var(--surface-subdued);
}

&:active {
background-color: var(--surface-selected) !important;
}
}
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
margin: 0 8px;

button {
@include unstyled-button;
@include focus-ring;
&:focus-visible:not(:active) {
@include focus-ring($style: 'focused');
outline: var(--border-width-2) solid transparent;
}

border-radius: var(--border-radius-1);
padding: var(--space-05) var(--space-1);
transition: background-color var(--duration-100) var(--ease-in-out);

&:hover {
background-color: var(--surface-subdued);
}

&:active {
background-color: var(--surface-selected) !important;
}
}
}

.Cell {
cursor: default;
text-align: center;
border-radius: var(--border-radius-1);
padding: var(--space-1) var(--space-2);
transition: background-color var(--duration-100) var(--ease-in-out);

&:hover:not(.Disabled, .Selected, .Unavailable) {
background-color: var(--surface-subdued);
}

&.Today {
background-color: var(--surface-selected);
}

&.Selected {
background-color: var(--background-alpha-dark);
> span {
color: var(--text-onbg-default);
}

&.HighlightedRange {
background-color: var(--surface-selected);
border-radius: 0;

> span {
color: var(--text-default);
}
}

&.SelectionStart {
border-radius: var(--border-radius-6) 0px 0px var(--border-radius-6);
background-color: var(--background-alpha-dark);

> span {
color: var(--text-onbg-default);
}
}

&.SelectionEnd {
border-radius: 0px var(--border-radius-6) var(--border-radius-6) 0px;
background-color: var(--background-alpha-dark);
> span {
color: var(--text-onbg-default);
}
}

&.SelectionStart.SelectionEnd {
border-radius: var(--border-radius-6);
}
}

&.Unavailable {
> span {
color: var(--text-critical);
}
}

&.Disabled {
> span {
color: var(--text-disabled);
}
}
cursor: default;
text-align: center;
border-radius: var(--border-radius-1);
padding: var(--space-1) var(--space-2);
transition: background-color var(--duration-100) var(--ease-in-out);

&.YearCell {
width: var(--space-10);
padding-inline: 0;
border: none;
background-color: transparent;

> span {
pointer-events: none;
}
}

&:hover:not(.Disabled, .Selected, .Unavailable) {
background-color: var(--surface-subdued);
}

&.Today {
background-color: var(--surface-selected);
}

&.Selected {
background-color: var(--background-alpha-dark);
> span {
color: var(--text-onbg-default);
}

&.HighlightedRange {
background-color: var(--surface-selected);
border-radius: 0;

> span {
color: var(--text-default);
}
}

&.SelectionStart {
border-radius: var(--border-radius-6) 0px 0px var(--border-radius-6);
background-color: var(--background-alpha-dark);

> span {
color: var(--text-onbg-default);
}
}

&.SelectionEnd {
border-radius: 0px var(--border-radius-6) var(--border-radius-6) 0px;
background-color: var(--background-alpha-dark);
> span {
color: var(--text-onbg-default);
}
}

&.SelectionStart.SelectionEnd {
border-radius: var(--border-radius-6);
}
}

&.Unavailable {
> span {
color: var(--text-critical);
}
}

&.Disabled {
> span {
color: var(--text-disabled);
}
}
}

.Weeks {
> th {
padding: var(--space-2);
}
> th {
padding: var(--space-2);
}
}
70 changes: 39 additions & 31 deletions packages/opub-ui/src/components/Calendar/Calendar.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,55 @@
import { Calendar } from './Calendar';
import { RangeCalendar } from './RangeCalendar';
import { isWeekend } from '@internationalized/date';
import { Meta, StoryObj } from '@storybook/react';
import { useLocale } from 'react-aria';
import { Calendar } from './Calendar'
import { RangeCalendar } from './RangeCalendar'
import { YearCalendar } from './YearCalendar'
import { isWeekend } from '@internationalized/date'
import { Meta, StoryObj } from '@storybook/react'
import { useLocale } from 'react-aria'

/**
* A calendar displays one or more date grids and allows users to select a single date.
*
* Reference: https://react-spectrum.adobe.com/react-aria/useCalendar.html
*/
const meta = {
title: 'Components/Calendar',
component: Calendar,
} satisfies Meta<typeof Calendar>;
title: 'Components/Calendar',
component: Calendar,
} satisfies Meta<typeof Calendar>

export default meta;
type Story = StoryObj<typeof meta>;
export default meta
type Story = StoryObj<typeof meta>

const metaRange = {
component: RangeCalendar,
} satisfies Meta<typeof RangeCalendar>;
type RangeStory = StoryObj<typeof metaRange>;
component: RangeCalendar,
} satisfies Meta<typeof RangeCalendar>
type RangeStory = StoryObj<typeof metaRange>

export const Default: Story = {
args: {},
};
args: {},
}

export const UnavailableDates: Story = {
render: ({ ...args }) => {
let { locale } = useLocale();
return (
<Calendar
isDateUnavailable={(date) => isWeekend(date, locale)}
{...args}
/>
);
},
args: {},
};
render: ({ ...args }) => {
let { locale } = useLocale()
return (
<Calendar
isDateUnavailable={(date) => isWeekend(date, locale)}
{...args}
/>
)
},
args: {},
}

export const CalendarRange: RangeStory = {
render: ({ ...args }) => {
return <RangeCalendar {...args} />;
},
args: {},
};
render: ({ ...args }) => {
return <RangeCalendar {...args} />
},
args: {},
}

export const YearRange: any = {
render: ({ ...args }) => {
return <YearCalendar {...args} />
},
args: {},
}
Loading

0 comments on commit cbdcfba

Please sign in to comment.