Web: Added Theme Provider.

packages/asc-web-components/src/components/ThemeProvider/README.md

@@ -0,0 +1,32 @@
+# ThemeProvider
+
+Custom theme provider based on [Theme Provider](https://www.styled-components.com/docs/advanced).
+
+List of themes:
+
+- [Base theme](https://dotnet.onlyoffice.com:8084/?path=/story/components-themeprovider--base-theme)
+- [Dark theme](https://dotnet.onlyoffice.com:8084/?path=/story/components-themeprovider--dark-theme)
+
+You can change the CSS styles in the theme, and they will be applied to all children components of ThemeProvider
+
+### Usage
+
+```js
+import { ThemeProvider, Themes } from "app-components";
+```
+
+```jsx
+const newTheme = {...Themes.Base, color: "red"}
+
+<ThemeProvider theme={newTheme}>
+  <Box>
+    <Text>Base theme</Text>
+  </Box>
+</ThemeProvider>;
+```
+
+### ThemeProvider Properties
+
+| Props   |   Type   | Required | Values |    Default    | Description                                 |
+| ------- | :------: | :------: | :----: | :-----------: | ------------------------------------------- |
+| `theme` | `object` |    ✅    |   -    | `Base styles` | Applies a theme to all children components |

packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ThemeProvider as Provider } from "styled-components";
+import GlobalStyle from "../../utils/globalStyles";
+
+const ThemeProvider = props => {
+  const { theme, children } = props;
+
+  return (
+    <Provider theme={theme}>
+      <GlobalStyle />
+      {children}
+    </Provider>
+  );
+};
+
+ThemeProvider.propTypes = {
+  children: PropTypes.any,
+  theme: PropTypes.object
+};
+
+export default ThemeProvider;

packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.stories.js

@@ -0,0 +1,90 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import ThemeProvider from ".";
+import withReadme from "storybook-readme/with-readme";
+import Readme from "./README.md";
+import { BooleanValue } from "react-values";
+import Box from "../Box/";
+import Text from "../Text";
+import JSONPretty from "react-json-pretty";
+import { Base, Dark } from "../../themes";
+import Heading from "../Heading";
+import Checkbox from "../Checkbox";
+
+const LightTheme = {
+  backgroundColor: "#FFF",
+  fontFamily: "sans-serif",
+  text: { color: "#333" }
+};
+
+const DarkTheme = {
+  backgroundColor: "#1F2933",
+  fontFamily: "Open Sans",
+  text: { color: "#E4E7EB" }
+};
+
+storiesOf("Components|ThemeProvider", module)
+  .addDecorator(withReadme(Readme))
+  .add("Default", () => (
+    <BooleanValue>
+      {({ value, toggle }) => (
+        <Box displayProp="flex" paddingProp="16px" alignItems="center">
+          <ThemeProvider theme={value ? DarkTheme : LightTheme}>
+            <Checkbox
+              checked={value}
+              onChange={e => toggle(e.target.value)}
+              label={value ? "Dark" : "Light"}
+            />
+          </ThemeProvider>
+        </Box>
+      )}
+    </BooleanValue>
+  ));
+storiesOf("Components|ThemeProvider", module)
+  .addParameters({ options: { showAddonPanel: false } })
+  .add("Base theme", () => {
+    const jsonTheme = {
+      main: "line-height:1.5;background:#FFF;overflow:auto;",
+      error: "line-height:1.5;background:#FFF;overflow:auto;",
+      key: "color:#444;",
+      string: "color:#00873D;"
+    };
+    return (
+      <ThemeProvider theme={LightTheme}>
+        <Box paddingProp={"16px"}>
+          <Heading>Base theme:</Heading>
+          <Text as="div" bold fontSize="14px">
+            <JSONPretty
+              id="json-pretty"
+              data={JSON.stringify(Base)}
+              theme={jsonTheme}
+            />
+          </Text>
+        </Box>
+      </ThemeProvider>
+    );
+  });
+storiesOf("Components|ThemeProvider", module)
+  .addParameters({ options: { showAddonPanel: false } })
+  .add("Dark theme", () => {
+    const jsonTheme = {
+      main: "line-height:1.5;background:#1F2933;overflow:auto;",
+      error: "line-height:1.5;background:#1F2933;overflow:auto;",
+      key: "color:#1F97CA;",
+      string: "color:#00873D;"
+    };
+    return (
+      <ThemeProvider theme={DarkTheme}>
+        <Box paddingProp={"16px"}>
+          <Heading>Dark theme:</Heading>
+          <Text as="div" bold color="#1F97CA" fontSize="14px">
+            <JSONPretty
+              id="json-pretty"
+              data={JSON.stringify(Dark)}
+              theme={jsonTheme}
+            />
+          </Text>
+        </Box>
+      </ThemeProvider>
+    );
+  });

packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.test.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { mount } from "enzyme";
+import ThemeProvider from ".";
+
+const theme = {
+  color: "#333",
+  backgroundColor: "#fff"
+};
+
+describe("<ThemeProvider />", () => {
+  it("ThemeProvider renders without error", () => {
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <label>label</label>
+      </ThemeProvider>
+    );
+    expect(wrapper).toExist();
+  });
+});

packages/asc-web-components/src/components/ThemeProvider/index.js

@@ -0,0 +1 @@
+export default from "./ThemeProvider";