Unverified Commit c9f30128 authored by Tasso Evangelista's avatar Tasso Evangelista Committed by GitHub
Browse files

refactor!: Remove unused components (#206)

* Remove Size modifier

* Remove Level component

* Add NumberInput

* Remove useClassName hook

* Remove some obsolete files

* Remove Paragraph component

* Remove dangling unit test
parent 19cc1dfc
......@@ -29,30 +29,28 @@ yarn test
- [useAutoFocus](#useautofocus)
- [Parameters](#parameters)
- [useClassName](#useclassname)
- [Parameters](#parameters-1)
- [useDebouncedUpdates](#usedebouncedupdates)
- [Parameters](#parameters-2)
- [Parameters](#parameters-1)
- [useDebouncedReducer](#usedebouncedreducer)
- [Parameters](#parameters-3)
- [Parameters](#parameters-2)
- [useDebouncedState](#usedebouncedstate)
- [Parameters](#parameters-4)
- [Parameters](#parameters-3)
- [useDebouncedCallback](#usedebouncedcallback)
- [Parameters](#parameters-5)
- [Parameters](#parameters-4)
- [useDebouncedValue](#usedebouncedvalue)
- [Parameters](#parameters-6)
- [Parameters](#parameters-5)
- [useLazyRef](#uselazyref)
- [Parameters](#parameters-7)
- [Parameters](#parameters-6)
- [useMediaQuery](#usemediaquery)
- [Parameters](#parameters-8)
- [Parameters](#parameters-7)
- [useMergedRefs](#usemergedrefs)
- [Parameters](#parameters-9)
- [Parameters](#parameters-8)
- [useMutableCallback](#usemutablecallback)
- [Parameters](#parameters-10)
- [Parameters](#parameters-9)
- [useSafely](#usesafely)
- [Parameters](#parameters-11)
- [Parameters](#parameters-10)
- [useToggle](#usetoggle)
- [Parameters](#parameters-12)
- [Parameters](#parameters-11)
### useAutoFocus
......@@ -65,19 +63,6 @@ Hook to automatically request focus for an DOM element.
Returns **any** the ref which holds the element
### useClassName
Hook to generate a BEM-compatible `className` value for a component.
#### Parameters
- `componentClassName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the style class which identifies the component
- `modifiers` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the modifiers applied to the style class (optional, default `{}`)
- `classNames` **...[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>** the additional style classes appended to the `className`
Returns **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** a BEM-compatible `className` in the format
`(<block>|<block>__<element>) [...(<block>--<modifier>|<block>__<element>--<modifier>)] [...classNames]`
### useDebouncedUpdates
Hook to debounce the state updater function returned by hooks like `useState()` and `useReducer()`.
......
// @flow
export const fromCamelToKebabCase = (camelCaseString: string) =>
camelCaseString.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
export const debounce = (fn: (...Array<any>) => any, delay: number) => {
let timer;
let callback;
......
// @flow
export * from './useAutoFocus';
export * from './useClassName';
export * from './useDebouncedUpdates';
export * from './useDebouncedCallback';
export * from './useDebouncedValue';
......
// @flow
import { useMemo } from 'react';
import { fromCamelToKebabCase } from './helpers';
/**
* Hook to generate a BEM-compatible `className` value for a component.
*
* @param componentClassName - the style class which identifies the component
* @param modifiers - the modifiers applied to the style class
* @param classNames - the additional style classes appended to the `className`
* @return a BEM-compatible `className` in the format
* `(<block>|<block>__<element>) [...(<block>--<modifier>|<block>__<element>--<modifier>)] [...classNames]`
*/
export const useClassName = (
componentClassName : string,
modifiers: Object = {},
...classNames: Array<string>
): string =>
useMemo(
() => [
componentClassName,
...Object.entries(modifiers)
.filter(([, value]) => !!value)
.map(([key, value]) => (typeof value === 'boolean'
? `${ componentClassName }--${ fromCamelToKebabCase(key) }`
: `${ componentClassName }--${ fromCamelToKebabCase(key) }-${ fromCamelToKebabCase(String(value)) }`)),
...classNames,
].filter(Boolean).join(' '),
[
componentClassName,
Object.entries(modifiers).reduce((deps, [name, value]) => [...deps, name, value], []),
JSON.stringify(classNames),
],
);
/**
* @jest-environment node
*/
import { runHooksOnServer } from '../.jest/helpers';
import { useClassName } from '../src';
describe('useClassName hook on server', () => {
const componentClassName = 'component';
it('accepts only the component className', () => {
const newClassName = runHooksOnServer(() => useClassName(componentClassName));
expect(newClassName).toEqual(componentClassName);
});
it('composes with a true-valued boolean modifier', () => {
const newClassName = runHooksOnServer(() => useClassName(componentClassName, { a: true }));
expect(newClassName).toEqual(`${ componentClassName } ${ componentClassName }--a`);
});
it('does not compose with a false-valued boolean modifier', () => {
const newClassName = runHooksOnServer(() => useClassName(componentClassName, { a: false }));
expect(newClassName).toEqual(componentClassName);
});
it('composes with a non-boolean modifier', () => {
const newClassName = runHooksOnServer(() => useClassName(componentClassName, { a: 'b' }));
expect(newClassName).toEqual(`${ componentClassName } ${ componentClassName }--a-b`);
});
it('appends an arbitrary amount of additional classNames', () => {
const classNames = new Array(5).fill(undefined).map((i) => `class-${ i }`);
const newClassName = runHooksOnServer(() => useClassName(componentClassName, {}, ...classNames));
expect(newClassName).toEqual(`${ componentClassName } ${ classNames.join(' ') }`);
});
it('formats a modifier name from camelCase to kebab-case', () => {
const newClassName = runHooksOnServer(() => useClassName(componentClassName, { camelCaseModifier: true }));
expect(newClassName).toEqual(`${ componentClassName } ${ componentClassName }--camel-case-modifier`);
});
it('formats a modifier value from camelCase to kebab-case', () => {
const newClassName = runHooksOnServer(() => useClassName(componentClassName, { a: 'camelCaseValue' }));
expect(newClassName).toEqual(`${ componentClassName } ${ componentClassName }--a-camel-case-value`);
});
});
import { runHooks } from '../.jest/helpers';
import { useClassName } from '../src';
describe('useClassName hook', () => {
const componentClassName = 'component';
it('accepts only the component className', () => {
const [newClassName] = runHooks(() => useClassName(componentClassName));
expect(newClassName).toEqual(componentClassName);
});
it('composes with a true-valued boolean modifier', () => {
const [newClassName] = runHooks(() => useClassName(componentClassName, { a: true }));
expect(newClassName).toEqual(`${ componentClassName } ${ componentClassName }--a`);
});
it('does not compose with a false-valued boolean modifier', () => {
const [newClassName] = runHooks(() => useClassName(componentClassName, { a: false }));
expect(newClassName).toEqual(componentClassName);
});
it('composes with a non-boolean modifier', () => {
const [newClassName] = runHooks(() => useClassName(componentClassName, { a: 'b' }));
expect(newClassName).toEqual(`${ componentClassName } ${ componentClassName }--a-b`);
});
it('appends an arbitrary amount of additional classNames', () => {
const classNames = new Array(5).fill(undefined).map((i) => `class-${ i }`);
const [newClassName] = runHooks(() => useClassName(componentClassName, {}, ...classNames));
expect(newClassName).toEqual(`${ componentClassName } ${ classNames.join(' ') }`);
});
it('formats a modifier name from camelCase to kebab-case', () => {
const [newClassName] = runHooks(() => useClassName(componentClassName, { camelCaseModifier: true }));
expect(newClassName).toEqual(`${ componentClassName } ${ componentClassName }--camel-case-modifier`);
});
it('formats a modifier value from camelCase to kebab-case', () => {
const [newClassName] = runHooks(() => useClassName(componentClassName, { a: 'camelCaseValue' }));
expect(newClassName).toEqual(`${ componentClassName } ${ componentClassName }--a-camel-case-value`);
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment