@7shifts/sous-chef 1.5.4 → 1.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "1.5.4",
+    "version": "1.5.8",
     "description": "7shifts component library",
     "author": "7shifts",
     "license": "MIT",
@@ -31,10 +31,10 @@
     },
     "devDependencies": {
         "@babel/core": "^7.14.3",
-        "@storybook/addon-actions": "^6.2.9",
-        "@storybook/addon-essentials": "^6.2.9",
-        "@storybook/addon-links": "^6.2.9",
-        "@storybook/react": "^6.2.9",
+        "@storybook/addon-actions": "^6.4.12",
+        "@storybook/addon-essentials": "^6.4.12",
+        "@storybook/addon-links": "^6.4.12",
+        "@storybook/react": "^6.4.12",
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^13.2.1",
@@ -64,12 +64,12 @@
         "formik": "^2.2.6",
         "gh-pages": "^2.2.0",
         "microbundle-crl": "^0.13.10",
-        "node-sass": "^4.0.0",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.0.4",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-scripts": "^3.4.1",
+        "sass": "^1.48.0",
         "sass-loader": "10.1.1",
         "typescript": "^3.7.5",
         "yup": "^0.32.9"

package/dist/actions/Button/Button.js.flow

@@ -1,44 +0,0 @@
-/**
- * Flowtype definitions for Button
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
- * @flow
- */
-
-import * as React from 'react';
-declare type ButtonTheme =
-    | 'default'
-    | 'primary'
-    | 'danger'
-    | 'upsell'
-    | 'marketing'
-    | 'hollow'
-    | 'link-primary'
-    | 'link-danger'
-    | 'link-upsell'
-    | 'link-toolbar'
-    | 'link-contrast'
-    | 'link-icon';
-declare type Props = {
-    children: React$Node,
-    type?: 'button' | 'submit' | 'reset',
-
-    /**
-     * It controls the button theme
-     */
-    theme?: ButtonTheme,
-    disabled?: boolean,
-    onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
-    id?: string,
-    wide?: boolean,
-    loading?: boolean,
-
-    /**
-     * This will show a black tooltip when the user hover the button
-     */
-    title?: string,
-    href?: string,
-    target?: '_self' | '_blank',
-};
-declare var _default: React$AbstractComponent<Props, HTMLElement>;
-declare export default typeof _default;

package/dist/actions/Button/index.js.flow

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

package/dist/actions/PaginationControls/PaginationControls.js.flow

@@ -1,16 +0,0 @@
-/**
- * Flowtype definitions for PaginationControls
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
- * @flow
- */
-
-import * as React from 'react';
-declare type Props = {
-    hasPrevious?: boolean,
-    hasNext?: boolean,
-    onPreviousClick: () => void,
-    onNextClick: () => void,
-};
-declare var PaginationControls: (props: Props) => React$Node;
-declare export default typeof PaginationControls;

package/dist/actions/PaginationControls/index.js.flow

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

package/dist/actions/Toggle/Toggle.js.flow

@@ -1,21 +0,0 @@
-/**
- * Flowtype definitions for Toggle
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
- * @flow
- */
-
-import * as React from 'react';
-declare type Props = {
-    /**
-     * It turns the toggle ON if `true` and OFF if `false`
-     */
-    checked: boolean,
-    onChange: (e: boolean) => void,
-    label?: React$Node,
-    caption?: React$Node,
-    disabled?: boolean,
-    id?: string,
-};
-declare var Toggle: (props: Props) => React$Node;
-declare export default typeof Toggle;

package/dist/actions/Toggle/index.js.flow

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

package/dist/actions/index.js.flow

@@ -1,11 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
- * @flow
- */
-
-import Toggle from './Toggle';
-import Button from './Button';
-import PaginationControls from './PaginationControls';
-declare export { Toggle, Button, PaginationControls };

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

@@ -1,59 +0,0 @@
-/**
- * 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/DataTableContext.js.flow

@@ -1,15 +0,0 @@
-/**
- * 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/index.js.flow

@@ -1,8 +0,0 @@
-/**
- * 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.js.flow

@@ -1,32 +0,0 @@
-/**
- * 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,
-    isRightAligned?: boolean
-};
-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

@@ -1,16 +0,0 @@
-/**
- * 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

@@ -1,8 +0,0 @@
-/**
- * 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.js.flow

@@ -1,26 +0,0 @@
-/**
- * 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.js.flow

@@ -1,8 +0,0 @@
-/**
- * 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.js.flow

@@ -1,17 +0,0 @@
-/**
- * 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.js.flow

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

package/dist/core/Flex/Flex.js.flow

@@ -1,29 +0,0 @@
-/**
- * Flowtype definitions for Flex
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
- * @flow
- */
-
-import * as React from 'react';
-import type { AlignItems, FlexWrap, JustifyContent, Space } from './types';
-declare type Props = {
-    children: React$Node,
-    space?: Space,
-
-    /**
-     * It sets how each item will grow or shrink to fit the space available in its flex container. The default value is `0 1 auto` but it can be overriden. Check it out this [official doc](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) to see all the possible values.
-     */
-    flex?: (string | number)[],
-    alignItems?: AlignItems,
-    justifyContent?: JustifyContent,
-    inlineFlex?: boolean,
-    direction?: 'row' | 'column',
-    flexItems?: boolean,
-    flexWrap?: FlexWrap,
-};
-/**
- * Flex is a internal component used by Stack and Inline. DON'T use this component outside of Sous Chef
- */
-declare var Flex: (props: Props) => React$Node;
-declare export default typeof Flex;

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

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

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

@@ -1,27 +0,0 @@
-/**
- * Flowtype definitions for types
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
- * @flow
- */
-
-export type AlignItems = "flex-start" | "flex-end" | "center" | "stretch";
-export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
-export type JustifyContent = "start" | "end" | "center" | "space-between";
-export type Space =
-  | 0
-  | 4
-  | 8
-  | 12
-  | 16
-  | 20
-  | 24
-  | 28
-  | 32
-  | 36
-  | 40
-  | 44
-  | 48
-  | 52
-  | 56
-  | 60;

package/dist/core/Inline/Inline.js.flow

@@ -1,41 +0,0 @@
-/**
- * Flowtype definitions for Inline
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
- * @flow
- */
-
-import * as React from 'react';
-import type {
-    AlignItems,
-    FlexWrap,
-    JustifyContent,
-    Space,
-} from '../Flex/types';
-declare type Props = {
-    children: React$Node,
-
-    /**
-     * From `0` to `60` with multiples of `4`, eg. `8`, `12`, `16` and so on.
-     */
-    space?: Space,
-
-    /**
-     * It sets how each item will grow or shrink to fit the space available in its flex container. The default value is `0 1 auto` but it can be overriden. Check it out this [official doc](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) to see all the possible values.
-     */
-    flex?: (string | number)[],
-
-    /**
-     * One of: `flex-start`, `flex-end`, `center`, `stretch`
-     */
-    alignItems?: AlignItems,
-
-    /**
-     * One of: `start`, `end`, `center`, `space-between`
-     */
-    justifyContent?: JustifyContent,
-    inlineFlex?: boolean,
-    flexWrap?: FlexWrap,
-};
-declare var Inline: (props: Props) => React$Node;
-declare export default typeof Inline;

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

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

package/dist/core/ResourceTable/ResourceTable.js.flow

@@ -1,55 +0,0 @@
-/**
- * Flowtype definitions for ResourceTable
- * 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,
-};
-declare var ResourceTable: <T>(props: Props<T>) => React$Node;
-declare export default typeof ResourceTable;

package/dist/core/ResourceTable/ResourceTableContext.js.flow

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

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

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

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

@@ -1,32 +0,0 @@
-/**
- * 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,
-    isRightAligned?: boolean
-};
-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/ResourceTableRow/ResourceTableRow.js.flow

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

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

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

package/dist/core/Stack/Stack.js.flow

@@ -1,35 +0,0 @@
-/**
- * Flowtype definitions for Stack
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
- * @flow
- */
-
-import * as React from 'react';
-import type { JustifyContent, Space, AlignItems } from '../Flex/types';
-declare type Props = {
-    children: React$Node,
-
-    /**
-     * From `0` to `60` with multiples of `4`, eg. `8`, `12`, `16` and so on.
-     */
-    space?: Space,
-
-    /**
-     * It sets how each item will grow or shrink to fit the space available in its flex container. The default value is `0 1 auto` but it can be overriden. Check it out this [official doc](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) to see all the possible values.
-     */
-    flex?: (string | number)[],
-
-    /**
-     * One of: `flex-start`, `flex-end`, `center`, `stretch`
-     */
-    alignItems?: AlignItems,
-
-    /**
-     * One of: `start`, `end`, `center`, `space-between`
-     */
-    justifyContent?: JustifyContent,
-    flexItems?: boolean,
-};
-declare var Stack: (props: Props) => React$Node;
-declare export default typeof Stack;