@faststore/ui 2.0.54-alpha.0 → 2.0.57-alpha.0

package/dist/index.d.ts

@@ -3,8 +3,6 @@ export { default as Popover } from './components/atoms/Popover';
 export type { PopoverProps } from './components/atoms/Popover';
 export { default as TextArea } from './components/atoms/TextArea';
 export type { TextAreaProps } from './components/atoms/TextArea';
-export { default as Skeleton } from './components/atoms/Skeleton';
-export type { SkeletonProps } from './components/atoms/Skeleton';
 export { default as Incentive } from './components/atoms/Incentive';
 export type { IncentiveProps } from './components/atoms/Incentive';
 export { default as SkuSelector } from './components/molecules/SkuSelector';
@@ -25,8 +23,6 @@ export { default as SearchInput } from './components/molecules/SearchInput';
 export type { SearchInputProps, SearchInputRef, } from './components/molecules/SearchInput';
 export { default as Carousel } from './components/molecules/Carousel';
 export type { CarouselProps } from './components/molecules/Carousel';
-export { default as Modal } from './components/molecules/Modal';
-export type { ModalProps } from './components/molecules/Modal';
 export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
 export type { BannerProps, BannerContentProps, BannerImageProps, BannerLinkProps, } from './components/molecules/Banner';
 export { default as PaymentMethods } from './components/molecules/PaymentMethods';

package/dist/index.js

@@ -2,7 +2,6 @@ export * from '@faststore/components';
 // Atoms
 export { default as Popover } from './components/atoms/Popover';
 export { default as TextArea } from './components/atoms/TextArea';
-export { default as Skeleton } from './components/atoms/Skeleton';
 export { default as Incentive } from './components/atoms/Incentive';
 // Molecules
 export { default as SkuSelector } from './components/molecules/SkuSelector';
@@ -14,7 +13,6 @@ export { default as CartItem, CartItemActions, CartItemContent, CartItemImage, C
 export { default as Bullets } from './components/molecules/Bullets';
 export { default as SearchInput } from './components/molecules/SearchInput';
 export { default as Carousel } from './components/molecules/Carousel';
-export { default as Modal } from './components/molecules/Modal';
 export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
 export { default as PaymentMethods } from './components/molecules/PaymentMethods';
 export { default as Breadcrumb } from './components/molecules/Breadcrumb';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,iCAAiC,CAAA;AAWxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG/D,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAGjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,iCAAiC,CAAA;AAWxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAGjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.54-alpha.0",
+  "version": "2.0.57-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -59,5 +59,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "7173ea0bec153905a6b800d002401b5c27fd3213"
+  "gitHead": "a9310e34894883ae71d8bdb32402c3a17b419078"
 }

package/src/components/atoms/Badge/styles.scss

@@ -135,10 +135,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-success-bkg-color);
       border-color: var(--fs-badge-success-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-success-bkg-color);
-      }
     }
   }
 
@@ -148,10 +144,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-neutral-bkg-color);
       border-color: var(--fs-badge-neutral-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-neutral-bkg-color);
-      }
     }
   }
 
@@ -161,10 +153,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-highlighted-bkg-color);
       border-color: var(--fs-badge-highlighted-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-highlighted-bkg-color);
-      }
     }
   }
 
@@ -174,10 +162,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-info-bkg-color);
       border-color: var(--fs-badge-info-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-info-bkg-color);
-      }
     }
   }
 
@@ -187,10 +171,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-warning-bkg-color);
       border-color: var(--fs-badge-warning-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-warning-bkg-color);
-      }
     }
   }
 
@@ -200,10 +180,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-danger-bkg-color);
       border-color: var(--fs-badge-danger-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-danger-bkg-color);
-      }
     }
   }
 }

package/src/components/atoms/Skeleton/styles.scss

@@ -0,0 +1,67 @@
+[data-fs-skeleton] {
+  // --------------------------------------------------------
+  // Design Tokens for Skeleton
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-skeleton-bkg-color                            : var(--fs-color-disabled-bkg);
+  --fs-skeleton-border-radius                        : var(--fs-border-radius);
+
+  // Shimmer
+  --fs-skeleton-shimmer-width                        : 50%;
+  --fs-skeleton-shimmer-height                       : 100%;
+  --fs-skeleton-shimmer-bkg-color                    : rgb(255 255 255 / 20%);
+  --fs-skeleton-shimmer-box-shadow                   : 0 0 var(--fs-spacing-5) var(--fs-spacing-5) var(--fs-skeleton-shimmer-bkg-color);
+
+  --fs-skeleton-shimmer-transition-timing            : 850ms;
+  --fs-skeleton-shimmer-transition-function          : linear;
+  --fs-skeleton-shimmer-transition-iteration         : infinite;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  overflow: hidden;
+  position: relative;
+  background: var(--fs-skeleton-bkg-color);
+  border-radius: var(--fs-skeleton-border-radius);
+
+  [data-fs-skeleton-shimmer] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100%;
+    animation: loading var(--fs-skeleton-shimmer-transition-timing) var(--fs-skeleton-shimmer-transition-iteration) var(--fs-skeleton-shimmer-transition-function);
+    &::after {
+      position: absolute;
+      content: '';
+      width: var(--fs-skeleton-shimmer-width);
+      height: var(--fs-skeleton-shimmer-height);
+      background: var(--fs-skeleton-shimmer-bkg-color);
+      box-shadow: var(--fs-skeleton-shimmer-box-shadow);
+    }
+  }
+
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-skeleton-border="regular"] {
+    border-radius: var(--fs-skeleton-border-radius);
+  }
+
+  &[data-fs-skeleton-border="pill"] {
+    border-radius: var(--fs-border-radius-pill);
+  }
+
+  &[data-fs-skeleton-border="circle"] {
+    border-radius: var(--fs-border-radius-circle);
+  }
+}
+
+@keyframes loading {
+  0% { transform: translate3d(-50vw, 0, 0); }
+  100% { transform: translate3d(0, 0, 0); }
+}

package/src/components/molecules/DiscountBadge/styles.scss

@@ -28,10 +28,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-discount-badge-low-bkg-color);
       border-color: var(--fs-discount-badge-low-border-color);
-
-      &::after {
-        background-color: var(--fs-discount-badge-low-bkg-color);
-      }
     }
   }
 
@@ -41,7 +37,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-discount-badge-medium-bkg-color);
       border-color: var(--fs-discount-badge-medium-border-color);
-      &::after { background-color: var(--fs-discount-badge-medium-bkg-color); }
     }
   }
 
@@ -51,7 +46,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-discount-badge-high-bkg-color);
       border-color: var(--fs-discount-badge-high-border-color);
-      &::after { background-color: var(--fs-discount-badge-high-bkg-color); }
     }
   }
 }

package/src/components/molecules/Modal/styles.scss

