@7shifts/sous-chef 1.2.0 → 1.3.1

package/CHANGELOG.md

@@ -1,4 +1,26 @@
-## NEXT VERSION
+## 1.3.0 (September 27th, 2021)
+
+### New components
+
+-   DataTable ([#50](https://github.com/7shifts/sous-chef/pull/50)) - And added editable functionality ([#54](https://github.com/7shifts/sous-chef/pull/54))
+
+## 1.2.2 (September 24rd, 2021)
+
+### Bug fixes
+
+-   TextField: Removed the support for Formik `Field` as it was a breaking change in the `TextField` component ([#56](https://github.com/7shifts/sous-chef/pull/56))
+
+## 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/actions/PaginationControls/PaginationControls.d.ts

@@ -6,7 +6,7 @@ declare type Props = {
     onNextClick: () => void;
 };
 /**
- * `PaginationControls` are two buttons side by side, currently most used within ResourceTable.
+ * `PaginationControls` are two buttons side by side.
  */
 declare const PaginationControls: React.FC<Props>;
 export default PaginationControls;

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 a custom RowItem component */
+    footerComponent?: React.ReactNode;
+    /** 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, footerComponent, 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 a custom RowItem component */
+    footerComponent?: React.ReactNode;
+    /** 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/DataTableCell/DataTableCell.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+    columnIndex: number;
+};
+declare const DataTableCell: ({ children, columnIndex }: Props) => JSX.Element;
+export default DataTableCell;

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

@@ -0,0 +1 @@
+export * from './DataTableCell';

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { Column } from './types';
+export declare type DataTableContextType = {
+    columns: Column[];
+    showActionMenu?: boolean;
+    numberOfRows: number;
+    hasVerticalBorders?: 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,27 @@
+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[];
+};
+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/DataTableCell/DataTableCell.js.flow

@@ -0,0 +1,16 @@
+/**
+ * Flowtype definitions for DataTableRow
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+import * as React from 'react';
+declare type Props = {
+    value?: string,
+    /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
+    prefix?: React.ReactNode,
+    /** Use suffix for things like units of measure (“in”, “cm”, ”hours”) or icons. */
+    suffix?: React.ReactNode
+};
+declare var DataTableCell: (props: Props) => React$Node;
+declare export default typeof DataTableCell;

package/dist/core/DataTableCell/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 "./DataTableCell";

package/dist/core/DataTableEditableCell/DataTableEditableCell.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+declare type Props = {
+    name: string;
+    columnIndex: number;
+    rowIndex: number;
+    id?: string;
+    value?: string;
+    onChange?: (e: string) => void;
+    onBlur?: (e: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string;
+    /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
+    prefix?: React.ReactNode;
+    /** Use suffix for things like units of measure (“in”, “cm”, ”hours”) or icons. */
+    suffix?: React.ReactNode;
+    defaultValue?: string;
+    type?: 'text' | 'currency';
+};
+declare const DataTableEditableCell: ({ name, columnIndex, rowIndex, id: inputId, value, onChange, onBlur, placeholder, disabled, error, prefix, suffix, defaultValue, type }: Props) => JSX.Element;
+export default DataTableEditableCell;

package/dist/core/DataTableEditableCell/DataTableEditableCell.js.flow

@@ -0,0 +1,26 @@
+/**
+ * Flowtype definitions for DataTableRow
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+import * as React from 'react';
+declare type Props = {
+    name: string,
+    columnIndex: number,
+    rowIndex: number,
+    id?: string,
+    value?: string,
+    onChange?: (e: string) => void,
+    onBlur?: (e: string) => void,
+    placeholder?: string,
+    disabled?: boolean,
+    error?: string,
+    /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
+    prefix?: React.ReactNode,
+    /** Use suffix for things like units of measure (“in”, “cm”, ”hours”) or icons. */
+    suffix?: React.ReactNode,
+    defaultValue?: string
+};
+declare var DataTableEditableCell: (props: Props) => React$Node;
+declare export default typeof DataTableEditableCell;

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

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

package/dist/core/DataTableEditableCell/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 "./DataTableEditableCell";

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[];
+    hasDefaultPadding?: 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/core/index.d.ts

@@ -2,6 +2,11 @@ import ResourceTable from './ResourceTable';
 import ResourceTableRow from './ResourceTableRow';
 import Inline from './Inline';
 import Stack from './Stack';
-export { ResourceTable, ResourceTableRow, Inline, Stack };
+import DataTable from './DataTable';
+import DataTableRow from './DataTableRow';
+import DataTableCell from './DataTable/DataTableCell/DataTableCell';
+import DataTableEditableCell from './DataTableEditableCell';
+export { ResourceTable, ResourceTableRow, Inline, Stack, DataTable, DataTableRow, DataTableCell, DataTableEditableCell };
 export type { AlignItems, FlexWrap, JustifyContent } from './Flex/types';
 export type { CustomComponent, Column, SortDirection, Sort, Action } from './ResourceTable/types';
+export type { Column as DataTableColumn } from './DataTable/types';

package/dist/forms/hooks/useFieldControllers.d.ts

@@ -14,6 +14,7 @@ declare type Props = {
     onChange?: (e: string) => void;
     onBlur?: (e: string) => void;
     error?: string;
+    type?: 'text' | 'currency';
 };
-export declare const useFieldControllers: ({ name, id: inputId, value, onChange, onBlur, error }: Props) => FieldControls;
+export declare const useFieldControllers: ({ name, id: inputId, value, onChange, onBlur, error, type }: Props) => FieldControls;
 export {};