feat: merge providers

Author: minheq

docs/Contributing.mdx

@@ -1,6 +1,6 @@
 ---
 name: Contributing
-order: 100
+order: 80
 route: '/contributing'
 ---
 

docs/Customization.mdx

@@ -17,6 +17,9 @@ import { ThemeProvider } from 'paramount-ui'
   colors: Colors;
   fills: Fills;
 
+  // Layout
+  layout: Layout;
+
   // Typography
   fontFamilies: FontFamilies;
   fontWeights: FontWeights;
@@ -495,9 +498,33 @@ const containerShapes: ContainerShapes = {
   },
 };
 
+export const defaultLayout: Layout = {
+  breakpoints: {
+    small: 480,
+
+    medium: 768,
+
+    large: 992,
+
+    xlarge: 1200,
+  },
+  containerSizes: {
+    small: 540,
+
+    medium: 720,
+
+    large: 960,
+
+    xlarge: 1140,
+  },
+  gridColumnCount: 12,
+  gutterWidth: 30,
+};
+
 export const defaultTheme: Theme = {
   colors,
   fills,
+  layout,
 
   fontFamilies,
   fontWeights,

docs/GettingStarted.mdx

@@ -33,15 +33,9 @@ On top of your application, include context providers
 
 ```tsx
 import React from 'react';
-import { ThemeProvider, ToastProvider, LayoutProvider } from 'paramount-ui';
-
-const App = () => (
-  <ThemeProvider>
-    <ToastProvider>
-      <LayoutProvider>{children}</LayoutProvider>
-    </ToastProvider>
-  </ThemeProvider>
-);
+import { ThemeProvider } from 'paramount-ui';
+
+const App = () => <ThemeProvider>{children}</ThemeProvider>;
 
 export default App;
 ```

src/components/Layout/Layout.mdx docs/Layout.mdxsrc/components/Layout/Layout.mdx renamed to docs/Layout.mdx

@@ -1,23 +1,23 @@
 ---
 name: Layout
-menu: Components
+order: 85
 ---
 
 import { Playground, Props } from 'docz';
-import { LayoutProvider, useLayout, Text } from '..';
+import { ThemeProvider, useLayout, Text } from '../src';
 
-export default ({ children }) => <LayoutProvider>{children}</LayoutProvider>;
+export default ({ children }) => <ThemeProvider>{children}</ThemeProvider>;
 
 # Layout
 
 Paramount provides building blocks to create responsive layout via components `Visible`, `Row and Column`, `Container` and convenience functions ([see Usage](#usage))
 
 ## Setup
 
-Put `LayoutProvider` at the top level component to wrap components that make use of `LayoutContext`. For options, [see Configuration Options](#options)
+Make sure to use `ThemeProvider` at the top-level component. For options, [see Configuration Options](#options)
 
 ```tsx
-<LayoutProvider value={options}>{children}</LayoutProvider>
+<ThemeProvider value={{ layout: options }}>{children}</ThemeProvider>
 ```
 
 ## Usage
@@ -69,7 +69,7 @@ Retrieves the current screen size
 These are all the available configuration options, as well as the default layout configuration
 
 ```ts
-export const defaultLayout: LayoutInterface = {
+export const defaultLayout: Layout = {
   breakpoints: {
     small: 480,
 

src/components/KitchenSink/KitchenSink.tsx

@@ -1015,7 +1015,7 @@ export const KitchenSink = () => {
                   notify({
                     title: 'Title',
                     description: 'Description',
-                    duration: 100000,
+                    duration: 5000,
                   })
                 }
                 title="Open toast"

src/components/Layout/Column.styles.ts

@@ -4,12 +4,12 @@ import { Theme } from '../../theme/Theme';
 import { ColumnConfig, ColumnConfigBase, ColumnProps } from './Column';
 import {
   DESC_ORDER_SCREEN_SIZES,
-  LayoutInterface,
+  LayoutContext,
   ScreenSize,
 } from './LayoutContext';
 
 export type GetColumnStyles = (
-  props: ColumnProps & LayoutInterface,
+  props: ColumnProps & LayoutContext,
   theme: Theme,
 ) => Partial<ColumnStyles>;
 

src/components/Layout/Container.styles.ts

@@ -5,12 +5,12 @@ import { ContainerProps } from './Container';
 import {
   ContainerSizes,
   DESC_ORDER_SCREEN_SIZES,
-  LayoutInterface,
+  LayoutContext,
   ScreenSize,
 } from './LayoutContext';
 
 export type GetContainerStyles = (
-  props: ContainerProps & LayoutInterface,
+  props: ContainerProps & LayoutContext,
   theme: Theme,
 ) => Partial<ContainerStyles>;
 

src/components/Layout/LayoutContext.tsx

@@ -85,16 +85,19 @@ export type GetResponsiveValue = <
   | TXsmallValue
   | undefined;
 
-export interface LayoutInterface {
+export interface Layout {
   breakpoints: Breakpoints;
-  currentScreenSize: ScreenSize;
-  getResponsiveValue: GetResponsiveValue;
   gridColumnCount: ColumnCount;
   gutterWidth: number;
   containerSizes: ContainerSizes;
 }
 
-export const defaultLayout: LayoutInterface = {
+export interface LayoutContext extends Layout {
+  currentScreenSize: ScreenSize;
+  getResponsiveValue: GetResponsiveValue;
+}
+
+export const defaultLayout: LayoutContext = {
   breakpoints: {
     small: 480,
 

src/components/Layout/LayoutProvider.tsx

@@ -6,17 +6,17 @@ import {
   defaultLayout,
   DESC_ORDER_SCREEN_SIZES,
   GetResponsiveValueParam,
+  Layout,
   LayoutContext,
-  LayoutInterface,
   ScreenSize,
 } from './LayoutContext';
 
 export interface LayoutProviderProps {
   children: React.ReactNode;
-  value?: Partial<LayoutInterface>;
+  value?: Partial<Layout>;
 }
 
-export const getCurrentScreenSize = (layout: LayoutInterface) => {
+export const getCurrentScreenSize = (layout: Layout) => {
   const { breakpoints } = layout;
   const windowScaledSize = Dimensions.get('window');
 

src/components/Layout/Row.styles.tsx

@@ -1,11 +1,11 @@
 import { ViewStyle } from 'react-native';
 
 import { Theme } from '../../theme/Theme';
-import { LayoutInterface } from './LayoutContext';
+import { LayoutContext } from './LayoutContext';
 import { RowProps } from './Row';
 
 export type GetRowStyles = (
-  props: RowProps & LayoutInterface,
+  props: RowProps & LayoutContext,
   theme: Theme,
 ) => Partial<RowStyles>;