@transferwise/components 41.6.1 → 41.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [41.7.0](https://github.com/transferwise/neptune-web/compare/@transferwise/components@41.6.1...@transferwise/components@41.7.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))
+
+
+
+
+
 ## [41.6.1](https://github.com/transferwise/neptune-web/compare/@transferwise/components@41.6.0...@transferwise/components@41.6.1) (2022-11-01)
 
 **Note:** Version bump only for package @transferwise/components

package/build/es/no-polyfill/common/hooks/index.js

@@ -1 +1 @@
-export{default as useClientWidth}from"./useClientWidth";export{default as useConditionalListener}from"./useConditionalListener";export{default as useDirection}from"./useDirection";export{default as useHasIntersected}from"./useHasIntersected";export{default as useLayout}from"./useLayout";export{default as useTheme}from"./useTheme";
+export{default as useClientWidth}from"./useClientWidth";export{default as useConditionalListener}from"./useConditionalListener";export{default as useDirection}from"./useDirection";export{default as useHasIntersected}from"./useHasIntersected";export{default as useLayout}from"./useLayout";

package/build/es/no-polyfill/provider/index.js

@@ -1 +1 @@
-export{DirectionProvider}from"./direction";export{ThemeProvider}from"./theme";export{default}from"./Provider";
+export{DirectionProvider}from"./direction";export{default}from"./Provider";

package/build/es/polyfill/common/hooks/index.js

@@ -1 +1 @@
-export{default as useClientWidth}from"./useClientWidth";export{default as useConditionalListener}from"./useConditionalListener";export{default as useDirection}from"./useDirection";export{default as useHasIntersected}from"./useHasIntersected";export{default as useLayout}from"./useLayout";export{default as useTheme}from"./useTheme";
+export{default as useClientWidth}from"./useClientWidth";export{default as useConditionalListener}from"./useConditionalListener";export{default as useDirection}from"./useDirection";export{default as useHasIntersected}from"./useHasIntersected";export{default as useLayout}from"./useLayout";

package/build/es/polyfill/provider/index.js

@@ -1 +1 @@
-export{DirectionProvider}from"./direction";export{ThemeProvider}from"./theme";export{default}from"./Provider";
+export{DirectionProvider}from"./direction";export{default}from"./Provider";

package/build/types/common/hooks/index.d.ts

@@ -3,4 +3,3 @@ export { default as useConditionalListener } from "./useConditionalListener";
 export { default as useDirection } from "./useDirection";
 export { default as useHasIntersected } from "./useHasIntersected";
 export { default as useLayout } from "./useLayout";
-export { default as useTheme } from "./useTheme";

package/build/types/provider/index.d.ts

@@ -1,3 +1,2 @@
 export { DirectionProvider } from "./direction";
-export { ThemeProvider } from "./theme";
 export { default } from "./Provider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "41.6.1",
+  "version": "41.7.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "main": "./build/umd/polyfill/main.js",
@@ -121,5 +121,5 @@
     "**/chokidar/glob-parent": "5.1.2",
     "**/fast-glob/glob-parent": "5.1.2"
   },
-  "gitHead": "2af38e1118c398fd5c910b8201167fd03a68f1ed"
+  "gitHead": "e7f68c481710db55b16fbf9fbe22f3dd0014d29a"
 }

package/build/es/no-polyfill/common/hocs/index.js

@@ -1 +0,0 @@
-export{default as withTheme}from"./theme";

package/build/es/no-polyfill/common/hocs/theme/index.js

@@ -1 +0,0 @@
-export{withTheme as default}from"./withTheme";

package/build/es/no-polyfill/common/hocs/theme/withTheme.js

@@ -1,2 +0,0 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{useTheme}from"../../hooks";// eslint-disable-next-line @typescript-eslint/no-explicit-any
-import{jsx as _jsx}from"react/jsx-runtime";function getDisplayName(a){return a.displayName||a.name||"Component"}export function withTheme(a){var b=function(b){var c=useTheme();return/*#__PURE__*/_jsx(a,_objectSpread({theme:c},b))};return b.displayName="withTheme(".concat(getDisplayName(a),")"),b.WrappedComponent=a,b}

package/build/es/no-polyfill/common/hocs/theme/withTheme.spec.js

