@7shifts/sous-chef 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,4 +1,20 @@
-## NEXT VERSION
+## NEXT RELEASE
+
+### New components
+
+-   DataTable ([#50](https://github.com/7shifts/sous-chef/pull/50))
+
+## 1.2.1 (September 23rd, 2021)
+
+### Bug fixes
+
+-   Modal: When a scroll was showing, the top content was getting cut off on the top. Also updated the flow type ([#55](https://github.com/7shifts/sous-chef/pull/55))
+
+### Enhancements
+
+-   Form: Updated the field components to work with formik components such as `Field` and `FieldArray`. It also suports now dynamic fields ([#53](https://github.com/7shifts/sous-chef/pull/53))
+
+## 1.2.0 (September 15th, 2021)
 
 ### New components
 

package/dist/core/DataTable/DataTable.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { Column, CustomComponent, Item, Sort } from './types';
+declare type Props<T> = {
+    /** Each element represents a row and each key of the object represents a column */
+    items: Item<T>[];
+    /** For each column element, the `name` property should match the key on `items` */
+    columns: Column[];
+    /** A custom component for  customizing how the each item is rendered. It pass as props: `item`, `index`, `columnSizes` and `columns` */
+    itemComponent?: React.ComponentType<CustomComponent<T>>;
+    maxHeight?: number;
+    /** Used for pagination */
+    hasPrevious?: boolean;
+    /** Used for pagination */
+    hasNext?: boolean;
+    /** Used for pagination */
+    onPreviousClick?: () => void;
+    /** Used for pagination */
+    onNextClick?: () => void;
+    isLoading?: boolean;
+    /** It is fired when a sorted column is clicked to be sorted */
+    onSort?: (sort: Sort) => void;
+    showActionMenu?: boolean;
+    /** Will render footer component if not null; expects same format as row items */
+    footer?: Item<T>;
+    /** Will render vertical borders between columns if true */
+    hasVerticalBorders?: boolean;
+};
+declare const DataTable: <T extends unknown>({ items, columns, itemComponent, maxHeight, hasPrevious, hasNext, onPreviousClick, onNextClick, onSort, isLoading, showActionMenu, footer, hasVerticalBorders }: Props<T>) => JSX.Element;
+export default DataTable;

package/dist/core/DataTable/DataTable.js.flow

@@ -0,0 +1,59 @@
+/**
+ * Flowtype definitions for DataTable
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+import * as React from 'react';
+import type { Column, CustomComponent, Item, Sort } from './types';
+declare type Props<T> = {
+    /**
+     * Each element represents a row and each key of the object represents a column
+     */
+    items: Item<T>[],
+
+    /**
+     * For each column element, the `name` property should match the key on `items`
+     */
+    columns: Column[],
+
+    /**
+     * A custom component for  customizing how the each item is rendered. It pass as props: `item`, `index`, `columnSizes` and `columns`
+     */
+    itemComponent?: React$ComponentType<CustomComponent<T>>,
+    maxHeight?: number,
+
+    /**
+     * Used for pagination
+     */
+    hasPrevious?: boolean,
+
+    /**
+     * Used for pagination
+     */
+    hasNext?: boolean,
+
+    /**
+     * Used for pagination
+     */
+    onPreviousClick?: () => void,
+
+    /**
+     * Used for pagination
+     */
+    onNextClick?: () => void,
+    isLoading?: boolean,
+
+    /**
+     * It is fired when a sorted column is clicked to be sorted
+     */
+    onSort?: (sort: Sort) => void,
+    showActionMenu?: boolean,
+    /** Will render footer component if not null; expects same format as row items */
+    footer?: Item<T>,
+    /** Will render vertical borders between columns if true */
+    hasVerticalBorders?: boolean
+};
+declare var DataTable: <T>(props: Props<T>) => React$Node;
+declare export default typeof DataTable;

package/dist/core/DataTable/DataTableContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { Column } from './types';
+export declare type DataTableContextType = {
+    columns?: Column[];
+    showActionMenu?: boolean;
+};
+declare const Context: import("react").Context<DataTableContextType>;
+export declare const useDataTableContext: () => DataTableContextType;
+export default Context;

package/dist/core/DataTable/DataTableContext.js.flow

@@ -0,0 +1,15 @@
+/**
+ * Flowtype definitions for DataTableContext
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+import * as React from 'react';
+
+export type DataTableContextType = {
+    columnSizes?: number[],
+    showActionMenu?: boolean,
+};
+declare var Context: React$Context<DataTableContextType>;
+declare export var useDataTableContext: () => DataTableContextType;
+declare export default typeof Context;

package/dist/core/DataTable/DataTableHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Column, Sort } from './types';
+declare type Props = {
+    columns: Column[];
+    onSort?: (sort: Sort) => void;
+    showActionMenu?: boolean;
+};
+declare const DataTableHeader: React.FC<Props>;
+export default DataTableHeader;

package/dist/core/DataTable/index.d.ts

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

package/dist/core/DataTable/index.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+declare export { default } from "./DataTable";

package/dist/core/DataTable/types.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export declare type Column = {
+    name: string;
+    label?: React.ReactNode;
+    size?: number;
+    isSortable?: boolean;
+    currentSort?: SortDirection;
+    isRightAligned?: boolean;
+};
+export declare type SortDirection = 'asc' | 'desc' | null;
+export declare type Sort = {
+    columnName: string;
+    direction: SortDirection;
+};
+export declare type Item<T> = T | (T & {
+    actions?: Action[];
+});
+export declare type CustomComponent<T> = {
+    item: Item<T>;
+    index: number;
+    columnSizes?: number[];
+    columns?: Column[];
+    hasVerticalBorders?: boolean;
+};
+export declare type Action = {
+    label: React.ReactNode;
+    onAction: () => void;
+};

package/dist/core/DataTable/types.js.flow

@@ -0,0 +1,31 @@
+/**
+ * Flowtype definitions for types
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+import * as React from 'react';
+
+export type Column = {
+    name: string,
+    label?: React$Node,
+    size?: number,
+    isSortable?: boolean,
+    currentSort?: SortDirection,
+};
+export type SortDirection = 'asc' | 'desc' | null;
+export type Sort = {
+    columnName: string,
+    direction: SortDirection,
+};
+export type Item<T> = T | (T & { actions?: Action[] });
+export type CustomComponent<T> = {
+    item: Item<T>,
+    index: number,
+    columnSizes?: number[],
+    columns?: Column[],
+};
+export type Action = {
+    label: React$Node,
+    onAction: () => void,
+};

package/dist/core/DataTableRow/DataTableRow.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Action } from '../DataTable/types';
+declare type Props = {
+    children: React.ReactNode;
+    onClick?: () => void;
+    isSelected?: boolean;
+    actions?: Action[];
+    hasVerticalBorders?: boolean;
+};
+declare const DataTableRow: React.FC<Props>;
+export default DataTableRow;

package/dist/core/DataTableRow/DataTableRow.js.flow

@@ -0,0 +1,17 @@
+/**
+ * Flowtype definitions for DataTableRow
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+import * as React from 'react';
+import type { Action } from '../DataTable/types';
+declare type Props = {
+    children: React$Node,
+    onClick?: () => void,
+    isSelected?: boolean,
+    actions?: Action[],
+};
+declare var DataTableRow: (props: Props) => React$Node;
+declare export default typeof DataTableRow;

package/dist/core/DataTableRow/index.d.ts

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

package/dist/core/DataTableRow/index.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+declare export { default } from "./DataTableRow";

package/dist/core/ResourceTable/ResourceTable.d.ts

@@ -21,5 +21,8 @@ declare type Props<T> = {
     onSort?: (sort: Sort) => void;
     showActionMenu?: boolean;
 };
+/**
+ * @deprecated On v2.0 we introduced the `DataTable` that should be used for tabular data. This component will be removed on v3.0.
+ */
 declare const ResourceTable: <T extends unknown>({ items, columns, itemComponent, maxHeight, hasPrevious, hasNext, onPreviousClick, onNextClick, onSort, isLoading, showActionMenu }: Props<T>) => JSX.Element;
 export default ResourceTable;

package/dist/core/ResourceTable/ResourceTableHeader.d.ts

@@ -5,5 +5,8 @@ declare type Props = {
     onSort?: (sort: Sort) => void;
     showActionMenu?: boolean;
 };
+/**
+ * @deprecated On v2.0 we introduced the `DataTable` that should be used for tabular data. This component will be removed on v3.0.
+ */
 declare const ResourceTableHeader: React.FC<Props>;
 export default ResourceTableHeader;

package/dist/core/ResourceTableRow/ResourceTableRow.d.ts

@@ -6,5 +6,8 @@ declare type Props = {
     isSelected?: boolean;
     actions?: Action[];
 };
+/**
+ * @deprecated On v2.0 we introduced the `DataTable` that should be used for tabular data. This component will be removed on v3.0.
+ */
 declare const ResourceTableRow: React.FC<Props>;
 export default ResourceTableRow;

package/dist/index.css

@@ -2026,8 +2026,6 @@ Please ask a designer if you have questions about which colours to use.
   font-family: "Proxima Nova", sans-serif;
   font-size: 14px;
   line-height: 16px;
-  display: flex;
-  flex-direction: column;
   position: relative;
   z-index: 1;
   background: #fff no-repeat;

package/dist/index.js

@@ -1435,6 +1435,55 @@ var useFieldId = function useFieldId(_ref) {
   return id;
 };
 
+var getFormikState = function getFormikState(name, formik) {
+  if (formik === undefined) {
+    return null;
+  }
+
+  if (Object.keys(formik.values).includes(name)) {
+    return {
+      error: formik.touched[name] ? formik.errors[name] : undefined,
+      value: formik.values[name]
+    };
+  }
+
+  var formikArray = getFormikArrayPath(name);
+
+  if (formikArray) {
+    var _formik$touched, _formik$touched$array, _formik$touched$array2, _formik$errors, _formik$errors$arrayN, _formik$errors$arrayN2, _formik$values, _formik$values$arrayN, _formik$values$arrayN2;
+
+    var arrayName = formikArray.arrayName,
+        itemIndex = formikArray.itemIndex,
+        fieldName = formikArray.fieldName;
+    return {
+      error: (_formik$touched = formik.touched) !== null && _formik$touched !== void 0 && (_formik$touched$array = _formik$touched[arrayName]) !== null && _formik$touched$array !== void 0 && (_formik$touched$array2 = _formik$touched$array[itemIndex]) !== null && _formik$touched$array2 !== void 0 && _formik$touched$array2[fieldName] ? (_formik$errors = formik.errors) === null || _formik$errors === void 0 ? void 0 : (_formik$errors$arrayN = _formik$errors[arrayName]) === null || _formik$errors$arrayN === void 0 ? void 0 : (_formik$errors$arrayN2 = _formik$errors$arrayN[itemIndex]) === null || _formik$errors$arrayN2 === void 0 ? void 0 : _formik$errors$arrayN2[fieldName] : undefined,
+      value: (_formik$values = formik.values) === null || _formik$values === void 0 ? void 0 : (_formik$values$arrayN = _formik$values[arrayName]) === null || _formik$values$arrayN === void 0 ? void 0 : (_formik$values$arrayN2 = _formik$values$arrayN[itemIndex]) === null || _formik$values$arrayN2 === void 0 ? void 0 : _formik$values$arrayN2[fieldName]
+    };
+  }
+
+  return null;
+};
+
+var getFormikArrayPath = function getFormikArrayPath(name) {
+  if (!name.includes('[')) {
+    return false;
+  }
+
+  var _name$split = name.split('['),
+      arrayName = _name$split[0],
+      missingSplit = _name$split[1];
+
+  var _missingSplit$split = missingSplit.split('].'),
+      itemIndex = _missingSplit$split[0],
+      fieldName = _missingSplit$split[1];
+
+  return {
+    arrayName: arrayName,
+    itemIndex: itemIndex,
+    fieldName: fieldName
+  };
+};
+
 var useFieldControllers = function useFieldControllers(_ref) {
   var name = _ref.name,
       inputId = _ref.id,
@@ -1455,18 +1504,18 @@ var useFieldControllers = function useFieldControllers(_ref) {
     error: error,
     value: value,
     onChange: function onChange(e) {
-      return _onChange && _onChange(e.target.value);
+      return _onChange && _onChange(formik ? e : e.target.value);
     },
     onBlur: function onBlur(e) {
-      return _onBlur && _onBlur(e.target.value);
+      return _onBlur && _onBlur(formik ? e : e.target.value);
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && Object.keys(formik.values).includes(name)) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikError,
-      value: value !== undefined ? controllers.value : formik.values[name],
+      error: error !== undefined ? controllers.error : formikState.error,
+      value: value !== undefined ? controllers.value : formikState.value,
       onChange: _onChange ? controllers.onChange : function (e) {
         return formik.setFieldValue(name, e.target.value);
       },
@@ -1734,12 +1783,12 @@ var useCheckBoxFieldControllers = function useCheckBoxFieldControllers(_ref) {
       return _onBlur && _onBlur(e.target.checked);
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && Object.keys(formik.values).includes(name)) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikError,
-      checked: checked !== undefined ? controllers.checked : formik.values[name],
+      error: error !== undefined ? controllers.error : formikState.error,
+      checked: checked !== undefined ? controllers.checked : formikState.value,
       onChange: function onChange(e) {
         formik.setFieldValue(name, e.target.checked);
         _onChange && _onChange(e.target.checked);
@@ -1822,12 +1871,12 @@ var useRadioGroupFieldControllers = function useRadioGroupFieldControllers(_ref)
       return _onChange && _onChange(e.target.value);
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && Object.keys(formik.values).includes(name)) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikError,
-      value: value !== undefined ? controllers.value : formik.values[name],
+      error: error !== undefined ? controllers.error : formikState.error,
+      value: value !== undefined ? controllers.value : formikState.value,
       onChange: function onChange(e) {
         formik.setFieldValue(name, e.target.checked);
         _onChange && _onChange(e.target.value);
@@ -2094,12 +2143,12 @@ var useMultiSelectFieldControllers = function useMultiSelectFieldControllers(_re
       return _onBlur && _onBlur(options);
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && formik.values[name] !== undefined) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error ? controllers.error : formikError,
-      value: value ? controllers.value : formik.values[name],
+      error: error ? controllers.error : formikState.error,
+      value: value ? controllers.value : formikState.value,
       onChange: function onChange(options) {
         if (_onChange) {
           _onChange(options);
@@ -2327,12 +2376,12 @@ var useSelectFieldControllers = function useSelectFieldControllers(_ref) {
       return _onBlur && _onBlur(option);
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && formik.values[name] !== undefined) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error ? controllers.error : formikError,
-      value: value ? controllers.value : formik.values[name],
+      error: error ? controllers.error : formikState.error,
+      value: value ? controllers.value : formikState.value,
       onChange: function onChange(option) {
         if (_onChange) {
           _onChange(option);
@@ -2479,12 +2528,12 @@ var useDateFieldControllers = function useDateFieldControllers(_ref) {
       return _onBlur && _onBlur();
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && Object.keys(formik.values).includes(name)) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     controllers = _extends({}, controllers, {
-      error: error !== undefined ? controllers.error : formikError,
-      value: value !== undefined ? controllers.value : formik.values[name],
+      error: error !== undefined ? controllers.error : formikState.error,
+      value: value !== undefined ? controllers.value : formikState.value,
       onChange: _onChange ? controllers.onChange : function (newValue) {
         formik.setFieldValue(name, newValue === undefined ? null : newValue);
       },
@@ -2676,12 +2725,12 @@ var useRangeFieldControllers = function useRangeFieldControllers(_ref) {
       return _onBlur && _onBlur();
     }
   };
+  var formikState = getFormikState(name, formik);
 
-  if (formik && Object.keys(formik.values).includes(name)) {
-    var formikError = formik.touched[name] ? formik.errors[name] : undefined;
+  if (formik && formikState) {
     return _extends({}, initialControllers, {
-      error: error !== undefined ? initialControllers.error : formikError,
-      value: value !== undefined ? initialControllers.value : formik.values[name],
+      error: error !== undefined ? initialControllers.error : formikState.error,
+      value: value !== undefined ? initialControllers.value : formikState.value,
       onChange: _onChange ? initialControllers.onChange : function (newValue) {
         formik.setFieldValue(name, newValue === undefined ? null : newValue);
       },
@@ -3140,9 +3189,8 @@ var Modal = function Modal(_ref) {
   }), children);
 };
 
-Modal.setAppElement = function (rootElementId) {
-  var element = document.getElementById(rootElementId);
-  element && ReactModal.setAppElement(element);
+Modal.setAppElement = function (rootElement) {
+  ReactModal.setAppElement(rootElement);
 };
 
 var styles$t = {"modal-body":"_2J-ku"};