feat(smart-app): implement complete mobile app MVP

- App.tsx: full navigation (Auth stack + Main tabs with 5 screens)
- Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen
- HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors
- MapScreen: interactive map with layer toggles (6 layers)
- MarketplaceScreen: categories (6), products (5), search
- ChatScreen: AI chat with quick prompts (4), bot responses
- ProfileScreen: user info, stats, menu (9 items), logout
- AlertsScreen: alert list with severity, acknowledge
- SensorsScreen: sensor list with type filters (6 types), search
- ZonesScreen: zone cards with stats
- SettingsScreen: language picker (FR/EN/ES/DE), privacy, about
- Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n
- Hooks: useSensors, useAlerts, useNotifications, useLocation
- Components: Card, Button, LoadingSpinner, ErrorBoundary, Header
- Services: iotService, notificationService (with axios API client)
- Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN)
- Theme: colors.ts with full design system (Blue Ocean palette)
- Ditto: fixed MongoDB connection, new JWT secrets, official gateway image
This commit is contained in:
Eric FELIXINE
2026-06-01 18:00:35 -04:00
parent 08ca495bde
commit e30ae8ed09
35578 changed files with 3703534 additions and 43 deletions

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2018 Callstack
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,245 @@
<p align="center">
<img alt="react-theme-provider" src="./assets/theme-provider-logo.png" width="496">
</p>
---
[![Build Status][build-badge]][build]
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]
## About
`@callstack/react-theme-provider` is a set of utilities that help you create your own theming system in few easy steps.
You can use it to customize colors, fonts, etc.
## Features
- Works in **React** and **React Native**
- `createTheming(defaultTheme)` - factory returns:
- `ThemeProvider` - component
- `withTheme` - Higher Order Component
- `useTheme` - React Hook
## Examples
- built-in example for web react - ['/examples/web'](/examples/web)
- [![Edit v6o562k6l7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/v6o562k6l7)
## Getting started
### Installation
```sh
npm install --save @callstack/react-theme-provider
```
or using yarn
```sh
yarn add @callstack/react-theme-provider
```
### Usage
Import `createTheming` from the library to create a theming object.
```js
import { createTheming } from '@callstack/react-theme-provider';
const { ThemeProvider, withTheme, useTheme } = createTheming(defaultTheme);
```
Then wrap your code in `ThemeProvider` component to make it available to all components.
```js
<ThemeProvider>
<App />
</ThemeProvider>
```
You can access the theme data in your components by wrapping it in `withTheme` HOC:
```js
class App extends React.Component {
render() {
return <div style={{ color: props.theme.primaryColor }}>Hello</div>;
}
}
export default withTheme(App);
```
Another usage for functional component:
```js
const App = ({ theme }) => (
<div style={{ color: theme.primaryColor }}>
Hello
</div>
);
export withTheme(App);
```
You can also use the [hooks](https://reactjs.org/docs/hooks-intro.html) based API:
```js
function App() {
const theme = useTheme();
return <div style={{ color: theme.primaryColor }}>Hello</div>;
}
```
### Injected props
It will inject the following props to the component:
- `theme` - our theme object.
- `getWrappedInstance` - exposed by some HOCs like react-redux's `connect`.
Use it to get the ref of the underlying element.
### Injecting theme by a direct prop
You can also override `theme` provided by `ThemeProvider` by setting `theme` prop on the component wrapped in `withTheme` HOC.
Just like this:
```js
const Button = withTheme(({ theme }) => (
<div style={{ color: theme.primaryColor }}>Click me</div>
));
const App = () => (
<ThemeProvider theme={{ primaryColor: 'red' }}>
<Button theme={{ primaryColor: 'green' }} />
</ThemeProvider>
);
```
In this example Button will have green text.
## `createTheming`
**type:**
```js
<T, S>(defaultTheme: T) => {
ThemeProvider: ThemeProviderType<T>,
withTheme: WithThemeType<T, S>,
}
```
This is more advanced replacement to classic importing `ThemeProvider` and `withTheme` directly from the library.
Thanks to it you can create your own ThemeProvider with any default theme.
Returns instance of `ThemeProvider` component and `withTheme` HOC.
You can use this factory to create a singleton with your instances of `ThemeProvider` and `withTheme`.
> **Note:** `ThemeProvider` and `withTheme` generated by `createTheming` always will use different context so make sure you are using matching `withTheme`!
> If you acidentially import `withTheme` from `@callstack/react-theme-provider` instead of your theming instance it won't work.
### Arguments
- `defaultTheme` - default theme object
### Benefits
- Possibility to define `flow` types for your theme
- Possibility to pass default theme
- You can use multiple `ThemeProvider`s in your app without any conflicts.
### Usage
```js
// theming.js
import { createTheming } from '@callstack/react-theme-provider';
const { ThemeProvider, withTheme } = createTheming({
primaryColor: 'red',
secondaryColor: 'green',
});
export { ThemeProvider, withTheme };
//App.js
import { ThemeProvider, withTheme } from './theming';
```
### Helpers
#### `ThemeProvider`
**type:**
```js
type ThemeProviderType<Theme> = React.ComponentType<{
children: React.Node,
theme?: Theme,
}>;
```
Component you have to use to provide the theme to any component wrapped in `withTheme` HOC.
##### Props
-`theme` - your theme object
#### `withTheme`
**type:**
```js
type WithThemeType<Theme> = React.ComponentType<{ theme: Theme }>
```
Higher Order Component which takes your component as an argument and injects `theme` prop into it.
#### `useTheme`
**type:**
```js
type UseTheme = (overrides?: PartialTheme) => Theme;
```
Hook which takes theme overrides and returns a theme object.
Example:
```js
function App(props) {
const theme = useTheme(props.theme);
return <div style={{ color: theme.primaryColor }}>Hello</div>;
}
```
## Applying a custom theme to a component
If you want to change the theme for a certain component, you can directly pass the theme prop to the component. The theme passed as the prop is merged with the theme from the Provider.
```js
import * as React from 'react';
import MyButton from './MyButton';
export default function ButtonExample() {
return <MyButton theme={{ roundness: 3 }}>Press me</MyButton>;
}
```
## Gotchas
The `ThemeProvider` exposes the theme to the components via [React's context API](https://reactjs.org/docs/context.html),
which means that the component must be in the same tree as the `ThemeProvider`. Some React Native components will render a
different tree such as a `Modal`, in which case the components inside the `Modal` won't be able to access the theme. The work
around is to get the theme using the `withTheme` HOC and pass it down to the components as props, or expose it again with the
exported `ThemeProvider` component.
[build-badge]: https://img.shields.io/circleci/project/github/callstack/react-theme-provider/master.svg?style=flat-square
[build]: https://circleci.com/gh/callstack/react-theme-provider
[version-badge]: https://img.shields.io/npm/v/@callstack/react-theme-provider.svg?style=flat-square
[package]: https://www.npmjs.com/package/@callstack/react-theme-provider
[license-badge]: https://img.shields.io/npm/l/react-theme-provider.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[chat-badge]: https://img.shields.io/badge/chat-slack-brightgreen.svg?style=flat-square&colorB=E01563
[chat]: https://slack.callstack.com/

View File

@@ -0,0 +1,42 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function createThemeProvider(defaultTheme, ThemeContext) {
var _class, _temp;
return _temp = _class =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(ThemeProvider, _React$Component);
function ThemeProvider() {
return _React$Component.apply(this, arguments) || this;
}
var _proto = ThemeProvider.prototype;
_proto.render = function render() {
return React.createElement(ThemeContext.Provider, {
value: this.props.theme
}, this.props.children);
};
return ThemeProvider;
}(React.Component), _defineProperty(_class, "defaultProps", {
theme: defaultTheme
}), _temp;
}
var _default = createThemeProvider;
exports.default = _default;
//# sourceMappingURL=createThemeProvider.js.map

View File

@@ -0,0 +1,29 @@
/* @flow */
import * as React from 'react';
export type ThemeProviderType<T> = React.ComponentType<{
children: React.Node,
theme?: T,
}>;
function createThemeProvider<T>(
defaultTheme: T,
ThemeContext: React.Context<T>
): ThemeProviderType<T> {
return class ThemeProvider extends React.Component<*> {
static defaultProps = {
theme: defaultTheme,
};
render() {
return (
<ThemeContext.Provider value={this.props.theme}>
{this.props.children}
</ThemeContext.Provider>
);
}
};
}
export default createThemeProvider;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/createThemeProvider.js"],"names":["createThemeProvider","defaultTheme","ThemeContext","render","props","theme","children","React","Component"],"mappings":";;;;;AAEA;;;;;;;;AAOA,SAASA,mBAAT,CACEC,YADF,EAEEC,YAFF,EAGwB;AAAA;;AACtB;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA,WAKEC,MALF,GAKE,kBAAS;AACP,aACE,oBAAC,YAAD,CAAc,QAAd;AAAuB,QAAA,KAAK,EAAE,KAAKC,KAAL,CAAWC;AAAzC,SACG,KAAKD,KAAL,CAAWE,QADd,CADF;AAKD,KAXH;;AAAA;AAAA,IAAmCC,KAAK,CAACC,SAAzC,2CACwB;AACpBH,IAAAA,KAAK,EAAEJ;AADa,GADxB;AAaD;;eAEcD,mB","sourcesContent":["/* @flow */\n\nimport * as React from 'react';\n\nexport type ThemeProviderType<T> = React.ComponentType<{\n children: React.Node,\n theme?: T,\n}>;\n\nfunction createThemeProvider<T>(\n defaultTheme: T,\n ThemeContext: React.Context<T>\n): ThemeProviderType<T> {\n return class ThemeProvider extends React.Component<*> {\n static defaultProps = {\n theme: defaultTheme,\n };\n\n render() {\n return (\n <ThemeContext.Provider value={this.props.theme}>\n {this.props.children}\n </ThemeContext.Provider>\n );\n }\n };\n}\n\nexport default createThemeProvider;\n"],"file":"createThemeProvider.js"}

View File

@@ -0,0 +1,38 @@
"use strict";
exports.__esModule = true;
exports.default = createTheming;
var React = _interopRequireWildcard(require("react"));
var _deepmerge = _interopRequireDefault(require("deepmerge"));
var _createThemeProvider = _interopRequireDefault(require("./createThemeProvider"));
var _createWithTheme = _interopRequireDefault(require("./createWithTheme"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function createTheming(defaultTheme) {
var ThemeContext = React.createContext(defaultTheme);
var ThemeProvider = (0, _createThemeProvider.default)(defaultTheme, ThemeContext);
var withTheme = (0, _createWithTheme.default)(ThemeProvider, ThemeContext);
var useTheme = function useTheme(overrides) {
var theme = React.useContext(ThemeContext);
var result = React.useMemo(function () {
return theme && overrides ? (0, _deepmerge.default)(theme, overrides) : theme || overrides;
}, [theme, overrides]);
return result;
};
return {
ThemeContext: ThemeContext,
ThemeProvider: ThemeProvider,
withTheme: withTheme,
useTheme: useTheme
};
}
//# sourceMappingURL=createTheming.js.map

View File

@@ -0,0 +1,49 @@
/* @flow */
import * as React from 'react';
import deepmerge from 'deepmerge';
import createThemeProvider from './createThemeProvider';
import createWithTheme from './createWithTheme';
import type { WithThemeType } from './createWithTheme';
import type { ThemeProviderType } from './createThemeProvider';
import type { $DeepShape } from './types';
export type ThemingType<T> = {
ThemeProvider: ThemeProviderType<T>,
withTheme: WithThemeType<T>,
useTheme(overrides?: $DeepShape<T>): T,
};
export default function createTheming<T: Object>(
defaultTheme: T
): ThemingType<T> {
const ThemeContext: React.Context<T> = React.createContext(defaultTheme);
const ThemeProvider: ThemeProviderType<T> = createThemeProvider(
defaultTheme,
ThemeContext
);
const withTheme: WithThemeType<T> = createWithTheme(
ThemeProvider,
ThemeContext
);
const useTheme = (overrides?: $DeepShape<T>): T => {
const theme = React.useContext(ThemeContext);
const result = React.useMemo(
() =>
theme && overrides ? deepmerge(theme, overrides) : theme || overrides,
[theme, overrides]
);
return result;
};
return {
ThemeContext,
ThemeProvider,
withTheme,
useTheme,
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/createTheming.js"],"names":["createTheming","defaultTheme","ThemeContext","React","createContext","ThemeProvider","withTheme","useTheme","overrides","theme","useContext","result","useMemo"],"mappings":";;;;;AAEA;;AACA;;AACA;;AACA;;;;;;AAWe,SAASA,aAAT,CACbC,YADa,EAEG;AAChB,MAAMC,YAA8B,GAAGC,KAAK,CAACC,aAAN,CAAoBH,YAApB,CAAvC;AAEA,MAAMI,aAAmC,GAAG,kCAC1CJ,YAD0C,EAE1CC,YAF0C,CAA5C;AAKA,MAAMI,SAA2B,GAAG,8BAClCD,aADkC,EAElCH,YAFkC,CAApC;;AAKA,MAAMK,QAAQ,GAAG,SAAXA,QAAW,CAACC,SAAD,EAAkC;AACjD,QAAMC,KAAK,GAAGN,KAAK,CAACO,UAAN,CAAiBR,YAAjB,CAAd;AACA,QAAMS,MAAM,GAAGR,KAAK,CAACS,OAAN,CACb;AAAA,aACEH,KAAK,IAAID,SAAT,GAAqB,wBAAUC,KAAV,EAAiBD,SAAjB,CAArB,GAAmDC,KAAK,IAAID,SAD9D;AAAA,KADa,EAGb,CAACC,KAAD,EAAQD,SAAR,CAHa,CAAf;AAMA,WAAOG,MAAP;AACD,GATD;;AAWA,SAAO;AACLT,IAAAA,YAAY,EAAZA,YADK;AAELG,IAAAA,aAAa,EAAbA,aAFK;AAGLC,IAAAA,SAAS,EAATA,SAHK;AAILC,IAAAA,QAAQ,EAARA;AAJK,GAAP;AAMD","sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport deepmerge from 'deepmerge';\nimport createThemeProvider from './createThemeProvider';\nimport createWithTheme from './createWithTheme';\nimport type { WithThemeType } from './createWithTheme';\nimport type { ThemeProviderType } from './createThemeProvider';\nimport type { $DeepShape } from './types';\n\nexport type ThemingType<T> = {\n ThemeProvider: ThemeProviderType<T>,\n withTheme: WithThemeType<T>,\n useTheme(overrides?: $DeepShape<T>): T,\n};\n\nexport default function createTheming<T: Object>(\n defaultTheme: T\n): ThemingType<T> {\n const ThemeContext: React.Context<T> = React.createContext(defaultTheme);\n\n const ThemeProvider: ThemeProviderType<T> = createThemeProvider(\n defaultTheme,\n ThemeContext\n );\n\n const withTheme: WithThemeType<T> = createWithTheme(\n ThemeProvider,\n ThemeContext\n );\n\n const useTheme = (overrides?: $DeepShape<T>): T => {\n const theme = React.useContext(ThemeContext);\n const result = React.useMemo(\n () =>\n theme && overrides ? deepmerge(theme, overrides) : theme || overrides,\n [theme, overrides]\n );\n\n return result;\n };\n\n return {\n ThemeContext,\n ThemeProvider,\n withTheme,\n useTheme,\n };\n}\n"],"file":"createTheming.js"}

View File

@@ -0,0 +1,96 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _deepmerge = _interopRequireDefault(require("deepmerge"));
var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var createWithTheme = function createWithTheme(ThemeProvider, ThemeContext) {
return function withTheme(Comp) {
var ThemedComponent =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(ThemedComponent, _React$Component);
function ThemedComponent() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_defineProperty(_assertThisInitialized(_this), "_previous", void 0);
_defineProperty(_assertThisInitialized(_this), "_merge", function (a, b) {
var previous = _this._previous;
if (previous && previous.a === a && previous.b === b) {
return previous.result;
}
var result = a && b && a !== b ? (0, _deepmerge.default)(a, b) : a || b;
_this._previous = {
a: a,
b: b,
result: result
};
return result;
});
return _this;
}
var _proto = ThemedComponent.prototype;
_proto.render = function render() {
var _this2 = this;
var _this$props = this.props,
_reactThemeProviderForwardedRef = _this$props._reactThemeProviderForwardedRef,
rest = _objectWithoutPropertiesLoose(_this$props, ["_reactThemeProviderForwardedRef"]);
return React.createElement(ThemeContext.Consumer, null, function (theme) {
return React.createElement(Comp, _extends({}, rest, {
theme: _this2._merge(theme, rest.theme),
ref: _reactThemeProviderForwardedRef
}));
});
};
return ThemedComponent;
}(React.Component);
var ResultComponent = React.forwardRef(function (props, ref) {
return React.createElement(ThemedComponent, _extends({}, props, {
_reactThemeProviderForwardedRef: ref
}));
});
ResultComponent.displayName = "withTheme(" + (Comp.displayName || Comp.name) + ")";
(0, _hoistNonReactStatics.default)(ResultComponent, Comp);
return ResultComponent;
};
};
var _default = createWithTheme;
exports.default = _default;
//# sourceMappingURL=createWithTheme.js.map

View File

@@ -0,0 +1,67 @@
/* @flow */
import * as React from 'react';
import deepmerge from 'deepmerge';
import hoistNonReactStatics from 'hoist-non-react-statics';
import type { ThemeProviderType } from './createThemeProvider';
import type { $DeepShape } from './types';
export type WithThemeType<T> = <P, C: React.ComponentType<P>>(
Comp: C
) => C &
React.ComponentType<
$Diff<React.ElementConfig<C>, { theme: T }> & { theme?: $DeepShape<T> }
>;
const createWithTheme = <T: Object, S: $DeepShape<T>>(
ThemeProvider: ThemeProviderType<T>,
ThemeContext: React.Context<T>
) =>
function withTheme(Comp: *) {
class ThemedComponent extends React.Component<*> {
_previous: ?{ a: T, b: ?S, result: T };
_merge = (a: T, b: ?S) => {
const previous = this._previous;
if (previous && previous.a === a && previous.b === b) {
return previous.result;
}
const result = a && b && a !== b ? deepmerge(a, b) : a || b;
this._previous = { a, b, result };
return result;
};
render() {
const { _reactThemeProviderForwardedRef, ...rest } = this.props;
return (
<ThemeContext.Consumer>
{theme => (
<Comp
{...rest}
theme={this._merge(theme, rest.theme)}
ref={_reactThemeProviderForwardedRef}
/>
)}
</ThemeContext.Consumer>
);
}
}
const ResultComponent = React.forwardRef((props, ref) => (
<ThemedComponent {...props} _reactThemeProviderForwardedRef={ref} />
));
ResultComponent.displayName = `withTheme(${Comp.displayName || Comp.name})`;
hoistNonReactStatics(ResultComponent, Comp);
return (ResultComponent: any);
};
export default createWithTheme;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/createWithTheme.js"],"names":["createWithTheme","ThemeProvider","ThemeContext","withTheme","Comp","ThemedComponent","a","b","previous","_previous","result","render","props","_reactThemeProviderForwardedRef","rest","theme","_merge","React","Component","ResultComponent","forwardRef","ref","displayName","name"],"mappings":";;;;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAYA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CACtBC,aADsB,EAEtBC,YAFsB;AAAA,SAItB,SAASC,SAAT,CAAmBC,IAAnB,EAA4B;AAAA,QACpBC,eADoB;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;;AAAA;;AAAA,iEAIf,UAACC,CAAD,EAAOC,CAAP,EAAiB;AACxB,cAAMC,QAAQ,GAAG,MAAKC,SAAtB;;AAEA,cAAID,QAAQ,IAAIA,QAAQ,CAACF,CAAT,KAAeA,CAA3B,IAAgCE,QAAQ,CAACD,CAAT,KAAeA,CAAnD,EAAsD;AACpD,mBAAOC,QAAQ,CAACE,MAAhB;AACD;;AAED,cAAMA,MAAM,GAAGJ,CAAC,IAAIC,CAAL,IAAUD,CAAC,KAAKC,CAAhB,GAAoB,wBAAUD,CAAV,EAAaC,CAAb,CAApB,GAAsCD,CAAC,IAAIC,CAA1D;AAEA,gBAAKE,SAAL,GAAiB;AAAEH,YAAAA,CAAC,EAADA,CAAF;AAAKC,YAAAA,CAAC,EAADA,CAAL;AAAQG,YAAAA,MAAM,EAANA;AAAR,WAAjB;AAEA,iBAAOA,MAAP;AACD,SAhBuB;;AAAA;AAAA;;AAAA;;AAAA,aAkBxBC,MAlBwB,GAkBxB,kBAAS;AAAA;;AAAA,0BAC8C,KAAKC,KADnD;AAAA,YACCC,+BADD,eACCA,+BADD;AAAA,YACqCC,IADrC;;AAGP,eACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAAAC,KAAK;AAAA,iBACJ,oBAAC,IAAD,eACMD,IADN;AAEE,YAAA,KAAK,EAAE,MAAI,CAACE,MAAL,CAAYD,KAAZ,EAAmBD,IAAI,CAACC,KAAxB,CAFT;AAGE,YAAA,GAAG,EAAEF;AAHP,aADI;AAAA,SADR,CADF;AAWD,OAhCuB;;AAAA;AAAA,MACII,KAAK,CAACC,SADV;;AAmC1B,QAAMC,eAAe,GAAGF,KAAK,CAACG,UAAN,CAAiB,UAACR,KAAD,EAAQS,GAAR;AAAA,aACvC,oBAAC,eAAD,eAAqBT,KAArB;AAA4B,QAAA,+BAA+B,EAAES;AAA7D,SADuC;AAAA,KAAjB,CAAxB;AAIAF,IAAAA,eAAe,CAACG,WAAhB,mBAA2ClB,IAAI,CAACkB,WAAL,IAAoBlB,IAAI,CAACmB,IAApE;AAEA,uCAAqBJ,eAArB,EAAsCf,IAAtC;AAEA,WAAQe,eAAR;AACD,GAhDqB;AAAA,CAAxB;;eAkDenB,e","sourcesContent":["/* @flow */\n\nimport * as React from 'react';\nimport deepmerge from 'deepmerge';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\n\nimport type { ThemeProviderType } from './createThemeProvider';\nimport type { $DeepShape } from './types';\n\nexport type WithThemeType<T> = <P, C: React.ComponentType<P>>(\n Comp: C\n) => C &\n React.ComponentType<\n $Diff<React.ElementConfig<C>, { theme: T }> & { theme?: $DeepShape<T> }\n >;\n\nconst createWithTheme = <T: Object, S: $DeepShape<T>>(\n ThemeProvider: ThemeProviderType<T>,\n ThemeContext: React.Context<T>\n) =>\n function withTheme(Comp: *) {\n class ThemedComponent extends React.Component<*> {\n _previous: ?{ a: T, b: ?S, result: T };\n\n _merge = (a: T, b: ?S) => {\n const previous = this._previous;\n\n if (previous && previous.a === a && previous.b === b) {\n return previous.result;\n }\n\n const result = a && b && a !== b ? deepmerge(a, b) : a || b;\n\n this._previous = { a, b, result };\n\n return result;\n };\n\n render() {\n const { _reactThemeProviderForwardedRef, ...rest } = this.props;\n\n return (\n <ThemeContext.Consumer>\n {theme => (\n <Comp\n {...rest}\n theme={this._merge(theme, rest.theme)}\n ref={_reactThemeProviderForwardedRef}\n />\n )}\n </ThemeContext.Consumer>\n );\n }\n }\n\n const ResultComponent = React.forwardRef((props, ref) => (\n <ThemedComponent {...props} _reactThemeProviderForwardedRef={ref} />\n ));\n\n ResultComponent.displayName = `withTheme(${Comp.displayName || Comp.name})`;\n\n hoistNonReactStatics(ResultComponent, Comp);\n\n return (ResultComponent: any);\n };\n\nexport default createWithTheme;\n"],"file":"createWithTheme.js"}

View File

@@ -0,0 +1,10 @@
"use strict";
exports.__esModule = true;
var _createTheming = _interopRequireDefault(require("./createTheming"));
exports.createTheming = _createTheming.default;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1,6 @@
/* @flow */
import createTheming from './createTheming';
export { createTheming };
export type { ThemingType } from './createTheming';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;AAEA","sourcesContent":["/* @flow */\n\nimport createTheming from './createTheming';\n\nexport { createTheming };\nexport type { ThemingType } from './createTheming';\n"],"file":"index.js"}

View File

@@ -0,0 +1,2 @@
"use strict";
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1,5 @@
/* @flow */
export type $DeepShape<O: Object> = $Shape<
$ObjMap<O, (<V: Object>(V) => $DeepShape<V>) & (<V>(V) => V)>
>;

View File

@@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}

View File

@@ -0,0 +1,129 @@
# [3.3.0](https://github.com/TehShrike/deepmerge/releases/tag/v3.3.0)
- Enumerable Symbol properties are now copied [#151](https://github.com/TehShrike/deepmerge/pull/151)
# [3.2.1](https://github.com/TehShrike/deepmerge/releases/tag/v3.2.1)
- bumping dev dependency versions to try to shut up bogus security warnings from Github/npm [#149](https://github.com/TehShrike/deepmerge/pull/149)
# [3.2.0](https://github.com/TehShrike/deepmerge/releases/tag/v3.2.0)
- feature: added the [`customMerge`](https://github.com/TehShrike/deepmerge#custommerge) option [#133](https://github.com/TehShrike/deepmerge/pull/133)
# [3.1.0](https://github.com/TehShrike/deepmerge/releases/tag/v3.1.0)
- typescript typing: make the `all` function generic [#129](https://github.com/TehShrike/deepmerge/pull/129)
# [3.0.0](https://github.com/TehShrike/deepmerge/releases/tag/v3.0.0)
- drop ES module build [#123](https://github.com/TehShrike/deepmerge/issues/123)
# [2.2.1](https://github.com/TehShrike/deepmerge/releases/tag/v2.2.1)
- bug: typescript export type was wrong [#121](https://github.com/TehShrike/deepmerge/pull/121)
# [2.2.0](https://github.com/TehShrike/deepmerge/releases/tag/v2.2.0)
- feature: added TypeScript typings [#119](https://github.com/TehShrike/deepmerge/pull/119)
# [2.1.1](https://github.com/TehShrike/deepmerge/releases/tag/v2.1.1)
- documentation: Rename "methods" to "api", note ESM syntax [#103](https://github.com/TehShrike/deepmerge/pull/103)
- documentation: Fix grammar [#107](https://github.com/TehShrike/deepmerge/pull/107)
- documentation: Restructure headers for clarity + some wording tweaks [108](https://github.com/TehShrike/deepmerge/pull/108) + [109](https://github.com/TehShrike/deepmerge/pull/109)
# [2.1.0](https://github.com/TehShrike/deepmerge/releases/tag/v2.1.0)
- feature: Support a custom `isMergeableObject` function [#96](https://github.com/TehShrike/deepmerge/pull/96)
- documentation: note a Webpack bug that some users might need to work around [#100](https://github.com/TehShrike/deepmerge/pull/100)
# [2.0.1](https://github.com/TehShrike/deepmerge/releases/tag/v2.0.1)
- documentation: fix the old array merge algorithm in the readme. [#84](https://github.com/TehShrike/deepmerge/pull/84)
# [2.0.0](https://github.com/TehShrike/deepmerge/releases/tag/v2.0.0)
- breaking: the array merge algorithm has changed from a complicated thing to `target.concat(source).map(element => cloneUnlessOtherwiseSpecified(element, optionsArgument))`
- breaking: The `clone` option now defaults to `true`
- feature: `merge.all` now accepts an array of any size, even 0 or 1 elements
See [pull request 77](https://github.com/TehShrike/deepmerge/pull/77).
# [1.5.2](https://github.com/TehShrike/deepmerge/releases/tag/v1.5.2)
- fix: no longer attempts to merge React elements [#76](https://github.com/TehShrike/deepmerge/issues/76)
# [1.5.1](https://github.com/TehShrike/deepmerge/releases/tag/v1.5.1)
- bower support: officially dropping bower support. If you use bower, please depend on the [unpkg distribution](https://unpkg.com/deepmerge/dist/umd.js). See [#63](https://github.com/TehShrike/deepmerge/issues/63)
# [1.5.0](https://github.com/TehShrike/deepmerge/releases/tag/v1.5.0)
- bug fix: merging objects into arrays was allowed, and doesn't make any sense. [#65](https://github.com/TehShrike/deepmerge/issues/65) published as a feature release instead of a patch because it is a decent behavior change.
# [1.4.4](https://github.com/TehShrike/deepmerge/releases/tag/v1.4.4)
- bower support: updated `main` in bower.json
# [1.4.3](https://github.com/TehShrike/deepmerge/releases/tag/v1.4.3)
- bower support: inline is-mergeable-object in a new CommonJS build, so that people using both bower and CommonJS can bundle the library [0b34e6](https://github.com/TehShrike/deepmerge/commit/0b34e6e95f989f2fc8091d25f0d291c08f3d2d24)
# [1.4.2](https://github.com/TehShrike/deepmerge/releases/tag/v1.4.2)
- performance: bump is-mergeable-object dependency version for a slight performance improvement [5906c7](https://github.com/TehShrike/deepmerge/commit/5906c765d691d48e83d76efbb0d4b9ca150dc12c)
# [1.4.1](https://github.com/TehShrike/deepmerge/releases/tag/v1.4.1)
- documentation: fix unpkg link [acc45b](https://github.com/TehShrike/deepmerge/commit/acc45be85519c1df906a72ecb24764b622d18d47)
# [1.4.0](https://github.com/TehShrike/deepmerge/releases/tag/v1.4.0)
- api: instead of only exporting a UMD module, expose a UMD module with `pkg.main`, a CJS module with `pkg.browser`, and an ES module with `pkg.module` [#62](https://github.com/TehShrike/deepmerge/pull/62)
# [1.3.2](https://github.com/TehShrike/deepmerge/releases/tag/v1.3.2)
- documentation: note the minified/gzipped file sizes [56](https://github.com/TehShrike/deepmerge/pull/56)
- documentation: make data structures more readable in merge example: pull request [57](https://github.com/TehShrike/deepmerge/pull/57)
# [1.3.1](https://github.com/TehShrike/deepmerge/releases/tag/v1.3.1)
- documentation: clarify and test some array merging documentation: pull request [51](https://github.com/TehShrike/deepmerge/pull/51)
# [1.3.0](https://github.com/TehShrike/deepmerge/releases/tag/v1.3.0)
- feature: `merge.all`, a merge function that merges any number of objects: pull request [50](https://github.com/TehShrike/deepmerge/pull/50)
# [1.2.0](https://github.com/TehShrike/deepmerge/releases/tag/v1.2.0)
- fix: an error that would be thrown when an array would be merged onto a truthy non-array value: pull request [46](https://github.com/TehShrike/deepmerge/pull/46)
- feature: the ability to clone: Issue [28](https://github.com/TehShrike/deepmerge/issues/28), pull requests [44](https://github.com/TehShrike/deepmerge/pull/44) and [48](https://github.com/TehShrike/deepmerge/pull/48)
- maintenance: added tests + travis to `.npmignore`: pull request [47](https://github.com/TehShrike/deepmerge/pull/47)
# [1.1.1](https://github.com/TehShrike/deepmerge/releases/tag/v1.1.1)
- fix an issue where an error was thrown when merging an array onto a non-array: [Pull request 46](https://github.com/TehShrike/deepmerge/pull/46)
# [1.1.0](https://github.com/TehShrike/deepmerge/releases/tag/v1.1.0)
- allow consumers to specify their own array merging algorithm: [Pull request 37](https://github.com/TehShrike/deepmerge/pull/37)
# [1.0.3](https://github.com/TehShrike/deepmerge/releases/tag/v1.0.3)
- adding bower.json back: [Issue 38](https://github.com/TehShrike/deepmerge/pull/38)
- updating keywords and Github links in package.json [bc3898e](https://github.com/TehShrike/deepmerge/commit/bc3898e587a56f74591328f40f656b0152c1d5eb)
# [1.0.2](https://github.com/TehShrike/deepmerge/releases/tag/v1.0.2)
- Updating the readme: dropping bower, testing that the example works: [7102fc](https://github.com/TehShrike/deepmerge/commit/7102fcc4ddec11e2d33205866f9f18df14e5aeb5)
# [1.0.1](https://github.com/TehShrike/deepmerge/releases/tag/v1.0.1)
- `null`, dates, and regular expressions are now properly merged in arrays: [Issue 18](https://github.com/TehShrike/deepmerge/pull/18), plus commit: [ef1c6b](https://github.com/TehShrike/deepmerge/commit/ef1c6bac8350ba12a24966f0bc7da02560827586)
# 1.0.0
- Should only be a patch change, because this module is READY. [Issue 15](https://github.com/TehShrike/deepmerge/issues/15)
- Regular expressions are now treated like primitive values when merging: [Issue 30](https://github.com/TehShrike/deepmerge/pull/30)
- Dates are now treated like primitives when merging: [Issue 31](https://github.com/TehShrike/deepmerge/issues/31)

View File

@@ -0,0 +1,117 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.deepmerge = factory());
}(this, function () { 'use strict';
var isMergeableObject = function isMergeableObject(value) {
return isNonNullObject(value)
&& !isSpecial(value)
};
function isNonNullObject(value) {
return !!value && typeof value === 'object'
}
function isSpecial(value) {
var stringValue = Object.prototype.toString.call(value);
return stringValue === '[object RegExp]'
|| stringValue === '[object Date]'
|| isReactElement(value)
}
// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
function isReactElement(value) {
return value.$$typeof === REACT_ELEMENT_TYPE
}
function emptyTarget(val) {
return Array.isArray(val) ? [] : {}
}
function cloneUnlessOtherwiseSpecified(value, options) {
return (options.clone !== false && options.isMergeableObject(value))
? deepmerge(emptyTarget(value), value, options)
: value
}
function defaultArrayMerge(target, source, options) {
return target.concat(source).map(function(element) {
return cloneUnlessOtherwiseSpecified(element, options)
})
}
function getMergeFunction(key, options) {
if (!options.customMerge) {
return deepmerge
}
var customMerge = options.customMerge(key);
return typeof customMerge === 'function' ? customMerge : deepmerge
}
function getEnumerableOwnPropertySymbols(target) {
return Object.getOwnPropertySymbols
? Object.getOwnPropertySymbols(target).filter(function(symbol) {
return target.propertyIsEnumerable(symbol)
})
: []
}
function getKeys(target) {
return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))
}
function mergeObject(target, source, options) {
var destination = {};
if (options.isMergeableObject(target)) {
getKeys(target).forEach(function(key) {
destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
});
}
getKeys(source).forEach(function(key) {
if (!options.isMergeableObject(source[key]) || !target[key]) {
destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
} else {
destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
}
});
return destination
}
function deepmerge(target, source, options) {
options = options || {};
options.arrayMerge = options.arrayMerge || defaultArrayMerge;
options.isMergeableObject = options.isMergeableObject || isMergeableObject;
var sourceIsArray = Array.isArray(source);
var targetIsArray = Array.isArray(target);
var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
if (!sourceAndTargetTypesMatch) {
return cloneUnlessOtherwiseSpecified(source, options)
} else if (sourceIsArray) {
return options.arrayMerge(target, source, options)
} else {
return mergeObject(target, source, options)
}
}
deepmerge.all = function deepmergeAll(array, options) {
if (!Array.isArray(array)) {
throw new Error('first argument should be an array')
}
return array.reduce(function(prev, next) {
return deepmerge(prev, next, options)
}, {})
};
var deepmerge_1 = deepmerge;
return deepmerge_1;
}));

View File

@@ -0,0 +1,16 @@
declare function deepmerge<T>(x: Partial<T>, y: Partial<T>, options?: deepmerge.Options): T;
declare function deepmerge<T1, T2>(x: Partial<T1>, y: Partial<T2>, options?: deepmerge.Options): T1 & T2;
declare namespace deepmerge {
export interface Options {
arrayMerge?(target: any[], source: any[], options?: Options): any[];
clone?: boolean;
customMerge?: (key: string, options?: Options) => ((x: any, y: any) => any) | undefined;
isMergeableObject?(value: object): boolean;
}
export function all (objects: object[], options?: Options): object;
export function all<T> (objects: Partial<T>[], options?: Options): T;
}
export = deepmerge;

View File

@@ -0,0 +1,84 @@
var defaultIsMergeableObject = require('is-mergeable-object')
function emptyTarget(val) {
return Array.isArray(val) ? [] : {}
}
function cloneUnlessOtherwiseSpecified(value, options) {
return (options.clone !== false && options.isMergeableObject(value))
? deepmerge(emptyTarget(value), value, options)
: value
}
function defaultArrayMerge(target, source, options) {
return target.concat(source).map(function(element) {
return cloneUnlessOtherwiseSpecified(element, options)
})
}
function getMergeFunction(key, options) {
if (!options.customMerge) {
return deepmerge
}
var customMerge = options.customMerge(key)
return typeof customMerge === 'function' ? customMerge : deepmerge
}
function getEnumerableOwnPropertySymbols(target) {
return Object.getOwnPropertySymbols
? Object.getOwnPropertySymbols(target).filter(function(symbol) {
return target.propertyIsEnumerable(symbol)
})
: []
}
function getKeys(target) {
return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target))
}
function mergeObject(target, source, options) {
var destination = {}
if (options.isMergeableObject(target)) {
getKeys(target).forEach(function(key) {
destination[key] = cloneUnlessOtherwiseSpecified(target[key], options)
})
}
getKeys(source).forEach(function(key) {
if (!options.isMergeableObject(source[key]) || !target[key]) {
destination[key] = cloneUnlessOtherwiseSpecified(source[key], options)
} else {
destination[key] = getMergeFunction(key, options)(target[key], source[key], options)
}
})
return destination
}
function deepmerge(target, source, options) {
options = options || {}
options.arrayMerge = options.arrayMerge || defaultArrayMerge
options.isMergeableObject = options.isMergeableObject || defaultIsMergeableObject
var sourceIsArray = Array.isArray(source)
var targetIsArray = Array.isArray(target)
var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray
if (!sourceAndTargetTypesMatch) {
return cloneUnlessOtherwiseSpecified(source, options)
} else if (sourceIsArray) {
return options.arrayMerge(target, source, options)
} else {
return mergeObject(target, source, options)
}
}
deepmerge.all = function deepmergeAll(array, options) {
if (!Array.isArray(array)) {
throw new Error('first argument should be an array')
}
return array.reduce(function(prev, next) {
return deepmerge(prev, next, options)
}, {})
}
module.exports = deepmerge

View File

@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2012 James Halliday, Josh Duff, and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View File

@@ -0,0 +1,43 @@
{
"name": "deepmerge",
"description": "A library for deep (recursive) merging of Javascript objects",
"keywords": [
"merge",
"deep",
"extend",
"copy",
"clone",
"recursive"
],
"version": "3.3.0",
"homepage": "https://github.com/TehShrike/deepmerge",
"repository": {
"type": "git",
"url": "git://github.com/TehShrike/deepmerge.git"
},
"main": "dist/umd.js",
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "rollup -c",
"test": "npm run build && tape test/*.js && jsmd readme.md && npm run test:typescript",
"test:typescript": "tsc --noEmit test/typescript.ts && ts-node test/typescript.ts",
"size": "npm run build && uglifyjs --compress --mangle -- ./dist/umd.js | gzip -c | wc -c"
},
"devDependencies": {
"@types/node": "^8.10.49",
"is-mergeable-object": "1.1.0",
"is-plain-object": "^2.0.4",
"jsmd": "^1.0.1",
"rollup": "^1.15.5",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-node-resolve": "^5.0.2",
"tape": "^4.10.2",
"ts-node": "7.0.1",
"typescript": "=2.2.2",
"uglify-js": "^3.6.0"
},
"license": "MIT",
"dependencies": {}
}

View File

@@ -0,0 +1,264 @@
# deepmerge
Merges the enumerable properties of two or more objects deeply.
> UMD bundle is 646B minified+gzipped
## Getting Started
### Example Usage
<!--js
const merge = require('./')
-->
```js
const x = {
foo: { bar: 3 },
array: [{
does: 'work',
too: [ 1, 2, 3 ]
}]
}
const y = {
foo: { baz: 4 },
quux: 5,
array: [{
does: 'work',
too: [ 4, 5, 6 ]
}, {
really: 'yes'
}]
}
const output = {
foo: {
bar: 3,
baz: 4
},
array: [{
does: 'work',
too: [ 1, 2, 3 ]
}, {
does: 'work',
too: [ 4, 5, 6 ]
}, {
really: 'yes'
}],
quux: 5
}
merge(x, y) // => output
```
### Installation
With [npm](http://npmjs.org) do:
```sh
npm install deepmerge
```
deepmerge can be used directly in the browser without the use of package managers/bundlers as well: [UMD version from unpkg.com](https://unpkg.com/deepmerge/dist/umd.js).
### Include
deepmerge exposes a CommonJS entry point:
```
const merge = require('deepmerge')
```
The ESM entry point was dropped due to a [Webpack bug](https://github.com/webpack/webpack/issues/6584).
# API
## `merge(x, y, [options])`
Merge two objects `x` and `y` deeply, returning a new merged object with the
elements from both `x` and `y`.
If an element at the same key is present for both `x` and `y`, the value from
`y` will appear in the result.
Merging creates a new object, so that neither `x` or `y` is modified.
**Note:** By default, arrays are merged by concatenating them.
## `merge.all(arrayOfObjects, [options])`
Merges any number of objects into a single result object.
```js
const foobar = { foo: { bar: 3 } }
const foobaz = { foo: { baz: 4 } }
const bar = { bar: 'yay!' }
merge.all([ foobar, foobaz, bar ]) // => { foo: { bar: 3, baz: 4 }, bar: 'yay!' }
```
## Options
### `arrayMerge`
There are multiple ways to merge two arrays, below are a few examples but you can also create your own custom function.
#### Overwrite Array
Overwrites the existing array values completely rather than concatenating them
```js
const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray
merge(
[1, 2, 3],
[3, 2, 1],
{ arrayMerge: overwriteMerge }
) // => [3, 2, 1]
```
#### Combine Array
Combine arrays, such as overwriting existing defaults while also adding/keeping values that are different names
To use the legacy (pre-version-2.0.0) array merging algorithm, use the following:
```js
const emptyTarget = value => Array.isArray(value) ? [] : {}
const clone = (value, options) => merge(emptyTarget(value), value, options)
const combineMerge = (target, source, options) => {
const destination = target.slice()
source.forEach((item, index) => {
if (typeof destination[index] === 'undefined') {
const cloneRequested = options.clone !== false
const shouldClone = cloneRequested && options.isMergeableObject(item)
destination[index] = shouldClone ? clone(item, options) : item
} else if (options.isMergeableObject(item)) {
destination[index] = merge(target[index], item, options)
} else if (target.indexOf(item) === -1) {
destination.push(item)
}
})
return destination
}
merge(
[{ a: true }],
[{ b: true }, 'ah yup'],
{ arrayMerge: combineMerge }
) // => [{ a: true, b: true }, 'ah yup']
```
### `isMergeableObject`
By default, deepmerge clones every property from almost every kind of object.
You may not want this, if your objects are of special types, and you want to copy the whole object instead of just copying its properties.
You can accomplish this by passing in a function for the `isMergeableObject` option.
If you only want to clone properties of plain objects, and ignore all "special" kinds of instantiated objects, you probably want to drop in [`is-plain-object`](https://github.com/jonschlinkert/is-plain-object).
```js
const isPlainObject = require('is-plain-object')
function SuperSpecial() {
this.special = 'oh yeah man totally'
}
const instantiatedSpecialObject = new SuperSpecial()
const target = {
someProperty: {
cool: 'oh for sure'
}
}
const source = {
someProperty: instantiatedSpecialObject
}
const defaultOutput = merge(target, source)
defaultOutput.someProperty.cool // => 'oh for sure'
defaultOutput.someProperty.special // => 'oh yeah man totally'
defaultOutput.someProperty instanceof SuperSpecial // => false
const customMergeOutput = merge(target, source, {
isMergeableObject: isPlainObject
})
customMergeOutput.someProperty.cool // => undefined
customMergeOutput.someProperty.special // => 'oh yeah man totally'
customMergeOutput.someProperty instanceof SuperSpecial // => true
```
### `customMerge`
Specifies a function which can be used to override the default merge behavior for a property, based on the property name.
The `customMerge` function will be passed the key for each property, and should return the function which should be used to merge the values for that property.
It may also return undefined, in which case the default merge behaviour will be used.
```js
const alex = {
name: {
first: 'Alex',
last: 'Alexson'
},
pets: ['Cat', 'Parrot']
}
const tony = {
name: {
first: 'Tony',
last: 'Tonison'
},
pets: ['Dog']
}
const mergeNames = (nameA, nameB) => `${nameA.first} and ${nameB.first}`
const options = {
customMerge: (key) => {
if (key === 'name') {
return mergeNames
}
}
}
const result = merge(alex, tony, options)
result.name // => 'Alex and Tony'
result.pets // => ['Cat', 'Parrot', 'Dog']
```
### `clone`
*Deprecated.*
Defaults to `true`.
If `clone` is `false` then child objects will be copied directly instead of being cloned. This was the default behavior before version 2.x.
# Testing
With [npm](http://npmjs.org) do:
```sh
npm test
```
# License
MIT

View File

@@ -0,0 +1,19 @@
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
const pkg = require(`./package.json`)
export default {
input: `index.js`,
plugins: [
commonjs(),
resolve(),
],
output: [
{
name: 'deepmerge',
file: pkg.main,
format: `umd`
},
],
}

View File

@@ -0,0 +1,69 @@
{
"name": "@callstack/react-theme-provider",
"version": "3.0.9",
"description": "Theme provider for react and react-native applications",
"main": "./lib/index.js",
"typings": "./typings/index.d.ts",
"files": [
"lib",
"typings"
],
"scripts": {
"flow": "flow",
"typescript": "tsc",
"lint": "eslint .",
"prepare": "babel src --out-dir lib --ignore '**/__tests__/**' --source-maps --delete-dir-on-start && flow-copy-source -i '**/__tests__/**' src lib",
"test": "jest",
"example": "yarn link && cd examples/web && yarn link @callstack/react-theme-provider && yarn start"
},
"repository": {
"type": "git",
"url": "git+https://github.com/callstack/react-theme-provider.git"
},
"keywords": [
"react",
"react-native",
"theme",
"provider"
],
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/callstack/react-theme-provider/issues"
},
"homepage": "https://github.com/callstack/react-theme-provider#readme",
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.3.4",
"@babel/plugin-proposal-class-properties": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@callstack/eslint-config": "^3.0.2",
"@types/react": "^16.8.8",
"eslint": "^5.15.1",
"flow-bin": "^0.94.0",
"flow-copy-source": "^2.0.3",
"jest": "^24.5.0",
"prettier": "^1.16.4",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"typescript": "^3.3.3333"
},
"peerDependencies": {
"react": ">=16.3.0"
},
"dependencies": {
"deepmerge": "^3.2.0",
"hoist-non-react-statics": "^3.3.0"
},
"jest": {
"moduleNameMapper": {
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
},
"testPathIgnorePatterns": [
"/node_modules/",
"/typings/"
]
}
}

View File

@@ -0,0 +1,57 @@
import * as React from 'react';
import { createTheming } from '../..';
type Theme = {
primaryColor: string;
accentColor: string;
backgroundColor: string;
textColor: string;
secondaryColor: string;
};
const themes: { [key: string]: Theme } = {
default: {
primaryColor: '#FFA72A',
accentColor: '#458622',
backgroundColor: '#FFC777',
textColor: '#504f4d',
secondaryColor: '#7F5315',
},
dark: {
primaryColor: '#FFA72A',
accentColor: '#458622',
backgroundColor: '#504f4d',
textColor: '#FFC777',
secondaryColor: '#252525',
},
};
const { ThemeProvider, withTheme } = createTheming<Theme>(themes.default);
type TitleComponentProps = {
title: string;
theme: Theme;
};
const TitleComponent = ({ title, theme }: TitleComponentProps) => (
<div
style={{
backgroundColor: theme.backgroundColor,
color: theme.primaryColor,
}}
>
{title}
</div>
);
const ThemedTitle = withTheme(TitleComponent);
const App = () => (
<ThemeProvider theme={themes.default}>
<ThemedTitle
title="React Theme Provider"
theme={{ primaryColor: 'pink' }}
/>
<ThemedTitle title="Second title" />
</ThemeProvider>
);

View File

@@ -0,0 +1,80 @@
// Type definitions for hoist-non-react-statics 3.3
// Project: https://github.com/mridgway/hoist-non-react-statics#readme
// Definitions by: JounQin <https://github.com/JounQin>, James Reggio <https://github.com/jamesreggio>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
import * as React from 'react';
interface REACT_STATICS {
childContextTypes: true;
contextType: true;
contextTypes: true;
defaultProps: true;
displayName: true;
getDefaultProps: true;
getDerivedStateFromError: true;
getDerivedStateFromProps: true;
mixins: true;
propTypes: true;
type: true;
}
interface KNOWN_STATICS {
name: true;
length: true;
prototype: true;
caller: true;
callee: true;
arguments: true;
arity: true;
}
interface MEMO_STATICS {
$$typeof: true;
compare: true;
defaultProps: true;
displayName: true;
propTypes: true;
type: true;
}
interface FORWARD_REF_STATICS {
$$typeof: true;
render: true;
defaultProps: true;
displayName: true;
propTypes: true;
}
declare namespace hoistNonReactStatics {
type NonReactStatics<
S extends React.ComponentType<any>,
C extends {
[key: string]: true;
} = {}
> = {
[key in Exclude<
keyof S,
S extends React.MemoExoticComponent<any>
? keyof MEMO_STATICS | keyof C
: S extends React.ForwardRefExoticComponent<any>
? keyof FORWARD_REF_STATICS | keyof C
: keyof REACT_STATICS | keyof KNOWN_STATICS | keyof C
>]: S[key]
};
}
declare function hoistNonReactStatics<
T extends React.ComponentType<any>,
S extends React.ComponentType<any>,
C extends {
[key: string]: true;
} = {}
>(
TargetComponent: T,
SourceComponent: S,
customStatic?: C
): T & hoistNonReactStatics.NonReactStatics<S, C>;
export = hoistNonReactStatics;

View File

@@ -0,0 +1,21 @@
// Type definitions for @callstack/react-theme-provider 1.0.2
// TypeScript version 3.0.3
import * as React from 'react';
import hoistNonReactStatics = require('./hoist-non-react-statics');
type $Without<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
type $DeepPartial<T> = { [P in keyof T]?: $DeepPartial<T[P]> };
export type ThemingType<Theme> = {
ThemeProvider: React.ComponentType<{children: React.ReactNode, theme?: Theme }>;
withTheme: <Props extends { theme: Theme }, C>(
WrappedComponent: React.ComponentType<Props> & C
) => React.ComponentType<
$Without<Props, 'theme'> & { theme?: $DeepPartial<Theme> }
> &
hoistNonReactStatics.NonReactStatics<typeof WrappedComponent>;
useTheme<T = Theme>(overrides?: $DeepPartial<T>): T;
};
export const createTheming: <Theme>(defaultTheme: Theme) => ThemingType<Theme>;