@themes/react - npm Package Compare versions

Comparing version 0.0.27 to 0.0.28

__tests__/combine.spec.tsx

+import * as React from 'react'
+import { create } from 'react-test-renderer'
+import { override, SchemeConfig } from '@themes/scheme'
+
+import { combine } from '../'
+
+describe('combine', () => {
+  type ButtonType = 'normal' | 'primary'
+  type ButtonColorScheme = { textColor: string; backgroundColor?: string }
+
+  const colorScheme: SchemeConfig<ButtonType, ButtonColorScheme> = {
+    defaultScheme: 'normal',
+    schemes: {
+      normal: { textColor: '#000', backgroundColor: '#fff' },
+      primary: { textColor: '#fff', backgroundColor: '#000' },
+    },
+  }
+
+  const BaseButton = ({ colorScheme }: { colorScheme: ButtonColorScheme }) => (
+    <button style={{ color: colorScheme.textColor, backgroundColor: colorScheme.backgroundColor }}>
+      Button
+    </button>
+  )
+
+  it('should work properly while `colorScheme` is undefined', () => {
+    const Button = combine({ colorScheme }, BaseButton)
+    const testRenderer = create(<Button />)
+
+    expect(testRenderer.root.findByType('button').props.style).toEqual({
+      backgroundColor: '#fff',
+      color: '#000',
+    })
+  })
+
+  it('should work properly while `colorScheme` is specific `ButtonType`', () => {
+    const Button = combine({ colorScheme }, BaseButton)
+    const testRenderer = create(<Button colorScheme="primary" />)
+
+    expect(testRenderer.root.findByType('button').props.style).toEqual({
+      backgroundColor: '#000',
+      color: '#fff',
+    })
+  })
+
+  it('should work properly while `colorScheme` is object type of override scheme', () => {
+    const Button = combine({ colorScheme }, BaseButton)
+    const testRenderer = create(
+      <Button colorScheme={override('primary', { backgroundColor: '#f00' })} />,
+    )
+
+    expect(testRenderer.root.findByType('button').props.style).toEqual({
+      backgroundColor: '#f00',
+      color: '#fff',
+    })
+  })
+
+  it('should work properly while `colorScheme` is function type of override scheme', () => {
+    const Button = combine({ colorScheme }, BaseButton)
+    const testRenderer = create(
+      <Button
+        colorScheme={override('primary', ({ backgroundColor }) => ({
+          backgroundColor: backgroundColor + 'fff',
+        }))}
+      />,
+    )
+
+    expect(testRenderer.root.findByType('button').props.style).toEqual({
+      backgroundColor: '#000fff',
+      color: '#fff',
+    })
+  })
+
+  describe('combine the combined component', () => {
+    const colorScheme2: SchemeConfig<'normal2' | 'primary2', ButtonColorScheme> = {
+      defaultScheme: 'normal2',
+
+      schemes: {
+        normal2: { textColor: '#00f', backgroundColor: '#ff0' },
+        primary2: { textColor: '#ff0', backgroundColor: '#00f' },
+      },
+    }
+
+    it('should able to combine the combined component', () => {
+      const ButtonOne = combine({ colorScheme }, BaseButton)
+      const ButtonTwo = combine({ colorScheme: colorScheme2 }, ButtonOne)
+
+      const testRenderer = create(<ButtonTwo />)
+
+      expect(testRenderer.root.findByType('button').props.style).toEqual({
+        backgroundColor: '#ff0',
+        color: '#00f',
+      })
+    })
+  })
+})

__tests__/context-scheme-config.spec.tsx

+import * as React from 'react'
+import { SchemeConfig } from '@themes/scheme'
+import { create } from 'react-test-renderer'
+
+import { combine, createContextSchemeConfig, useContextSchemeConfig } from '../'
+
+describe('context-scheme-config', () => {
+  type ColorType = 'dark' | 'light'
+  type ColorScheme = { primary: string; secondary: string }
+
+  const colorScheme: SchemeConfig<ColorType, ColorScheme> = {
+    defaultScheme: 'light',
+    schemes: {
+      light: { primary: '#000', secondary: '#fff' },
+      dark: { primary: '#fff', secondary: '#000' },
+    },
+  }
+
+  const contextColorScheme = createContextSchemeConfig(colorScheme)
+
+  describe('Component usage', () => {
+    const Button = () => {
+      const { primary, secondary } = useContextSchemeConfig(contextColorScheme)
+      return <button style={{ color: primary, backgroundColor: secondary }}>Button</button>
+    }
+
+    it('should able to get `colorScheme` by context', () => {
+      const testRenderer = create(<Button />)
+
+      expect(testRenderer.root.findByType('button').props.style).toEqual({
+        backgroundColor: '#fff',
+        color: '#000',
+      })
+    })
+
+    it('should able to custom colorScheme by context', () => {
+      const { Context } = contextColorScheme
+
+      const testRenderer = create(
+        <Context.Provider value="dark">
+          <Button />
+        </Context.Provider>,
+      )
+
+      expect(testRenderer.root.findByType('button').props.style).toEqual({
+        backgroundColor: '#000',
+        color: '#fff',
+      })
+    })
+  })
+
+  describe('transform', () => {
+    type ButtonType = 'normal' | 'primary'
+    type ButtonColorScheme = { borderColor: string }
+
+    const buttonColorScheme = contextColorScheme.transform<ButtonType, ButtonColorScheme>({
+      defaultScheme: 'normal',
+
+      schemes: {
+        normal: ({ secondary }) => ({
+          borderColor: secondary + '123',
+        }),
+
+        primary: ({ primary }) => ({
+          borderColor: primary + '456',
+        }),
+      },
+    })
+
+    const BaseBorderButton = ({ colorScheme }: { colorScheme: ButtonColorScheme }) => {
+      return <button style={{ border: `1px solid ${colorScheme.borderColor}` }}>Button</button>
+    }
+
+    describe('`combine` without Provider', () => {
+      it('should work properly with default key', () => {
+        const BorderButton = combine({ colorScheme: buttonColorScheme }, BaseBorderButton)
+        const testRenderer = create(<BorderButton />)
+
+        expect(testRenderer.root.findByType('button').props.style).toEqual({
+          border: `1px solid #fff123`,
+        })
+      })
+
+      it('should work properly with specific colorScheme key', () => {
+        const BorderButton = combine({ colorScheme: buttonColorScheme }, BaseBorderButton)
+        const testRenderer = create(<BorderButton colorScheme="primary" />)
+
+        expect(testRenderer.root.findByType('button').props.style).toEqual({
+          border: `1px solid #000456`,
+        })
+      })
+    })
+
+    describe('`combine` with Provider', () => {
+      const { Context } = contextColorScheme
+
+      it('should work properly with default key', () => {
+        const BorderButton = combine({ colorScheme: buttonColorScheme }, BaseBorderButton)
+        const testRenderer = create(
+          <Context.Provider value="dark">
+            <BorderButton />
+          </Context.Provider>,
+        )
+
+        expect(testRenderer.root.findByType('button').props.style).toEqual({
+          border: `1px solid #000123`,
+        })
+      })
+
+      it('should work properly with specific colorScheme key', () => {
+        const BorderButton = combine({ colorScheme: buttonColorScheme }, BaseBorderButton)
+        const testRenderer = create(
+          <Context.Provider value="dark">
+            <BorderButton colorScheme="primary" />
+          </Context.Provider>,
+        )
+
+        expect(testRenderer.root.findByType('button').props.style).toEqual({
+          border: `1px solid #fff456`,
+        })
+      })
+    })
+  })
+})

__tests__/create-scheme-config-by-context.spec.tsx

