@indico-data/design-system 1.0.52 → 1.0.53

package/src/components/inputs/NoInputDatePicker/__tests__/NoInputDatePicker.test.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { NoInputDatePicker } from '../NoInputDatePicker';
+import { DateRange } from 'react-day-picker';
+import userEvent from '@testing-library/user-event';
+
+const today = new Date();
+const mockOnChange = jest.fn();
+let trigger: any;
+
+describe('NoInputDatePicker', () => {
+  describe('single', () => {
+    beforeEach(() => {
+      render(
+        <NoInputDatePicker
+          id={'date-picker'}
+          label={'Pick a date'}
+          value={today}
+          isRangePicker={false}
+          triggerIcon="calendar"
+          triggerIconSize={[20]}
+          onChange={(date: Date | DateRange | undefined) => {
+            mockOnChange(date);
+          }}
+        />,
+      );
+
+      trigger = screen.getByTestId('datepicker-trigger-for-date-picker');
+    });
+
+    it('shows single date picker', async () => {
+      await userEvent.click(trigger);
+      expect(screen.getByTestId('datepicker-dialog')).toBeVisible();
+      expect(screen.getByTestId('single-datepicker')).toBeVisible();
+    });
+
+    it('opens the date picker when clicking on the trigger', async () => {
+      await userEvent.click(trigger);
+      const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
+      expect(datePickerDialogContainer).toBeVisible();
+    });
+
+    it('emits the right date picked for single', async () => {
+      await userEvent.click(trigger);
+      const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
+      expect(datePickerDialogContainer).toBeVisible();
+
+      const day28 = screen.getByText('28');
+      await userEvent.click(day28);
+      expect(mockOnChange).toHaveBeenCalledWith(
+        new Date(today.getFullYear(), today.getMonth(), 28),
+      );
+    });
+
+    it('closes date picker on single selection', async () => {
+      await userEvent.click(trigger);
+      const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
+      expect(datePickerDialogContainer).toBeVisible();
+
+      const day28 = screen.getByText('28');
+      await userEvent.click(day28);
+      expect(mockOnChange).toHaveBeenCalledWith(
+        new Date(today.getFullYear(), today.getMonth(), 28),
+      );
+      expect(datePickerDialogContainer).not.toBeVisible();
+    });
+  });
+
+  describe('range', () => {
+    beforeEach(() => {
+      render(
+        <NoInputDatePicker
+          id={'date-picker'}
+          label={'Pick a date'}
+          value={today}
+          isRangePicker={true}
+          triggerIcon="calendar"
+          triggerIconSize={[20]}
+          onChange={(date: Date | DateRange | undefined) => {
+            mockOnChange(date);
+          }}
+        />,
+      );
+
+      trigger = screen.getByTestId('datepicker-trigger-for-date-picker');
+    });
+
+    it('shows ranged date picker', async () => {
+      await userEvent.click(trigger);
+      expect(screen.getByTestId('datepicker-dialog')).toBeVisible();
+      expect(screen.getByTestId('range-datepicker')).toBeVisible();
+    });
+
+    it('emits the right date picked for range', async () => {
+      await userEvent.click(trigger);
+      const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
+      expect(datePickerDialogContainer).toBeVisible();
+
+      const day27 = screen.getByText('27');
+      await userEvent.click(day27);
+      const day28 = screen.getByText('28');
+      await userEvent.click(day28);
+
+      expect(mockOnChange).toHaveBeenCalledWith({
+        from: new Date(today.getFullYear(), today.getMonth(), 27),
+        to: new Date(today.getFullYear(), today.getMonth(), 28),
+      });
+    });
+    it('closes date picker on both ranged selection', async () => {
+      await userEvent.click(trigger);
+      const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
+      expect(datePickerDialogContainer).toBeVisible();
+
+      const day27 = screen.getByText('27');
+      await userEvent.click(day27);
+      const day28 = screen.getByText('28');
+      await userEvent.click(day28);
+
+      expect(mockOnChange).toHaveBeenCalledWith({
+        from: new Date(today.getFullYear(), today.getMonth(), 27),
+        to: new Date(today.getFullYear(), today.getMonth(), 28),
+      });
+      expect(datePickerDialogContainer).not.toBeVisible();
+    });
+  });
+});

package/src/components/inputs/NoInputDatePicker/index.ts

@@ -0,0 +1 @@
+export { NoInputDatePicker } from './NoInputDatePicker';

package/src/components/inputs/TextInput/TextInput.stories.tsx

