@faststore/components 2.0.49-alpha.0 → 2.0.50-alpha.0

package/dist/index.d.ts

@@ -43,6 +43,8 @@ export { default as LinkButton } from './molecules/LinkButton';
 export type { LinkButtonProps } from './molecules/LinkButton';
 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 Rating } from './molecules/Rating';
 export type { RatingProps } from './molecules/Rating';
 export { default as SelectField } from './molecules/SelectField';

package/dist/index.js

@@ -25,6 +25,7 @@ export { default as Dropdown, DropdownButton, DropdownItem, DropdownMenu, } from
 export { default as InputField } from './molecules/InputField';
 export { default as LinkButton } from './molecules/LinkButton';
 export { default as RadioField } from './molecules/RadioField';
+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":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAA;AAO7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAG1E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAA;AAO7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,WAAW,GACZ,MAAM,wBAAwB,CAAA;AAK/B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAG1E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/molecules/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+import { RadioGroupContext } from './useRadioGroup';
+export type RadioGroupProps = PropsWithChildren<RadioGroupContext>;
+declare const RadioGroup: ({ name, onChange, children, selectedValue, }: RadioGroupProps) => JSX.Element;
+export default RadioGroup;

package/dist/molecules/RadioGroup/RadioGroup.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RadioGroupContext } from './useRadioGroup';
+const RadioGroup = ({ name, onChange, children, selectedValue, }) => {
+    const contextValues = React.useMemo(() => {
+        return { name, selectedValue, onChange };
+    }, [name, selectedValue, onChange]);
+    return (React.createElement(RadioGroupContext.Provider, { value: contextValues }, children));
+};
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.js.map

package/dist/molecules/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/molecules/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAInD,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,aAAa,GACG,EAAE,EAAE;IACpB,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;IAC1C,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEnC,OAAO,CACL,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,IAC7C,QAAQ,CACkB,CAC9B,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/molecules/RadioGroup/RadioOption.d.ts

@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes } from 'react';
+import React from 'react';
+export interface RadioOptionProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * Attribute to set aria-label option as required.
+     */
+    label: string;
+    /**
+     * Value to be emitted when radio is clicked.
+     */
+    value: string | number;
+}
+declare const RadioOption: React.ForwardRefExoticComponent<RadioOptionProps & React.RefAttributes<HTMLInputElement>>;
+export default RadioOption;

package/dist/molecules/RadioGroup/RadioOption.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import Radio from '../../atoms/Radio';
+import { useRadioGroup } from './useRadioGroup';
+const RadioOption = forwardRef(function RadioOption({ label, value, children, testId = 'fs-radio-group-option', ...otherProps }, ref) {
+    const { name, selectedValue, onChange } = useRadioGroup();
+    return (React.createElement("label", { "aria-label": label, "data-fs-radio-group-option": true },
+        React.createElement(Radio, { "data-fs-radio-option-item": true, ref: ref, name: name, checked: value === selectedValue, onChange: onChange, value: value, testId: testId, ...otherProps }),
+        children));
+});
+export default RadioOption;
+//# sourceMappingURL=RadioOption.js.map

package/dist/molecules/RadioGroup/RadioOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../../../src/molecules/RadioGroup/RadioOption.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,MAAM,mBAAmB,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAmB/C,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,GAAG,uBAAuB,EAAE,GAAG,UAAU,EAAE,EAC3E,GAAG;IAEH,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAA;IAEzD,OAAO,CACL,6CAAmB,KAAK;QACtB,oBAAC,KAAK,uCAEJ,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,KAAK,aAAa,EAChC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,KACV,UAAU,GACd;QACD,QAAQ,CACH,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

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

@@ -0,0 +1,4 @@
+export { default } from './RadioGroup';
+export type { RadioGroupProps } from './RadioGroup';
+export { default as RadioOption } from './RadioOption';
+export type { RadioOptionProps } from './RadioOption';

package/dist/molecules/RadioGroup/index.js

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

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

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

package/dist/molecules/RadioGroup/useRadioGroup.d.ts

