feat(datepicker): update couple of components

* fix(datepicker): remove extra space after DatePicker

* feat(date-picker): export datepicker props type

* feat(datepicker): add sx prop to datepicker

* feat(react-datepicker): react-datepicker v3->v4

* fix(datepicker): fix datepicker props typing

* Fix story

* Fix package.json - yarn.lock

* fix(sticky-summary): fix spacing

* fix(formtabs): fix formtabs

* Make train spit customizable

* Fix datepicker noDataMessage width

* fix(datepicker): minor style fix

* feat: Make toggleButton stylable

* feat(splitgraph): Customized split graph

Author: ehsan-github

package.json

@@ -56,7 +56,7 @@
     "@types/ramda": "^0.28.1",
     "@types/rc-slider": "^8.6.6",
     "@types/react": "^16.14.0",
-    "@types/react-datepicker": "^3.1.8",
+    "@types/react-datepicker": "^4",
     "@types/react-dom": "^16.9.14",
     "@types/react-syntax-highlighter": "^15.4.3",
     "@types/rebass": "^4.0.10",
@@ -106,7 +106,7 @@
     "rc-slider": "^9.7.5",
     "rc-tooltip": "^4.2.3",
     "react-codemirror2": "^7.2.1",
-    "react-datepicker": "^3.3.0",
+    "react-datepicker": "4.8.0",
     "react-spring": "^8.0.27",
     "react-syntax-highlighter": "^15.4.3",
     "rebass": "^4.0.7",

src/components/datepicker/datepicker.stories.tsx

@@ -1,33 +1,37 @@
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
+import { addDays, subDays } from 'date-fns/fp';
 
 // Components
 import DatePicker, { DatePickerProps } from './index';
 
 import { DATE_TIME } from '../../constants';
+import { Flex } from '../flex';
 
 export default {
   title: 'Quartz/DatePicker',
   component: DatePicker,
 } as Meta;
 
