@faststore/ui 1.10.29 → 1.10.34

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.10.34 (2022-08-04)
+
+
+### Features
+
+* Add skuSelector-related properties to ProductGroup type ([#1407](https://github.com/vtex/faststore/issues/1407)) ([3f9f33f](https://github.com/vtex/faststore/commit/3f9f33f05b47d266465f349edb7645ad06ff7b27))
+
+
+
+## [1.10.31](https://github.com/vtex/faststore/compare/v1.10.30...v1.10.31) (2022-08-02)
+
+
+### Features
+
+* Add fowardRef to `ProductTitle` ([#1427](https://github.com/vtex/faststore/issues/1427)) ([5f622f3](https://github.com/vtex/faststore/commit/5f622f3a28a32228aa457c0b1bd141969f541262))
+
+
+
+## 1.10.30 (2022-08-02)
+
+
+### Chores
+
+* Updates documentation link ([#1424](https://github.com/vtex/faststore/issues/1424)) ([04e518a](https://github.com/vtex/faststore/commit/04e518a92038259bda212024b85c1a807ebf0e1a))
+
+
+
 ## [1.10.29](https://github.com/vtex/faststore/compare/v1.10.28...v1.10.29) (2022-07-29)
 
 

package/README.md

@@ -49,4 +49,4 @@ function MyComponent {
 
 ## Docs
 
-For more information, please refer to our documentation: https://faststore.dev/reference/ui/overview
+For more information, please refer to our documentation: https://faststore.dev/reference/ui/faststore-ui

package/dist/index.d.ts

@@ -78,6 +78,8 @@ export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from
 export type { DropdownProps, DropdownButtonProps, DropdownItemProps, DropdownMenuProps, } from './molecules/Dropdown';
 export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './organisms/OutOfStock';
 export type { OutOfStockProps, OutOfStockMessageProps, OutOfStockTitleProps, } from './organisms/OutOfStock';
+export { Tiles, Tile } from './organisms/Tiles';
+export type { TilesProps, TileProps } from './organisms/Tiles';
 export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero';
 export type { HeroProps, HeroHeadingProps, HeroImageProps, } from './organisms/Hero';
 export { default as useSlider } from './hooks/useSlider';

package/dist/index.js

@@ -41,6 +41,7 @@ export { default as QuantitySelector } from './molecules/QuantitySelector';
 export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from './molecules/Dropdown';
 // Organisms
 export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './organisms/OutOfStock';
+export { Tiles, Tile } from './organisms/Tiles';
 export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero';
 // Hooks
 export { default as useSlider } from './hooks/useSlider';

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/dist/molecules/ProductTitle/ProductTitle.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import type { ReactNode } from 'react';
 export declare type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
     /**
@@ -22,5 +22,26 @@ export declare type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title
      */
     testId?: string;
 };
-declare function ProductTitle({ title, label, refTag, refNumber, testId, ...otherProps }: ProductTitleProps): JSX.Element;
+declare const ProductTitle: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /**
+     * A react component to be used as the product title, e.g. a `h1`
+     */
+    title: ReactNode;
+    /**
+     * A react component to be used as the product label, e.g. a `DiscountBadge`
+     */
+    label?: ReactNode;
+    /**
+     * Label for reference.
+     */
+    refTag?: string | undefined;
+    /**
+     * A text to be used below the title and the label, such as the product's reference number.
+     */
+    refNumber?: string | undefined;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string | undefined;
+} & React.RefAttributes<HTMLElement>>;
 export default ProductTitle;

package/dist/molecules/ProductTitle/ProductTitle.js

@@ -1,12 +1,12 @@
-import React from 'react';
-function ProductTitle({ title, label, refTag = "Ref.: ", refNumber, testId = 'store-product-title', ...otherProps }) {
-    return (React.createElement("header", Object.assign({ "data-fs-product-title": true, "data-testid": testId }, otherProps),
+import React, { forwardRef } from 'react';
+const ProductTitle = forwardRef(function ProductTitle({ title, label, refTag = "Ref.: ", refNumber, testId = 'store-product-title', ...otherProps }, ref) {
+    return (React.createElement("header", Object.assign({ ref: ref, "data-fs-product-title": true, "data-testid": testId }, otherProps),
         React.createElement("div", { "data-fs-product-title-header": true },
             title,
             !!label && label),
         refNumber && (React.createElement("p", { "data-fs-product-title-addendum": true },
             refTag,
             refNumber))));
-}
+});
 export default ProductTitle;
 //# sourceMappingURL=ProductTitle.js.map

package/dist/molecules/ProductTitle/ProductTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductTitle.js","sourceRoot":"","sources":["../../../src/molecules/ProductTitle/ProductTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AA0B7C,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAE,QAAQ,EAAC,SAAS,EAAE,MAAM,GAAE,qBAAqB,EAAE,GAAG,UAAU,EAAqB;IACjI,OAAO,CACL,4FAA2C,MAAM,IAAM,UAAU;QAC/D;YACG,KAAK;YACL,CAAC,CAAC,KAAK,IAAI,KAAK,CACb;QAEL,SAAS,IAAI,CACZ;YACG,MAAM;YAAE,SAAS,CAChB,CACL,CACM,CACV,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ProductTitle.js","sourceRoot":"","sources":["../../../src/molecules/ProductTitle/ProductTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AA0BzD,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAE,QAAQ,EAAC,SAAS,EAAE,MAAM,GAAE,qBAAqB,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG;IACnH,OAAO,CACL,8CAAQ,GAAG,EAAE,GAAG,gDAAqC,MAAM,IAAM,UAAU;QACzE;YACG,KAAK;YACL,CAAC,CAAC,KAAK,IAAI,KAAK,CACb;QAEL,SAAS,IAAI,CACZ;YACG,MAAM;YAAE,SAAS,CAChB,CACL,CACM,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/organisms/Tiles/Tile.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface TileProps extends HTMLAttributes<HTMLLIElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress,
+     * Testing Library, and Jest).
+     */
+    testId?: string;
+}
+declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLLIElement>>;
+export default Tile;

package/dist/organisms/Tiles/Tile.js

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

package/dist/organisms/Tiles/Tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.js","sourceRoot":"","sources":["../../../src/organisms/Tiles/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,IAAI,GAAG,UAAU,CAA2B,SAAS,IAAI,CAC7D,EAAE,MAAM,GAAG,YAAY,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAClD,GAAG;IAEH,OAAO,CACL,0CAAI,GAAG,EAAE,GAAG,uCAA4B,MAAM,IAAM,UAAU,GAC3D,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,IAAI,CAAA"}

package/dist/organisms/Tiles/Tiles.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface TilesProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress,
+     * Testing Library, and Jest).
+     */
+    testId?: string;
+}
+declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLUListElement>>;
+export default Tiles;

package/dist/organisms/Tiles/Tiles.js

@@ -0,0 +1,30 @@
+import React, { Children, forwardRef } from 'react';
+import { Tile } from '.';
+const MIN_CHILDREN = 2;
+const MAX_CHILDREN = 4;
+const NUMBER_ITEMS_TO_EXPAND_FIRST_TWO = 2;
+const NUMBER_ITEMS_TO_EXPAND_FIRST = 3;
+const Tiles = forwardRef(function Tiles({ testId = 'store-tiles', children, ...otherProps }, ref) {
+    const childrenCount = Children.count(children);
+    if (process.env.NODE_ENV === 'development') {
+        const isOutOfBounds = childrenCount < MIN_CHILDREN || childrenCount > MAX_CHILDREN;
+        if (isOutOfBounds) {
+            throw new Error(`Tiles cannot receive less than ${MIN_CHILDREN} or more than ${MAX_CHILDREN} children.`);
+        }
+    }
+    if (process.env.NODE_ENV === 'development') {
+        Children.forEach(children, (child) => {
+            if (child.type !== Tile) {
+                throw new Error('Only Tile components allowed as children.');
+            }
+        });
+    }
+    const expandedClass = childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST
+        ? 'expanded-first'
+        : childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO
+            ? 'expanded-first-two'
+            : '';
+    return (React.createElement("ul", Object.assign({ ref: ref, "data-fs-tiles": true, "data-fs-tiles-variant": expandedClass, "data-testid": testId }, otherProps), children));
+});
+export default Tiles;
+//# sourceMappingURL=Tiles.js.map

package/dist/organisms/Tiles/Tiles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiles.js","sourceRoot":"","sources":["../../../src/organisms/Tiles/Tiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAA;AAUxB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,YAAY,GAAG,CAAC,CAAA;AACtB,MAAM,gCAAgC,GAAG,CAAC,CAAA;AAC1C,MAAM,4BAA4B,GAAG,CAAC,CAAA;AAEtC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CACnE,EAAE,MAAM,GAAG,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACnD,GAAG;IAEH,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAE9C,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,MAAM,aAAa,GACjB,aAAa,GAAG,YAAY,IAAI,aAAa,GAAG,YAAY,CAAA;QAE9D,IAAI,aAAa,EAAE;YACjB,MAAM,IAAI,KAAK,CACb,kCAAkC,YAAY,iBAAiB,YAAY,YAAY,CACxF,CAAA;SACF;KACF;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,QAAQ,CAAC,OAAO,CAAC,QAAwB,EAAE,CAAC,KAAK,EAAE,EAAE;YACnD,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;gBACvB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;aAC7D;QACH,CAAC,CAAC,CAAA;KACH;IAED,MAAM,aAAa,GACjB,aAAa,KAAK,4BAA4B;QAC5C,CAAC,CAAC,gBAAgB;QAClB,CAAC,CAAC,aAAa,KAAK,gCAAgC;YACpD,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,EAAE,CAAA;IAER,OAAO,CACL,0CACE,GAAG,EAAE,GAAG,kDAEe,aAAa,iBACvB,MAAM,IACf,UAAU,GAEb,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/organisms/Tiles/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Tiles } from './Tiles';
+export type { TilesProps } from './Tiles';
+export { default as Tile } from './Tile';
+export type { TileProps } from './Tile';

package/dist/organisms/Tiles/index.js

@@ -0,0 +1,3 @@
+export { default as Tiles } from './Tiles';
+export { default as Tile } from './Tile';
+//# sourceMappingURL=index.js.map

package/dist/organisms/Tiles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/Tiles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.10.29",
+  "version": "1.10.34",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@faststore/styles": "^1.10.29",
+    "@faststore/styles": "^1.10.34",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-actions": "^6.4.4",
     "@storybook/addon-docs": "^6.4.4",
@@ -79,11 +79,11 @@
     "react": "^17.0.2",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.2",
-    "shared": "^1.10.18",
+    "shared": "^1.10.34",
     "size-limit": "^7.0.8",
     "storybook-addon-themes": "^6.1.0",
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "505d423909498d321c657b8ce05ab2a15f015fce"
+  "gitHead": "5d59e28c724e389b596e2bb13b1464314eab275f"
 }

package/src/index.ts

@@ -193,6 +193,9 @@ export type {
   OutOfStockTitleProps,
 } from './organisms/OutOfStock'
 
+export { Tiles, Tile } from './organisms/Tiles'
+export type { TilesProps, TileProps } from './organisms/Tiles'
+
 export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero'
 export type {
   HeroProps,

package/src/molecules/ProductTitle/ProductTitle.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import type { ReactNode } from 'react'
 
 export type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
@@ -24,21 +24,23 @@ export type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
   testId?: string
 }
 
-function ProductTitle({ title, label, refTag= "Ref.: ",refNumber, testId= 'store-product-title', ...otherProps }: ProductTitleProps) {
-  return (
-    <header data-fs-product-title data-testid={testId} {...otherProps}>
-      <div data-fs-product-title-header>
-        {title}
-        {!!label && label}
-      </div>
+const ProductTitle = forwardRef<HTMLElement, ProductTitleProps>(
+  function ProductTitle({ title, label, refTag= "Ref.: ",refNumber, testId= 'store-product-title', ...otherProps }, ref) {
+    return (
+      <header ref={ref} data-fs-product-title data-testid={testId} {...otherProps}>
+        <div data-fs-product-title-header>
+          {title}
+          {!!label && label}
+        </div>
 
-      {refNumber && (
-        <p data-fs-product-title-addendum>
-          {refTag}{refNumber}
-        </p>
-      )}
-    </header>
-  )
-}
+        {refNumber && (
+          <p data-fs-product-title-addendum>
+            {refTag}{refNumber}
+          </p>
+        )}
+      </header>
+    )
+  }
+)
 
 export default ProductTitle

package/src/organisms/Tiles/Tile.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface TileProps extends HTMLAttributes<HTMLLIElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress,
+   * Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const Tile = forwardRef<HTMLLIElement, TileProps>(function Tile(
+  { testId = 'store-tile', children, ...otherProps },
+  ref
+) {
+  return (
+    <li ref={ref} data-fs-tile data-testid={testId} {...otherProps}>
+      {children}
+    </li>
+  )
+})
+
+export default Tile

package/src/organisms/Tiles/Tiles.tsx

@@ -0,0 +1,64 @@
+import React, { Children, forwardRef } from 'react'
+import type { HTMLAttributes, ReactElement } from 'react'
+
+import { Tile } from '.'
+
+export interface TilesProps extends HTMLAttributes<HTMLUListElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress,
+   * Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const MIN_CHILDREN = 2
+const MAX_CHILDREN = 4
+const NUMBER_ITEMS_TO_EXPAND_FIRST_TWO = 2
+const NUMBER_ITEMS_TO_EXPAND_FIRST = 3
+
+const Tiles = forwardRef<HTMLUListElement, TilesProps>(function Tiles(
+  { testId = 'store-tiles', children, ...otherProps },
+  ref
+) {
+  const childrenCount = Children.count(children)
+
+  if (process.env.NODE_ENV === 'development') {
+    const isOutOfBounds =
+      childrenCount < MIN_CHILDREN || childrenCount > MAX_CHILDREN
+
+    if (isOutOfBounds) {
+      throw new Error(
+        `Tiles cannot receive less than ${MIN_CHILDREN} or more than ${MAX_CHILDREN} children.`
+      )
+    }
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    Children.forEach(children as ReactElement, (child) => {
+      if (child.type !== Tile) {
+        throw new Error('Only Tile components allowed as children.')
+      }
+    })
+  }
+
+  const expandedClass =
+    childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST
+      ? 'expanded-first'
+      : childrenCount === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO
+      ? 'expanded-first-two'
+      : ''
+
+  return (
+    <ul
+      ref={ref}
+      data-fs-tiles
+      data-fs-tiles-variant={expandedClass}
+      data-testid={testId}
+      {...otherProps}
+    >
+      {children}
+    </ul>
+  )
+})
+
+export default Tiles

package/src/organisms/Tiles/index.ts

@@ -0,0 +1,5 @@
+export { default as Tiles } from './Tiles'
+export type { TilesProps } from './Tiles'
+
+export { default as Tile } from './Tile'
+export type { TileProps } from './Tile'

package/src/organisms/Tiles/stories/Tiles.mdx

@@ -0,0 +1,39 @@
+import { ArgsTable, Canvas, Story } from '@storybook/addon-docs'
+
+import { Tile, Tiles } from '../'
+
+# Tiles
+
+<Canvas>
+  <Story id="organisms-tiles--tiles" />
+</Canvas>
+
+## Components
+
+- `Tiles`: the parent component that wraps one or many `Tile`s.
+- `Tile`: the child component.
+
+## Props
+
+Besides those attributes, the following props are also supported:
+
+### `Tiles`
+
+<ArgsTable of={Tiles} />
+
+### `Tile`
+
+<ArgsTable of={Tile} />
+
+## CSS Selectors
+
+```css
+[data-fs-tiles] {
+}
+
+[data-fs-tiles-variant='expanded-first'|'expanded-first-two'] {
+}
+
+[data-fs-tile] {
+}
+```

package/src/organisms/Tiles/stories/Tiles.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { Tile, Tiles as UITiles } from '../'
+import mdx from './Tiles.mdx'
+
+import type { Story, Meta } from '@storybook/react'
+import type { TilesProps } from '../'
+
+const TilesTemplate: Story<TilesProps> = () => (
+  <>
+    <UITiles>
+      <Tile>Tile #1</Tile>
+      <Tile>Tile #2</Tile>
+    </UITiles>
+    <UITiles>
+      <Tile>Tile #1</Tile>
+      <Tile>Tile #2</Tile>
+      <Tile>Tile #3</Tile>
+      <Tile>Tile #4</Tile>
+    </UITiles>
+    <UITiles>
+      <Tile>Tile #1</Tile>
+      <Tile>Tile #2</Tile>
+      <Tile>Tile #3</Tile>
+    </UITiles>
+  </>
+)
+
+export const Tiles = TilesTemplate.bind({})
+
+export default {
+  title: 'Organisms/Tiles',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta