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

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;

package/src/Components/DatePicker/useDateRange.ts

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { DateTime } from 'luxon';
+
+export class DateRange {
+  public from?: DateTime;
+
+  public to?: DateTime;
+
+  constructor(from?: DateTime, to?: DateTime) {
+    this.from = from;
+    this.to = to;
+  }
+
+  contains(date: DateTime): boolean {
+    if (this.from && this.to) {
+      return this.to > date && this.from < date;
+    }
+    if (this.from && !this.to) {
+      return this.from < date;
+    }
+    if (this.to && !this.from) {
+      return this.to > date;
+    }
+    return true;
+  }
+}
+
+function useDateRange(range: [DateTime | undefined, DateTime | undefined]): DateRange;
+function useDateRange(from?: DateTime, to?: DateTime): DateRange;
+function useDateRange(arg1?: DateTime | [DateTime | undefined, DateTime | undefined], arg2?: DateTime): DateRange {
+  let from = arg1;
+  let to = arg2;
+  if (!to && Array.isArray(from)) {
+    to = DateTime.max(...(from.filter(Boolean) as DateTime[]));
+    from = DateTime.min(...(from.filter(Boolean) as DateTime[]));
+  } else {
+    from = from as DateTime | undefined;
+    to = to as DateTime | undefined;
+  }
+  const fromParts = from?.toObject();
+  const toParts = to?.toObject();
+  return useMemo(
+    () => new DateRange(from as DateTime | undefined, to as DateTime | undefined),
+    [fromParts?.year, fromParts?.month, fromParts?.day, toParts?.year, toParts?.month, toParts?.day],
+  );
+}
+
+export default useDateRange;

package/src/Components/DatePicker/useViewDate.ts

@@ -0,0 +1,35 @@
+import { useCallback, useReducer } from 'react';
+import { DateObjectUnits, DateTime } from 'luxon';
+
+function useViewDate({ initalView }: { initalView?: DateTime }): {
+  leftViewDate: DateTime;
+  rightViewDate: DateTime;
+  updateLeftViewDate: (date: DateTime | DateObjectUnits) => void;
+  updateRightViewDate: (date: DateTime | DateObjectUnits) => void;
+} {
+  const initLeft = (initalView || DateTime.now()).startOf('month');
+  const initRight = initLeft.plus({ months: 1 }).startOf('month');
+  const initialState = { left: initLeft, right: initRight };
+  function viewDateReducer(
+    state: typeof initialState,
+    action: { left: DateTime | DateObjectUnits } | { right: DateTime | DateObjectUnits },
+  ) {
+    if ('left' in action) {
+      const left = action.left instanceof DateTime ? action.left : state.left.set(action.left);
+      return { left, right: left.plus({ months: 1 }).startOf('month') };
+    }
+    const right = action.right instanceof DateTime ? action.right : state.right.set(action.right);
+    return { left: right.minus({ months: 1 }).startOf('month'), right };
+  }
+  const [{ left: leftViewDate, right: rightViewDate }, updateViewDate] = useReducer(viewDateReducer, initialState);
+  const updateLeftViewDate = useCallback((date: DateTime | DateObjectUnits) => updateViewDate({ left: date }), []);
+  const updateRightViewDate = useCallback((date: DateTime | DateObjectUnits) => updateViewDate({ right: date }), []);
+  return {
+    leftViewDate,
+    rightViewDate,
+    updateLeftViewDate,
+    updateRightViewDate,
+  };
+}
+
+export default useViewDate;

package/src/Components/NumberInput/NumberInput.theme.ts

@@ -0,0 +1,36 @@
+import { SystemStyleObject } from '@chakra-ui/react';
+
+const NumberInputTheme = {
+  baseStyle: {
+    field: <SystemStyleObject>{
+      height: '42',
+      paddingLeft: '12',
+      borderRadius: '4',
+      borderStyle: 'solid',
+      borderColor: 'neutral.90',
+      borderWidth: '1px',
+      _focusVisible: {
+        boxShadow: 'outline',
+        outline: 'none',
+      },
+    },
+  },
+  sizes: {
+    small: {
+      field: {
+        height: '32',
+        fontSize: '2',
+        boxShadow: 'innerSmall',
+      },
+    },
+    medium: {
+      field: {
+        height: '48',
+        fontSize: '3',
+        boxShadow: 'inner',
+      },
+    },
+  },
+};
+
+export default NumberInputTheme;

package/src/Foundations/Shadows/Shadows.ts

@@ -3,6 +3,7 @@ const shadows = {
   medium: '0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.06)',
   large: '0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.08)',
   inner: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset',
+  innerSmall: '0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.1) inset',
   outline: '0 0 0 3px #C289E6',
   tooltip: '0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2)',
   formFocus: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, inset 0 0 0 3px rgba(146, 71, 194, 0.3)',

package/src/Foundations/Sizes/Sizes.ts

@@ -5,6 +5,7 @@ const sizes = {
   '16': '1rem',
   '24': '1.5rem',
   '32': '2rem',
+  '40': '2.5rem',
   '48': '3rem',
   '64': '4rem',
   '96': '6rem',

package/src/Old/hooks/index.ts

@@ -1,3 +1,2 @@
 export { default as useEventListener } from './useEventListener';
-export { default as useMediaQuery } from './useMediaQuery';
 export { default as useSyncedStateAndProps } from './useSyncedStateAndProps';

package/src/index.ts

@@ -202,6 +202,9 @@ export { default as Collapse } from './Components/Collapse/Collapse';
 export type { TextareaProps } from './Components/Form/Textarea/Textarea';
 export { default as Textarea } from './Components/Form/Textarea/Textarea';
 
+export type { DatePickerProps } from './Components/DatePicker/DatePicker';
+export { default as DatePicker, DateRange, useDateRange } from './Components/DatePicker/DatePicker';
+
 export type { FadeProps } from './Components/Fade/Fade';
 export { default as Fade } from './Components/Fade/Fade';
 

package/src/old.ts

@@ -12,8 +12,5 @@ export type { TypeColors } from './Old/Base/Base';
 export type { TypeSizes } from './Old/Base/Base';
 export { default as Base } from './Old/Base/Base';
 
-export type { Props as DatePickerProps } from './Old/DatePicker/DatePicker';
-export { default as DatePicker } from './Old/DatePicker/DatePicker';
-
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';

package/src/theme.ts

@@ -26,6 +26,8 @@ import Popover from './Components/Popover/Popover.theme';
 import Toggle from './Components/Toggle/Toggle.theme';
 import Textarea from './Components/Form/Textarea/Textarea.theme';
 import Form from './Components/Form/Form.theme';
+import DatePickerDay from './Components/DatePicker/DatePickerDay.theme';
+import NumberInput from './Components/NumberInput/NumberInput.theme';
 import Skeleton from './Components/Skeleton/Skeleton.theme';
 import ProgressBar from './Components/ProgressBar/ProgressBar.theme';
 
@@ -101,6 +103,8 @@ const theme = {
     Popover,
     Switch: Toggle,
     Textarea,
+    DatePickerDay,
+    NumberInput,
     Skeleton,
     Progress: ProgressBar,
   },