Skip to content

Commit 7d94d32

Browse files
Marcus-RiseMarcus-Rise
authored
feat: context (#4)
1 parent 5ceb3d9 commit 7d94d32

29 files changed

Lines changed: 586 additions & 140 deletions

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"private": true,
3-
"name": "@marcus-rise/react-theme",
43
"workspaces": [
54
"packages/*"
65
],

‎packages/docs/src/components/theme.component.tsx‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import styled, {ThemeProvider} from "styled-components";
2-
import {FC, useMemo} from "react";
3-
import {ThemePreferencesEnum, useTheme} from "@marcus-rise/react-theme";
4-
import {darkTheme, defaultTheme, GlobalStyles} from "../styles";
1+
import styled, { ThemeProvider } from "styled-components";
2+
import { FC, useMemo } from "react";
3+
import { darkTheme, defaultTheme, GlobalStyles } from "../styles";
4+
import { ThemePreference, useTheme } from "@marcus-rise/react-theme";
55

66
const ThemeToggle = styled.button`
7-
background-color: ${({theme}) => theme.primary};
7+
background-color: ${({ theme }) => theme.primary};
88
border: none;
99
border-radius: 100%;
1010
font-size: 1rem;
@@ -15,31 +15,31 @@ const ThemeToggle = styled.button`
1515
justify-content: center;
1616
align-items: center;
1717
box-sizing: border-box;
18-
color: ${({theme}) => theme.lightest};
18+
color: ${({ theme }) => theme.lightest};
1919
2020
&:hover {
2121
cursor: pointer;
2222
}
2323
`;
2424

2525
const Theme: FC = () => {
26-
const {isDarkTheme, preferences, toggleTheme} = useTheme("APP_THEME");
26+
const { isDarkTheme, preferences, toggleTheme } = useTheme();
2727

28-
const {icon, title} = useMemo(() => {
28+
const { icon, title } = useMemo(() => {
2929
let meta: { icon: string; title: string };
3030

3131
switch (preferences) {
32-
case ThemePreferencesEnum.LIGHT: {
33-
meta = {title: "Light", icon: "☀︎"};
32+
case ThemePreference.LIGHT: {
33+
meta = { title: "Light", icon: "☀︎" };
3434
break;
3535
}
36-
case ThemePreferencesEnum.DARK: {
37-
meta = {title: "Dark", icon: "☾"};
36+
case ThemePreference.DARK: {
37+
meta = { title: "Dark", icon: "☾" };
3838
break;
3939
}
40-
case ThemePreferencesEnum.SYSTEM:
40+
case ThemePreference.SYSTEM:
4141
default: {
42-
meta = {title: "System", icon: "⌽"};
42+
meta = { title: "System", icon: "⌽" };
4343
break;
4444
}
4545
}
@@ -50,15 +50,13 @@ const Theme: FC = () => {
5050
const currentTheme = useMemo(() => (isDarkTheme ? darkTheme : defaultTheme), [isDarkTheme]);
5151

5252
return (
53-
<>
54-
<ThemeProvider theme={currentTheme}>
55-
<GlobalStyles/>
56-
<ThemeToggle onClick={toggleTheme} title={title}>
57-
{icon}
58-
</ThemeToggle>
59-
</ThemeProvider>
60-
</>
53+
<ThemeProvider theme={currentTheme}>
54+
<GlobalStyles />
55+
<ThemeToggle onClick={toggleTheme} title={title}>
56+
{icon}
57+
</ThemeToggle>
58+
</ThemeProvider>
6159
);
6260
};
6361

64-
export {Theme};
62+
export { Theme };

‎packages/docs/src/components/theme.stories.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
1-
import type {ComponentMeta, ComponentStory} from "@storybook/react";
2-
import {Theme} from "./theme.component";
1+
import type { ComponentMeta, ComponentStory } from "@storybook/react";
2+
import { Theme } from "./theme.component";
3+
import { ThemeProvider } from "@marcus-rise/react-theme";
34

45
const Config: ComponentMeta<typeof Theme> = {
56
title: "components/Theme",
67
component: Theme,
8+
decorators: [
9+
(Story) => (
10+
<ThemeProvider preferencesStorageKey={"OPTIONAL_APP_THEME_STORAGE_KEY"}>
11+
<Story />
12+
</ThemeProvider>
13+
),
14+
],
715
};
816

917
const Template: ComponentStory<typeof Theme> = (args) => <Theme {...args} />;
1018

1119
const Default = Template.bind({});
1220

1321
export default Config;
14-
export {Default};
22+
export { Default };

‎packages/theme/.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist/
2+
node_modules/

‎packages/theme/.eslintrc.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"root": true,
3+
"parser": "@typescript-eslint/parser",
4+
"plugins": [
5+
"@typescript-eslint",
6+
"prettier"
7+
],
8+
"extends": [
9+
"eslint:recommended",
10+
"plugin:@typescript-eslint/recommended",
11+
"plugin:react/recommended",
12+
"plugin:react/jsx-runtime",
13+
"prettier"
14+
],
15+
"rules": {
16+
"@typescript-eslint/consistent-type-imports": "error",
17+
"object-shorthand": "error",
18+
"prettier/prettier": [
19+
"error"
20+
],
21+
"react/react-in-jsx-scope": "off"
22+
},
23+
"settings": {
24+
"react": {
25+
"version": "detect"
26+
// React version. "detect" automatically picks the version you have installed.
27+
// You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
28+
// It will default to "latest" and warn if missing, and to "detect" in the future
29+
}
30+
}
31+
}

‎packages/theme/.prettierrc.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"semi": true,
3+
"trailingComma": "all",
4+
"singleQuote": false,
5+
"printWidth": 100,
6+
"tabWidth": 2
7+
}

‎packages/theme/.storybook/main.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
"stories": [
3+
"../src/**/*.stories.mdx",
4+
"../src/**/*.stories.@(js|jsx|ts|tsx)"
5+
],
6+
"addons": [
7+
"@storybook/addon-links",
8+
"@storybook/addon-essentials",
9+
"@storybook/addon-interactions"
10+
],
11+
"framework": "@storybook/react"
12+
}

‎packages/theme/.storybook/preview.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const parameters = {
2+
actions: { argTypesRegex: "^on[A-Z].*" },
3+
controls: {
4+
matchers: {
5+
color: /(background|color)$/i,
6+
date: /Date$/,
7+
},
8+
},
9+
}

‎packages/theme/package.json‎

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,18 @@
1111
"publishConfig": {
1212
"access": "public"
1313
},
14-
"main": "dist/index.js",
14+
"main": "dist/cjs/index.js",
15+
"module": "dist/esm/index.js",
1516
"typings": "dist/index.d.ts",
1617
"scripts": {
17-
"build": "tsc",
18+
"lint": "eslint .",
19+
"rollup": "rollup --config rollup.config.ts --configPlugin typescript",
20+
"build": "yarn rollup",
21+
"prebuild": "rimraf dist",
1822
"dev": "yarn build --watch",
19-
"prepublishOnly": "yarn build"
23+
"prepublishOnly": "yarn build",
24+
"storybook": "start-storybook -p 6006",
25+
"build-storybook": "build-storybook"
2026
},
2127
"files": [
2228
"dist/"
@@ -36,10 +42,37 @@
3642
"hook"
3743
],
3844
"devDependencies": {
39-
"@types/react": "^16",
45+
"@babel/core": "^7.18.9",
46+
"@rbnlffl/rollup-plugin-eslint": "^3.0.0",
47+
"@rollup/plugin-commonjs": "^22.0.1",
48+
"@rollup/plugin-node-resolve": "^13.3.0",
49+
"@rollup/plugin-typescript": "^8.3.3",
50+
"@storybook/addon-actions": "^6.5.9",
51+
"@storybook/addon-essentials": "^6.5.9",
52+
"@storybook/addon-interactions": "^6.5.9",
53+
"@storybook/addon-links": "^6.5.9",
54+
"@storybook/builder-webpack4": "^6.5.9",
55+
"@storybook/manager-webpack4": "^6.5.9",
56+
"@storybook/react": "^6.5.9",
57+
"@storybook/testing-library": "^0.0.13",
58+
"@types/react": "^17.0.47",
59+
"@typescript-eslint/eslint-plugin": "^5.30.7",
60+
"@typescript-eslint/parser": "^5.30.7",
61+
"babel-loader": "^8.2.5",
62+
"eslint": "^8.20.0",
63+
"eslint-config-prettier": "^8.5.0",
64+
"eslint-plugin-prettier": "^4.2.1",
65+
"eslint-plugin-react": "^7.30.1",
66+
"eslint-plugin-storybook": "^0.6.1",
67+
"prettier": "^2.7.1",
68+
"rimraf": "^3.0.2",
69+
"rollup": "^2.77.0",
70+
"rollup-plugin-dts": "^4.2.2",
71+
"rollup-plugin-terser": "^7.0.2",
4072
"typescript": "^4.7.4"
4173
},
4274
"peerDependencies": {
43-
"react": "^16"
44-
}
75+
"react": "^17.0.2"
76+
},
77+
"dependencies": {}
4578
}

‎packages/theme/rollup.config.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import pkg from "./package.json";
2+
import type { RollupOptions } from "rollup";
3+
import { defineConfig } from "rollup";
4+
import { nodeResolve } from "@rollup/plugin-node-resolve";
5+
import commonjs from "@rollup/plugin-commonjs";
6+
import typescript from "@rollup/plugin-typescript";
7+
import { terser } from "rollup-plugin-terser";
8+
import eslint from "@rbnlffl/rollup-plugin-eslint";
9+
import dts from "rollup-plugin-dts";
10+
11+
const input: RollupOptions["input"] = "src/index.ts";
12+
const plugins: RollupOptions["plugins"] = [
13+
eslint({ throwOnError: true }),
14+
nodeResolve(),
15+
commonjs(),
16+
typescript({ tsconfig: "./tsconfig.build.json" }),
17+
terser(),
18+
];
19+
20+
export default defineConfig([
21+
{
22+
input,
23+
external: ["react"],
24+
output: [
25+
{
26+
file: pkg.main,
27+
format: "cjs",
28+
sourcemap: true,
29+
},
30+
{
31+
file: pkg.module,
32+
format: "esm",
33+
sourcemap: true,
34+
},
35+
],
36+
plugins,
37+
},
38+
{
39+
input: "dist/esm/types/index.d.ts",
40+
output: [{ file: "dist/index.d.ts", format: "esm" }],
41+
plugins: [dts()],
42+
},
43+
]);

0 commit comments

Comments
 (0)