+import * as React from 'react'
+import { SchemeConfig } from '@themes/scheme'
+
+import { combine, createSchemeConfigByContext } from '../'
+import { create } from 'react-test-renderer'
+
+describe('create-scheme-config-by-context', () => {
+  type SizeType = 'sm' | 'lg'
+  type SizeScheme = { paddingLeft: number }
+  const IndentLevelContext = React.createContext(0)
+
+  const sizeScheme: SchemeConfig<SizeType, SizeScheme> = createSchemeConfigByContext<
+    number,
+    SizeType,
+    SizeScheme
+  >(IndentLevelContext, {
+    defaultScheme: 'sm',
+
+    schemes: {
+      sm: (indentLevel) => ({ paddingLeft: indentLevel * 10 }),
+      lg: (indentLevel) => ({ paddingLeft: indentLevel * 15 }),
+    },
+  })
+
+  const BaseParagraph = ({ sizeScheme }: { sizeScheme: SizeScheme }) => (
+    <p style={{ paddingLeft: sizeScheme.paddingLeft }}>content</p>
+  )
+
+  it('should make scheme config able to response context change with default sizeScheme', () => {
+    const Paragraph = combine({ sizeScheme }, BaseParagraph)
+    const testRenderer = create(
+      <IndentLevelContext.Provider value={1}>
+        <Paragraph />
+      </IndentLevelContext.Provider>,
+    )
+
+    expect(testRenderer.root.findByType('p').props.style).toEqual({
+      paddingLeft: 10,
+    })
+  })
+
+  it('should make scheme config able to response context change with specific sizeScheme', () => {
+    const Paragraph = combine({ sizeScheme }, BaseParagraph)
+    const testRenderer = create(
+      <IndentLevelContext.Provider value={2}>
+        <Paragraph sizeScheme="lg" />
+      </IndentLevelContext.Provider>,
+    )
+
+    expect(testRenderer.root.findByType('p').props.style).toEqual({
+      paddingLeft: 30,
+    })
+  })
+})