@@ -0,0 +1,17 @@
+import type { ChangeEventHandler } from 'react';
+export interface RadioGroupContext {
+    /**
+     * Name to link children by context.
+     */
+    name: string;
+    /**
+     * Value of checked child.
+     */
+    selectedValue?: string | number;
+    /**
+     * Function that is triggered when any children is checked.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContext | undefined>;
+export declare function useRadioGroup(): RadioGroupContext;

package/dist/molecules/RadioGroup/useRadioGroup.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const RadioGroupContext = createContext(undefined);
+export function useRadioGroup() {
+    const context = useContext(RadioGroupContext);
+    if (!context) {
+        throw new Error(`useRadioOption hook cannot be used outside the RadioGroup context`);
+    }
+    return context;
+}
+//# sourceMappingURL=useRadioGroup.js.map

package/dist/molecules/RadioGroup/useRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRadioGroup.js","sourceRoot":"","sources":["../../../src/molecules/RadioGroup/useRadioGroup.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAiBjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAC5C,SAAS,CACV,CAAA;AAED,MAAM,UAAU,aAAa;IAC3B,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAE7C,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,mEAAmE,CACpE,CAAA;KACF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.49-alpha.0",
+  "version": "2.0.50-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": "7046452f096b9b7e33b10db94e0213c3f10f91b5"
+  "gitHead": "ff4612f903a6be4e99df0b614a032b21ad7dc711"
 }

package/src/index.ts

@@ -68,6 +68,14 @@ export { default as LinkButton } from './molecules/LinkButton'
 export type { LinkButtonProps } from './molecules/LinkButton'
 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 Rating } from './molecules/Rating'
 export type { RatingProps } from './molecules/Rating'
 export { default as SelectField } from './molecules/SelectField'

package/src/molecules/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react'
+import React from 'react'
+
+import { RadioGroupContext } from './useRadioGroup'
+
+export type RadioGroupProps = PropsWithChildren<RadioGroupContext>
+
+const RadioGroup = ({
+  name,
+  onChange,
+  children,
+  selectedValue,
+}: RadioGroupProps) => {
+  const contextValues = React.useMemo(() => {
+    return { name, selectedValue, onChange }
+  }, [name, selectedValue, onChange])
+
+  return (
+    <RadioGroupContext.Provider value={contextValues}>
+      {children}
+    </RadioGroupContext.Provider>
+  )
+}
+
+export default RadioGroup

package/src/molecules/RadioGroup/RadioOption.tsx

@@ -0,0 +1,49 @@
+import type { InputHTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+import Radio from '../../atoms/Radio'
+import { useRadioGroup } from './useRadioGroup'
+
+export interface RadioOptionProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * Attribute to set aria-label option as required.
+   */
+  label: string
+  /**
+   * Value to be emitted when radio is clicked.
+   */
+  value: string | number
+}
+
+const RadioOption = forwardRef<HTMLInputElement, RadioOptionProps>(
+  function RadioOption(
+    { label, value, children, testId = 'fs-radio-group-option', ...otherProps },
+    ref
+  ) {
+    const { name, selectedValue, onChange } = useRadioGroup()
+
+    return (
+      <label aria-label={label} data-fs-radio-group-option>
+        <Radio
+          data-fs-radio-option-item
+          ref={ref}
+          name={name}
+          checked={value === selectedValue}
+          onChange={onChange}
+          value={value}
+          testId={testId}
+          {...otherProps}
+        />
+        {children}
+      </label>
+    )
+  }
+)
+
+export default RadioOption

package/src/molecules/RadioGroup/index.tsx

@@ -0,0 +1,5 @@
+export { default } from './RadioGroup'
+export type { RadioGroupProps } from './RadioGroup'
+
+export { default as RadioOption } from './RadioOption'
+export type { RadioOptionProps } from './RadioOption'

package/src/molecules/RadioGroup/useRadioGroup.ts

@@ -0,0 +1,33 @@
+import type { ChangeEventHandler } from 'react'
+import { createContext, useContext } from 'react'
+
+export interface RadioGroupContext {
+  /**
+   * Name to link children by context.
+   */
+  name: string
+  /**
+   * Value of checked child.
+   */
+  selectedValue?: string | number
+  /**
+   * Function that is triggered when any children is checked.
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>
+}
+
+export const RadioGroupContext = createContext<RadioGroupContext | undefined>(
+  undefined
+)
+
+export function useRadioGroup() {
+  const context = useContext(RadioGroupContext)
+
+  if (!context) {
+    throw new Error(
+      `useRadioOption hook cannot be used outside the RadioGroup context`
+    )
+  }
+
+  return context
+}