@faststore/ui 1.11.18 → 1.11.19

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.11.19](https://github.com/vtex/faststore/compare/v1.11.18...v1.11.19) (2022-09-12)
+
+
+### Refactoring
+
+* Extract `SkuSelector` component from the starter ([#1462](https://github.com/vtex/faststore/issues/1462)) ([98a68ea](https://github.com/vtex/faststore/commit/98a68ea40cd64e2880b3b4a3f75dbd355463369f))
+
+
+
 ## [1.11.18](https://github.com/vtex/faststore/compare/v1.11.17...v1.11.18) (2022-09-12)
 
 

package/dist/index.d.ts

@@ -34,6 +34,8 @@ export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
 export { default as Incentive } from './atoms/Incentive';
 export type { IncentiveProps } from './atoms/Incentive';
+export { default as SkuSelector } from './molecules/SkuSelector';
+export type { SkuSelectorProps } from './molecules/SkuSelector';
 export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
 export type { GiftProps, GiftContentProps, GiftImageProps, } from './molecules/Gift';
 export { default as ProductTitle } from './molecules/ProductTitle';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as Spinner } from './atoms/Spinner';
 export { default as Label } from './atoms/Label';
 export { default as Incentive } from './atoms/Incentive';
 // Molecules
+export { default as SkuSelector } from './molecules/SkuSelector';
 export { default as Gift, GiftContent, GiftImage } from './molecules/Gift';
 export { default as ProductTitle } from './molecules/ProductTitle';
 export { default as OrderSummary } from './molecules/OrderSummary';

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/SkuSelector/SkuSelector.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { HTMLAttributes, ChangeEventHandler } from 'react';
+interface SkuProps {
+    /**
+     * Alternative text description of the image.
+     */
+    alt?: string;
+    /**
+     * Image URL.
+     */
+    src?: string;
+    /**
+     * Label to describe the option when selected.
+     */
+    label: string;
+    /**
+     * Current value for this option.
+     */
+    value: string;
+    /**
+     * Specifies that this option should be disabled.
+     */
+    disabled?: boolean;
+}
+declare type Variant = 'label' | 'image';
+export interface SkuSelectorProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * ID of the current instance of the component.
+     */
+    id?: string;
+    /**
+     * Specify which variant the component should handle.
+     */
+    variant: Variant;
+    /**
+     * SKU options that should be rendered.
+     */
+    options: SkuProps[];
+    /**
+     * Section label for the SKU selector.
+     */
+    label?: string;
+    /**
+     * Currently active variation's value.
+     */
+    activeValue: string;
+    /**
+     * Function to be triggered when SKU option change.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+declare const SkuSelector: React.ForwardRefExoticComponent<SkuSelectorProps & React.RefAttributes<HTMLDivElement>>;
+export default SkuSelector;

package/dist/molecules/SkuSelector/SkuSelector.js

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import { Label, RadioGroup } from '../..';
+const SkuSelector = forwardRef(function SkuSelector({ id, label, variant, onChange, testId = 'store-sku-selector', activeValue, children, ...otherProps }, ref) {
+    const radioGroupId = id ? `-${id}` : '';
+    return (React.createElement("div", Object.assign({ ref: ref, "data-fs-sku-selector": true, "data-testid": testId, "data-fs-sku-selector-variant": variant }, otherProps),
+        label && (React.createElement(Label, { "data-fs-sku-selector-title": true },
+            label,
+            ": ",
+            React.createElement("strong", null, activeValue))),
+        React.createElement(RadioGroup, { selectedValue: activeValue, name: `sku-selector-${variant}${radioGroupId}`, onChange: (e) => {
+                onChange?.(e);
+            } }, children)));
+});
+export default SkuSelector;
+//# sourceMappingURL=SkuSelector.js.map

package/dist/molecules/SkuSelector/SkuSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkuSelector.js","sourceRoot":"","sources":["../../../src/molecules/SkuSelector/SkuSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA4DzC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,EAAE,EACF,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,GAAG,oBAAoB,EAC7B,WAAW,EACX,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,YAAY,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAEvC,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,+CAEK,MAAM,kCACW,OAAO,IACjC,UAAU;QAEb,KAAK,IAAI,CACR,oBAAC,KAAK;YACH,KAAK;;YAAG,oCAAS,WAAW,CAAU,CACjC,CACT;QACD,oBAAC,UAAU,IACT,aAAa,EAAE,WAAW,EAC1B,IAAI,EAAE,gBAAgB,OAAO,GAAG,YAAY,EAAE,EAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAA;YACf,CAAC,IAEA,QAAQ,CACE,CACT,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/SkuSelector/index.d.ts

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

package/dist/molecules/SkuSelector/index.js

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

package/dist/molecules/SkuSelector/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.11.18",
+  "version": "1.11.19",
   "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.11.18",
+    "@faststore/styles": "^1.11.19",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-actions": "^6.4.4",
     "@storybook/addon-docs": "^6.4.4",
@@ -85,5 +85,5 @@
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "0d01ff2f997acf54f9066d7245c521ddfdbc5bea"
+  "gitHead": "194bdc51e7bfc2c3c808345d99f6534228a741a4"
 }

package/src/index.ts

@@ -54,6 +54,9 @@ export { default as Incentive } from './atoms/Incentive'
 export type { IncentiveProps } from './atoms/Incentive'
 
 // Molecules
+export { default as SkuSelector } from './molecules/SkuSelector'
+export type { SkuSelectorProps } from './molecules/SkuSelector'
+
 export { default as Gift, GiftContent, GiftImage } from './molecules/Gift'
 export type {
   GiftProps,

package/src/molecules/SkuSelector/SkuSelector.test.tsx

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import React from 'react'
+
+import SkuSelector from './SkuSelector'
+
+const SkuSelectorTest = () => {
+  const options = [
+    { label: 'Option round', value: 'Round' },
+    { label: 'Option square', value: 'Square' },
+  ]
+
+  return <SkuSelector variant="label" options={options} activeValue="Square" />
+}
+
+describe('SkuSelector', () => {
+  describe('Data attributes', () => {
+    it('should have `data-fs-sku-selector` attribute', () => {
+      const { getByTestId } = render(<SkuSelectorTest />)
+
+      expect(getByTestId('store-sku-selector')).toHaveAttribute(
+        'data-fs-sku-selector'
+      )
+    })
+
+    it('should have `data-fs-sku-selector-variant` attribute', () => {
+      const { getByTestId } = render(<SkuSelectorTest />)
+
+      expect(getByTestId('store-sku-selector')).toHaveAttribute(
+        'data-fs-sku-selector-variant'
+      )
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have no violations', async () => {
+      const { getByTestId } = render(<SkuSelectorTest />)
+
+      expect(await axe(getByTestId('store-sku-selector'))).toHaveNoViolations()
+    })
+  })
+})

package/src/molecules/SkuSelector/SkuSelector.tsx

@@ -0,0 +1,106 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes, ChangeEventHandler } from 'react'
+import { Label, RadioGroup } from '../..'
+
+interface SkuProps {
+  /**
+   * Alternative text description of the image.
+   */
+  alt?: string
+  /**
+   * Image URL.
+   */
+  src?: string
+  /**
+   * Label to describe the option when selected.
+   */
+  label: string
+  /**
+   * Current value for this option.
+   */
+  value: string
+  /**
+   * Specifies that this option should be disabled.
+   */
+  disabled?: boolean
+}
+
+// TODO: Add the 'color' variant back once the store supports naturally handling color SKUs.
+type Variant = 'label' | 'image'
+
+export interface SkuSelectorProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * ID of the current instance of the component.
+   */
+  id?: string
+  /**
+   * Specify which variant the component should handle.
+   */
+  variant: Variant
+  /**
+   * SKU options that should be rendered.
+   */
+  options: SkuProps[]
+  /**
+   * Section label for the SKU selector.
+   */
+  label?: string
+  /**
+   * Currently active variation's value.
+   */
+  activeValue: string
+  /**
+   * Function to be triggered when SKU option change.
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>
+}
+
+const SkuSelector = forwardRef<HTMLDivElement, SkuSelectorProps>(
+  function SkuSelector(
+    {
+      id,
+      label,
+      variant,
+      onChange,
+      testId = 'store-sku-selector',
+      activeValue,
+      children,
+      ...otherProps
+    },
+    ref
+  ) {
+    const radioGroupId = id ? `-${id}` : ''
+
+    return (
+      <div
+        ref={ref}
+        data-fs-sku-selector
+        data-testid={testId}
+        data-fs-sku-selector-variant={variant}
+        {...otherProps}
+      >
+        {label && (
+          <Label data-fs-sku-selector-title>
+            {label}: <strong>{activeValue}</strong>
+          </Label>
+        )}
+        <RadioGroup
+          selectedValue={activeValue}
+          name={`sku-selector-${variant}${radioGroupId}`}
+          onChange={(e) => {
+            onChange?.(e)
+          }}
+        >
+          {children}
+        </RadioGroup>
+      </div>
+    )
+  }
+)
+
+export default SkuSelector

package/src/molecules/SkuSelector/index.tsx

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

package/src/molecules/SkuSelector/stories/SkuSelector.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
+
+import SkuSelector from '../SkuSelector'
+
+# SkuSelector
+
+<Canvas>
+  <Story id="molecules-skuselector--sku-selector" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={ SkuSelector } />
+
+## CSS Selectors
+
+```css
+[data-fs-sku-selector] {
+}
+[data-fs-sku-selector-variant='(label|image)'] {
+}
+[data-fs-sku-selector-title] {
+}
+```

package/src/molecules/SkuSelector/stories/SkuSelector.stories.tsx

@@ -0,0 +1,52 @@
+import type { Story, Meta } from '@storybook/react'
+import React from 'react'
+import { RadioOption } from '../../..'
+
+import type { SkuSelectorProps } from '../SkuSelector'
+import Component from '../SkuSelector'
+import mdx from './SkuSelector.mdx'
+
+const SkuSelectorTemplate: Story<SkuSelectorProps> = ({ testId }) => {
+  const activeValue = 'Pink'
+  const options = [
+    { label: 'Color Pink', value: 'Pink' },
+    { label: 'Color White', value: 'White' },
+  ]
+  const variant = 'label'
+
+  return (
+    <Component
+      testId={testId}
+      variant={variant}
+      options={options}
+      activeValue={activeValue}
+      label='Color'
+    >
+      {options.map((option, index) => {
+        return (
+          <RadioOption
+            data-fs-sku-selector-option
+            key={String(index)}
+            label={option.label}
+            value={option.value}
+            checked={option.value === activeValue}
+          >
+            <span>{option.value}</span>
+          </RadioOption>
+        )
+      })}
+    </Component>
+  )
+}
+
+export const SkuSelector = SkuSelectorTemplate.bind({})
+SkuSelector.storyName = 'SkuSelector'
+
+export default {
+  title: 'Molecules/SkuSelector',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta