@wise/components-theming 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0 (2022-11-02)
+
+
+### Features
+
+* **components-theming:** Add theme provider package ([#1718](https://github.com/transferwise/neptune-web/issues/1718)) ([ee9d394](https://github.com/transferwise/neptune-web/commit/ee9d394b590f60462986b774c1d9192edf2e1ade))
+
+
+
+
+
+# Change Log

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2022 Wise Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1 @@
+# Design System Componentents - Theming

package/dist/cjs/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { PropsWithChildren } from "react";
+declare const componentThemes: readonly [
+    "light",
+    "personal"
+];
+type ComponentTheme = (typeof componentThemes)[number];
+type ThemeProviderProps = PropsWithChildren<{
+    theme: ComponentTheme | undefined;
+}>;
+declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
+declare const useTheme: () => ComponentTheme;
+export type { ComponentTheme };
+export { ThemeProvider, useTheme };

package/dist/cjs/index.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+var DEFAULT_COMPONENT_THEME = 'light';
+
+var ThemeContext = /*#__PURE__*/react.createContext(DEFAULT_COMPONENT_THEME);
+var ThemeProvider = function ThemeProvider(_ref) {
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
+      children = _ref.children;
+  var themedChildren = react.Children.map(children, function (child) {
+    var _child$props;
+
+    if (! /*#__PURE__*/react.isValidElement(child)) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn('[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!');
+      }
+
+      return child;
+    } // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+
+
+    var classNames = ["np-theme-".concat(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
+    return /*#__PURE__*/react.cloneElement(child, {
+      className: classNames // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+    });
+  });
+  return jsxRuntime.jsx(ThemeContext.Provider, {
+    value: theme,
+    children: themedChildren
+  });
+};
+
+var useTheme = function useTheme() {
+  var _useContext;
+
+  return (_useContext = react.useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
+};
+
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/ThemeProvider.tsx","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { useContext } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const useTheme = (): ComponentTheme => {\n  return useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n};\n"],"names":["DEFAULT_COMPONENT_THEME","ThemeContext","createContext","ThemeProvider","theme","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","useTheme","useContext"],"mappings":";;;;;AAIO,IAAMA,uBAAuB,GAAG,OAAhC;;ACAA,IAAMC,YAAY,gBAAGC,mBAAa,CAAiBF,uBAAjB,CAAlC,CAAA;AAMMG,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBC,KAEuB;MAFvBA,KAEuB,2BAFfJ,uBAEe,GAAA,UAAA;MADvBK,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,cAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,oBAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAAaZ,WAAAA,CAAAA,MAAAA,CAAAA,KAAb,GAAsBK,KAAtB,KAAA,IAAA,IAAsBA,KAAtB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAAsBA,KAAK,CAAEQ,KAA7B,MAAsB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAcC,SAApC,CAAA,CAA+CC,MAA/C,CAAsDC,OAAtD,CAA+DC,CAAAA,IAA/D,CAAoE,GAApE,CAAnB,CAAA;IAEA,oBAAOC,kBAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GAlBsB,CAAvB,CAAA;AAoBA,EAAA,OAAOO,cAACtB,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAErB,KAAR;IAAaC,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AC9BYoB,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,OAAA,CAAA,WAAA,GAAOC,gBAAU,CAAC1B,YAAD,CAAjB,qDAAmCD,uBAAnC,CAAA;AACD;;;;;"}

package/dist/es/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { PropsWithChildren } from "react";
+declare const componentThemes: readonly [
+    "light",
+    "personal"
+];
+type ComponentTheme = (typeof componentThemes)[number];
+type ThemeProviderProps = PropsWithChildren<{
+    theme: ComponentTheme | undefined;
+}>;
+declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
+declare const useTheme: () => ComponentTheme;
+export type { ComponentTheme };
+export { ThemeProvider, useTheme };

package/dist/es/index.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { Children, isValidElement, cloneElement, createContext, useContext } from 'react';
+
+var DEFAULT_COMPONENT_THEME = 'light';
+
+var ThemeContext = /*#__PURE__*/createContext(DEFAULT_COMPONENT_THEME);
+var ThemeProvider = function ThemeProvider(_ref) {
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? DEFAULT_COMPONENT_THEME : _ref$theme,
+      children = _ref.children;
+  var themedChildren = Children.map(children, function (child) {
+    var _child$props;
+
+    if (! /*#__PURE__*/isValidElement(child)) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn('[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!');
+      }
+
+      return child;
+    } // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+
+
+    var classNames = ["np-theme-".concat(theme), child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className].filter(Boolean).join(' ');
+    return /*#__PURE__*/cloneElement(child, {
+      className: classNames // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+    });
+  });
+  return jsx(ThemeContext.Provider, {
+    value: theme,
+    children: themedChildren
+  });
+};
+
+var useTheme = function useTheme() {
+  var _useContext;
+
+  return (_useContext = useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : DEFAULT_COMPONENT_THEME;
+};
+
+export { ThemeProvider, useTheme };
+//# sourceMappingURL=index.js.map

package/dist/es/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/ThemeProvider.tsx","../../src/useTheme.ts"],"sourcesContent":["export const componentThemes = ['light', 'personal'] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n","import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';\n\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);\n\ntype ThemeProviderProps = PropsWithChildren<{\n  theme: ComponentTheme | undefined;\n}>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const themedChildren = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',\n        );\n      }\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');\n\n    return cloneElement(child, {\n      className: classNames,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any);\n  });\n\n  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;\n};\n","import { useContext } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\n\nexport const useTheme = (): ComponentTheme => {\n  return useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n};\n"],"names":["DEFAULT_COMPONENT_THEME","ThemeContext","createContext","ThemeProvider","theme","children","themedChildren","Children","map","child","isValidElement","process","env","NODE_ENV","console","warn","classNames","props","className","filter","Boolean","join","cloneElement","_jsx","Provider","value","useTheme","useContext"],"mappings":";;;AAIO,IAAMA,uBAAuB,GAAG,OAAhC;;ACAA,IAAMC,YAAY,gBAAGC,aAAa,CAAiBF,uBAAjB,CAAlC,CAAA;AAMMG,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAGJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAFvBC,KAEuB;MAFvBA,KAEuB,2BAFfJ,uBAEe,GAAA,UAAA;MADvBK,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMC,cAAc,GAAGC,QAAQ,CAACC,GAAT,CAAaH,QAAb,EAAuB,UAACI,KAAD,EAAU;AAAA,IAAA,IAAA,YAAA,CAAA;;AACtD,IAAA,IAAI,eAACC,cAAc,CAACD,KAAD,CAAnB,EAA4B;AAC1B,MAAA,IAAIE,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;QACAC,OAAO,CAACC,IAAR,CACE,iGADF,CAAA,CAAA;AAGD,OAAA;;AACD,MAAA,OAAON,KAAP,CAAA;AACD,KATqD;;;IAYtD,IAAMO,UAAU,GAAG,CAAaZ,WAAAA,CAAAA,MAAAA,CAAAA,KAAb,GAAsBK,KAAtB,KAAA,IAAA,IAAsBA,KAAtB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAA,YAAA,GAAsBA,KAAK,CAAEQ,KAA7B,MAAsB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAcC,SAApC,CAAA,CAA+CC,MAA/C,CAAsDC,OAAtD,CAA+DC,CAAAA,IAA/D,CAAoE,GAApE,CAAnB,CAAA;IAEA,oBAAOC,YAAY,CAACb,KAAD,EAAQ;MACzBS,SAAS,EAAEF,UADc;;AAAA,KAAR,CAAnB,CAAA;AAID,GAlBsB,CAAvB,CAAA;AAoBA,EAAA,OAAOO,GAACtB,CAAAA,YAAY,CAACuB,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAErB,KAAR;IAAaC,QAAGC,EAAAA,cAAAA;AAAhB,GAAtB,CAAP,CAAA;AACD;;AC9BYoB,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAAA,EAAA,IAAA,WAAA,CAAA;;AAC3C,EAAA,OAAA,CAAA,WAAA,GAAOC,UAAU,CAAC1B,YAAD,CAAjB,qDAAmCD,uBAAnC,CAAA;AACD;;;;"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@wise/components-theming",
+  "version": "0.1.0",
+  "description": "Provides theming support for the Wise Design system components",
+  "license": "Apache-2.0",
+  "keywords": [
+    "wise",
+    "jestconfig"
+  ],
+  "repository": {
+    "type": "git",
+    "fullname": "transferwise/neptune-web",
+    "url": "git+https://github.com/transferwise/neptune-web.git"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-import-assertions": "7.20.0",
+    "@rollup/plugin-typescript": "9.0.2",
+    "@types/react": "17.0.52",
+    "@types/react-dom": "17.0.18",
+    "rollup": "3.2.3",
+    "rollup-plugin-ts": "3.0.2",
+    "typescript": "4.8.4"
+  },
+  "peerDependencies": {
+    "react": ">=16.14",
+    "react-dom": ">=16.14"
+  },
+  "scripts": {
+    "build": "rollup --config --sourcemap --configPlugin rollup-plugin-ts",
+    "test": "jest --env=jsdom --maxWorkers=4 --config=../../node_modules/@transferwise/test-config/jest.config.js",
+    "test:watch": "jest --watch --env=jsdom --config=../../node_modules/@transferwise/test-config/jest.config.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/es/index.d.ts",
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "gitHead": "e7f68c481710db55b16fbf9fbe22f3dd0014d29a"
+}

package/src/ThemeProvider.spec.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { ThemeProvider } from './ThemeProvider';
+import {} from './const';
+
+const InValidElement = React.createContext<undefined>(undefined).Provider;
+const ComponentWithClassname = ({
+  className,
+  ...rest
+}: {
+  className?: string;
+  [key: string]: string | undefined;
+}) => <div className={className} {...rest} />;
+
+describe('ThemeProvider', () => {
+  it('appends theme to children', () => {
+    render(
+      <ThemeProvider theme="light">
+        <div>children 1</div>
+        <div>children 2</div>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByText('children 1')).toHaveClass('np-theme-light');
+    expect(screen.getByText('children 2')).toHaveClass('np-theme-light');
+  });
+
+  it('concatenate className with children', () => {
+    render(
+      <ThemeProvider theme="light">
+        <div className="other class names">children</div>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByText('children')).toHaveClass('np-theme-light other class names');
+  });
+
+  it('can nest theme providers', () => {
+    render(
+      <ThemeProvider theme="light">
+        <div>light</div>
+        <ThemeProvider theme="personal">
+          <div>personal</div>
+          <ThemeProvider theme="light">
+            <div>light</div>
+          </ThemeProvider>
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getAllByText('light')[0]).toHaveClass('np-theme-light');
+    expect(screen.getByText('personal')).toHaveClass('np-theme-personal');
+    expect(screen.getAllByText('light')[1]).toHaveClass('np-theme-light');
+  });
+
+  it('can append className to a component', () => {
+    render(
+      <ThemeProvider theme="personal">
+        <ComponentWithClassname data-testid="button">Click me!</ComponentWithClassname>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByTestId('button')).toHaveClass('np-theme-personal');
+  });
+
+  it('displays console warning when children is not a valid React element', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => jest.fn());
+
+    render(
+      <ThemeProvider theme="personal">
+        <InValidElement value={undefined}>
+          <ComponentWithClassname data-testid="button">Click me!</ComponentWithClassname>
+        </InValidElement>
+        ,
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByTestId('button')).not.toHaveClass('np-theme-personal');
+    // eslint-disable-next-line no-console
+    expect(console.warn).toHaveBeenCalledWith(
+      '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',
+    );
+  });
+});

package/src/ThemeProvider.tsx

@@ -0,0 +1,36 @@
+import { Children, cloneElement, createContext, isValidElement, PropsWithChildren } from 'react';
+
+import { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';
+
+export const ThemeContext = createContext<ComponentTheme>(DEFAULT_COMPONENT_THEME);
+
+type ThemeProviderProps = PropsWithChildren<{
+  theme: ComponentTheme | undefined;
+}>;
+
+export const ThemeProvider = ({
+  theme = DEFAULT_COMPONENT_THEME,
+  children,
+}: ThemeProviderProps) => {
+  const themedChildren = Children.map(children, (child) => {
+    if (!isValidElement(child)) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!',
+        );
+      }
+      return child;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const classNames = [`np-theme-${theme}`, child?.props?.className].filter(Boolean).join(' ');
+
+    return cloneElement(child, {
+      className: classNames,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any);
+  });
+
+  return <ThemeContext.Provider value={theme}>{themedChildren}</ThemeContext.Provider>;
+};

package/src/const.ts

@@ -0,0 +1,5 @@
+export const componentThemes = ['light', 'personal'] as const;
+
+export type ComponentTheme = typeof componentThemes[number];
+
+export const DEFAULT_COMPONENT_THEME = 'light' as const;

package/src/index.ts

@@ -0,0 +1,4 @@
+export type { ComponentTheme } from './const';
+
+export { ThemeProvider } from './ThemeProvider';
+export { useTheme } from './useTheme';

package/src/useTheme.spec.tsx

@@ -0,0 +1,27 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { ThemeProvider } from './ThemeProvider';
+import { useTheme } from './useTheme';
+
+describe('useTheme', () => {
+  it('returns default light theme', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme());
+
+    expect(current).toStrictEqual('light');
+  });
+
+  it('returns provided theme', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'personal' as const,
+      },
+    });
+
+    expect(current).toStrictEqual('personal');
+  });
+});

package/src/useTheme.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+
+import { ThemeContext } from './ThemeProvider';
+import { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';
+
+export const useTheme = (): ComponentTheme => {
+  return useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;
+};