-const Template: Story<DatePickerProps> = (props) => {
+const Template: Story<DatePickerProps> = ({ selectProps, ...restProps }) => {
   const [startDate, setStartDate] = useState(new Date());
 
   return (
-    <DatePicker
-      {...props}
-      selectProps={{
-        ...props.selectProps,
-        value: [new Date(startDate).toISOString()],
-        options: [],
-        onChange: () => {},
-        placeholder: 'to',
-        noDataMessage: 'from',
-      }}
-      selected={startDate}
-      onChange={(date) => setStartDate(date as Date)}
-    />
+    <Flex height="300px">
+      <DatePicker
+        {...restProps}
+        selectProps={{
+          ...selectProps,
+          value: [new Date(startDate).toISOString()],
+          noDataMessage: 'from',
+        }}
+        selected={startDate}
+        onChange={(date) => setStartDate(date as Date)}
+        excludeDateIntervals={[
+          { start: subDays(5, new Date()), end: addDays(5, new Date()) },
+        ]}
+      />
+    </Flex>
   );
 };
 
@@ -38,25 +42,3 @@ Default.args = {
   dateFormat: DATE_TIME.DATE_TIME_FULL_MONTH,
   excludeTimes: [new Date()],
 };
-
-Default.argTypes = {
-  selectProps: {
-    type: {
-      required: true,
-      summary: 'Select props',
-    },
-  },
-  datePickerAlign: {
-    control: {
-      type: 'select',
-      default: 'right',
-      options: ['left', 'right'],
-    },
-    type: {
-      required: false,
-    },
-    defaultValue: {
-      summary: 'datepicker align',
-    },
-  },
-};

src/components/datepicker/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from 'rebass';
+import { Box, Flex, SxStyleProp } from 'rebass';
 import React, { FC, memo, useState } from 'react';
 import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
 
@@ -10,22 +10,25 @@ import Labeling from '../typography/labeling';
 import Value from '../typography/value';
 import { GetIcon, IconName } from '../icon';
 
-export interface DatePickerProps {
-  selectProps: SelectProps;
+export interface DatePickerProps extends ReactDatePickerProps {
+  selectProps: Pick<SelectProps, 'variant' | 'noDataMessage' | 'value'>;
   datePickerAlign?: 'left' | 'right';
+  sx?: SxStyleProp;
 }
 
-const DatePicker: FC<DatePickerProps & ReactDatePickerProps> = ({
+const DatePicker: FC<DatePickerProps> = ({
   selectProps,
   datePickerAlign = 'right',
+  sx,
   ...props
 }) => {
   const [open, setOpen] = useState(false);
 
   return (
-    <Flex flexDirection="column" sx={styles(datePickerAlign)}>
+    <Flex flexDirection="column" sx={{ ...styles(datePickerAlign), ...sx }}>
       <Flex
         alignItems="center"
+        flexShrink={0}
         onClick={() => setOpen(!open)}
         sx={{
           height: '32px',
@@ -37,18 +40,23 @@ const DatePicker: FC<DatePickerProps & ReactDatePickerProps> = ({
         variant={selectProps.variant ?? 'white'}
         tx="variants.select"
       >
-        <Labeling gray mr="5px">
+        <Labeling gray mr="5px" minWidth="unset">
           {selectProps.noDataMessage}
         </Labeling>
         <Value
           mr="5px"
           sx={{ fontSize: 'text', fontWeight: 'text', fontFamily: 'text' }}
+          flexGrow={1}
+          flexShrink={0}
         >
           {selectProps.value}
         </Value>
-        <GetIcon icon={IconName.arrow_up_down} size="sm" />
+        <GetIcon flexShrink={0} icon={IconName.arrow_up_down} size="sm" />
       </Flex>
-      <Box alignSelf={datePickerAlign === 'right' ? 'flex-end' : 'flex-start'}>
+      <Box
+        height="0px"
+        alignSelf={datePickerAlign === 'right' ? 'flex-end' : 'flex-start'}
+      >
         <ReactDatePicker
           open={open}
           {...props}

src/components/form-tabs/index.tsx

@@ -8,6 +8,8 @@ import React, {
 } from 'react';
 import { Box, Flex } from 'rebass';
 import ResizeObserver from 'resize-observer-polyfill';
+import * as R from 'ramda';
+
 import {
   summaryContainerStyles,
   containerStyles,
@@ -51,7 +53,7 @@ const FormTabs: FC<FormTabsProps> = ({
   hasScrollOnScreen = true,
   ...props
 }: FormTabsProps) => {
-  const initialActive = useMemo(() => {
+  const active = useMemo(() => {
     const tabIdx = tabs.findIndex((t) => t.id === initialTab);
     return Math.max(tabIdx, 0);
   }, [initialTab, tabs]);
@@ -61,54 +63,47 @@ const FormTabs: FC<FormTabsProps> = ({
   const hasOverflow = useCallback(() => {
     const el = tabsContainerRef?.current;
     return el ? el.clientWidth !== el.scrollWidth : false;
-  }, [tabsContainerRef?.current]);
+  }, []);
 
-  const [active, setActive] = useState<number>(initialActive);
   const [tabArray, setTabArray] = useState<TabItem[]>(tabs);
   const [isOverflown, setIsOverflown] = useState<boolean>(false);
 
   const currentTab = useMemo(() => tabArray[active], [tabArray, active]);
 
   const handleGoForward = useCallback(async () => {
     const validation = await currentTab.validationFn();
-    const copy = [...tabArray.map((x) => x)];
 
     // VALID: move to next tab and show check mark.
     if (validation === ValidateOpts.valid) {
-      copy[active] = { ...copy[active], state: TabState.valid };
-      onTabChange(copy[active + 1].id);
-      setActive((act) => act + 1);
+      setTabArray(R.adjust(active, R.assoc('state', TabState.valid)));
+      onTabChange(tabArray[active + 1].id);
     }
 
     // UNTOUCHED: if optional, move to next tab. Otherwise show error.
     if (validation === ValidateOpts.untouched) {
       if (currentTab.optional) {
-        copy[active] = { ...copy[active], state: TabState.optional };
-        onTabChange(copy[active + 1].id);
-        setActive((act) => act + 1);
+        setTabArray(R.adjust(active, R.assoc('state', TabState.optional)));
+        onTabChange(tabArray[active + 1].id);
       } else {
-        copy[active] = { ...copy[active], state: TabState.error };
+        setTabArray(R.adjust(active, R.assoc('state', TabState.error)));
       }
     }
 
     // INVALID: don't move to next tab and show error.
     if (validation === ValidateOpts.error) {
-      copy[active] = { ...copy[active], state: TabState.error };
+      setTabArray(R.adjust(active, R.assoc('state', TabState.error)));
     }
-    setTabArray(copy);
-  }, [setActive, active, setTabArray, tabArray, onTabChange, currentTab]);
+  }, [active, setTabArray, tabArray, onTabChange, currentTab]);
 
   const handleGoBack = useCallback(() => {
     onTabChange(tabArray[active - 1].id);
-    setActive((act) => act - 1);
-  }, [active, onTabChange, setActive]);
+  }, [active, onTabChange, tabArray]);
 
   const handleTabClick = useCallback(
     (idx: number) => {
-      setActive(idx);
       onTabChange(tabArray[idx].id);
     },
-    [setActive, onTabChange],
+    [onTabChange, tabArray],
   );
 
   const handleSubmit = useCallback(async () => {
@@ -141,7 +136,7 @@ const FormTabs: FC<FormTabsProps> = ({
     );
     setTabArray(updated);
     return allValid;
-  }, []);
+  }, [tabArray]);
 
   useEffect(() => {
     if (!tabsContainerRef.current) return;
@@ -150,9 +145,10 @@ const FormTabs: FC<FormTabsProps> = ({
       setIsOverflown(hasOverflow());
     });
     resizeObserver.observe(tabsContainerRef.current);
+
     // eslint-disable-next-line consistent-return
     return () => resizeObserver.disconnect();
-  }, [tabsContainerRef?.current]);
+  }, [hasOverflow]);
 
   return (
     <FormSummaryContainer