package.json

 {
   "name": "@themes/react",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "description": "",
@@ -24,3 +24,3 @@ "license": "MIT",
   "devDependencies": {
-    "@themes/scheme": "^0.0.20",
+    "@themes/scheme": "^0.0.28",
     "@types/react-test-renderer": "^16.9.1",
@@ -27,0 +27,0 @@ "react-test-renderer": "^16.12.0"

dist/__tests__/combine.spec.d.ts

-export {};
-//# sourceMappingURL=combine.spec.d.ts.map

dist/__tests__/combine.spec.d.ts.map

-{"version":3,"file":"combine.spec.d.ts","sourceRoot":"","sources":["../../src/__tests__/combine.spec.tsx"],"names":[],"mappings":""}

dist/__tests__/combine.spec.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var react_test_renderer_1 = require("react-test-renderer");
-var scheme_1 = require("@themes/scheme");
-var __1 = require("../");
-describe('combine', function () {
-    var colorScheme = {
-        defaultScheme: 'normal',
-        schemes: {
-            normal: { textColor: '#000', backgroundColor: '#fff' },
-            primary: { textColor: '#fff', backgroundColor: '#000' },
-        },
-    };
-    var BaseButton = function (_a) {
-        var colorScheme = _a.colorScheme;
-        return (React.createElement("button", { style: { color: colorScheme.textColor, backgroundColor: colorScheme.backgroundColor } }, "Button"));
-    };
-    it('should work properly while `colorScheme` is undefined', function () {
-        var Button = __1.combine({ colorScheme: colorScheme }, BaseButton);
-        var testRenderer = react_test_renderer_1.create(React.createElement(Button, null));
-        expect(testRenderer.root.findByType('button').props.style).toEqual({
-            backgroundColor: '#fff',
-            color: '#000',
-        });
-    });
-    it('should work properly while `colorScheme` is specific `ButtonType`', function () {
-        var Button = __1.combine({ colorScheme: colorScheme }, BaseButton);
-        var testRenderer = react_test_renderer_1.create(React.createElement(Button, { colorScheme: "primary" }));
-        expect(testRenderer.root.findByType('button').props.style).toEqual({
-            backgroundColor: '#000',
-            color: '#fff',
-        });
-    });
-    it('should work properly while `colorScheme` is object type of override scheme', function () {
-        var Button = __1.combine({ colorScheme: colorScheme }, BaseButton);
-        var testRenderer = react_test_renderer_1.create(React.createElement(Button, { colorScheme: scheme_1.override('primary', { backgroundColor: '#f00' }) }));
-        expect(testRenderer.root.findByType('button').props.style).toEqual({
-            backgroundColor: '#f00',
-            color: '#fff',
-        });
-    });
-    it('should work properly while `colorScheme` is function type of override scheme', function () {
-        var Button = __1.combine({ colorScheme: colorScheme }, BaseButton);
-        var testRenderer = react_test_renderer_1.create(React.createElement(Button, { colorScheme: scheme_1.override('primary', function (_a) {
-                var backgroundColor = _a.backgroundColor;
-                return ({
-                    backgroundColor: backgroundColor + 'fff',
-                });
-            }) }));
-        expect(testRenderer.root.findByType('button').props.style).toEqual({
-            backgroundColor: '#000fff',
-            color: '#fff',
-        });
-    });
-    describe('combine the combined component', function () {
-        var colorScheme2 = {
-            defaultScheme: 'normal2',
-            schemes: {
-                normal2: { textColor: '#00f', backgroundColor: '#ff0' },
-                primary2: { textColor: '#ff0', backgroundColor: '#00f' },
-            },
-        };
-        it('should able to combine the combined component', function () {
-            var ButtonOne = __1.combine({ colorScheme: colorScheme }, BaseButton);
-            var ButtonTwo = __1.combine({ colorScheme: colorScheme2 }, ButtonOne);
-            var testRenderer = react_test_renderer_1.create(React.createElement(ButtonTwo, null));
-            expect(testRenderer.root.findByType('button').props.style).toEqual({
-                backgroundColor: '#ff0',
-                color: '#00f',
-            });
-        });
-    });
-});

dist/__tests__/context-scheme-config.spec.d.ts

-export {};
-//# sourceMappingURL=context-scheme-config.spec.d.ts.map

dist/__tests__/context-scheme-config.spec.d.ts.map

-{"version":3,"file":"context-scheme-config.spec.d.ts","sourceRoot":"","sources":["../../src/__tests__/context-scheme-config.spec.tsx"],"names":[],"mappings":""}

dist/__tests__/context-scheme-config.spec.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var react_test_renderer_1 = require("react-test-renderer");
-var __1 = require("../");
-describe('context-scheme-config', function () {
-    var colorScheme = {
-        defaultScheme: 'light',
-        schemes: {
-            light: { primary: '#000', secondary: '#fff' },
-            dark: { primary: '#fff', secondary: '#000' },
-        },
-    };
-    var contextColorScheme = __1.createContextSchemeConfig(colorScheme);
-    describe('Component usage', function () {
-        var Button = function () {
-            var _a = __1.useContextSchemeConfig(contextColorScheme), primary = _a.primary, secondary = _a.secondary;
-            return React.createElement("button", { style: { color: primary, backgroundColor: secondary } }, "Button");
-        };
-        it('should able to get `colorScheme` by context', function () {
-            var testRenderer = react_test_renderer_1.create(React.createElement(Button, null));
-            expect(testRenderer.root.findByType('button').props.style).toEqual({
-                backgroundColor: '#fff',
-                color: '#000',
-            });
-        });
-        it('should able to custom colorScheme by context', function () {
-            var Context = contextColorScheme.Context;
-            var testRenderer = react_test_renderer_1.create(React.createElement(Context.Provider, { value: "dark" },
-                React.createElement(Button, null)));
-            expect(testRenderer.root.findByType('button').props.style).toEqual({
-                backgroundColor: '#000',
-                color: '#fff',
-            });
-        });
-    });
-    describe('transform', function () {
-        var buttonColorScheme = contextColorScheme.transform({
-            defaultScheme: 'normal',
-            schemes: {
-                normal: function (_a) {
-                    var secondary = _a.secondary;
-                    return ({
-                        borderColor: secondary + '123',
-                    });
-                },
-                primary: function (_a) {
-                    var primary = _a.primary;
-                    return ({
-                        borderColor: primary + '456',
-                    });
-                },
-            },
-        });
-        var BaseBorderButton = function (_a) {
-            var colorScheme = _a.colorScheme;
-            return React.createElement("button", { style: { border: "1px solid " + colorScheme.borderColor } }, "Button");
-        };
-        describe('`combine` without Provider', function () {
-            it('should work properly with default key', function () {
-                var BorderButton = __1.combine({ colorScheme: buttonColorScheme }, BaseBorderButton);
-                var testRenderer = react_test_renderer_1.create(React.createElement(BorderButton, null));
-                expect(testRenderer.root.findByType('button').props.style).toEqual({
-                    border: "1px solid #fff123",
-                });
-            });
-            it('should work properly with specific colorScheme key', function () {
-                var BorderButton = __1.combine({ colorScheme: buttonColorScheme }, BaseBorderButton);
-                var testRenderer = react_test_renderer_1.create(React.createElement(BorderButton, { colorScheme: "primary" }));
-                expect(testRenderer.root.findByType('button').props.style).toEqual({
-                    border: "1px solid #000456",
-                });
-            });
-        });
-        describe('`combine` with Provider', function () {
-            var Context = contextColorScheme.Context;
-            it('should work properly with default key', function () {
-                var BorderButton = __1.combine({ colorScheme: buttonColorScheme }, BaseBorderButton);
-                var testRenderer = react_test_renderer_1.create(React.createElement(Context.Provider, { value: "dark" },
-                    React.createElement(BorderButton, null)));
-                expect(testRenderer.root.findByType('button').props.style).toEqual({
-                    border: "1px solid #000123",
-                });
-            });
-            it('should work properly with specific colorScheme key', function () {
-                var BorderButton = __1.combine({ colorScheme: buttonColorScheme }, BaseBorderButton);
-                var testRenderer = react_test_renderer_1.create(React.createElement(Context.Provider, { value: "dark" },
-                    React.createElement(BorderButton, { colorScheme: "primary" })));
-                expect(testRenderer.root.findByType('button').props.style).toEqual({
-                    border: "1px solid #fff456",
-                });
-            });
-        });
-    });
-});

dist/__tests__/create-scheme-config-by-context.spec.d.ts

-export {};
-//# sourceMappingURL=create-scheme-config-by-context.spec.d.ts.map

dist/__tests__/create-scheme-config-by-context.spec.d.ts.map

-{"version":3,"file":"create-scheme-config-by-context.spec.d.ts","sourceRoot":"","sources":["../../src/__tests__/create-scheme-config-by-context.spec.tsx"],"names":[],"mappings":""}

dist/__tests__/create-scheme-config-by-context.spec.js

-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var __1 = require("../");
-var react_test_renderer_1 = require("react-test-renderer");
-describe('create-scheme-config-by-context', function () {
-    var IndentLevelContext = React.createContext(0);
-    var sizeScheme = __1.createSchemeConfigByContext(IndentLevelContext, {
-        defaultScheme: 'sm',
-        schemes: {
-            sm: function (indentLevel) { return ({ paddingLeft: indentLevel * 10 }); },
-            lg: function (indentLevel) { return ({ paddingLeft: indentLevel * 15 }); },
-        },
-    });
-    var BaseParagraph = function (_a) {
-        var sizeScheme = _a.sizeScheme;
-        return (React.createElement("p", { style: { paddingLeft: sizeScheme.paddingLeft } }, "content"));
-    };
-    it('should make scheme config able to response context change with default sizeScheme', function () {
-        var Paragraph = __1.combine({ sizeScheme: sizeScheme }, BaseParagraph);
-        var testRenderer = react_test_renderer_1.create(React.createElement(IndentLevelContext.Provider, { value: 1 },
-            React.createElement(Paragraph, null)));
-        expect(testRenderer.root.findByType('p').props.style).toEqual({
-            paddingLeft: 10,
-        });
-    });
-    it('should make scheme config able to response context change with specific sizeScheme', function () {
-        var Paragraph = __1.combine({ sizeScheme: sizeScheme }, BaseParagraph);
-        var testRenderer = react_test_renderer_1.create(React.createElement(IndentLevelContext.Provider, { value: 2 },
-            React.createElement(Paragraph, { sizeScheme: "lg" })));
-        expect(testRenderer.root.findByType('p').props.style).toEqual({
-            paddingLeft: 30,
-        });
-    });
-});

src/__tests__/combine.spec.tsx

-import * as React from 'react'
-import { create } from 'react-test-renderer'
-import { override, SchemeConfig } from '@themes/scheme'
-
-import { combine } from '../'
-
-describe('combine', () => {
-  type ButtonType = 'normal' | 'primary'
-  type ButtonColorScheme = { textColor: string; backgroundColor?: string }
-
-  const colorScheme: SchemeConfig<ButtonType, ButtonColorScheme> = {
-    defaultScheme: 'normal',
-    schemes: {
-      normal: { textColor: '#000', backgroundColor: '#fff' },
-      primary: { textColor: '#fff', backgroundColor: '#000' },
-    },
-  }
-
-  const BaseButton = ({ colorScheme }: { colorScheme: ButtonColorScheme }) => (
-    <button style={{ color: colorScheme.textColor, backgroundColor: colorScheme.backgroundColor }}>
-      Button
-    </button>
-  )
-
-  it('should work properly while `colorScheme` is undefined', () => {
-    const Button = combine({ colorScheme }, BaseButton)
-    const testRenderer = create(<Button />)
-
-    expect(testRenderer.root.findByType('button').props.style).toEqual({
-      backgroundColor: '#fff',
-      color: '#000',
-    })
-  })
-
-  it('should work properly while `colorScheme` is specific `ButtonType`', () => {
-    const Button = combine({ colorScheme }, BaseButton)
-    const testRenderer = create(<Button colorScheme="primary" />)
-
-    expect(testRenderer.root.findByType('button').props.style).toEqual({
-      backgroundColor: '#000',
-      color: '#fff',
-    })
-  })
-
-  it('should work properly while `colorScheme` is object type of override scheme', () => {
-    const Button = combine({ colorScheme }, BaseButton)
-    const testRenderer = create(
-      <Button colorScheme={override('primary', { backgroundColor: '#f00' })} />,
-    )
-
-    expect(testRenderer.root.findByType('button').props.style).toEqual({
-      backgroundColor: '#f00',
-      color: '#fff',
-    })
-  })
-
-  it('should work properly while `colorScheme` is function type of override scheme', () => {
-    const Button = combine({ colorScheme }, BaseButton)
-    const testRenderer = create(
-      <Button
-        colorScheme={override('primary', ({ backgroundColor }) => ({
-          backgroundColor: backgroundColor + 'fff',
-        }))}
-      />,
-    )
-
-    expect(testRenderer.root.findByType('button').props.style).toEqual({
-      backgroundColor: '#000fff',
-      color: '#fff',
-    })
-  })
-
-  describe('combine the combined component', () => {
-    const colorScheme2: SchemeConfig<'normal2' | 'primary2', ButtonColorScheme> = {
-      defaultScheme: 'normal2',
-
-      schemes: {
-        normal2: { textColor: '#00f', backgroundColor: '#ff0' },
-        primary2: { textColor: '#ff0', backgroundColor: '#00f' },
-      },
-    }
-
-    it('should able to combine the combined component', () => {
-      const ButtonOne = combine({ colorScheme }, BaseButton)
-      const ButtonTwo = combine({ colorScheme: colorScheme2 }, ButtonOne)
-
-      const testRenderer = create(<ButtonTwo />)
-
-      expect(testRenderer.root.findByType('button').props.style).toEqual({
-        backgroundColor: '#ff0',
-        color: '#00f',
-      })
-    })
-  })
-})

src/__tests__/context-scheme-config.spec.tsx

-import * as React from 'react'
-import { SchemeConfig } from '@themes/scheme'
-import { create } from 'react-test-renderer'
-
-import { combine, createContextSchemeConfig, useContextSchemeConfig } from '../'
-
-describe('context-scheme-config', () => {
-  type ColorType = 'dark' | 'light'
-  type ColorScheme = { primary: string; secondary: string }
-
-  const colorScheme: SchemeConfig<ColorType, ColorScheme> = {
-    defaultScheme: 'light',
-    schemes: {
-      light: { primary: '#000', secondary: '#fff' },
-      dark: { primary: '#fff', secondary: '#000' },
-    },
-  }
-
-  const contextColorScheme = createContextSchemeConfig(colorScheme)
-
-  describe('Component usage', () => {
-    const Button = () => {
-      const { primary, secondary } = useContextSchemeConfig(contextColorScheme)
-      return <button style={{ color: primary, backgroundColor: secondary }}>Button</button>
-    }
-
-    it('should able to get `colorScheme` by context', () => {
-      const testRenderer = create(<Button />)
-
-      expect(testRenderer.root.findByType('button').props.style).toEqual({
-        backgroundColor: '#fff',
-        color: '#000',
-      })
-    })
-
-    it('should able to custom colorScheme by context', () => {
-      const { Context } = contextColorScheme
-
-      const testRenderer = create(
-        <Context.Provider value="dark">
-          <Button />
-        </Context.Provider>,
-      )
-
-      expect(testRenderer.root.findByType('button').props.style).toEqual({
-        backgroundColor: '#000',
-        color: '#fff',
-      })
-    })
-  })
-
-  describe('transform', () => {
-    type ButtonType = 'normal' | 'primary'
-    type ButtonColorScheme = { borderColor: string }
-
-    const buttonColorScheme = contextColorScheme.transform<ButtonType, ButtonColorScheme>({
-      defaultScheme: 'normal',
-
-      schemes: {
-        normal: ({ secondary }) => ({
-          borderColor: secondary + '123',
-        }),
-
-        primary: ({ primary }) => ({
-          borderColor: primary + '456',
-        }),
-      },
-    })
-
-    const BaseBorderButton = ({ colorScheme }: { colorScheme: ButtonColorScheme }) => {
-      return <button style={{ border: `1px solid ${colorScheme.borderColor}` }}>Button</button>
-    }
-
-    describe('`combine` without Provider', () => {
-      it('should work properly with default key', () => {
-        const BorderButton = combine({ colorScheme: buttonColorScheme }, BaseBorderButton)
-        const testRenderer = create(<BorderButton />)
-
-        expect(testRenderer.root.findByType('button').props.style).toEqual({
-          border: `1px solid #fff123`,
-        })
-      })
-
-      it('should work properly with specific colorScheme key', () => {
-        const BorderButton = combine({ colorScheme: buttonColorScheme }, BaseBorderButton)
-        const testRenderer = create(<BorderButton colorScheme="primary" />)
-
-        expect(testRenderer.root.findByType('button').props.style).toEqual({
-          border: `1px solid #000456`,
-        })
-      })
-    })
-
-    describe('`combine` with Provider', () => {
-      const { Context } = contextColorScheme
-
-      it('should work properly with default key', () => {
-        const BorderButton = combine({ colorScheme: buttonColorScheme }, BaseBorderButton)
-        const testRenderer = create(
-          <Context.Provider value="dark">
-            <BorderButton />
-          </Context.Provider>,
-        )
-
-        expect(testRenderer.root.findByType('button').props.style).toEqual({
-          border: `1px solid #000123`,
-        })
-      })
-
-      it('should work properly with specific colorScheme key', () => {
-        const BorderButton = combine({ colorScheme: buttonColorScheme }, BaseBorderButton)
-        const testRenderer = create(
-          <Context.Provider value="dark">
-            <BorderButton colorScheme="primary" />
-          </Context.Provider>,
-        )
-
-        expect(testRenderer.root.findByType('button').props.style).toEqual({
-          border: `1px solid #fff456`,
-        })
-      })
-    })
-  })
-})

src/__tests__/create-scheme-config-by-context.spec.tsx

-import * as React from 'react'
-import { SchemeConfig } from '@themes/scheme'
-
-import { combine, createSchemeConfigByContext } from '../'
-import { create } from 'react-test-renderer'
-
-describe('create-scheme-config-by-context', () => {
-  type SizeType = 'sm' | 'lg'
-  type SizeScheme = { paddingLeft: number }
-  const IndentLevelContext = React.createContext(0)
-
-  const sizeScheme: SchemeConfig<SizeType, SizeScheme> = createSchemeConfigByContext<
-    number,
-    SizeType,
-    SizeScheme
-  >(IndentLevelContext, {
-    defaultScheme: 'sm',
-
-    schemes: {
-      sm: (indentLevel) => ({ paddingLeft: indentLevel * 10 }),
-      lg: (indentLevel) => ({ paddingLeft: indentLevel * 15 }),
-    },
-  })
-
-  const BaseParagraph = ({ sizeScheme }: { sizeScheme: SizeScheme }) => (
-    <p style={{ paddingLeft: sizeScheme.paddingLeft }}>content</p>
-  )
-
-  it('should make scheme config able to response context change with default sizeScheme', () => {
-    const Paragraph = combine({ sizeScheme }, BaseParagraph)
-    const testRenderer = create(
-      <IndentLevelContext.Provider value={1}>
-        <Paragraph />
-      </IndentLevelContext.Provider>,
-    )
-
-    expect(testRenderer.root.findByType('p').props.style).toEqual({
-      paddingLeft: 10,
-    })
-  })
-
-  it('should make scheme config able to response context change with specific sizeScheme', () => {
-    const Paragraph = combine({ sizeScheme }, BaseParagraph)
-    const testRenderer = create(
-      <IndentLevelContext.Provider value={2}>
-        <Paragraph sizeScheme="lg" />
-      </IndentLevelContext.Provider>,
-    )
-
-    expect(testRenderer.root.findByType('p').props.style).toEqual({
-      paddingLeft: 30,
-    })
-  })
-})

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

149793

-8.09%

Number of package files

48

-15.79%

Lines of code

546

-27.49%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes