@faststore/components 2.0.3-alpha.0 → 2.0.4-alpha.0

package/package.json

@@ -1,8 +1,32 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.3-alpha.0",
-  "main": "index.js",
+  "version": "2.0.4-alpha.0",
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
   "license": "MIT",
-  "gitHead": "6743690f41d38a7f6a1060f541775c8a6f82e2f5"
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc",
+    "lint": "eslint src/**/*.{ts,tsx}"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vtex/faststore",
+    "directory": "packages/components"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "@faststore/shared": "^2.0.3-alpha.0",
+    "typescript": "^4.8.4"
+  },
+  "volta": {
+    "node": "16.18.0",
+    "yarn": "1.19.1"
+  },
+  "gitHead": "e15f55dc806232292a13e286bf91fe527fcc3a32"
 }

package/src/assets/ShoppingCart.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const ShoppingCart: FC = () => (
+  <svg
+    id="ShoppingCart"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={24}
+    height={24}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <path
+      d="M184,184H69.81818L41.92162,30.56892A8,8,0,0,0,34.05066,24H16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></path>
+    <circle
+      cx="80"
+      cy="204"
+      r="20"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></circle>
+    <circle
+      cx="184"
+      cy="204"
+      r="20"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></circle>
+    <path
+      d="M62.54543,144H188.10132a16,16,0,0,0,15.74192-13.13783L216,64H48"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></path>
+  </svg>
+)
+
+export default ShoppingCart

package/src/assets/X.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// Icon from Phosphor Icons
+const X: FC = () => (
+  <svg
+    id="X"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={24}
+    height={24}
+  >
+    <rect width="256" height="256" fill="none"></rect>
+    <line
+      x1="200"
+      y1="56"
+      x2="56"
+      y2="200"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+    <line
+      x1="200"
+      y1="200"
+      x2="56"
+      y2="56"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></line>
+  </svg>
+)
+
+export default X

package/src/assets/index.ts

@@ -0,0 +1,2 @@
+export { default as X } from './X'
+export { default as ShoppingCart } from './ShoppingCart'

package/src/atoms/Badge/Badge.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode, HTMLAttributes, AriaAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export type BadgeVariants =
+  | 'info'
+  | 'highlighted'
+  | 'success'
+  | 'neutral'
+  | 'warning'
+  | 'danger'
+
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Sets the component's size.
+   */
+  size?: 'small' | 'big'
+  /**
+   * Specifies the component variant.
+   */
+  variant?: BadgeVariants
+  /**
+   * Enables counter badge.
+   */
+  counter?: boolean
+  /**
+   * For accessibility purposes, adds an ARIA label to the element when `counter` is set to `true`.
+   */
+  'aria-label'?: AriaAttributes['aria-label']
+  children?: ReactNode
+}
+
+const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
+  {
+    testId = 'fs-badge',
+    size = 'small',
+    variant = 'neutral',
+    counter = false,
+    'aria-label': ariaLabel,
+    children,
+    ...otherProps
+  }: BadgeProps,
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      data-fs-badge
+      data-testid={testId}
+      aria-label={ariaLabel}
+      data-fs-badge-variant={counter ? null : variant}
+      data-fs-badge-size={size}
+      data-fs-badge-counter={counter}
+      {...otherProps}
+    >
+      <div data-fs-badge-wrapper>{children}</div>
+    </div>
+  )
+})
+
+export default Badge

package/src/atoms/Badge/index.ts

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

package/src/atoms/Button/Button.tsx

@@ -0,0 +1,72 @@
+import type { ReactNode, ButtonHTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+import { Icon } from '../../index'
+
+export type Variant = 'primary' | 'secondary' | 'tertiary'
+export type Size = 'small' | 'regular'
+export type IconPosition = 'left' | 'right'
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Specifies the component color variant.
+   */
+  variant?: Variant
+  /**
+   * Specifies the size variant.
+   */
+  size?: Size
+  /**
+   * Defines the use of inverted colors.
+   */
+  inverse?: boolean
+  /**
+   * Specifies that this button should be disabled
+   */
+  disabled?: boolean
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon?: ReactNode
+  /**
+   * Specifies where the icon should be positioned
+   */
+  iconPosition?: IconPosition
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    children,
+    variant,
+    inverse,
+    size = 'regular',
+    testId = 'fs-button',
+    icon,
+    iconPosition = 'left',
+    disabled,
+    ...otherProps
+  },
+  ref
+) {
+  return (
+    <button
+      ref={ref}
+      data-testid={testId}
+      data-fs-button
+      data-fs-button-inverse={inverse}
+      data-fs-button-size={size}
+      data-fs-button-variant={variant}
+      disabled={disabled}
+      {...otherProps}
+    >
+      {icon && iconPosition === 'left' && <Icon component={icon} />}
+      {children}
+      {icon && iconPosition === 'right' && <Icon component={icon} />}
+    </button>
+  )
+})
+
+export default Button

package/src/atoms/Button/index.ts

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

package/src/atoms/Checkbox/Checkbox.tsx

@@ -0,0 +1,32 @@
+import type { InputHTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Boolean that represents a partial state.
+   */
+  partial?: boolean
+}
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  { testId = 'fs-checkbox', partial, ...otherProps }: CheckboxProps,
+  ref
+) {
+  return (
+    <input
+      ref={ref}
+      data-fs-checkbox
+      data-testid={testId}
+      data-fs-checkbox-partial={partial}
+      type="checkbox"
+      {...otherProps}
+    />
+  )
+})
+
+export default Checkbox

package/src/atoms/Checkbox/index.ts

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

package/src/atoms/Icon/Icon.tsx

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  component: ReactNode
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Icon = forwardRef<HTMLSpanElement, IconProps>(function Button(
+  { component, testId = 'fs-icon', ...otherProps }: IconProps,
+  ref
+) {
+  return (
+    <span ref={ref} data-fs-icon data-testid={testId} {...otherProps}>
+      {component}
+    </span>
+  )
+})
+
+export default Icon

package/src/atoms/Icon/index.ts

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

package/src/atoms/Label/Label.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react'
+import type { LabelHTMLAttributes } from 'react'
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  { testId = 'fs-label', children, ...otherProps }: LabelProps,
+  ref
+) {
+  return (
+    <label ref={ref} data-fs-label data-testid={testId} {...otherProps}>
+      {children}
+    </label>
+  )
+})
+
+export default Label

package/src/atoms/Label/index.ts

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

package/src/atoms/Radio/Radio.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react'
+import type { InputHTMLAttributes } from 'react'
+
+export interface RadioProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
+  { testId = 'fs-radio', ...otherProps }: RadioProps,
+  ref
+) {
+  return (
+    <input
+      ref={ref}
+      data-fs-radio
+      data-testid={testId}
+      type="radio"
+      {...otherProps}
+    />
+  )
+})
+
+export default Radio

package/src/atoms/Radio/index.ts

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

package/src/index.ts

@@ -0,0 +1,23 @@
+// Atoms
+export { default as Badge } from './atoms/Badge'
+export type { BadgeProps } from './atoms/Badge'
+export { default as Button } from './atoms/Button'
+export type { ButtonProps } from './atoms/Button'
+export { default as Checkbox } from './atoms/Checkbox'
+export type { CheckboxProps } from './atoms/Checkbox'
+export { default as Icon } from './atoms/Icon'
+export type { IconProps } from './atoms/Icon'
+export { default as Label } from './atoms/Label'
+export type { LabelProps } from './atoms/Label'
+export { default as Radio } from './atoms/Radio'
+export type { RadioProps } from './atoms/Radio'
+
+// Molecules
+export { default as CheckboxField } from './molecules/CheckboxField'
+export type { CheckboxFieldProps } from './molecules/CheckboxField'
+export { default as IconButton } from './molecules/IconButton'
+export type { IconButtonProps } from './molecules/IconButton'
+export { default as RadioField } from './molecules/RadioField'
+export type { RadioFieldProps } from './molecules/RadioField'
+export { default as Tag } from './molecules/Tag'
+export type { TagProps } from './molecules/Tag'

package/src/molecules/CheckboxField/CheckboxField.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react'
+import Checkbox from '../../atoms/Checkbox'
+import Label from '../../atoms/Label'
+
+export type CheckboxFieldProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * ID to identify input and corresponding label.
+   */
+  id: string
+  /**
+   * The text displayed to identify the input checkbox.
+   */
+  label: string
+  /**
+   * The value to identify the input checkbox.
+   */
+  value?: string
+  /**
+   * Identify checkbox in the same group.
+   */
+  name?: string
+}
+
+const CheckboxField = forwardRef<HTMLDivElement, CheckboxFieldProps>(
+  function CheckboxField(
+    { testId = 'fs-checkbox-field', id, label, value, name, ...otherProps },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-checkbox-field data-testid={testId}>
+        <Checkbox id={id} value={value ?? label} name={name} {...otherProps} />
+        <Label htmlFor={id}>{label}</Label>
+      </div>
+    )
+  }
+)
+
+export default CheckboxField

package/src/molecules/CheckboxField/index.ts

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

package/src/molecules/IconButton/IconButton.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode, AriaAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+import { Icon, Button } from '../../index'
+import type { ButtonProps } from '../../index'
+
+export interface IconButtonProps extends Omit<ButtonProps, 'aria-label'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon: ReactNode
+  /**
+   * A Label should be provided.
+   */
+  'aria-label': AriaAttributes['aria-label']
+}
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(
+    {
+      icon,
+      children,
+      testId = 'fs-icon-button',
+      'aria-label': ariaLabel,
+      variant,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <Button
+        ref={ref}
+        data-fs-button
+        data-fs-icon-button
+        testId={testId}
+        variant={variant ?? 'tertiary'}
+        aria-label={ariaLabel}
+        {...otherProps}
+      >
+        {children}
+        <Icon component={icon} />
+      </Button>
+    )
+  }
+)
+
+export default IconButton

package/src/molecules/IconButton/index.ts

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

package/src/molecules/RadioField/RadioField.tsx

@@ -0,0 +1,42 @@
+import Label from '../../atoms/Label'
+import Radio from '../../atoms/Radio'
+import React, { forwardRef } from 'react'
+
+export type RadioFieldProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * ID to identify input and corresponding label.
+   */
+  id: string
+  /**
+   * The text displayed to identify the input radio.
+   */
+  label: string
+  /**
+   * The value to identify the input radio.
+   */
+  value?: string
+  /**
+   * Identify radio in the same group.
+   */
+  name?: string
+}
+
+const RadioField = forwardRef<HTMLDivElement, RadioFieldProps>(
+  function RadioField(
+    { testId = 'fs-radio-field', id, label, value, name, ...otherProps },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-radio-field data-testid={testId}>
+        <Radio id={id} value={value ?? label} name={name} {...otherProps} />
+        <Label htmlFor={id}>{label}</Label>
+      </div>
+    )
+  }
+)
+
+export default RadioField

package/src/molecules/RadioField/index.ts

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

package/src/molecules/Tag/Tag.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react'
+import type { ReactNode } from 'react'
+import { Icon } from '../..'
+import { Badge, BadgeProps } from '../..'
+import { X } from '../../assets'
+
+export interface TagProps extends BadgeProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * The text displayed inside the tag.
+   */
+  label: string
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon?: ReactNode
+  /**
+   * For accessibility purposes, provide an ARIA label to the Icon button
+   */
+  iconButtonLabel?: string
+  /**
+   * Function called when Icon button is clicked.
+   */
+  onClose: () => void
+}
+
+const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(
+  { testId = 'fs-tag', label, icon, iconButtonLabel, onClose, ...otherProps },
+  ref
+) {
+  return (
+    <Badge
+      ref={ref}
+      data-fs-tag
+      data-testid={testId}
+      size="big"
+      {...otherProps}
+    >
+      <span data-fs-tag-label>{label}</span>
+      <button
+        data-fs-tag-icon-button
+        aria-label={iconButtonLabel ? iconButtonLabel : 'remove'}
+        onClick={onClose}
+      >
+        <Icon component={icon ? icon : <X />} />
+      </button>
+    </Badge>
+  )
+})
+
+export default Tag

package/src/molecules/Tag/index.ts

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