[next] Implement configuration panes (#2173)

* feat: moderation config

* feat: configure banned and suspect words

* chore: upgrade react and test libs to the newest version <3

* chore: upgrade typescript + some refactor

* feat: general, organization and advanced configuration panes

* fix: translation

* feat: speedup fetching markdown editor

* feat: localize markdown editor

* chore: refactor container names

* chore: rename infobox to communityGuidelines

* feat: closing comment streams duration config

* test: add feature tests for configurations

* fix: mock only console.error

* chore: upgrade node

* chore: require node >= 10

* fix: better validation and default values

* feat: Make DurationField a general purpose component and reuse for Edit Comment Timeframe

* test: add unit test for duration field

* fix: patch for bug when built in production

* chore: bump npm version to latest

* fix: adapted Dockerfile to new version of node

* refactor: harmonized seconds/milliseconds to seconds

* fix: resolve bug from merge conflict

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

@@ -1,4 +1,10 @@
 .root {
+  display: flex;
+  width: calc(29 * var(--spacing-unit));
+  align-items: center;
+}
+
+.input {
   composes: inputText placeholderPseudo from "talk-ui/shared/typography.css";
   position: relative;
   display: block;
@@ -7,7 +13,7 @@
   border-radius: var(--round-corners);
   height: 36px;
   line-height: 36px;
-  width: calc(29 * var(--spacing-unit));
+  width: 100%;
 
   &:read-only {
     background-color: var(--palette-grey-lightest);
@@ -18,6 +24,10 @@
   }
 }
 
+.input + * {
+  padding-left: calc(0.5 * var(--spacing-unit));
+}
+
 .colorRegular {
   background-color: var(--palette-common-white);
   color: var(--palette-common-black);
@@ -33,3 +43,7 @@
 .fullWidth {
   width: 100%;
 }
+
+.textAlignCenter {
+  text-align: center;
+}

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

@@ -3,18 +3,27 @@ name: TextField
 menu: UI Kit
 ---
 
-import { Playground, PropsTable } from 'docz'
-import TextField from './TextField.tsx'
-import HorizontalGutter from '../HorizontalGutter'
+import { Playground, PropsTable } from "docz";
+import TextField from "./TextField.tsx";
+import HorizontalGutter from "../HorizontalGutter";
 
 # TextField
 
 ## Basic Use
+
 <Playground>
   <HorizontalGutter>
     <TextField placeholder="This is a placeholder" />
     <TextField defaultValue="This is an input field" />
     <TextField color="error" defaultValue="A TextField with an error" />
-    <TextField color="error" defaultValue="A TextField with an error" fullWidth/>
+    <TextField
+      color="error"
+      defaultValue="A TextField with an error"
+      fullWidth
+    />
+    <TextField
+      placeholder="This is a placeholder"
+      adornment={<span>Seconds</span>}
+    />
   </HorizontalGutter>
 </Playground>

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

@@ -9,6 +9,7 @@ it("renders correctly", () => {
   const props: PropTypesOf<typeof TextField> = {
     className: "custom",
     defaultValue: "Hello World",
+    adornment: "Unit",
   };
   const renderer = TestRenderer.create(<TextField {...props} />);
   expect(renderer.toJSON()).toMatchSnapshot();

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

@@ -59,6 +59,9 @@ export interface TextFieldProps {
   autoCorrect?: AllHTMLAttributes<HTMLInputElement>["autoCorrect"];
   autoCapitalize?: AllHTMLAttributes<HTMLInputElement>["autoCapitalize"];
   spellCheck?: AllHTMLAttributes<HTMLInputElement>["spellCheck"];
+
+  textAlignCenter?: boolean;
+  adornment?: React.ReactNode;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {
@@ -69,26 +72,35 @@ const TextField: StatelessComponent<TextFieldProps> = props => {
     fullWidth,
     value,
     placeholder,
+    adornment,
+    textAlignCenter,
     ...rest
   } = props;
 
   const rootClassName = cn(
     classes.root,
     {
-      [classes.colorRegular]: color === "regular",
-      [classes.colorError]: color === "error",
       [classes.fullWidth]: fullWidth,
     },
     className
   );
 
+  const inputClassName = cn(classes.input, {
+    [classes.colorRegular]: color === "regular",
+    [classes.colorError]: color === "error",
+    [classes.textAlignCenter]: textAlignCenter,
+  });
+
   return (
-    <input
-      className={rootClassName}
-      placeholder={placeholder}
-      value={value}
-      {...rest}
-    />
+    <div className={rootClassName}>
+      <input
+        className={inputClassName}
+        placeholder={placeholder}
+        value={value}
+        {...rest}
+      />
+      {adornment}
+    </div>
   );
 };
 

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

@@ -1,10 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<input
-  className="TextField-root TextField-colorRegular custom"
-  defaultValue="Hello World"
-  placeholder=""
-  type="text"
-/>
+<div
+  className="TextField-root custom"
+>
+  <input
+    className="TextField-input TextField-colorRegular"
+    defaultValue="Hello World"
+    placeholder=""
+    type="text"
+  />
+  Unit
+</div>
 `;