Merge pull request #6 from ericrav/theme-override

ThemeOverride

.yarn/versions/06d7e864.yml

@@ -0,0 +1,2 @@
+releases:
+  theme-party: minor

README.md

@@ -122,7 +122,7 @@ export function Link({ children }) {
 
 ```
 
-### Override components
+### Replace components ("costuming")
 
 Create a "costumed" component containing your default markup.
 
@@ -158,7 +158,30 @@ function Page() {
 }
 ```
 
-## Releasing
+### Theme overrides
+
+Sometimes, you might want to override a single theme value, while inheriting the rest of the current theme.
+
+```tsx
+import { ThemeOverride, ThemePartyConfig } from 'theme-party';
+
+const override: ThemePartyConfig = { color: { link: 'blue' } };
+function Component() {
+  return (
+    <ThemeOverride value={override}>
+      <Link>Click me</Link>
+    </ThemeOverride>
+  );
+}
+```
+
+This creates a temporary theme that preserves the rest of the values of the currently selected theme.
+
+Note: the object passed to value must be stable across renders. Either use a constant or memoize the object.
+
+## Contributing
+
+### Releasing
 
 In pull request branch, run
 

jest.config.ts

@@ -4,6 +4,7 @@ const jestConfig: JestConfigWithTsJest = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   testMatch: ['<rootDir>/src/**/*.test.ts?(x)'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 };
 
 export default jestConfig;

jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

package.json

@@ -33,6 +33,7 @@
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-typescript": "^11.1.1",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.2",
     "@types/lodash": "^4.14.195",

rollup.config.mjs

@@ -29,7 +29,7 @@ export default [
     plugins: [
       resolve(),
       commonjs(),
-      typescript({ tsconfig: './tsconfig.json' }),
+      typescript({ tsconfig: './tsconfig.build.json' }),
     ],
   },
   {

src/index.ts

@@ -1,6 +1,7 @@
 export { ThemeParty } from "./ThemeParty";
 export { costumed } from "./react/costumed";
 export { ThemeProvider } from "./react/ThemeProvider";
+export { ThemeOverride } from "./react/ThemeOverride";
 export { useTheme } from "./react/useTheme";
-export { UserTheme } from "./types";
-export { ThemeExtract } from './ThemeParty.types';
+export { UserTheme, ThemeOfParty, DefaultTheme, DefaultThemeParty, ThemePartyConfig } from "./types";
+export { ThemeExtract, ThemeConfig } from './ThemeParty.types';

src/react/ThemeOverride.tsx

@@ -0,0 +1,26 @@
+import { useContext, useMemo } from 'react';
+import { DefaultTheme, ThemePartyConfig } from '../types';
+import { themePartyContext } from './context';
+
+export interface ThemeOverrideProps<T extends {}> {
+  /** Override values of current theme. Object should be stable across renders */
+  value: ThemePartyConfig<T>;
+  children: React.ReactNode;
+}
+
+export function ThemeOverride<T extends {} = DefaultTheme>({
+  value,
+  children,
+}: ThemeOverrideProps<T>) {
+  const themeParty = useContext(themePartyContext);
+  if (!themeParty)
+    throw new Error('ThemeOverride must be used within a ThemeProvider');
+
+  const override = useMemo(() => themeParty.createTheme(value), [themeParty, value]);
+
+  return (
+    <themePartyContext.Provider value={override}>
+      {children}
+    </themePartyContext.Provider>
+  );
+}

src/react/__tests__/ThemeOverride.test.tsx

@@ -0,0 +1,47 @@
+import { render } from '@testing-library/react';
+import { ThemeParty } from '../../ThemeParty';
+import { useTheme } from '../useTheme';
+import { ThemeProvider } from '../ThemeProvider';
+import { ThemeOverride } from '../ThemeOverride';
+import { ThemeOfParty } from '../../types';
+
+const themeParty = new ThemeParty({
+  color: 'red',
+  fontWeight: 700,
+});
+
+type Theme = ThemeOfParty<typeof themeParty>;
+
+const theme2 = themeParty.createTheme({
+  color: 'blue',
+});
+
+const Text = ({ children }: { children: React.ReactNode }) => {
+  const { color, fontWeight } = useTheme<typeof themeParty>();
+  return <p style={{ color, fontWeight }}>{children}</p>;
+};
+
+test('ThemeOverride', () => {
+  const { getByText } = render(
+    <ThemeProvider theme={theme2}>
+      <Text>Text 1</Text>
+
+      <ThemeOverride<Theme> value={{ color: 'green' }}>
+        <Text>Text 2</Text>
+      </ThemeOverride>
+
+      <ThemeOverride<Theme> value={{ fontWeight: () => 400 }}>
+        <Text>Text 3</Text>
+      </ThemeOverride>
+    </ThemeProvider>
+  );
+
+  expect(getByText('Text 1')).toHaveStyle('color: blue');
+  expect(getByText('Text 1')).toHaveStyle('font-weight: 700');
+
+  expect(getByText('Text 2')).toHaveStyle('color: green');
+  expect(getByText('Text 2')).toHaveStyle('font-weight: 700');
+
+  expect(getByText('Text 3')).toHaveStyle('color: blue');
+  expect(getByText('Text 3')).toHaveStyle('font-weight: 400');
+});

src/types.ts

@@ -1,5 +1,5 @@
 import type { ThemeParty } from './ThemeParty';
-import { ThemeExtract } from './ThemeParty.types';
+import { DeepPartial, ThemeConfig, ThemeExtract } from './ThemeParty.types';
 
 /**
  * Allows user to define type of their custom theme object.
@@ -23,3 +23,5 @@ export type DefaultThemeParty = unknown extends UserTheme['default']
   : UserTheme['default'];
 
 export type DefaultTheme = ThemeOfParty<DefaultThemeParty>;
+
+export type ThemePartyConfig<T extends {} = DefaultTheme> = ThemeConfig<ThemeExtract<T>, DeepPartial<ThemeExtract<T>>>;

tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["**/__tests__/**"],
+}

tsconfig.json

@@ -15,5 +15,5 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*"]
+  "include": ["src/**/*", "./jest.setup.ts"]
 }