@@ -1 +0,0 @@
-import{render,screen}from"@testing-library/react";import{Theme}from"../..";import{ThemeProvider}from"../../../provider";import{withTheme}from"./withTheme";import{jsx as _jsx}from"react/jsx-runtime";var Component=withTheme(function(a){var b=a.theme,c=a.className;return/*#__PURE__*/_jsx("div",{className:c,"data-testid":"themed","data-theme":b})});describe("withTheme",function(){it("returns default light theme",function(){render(/*#__PURE__*/_jsx(Component,{className:"test-class"}));var a=screen.getByTestId("themed");expect(a).toHaveClass("test-class"),expect(a).toHaveAttribute("data-theme",Theme.LIGHT)}),it("returns provided theme",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(Component,{})})),expect(screen.getByTestId("themed")).toHaveAttribute("data-theme",Theme.NAVY)}),it("returns closest theme provider value",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:/*#__PURE__*/_jsx(Component,{})})})),expect(screen.getByTestId("themed")).toHaveAttribute("data-theme",Theme.DARK)})});

package/build/es/no-polyfill/common/hooks/useTheme/index.js

@@ -1 +0,0 @@
-export{useTheme as default}from"./useTheme";

package/build/es/no-polyfill/common/hooks/useTheme/useTheme.js

@@ -1 +0,0 @@
-import{useContext}from"react";import{ThemeContext}from"../../../provider/theme/ThemeProvider";export var useTheme=function(){return useContext(ThemeContext)};

package/build/es/no-polyfill/common/hooks/useTheme/useTheme.spec.js

@@ -1 +0,0 @@
-import{renderHook}from"@testing-library/react-hooks";import{Theme}from"../../../common/theme";import{ThemeProvider}from"../../../provider";import{useTheme}from"./useTheme";describe("useTheme",function(){it("returns default light theme",function(){var a=renderHook(function(){return useTheme()}),b=a.result.current;expect(b).toStrictEqual(Theme.LIGHT)}),it("returns provided theme",function(){var a=renderHook(function(){return useTheme()},{wrapper:ThemeProvider,initialProps:{theme:Theme.NAVY}}),b=a.result.current;expect(b).toStrictEqual(Theme.NAVY)})});

package/build/es/no-polyfill/provider/theme/ThemeProvider.js

@@ -1,2 +0,0 @@
-import{Children,cloneElement,createContext,isValidElement}from"react";import{Theme}from"../../common/theme";import{jsx as _jsx}from"react/jsx-runtime";export var ThemeContext=/*#__PURE__*/createContext(Theme.LIGHT);export var ThemeProvider=function(a){var b=a.theme,c=a.children,d=Children.map(c,function(a){var c;if(!/*#__PURE__*/isValidElement(a))return"production"!==process.env.NODE_ENV&&console.warn("[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!"),a;// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-var d=["np-theme-".concat(b),null===a||void 0===a||null===(c=a.props)||void 0===c?void 0:c.className].filter(Boolean).join(" ");return/*#__PURE__*/cloneElement(a,{className:d})});return/*#__PURE__*/_jsx(ThemeContext.Provider,{value:b,children:d})};

package/build/es/no-polyfill/provider/theme/ThemeProvider.spec.js

@@ -1,2 +0,0 @@
-import{render,screen}from"@testing-library/react";import{DirectionProvider}from"..";import{Button}from"../..";import{Direction}from"../../common/direction";import{Theme}from"../../common/theme";import{ThemeProvider}from"./ThemeProvider";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";describe("ThemeProvider",function(){it("appends theme to children",function(){render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.LIGHT,children:[/*#__PURE__*/_jsx("div",{children:"children 1"}),/*#__PURE__*/_jsx("div",{children:"children 2"})]})),expect(screen.getByText("children 1")).toHaveClass("np-theme-light"),expect(screen.getByText("children 2")).toHaveClass("np-theme-light")}),it("concatenate className with children",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.LIGHT,children:/*#__PURE__*/_jsx("div",{className:"other class names",children:"children"})})),expect(screen.getByText("children")).toHaveClass("np-theme-light other class names")}),it("can nest theme providers",function(){render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.LIGHT,children:[/*#__PURE__*/_jsx("div",{children:"light"}),/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.NAVY,children:[/*#__PURE__*/_jsx("div",{children:"navy"}),/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:/*#__PURE__*/_jsx("div",{children:"dark"})})]})]})),expect(screen.getByText("light")).toHaveClass("np-theme-light"),expect(screen.getByText("navy")).toHaveClass("np-theme-navy"),expect(screen.getByText("dark")).toHaveClass("np-theme-dark")}),it("can append className to a component",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(Button,{"data-testid":"button",onClick:function onClick(){/** */},children:"Click me!"})})),expect(screen.getByTestId("button")).toHaveClass("np-theme-navy")}),it("displays console warning when children is not a valid React element",function(){// eslint-disable-next-line no-console
-jest.spyOn(console,"warn").mockImplementation(function(){return jest.fn()}),render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.NAVY,children:[/*#__PURE__*/_jsx(DirectionProvider,{direction:Direction.LTR,children:/*#__PURE__*/_jsx(Button,{"data-testid":"button",onClick:function onClick(){/** */},children:"Click me!"})}),","]})),expect(screen.getByTestId("button")).not.toHaveClass("np-theme-navy"),expect(console.warn).toHaveBeenCalledWith("[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!")})});

package/build/es/no-polyfill/provider/theme/index.js

@@ -1 +0,0 @@
-export{ThemeContext,ThemeProvider}from"./ThemeProvider";

package/build/es/polyfill/common/hocs/index.js

@@ -1 +0,0 @@
-export{default as withTheme}from"./theme";

package/build/es/polyfill/common/hocs/theme/index.js

@@ -1 +0,0 @@
-export{withTheme as default}from"./withTheme";

package/build/es/polyfill/common/hocs/theme/withTheme.js

@@ -1,2 +0,0 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.function.name.js";import{useTheme}from"../../hooks";// eslint-disable-next-line @typescript-eslint/no-explicit-any
-import{jsx as _jsx}from"react/jsx-runtime";function getDisplayName(a){return a.displayName||a.name||"Component"}export function withTheme(a){var b=function(b){var c=useTheme();return/*#__PURE__*/_jsx(a,_objectSpread({theme:c},b))};return b.displayName="withTheme(".concat(getDisplayName(a),")"),b.WrappedComponent=a,b}

package/build/es/polyfill/common/hocs/theme/withTheme.spec.js

@@ -1 +0,0 @@
-import{render,screen}from"@testing-library/react";import{Theme}from"../..";import{ThemeProvider}from"../../../provider";import{withTheme}from"./withTheme";import{jsx as _jsx}from"react/jsx-runtime";var Component=withTheme(function(a){var b=a.theme,c=a.className;return/*#__PURE__*/_jsx("div",{className:c,"data-testid":"themed","data-theme":b})});describe("withTheme",function(){it("returns default light theme",function(){render(/*#__PURE__*/_jsx(Component,{className:"test-class"}));var a=screen.getByTestId("themed");expect(a).toHaveClass("test-class"),expect(a).toHaveAttribute("data-theme",Theme.LIGHT)}),it("returns provided theme",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(Component,{})})),expect(screen.getByTestId("themed")).toHaveAttribute("data-theme",Theme.NAVY)}),it("returns closest theme provider value",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:/*#__PURE__*/_jsx(Component,{})})})),expect(screen.getByTestId("themed")).toHaveAttribute("data-theme",Theme.DARK)})});

package/build/es/polyfill/common/hooks/useTheme/index.js

@@ -1 +0,0 @@
-export{useTheme as default}from"./useTheme";

package/build/es/polyfill/common/hooks/useTheme/useTheme.js

@@ -1 +0,0 @@
-import{useContext}from"react";import{ThemeContext}from"../../../provider/theme/ThemeProvider";export var useTheme=function(){return useContext(ThemeContext)};

package/build/es/polyfill/common/hooks/useTheme/useTheme.spec.js

@@ -1 +0,0 @@
-import{renderHook}from"@testing-library/react-hooks";import{Theme}from"../../../common/theme";import{ThemeProvider}from"../../../provider";import{useTheme}from"./useTheme";describe("useTheme",function(){it("returns default light theme",function(){var a=renderHook(function(){return useTheme()}),b=a.result.current;expect(b).toStrictEqual(Theme.LIGHT)}),it("returns provided theme",function(){var a=renderHook(function(){return useTheme()},{wrapper:ThemeProvider,initialProps:{theme:Theme.NAVY}}),b=a.result.current;expect(b).toStrictEqual(Theme.NAVY)})});

package/build/es/polyfill/provider/theme/ThemeProvider.js

