@indico-data/design-system 1.0.52 → 1.0.53

package/lib/types.d.ts

@@ -12,6 +12,7 @@ declare const allIcons: {
     readonly bookmarks: import("react/jsx-runtime").JSX.Element;
     readonly 'bookmark-saved': import("react/jsx-runtime").JSX.Element;
     readonly branch: import("react/jsx-runtime").JSX.Element;
+    readonly calendar: import("react/jsx-runtime").JSX.Element;
     readonly 'check-circle': import("react/jsx-runtime").JSX.Element;
     readonly 'circle-help': import("react/jsx-runtime").JSX.Element;
     readonly check: import("react/jsx-runtime").JSX.Element;

package/lib/utils/color.d.ts

@@ -0,0 +1,21 @@
+export declare const mix: (color_1: string, color_2: string, weight: number) => string;
+export declare const shade: (color: string, percentage: number) => string;
+export declare const tint: (color: string, percentage: number) => string;
+/**
+ * Converts hex color values to rgb or rgba values if a opacity is supplied
+ * @param hex
+ * @returns {*}
+ */
+export declare const hexToRgb: (hex: string, opacity?: number) => string | 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 declare function hexToHsl(hexColor: string): {
+    hue: number;
+    saturation: number;
+    lightness: number;
+};

package/lib/utils/index.d.ts

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

package/lib/utils/number.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Takes a number and formats it nicely.
+ *
+ * @example numberWithCommas(12345)
+ * // returns 12,345
+ */
+export declare function numberWithCommas(value: number): string;
+/**
+ * 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 declare function maxDecimalPlaces(value: number, decimalPlaces: number): number;
+export declare function formatConfidence(confidence: number): number;

package/lib/utils/string.d.ts

@@ -0,0 +1,12 @@
+export declare const camelCaseToUpperUnderscore: (string: string) => string;
+export declare const camelCaseToSpaceUpper: (string: string) => string;
+export declare const underscoreToCapitalize: (string: string) => string;
+export declare const snakeCaseToCamelCase: (string: string) => string;
+export declare function capitalize(string: string): string;
+export declare function capitalizeFirstOnly(string: string): string;
+/**
+ * Generates a random string of English alphabet characters. Defaults to a length of 8.
+ */
+export declare function createRandomString(length?: number): string;
+export declare const maxLengthWithEllipse: (string: string, maxLength: number) => string;
+export declare const maxLengthWithMiddleEllipsis: (string: string, maxLength: number) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.52",
+  "version": "1.0.53",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -12,8 +12,8 @@
     "build": "rollup -c",
     "build storybook": "storybook build",
     "test-storybook": "test-storybook",
-    "test": "jest",
-    "test:watch": "jest --watch"
+    "test": "DEBUG_PRINT_LIMIT=10000 jest",
+    "test:watch": "DEBUG_PRINT_LIMIT=10000 jest --watch"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
@@ -23,6 +23,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@indico-data/utils": "^0.0.5",
+    "@popperjs/core": "^2.11.8",
     "@react-aria/radio": "^3.10.0",
     "@react-aria/visually-hidden": "^3.8.8",
     "@react-types/button": "^3.9.1",
@@ -30,12 +31,17 @@
     "@react-types/radio": "^3.7.0",
     "classnames": "^2.5.1",
     "date-fns": "^3.3.1",
+    "focus-trap-react": "^10.2.3",
     "html-webpack-plugin": "^5.6.0",
+    "prop-types": "^15.8.1",
     "react-aria-components": "^1.0.1",
+    "react-day-picker": "^8.10.0",
     "react-modal": "^3.16.1",
+    "react-popper": "^2.3.0",
     "react-stately": "^3.29.1",
     "simple-zustand-devtools": "^1.1.0",
     "svgo": "^3.2.0",
+    "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "uuid": "^9.0.1",
     "webpack": "^5.90.1",
@@ -74,6 +80,7 @@
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
+    "@types/prop-types": "^15",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.18",
     "@types/react-modal": "^3.16.3",

package/src/components/Icon/indicons.tsx

@@ -70,6 +70,12 @@ const indicons = {
       />
     </svg>
   ),
+  calendar: (
+    <svg viewBox="0 0 24 24">
+      <path d="M12 12c-.6 0-1 .5-1 1 0 .6.5 1 1 1s1-.5 1-1-.4-1-1-1M12 17c-.6 0-1 .5-1 1 0 .6.5 1 1 1s1-.5 1-1-.4-1-1-1M7.1 12c-.6 0-1 .5-1 1 0 .6.5 1 1 1 .6 0 1-.5 1-1 .1-.5-.4-1-1-1M7.1 17c-.6 0-1 .5-1 1 0 .6.5 1 1 1 .6 0 1-.5 1-1 .1-.5-.4-1-1-1M16.9 17c-.6 0-1 .5-1 1 0 .6.5 1 1 1 .6 0 1-.5 1-1s-.5-1-1-1M16.9 12c-.6 0-1 .5-1 1 0 .6.5 1 1 1 .6 0 1-.5 1-1s-.5-1-1-1" />
+      <path d="M19.1 2.4h-1.2V1c0-.6-.4-1-1-1s-1 .4-1 1v1.4H8.1V1c0-.6-.4-1-1-1s-1 .4-1 1v1.4H4.9c-2.1 0-3.7 1.7-3.7 3.7v14.1c0 2.1 1.7 3.7 3.7 3.7h14.3c2.1 0 3.7-1.7 3.7-3.7V6.1c0-2-1.7-3.7-3.8-3.7m-14.2 2h14.3c1 0 1.7.8 1.7 1.7v1.3H3.1V6.1c0-.9.8-1.7 1.8-1.7M19.1 22H4.9c-1 0-1.7-.8-1.7-1.7V9.4h17.7v10.9c0 .9-.8 1.7-1.8 1.7" />
+    </svg>
+  ),
   'check-circle': (
     <svg viewBox="0 0 100 100" fill="currentColor">
       <path d="M100 50c0 27.6-22.4 50-50 50S0 77.6 0 50 22.4 0 50 0s50 22.4 50 50zM78 30.7c-.7-1-1.9-1.5-3.5-1.5-1.2 0-2.3.5-3.3 1.5C65 37 45.3 56.6 42.4 59.4L28.8 48c-1-.9-2.2-1.3-3.5-1.2-1.3.1-2.5.7-3.3 1.8-.9 1-1.3 2.2-1.2 3.5.1 1.3.7 2.5 1.8 3.3l16.8 14.2c.9.7 2 1.1 3.1 1.1 1.3 0 2.5-.5 3.4-1.4 6.8-6.6 28.7-28.7 32-32 1.8-1.7 1.8-4.6.1-6.6z" />

package/src/components/ListTable/Header/Header.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { numberUtils } from '@indico-data/utils';
+import { numberUtils } from '@/utils';
 
 import { BorderSelect } from '@/components/dropdowns';
 import { Button } from '@/components/buttons';

package/src/components/Pagination/Pagination.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { numberUtils } from '@indico-data/utils';
+import { numberUtils } from '@/utils';
 
 import { PermafrostComponent } from '@/types';
 

package/src/components/basic-section/SectionTable/SectionTable.styles.ts

@@ -1,6 +1,6 @@
 import styled, { keyframes } from 'styled-components';
 
-import { colorUtils } from '@indico-data/utils';
+import { colorUtils } from '@/utils';
 
 import { MEDIA_QUERIES, COLORS } from '@/tokens';
 
@@ -188,7 +188,6 @@ export const StyledSectionTable = styled.div`
 
     @media ${MEDIA_QUERIES.mediumScreen} {
       position: static;
-      // border-bottom: 0.5px solid ${colorUtils.hexToRgb(COLORS.defaultFontColor, 0.1)};
       padding: 20px 15px;
     }
   }

package/src/components/basic-section/SectionTable/SectionTable.tsx

@@ -9,25 +9,25 @@ import { BorderSelect } from '@/components/dropdowns';
 
 import { StyledSectionTable } from './SectionTable.styles';
 
-const createTitle = (item) => {
+const createTitle = (item: any) => {
   return typeof item === 'string' || typeof item === 'number' ? item : null;
 };
 
-export const SectionTable = (props) => {
+export const SectionTable = (props: any) => {
   const [openRowOptions, changeOpenRowOptions] = useState([]);
 
-  const handleRowClick = (link) => {
+  const handleRowClick = (link: any) => {
     if (!link) {
       return null;
     }
-    return (e) => {
+    return (e: any) => {
       e.stopPropagation();
       props.history.push(link);
     };
   };
 
-  const handleRowOptionToggleClick = (id) => {
-    if (openRowOptions.indexOf(id) === -1) {
+  const handleRowOptionToggleClick = (id: any) => {
+    if (openRowOptions.indexOf(id as never) === -1) {
       changeOpenRowOptions([].concat(openRowOptions, id));
     } else {
       changeOpenRowOptions(openRowOptions.filter((option) => option !== id));
@@ -49,7 +49,7 @@ export const SectionTable = (props) => {
           <BorderSelect
             onChange={(e) => props.sortColumnHandler(e.target.value)}
             value={props.sortedColumn}
-            options={[].concat(
+            options={([] as { name: string; value: string }[]).concat(
               { name: 'Choose Sorting Option', value: '' },
               headers.map((item) => {
                 return { name: item, value: item };
@@ -102,7 +102,7 @@ export const SectionTable = (props) => {
                   )}
                 </tr>
               ))
-            : props.tableObjects.map((obj, i) => {
+            : props.tableObjects.map((obj: any, i: any) => {
                 let rowStyle = obj.rowStyleCondition;
 
                 if (rowStyle) {
@@ -149,7 +149,9 @@ export const SectionTable = (props) => {
                                   name="chevron-down"
                                   style={{
                                     transform:
-                                      openRowOptions.indexOf(obj.id) !== -1 ? 'rotate(180deg)' : '',
+                                      openRowOptions.indexOf(obj.id as never) !== -1
+                                        ? 'rotate(180deg)'
+                                        : '',
                                   }}
                                 />
                               </td>
@@ -171,7 +173,7 @@ export const SectionTable = (props) => {
                             </tr>
                             <tr
                               className={classNames('row-option', {
-                                open: openRowOptions.indexOf(obj.id) !== -1,
+                                open: openRowOptions.indexOf(obj.id as never) !== -1,
                               })}
                             >
                               <td className="inner-table-cell" colSpan={headers.length + 1}>

package/src/components/dropdowns/MultiCombobox/MultiCombobox.stories.tsx

@@ -28,7 +28,7 @@ const complexItems = options.map((option) => {
   };
 });
 
-function StoryRender(props) {
+function StoryRender(props: any) {
   const selectEl = useRef(null);
   const { clearValue } = useCombobox(selectEl);
 

package/src/components/dropdowns/MultiCombobox/MultiCombobox.tsx

@@ -103,7 +103,7 @@ export const MultiCombobox = React.forwardRef((props: Props, ref: any) => {
       isLoading={loading}
       menuIsOpen={menuIsOpen}
       noOptionsMessage={() => noOptionsMessage}
-      onChange={onChange}
+      onChange={onChange as any}
       options={options}
       placeholder={placeholder}
       // validationErrors={validationErrors}

package/src/components/dropdowns/SingleCombobox/SingleCombobox.tsx

@@ -83,7 +83,7 @@ export const SingleCombobox = React.forwardRef((props: Props, ref: any) => {
       isMulti={false}
       menuIsOpen={menuIsOpen}
       noOptionsMessage={() => noOptionsMessage}
-      onChange={onChange}
+      onChange={onChange as any}
       options={options}
       placeholder={placeholder}
       // validationErrors={validationErrors}

package/src/components/index.ts

@@ -12,6 +12,8 @@ export {
   RadioGroup,
   AbstractRadio,
   AbstractRadioGroup,
+  DatePicker,
+  NoInputDatePicker,
 } from './inputs';
 export {
   BarSpinner,

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { DatePicker } from '@/components/inputs/DatePicker';
+
+const meta: Meta<typeof DatePicker> = {
+  component: DatePicker,
+  tags: ['autodocs'],
+  title: 'Inputs/DatePicker',
+  decorators: [(Story) => <Story />],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+const today = new Date();
+
+export const Normal: Story = {
+  args: {
+    id: 'date-picker',
+    label: 'Pick a date:',
+    placeholder: 'This Week',
+    value: today,
+    onChange: (date: Date | undefined) => {
+      // eslint-disable-next-line no-console
+      console.log(date);
+    },
+  },
+};