@@ -0,0 +1,97 @@
+[data-fs-modal] {
+  // --------------------------------------------------------
+  // Design Tokens for Modal
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-modal-position-top                          : 30vh;
+  --fs-modal-position-right                        : var(--fs-spacing-4);
+  --fs-modal-position-left                         : var(--fs-spacing-4);
+  --fs-modal-max-width                             : calc(var(--fs-grid-breakpoint-desktop) / 3);
+  --fs-modal-min-height                            : var(--fs-spacing-5);
+  --fs-modal-margin                                : auto;
+  --fs-modal-background-color                      : var(--fs-color-body-bkg);
+  --fs-modal-border-radius                         : var(--fs-border-radius);
+
+  --fs-modal-width-tablet                          : calc(100vw / 3);
+  --fs-modal-min-width-tablet                      : calc(var(--fs-grid-breakpoint-desktop) / 3);
+
+  --fs-modal-transition-timing                     : var(--fs-transition-timing);
+  --fs-modal-transition-property                   : transform;
+  --fs-modal-transition-in-function                : ease-in;
+  --fs-modal-transition-out-function               : ease-in;
+
+  // Header
+  --fs-modal-header-padding                        : var(--fs-spacing-4) var(--fs-spacing-7) var(--fs-spacing-4) var(--fs-spacing-4);
+
+  // Header Title
+  --fs-modal-header-title-margin-bottom            : .625rem;
+  --fs-modal-header-title-size                     : var(--fs-text-size-lead);
+  --fs-modal-header-title-weight                   : var(--fs-text-weight-bold);
+  --fs-modal-header-title-line-height              : 1.2;
+
+  // Header Description
+  --fs-modal-header-description-size               : var(--fs-text-size-body);
+  --fs-modal-header-description-line-height        : 1.5;
+  --fs-modal-header-description-color              : var(--fs-color-text-light);
+
+  // Header Close Button
+  --fs-modal-header-close-button-position-top      : 0;
+  --fs-modal-header-close-button-position-right    : 0;
+
+  // Body
+  --fs-modal-body-padding                          : var(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-5);
+
+  position: fixed;
+  top: var(--fs-modal-position-top);
+  right: var(--fs-modal-position-right);
+  left: var(--fs-modal-position-left);
+  max-width: var(--fs-modal-max-width);
+  min-height: var(--fs-modal-min-height);
+  margin: var(--fs-modal-margin);
+  background-color: var(--fs-modal-background-color);
+  border-radius: var(--fs-modal-border-radius);
+
+  @include media(">=tablet") {
+    width: var(--fs-modal-width-tablet);
+    min-width: var(--fs-modal-min-width-tablet);
+  }
+
+  &[data-fs-modal-state="in"] {
+    transition: var(--fs-modal-transition-property) var(--fs-modal-transition-timing) var(--fs-modal-transition-in-function);
+    transform: translate3d(0, 0, 0);
+  }
+
+  &[data-fs-modal-state="out"] {
+    transition: var(--fs-modal-transition-property) var(--fs-modal-transition-timing) var(--fs-modal-transition-in-function);
+    transform: translate3d(0, 50%, 0);
+  }
+
+  [data-fs-modal-header] {
+    position: relative;
+    padding: var(--fs-modal-header-padding);
+
+    [data-fs-modal-header-title] {
+      margin-bottom: var(--fs-modal-header-title-margin-bottom);
+      font-size: var(--fs-modal-header-title-size);
+      font-weight: var(--fs-modal-header-title-weight);
+      line-height: var(--fs-modal-header-title-line-height);
+    }
+
+    [data-fs-modal-header-description] {
+      font-size: var(--fs-modal-header-description-size);
+      line-height: var(--fs-modal-header-description-line-height);
+      color: var(--fs-modal-header-description-color);
+    }
+
+    [data-fs-modal-header-close-button] {
+      position: absolute;
+      top: var(--fs-modal-header-close-button-position-top);
+      right: var(--fs-modal-header-close-button-position-right);
+    }
+  }
+
+  [data-fs-modal-body] {
+    padding: var(--fs-modal-body-padding);
+  }
+}

package/src/index.ts

@@ -7,9 +7,6 @@ export type { PopoverProps } from './components/atoms/Popover'
 export { default as TextArea } from './components/atoms/TextArea'
 export type { TextAreaProps } from './components/atoms/TextArea'
 
-export { default as Skeleton } from './components/atoms/Skeleton'
-export type { SkeletonProps } from './components/atoms/Skeleton'
-
 export { default as Incentive } from './components/atoms/Incentive'
 export type { IncentiveProps } from './components/atoms/Incentive'
 
@@ -80,9 +77,6 @@ export type {
 export { default as Carousel } from './components/molecules/Carousel'
 export type { CarouselProps } from './components/molecules/Carousel'
 
-export { default as Modal } from './components/molecules/Modal'
-export type { ModalProps } from './components/molecules/Modal'
-
 export {
   default as Banner,
   BannerContent,

package/src/styles/components.scss

@@ -11,6 +11,7 @@
 @import "../components/atoms/Price/styles";
 @import "../components/atoms/Radio/styles";
 @import "../components/atoms/Select/styles";
+@import "../components/atoms/Skeleton/styles";
 @import "../components/atoms/Slider/styles";
 @import "../components/atoms/SROnly/styles";
 
@@ -24,6 +25,7 @@
 @import "../components/molecules/Gift/styles";
 @import "../components/molecules/InputField/styles";
 @import "../components/molecules/LinkButton/styles";
+@import "../components/molecules/Modal/styles";
 @import "../components/molecules/QuantitySelector/styles";
 @import "../components/molecules/RadioField/styles";
 @import "../components/molecules/Rating/styles";

package/dist/components/atoms/Skeleton/Skeleton.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { HTMLAttributes } from 'react';
-export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
-export default Skeleton;

package/dist/components/atoms/Skeleton/Skeleton.js

@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-const Skeleton = forwardRef(function Skeleton({ testId = 'store-skeleton', ...otherProps }, ref) {
-    return (React.createElement("div", { ref: ref, "data-fs-skeleton": true, "data-testid": testId, ...otherProps }));
-});
-export default Skeleton;
-//# sourceMappingURL=Skeleton.js.map

package/dist/components/atoms/Skeleton/Skeleton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,QAAQ,GAAG,UAAU,CAAgC,SAAS,QAAQ,CAC1E,EAAE,MAAM,GAAG,gBAAgB,EAAE,GAAG,UAAU,EAAE,EAC5C,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,2CAAgC,MAAM,KAAM,UAAU,GAAI,CACxE,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/components/atoms/Skeleton/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Skeleton';
-export type { SkeletonProps } from './Skeleton';

package/dist/components/atoms/Skeleton/index.js

@@ -1,2 +0,0 @@
-export { default } from './Skeleton';
-//# sourceMappingURL=index.js.map

package/dist/components/atoms/Skeleton/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/Skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/molecules/Modal/Modal.d.ts

@@ -1,25 +0,0 @@
-import type { AriaAttributes, KeyboardEvent, MouseEvent, PropsWithChildren } from 'react';
-import React from 'react';
-import type { ModalContentProps } from './ModalContent';
-export interface ModalProps extends ModalContentProps {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-    /**
-     * Identifies the element (or elements) that labels the current element.
-     * @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
-     */
-    'aria-labelledby'?: AriaAttributes['aria-label'];
-    /**
-     * This function is called whenever the user hits "Escape" or clicks outside
-     * the dialog.
-     */
-    onDismiss?: (event: MouseEvent | KeyboardEvent) => void;
-    /**
-     * Controls whether or not the dialog is open.
-     */
-    isOpen: boolean;
-}
-declare const Modal: ({ isOpen, children, onDismiss, testId, ...otherProps }: PropsWithChildren<ModalProps>) => React.ReactPortal | null;
-export default Modal;

package/dist/components/molecules/Modal/Modal.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { createPortal } from 'react-dom';
-import { Overlay } from '@faststore/components';
-import ModalContent from './ModalContent';
-/*
- * This component is based on @reach/dialog.
- * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
- * https://reach.tech/dialog
- */
-const Modal = ({ isOpen, children, onDismiss, testId = 'store-modal', ...otherProps }) => {
-    const handleBackdropClick = (event) => {
-        if (event.defaultPrevented) {
-            return;
-        }
-        event.stopPropagation();
-        onDismiss?.(event);
-    };
-    const handleBackdropKeyDown = (event) => {
-        if (event.key !== 'Escape' || event.defaultPrevented) {
-            return;
-        }
-        event.stopPropagation();
-        onDismiss?.(event);
-    };
-    return isOpen
-        ? createPortal(React.createElement(Overlay, { onClick: handleBackdropClick, onKeyDown: handleBackdropKeyDown },
-            React.createElement(ModalContent, { ...otherProps, testId: testId }, children)), document.body)
-        : null;
-};
-export default Modal;
-//# sourceMappingURL=Modal.js.map

package/dist/components/molecules/Modal/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE/C,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAwBzC;;;;GAIG;AAEH,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,aAAa,EACtB,GAAG,UAAU,EACiB,EAAE,EAAE;IAClC,MAAM,mBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAChD,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,gBAAgB,EAAE;YACpD,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,OAAO,MAAM;QACX,CAAC,CAAC,YAAY,CACV,oBAAC,OAAO,IACN,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,qBAAqB;YAEhC,oBAAC,YAAY,OAAK,UAAU,EAAE,MAAM,EAAE,MAAM,IACzC,QAAQ,CACI,CACP,EACV,QAAQ,CAAC,IAAI,CACd;QACH,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/components/molecules/Modal/ModalContent.d.ts

@@ -1,10 +0,0 @@
-import type { DetailedHTMLProps, HTMLAttributes, RefObject } from 'react';
-interface ModalContentPureProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
-    beforeElementRef: RefObject<HTMLDivElement>;
-    trapFocusRef: RefObject<HTMLDivElement>;
-    afterElementRef: RefObject<HTMLDivElement>;
-    testId?: string;
-}
-export type ModalContentProps = Omit<ModalContentPureProps, 'trapFocusRef' | 'onClick' | 'beforeElementRef' | 'afterElementRef'>;
-declare const ModalContent: ({ children, ...otherProps }: ModalContentProps) => JSX.Element;
-export default ModalContent;

package/dist/components/molecules/Modal/ModalContent.js

@@ -1,23 +0,0 @@
-import React, { useRef } from 'react';
-import useTrapFocus from './useTrapFocus';
-const ModalContentPure = ({ beforeElementRef, trapFocusRef, afterElementRef, testId = 'store-modal-content', children, ...otherProps }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: beforeElementRef, "data-testid": "beforeElement", tabIndex: 0, "aria-hidden": "true" }),
-        React.createElement("div", { "data-fs-modal-content": true, "data-testid": testId, ref: trapFocusRef, "aria-modal": "true", role: "dialog", tabIndex: -1, ...otherProps }, children),
-        React.createElement("div", { ref: afterElementRef, "data-testid": "afterElement", tabIndex: 0, "aria-hidden": "true" })));
-};
-const ModalContent = ({ children, ...otherProps }) => {
-    const trapFocusRef = useRef(null);
-    const beforeElementRef = useRef(null);
-    const afterElementRef = useRef(null);
-    useTrapFocus({
-        beforeElementRef,
-        trapFocusRef,
-        afterElementRef,
-    });
-    return (React.createElement(ModalContentPure, { ...otherProps, trapFocusRef: trapFocusRef, beforeElementRef: beforeElementRef, afterElementRef: afterElementRef, onClick: (event) => {
-            event.stopPropagation();
-        } }, children));
-};
-export default ModalContent;
-//# sourceMappingURL=ModalContent.js.map

