@7shifts/sous-chef 1.5.2 → 1.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "1.5.2",
+    "version": "1.5.6",
     "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/CHANGELOG.md

@@ -1,190 +0,0 @@
-## 1.5.2 (November 10th, 2021)
-
-### Enhancements
-
--   PasswordField: Updated met criteria bullet to IconCheck to be consistent with mobile ([#69](https://github.com/7shifts/sous-chef/pull/69))
-
-### New Components
-
-- IconCheck: added for now to use in PasswordCriteria. ([#69](https://github.com/7shifts/sous-chef/pull/69))
-
-## 1.5.1 (October 20th, 2021)
-
-### Bug fixes
-
--   DataTable: Exported `DataTableCustomComponent` type ([#67](https://github.com/7shifts/sous-chef/pull/67))
-
-## 1.5.0 (October 19th, 2021)
-
-### New components
-
--   PillSelectField ([#65](https://github.com/7shifts/sous-chef/pull/65))
-
-### Bug fixes
-
--   Field: Updated to align properly when using FormRow with only one form field with with label ([#66](https://github.com/7shifts/sous-chef/pull/66))
-
-## 1.4.1 (October 8th, 2021)
-
-### Enhancements
-
--   DataTable: Updated flow types ([#62](https://github.com/7shifts/sous-chef/pull/62))
--   Tooltip: Added the prop `onClose` to listen when the overlay closed ([#64](https://github.com/7shifts/sous-chef/pull/64))
-
-## 1.4.0 (October 7th, 2021)
-
-### Enhancements
-
--   Updated SelectField to support disabled options
-
-## 1.3.1 (September 29th, 2021)
-
-### Bug fixes
-
--   Avatar: updated to show the proper background when the image url is not available ([#57](https://github.com/7shifts/sous-chef/pull/57))
--   PaginationControls: updated to have the title with the first character capitalized ([#58](https://github.com/7shifts/sous-chef/pull/58))
--   DataTable: Added missing exports ([#59](https://github.com/7shifts/sous-chef/pull/59))
-
-## 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
-
--   Modal ([#49](https://github.com/7shifts/sous-chef/pull/49))
-
-### Bug fixes
-
--   Avatar: The fallback image was not being applied properly ([#46](https://github.com/7shifts/sous-chef/pull/46))
-
-## 1.1.4 (August 17, 2021)
-
-### Bug fixes
-
--   Button: Fixed the padding when having only an icon inside the Button ([#45](https://github.com/7shifts/sous-chef/pull/45))
-
-## 1.1.3 (August 5, 2021)
-
-### Bug fixes
-
--   MultiSelectField: It was not wrapping to the next line when multiple options were select and they didn't fit on the space given ([#44](https://github.com/7shifts/sous-chef/pull/44))
-
-## 1.1.2 (August 4, 2021)
-
-### Bug fixes
-
--   SelectField: When using the `prefix` prop it had a missaligned prefix ([#43](https://github.com/7shifts/sous-chef/pull/43))
--   SelectField: Implemented the `onBlur` prop ([#42](https://github.com/7shifts/sous-chef/pull/42))
--   MultiSelectField: Implemented the `onBlur` prop ([#42](https://github.com/7shifts/sous-chef/pull/42))
-
-## 1.1.1 (July 28, 2021)
-
-### Enhancements
-
--   Badge: Added the `title` prop to make it easier adding a black tooltip ([#40](https://github.com/7shifts/sous-chef/pull/40))
-
-### New components
-
--   IconExclaim ([#41](https://github.com/7shifts/sous-chef/pull/41))
-
-## 1.1.0 (July 23, 2021)
-
-### New components
-
--   Badge ([#37](https://github.com/7shifts/sous-chef/pull/37))
--   Avatar ([#38](https://github.com/7shifts/sous-chef/pull/38))
--   IconComment ([#39](https://github.com/7shifts/sous-chef/pull/39))
--   IconLocation ([#39](https://github.com/7shifts/sous-chef/pull/39))
--   IconMinusCircle ([#39](https://github.com/7shifts/sous-chef/pull/39))
--   IconUserPlus ([#39](https://github.com/7shifts/sous-chef/pull/39))
-
-### Bug fixes
-
--   SelectField: When there is no container with size defined the component will grow with the content until it fills the space ([#36](https://github.com/7shifts/sous-chef/pull/36))
-
-### Enhancements
-
--   SelectField: Added the `prefix` prop and the `asToolbarField` so the component will look as a toolbar filter with no border ([#36](https://github.com/7shifts/sous-chef/pull/36))
-
-## 1.0.3 (July 15, 2021)
-
-### Bug fixes
-
--   Button: Fixed global CSS overrites when button behaves like link ([#35](https://github.com/7shifts/sous-chef/pull/35))
-
-## 1.0.2 (July 15, 2021)
-
-### Bug fixes
-
--   TextAreaField: Fixed global CSS overrites ([#34](https://github.com/7shifts/sous-chef/pull/34))
-
-## 1.0.1 (July 14, 2021)
-
-### Enhancements
-
--   TextField: Added the possibility of using `useRef` ([#33](https://github.com/7shifts/sous-chef/pull/33))
-
-## 1.0.0 (June 25, 2021)
-
-### New components
-
--   Tooltip ([#16](https://github.com/7shifts/sous-chef/pull/16))
--   MultiSelectField ([#19](https://github.com/7shifts/sous-chef/pull/19))
--   TextAreaField ([#21](https://github.com/7shifts/sous-chef/pull/21))
--   RadioGroupField ([#22](https://github.com/7shifts/sous-chef/pull/22))
--   WeekField ([#24](https://github.com/7shifts/sous-chef/pull/24))
--   DateRangeField ([#25](https://github.com/7shifts/sous-chef/pull/25))
--   IconRemove ([#26](https://github.com/7shifts/sous-chef/pull/26))
-
-### Enhancements
-
--   Button: Added the possibility of making Butons act as links ([#23](https://github.com/7shifts/sous-chef/pull/23))
--   SelectField and MultiSelectField: Added the possibility of customizing the select options ([#27](https://github.com/7shifts/sous-chef/pull/27))
-
-### Bug fixes
-
--   Form: consolidated the Flow types for `useFormik` and `<Formik ...>` ([#28](https://github.com/7shifts/sous-chef/pull/28))
--   Icons: added missing Flow types ([#26](https://github.com/7shifts/sous-chef/pull/26))
-
-### Pre existing components
-
--   Button
--   PaginationControls
--   Toggle
--   Inline
--   Stack
--   ResourceTable
--   Spinner
--   CheckboxField
--   DateField
--   DateRangeField
--   Form
--   FormRow
--   MultiSelectField
--   PasswordField
--   RadioGroupField
--   SelectField
--   TextAreaField
--   TextField
--   WeekField
--   Tooltip

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;