Fully implement Flex and MatchMedia

config/postcss.config.js

@@ -1,3 +1,6 @@
+// Allow importing typescript files.
+require("ts-node/register");
+
 const precss = require("precss");
 const autoprefixer = require("autoprefixer");
 const fontMagician = require("postcss-font-magician");
@@ -8,7 +11,7 @@ const flexbugsFixes = require("postcss-flexbugs-fixes");
 const paths = require("./paths");
 
 delete require.cache[paths.appThemeVariables];
-const variables = require(paths.appThemeVariables);
+const variables = require(paths.appThemeVariables).default;
 const flatKebabVariables = mapKeys(
   flat(variables, { delimiter: "-" }),
   (_, k) => kebabCase(k)

src/core/client/stream/components/App.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Center } from "talk-ui/components";
+import { Flex } from "talk-ui/components";
 
 import StreamContainer from "../containers/StreamContainer";
 
@@ -12,9 +12,9 @@ export interface AppProps {
 const App: StatelessComponent<AppProps> = props => {
   if (props.asset) {
     return (
-      <Center>
+      <Flex justifyContent="center">
         <StreamContainer asset={props.asset} />
-      </Center>
+      </Flex>
     );
   }
   return <div>Asset not found </div>;

src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`loads more comments 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1
@@ -111,7 +111,7 @@ exports[`loads more comments 1`] = `
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1

src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1

src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1

src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1
@@ -109,7 +109,7 @@ exports[`renders comment stream 1`] = `
 
 exports[`show all replies 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1

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

@@ -1,37 +1,51 @@
 .root {
+  display: flex;
 }
 
 .justifyFlexStart {
-  justify-content: "flex-start";
+  justify-content: flex-start;
 }
 .justifyFlexEnd {
-  justify-content: "flex-end";
+  justify-content: flex-end;
 }
 .justifyCenter {
-  justify-content: "center";
+  justify-content: center;
 }
 .justifySpaceBetween {
-  justify-content: "space-between";
+  justify-content: space-between;
 }
 .justifySpaceAround {
-  justify-content: "space-around";
+  justify-content: space-around;
 }
 .justifySpaceEvenly {
-  justify-content: "space-evenly";
+  justify-content: space-evenly;
 }
 
 .alignFlexStart {
-  align-items: "flex-start";
+  align-items: flex-start;
 }
 .alignFlexEnd {
-  align-items: "flex-end";
+  align-items: flex-end;
 }
 .alignCenter {
-  align-items: "center";
+  align-items: center;
 }
 .alignBaseline {
-  align-items: "baseline";
+  align-items: baseline;
 }
 .alignStretch {
-  align-items: "stretch";
+  align-items: stretch;
+}
+
+.directionRow {
+  flex-direction: row;
+}
+.directionColumn {
+  flex-direction: column;
+}
+.directionRowReverse {
+  flex-direction: row-reverse;
+}
+.directionColumnReverse {
+  flex-direction: column-reverse;
 }

src/core/client/ui/components/Flex/Flex.spec.tsx

@@ -1,12 +1,15 @@
 import { shallow } from "enzyme";
 import React from "react";
 
+import { PropTypesOf } from "talk-ui/types";
+
 import Flex from "./Flex";
 
 it("renders correctly", () => {
-  const props = {
+  const props: PropTypesOf<typeof Flex> = {
     justifyContent: "center",
     alignItems: "center",
+    direction: "row",
   };
   const wrapper = shallow(
     <Flex {...props}>

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

@@ -15,24 +15,29 @@ interface InnerProps {
     | "space-between"
     | "space-evenly";
   alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+  direction?: "row" | "column" | "row-reverse" | "column-reverse";
 }
 
 const Flex: StatelessComponent<InnerProps> = props => {
-  const { justifyContent, alignItems } = props;
+  const { justifyContent, alignItems, direction, ...rest } = props;
 
   const classObject: Record<string, boolean> = {};
 
   if (justifyContent) {
-    classObject[`justify${pascalCase(justifyContent)}`] = true;
+    classObject[(styles as any)[`justify${pascalCase(justifyContent)}`]] = true;
   }
 
   if (alignItems) {
-    classObject[`align${pascalCase(alignItems)}`] = true;
+    classObject[(styles as any)[`align${pascalCase(alignItems)}`]] = true;
+  }
+
+  if (direction) {
+    classObject[(styles as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
   const classNames: string = cn(styles.root, classObject);
 
-  return <div className={classNames} {...props} />;
+  return <div className={classNames} {...rest} />;
 };
 
 export default Flex;

src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap

@@ -2,6 +2,10 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="Flex-root"
-/>
+  className="Flex-root Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+>
+  <div>
+    Hello World
+  </div>
+</div>
 `;

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

@@ -1,31 +1,27 @@
 import { shallow } from "enzyme";
 import React from "react";
 
+import { PropTypesOf } from "talk-ui/types";
+
 import MatchMedia from "./MatchMedia";
 
 it("renders correctly", () => {
-  const props = {
+  const props: PropTypesOf<typeof MatchMedia> = {
     minWidth: "xs",
     maxWidth: "sm",
     component: "div",
     screen: true,
+    children: <div>Hello World</div>,
   };
-  const wrapper = shallow(
-    <MatchMedia {...props}>
-      <div>Hello World</div>
-    </MatchMedia>
-  );
+  const wrapper = shallow(<MatchMedia {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
 
 it("map new speech prop to older aural prop", () => {
-  const props = {
+  const props: PropTypesOf<typeof MatchMedia> = {
     speech: true,
+    children: <div>Hello World</div>,
   };
-  const wrapper = shallow(
-    <MatchMedia {...props}>
-      <div>Hello World</div>
-    </MatchMedia>
-  );
+  const wrapper = shallow(<MatchMedia {...props} />);
   expect(wrapper).toMatchSnapshot();
 });

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

@@ -2,9 +2,13 @@ import React from "react";
 import { ReactNode, StatelessComponent } from "react";
 import Responsive from "react-responsive";
 
+import theme from "../../theme/variables";
+
+type Breakpoints = keyof typeof theme.breakpoints;
+
 interface InnerProps {
-  minWidth?: string;
-  maxWidth?: string;
+  minWidth?: Breakpoints;
+  maxWidth?: Breakpoints;
   children: ReactNode;
   className?: string;
   component?:
@@ -21,8 +25,13 @@ interface InnerProps {
 const MatchMedia: StatelessComponent<InnerProps> = props => {
   // TODO: Temporarily map newer speech to older aural type until
   // react-responsive supports the speech prop.
-  const { speech, ...rest } = props;
-  return <Responsive {...rest} aural={speech} />;
+  const { speech, minWidth, maxWidth, ...rest } = props;
+  const mapped = {
+    aural: speech,
+    minWidth: minWidth ? theme.breakpoints[minWidth] : undefined,
+    maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
+  };
+  return <Responsive {...rest} {...mapped} />;
 };
 
 export default MatchMedia;

src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap

@@ -14,8 +14,8 @@ exports[`map new speech prop to older aural prop 1`] = `
 exports[`renders correctly 1`] = `
 <MediaQuery
   component="div"
-  maxWidth="sm"
-  minWidth="xs"
+  maxWidth={640}
+  minWidth={320}
   screen={true}
   values={Object {}}
 >

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

@@ -2,3 +2,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";

src/core/client/ui/theme/variables.ts

@@ -70,13 +70,12 @@ const variables = {
   fontWeightMedium: 550,
   /* Breakpoints */
   breakpoints: {
-    xs: 0,
-    sm: 320,
-    md: 640,
-    lg: 1024,
-    xl: 1400,
-    xxl: 1600,
+    xs: 320,
+    sm: 640,
+    md: 1024,
+    lg: 1400,
+    xl: 1600,
   },
 };
 
-module.exports = variables;
+export default variables;