Add docs

src/core/client/ui/components/Center/Center.css

@@ -1,6 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-

src/core/client/ui/components/Center/Center.tsx

@@ -1,30 +0,0 @@
-import cn from "classnames";
-import React from "react";
-import { ReactNode, StatelessComponent } from "react";
-
-import { withStyles } from "talk-ui/hocs";
-import { PropTypesOf } from "talk-ui/types";
-
-import * as styles from "./Center.css";
-
-interface InnerProps {
-  /**
-   * This prop can be used to add custom classnames.
-   * It is handled by the `withStyles `HOC.
-   */
-  classes: Partial<typeof styles>;
-  className?: string;
-  children: ReactNode;
-}
-
-const Center: StatelessComponent<InnerProps> = props => {
-  return (
-    <div className={cn(props.className, props.classes.root)}>
-      {props.children}
-    </div>
-  );
-};
-
-const enhanced = withStyles(styles)(Center);
-export type CenterProps = PropTypesOf<typeof enhanced>;
-export default enhanced;

src/core/client/ui/components/Center/index.ts

@@ -1,2 +0,0 @@
-export * from "./Center";
-export { default } from "./Center";

src/core/client/ui/components/Flex/Flex.mdx

@@ -0,0 +1,16 @@
+---
+name: Flex
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import Flex from './Flex'
+
+# Flex
+
+`Flex` is a wrapper around `flexbox`.
+
+## Basic usage
+<Playground>
+  <Flex justifyContent="center">I'm centered</Flex>
+</Playground>

src/core/client/ui/components/MatchMedia/MatchMedia.mdx

@@ -0,0 +1,40 @@
+---
+name: MatchMedia
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import MatchMedia from './MatchMedia'
+
+# MatchMedia
+
+`MatchMedia` uses media queries to provide responsive rendering.
+
+## Basic usage
+<Playground>
+  <MatchMedia maxWidth="xs">
+    I'm a very small screen
+  </MatchMedia>
+  <MatchMedia minWidth="xs" maxWidth="sm">
+    I'm a small screen
+  </MatchMedia>
+  <MatchMedia minWidth="sm" maxWidth="md">
+    I'm a medium screen
+  </MatchMedia>
+  <MatchMedia minWidth="md" maxWidth="lg">
+    I'm a large screen
+  </MatchMedia>
+  <MatchMedia minWidth="lg" maxWidth="xl">
+    I'm a very large screen
+  </MatchMedia>
+  <MatchMedia minWidth="xl">
+    I'm a super large screen
+  </MatchMedia>
+</Playground>
+
+## Using render props
+<Playground>
+  <MatchMedia minWidth="lg">
+    {matches => <span>{matches ? "I'm big" : "I'm small"}</span>}
+  </MatchMedia>
+</Playground>

src/core/client/ui/components/MatchMedia/MatchMedia.tsx

@@ -9,7 +9,7 @@ type Breakpoints = keyof typeof theme.breakpoints;
 interface InnerProps {
   minWidth?: Breakpoints;
   maxWidth?: Breakpoints;
-  children: ReactNode;
+  children: ReactNode | ((matches: boolean) => React.ReactNode);
   className?: string;
   component?:
     | string

src/core/client/ui/components/index.ts

@@ -1,6 +1,5 @@
 export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
-export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
 export { default as Flex } from "./Flex";
 export { default as MatchMedia } from "./MatchMedia";