@bitrise/bitkit 10.34.0 → 10.35.0-alpha-datepicker-rewrite.1

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -0,0 +1,41 @@
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+import Button from '../Button/Button';
+import ButtonGroup from '../ButtonGroup/ButtonGroup';
+import { DateRange } from './useDateRange';
+
+const DatePickerFooter = ({
+  selected,
+  onClose,
+  onApply,
+}: {
+  selected?: DateRange;
+  onClose: () => void;
+  onApply: () => void;
+}) => {
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns={['unset', '1fr auto 1fr']}
+      gridTemplateRows={['1.25rem 2rem', 'unset']}
+      gap="24"
+    >
+      <Text alignSelf="center" justifySelf="center" size="2" color="text.secondary" gridColumn={['1', '2']}>
+        {selected?.from?.toFormat('DD', { locale: 'en-US' })}
+        {selected?.from || selected?.to ? ' - ' : undefined}
+        {selected?.to?.toFormat('DD', { locale: 'en-US' })}
+      </Text>
+      <ButtonGroup gridColumn={['1', '3']} justifyContent="end">
+        <Button variant="secondary" onClick={onClose} size="small">
+          Cancel
+        </Button>
+
+        <Button onClick={onApply} size="small">
+          Apply
+        </Button>
+      </ButtonGroup>
+    </Box>
+  );
+};
+
+export default DatePickerFooter;

package/src/Components/DatePicker/DatePickerGrid.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box, { BoxProps } from '../Box/Box';
+
+type Props = BoxProps;
+
+const DatePickerGrid: React.FunctionComponent<Props> = (props: Props) => {
+  return <Box display="grid" {...props} gridTemplateColumns="repeat(7, 2.5rem)" gridAutoRows="2rem" gridRowGap="4" />;
+};
+
+export default DatePickerGrid;

package/src/Components/DatePicker/DatePickerHeader.tsx

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { createContext } from '@chakra-ui/react-utils';
+import { useObjectMemo } from '../../utils/utils';
+import Box, { BoxProps } from '../Box/Box';
+import IconButton from '../IconButton/IconButton';
+
+const [HeaderContext, useHeaderContext] = createContext<{
+  onPrevious: () => void;
+  onNext: () => void;
+  controls: 'left' | 'right' | 'both';
+}>();
+export const DatePickerHeaderContent = (props: BoxProps) => (
+  <Box alignSelf="center" display="flex" justifyContent="center" gap="8" {...props} />
+);
+export const DatePickerHeaderPrevious = ({ label }: { label: string }) => {
+  const { onPrevious, controls } = useHeaderContext();
+  return (
+    <IconButton
+      size="small"
+      alignSelf="start"
+      visibility={controls === 'right' ? 'hidden' : undefined}
+      aria-label={label}
+      variant="tertiary"
+      as="button"
+      onClick={onPrevious}
+      iconName="ChevronLeft"
+      isTooltipDisabled
+    />
+  );
+};
+export const DatePickerHeaderNext = ({ label }: { label: string }) => {
+  const { onNext, controls } = useHeaderContext();
+  return (
+    <IconButton
+      alignSelf="end"
+      visibility={controls === 'left' ? 'hidden' : undefined}
+      size="small"
+      aria-label={label}
+      variant="tertiary"
+      onClick={onNext}
+      iconName="ChevronRight"
+      isTooltipDisabled
+    />
+  );
+};
+
+const DatePickerHeader = ({
+  onPrevious,
+  onNext,
+  children,
+  controls = 'both',
+}: {
+  onPrevious: () => void;
+  onNext: () => void;
+  controls?: 'left' | 'right' | 'both';
+  children?: ReactNode;
+}): JSX.Element => {
+  const ctx = useObjectMemo({ onPrevious, onNext, controls });
+  return (
+    <Box
+      marginBottom="24"
+      width="17.5rem"
+      display="grid"
+      gridTemplateColumns="2rem auto 2rem"
+      alignItems="center"
+      gap="4"
+    >
+      <HeaderContext value={ctx}>{children}</HeaderContext>
+    </Box>
+  );
+};
+export default DatePickerHeader;

package/src/Components/DatePicker/DatePickerMonth.tsx

@@ -0,0 +1,94 @@
+import { createElement, Fragment, useCallback, useId } from 'react';
+import { DateTime, Info } from 'luxon';
+import {
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+} from '@chakra-ui/react';
+import { useObjectMemo } from '../../utils/utils';
+import Button from '../Button/Button';
+import Box from '../Box/Box';
+import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
+import DatePickerGrid from './DatePickerGrid';
+import DatePickerDay, { DatePickerDayContext } from './DatePickerDay';
+import DatePickerHeader, {
+  DatePickerHeaderContent,
+  DatePickerHeaderNext,
+  DatePickerHeaderPrevious,
+} from './DatePickerHeader';
+
+const daysOfTheWeek = Info.weekdays('short');
+const daysCount = 6 * 7;
+
+interface Props {
+  controls: 'left' | 'right' | 'both';
+  onViewDateChange: (viewDate: DateTime) => void;
+  onMonthClick: () => void;
+  viewDate: DateTime;
+}
+
+const days = createElement(
+  Fragment,
+  {},
+  ...Array.from({ length: daysCount }).map((_, i) => <DatePickerDay n={i + 1} />),
+);
+const DatePickerMonth = ({ controls, onViewDateChange, viewDate, onMonthClick }: Props) => {
+  const onNextMonth = useCallback(() => onViewDateChange(viewDate.plus({ months: 1 })), [onViewDateChange, viewDate]);
+  const onPreviousMonth = useCallback(
+    () => onViewDateChange(viewDate.minus({ months: 1 })),
+    [onViewDateChange, viewDate],
+  );
+
+  const dayContext = useObjectMemo({ onPreviousMonth, onNextMonth, viewDate });
+
+  const monthLabelId = useId();
+  return (
+    <Box>
+      <DatePickerHeader onPrevious={onPreviousMonth} onNext={onNextMonth} controls={controls}>
+        <DatePickerHeaderPrevious label="previous month" />
+        <DatePickerHeaderContent id={monthLabelId}>
+          <Button onClick={onMonthClick} size="small" variant="tertiary" flexShrink={0} rightIconName="ChevronDown">
+            {viewDate.monthLong}
+          </Button>
+          <NumberInput
+            aria-label="year"
+            flexShrink={1}
+            size="small"
+            min={1990}
+            w="4.5rem"
+            max={2100}
+            value={viewDate.year}
+            onChange={(_, year) => onViewDateChange(viewDate.set({ year }))}
+          >
+            <NumberInputField />
+            <NumberInputStepper>
+              <NumberIncrementStepper>
+                <Icon size="16" name="ChevronUp" />
+              </NumberIncrementStepper>
+              <NumberDecrementStepper>
+                <Icon size="16" name="ChevronDown" />
+              </NumberDecrementStepper>
+            </NumberInputStepper>
+          </NumberInput>
+        </DatePickerHeaderContent>
+        <DatePickerHeaderNext label="next month" />
+      </DatePickerHeader>
+
+      <DatePickerGrid alignItems="center" justifyItems="center" gridTemplateRows="2rem">
+        {daysOfTheWeek.map((day) => (
+          <Text key={day} size="2" color="neutral.50" textTransform="capitalize">
+            {day}
+          </Text>
+        ))}
+      </DatePickerGrid>
+      <DatePickerGrid aria-labelledby={monthLabelId} role="listbox" paddingTop="8">
+        <DatePickerDayContext value={dayContext}>{days}</DatePickerDayContext>
+      </DatePickerGrid>
+    </Box>
+  );
+};
+
+export default DatePickerMonth;

package/src/Components/DatePicker/DatePickerMonthSelector.tsx

@@ -0,0 +1,132 @@
+import { ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react';
+import {
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  useMultiStyleConfig,
+} from '@chakra-ui/react';
+import { DateTime, Info } from 'luxon';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+import Icon from '../Icon/Icon';
+import DatePickerHeader, {
+  DatePickerHeaderContent,
+  DatePickerHeaderNext,
+  DatePickerHeaderPrevious,
+} from './DatePickerHeader';
+
+const DatePickerMonthItem = ({
+  children,
+  selected,
+  'aria-label': label,
+  onClick,
+  n,
+  id,
+}: {
+  id?: string;
+  'aria-label': string;
+  children: ReactNode;
+  selected: boolean;
+  n: number;
+  onClick: (n: number) => void;
+}) => {
+  const { text, day } = useMultiStyleConfig('DatePickerDay', {
+    selectable: true,
+    selection: selected ? 'incomplete' : undefined,
+    currentMonth: true,
+  });
+  return (
+    <Box
+      id={id}
+      aria-selected={selected ? true : undefined}
+      aria-label={label}
+      as="button"
+      role="option"
+      sx={day}
+      onClick={() => onClick(n)}
+      width="48"
+    >
+      <Text sx={{ ...text, width: '48' }}>{children}</Text>
+    </Box>
+  );
+};
+
+const monthNames = Info.months('short');
+const longMonthNames = Info.months('long');
+const DatePickerMonthSelector = ({
+  viewDate,
+  onMonthSelected,
+}: {
+  viewDate: DateTime;
+  onMonthSelected: (month: number, year: number) => void;
+}): JSX.Element => {
+  const [selectedYear, setSelectedYear] = useState(viewDate.year);
+  const onPreviousYear = useCallback(() => setSelectedYear((year) => year - 1), []);
+  const onNextYear = useCallback(() => setSelectedYear((year) => year + 1), []);
+  const yearRef = useRef<HTMLInputElement>(null);
+  useEffect(() => yearRef.current?.focus(), []);
+  const monthClicked = useCallback((m: number) => onMonthSelected(m, selectedYear), [selectedYear]);
+  const monthId = useId();
+  return (
+    <Box>
+      <DatePickerHeader onPrevious={onPreviousYear} onNext={onNextYear}>
+        <DatePickerHeaderPrevious label="previous year" />
+        <DatePickerHeaderContent>
+          <NumberInput
+            aria-label="year"
+            flexShrink={1}
+            size="small"
+            min={1990}
+            w="4.5rem"
+            max={2100}
+            value={selectedYear}
+            onChange={(_, year) => {
+              setSelectedYear(year);
+            }}
+          >
+            <NumberInputField ref={yearRef} />
+            <NumberInputStepper>
+              <NumberIncrementStepper>
+                <Icon size="16" name="ChevronUp" />
+              </NumberIncrementStepper>
+              <NumberDecrementStepper>
+                <Icon size="16" name="ChevronDown" />
+              </NumberDecrementStepper>
+            </NumberInputStepper>
+          </NumberInput>
+        </DatePickerHeaderContent>
+        <DatePickerHeaderNext label="next year" />
+      </DatePickerHeader>
+      <Box
+        display="grid"
+        rowGap="24"
+        alignItems="center"
+        justifyItems="center"
+        gridTemplateColumns="repeat(3,1fr)"
+        gridTemplateRows="repeat(4, 1fr)"
+        role="listbox"
+        aria-label="month"
+        aria-activedescendant={monthId}
+      >
+        {monthNames.map((month, idx) => {
+          const selected = viewDate.month === idx + 1;
+          return (
+            <DatePickerMonthItem
+              id={selected ? monthId : undefined}
+              onClick={monthClicked}
+              n={idx + 1}
+              aria-label={longMonthNames[idx]}
+              selected={selected}
+              key={month}
+            >
+              {month}
+            </DatePickerMonthItem>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+};
+export default DatePickerMonthSelector;