@faststore/components 2.0.56-alpha.0 → 2.0.57-alpha.0

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+interface Size {
+    width: string;
+    height: string;
+}
+export type BorderStyle = 'regular' | 'pill' | 'circle';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * Control whether skeleton should be visible or not.
+     */
+    loading?: boolean;
+    /**
+     * Control whether the shimmer effect should be displayed or not.
+     */
+    shimmer?: boolean;
+    /**
+     * Specifies the skeleton element size (width, height).
+     */
+    size: Size;
+    /**
+     * Specifies the skeleton element border radius ('regular' | 'pill' | 'circle').
+     */
+    border?: BorderStyle;
+    /**
+     * Custom border radius for skeleton elements.
+     */
+    borderRadius?: string;
+}
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Skeleton;

package/dist/atoms/Skeleton/Skeleton.js

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+const Skeleton = forwardRef(function Skeleton({ testId = 'fs-skeleton', loading = true, shimmer = true, children, size, border, borderRadius, ...otherProps }, ref) {
+    const styles = {
+        width: size.width,
+        height: size.height,
+    };
+    return loading ? (React.createElement("div", { ref: ref, "data-fs-skeleton": true, "data-testid": testId, "data-fs-skeleton-border": border ? border : null, style: borderRadius ? { ...styles, borderRadius: borderRadius } : styles, ...otherProps }, shimmer && React.createElement("div", { "data-fs-skeleton-shimmer": true }))) : (React.createElement(React.Fragment, null, children));
+});
+export default Skeleton;
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAqCzC,MAAM,QAAQ,GAAG,UAAU,CACzB,SAAS,QAAQ,CACf,EACE,MAAM,GAAG,aAAa,EACtB,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,IAAI,EACd,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,YAAY,EACZ,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,MAAM,GAAG;QACb,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM,EAAE,IAAI,CAAC,MAAM;KACpB,CAAA;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,2CAEK,MAAM,6BACM,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC/C,KAAK,EACH,YAAY,CAAC,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,KAE/D,UAAU,IAEb,OAAO,IAAI,gEAAgC,CACxC,CACP,CAAC,CAAC,CAAC,CACF,0CAAG,QAAQ,CAAI,CAChB,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,QAAQ,CAAA"}

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

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

package/dist/atoms/Skeleton/index.js

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

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

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

package/dist/index.d.ts

@@ -24,6 +24,8 @@ export { default as Price } from './atoms/Price';
 export type { PriceProps } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
 export type { RadioProps } from './atoms/Radio';
+export { default as Skeleton } from './atoms/Skeleton';
+export type { SkeletonProps } from './atoms/Skeleton';
 export { default as Select } from './atoms/Select';
 export type { SelectProps } from './atoms/Select';
 export { default as Slider } from './atoms/Slider';
@@ -42,7 +44,7 @@ export { default as DiscountBadge } from './molecules/DiscountBadge';
 export type { DiscountBadgeProps } from './molecules/DiscountBadge';
 export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './molecules/Dropdown';
 export type { DropdownProps, DropdownButtonProps, DropdownItemProps, DropdownMenuProps, } from './molecules/Dropdown';
-export { default as Gift, GiftContent, GiftImage, } from './molecules/Gift';
+export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
 export type { GiftProps, GiftContentProps, GiftImageProps, } from './molecules/Gift';
 export { default as InputField } from './molecules/InputField';
 export type { InputFieldProps } from './molecules/InputField';
@@ -52,8 +54,8 @@ export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
 export type { ModalProps, ModalHeaderProps } from './molecules/Modal';
 export { default as RadioField } from './molecules/RadioField';
 export type { RadioFieldProps } from './molecules/RadioField';
-export { default as RadioGroup, RadioOption, } from './molecules/RadioGroup';
-export type { RadioGroupProps, RadioOptionProps, } from './molecules/RadioGroup';
+export { default as RadioGroup, RadioOption } from './molecules/RadioGroup';
+export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup';
 export { default as Rating } from './molecules/Rating';
 export type { RatingProps } from './molecules/Rating';
 export { default as SelectField } from './molecules/SelectField';

package/dist/index.js

@@ -15,6 +15,7 @@ export { default as List } from './atoms/List';
 export { default as Overlay } from './atoms/Overlay';
 export { default as Price } from './atoms/Price';
 export { default as Radio } from './atoms/Radio';
+export { default as Skeleton } from './atoms/Skeleton';
 export { default as Select } from './atoms/Select';
 export { default as Slider } from './atoms/Slider';
 export { default as SROnly } from './atoms/SROnly';
@@ -26,12 +27,12 @@ export { default as CheckboxField } from './molecules/CheckboxField';
 export { default as IconButton } from './molecules/IconButton';
 export { default as DiscountBadge } from './molecules/DiscountBadge';
 export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './molecules/Dropdown';
-export { default as Gift, GiftContent, GiftImage, } from './molecules/Gift';
+export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
 export { default as InputField } from './molecules/InputField';
 export { default as LinkButton } from './molecules/LinkButton';
 export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal';
 export { default as RadioField } from './molecules/RadioField';
-export { default as RadioGroup, RadioOption, } from './molecules/RadioGroup';
+export { default as RadioGroup, RadioOption } from './molecules/RadioGroup';
 export { default as Rating } from './molecules/Rating';
 export { default as SelectField } from './molecules/SelectField';
 export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './molecules/Table';

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.56-alpha.0",
+  "version": "2.0.57-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "6afa204ec28032832e3867f805fbc5bcbbed4aab"
+  "gitHead": "a9310e34894883ae71d8bdb32402c3a17b419078"
 }

package/src/atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+
+interface Size {
+  width: string
+  height: string
+}
+
+export type BorderStyle = 'regular' | 'pill' | 'circle'
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Control whether skeleton should be visible or not.
+   */
+  loading?: boolean
+  /**
+   * Control whether the shimmer effect should be displayed or not.
+   */
+  shimmer?: boolean
+  /**
+   * Specifies the skeleton element size (width, height).
+   */
+  size: Size
+  /**
+   * Specifies the skeleton element border radius ('regular' | 'pill' | 'circle').
+   */
+  border?: BorderStyle
+  /**
+   * Custom border radius for skeleton elements.
+   */
+  borderRadius?: string
+}
+
+const Skeleton = forwardRef<HTMLDivElement, PropsWithChildren<SkeletonProps>>(
+  function Skeleton(
+    {
+      testId = 'fs-skeleton',
+      loading = true,
+      shimmer = true,
+      children,
+      size,
+      border,
+      borderRadius,
+      ...otherProps
+    },
+    ref
+  ) {
+    const styles = {
+      width: size.width,
+      height: size.height,
+    }
+
+    return loading ? (
+      <div
+        ref={ref}
+        data-fs-skeleton
+        data-testid={testId}
+        data-fs-skeleton-border={border ? border : null}
+        style={
+          borderRadius ? { ...styles, borderRadius: borderRadius } : styles
+        }
+        {...otherProps}
+      >
+        {shimmer && <div data-fs-skeleton-shimmer />}
+      </div>
+    ) : (
+      <>{children}</>
+    )
+  }
+)
+
+export default Skeleton

package/src/atoms/Skeleton/index.ts

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

package/src/index.ts

@@ -29,6 +29,8 @@ export { default as Price } from './atoms/Price'
 export type { PriceProps } from './atoms/Price'
 export { default as Radio } from './atoms/Radio'
 export type { RadioProps } from './atoms/Radio'
+export { default as Skeleton } from './atoms/Skeleton'
+export type { SkeletonProps } from './atoms/Skeleton'
 export { default as Select } from './atoms/Select'
 export type { SelectProps } from './atoms/Select'
 export { default as Slider } from './atoms/Slider'
@@ -69,11 +71,7 @@ export type {
   DropdownItemProps,
   DropdownMenuProps,
 } from './molecules/Dropdown'
-export {
-  default as Gift,
-  GiftContent,
-  GiftImage,
-} from './molecules/Gift'
+export { default as Gift, GiftContent, GiftImage } from './molecules/Gift'
 export type {
   GiftProps,
   GiftContentProps,
@@ -87,14 +85,8 @@ export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal'
 export type { ModalProps, ModalHeaderProps } from './molecules/Modal'
 export { default as RadioField } from './molecules/RadioField'
 export type { RadioFieldProps } from './molecules/RadioField'
-export {
-  default as RadioGroup,
-  RadioOption,
-} from './molecules/RadioGroup'
-export type {
-  RadioGroupProps,
-  RadioOptionProps,
-} from './molecules/RadioGroup'
+export { default as RadioGroup, RadioOption } from './molecules/RadioGroup'
+export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup'
 export { default as Rating } from './molecules/Rating'
 export type { RatingProps } from './molecules/Rating'
 export { default as SelectField } from './molecules/SelectField'