package/dist/components/molecules/Modal/ModalContent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/ModalContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAazC,MAAM,gBAAgB,GAAG,CAAC,EACxB,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,MAAM,GAAG,qBAAqB,EAC9B,QAAQ,EACR,GAAG,UAAU,EACS,EAAE,EAAE;IAC1B,OAAO,CACL;QACE,6BACE,GAAG,EAAE,gBAAgB,iBACT,eAAe,EAC3B,QAAQ,EAAE,CAAC,iBACC,MAAM,GAClB;QACF,2EAEe,MAAM,EACnB,GAAG,EAAE,YAAY,gBACN,MAAM,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,KACR,UAAU,IAEb,QAAQ,CACL;QACN,6BACE,GAAG,EAAE,eAAe,iBACR,cAAc,EAC1B,QAAQ,EAAE,CAAC,iBACC,MAAM,GAClB,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,EAAE,EAAE;IACtE,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACjD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACrD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEpD,YAAY,CAAC;QACX,gBAAgB;QAChB,YAAY;QACZ,eAAe;KAChB,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,gBAAgB,OACX,UAAU,EACd,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;YAC7B,KAAK,CAAC,eAAe,EAAE,CAAA;QACzB,CAAC,IAEA,QAAQ,CACQ,CACpB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/components/molecules/Modal/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Modal';
-export type { ModalProps } from './Modal';

package/dist/components/molecules/Modal/index.js

@@ -1,2 +0,0 @@
-export { default } from './Modal';
-//# sourceMappingURL=index.js.map

package/dist/components/molecules/Modal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/molecules/Modal/useTrapFocus.d.ts

@@ -1,8 +0,0 @@
-import type { RefObject } from 'react';
-interface TrapFocusParams {
-    beforeElementRef: RefObject<HTMLElement>;
-    trapFocusRef: RefObject<HTMLElement>;
-    afterElementRef: RefObject<HTMLElement>;
-}
-declare const useTrapFocus: ({ trapFocusRef, beforeElementRef, afterElementRef, }: TrapFocusParams) => void;
-export default useTrapFocus;

