Enhance useTheme to provide default theme without ThemeProvider

[yujonglee]

Description

In Short: Providing default theme using withTheme, default value, etc... often fails. This PR solve this problem by enhancing useTheme in dooboo-ui. Now, useTheme will at least return default theme(light) even if there aren't ThemeProvider exists.

---

Providing theme is complicated task. And providing default theme is harder.

dooboo-ui aims to provide default theme even if user forget to wrap componets with ThemeProvider.

Currently, theme providing is done by this.

const ButtonComponent: FC<ButtonProps & {theme: DoobooTheme}> = ({})

export const Button = withTheme(ButtonComponent);

and providing default theme(when ThemeProvider is not provided) is done by this.

// Sol 1
ButtonComponent.defaultProps = {theme: defaultTheme};

// Sol 2
const {theme = defaultTheme} = props

However, default theme is not applied as I mentioned in #104.

It is because withTheme from emotion provides { } when there aren't any theme to provide. So props.theme is never undefined, resulting our defaultTheme never applied. See this line of emotion implementation.

So, I made a workaround in #86 using isEmptyObject.

---

But it is just a workaround. It should be much easier and effortless to do it.
So I re-write useTheme and provide light to be default theme.

Now, there's no need to have theme prop, withTheme HOC, and default value. All you need to do to get current theme is calling useTheme. This will reduce confusion a lot.

In this PR, I refactor only SwitchToggle using new useTheme.

Test Plan

none.

Related Issues

#104

Tests

none.

Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• Run yarn test or yarn test -u if you need to update snapshot.
• Run yarn lint
• I am willing to follow-up on review comments in a timely manner.

[yujonglee]

I'll solve build error and open it again.

[hyochan]

You may remove prefix Style when it is grouped under Styles.

[yujonglee]

Ok. I'll remove it in other PR. (because it is not related to this PR.)

[codecov]

Codecov Report

Merging #105 (c9f1cc7) into master (0d8318d) will decrease coverage by 0.03%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master     #105      +/-   ##
==========================================
- Coverage   95.53%   95.50%   -0.04%     
==========================================
  Files          23       22       -1     
  Lines         582      578       -4     
  Branches      267      265       -2     
==========================================
- Hits          556      552       -4     
  Misses         26       26              

[hyochan]

This is very clever~! However, I am worried that many devs will be curious that useTheme works without a Provider because usually context wasn't provided like that 🤔

I hope there is more thing related to this to read about.

[yujonglee]

@hyochan Ok. I will write about it soon.

[hyochan]

Although I am curious about providing default context value, I think this PR is still great to have.

[yujonglee]

@hyochan Maybe this helps about providing default context value.

<Provider
  value={{
    media,
    themeType,
    changeThemeType,
    theme,
    colors,
  }}>
  <OriginalThemeProvider theme={{...theme, ...media}}>
    {children}
  </OriginalThemeProvider>
</Provider>

It will be best if we can give default context value to OriginalThemeProvider(by emotion), but currently there's no way to do that.(As I know). So we can just give default context value to our own Provider.

Therefore, default theme can be only accessed with our own useTheme, not useTheme, withTheme, props in styled by emotion.