@@ -10,7 +10,7 @@ const validationErrors = [
   'Another error that may not be so helpful',
 ];
 
-function StoryRender(props) {
+function StoryRender(props: any) {
   const [value, setValue] = useState<string>(props.value);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {

package/src/components/inputs/index.ts

@@ -4,3 +4,5 @@ export { SearchInput } from './SearchInput';
 export { TextInput } from './TextInput';
 export { Radio, RadioGroup } from './RadioButtons';
 export { AbstractRadio, AbstractRadioGroup } from './RadioGroup';
+export { DatePicker } from './DatePicker';
+export { NoInputDatePicker } from './NoInputDatePicker';

package/src/components/modals/ModalBase/ModalBase.styles.tsx

@@ -3,7 +3,7 @@ import ReactModal from 'react-modal';
 import styled from 'styled-components';
 
 import { COLORS } from '@/tokens';
-import { colorUtils } from '@indico-data/utils';
+import { colorUtils } from '@/utils';
 
 // see: https://github.com/reactjs/react-modal/issues/603
 function ModalAdapter(props: any): React.ReactElement {

package/src/components/text-truncate/TextTruncate.test.tsx

@@ -6,13 +6,12 @@ describe('TextTruncate', () => {
   const longText = 'this is a really long string that should be truncated';
 
   it('truncates text when it exceeds the maximum length and adds a title attr', () => {
-    const { getByTitle } = render(<TextTruncate string={longText} maxChars={20} />);
+    const { getByTitle } = render(<TextTruncate string={longText} maxChars={20}></TextTruncate>);
     expect(getByTitle(longText).textContent).toEqual('this is a really lon...');
   });
 
   it('does not truncate the text when it is below the max length', () => {
-    const { getByText } = render(<TextTruncate string={longText} maxChars={200} />);
+    const { getByText } = render(<TextTruncate string={longText} maxChars={200}></TextTruncate>);
     expect(getByText(longText).textContent).toEqual(longText);
   });
-
-});
+});

package/src/components/text-truncate/TextTruncate.tsx

@@ -4,7 +4,7 @@ import { StyledTextTruncate } from './TextTruncate.styles';
 interface TextTruncateProps {
   string: string;
   maxChars: number;
-  children: any;
+  children?: any;
 }
 
 export function TextTruncate({ string, maxChars, children }: TextTruncateProps) {
@@ -15,7 +15,8 @@ export function TextTruncate({ string, maxChars, children }: TextTruncateProps)
     </StyledTextTruncate>
   ) : (
     <StyledTextTruncate>
-      {string} {children}
+      {string}
+      {children}
     </StyledTextTruncate>
   );
 }

package/src/index.ts

@@ -26,6 +26,7 @@ export {
   CircleSpinner,
   ConfirmModal,
   Drawer,
+  DatePicker,
   EditableInput,
   Icon,
   IconButton,
@@ -34,6 +35,7 @@ export {
   LoadingList,
   ModalBase,
   MultiCombobox,
+  NoInputDatePicker,
   NumberInput,
   Pagination,
   PercentageRing,

package/src/styles/globals/forms.ts

@@ -1,7 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 
 import { COLORS, TYPOGRAPHY, ANIMATION } from '@/tokens';
-import { colorUtils } from '@indico-data/utils';
 
 const formBoxShadow = 'inset 0 0 0 rgba(#000, 0)';
 const formBoxShadowFocus = formBoxShadow;
@@ -59,10 +58,6 @@ export const Forms = createGlobalStyle`
     transition: border-color ${ANIMATION.duration} ${ANIMATION.timing};
     width: 100%;
 
-    &:hover {
-      // border-color: ${colorUtils.shade(COLORS.borderColor, 20)};
-    }
-
     &:focus {
       border-color: ${COLORS.actionColor};
       box-shadow: ${formBoxShadowFocus};
@@ -70,7 +65,6 @@ export const Forms = createGlobalStyle`
     }
 
     &:disabled {
-      // background-color: ${colorUtils.shade(COLORS.backgroundColor, 5)};
       cursor: not-allowed;
 
       &:hover {
@@ -78,9 +72,7 @@ export const Forms = createGlobalStyle`
       }
     }
 
-    &::placeholder {
-      // color: ${colorUtils.tint(COLORS.defaultFontColor, 40)};
-    }
+
   }
 
   textarea {

package/src/styles/globals/tables.ts

@@ -1,8 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 
-import { colorUtils } from '@indico-data/utils';
-
-import { COLORS, TYPOGRAPHY } from '@/tokens';
+import { TYPOGRAPHY } from '@/tokens';
 
 export const Tables = createGlobalStyle`
   table {
@@ -14,14 +12,12 @@ export const Tables = createGlobalStyle`
 
   th {
     font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-    // border-bottom: 0.5px solid ${colorUtils.hexToRgb(COLORS.defaultFontColor, 0.1)};
     padding: 20px 15px 5px;
     font-weight: 400;
     text-align: left;
   }
 
   td {
-    // border-bottom: 0.5px solid ${colorUtils.hexToRgb(COLORS.defaultFontColor, 0.1)};
     padding: 20px 15px;
     font-size: ${TYPOGRAPHY.fontSize.base};
   }

package/src/utils/color.ts

@@ -0,0 +1,139 @@
+export const mix = function (color_1: string, color_2: string, weight: number): string {
+  function d2h(d: number) {
+    return d.toString(16);
+  } // convert a decimal value to hex
+  function h2d(h: string) {
+    return parseInt(h, 16);
+  } // convert a hex value to decimal
+  function s2l(hex: string) {
+    return `${hex}${hex}`;
+  }
+
+  weight = typeof weight !== 'undefined' ? weight : 50; // set the weight to 50%, if that argument is omitted
+  color_1 = color_1.replace(/#/g, '');
+  color_2 = color_2.replace(/#/g, '');
+
+  // check if colors are shorthand or longhand - covert to longhand
+  color_1 = color_1.length === 3 ? s2l(color_1) : color_1;
+  color_2 = color_2.length === 3 ? s2l(color_2) : color_2;
+
+  let color = '#';
+
+  for (let i = 0; i <= 5; i += 2) {
+    // loop through each of the 3 hex pairs—red, green, and blue
+    const v1 = h2d(color_1.substr(i, 2)); // extract the current pairs
+    const v2 = h2d(color_2.substr(i, 2));
+    // combine the current pairs from each source color, according to the specified weight
+    let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
+
+    while (val.length < 2) {
+      val = '0' + val;
+    } // prepend a '0' if val results in a single digit
+
+    color += val; // concatenate val to our new color string
+  }
+
+  return color; // PROFIT!
+};
+
+export const shade = (color: string, percentage: number): string => {
+  return mix('#000000', color, percentage);
+};
+
+export const tint = (color: string, percentage: number): string => {
+  return mix('#ffffff', color, percentage);
+};
+
+/**
+ * Converts hex color values to rgb or rgba values if a opacity is supplied
+ * @param hex
+ * @returns {*}
+ */
+export const hexToRgb = (hex: string, opacity?: number): string | undefined => {
+  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (result && opacity) {
+    return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
+      result[3],
+      16,
+    )}, ${opacity})`;
+  } else if (result) {
+    return `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
+      result[3],
+      16,
+    )})`;
+  }
+  return undefined;
+};
+
+/**
+ * Takes a 3- or 6-character hex color value, and returns an object containing
+ * its equivalent HSL values.
+ *
+ * @see {@link https://css-tricks.com/converting-color-spaces-in-javascript/}
+ * @see {@link https://gist.github.com/mjackson/5311256}
+ */
+export function hexToHsl(hexColor: string): { hue: number; saturation: number; lightness: number } {
+  // convert to 6-character hex string, if necessary
+  const fullHexColor = (() => {
+    if (hexColor.length === 4) {
+      return (
+        '#' +
+        hexColor
+          .replace('#', '')
+          .split('')
+          .reduce((acc, char) => (acc += char + char), '')
+      );
+    }
+
+    return hexColor;
+  })();
+
+  const rgbValues = {
+    red: parseInt(fullHexColor.slice(1, 3), 16) / 255,
+    green: parseInt(fullHexColor.slice(3, 5), 16) / 255,
+    blue: parseInt(fullHexColor.slice(-2), 16) / 255,
+  };
+
+  const allValues = Object.values(rgbValues);
+
+  const channelMax = Math.max(...allValues);
+  const channelMin = Math.min(...allValues);
+  const channelDelta = channelMax - channelMin;
+
+  const hslValues = {
+    hue: 0,
+    saturation: 0,
+    lightness: (channelMax + channelMin) / 2,
+  };
+
+  if (channelDelta !== 0) {
+    // calculate hue
+    if (channelMax === rgbValues.red) {
+      hslValues.hue = ((rgbValues.green - rgbValues.blue) / channelDelta) % 6;
+    } else if (channelMax === rgbValues.green) {
+      hslValues.hue = (rgbValues.blue - rgbValues.red) / channelDelta + 2;
+    } else {
+      hslValues.hue = (rgbValues.red - rgbValues.green) / channelDelta + 4;
+    }
+
+    // calculate saturation
+    hslValues.saturation = channelDelta / (1 - Math.abs(2 * hslValues.lightness - 1));
+  }
+
+  hslValues.hue = Math.round(hslValues.hue * 60);
+  hslValues.saturation = +(hslValues.saturation * 100).toFixed(0);
+  hslValues.lightness = +(hslValues.lightness * 100).toFixed(0);
+
+  // make negative hues positive
+  if (hslValues.hue < 0) {
+    hslValues.hue += 360;
+  }
+
+  return hslValues;
+}

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+import * as colorUtils from './color';
+import * as stringUtils from './string';
+import * as numberUtils from './number';
+
+export { colorUtils, stringUtils, numberUtils };

package/src/utils/number.ts

@@ -0,0 +1,29 @@
+/**
+ * Takes a number and formats it nicely.
+ *
+ * @example numberWithCommas(12345)
+ * // returns 12,345
+ */
+export function numberWithCommas(value: number): string {
+  return new Intl.NumberFormat(navigator.language || 'en-US').format(value);
+}
+
+/**
+ * Takes a number and returns it, rounded up to the maximum decimal places specified.
+ *
+ * @example maxDecimalPlaces(0.1694915254237288, 2)
+ * // returns 0.17
+ *
+ * @example maxDecimalPlaces(0.1694915254237288, 3)
+ * // returns 0.169
+ *
+ * @example maxDecimalPlaces(12.902, 2)
+ * // returns 12.9
+ */
+export function maxDecimalPlaces(value: number, decimalPlaces: number): number {
+  return +value.toFixed(decimalPlaces);
+}
+
+export function formatConfidence(confidence: number): number {
+  return Math.min(Math.floor(confidence * 100), 99);
+}

package/src/utils/string.ts

@@ -0,0 +1,87 @@
+export const camelCaseToUpperUnderscore = (string: string) => {
+  return string
+    .replace(/([A-Z])/g, function ($1) {
+      return '_' + $1;
+    })
+    .toUpperCase();
+};
+
+export const camelCaseToSpaceUpper = (string: string) => {
+  return (
+    string
+      // insert a space before all caps
+      .replace(/([A-Z])/g, ' $1')
+      // uppercase the first character
+      .replace(/^./, function (str) {
+        return str.toUpperCase();
+      })
+  );
+};
+
+export const underscoreToCapitalize = (string: string) => {
+  return (
+    string
+      // replace all _ with spaces
+      .replace(/_/g, ' ')
+      // uppercase the first character
+      .replace(/^./, function (str) {
+        return str.toUpperCase();
+      })
+  );
+};
+
+export const snakeCaseToCamelCase = (string: string) => {
+  const parts = string.split('_').map((part, i) => {
+    if (i > 0) {
+      return part.replace(/^./, function (str) {
+        return str.toUpperCase();
+      });
+    } else {
+      return part;
+    }
+  });
+
+  return parts.join().replace(/,/g, '');
+};
+
+export function capitalize(string: string): string {
+  if (typeof string !== 'string') return '';
+
+  return string.slice(0, 1).toUpperCase() + string.slice(1).toLowerCase();
+}
+
+export function capitalizeFirstOnly(string: string): string {
+  if (typeof string !== 'string') return '';
+
+  return string.slice(0, 1).toUpperCase() + string.slice(1);
+}
+
+/**
+ * Generates a random string of English alphabet characters. Defaults to a length of 8.
+ */
+export function createRandomString(length?: number): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+  let result = '';
+
+  for (let i = 0; i < (length || 8); i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+
+  return result;
+}
+
+export const maxLengthWithEllipse = (string: string, maxLength: number) => {
+  if (string.length <= maxLength) {
+    return string;
+  } else {
+    return string.slice(0, maxLength - 2).concat('...');
+  }
+};
+
+export const maxLengthWithMiddleEllipsis = (string: string, maxLength: number): string => {
+  const frontSegment = string.slice(0, Math.floor(maxLength / 2) - 2);
+  const endSegmentLength = string.length - (Math.floor(maxLength / 2) - 1);
+  const endSegment = string.slice(endSegmentLength, string.length);
+
+  return string.length <= maxLength ? string : `${frontSegment}...${endSegment}`;
+};