package/dist/components/molecules/Modal/useTrapFocus.js

@@ -1,76 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { tabbable } from 'tabbable';
-/*
- * Element that will maintain the focus inside trapFocusRef, focus the first element,
- * and focus back on the element that was in focus when useTrapFocus was triggered.
- *
- * Inspired by Reakit useTrapFocus https://github.com/reakit/reakit/blob/a211d94da9f3b683182568a56479b91afb1b85ae/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
- */
-const useTrapFocus = ({ trapFocusRef, beforeElementRef, afterElementRef, }) => {
-    const tabbableNodesRef = useRef();
-    const nodeToRestoreRef = useRef(document.hasFocus() ? document.activeElement : null);
-    // Focus back on the element that was focused when useTrapFocus is triggered.
-    useEffect(() => {
-        const nodeToRestore = nodeToRestoreRef.current;
-        return () => {
-            nodeToRestore?.focus();
-        };
-    }, [nodeToRestoreRef]);
-    // Set focus on first tabbable element
-    useEffect(() => {
-        if (!trapFocusRef.current) {
-            return;
-        }
-        if (!tabbableNodesRef.current) {
-            tabbableNodesRef.current = tabbable(trapFocusRef.current);
-        }
-        const [firstTabbable] = tabbableNodesRef.current;
-        if (!firstTabbable) {
-            trapFocusRef.current.focus();
-            return;
-        }
-        firstTabbable.focus();
-    }, [trapFocusRef]);
-    // Handle loop focus. Set keydown and focusin event listeners
-    useEffect(() => {
-        if (!trapFocusRef.current ||
-            !beforeElementRef.current ||
-            !afterElementRef.current) {
-            return;
-        }
-        const beforeElement = beforeElementRef.current;
-        const afterElement = afterElementRef.current;
-        const trapFocus = trapFocusRef.current;
-        const handleLoopFocus = (nativeEvent) => {
-            if (!document.hasFocus()) {
-                return;
-            }
-            tabbableNodesRef.current = tabbable(trapFocusRef.current);
-            if (!tabbableNodesRef.current.length) {
-                trapFocus.focus();
-            }
-            /*
-             * Handle loop focus from beforeElementRef. This node can only be focused if the user press shift tab.
-             * It will focus the last element of the trapFocusRef.
-             */
-            if (nativeEvent.target === beforeElement) {
-                tabbableNodesRef.current[tabbableNodesRef.current.length - 1]?.focus();
-            }
-            /*
-             * Handle loop focus from afterElementRef. This node can only be focused if the user press tab.
-             * It will focus the first element of the trapFocusRef.
-             */
-            if (nativeEvent.target === afterElement) {
-                tabbableNodesRef.current[0]?.focus();
-            }
-        };
-        beforeElement?.addEventListener('focusin', handleLoopFocus);
-        afterElement?.addEventListener('focusin', handleLoopFocus);
-        return () => {
-            beforeElement?.removeEventListener('focusin', handleLoopFocus);
-            afterElement?.removeEventListener('focusin', handleLoopFocus);
-        };
-    }, [tabbableNodesRef, afterElementRef, beforeElementRef, trapFocusRef]);
-};
-export default useTrapFocus;
-//# sourceMappingURL=useTrapFocus.js.map

package/dist/components/molecules/Modal/useTrapFocus.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTrapFocus.js","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/useTrapFocus.ts"],"names":[],"mappings":"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"}

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -1,20 +0,0 @@
-import React, { forwardRef } from 'react'
-import type { HTMLAttributes } from 'react'
-
-export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
-  { testId = 'store-skeleton', ...otherProps },
-  ref
-) {
-  return (
-    <div ref={ref} data-fs-skeleton data-testid={testId} {...otherProps} />
-  )
-})
-
-export default Skeleton

package/src/components/atoms/Skeleton/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Skeleton'
-export type { SkeletonProps } from './Skeleton'

package/src/components/molecules/Modal/Modal.tsx

