@7shifts/sous-chef 3.34.0-beta.2 → 3.34.0-beta1

package/README.md

@@ -48,7 +48,6 @@ class Example extends Component {
 ## Documentation
 
 You can find the components documentation in [here](https://zeroheight.com/31613d024/p/94f423-introducing-sous-chef--components).
-just to trigger a CI
 
 ## Contributing
 

package/dist/actions/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ButtonTheme, ButtonSize, ButtonType, ButtonTarget } from './types';
 import type { PositionStyles, DataProps } from '../../foundation/types';
-declare const _default: React.ForwardRefExoticComponent<{
+declare const Button: React.ForwardRefExoticComponent<{
     children: React.ReactNode;
     type?: ButtonType | undefined;
     /** It controls the button theme */
@@ -16,7 +16,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     id?: string | undefined;
     loading?: boolean | undefined;
     /** This will show a black tooltip when the user hover the button */
-    title?: React.ReactNode;
+    title?: string | React.ReactNode;
     href?: string | undefined;
     target?: ButtonTarget | undefined;
     testId?: string | undefined;
@@ -27,4 +27,4 @@ declare const _default: React.ForwardRefExoticComponent<{
      */
     size?: ButtonSize | undefined;
 } & PositionStyles & DataProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
-export default _default;
+export default Button;

package/dist/core/ComponentIdentifier/ComponentIdentifier.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { COMPONENT_NAMES } from './constants';
+type Props = {
+    componentName: keyof typeof COMPONENT_NAMES;
+    children: React.ReactNode;
+};
+/**
+ * Used so sub-components con identify if it is placed inside some component using the `useIsInsideComponent` hook
+ */
+declare const ComponentIdentifier: ({ componentName, children }: Props) => React.JSX.Element;
+export default ComponentIdentifier;

package/dist/core/ComponentIdentifier/ComponentIdentifierContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type ModalContextType = {
+    componentName: string;
+};
+declare const ComponentIdentifierContext: React.Context<ModalContextType>;
+export default ComponentIdentifierContext;

package/dist/core/ComponentIdentifier/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const COMPONENT_NAMES: {
+    BUTTON: "BUTTON";
+};

package/dist/core/ComponentIdentifier/useIsInsideComponent.d.ts

@@ -0,0 +1,2 @@
+import { COMPONENT_NAMES } from './constants';
+export declare const useIsInsideComponent: (parentComponentName: keyof typeof COMPONENT_NAMES) => boolean;

package/dist/empty_states/EmptyState/EmptyState.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EmptyStateProps } from '../EmptyStateContainer/types';
-type Props = Omit<EmptyStateProps, 'header' | 'isPaywall'>;
-declare const EmptyState: ({ title, children, mediaUrl, actions, caption, size, testId }: Props) => React.JSX.Element;
+import { EmptyStateAsBanner, EmptyStateAsCard } from '../EmptyStateContainer/types';
+type Props = Omit<EmptyStateAsCard, 'isPaywall'> | Omit<EmptyStateAsBanner, 'isPaywall'>;
+declare const EmptyState: (props: Props) => React.JSX.Element;
 export default EmptyState;

package/dist/empty_states/EmptyStateContainer/EmptyStateContainerStack/EmptyStateContainerStack.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import { EmptyStateProps } from '../types';
-declare const EmptyStateContainerStack: ({ header, title, children, mediaUrl, actions, caption, isPaywall, testId }: EmptyStateProps) => React.JSX.Element;
+type Props = {
+    mediaComponent?: React.ReactNode;
+} & EmptyStateProps;
+declare const EmptyStateContainerStack: ({ header, title, children, mediaUrl, actions, caption, isPaywall, testId, mediaComponent }: Props) => React.JSX.Element;
 export default EmptyStateContainerStack;

package/dist/empty_states/EmptyStateContainer/types.d.ts

@@ -22,3 +22,10 @@ export type EmptyStateProps = {
     /** This is used for setting a data-testid on the component*/
     testId?: string;
 };
+export type EmptyStateAsCard = {
+    as?: 'card';
+    onClose?: () => void;
+} & EmptyStateProps;
+export type EmptyStateAsBanner = {
+    as?: 'banner';
+} & EmptyStateProps;

package/dist/empty_states/Paywall/Paywall.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-import { EmptyStateProps } from '../EmptyStateContainer/types';
-declare const Paywall: ({ header, title, children, mediaUrl, actions, size, caption, testId }: Omit<EmptyStateProps, 'isPaywall'>) => React.JSX.Element;
+import { EmptyStateAsBanner, EmptyStateAsCard } from '../EmptyStateContainer/types';
+type Props = Omit<EmptyStateAsCard, 'isPaywall'> | Omit<EmptyStateAsBanner, 'isPaywall'>;
+declare const Paywall: (props: Props) => React.JSX.Element;
 export default Paywall;

package/dist/forms/CheckboxField/CheckboxField.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { DataProps } from '../../foundation/types';
 type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
@@ -12,7 +13,7 @@ type Props = {
     disabled?: boolean;
     /** This is used for setting the data-testid */
     testId?: string;
-};
+} & DataProps;
 /** CheckboxField form element. */
 declare const CheckboxField: React.FC<Props>;
 export default CheckboxField;

package/dist/forms/CurrencyField/CurrencyField.d.ts

@@ -5,7 +5,27 @@ import type { Props as TextFieldProps } from '../TextField/TextField';
  *
  * At the end, it is just a string formatted nicely. **You are in charge of validating the value and parsing it back to a value that you can use on your application**.
  */
-declare const CurrencyField: React.ForwardRefExoticComponent<TextFieldProps & {
+declare const CurrencyField: React.ForwardRefExoticComponent<{
+    autoComplete?: ("on" | "off") | undefined;
+    autoFocus?: boolean | undefined;
+    caption?: React.ReactNode;
+    defaultValue?: string | undefined;
+    disabled?: boolean | undefined;
+    error?: React.ReactNode;
+    id?: string | undefined;
+    label?: React.ReactNode;
+    maxLength?: number | undefined;
+    name: string;
+    onBlur?: ((value: string) => void) | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onFocus?: ((value: string) => void) | undefined;
+    onKeyDown?: ((key: string) => void) | undefined;
+    placeholder?: string | undefined;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    value?: string | undefined;
+    testId?: string | undefined;
+} & import("../../foundation/types").DataProps & {
     currencySymbol: string;
     step?: number | undefined;
 } & Omit<TextFieldProps, "prefix" | "suffix"> & React.RefAttributes<HTMLInputElement>>;

package/dist/forms/CurrencyField/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
+export declare const CURRENCY_DISPLAY_MARGIN_BUFFER = 1;

package/dist/forms/DateRangeField/ToDate/ToDate.d.ts

@@ -15,5 +15,5 @@ type Props = {
     onBlur: () => void;
     testId?: string;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
-export default _default;
+declare const ToDate: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export default ToDate;

package/dist/forms/Field/Field.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DataProps } from '../../foundation/types';
 type Props = {
     id: string;
     label?: React.ReactNode;
@@ -6,6 +7,6 @@ type Props = {
     error?: React.ReactNode;
     children: React.ReactNode;
     testId?: string;
-};
+} & DataProps;
 declare const Field: React.FC<Props>;
 export default Field;

package/dist/forms/TextField/TextField.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { DataProps } from '../../foundation/types';
 type AutoCompleteType = 'off' | 'on';
 export type Props = {
     autoComplete?: AutoCompleteType;
@@ -23,6 +24,29 @@ export type Props = {
     suffix?: React.ReactNode;
     value?: string;
     testId?: string;
-};
-declare const TextField: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+} & DataProps;
+declare const TextField: React.ForwardRefExoticComponent<{
+    autoComplete?: AutoCompleteType | undefined;
+    autoFocus?: boolean | undefined;
+    caption?: React.ReactNode;
+    defaultValue?: string | undefined;
+    disabled?: boolean | undefined;
+    error?: React.ReactNode;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string | undefined;
+    label?: React.ReactNode;
+    maxLength?: number | undefined;
+    name: string;
+    onBlur?: ((value: string) => void) | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onFocus?: ((value: string) => void) | undefined;
+    onKeyDown?: ((key: string) => void) | undefined;
+    placeholder?: string | undefined;
+    /** 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;
+    value?: string | undefined;
+    testId?: string | undefined;
+} & DataProps & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/forms/TextField/useTextField.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { RefType } from '../../utils/types';
 import type { Props } from './TextField';
+import type { DataProps } from '../../foundation/types';
 type UseTextFieldProps = Props & {
     ref: RefType<HTMLInputElement>;
-};
-export declare const useTextField: ({ autoComplete, autoFocus, defaultValue, disabled, error, id, maxLength, name, caption, label, onBlur, onChange, onFocus, onKeyDown, placeholder, value, ref, testId }: UseTextFieldProps) => {
+} & DataProps;
+export declare const useTextField: ({ autoComplete, autoFocus, defaultValue, disabled, error, id, maxLength, name, caption, label, onBlur, onChange, onFocus, onKeyDown, placeholder, value, ref, testId, ...dataProps }: UseTextFieldProps) => {
     inputProps: {
         'aria-describedby': string;
         'aria-invalid': boolean;
@@ -28,6 +29,8 @@ export declare const useTextField: ({ autoComplete, autoFocus, defaultValue, dis
         value: string | undefined;
     };
     fieldProps: {
+        prefix?: import("react").ReactNode;
+        suffix?: import("react").ReactNode;
         caption: import("react").ReactNode;
         error: import("react").ReactNode;
         label: import("react").ReactNode;

package/dist/forms/TimeField/TimeField.d.ts

@@ -9,7 +9,27 @@ type Props = TextFieldProps & {
     endField?: boolean;
     duration?: string;
 };
-export declare const TimeRangeSelector: React.ForwardRefExoticComponent<TextFieldProps & {
+export declare const TimeRangeSelector: React.ForwardRefExoticComponent<{
+    autoComplete?: ("on" | "off") | undefined;
+    autoFocus?: boolean | undefined;
+    caption?: React.ReactNode;
+    defaultValue?: string | undefined;
+    disabled?: boolean | undefined;
+    error?: React.ReactNode;
+    id?: string | undefined;
+    label?: React.ReactNode;
+    maxLength?: number | undefined;
+    name: string;
+    onBlur?: ((value: string) => void) | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onFocus?: ((value: string) => void) | undefined;
+    onKeyDown?: ((key: string) => void) | undefined;
+    placeholder?: string | undefined;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    value?: string | undefined;
+    testId?: string | undefined;
+} & import("../../foundation/types").DataProps & {
     onClick?: (() => void) | undefined;
     interval?: TimeInterval | undefined;
     startTime?: string | undefined;

package/dist/i18n/locales/en.json

@@ -33,5 +33,12 @@
         "october": "October",
         "november": "November",
         "december": "December"
+    },
+    "Card": {
+        "dismiss": "Dismiss"
+    },
+    "DataTable": {
+        "emptyStateTitle": "No results found",
+        "emptyStateCaption": "Try adding a new item to the list or adjust your search terms."
     }
 }

package/dist/i18n/locales/es.json

@@ -33,5 +33,12 @@
         "october": "Octubre",
         "november": "Noviembre",
         "december": "Diciembre"
+    },
+    "Card": {
+        "dismiss": "Descartar"
+    },
+    "DataTable": {
+        "emptyStateTitle": "No se encontraron resultados",
+        "emptyStateCaption": "Intenta agregar un nuevo elemento a la lista o ajusta tus términos de búsqueda."
     }
 }

package/dist/i18n/locales/fr.json

@@ -33,5 +33,12 @@
         "october": "Octobre",
         "november": "Novembre",
         "december": "Décembre"
+    },
+    "Card": {
+        "dismiss": "Rejeter"
+    },
+    "DataTable": {
+        "emptyStateTitle": "Aucun résultat trouvé",
+        "emptyStateCaption": "Essayez d'ajouter un nouvel élément à la liste ou ajustez vos termes de recherche."
     }
 }

package/dist/i18n/types.d.ts

@@ -1 +1,3 @@
+import type en from './locales/en.json';
 export type TranslateFunction = (key: string) => string;
+export type Context = keyof typeof en;

package/dist/i18n/useTranslation.d.ts

@@ -1,2 +1,2 @@
-import { TranslateFunction } from './types';
-export declare const useTranslation: (context?: string) => TranslateFunction;
+import type { TranslateFunction, Context } from './types';
+export declare const useTranslation: (context?: Context) => TranslateFunction;

package/dist/icons/components/IconHatChef.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IconSize } from '../types';
+type Props = {
+    size?: IconSize;
+    color?: string;
+    testId?: string;
+} & React.SVGProps<SVGSVGElement>;
+declare const IconHatChef: React.ForwardRefExoticComponent<Omit<Props, 'ref'>>;
+export default IconHatChef;

package/dist/icons/components/IconPlateUtensils.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IconSize } from '../types';
+type Props = {
+    size?: IconSize;
+    color?: string;
+    testId?: string;
+} & React.SVGProps<SVGSVGElement>;
+declare const IconPlateUtensils: React.ForwardRefExoticComponent<Omit<Props, 'ref'>>;
+export default IconPlateUtensils;

package/dist/icons/components/index.d.ts

@@ -78,6 +78,7 @@ export { default as IconGreat } from './IconGreat';
 export { default as IconGrinBeam } from './IconGrinBeam';
 export { default as IconGripVertical } from './IconGripVertical';
 export { default as IconHandshake } from './IconHandshake';
+export { default as IconHatChef } from './IconHatChef';
 export { default as IconImage } from './IconImage';
 export { default as IconIslandTropical } from './IconIslandTropical';
 export { default as IconItalic } from './IconItalic';
@@ -102,6 +103,7 @@ export { default as IconPaperclip } from './IconPaperclip';
 export { default as IconPencil } from './IconPencil';
 export { default as IconPercentage } from './IconPercentage';
 export { default as IconPhone } from './IconPhone';
+export { default as IconPlateUtensils } from './IconPlateUtensils';
 export { default as IconPlug } from './IconPlug';
 export { default as IconPlus } from './IconPlus';
 export { default as IconPrint } from './IconPrint';

package/dist/icons/iconUtils.d.ts

@@ -2,7 +2,7 @@ import { IconSize } from './types';
 type Params = {
     size?: IconSize;
     color?: string;
-    styles?: Object;
+    style?: Object;
 };
-export declare const getIconStyles: ({ size, color, styles }: Params) => Object;
+export declare const getIconStyles: ({ size, color, style }: Params) => Object;
 export {};

package/dist/index.css

@@ -1410,7 +1410,7 @@ h5._32amZ {
   box-sizing: border-box;
   background: white;
   border: 1px solid var(--color-grey-200);
-  border-radius: 8px;
+  border-radius: 20px;
   width: 100%;
   height: 100%;
   padding: 24px 20px;
@@ -1447,12 +1447,22 @@ h5._32amZ {
 ._L9ZA7 {
   position: absolute;
   z-index: var(--z-index-base);
-  right: 8px;
-  top: 8px;
+  right: 6px;
+  top: 6px;
 }
 ._5YidV {
   pointer-events: none;
 }
+._37yla {
+  position: absolute;
+  width: 38px;
+  height: 38px;
+  top: 6px;
+  right: 6px;
+}
+._3J4FP {
+  pointer-events: none;
+}
 ._cQT44 {
   position: absolute;
   width: 38px;
@@ -1529,7 +1539,7 @@ h5._32amZ {
 }
 ._ORvUI {
   stroke: var(--color-grey-100);
-  fill: var(--color-white);
+  fill: transparent;
 }
 ._2KJMe {
   stroke: var(--color-mint-400);
@@ -1649,7 +1659,7 @@ h5._32amZ {
   word-break: break-word;
   -webkit-hyphens: auto;
           hyphens: auto;
-  background: none;
+  background: var(--color-white);
 }
 ._3Jay_:first-of-type {
   border-left: 1px solid var(--color-grey-200);
@@ -2146,6 +2156,8 @@ input:disabled + ._2W10t::after {
   border-color: var(--color-eggplant-400);
   box-shadow: 0 0 8px var(--color-eggplant-300);
   outline: none;
+  overflow: visible;
+  z-index: var(--z-index-base);
 }
 ._1-1WW input:hover {
   background: var(--color-grey-100);
@@ -2418,6 +2430,46 @@ input:disabled + ._2W10t::after {
   right: -1px;
   bottom: -1px;
 }
+._3mHDL {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+._11ygA {
+  display: flex;
+  justify-content: space-between;
+  width: 424px;
+  gap: 20px;
+  flex-direction: column;
+  align-items: center;
+}
+._6o4Ut {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 20px;
+}
+._1bs2I {
+  max-width: 500px;
+}
+._WwD-g {
+  max-width: 667px;
+}
+._1b3C0 {
+  color: var(--color-grey-500);
+  font-size: 12px;
+  text-align: center;
+}
+._3q5OJ {
+  display: flex;
+  gap: 8px;
+}
+
+@media screen and (max-width: 900px) {
+  ._3q5OJ:not(._3DOZC) {
+    justify-content: center;
+  }
+}
 ._1JTKu {
   flex: 1;
   display: "flex";
@@ -2623,6 +2675,7 @@ input:disabled + ._2W10t::after {
   display: flex;
   flex-direction: column;
   min-width: 90px;
+  background-color: var(--color-white);
 }
 ._eyfGn textarea {
   line-height: 22px;
@@ -2781,6 +2834,7 @@ input:focus-visible + ._W4HpY {
   text-align: center;
   height: 100%;
   color: var(--color-grey-400);
+  background: var(--color-white);
 }
 ._1md_9 input {
   border: 0px;
@@ -3067,6 +3121,8 @@ input:disabled + ._1aaPx::after {
   padding-top: 0px;
   display: flex;
   align-items: center;
+  background-color: var(--color-grey-100);
+  background-color: var(--color-white);
 }
 ._3YxJl {
   border-color: var(--color-radish-400) !important;
@@ -3254,7 +3310,6 @@ input:disabled + ._1aaPx::after {
   position: absolute;
   height: 36px;
   margin-top: 1px;
-  margin-left: 25px;
   align-items: center;
   display: flex;
   pointer-events: none;
@@ -3266,12 +3321,16 @@ input:disabled + ._1aaPx::after {
   flex-grow: 1;
   display: flex;
 }
-._1zowl {
+._Fc99X {
+  font-size: 12pt;
+}
+
+input._1zowl {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._Fc99X {
-  font-size: 12pt;
+._2T1pu {
+  background-color: var(--color-white);
 }
 ._2T1pu:not(._1OxwW) > button:focus ._3mUO5 {
   border: 1px solid var(--color-eggplant-400);
@@ -4476,43 +4535,7 @@ input:disabled + ._1aaPx::after {
   background-color: var(--color-blueberry-200);
   color: var(--color-blueberry-600);
 }
-._11ygA {
-  display: flex;
-  justify-content: space-between;
-  width: 424px;
-  gap: 20px;
-  flex-direction: column;
-  align-items: center;
-}
-._6o4Ut {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 20px;
-}
-._1bs2I {
-  max-width: 500px;
-}
-._WwD-g {
-  max-width: 667px;
-}
-._1b3C0 {
-  color: var(--color-grey-500);
-  font-size: 12px;
-  text-align: center;
-}
-._3q5OJ {
-  display: flex;
-  gap: 8px;
-}
-
-@media screen and (max-width: 900px) {
-  ._3q5OJ:not(._3DOZC) {
-    justify-content: center;
-  }
-}
 ._1AdW7 {
-  max-width: 1000px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -4550,4 +4573,18 @@ input:disabled + ._1aaPx::after {
     text-align: center;
     flex-direction: column-reverse;
   }
+}
+._3kFM9 {
+  padding: 12px 16px;
+}
+._3kmTB {
+  display: flex;
+  justify-content: center;
+}
+._DrBEi {
+  padding: 12px 16px;
+}
+._3YbH7 {
+  display: flex;
+  justify-content: center;
 }