feat(DesignSystem): add DesignSystem provider (#238)

.commitlintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "scope-case": [2, "always", ["lower-case", "pascal-case", "camel-case"]]
+  }
+}

packages/react/src/components/design-system.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from 'react';
+import { DeviceContextProvider, DeviceContextProviderProps } from './device-context-provider/device-context-provider';
+import { IntlProvider, IntlProviderProps } from './internationalization-provider/internationalization-provider';
+import { ThemeWrapper, ThemeWrapperProps } from './theme-wrapper/theme-wrapper';
+
+export type DesignSystemProps = ThemeWrapperProps & DeviceContextProviderProps & IntlProviderProps;
+
+export const DesignSystem: FunctionComponent<DesignSystemProps> = (props) => (
+    <DeviceContextProvider staticDevice={props.staticDevice}>
+        <ThemeWrapper theme={props.theme} isolateStyles={props.isolateStyles}>
+            <IntlProvider language={props.language}>
+                {props.children}
+            </IntlProvider>
+        </ThemeWrapper>
+    </DeviceContextProvider>
+);

packages/react/src/components/device-context-provider/device-context-provider.tsx

@@ -1,10 +1,9 @@
-import React, { createContext, ReactElement, ReactNode, useContext, useEffect, useState } from 'react';
+import React, { createContext, FunctionComponent, useContext, useEffect, useState } from 'react';
 import { breakpoints, Breakpoints } from '../../tokens/breakpoints';
 
 export type DeviceType = 'desktop' | 'tablet' | 'mobile';
 
-interface Props {
-    children: ReactNode;
+export interface DeviceContextProviderProps {
     staticDevice?: DeviceType;
 }
 
@@ -63,7 +62,7 @@ const getDevice = (screenWidth: number): DeviceType => {
 
 const DeviceContext = createContext<DeviceContextProps>(getDeviceContext());
 
-export const DeviceContextProvider = ({ children, staticDevice }: Props): ReactElement => {
+export const DeviceContextProvider: FunctionComponent<DeviceContextProviderProps> = ({ children, staticDevice }) => {
     const [device, setDevice] = useState<DeviceContextProps>(getDeviceContext(staticDevice));
 
     function handleScreenResize(): void {

packages/react/src/components/internationalization-provider/internationalization-provider.tsx

@@ -1,9 +1,8 @@
 import { i18n as i18nType } from 'i18next';
-import React, { createContext, ReactElement, useContext, useEffect, useState } from 'react';
+import React, { createContext, FunctionComponent, useContext, useEffect, useState } from 'react';
 import { createI18n } from '../../i18n/i18n';
 
-interface IntlProviderProps {
-    children: ReactElement;
+export interface IntlProviderProps {
     language?: string;
 }
 
@@ -13,7 +12,7 @@ interface IntlContextProps {
 
 const IntlContext = createContext<IntlContextProps>({ i18n: createI18n() });
 
-export function IntlProvider({ children, language }: IntlProviderProps): ReactElement {
+export const IntlProvider: FunctionComponent<IntlProviderProps> = ({ children, language }) => {
     const [i18n] = useState(createI18n);
 
     useEffect(() => {
@@ -28,7 +27,7 @@ export function IntlProvider({ children, language }: IntlProviderProps): ReactEl
             {children}
         </IntlContext.Provider>
     );
-}
+};
 
 export function useIntlContext(): IntlContextProps {
     return useContext(IntlContext);

packages/react/src/components/theme-wrapper/theme-wrapper.tsx

@@ -1,15 +1,15 @@
-import React, { ReactElement, ReactNode } from 'react';
-import { ThemeProvider, ThemeProviderProps } from 'styled-components';
+import React, { FunctionComponent, ReactNode } from 'react';
+import { ThemeProvider } from 'styled-components';
 import { useStyle } from '../../styles';
 import { equisoftTheme, Theme } from '../../themes';
 import { ShadowWrapper } from '../shadow-wrapper/shadow-wrapper';
 
-interface ThemeWrapperProps extends Omit<ThemeProviderProps<Theme>, 'theme'> {
+export interface ThemeWrapperProps {
     isolateStyles?: boolean;
     theme?: Theme;
 }
 
-export function ThemeWrapper({ children, isolateStyles = false, theme }: ThemeWrapperProps): ReactElement {
+export const ThemeWrapper: FunctionComponent<ThemeWrapperProps> = ({ children, isolateStyles = false, theme }) => {
     let selectedTheme = theme;
     if (selectedTheme) {
         if (Object.entries(selectedTheme).length === 0 && selectedTheme.constructor === Object) {
@@ -33,4 +33,4 @@ export function ThemeWrapper({ children, isolateStyles = false, theme }: ThemeWr
             {content}
         </ThemeProvider>
     );
-}
+};

packages/react/src/index.ts

@@ -68,3 +68,5 @@ export { Pagination } from './components/pagination/pagination';
 export { equisoftTheme } from './themes/equisoft';
 export { testTheme } from './themes/test-theme';
 export { injectMainCss } from './styles';
+
+export * from './components/design-system';