feat(calendar): add experimental component (#476)

* fix(text-field): padding -> margin to make outline nice

* feat(calendar): add base component

* feat(calendar): restyle button's focus state

---------

Co-authored-by: Lena Rashkovan <[email protected]>

Author: shiba-codes

src/components/experimental/Calendar/Calendar.tsx

@@ -0,0 +1,134 @@
+import React, { ReactElement } from 'react';
+import {
+    Calendar as BaseCalendar,
+    CalendarProps as BaseCalendarProps,
+    CalendarCell,
+    CalendarGrid as BaseCalendarGrid,
+    CalendarGridHeader,
+    CalendarGridBody,
+    CalendarHeaderCell,
+    Heading as BaseHeading,
+    DateValue,
+    Button as BaseButton
+} from 'react-aria-components';
+import styled from 'styled-components';
+import { ChevronLeftIcon, ChevronRightIcon } from '../../../icons';
+import { getSemanticValue } from '../../../essentials/experimental';
+import { textStyles } from '../Text/Text';
+import { get } from '../../../utils/experimental/themeGet';
+
+const Header = styled.header`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: ${get('space.3')};
+`;
+
+const Button = styled(BaseButton)`
+    appearance: none;
+    background: none;
+    border: none;
+    display: flex;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    color: ${getSemanticValue('on-surface')};
+    outline: 0;
+
+    &[data-focused] {
+        color: ${getSemanticValue('accent')};
+    }
+
+    &[data-disabled] {
+        opacity: 0;
+    }
+`;
+
+const Heading = styled(BaseHeading)`
+    margin: 0;
+    color: ${getSemanticValue('on-surface')};
+    ${textStyles.variants.title2}
+`;
+
+const CalendarGrid = styled(BaseCalendarGrid)`
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    td {
+        padding: 0;
+    }
+
+    th {
+        padding: 0 0 ${get('space.1')};
+    }
+`;
+
+const WeekDay = styled(CalendarHeaderCell)`
+    color: ${getSemanticValue('on-surface')};
+    ${textStyles.variants.label2}
+`;
+
+const Day = styled(CalendarCell)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${getSemanticValue('on-surface')};
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    ${textStyles.variants.label2}
+    transition: background ease 200ms;
+
+    &[data-focused] {
+        outline: ${getSemanticValue('accent')} solid 0.125rem;
+    }
+
+    &[data-hovered] {
+        cursor: pointer;
+        background: ${getSemanticValue('surface-variant')};
+    }
+
+    &[data-selected] {
+        outline: 0;
+        background: ${getSemanticValue('interactive-container')};
+        color: ${getSemanticValue('on-interactive-container')};
+    }
+
+    &[data-disabled] {
+        opacity: 0.38;
+    }
+
+    &[data-outside-month] {
+        opacity: 0;
+    }
+`;
+
+type CalendarProps<T extends DateValue> = BaseCalendarProps<T>;
+
+function Calendar<T extends DateValue>(props: CalendarProps<T>): ReactElement {
+    return (
+        <BaseCalendar {...props}>
+            <Header>
+                <Button slot="previous">
+                    <ChevronLeftIcon size={24} />
+                </Button>
+                <Heading />
+                <Button slot="next">
+                    <ChevronRightIcon size={24} />
+                </Button>
+            </Header>
+            <CalendarGrid weekdayStyle="short">
+                <CalendarGridHeader>{weekDay => <WeekDay>{weekDay}</WeekDay>}</CalendarGridHeader>
+                <CalendarGridBody>
+                    {date => (
+                        <Day date={date}>
+                            {({ formattedDate }) => (formattedDate.length > 1 ? formattedDate : `0${formattedDate}`)}
+                        </Day>
+                    )}
+                </CalendarGridBody>
+            </CalendarGrid>
+        </BaseCalendar>
+    );
+}
+
+export { Calendar };

src/components/experimental/Calendar/docs/Calendar.stories.tsx

@@ -0,0 +1,36 @@
+import { I18nProvider } from 'react-aria-components';
+import { getLocalTimeZone, today } from '@internationalized/date';
+import { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+import { Calendar } from '../Calendar';
+
+const meta: Meta = {
+    title: 'Experimental/Components/Calendar',
+    component: Calendar,
+    parameters: {
+        layout: 'centered'
+    },
+    decorators: [
+        Story => (
+            <I18nProvider locale="de-DE">
+                <Story />
+            </I18nProvider>
+        )
+    ],
+    args: {
+        'aria-label': 'Appointment date',
+        defaultValue: today(getLocalTimeZone())
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {};
+
+export const WithMinValue: Story = {
+    args: {
+        minValue: today(getLocalTimeZone())
+    }
+};

src/components/experimental/TextField/TextField.tsx

@@ -69,7 +69,7 @@ const TopLine = styled.div`
     /* stylelint-disable selector-type-case, selector-type-no-unknown */
     & > :not(${InnerWrapper}) {
         flex-shrink: 0;
-        padding-top: ${get('space.2')};
+        margin-top: ${get('space.2')};
     }
 
     &:hover {

src/components/experimental/index.ts

@@ -1,4 +1,5 @@
 export { Button } from './Button/Button';
+export { Calendar } from './Calendar/Calendar';
 export { Chip } from './Chip/Chip';
 export { Label } from './Label/Label';
 export { Text } from './Text/Text';