Convert all components to Hooks

[conor-cafferkey-sociomantic]

It’s time to hooks-ify all the things:

• withDropdown will be removed
• Button
• Card
• Checkbox
• ComboBox
• CurrencyInput
• DatePicker
  • DatePickerHeader
  • DatePickerItem
  • TimeInput
• DateTimeInput
• Dropdown
• Grid
• GridItem
• Icon
• IconButton
• ListBox
  • ListBoxOption
  • ListBoxOptionGroup
• Modal
• PasswordInput
• ProgressBar
• ScrollBar
• ScrollBox
• Spinner
• Tab
• TabButton
• Tabs
• Tag
• TagInput
• Text
• TextArea
• TextInput
• TextInputWithIcon
• Tooltip

For most components, this just means converting (back) to function components and using:

• useContext to consume the theme (all of the above components)
• useImperativeHandle/forwardRef to expose a focus() function (for components that are focusable; remove any props like inputRef, buttonRef, etc.)

For stateful components:

• event handler functions should be implemented using useCallback
• derived states calculated in getDerivedStateFromProps can be replaced with useMemo.

[conor-cafferkey-sociomantic]

Base branch for this issue: https://github.com/sociomantic-tsunami/nessie-ui/tree/Milestone-Hooks%21

[conor-cafferkey-sociomantic]

Hey @daniel-martic-sociomantic, @mahmoud-zakria-sociomantic: I think we should use a custom hook for consuming the theme.

I’m thinking something like this, it would be used in place of useContext :

import ThemeProvider from '.....'

function useTheme( props )
{
    const { displayName } = useTheme.caller; // `caller` is “nonstandard” JS... should we use it? 😈
    const { [ displayName ] : theme } = useContext( ThemeProvider ); // check out ma fancy destructuring!

    return props.cssMap || // cssMap prop overrides the theme, if defined
        ( typeof theme === 'function' ?  theme( props ) : theme ); // if theme is a function, call it with the current props
}

What do you think?

[conor-cafferkey-sociomantic]

Right now we have two big-ish problems:

• Enzyme’s shallow render doesn’t support hooks yet, so all our shallow tests will fail... not a whole lot we can do about this except wait for Enzyme to support Hooks 😕
• Our test driver suite for Enzyme full-DOM rendering is broken. Currently the component drivers assume that all components are classes not functions. This is fixable and I will open opened an issue.

[mahmoud-zakria-sociomantic]

Hey @daniel-martic-sociomantic, @mahmoud-zakria-sociomantic: I think we should use a custom hook for consuming the theme.

I’m thinking something like this, it would be used in place of useContext :

import ThemeProvider from '.....'

function useTheme( props )
{
    const { displayName } = useTheme.caller; // `caller` is “nonstandard” JS... should we use it? 😈
    const { [ displayName ] : theme } = useContext( ThemeProvider ); // check out ma fancy destructuring!

    return props.cssMap || // cssMap prop overrides the theme, if defined
        ( typeof theme === 'function' ?  theme( props ) : theme ); // if theme is a function, call it with the current props
}

What do you think?

@conor-cafferkey-sociomantic Why would we do it? what the problem with useContext?

[conor-cafferkey-sociomantic]

what the problem with useContext?

Absolutely no problem with useContext (this custom hook uses it!)

The problem is having to write something like this in every component is error-prone:

import { ThemeContext } from '....';
import { createCssMap } from '....';
....
const context = useContext( ThemeContext );
const {
    ....,
    cssMap = createCssMap( context.Button, props),
    ....,
} = this.props;
....

In particular, the part where we have to specify the component name (here, Button).

[conor-cafferkey-sociomantic]

And while we’re at it, we can do something similar when we generate a component id:

import { generateId } from '....';

function useId( props )
{
    const { displayName } = useId.caller; // 😈
    const id = useMemo(
        () => props.id || generateId( displayName ),
        [ props.id ], // only update the return value if `props.id` changes
    ) ;
    return id;
}