@@ -1,82 +0,0 @@
-import type {
-  AriaAttributes,
-  KeyboardEvent,
-  MouseEvent,
-  PropsWithChildren,
-} from 'react'
-import React from 'react'
-import { createPortal } from 'react-dom'
-
-import { Overlay } from '@faststore/components'
-import type { ModalContentProps } from './ModalContent'
-import ModalContent from './ModalContent'
-
-export interface ModalProps extends ModalContentProps {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-  /**
-   * Identifies the element (or elements) that labels the current element.
-   * @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
-   */
-  'aria-labelledby'?: AriaAttributes['aria-label']
-
-  /**
-   * This function is called whenever the user hits "Escape" or clicks outside
-   * the dialog.
-   */
-  onDismiss?: (event: MouseEvent | KeyboardEvent) => void
-  /**
-   * Controls whether or not the dialog is open.
-   */
-  isOpen: boolean
-}
-
-/*
- * This component is based on @reach/dialog.
- * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
- * https://reach.tech/dialog
- */
-
-const Modal = ({
-  isOpen,
-  children,
-  onDismiss,
-  testId = 'store-modal',
-  ...otherProps
-}: PropsWithChildren<ModalProps>) => {
-  const handleBackdropClick = (event: MouseEvent) => {
-    if (event.defaultPrevented) {
-      return
-    }
-
-    event.stopPropagation()
-    onDismiss?.(event)
-  }
-
-  const handleBackdropKeyDown = (event: KeyboardEvent) => {
-    if (event.key !== 'Escape' || event.defaultPrevented) {
-      return
-    }
-
-    event.stopPropagation()
-    onDismiss?.(event)
-  }
-
-  return isOpen
-    ? createPortal(
-        <Overlay
-          onClick={handleBackdropClick}
-          onKeyDown={handleBackdropKeyDown}
-        >
-          <ModalContent {...otherProps} testId={testId}>
-            {children}
-          </ModalContent>
-        </Overlay>,
-        document.body
-      )
-    : null
-}
-
-export default Modal

package/src/components/molecules/Modal/ModalContent.tsx

@@ -1,90 +0,0 @@
-import type {
-  DetailedHTMLProps,
-  HTMLAttributes,
-  MouseEvent,
-  RefObject,
-} from 'react'
-import React, { useRef } from 'react'
-
-import useTrapFocus from './useTrapFocus'
-
-interface ModalContentPureProps
-  extends Omit<
-    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
-    'ref'
-  > {
-  beforeElementRef: RefObject<HTMLDivElement>
-  trapFocusRef: RefObject<HTMLDivElement>
-  afterElementRef: RefObject<HTMLDivElement>
-  testId?: string
-}
-
-const ModalContentPure = ({
-  beforeElementRef,
-  trapFocusRef,
-  afterElementRef,
-  testId = 'store-modal-content',
-  children,
-  ...otherProps
-}: ModalContentPureProps) => {
-  return (
-    <>
-      <div
-        ref={beforeElementRef}
-        data-testid="beforeElement"
-        tabIndex={0}
-        aria-hidden="true"
-      />
-      <div
-        data-fs-modal-content
-        data-testid={testId}
-        ref={trapFocusRef}
-        aria-modal="true"
-        role="dialog"
-        tabIndex={-1}
-        {...otherProps}
-      >
-        {children}
-      </div>
-      <div
-        ref={afterElementRef}
-        data-testid="afterElement"
-        tabIndex={0}
-        aria-hidden="true"
-      />
-    </>
-  )
-}
-
-export type ModalContentProps = Omit<
-  ModalContentPureProps,
-  'trapFocusRef' | 'onClick' | 'beforeElementRef' | 'afterElementRef'
->
-
-const ModalContent = ({ children, ...otherProps }: ModalContentProps) => {
-  const trapFocusRef = useRef<HTMLDivElement>(null)
-  const beforeElementRef = useRef<HTMLDivElement>(null)
-  const afterElementRef = useRef<HTMLDivElement>(null)
-
-  useTrapFocus({
-    beforeElementRef,
-    trapFocusRef,
-    afterElementRef,
-  })
-
-  return (
-    <ModalContentPure
-      {...otherProps}
-      trapFocusRef={trapFocusRef}
-      beforeElementRef={beforeElementRef}
-      afterElementRef={afterElementRef}
-      onClick={(event: MouseEvent) => {
-        event.stopPropagation()
-      }}
-    >
-      {children}
-    </ModalContentPure>
-  )
-}
-
-export default ModalContent

package/src/components/molecules/Modal/index.tsx

@@ -1,2 +0,0 @@
-export { default } from './Modal'
-export type { ModalProps } from './Modal'

package/src/components/molecules/Modal/useTrapFocus.ts

@@ -1,110 +0,0 @@
-import { useEffect, useRef } from 'react'
-import type { RefObject } from 'react'
-import type { FocusableElement } from 'tabbable'
-import { tabbable } from 'tabbable'
-
-interface TrapFocusParams {
-  beforeElementRef: RefObject<HTMLElement>
-  trapFocusRef: RefObject<HTMLElement>
-  afterElementRef: RefObject<HTMLElement>
-}
-
-/*
- * Element that will maintain the focus inside trapFocusRef, focus the first element,
- * and focus back on the element that was in focus when useTrapFocus was triggered.
- *
- * Inspired by Reakit useTrapFocus https://github.com/reakit/reakit/blob/a211d94da9f3b683182568a56479b91afb1b85ae/packages/reakit/src/Dialog/__utils/useFocusTrap.ts
- */
-const useTrapFocus = ({
-  trapFocusRef,
-  beforeElementRef,
-  afterElementRef,
-}: TrapFocusParams) => {
-  const tabbableNodesRef = useRef<FocusableElement[]>()
-  const nodeToRestoreRef = useRef<HTMLElement | null>(
-    document.hasFocus() ? (document.activeElement as HTMLElement) : null
-  )
-
-  // Focus back on the element that was focused when useTrapFocus is triggered.
-  useEffect(() => {
-    const nodeToRestore = nodeToRestoreRef.current
-
-    return () => {
-      nodeToRestore?.focus()
-    }
-  }, [nodeToRestoreRef])
-
-  // Set focus on first tabbable element
-  useEffect(() => {
-    if (!trapFocusRef.current) {
-      return
-    }
-
-    if (!tabbableNodesRef.current) {
-      tabbableNodesRef.current = tabbable(trapFocusRef.current)
-    }
-
-    const [firstTabbable] = tabbableNodesRef.current
-
-    if (!firstTabbable) {
-      trapFocusRef.current.focus()
-
-      return
-    }
-
-    firstTabbable.focus()
-  }, [trapFocusRef])
-
-  // Handle loop focus. Set keydown and focusin event listeners
-  useEffect(() => {
-    if (
-      !trapFocusRef.current ||
-      !beforeElementRef.current ||
-      !afterElementRef.current
-    ) {
-      return
-    }
-
-    const beforeElement = beforeElementRef.current
-    const afterElement = afterElementRef.current
-    const trapFocus = trapFocusRef.current
-
-    const handleLoopFocus = (nativeEvent: FocusEvent) => {
-      if (!document.hasFocus()) {
-        return
-      }
-
-      tabbableNodesRef.current = tabbable(trapFocusRef.current!)
-
-      if (!tabbableNodesRef.current.length) {
-        trapFocus.focus()
-      }
-
-      /*
-       * Handle loop focus from beforeElementRef. This node can only be focused if the user press shift tab.
-       * It will focus the last element of the trapFocusRef.
-       */
-      if (nativeEvent.target === beforeElement) {
-        tabbableNodesRef.current[tabbableNodesRef.current.length - 1]?.focus()
-      }
-
-      /*
-       * Handle loop focus from afterElementRef. This node can only be focused if the user press tab.
-       * It will focus the first element of the trapFocusRef.
-       */
-      if (nativeEvent.target === afterElement) {
-        tabbableNodesRef.current[0]?.focus()
-      }
-    }
-
-    beforeElement?.addEventListener('focusin', handleLoopFocus)
-    afterElement?.addEventListener('focusin', handleLoopFocus)
-
-    return () => {
-      beforeElement?.removeEventListener('focusin', handleLoopFocus)
-      afterElement?.removeEventListener('focusin', handleLoopFocus)
-    }
-  }, [tabbableNodesRef, afterElementRef, beforeElementRef, trapFocusRef])
-}
-
-export default useTrapFocus