Skip to content

Commit

Permalink
fix(exports): add remaining exports and update theme properties to fi…
Browse files Browse the repository at this point in the history
…ll in remaining non-overriden

theme values

"fix #16", "fix #18", "fix #15"
  • Loading branch information
hackrmomo committed May 9, 2023
1 parent f19fdb1 commit 068f035
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 13 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@
},
"dependencies": {
"@types/styled-components": "^5.1.26",
"styled-components": "^5.3.10"
"styled-components": "^5.3.10",
"type-fest": "^3.10.0"
},
"config": {
"commitizen": {
Expand Down
19 changes: 10 additions & 9 deletions src/components/ThemeProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { createContext } from "react";
import { ThemeProvider as StyledThemeProvider } from "styled-components";
import useDarkMode from "use-dark-mode"
import { PartialDeep } from "type-fest";
import useDarkMode from "use-dark-mode";

export type Palette = {
primary: string;
Expand All @@ -20,7 +21,7 @@ export type Theme = {
dark: Palette;
};

export const defaultTheme: Theme = {
export const defaultTheme: PartialDeep<Theme> = {
light: {
primary: "#9649E3",
secondary: "#AE8BFA",
Expand Down Expand Up @@ -51,22 +52,22 @@ export const ThemeContext = createContext(defaultTheme);

export const ThemeProvider = (props: {
children: React.ReactNode;
theme?: Theme;
theme?: PartialDeep<Theme>;
}) => {
const { children, theme: providedTheme } = props;
const darkMode = useDarkMode(false);
const theme = providedTheme ?? defaultTheme
const theme = providedTheme ?? defaultTheme;
return (
<ThemeContext.Provider value={theme}>
<StyledThemeProvider theme={ darkMode.value ? theme.dark : theme.light }>
<StyledThemeProvider theme={darkMode.value ? theme.dark : theme.light}>
{children}
</StyledThemeProvider>
</ThemeContext.Provider>
);
}
};

export const getThemeValue = (key: keyof Palette) => {
const theme = React.useContext(ThemeContext);
const theme = React.useContext(ThemeContext) ?? defaultTheme;
const darkMode = useDarkMode(false);
return darkMode.value ? theme.dark[key] : theme.light[key];
}
return darkMode.value ? theme.dark![key] : theme.light![key];
};
6 changes: 4 additions & 2 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
// MARK: Component imports

export { Button } from './components/Button';
export { TextField } from './components/TextField';
export { Button, type ButtonProps } from './components/Button';
export { TextField } from './components/TextField';
export { Text, type TextProps } from './components/Text';
export { ThemeProvider } from './components/ThemeProvider';
2 changes: 1 addition & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -10398,7 +10398,7 @@ type-fest@^2.0.0, type-fest@^2.12.2, type-fest@^2.19.0, type-fest@^2.5.0:
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==

type-fest@^3.8.0:
type-fest@^3.10.0, type-fest@^3.8.0:
version "3.10.0"
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.10.0.tgz#d75f17a22be8816aea6315ab2739fe1c0c211863"
integrity sha512-hmAPf1datm+gt3c2mvu0sJyhFy6lTkIGf0GzyaZWxRLnabQfPUqg6tF95RPg6sLxKI7nFLGdFxBcf2/7+GXI+A==
Expand Down

0 comments on commit 068f035

Please sign in to comment.