Merge pull request #130 from Wolox/feature/selector-02

feature: create selector

Author: damfinkel

cookbook-react/package-lock.json

@@ -64,23 +64,23 @@
     "@types/react-spinkit": "^3.0.6",
     "@types/seamless-immutable": "^7.1.15",
     "@types/webpack-env": "^1.16.0",
+    "@typescript-eslint/eslint-plugin": "4.14.2",
     "@typescript-eslint/parser": "4.14.2",
+    "@wolox/eslint-config": "^1.0.0",
+    "@wolox/eslint-config-react": "^1.0.0",
     "@wolox/eslint-config-typescript": "^2.0.0",
     "aws-deploy-script-fe": "^1.0.8",
     "clsx": "^1.1.1",
     "env-cmd": "^10.1.0",
-    "@wolox/eslint-config": "^1.0.0",
-    "@wolox/eslint-config-react": "^1.0.0",
     "eslint": "7.19.0",
     "eslint-import-resolver-typescript": "^2.3.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-testing-library": "^3.10.1",
     "eslint-plugin-react-hooks": "4.2.0",
-    "@typescript-eslint/eslint-plugin": "4.14.2",
+    "eslint-plugin-testing-library": "^3.10.1",
     "husky": "^4.3.8",
     "minimist": "^1.2.0",
     "msw": "^0.26.2",

cookbook-react/package.json

@@ -1,6 +1,6 @@
 {
   "thumbnail": {
     "type": "img",
-    "url": "https://raw.githubusercontent.com/Wolox/frontend-cookbook/master/cookbook-react/assets/img_react.png"
+    "url": "https://cookbook.wolox-fearmy.vercel.app/logo192.png"
   }
 }

cookbook-react/src/recipes/HOCs/Spinner/cookbook.json

@@ -0,0 +1,69 @@
+## useUniqueSelection Hook
+
+Hook with the logic to save an item identifier. Specially useful to handle radio buttons or tabs. The active/selected element can be controlled either from the parent or internally from the hook itself.
+
+**Parameters**
+
+| Variable | Type | Description |
+|:---|:---|:---:|:---|
+| onChange | (id: Id) => void | Function that will be executed when the selected id changes, returning the newly selected id |
+| active | Id (optional) | Pass this option if you want to handle the active value from the hook's caller instead of internally |
+| initialValue | Id (optional) | Pass this value if you want to have an initial selected value |
+
+**Return values**
+
+| Variable | Type | Description |
+|:---|:---|:---:|:---|
+| handleChange | (id: Id) => void | Function to pass to the selector each time it changes |
+| activeValue | Id | Current selected value |
+
+**Usage**
+
+```jsx
+// src/config/api is where we usually store this config
+import api, { setupRequestMonitor, STATUS_CODES } from './useUniqueSelection';
+
+const options = [{ id: 1, name: 'option_1' }, { id: 1, title: 'Option 1' }]
+
+// Internally managed
+function MyComponent() {
+  const onItemChange = (id: number) => console.log('Selected item: ', id);
+  const { handleChange, activeValue } = useUniqueSelection({ onChange: onItemChange, initialValue: 1 });
+  
+  return (
+    <div>
+      {options.map(option => (
+        <input 
+          type="radio" 
+          name={option.name} 
+          onChange={() => handleChange(option.id)} 
+          checked={activeValue === option.id} 
+          value={option.id} />
+      ))}
+    </div>
+  )
+}
+
+// Externanlly managed
+function MyComponent() {
+  const [active, setActive] = useState(1); 
+  const onItemChange = (id: number) => {
+    setActive(id);
+    console.log('Selected item: ', id)
+  };
+  const { handleChange, activeValue } = useUniqueSelection({ onChange: onItemChange, active: active });
+  
+  return (
+    <div>
+      {options.map(option => (
+        <input 
+          type="radio" 
+          name={option.name} 
+          onChange={() => handleChange(option.id)} 
+          checked={activeValue === option.id} 
+          value={option.id} />
+      ))}
+    </div>
+  )
+}
+```