@@ -1,2 +0,0 @@
-import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import{Children,cloneElement,createContext,isValidElement}from"react";import{Theme}from"../../common/theme";import{jsx as _jsx}from"react/jsx-runtime";export var ThemeContext=/*#__PURE__*/createContext(Theme.LIGHT);export var ThemeProvider=function(a){var b=a.theme,c=a.children,d=Children.map(c,function(a){var c;if(!/*#__PURE__*/isValidElement(a))return"production"!==process.env.NODE_ENV&&console.warn("[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!"),a;// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-var d=["np-theme-".concat(b),null===a||void 0===a||null===(c=a.props)||void 0===c?void 0:c.className].filter(Boolean).join(" ");return/*#__PURE__*/cloneElement(a,{className:d})});return/*#__PURE__*/_jsx(ThemeContext.Provider,{value:b,children:d})};

package/build/es/polyfill/provider/theme/ThemeProvider.spec.js

@@ -1,2 +0,0 @@
-import{render,screen}from"@testing-library/react";import{DirectionProvider}from"..";import{Button}from"../..";import{Direction}from"../../common/direction";import{Theme}from"../../common/theme";import{ThemeProvider}from"./ThemeProvider";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";describe("ThemeProvider",function(){it("appends theme to children",function(){render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.LIGHT,children:[/*#__PURE__*/_jsx("div",{children:"children 1"}),/*#__PURE__*/_jsx("div",{children:"children 2"})]})),expect(screen.getByText("children 1")).toHaveClass("np-theme-light"),expect(screen.getByText("children 2")).toHaveClass("np-theme-light")}),it("concatenate className with children",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.LIGHT,children:/*#__PURE__*/_jsx("div",{className:"other class names",children:"children"})})),expect(screen.getByText("children")).toHaveClass("np-theme-light other class names")}),it("can nest theme providers",function(){render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.LIGHT,children:[/*#__PURE__*/_jsx("div",{children:"light"}),/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.NAVY,children:[/*#__PURE__*/_jsx("div",{children:"navy"}),/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.DARK,children:/*#__PURE__*/_jsx("div",{children:"dark"})})]})]})),expect(screen.getByText("light")).toHaveClass("np-theme-light"),expect(screen.getByText("navy")).toHaveClass("np-theme-navy"),expect(screen.getByText("dark")).toHaveClass("np-theme-dark")}),it("can append className to a component",function(){render(/*#__PURE__*/_jsx(ThemeProvider,{theme:Theme.NAVY,children:/*#__PURE__*/_jsx(Button,{"data-testid":"button",onClick:function onClick(){/** */},children:"Click me!"})})),expect(screen.getByTestId("button")).toHaveClass("np-theme-navy")}),it("displays console warning when children is not a valid React element",function(){// eslint-disable-next-line no-console
-jest.spyOn(console,"warn").mockImplementation(function(){return jest.fn()}),render(/*#__PURE__*/_jsxs(ThemeProvider,{theme:Theme.NAVY,children:[/*#__PURE__*/_jsx(DirectionProvider,{direction:Direction.LTR,children:/*#__PURE__*/_jsx(Button,{"data-testid":"button",onClick:function onClick(){/** */},children:"Click me!"})}),","]})),expect(screen.getByTestId("button")).not.toHaveClass("np-theme-navy"),expect(console.warn).toHaveBeenCalledWith("[ThemeProvider] Trying to inject `className` to an invalid React element, this will be skipped!")})});

package/build/es/polyfill/provider/theme/index.js

@@ -1 +0,0 @@
-export{ThemeContext,ThemeProvider}from"./ThemeProvider";

package/build/types/common/hocs/index.d.ts

@@ -1 +0,0 @@
-export { default as withTheme } from './theme';

package/build/types/common/hocs/theme/index.d.ts

@@ -1 +0,0 @@
-export { withTheme as default } from './withTheme';

package/build/types/common/hocs/theme/withTheme.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { ThemeType } from '../..';
-declare type WithThemeProps = {
-    theme: ThemeType;
-};
-export declare type WrappedComponentProps<P> = Omit<P, keyof WithThemeProps>;
-export declare function withTheme<P extends WrappedComponentProps<P>>(WrappedComponent: React.ComponentType<P & WithThemeProps>): import("react").FC<P> & {
-    WrappedComponent: React.ComponentType<P & WithThemeProps>;
-};
-export {};

package/build/types/common/hocs/theme/withTheme.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/types/common/hooks/useTheme/index.d.ts

@@ -1 +0,0 @@
-export { useTheme as default } from './useTheme';

package/build/types/common/hooks/useTheme/useTheme.d.ts

@@ -1 +0,0 @@
-export declare const useTheme: () => import("../..").ThemeType;

package/build/types/common/hooks/useTheme/useTheme.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/types/provider/theme/ThemeProvider.d.ts

@@ -1,8 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { ThemeType } from '../../common/theme';
-export declare const ThemeContext: import("react").Context<ThemeType>;
-declare type ThemeProviderProps = PropsWithChildren<{
-    theme: ThemeType;
-}>;
-export declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
-export {};

package/build/types/provider/theme/ThemeProvider.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/types/provider/theme/index.d.ts

@@ -1 +0,0 @@
-export { ThemeContext, ThemeProvider } from "./ThemeProvider";