cookbook-react/src/recipes/hooks/useUniqueSelection/README.md

@@ -0,0 +1,6 @@
+{
+  "thumbnail": {
+    "type": "img",
+    "url": "https://cookbook.wolox-fearmy.vercel.app/logo192.png"
+  }
+}

cookbook-react/src/recipes/hooks/useUniqueSelection/cookbook.json

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+export type OptionId = string | number;
+
+interface Params<Id> {
+  onChange: (id: Id) => void;
+  active?: Id;
+  initialValue?: Id;
+}
+
+const useUniqueSelection = <Id extends OptionId>({ onChange, active, initialValue }: Params<Id>) => {
+  const [internalActiveTab, setInternalActiveTab] = useState<Id | undefined>(active || initialValue);
+
+  const activeValue = active || internalActiveTab;
+
+  const handleChange = (id: Id) => {
+    if (!active) {
+      setInternalActiveTab(id);
+    }
+    onChange(id);
+  };
+
+  return { activeValue, handleChange };
+};
+
+export default useUniqueSelection;

cookbook-react/src/recipes/hooks/useUniqueSelection/index.ts

@@ -8,14 +8,18 @@ const item = { id: 'first_item', title: 'First item', subtitle: 'Small', price:
 
 describe('when the selectable item is a radio', () => {
   test('Should match snapshot', () => {
-    const { container } = render(<SelectableItem onChange={jest.fn()} selected={false} item={item} type="radio" />);
+    const { container } = render(
+      <SelectableItem onChange={jest.fn()} selected={false} item={item} type="radio" />
+    );
     expect(container).toMatchSnapshot();
   });
 });
 
 describe('when the selectable item is a checkbox', () => {
   test('Should match snapshot', () => {
-    const { container } = render(<SelectableItem onChange={jest.fn()} selected={false} item={item} type="checkbox" />);
+    const { container } = render(
+      <SelectableItem onChange={jest.fn()} selected={false} item={item} type="checkbox" />
+    );
     expect(container).toMatchSnapshot();
   });
 });

cookbook-react/src/recipes/inputs/mendoza/components/SelectableItem/index.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Selector from './index';
+
+const options = [
+  { id: 1, title: 'Opción 1', disabled: false },
+  { id: 2, title: 'Opción 2', disabled: true },
+  { id: 3, title: 'Opción 3', disabled: false }
+];
+
+describe('When tab is internally controlled', () => {
+  const handleChange = jest.fn();
+
+  beforeEach(() => {
+    render(<Selector options={options} onChange={handleChange} />);
+  });
+
+  test('it selects a tab when user clicks it and the rest is not selected', () => {
+    const tabToSelect = screen.getByText('Opción 1');
+    userEvent.click(tabToSelect);
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith(1);
+    expect(tabToSelect).toHaveClass('active');
+  });
+
+  test('can not select a disabled option', () => {
+    userEvent.click(screen.getByText('Opción 2'));
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('When tab is externally controlled', () => {
+  const handleChange = jest.fn();
+
+  beforeEach(() => {
+    render(<Selector options={options} onChange={handleChange} active={1} />);
+  });
+
+  test('clicking does not select an element', () => {
+    const currentSelectedTab = screen.getByText('Opción 1');
+    const tabToSelect = screen.getByText('Opción 3');
+    userEvent.click(tabToSelect);
+    expect(currentSelectedTab).toHaveClass('active');
+    expect(tabToSelect).not.toHaveClass('active');
+  });
+
+  test('can not select a disabled option', () => {
+    userEvent.click(screen.getByText('Opción 2'));
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('When the tab has initial value and it is internally controlled', () => {
+  test('starts with the initial value selected', () => {
+    render(<Selector options={options} onChange={jest.fn()} initialValue={3} />);
+    const tab = screen.getByText('Opción 3');
+    expect(tab).toHaveClass('active');
+  });
+});

cookbook-react/src/recipes/inputs/santiago/Selector/index.test.tsx

@@ -0,0 +1,81 @@
+import React, { Fragment } from 'react';
+import cn from 'classnames';
+
+import useUniqueSelection, { OptionId } from '../../../hooks/useUniqueSelection';
+
+import styles from './styles.module.scss';
+
+interface Option<Id extends OptionId> {
+  title: string;
+  disabled?: boolean;
+  id: Id;
+}
+
+interface Props<Id extends OptionId> {
+  options: Option<Id>[];
+  onChange: (id: Id) => void;
+  className?: string;
+}
+
+interface InternallyControlledProps<Id extends OptionId> extends Props<Id> {
+  active?: never;
+  initialValue?: Id;
+}
+
+interface ExternallyControlledProps<Id extends OptionId> extends Props<Id> {
+  // Optional value to allow external change of tab. If empty, the component sets the clicked
+  // tab as the active one.
+  active: Id;
+  initialValue?: never;
+}
+
+function Selector<Id extends OptionId>({
+  className = '',
+  active,
+  onChange,
+  options,
+  initialValue
+}: InternallyControlledProps<Id> | ExternallyControlledProps<Id>) {
+  const { activeValue, handleChange } = useUniqueSelection({ onChange, active, initialValue });
+
+  const nextValueIsSelected = (index: number) =>
+    options.length > index + 1 && options[index + 1].id === activeValue;
+
+  return (
+    <div className={cn(styles.optionsContainer, className)}>
+      {options?.map((option, index) => (
+        <Fragment key={`${option.id}`}>
+          <label
+            htmlFor={`option-${option.id}`}
+            key={option.id}
+            className={cn(styles.optionLabel, {
+              [styles.disabled]: option.disabled,
+              [styles.active]: option.id === activeValue
+            })}
+          >
+            <input
+              type="radio"
+              id={`option-${option.id}`}
+              name="option"
+              checked={activeValue === option.id}
+              className={styles.option}
+              disabled={option.disabled}
+              value={option.id}
+              onChange={() => handleChange(option.id)}
+            />
+            {option.title}
+          </label>
+          {index < options.length - 1 && (
+            <div
+              className={cn(styles.separator, {
+                [styles.active]: nextValueIsSelected(index)
+              })}
+            />
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+export default Selector;

cookbook-react/src/recipes/inputs/santiago/Selector/index.tsx

@@ -0,0 +1,71 @@
+$unselected-color: #E1E1E1;
+$text-color: #000;
+$selected-color: #003DD5;
+$btn-height: 45px;
+$options: 3;
+$btn-width: (100 / $options) * 1%;
+
+$transition-time: 0.25s;
+
+.options-container {
+  display: flex;
+}
+
+.separator {
+  background-color: $unselected-color;
+  min-height: 100%;
+  min-width: 3px;
+  transition: background-color $transition-time ease;
+
+  &.active {
+    background-color: $selected-color;
+  }
+}
+
+.option-label {
+  align-items: center;
+  border-top: 3px solid $unselected-color;
+  border-bottom: 3px solid $unselected-color;
+  color: $text-color;
+  cursor: pointer;
+  display: flex;
+  font-weight: 500;
+  height: $btn-height;
+  justify-content: center;
+  min-width: 100px;
+  transition: border-color $transition-time ease, color $transition-time ease;
+  width: $btn-width;
+
+  &:first-child {
+    border-left: 3px solid $unselected-color;
+    border-radius: 5px 0 0 5px;
+  }
+
+  &:last-child {
+    border-right: 3px solid $unselected-color;
+    border-radius: 0 5px 5px 0;
+  }
+
+  &:only-child {
+    border-radius: 5px;
+  }
+
+  &.disabled {
+    color: $unselected-color;
+    font-weight: 600;
+  }
+
+  &.active {
+    border-color: $selected-color;
+    color: $selected-color;
+    font-weight: 600;
+  }
+
+  &.active + .separator {
+    background-color: $selected-color;
+  }
+}
+
+.option {
+  display: none;
+}