From 063ceb215f858a8e2a5bde85d8f9ca24240894c6 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 21 Sep 2020 15:20:41 +0900
Subject: Separate input component

---
 src/settings/components/form/KeymapsForm.tsx |  5 +-
 src/settings/components/index.tsx            | 12 ++--
 src/settings/components/ui/Input.tsx         | 89 ----------------------------
 src/settings/components/ui/Radio.tsx         | 44 ++++++++++++++
 src/settings/components/ui/Text.tsx          | 42 +++++++++++++
 src/settings/components/ui/TextArea.tsx      | 42 +++++++++++++
 6 files changed, 135 insertions(+), 99 deletions(-)
 delete mode 100644 src/settings/components/ui/Input.tsx
 create mode 100644 src/settings/components/ui/Radio.tsx
 create mode 100644 src/settings/components/ui/Text.tsx
 create mode 100644 src/settings/components/ui/TextArea.tsx

(limited to 'src/settings')

diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx
index b9af0df..25578ad 100644
--- a/src/settings/components/form/KeymapsForm.tsx
+++ b/src/settings/components/form/KeymapsForm.tsx
@@ -1,6 +1,6 @@
 import "./KeymapsForm.scss";
 import React from "react";
-import Input from "../ui/Input";
+import Text from "../ui/Text";
 import keymaps from "../../keymaps";
 import { FormKeymaps } from "../../../shared/SettingData";
 
@@ -27,8 +27,7 @@ class KeymapsForm extends React.Component<Props> {
               {group.map(([name, label]) => {
                 const value = values[name] || "";
                 return (
-                  <Input
-                    type="text"
+                  <Text
                     id={name}
                     name={name}
                     key={name}
diff --git a/src/settings/components/index.tsx b/src/settings/components/index.tsx
index 9d71cac..d204210 100644
--- a/src/settings/components/index.tsx
+++ b/src/settings/components/index.tsx
@@ -1,7 +1,8 @@
 import "./site.scss";
 import React from "react";
 import { connect } from "react-redux";
-import Input from "./ui/Input";
+import TextArea from "./ui/TextArea";
+import Radio from "./ui/Radio";
 import SearchForm from "./form/SearchForm";
 import KeymapsForm from "./form/KeymapsForm";
 import BlacklistForm from "./form/BlacklistForm";
@@ -88,8 +89,7 @@ class SettingsComponent extends React.Component<Props> {
   renderJsonFields(json: JSONTextSettings, error: string) {
     return (
       <div>
-        <Input
-          type="textarea"
+        <TextArea
           name="json"
           label="Plain JSON"
           spellCheck={false}
@@ -114,8 +114,7 @@ class SettingsComponent extends React.Component<Props> {
       <div>
         <h1>Configure Vim-Vixen</h1>
         <form className="vimvixen-settings-form">
-          <Input
-            type="radio"
+          <Radio
             id="setting-source-form"
             name="source"
             label="Use form"
@@ -125,8 +124,7 @@ class SettingsComponent extends React.Component<Props> {
             disabled={disabled}
           />
 
-          <Input
-            type="radio"
+          <Radio
             name="source"
             label="Use plain JSON"
             checked={this.props.source === "json"}
diff --git a/src/settings/components/ui/Input.tsx b/src/settings/components/ui/Input.tsx
deleted file mode 100644
index 0e24277..0000000
--- a/src/settings/components/ui/Input.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from "react";
-import "./Input.scss";
-
-interface Props extends React.AllHTMLAttributes<HTMLElement> {
-  name: string;
-  type: string;
-  error?: string;
-  label: string;
-  value: string;
-  onValueChange?: (name: string, value: string) => void;
-  onBlur?: (e: React.FocusEvent<Element>) => void;
-}
-
-class Input extends React.Component<Props> {
-  renderText(props: Props) {
-    const inputClassName = props.error ? "input-error" : "";
-    const pp = { ...props };
-    delete pp.onValueChange;
-    return (
-      <div className="settings-ui-input">
-        <label htmlFor={props.id}>{props.label}</label>
-        <input
-          className={inputClassName}
-          onChange={this.bindOnChange.bind(this)}
-          {...pp}
-        />
-      </div>
-    );
-  }
-
-  renderRadio(props: Props) {
-    const inputClassName = props.error ? "input-error" : "";
-    const pp = { ...props };
-    delete pp.onValueChange;
-    return (
-      <div className="settings-ui-input">
-        <label>
-          <input
-            className={inputClassName}
-            onChange={this.bindOnChange.bind(this)}
-            {...pp}
-          />
-          {props.label}
-        </label>
-      </div>
-    );
-  }
-
-  renderTextArea(props: Props) {
-    const inputClassName = props.error ? "input-error" : "";
-    const pp = { ...props };
-    delete pp.onValueChange;
-    return (
-      <div className="settings-ui-input">
-        <label htmlFor={props.id}>{props.label}</label>
-        <textarea
-          className={inputClassName}
-          onChange={this.bindOnChange.bind(this)}
-          {...pp}
-        />
-        <p className="settings-ui-input-error">{this.props.error}</p>
-      </div>
-    );
-  }
-
-  render() {
-    const { type } = this.props;
-
-    switch (this.props.type) {
-      case "text":
-        return this.renderText(this.props);
-      case "radio":
-        return this.renderRadio(this.props);
-      case "textarea":
-        return this.renderTextArea(this.props);
-      default:
-        console.warn(`Unsupported input type ${type}`);
-    }
-    return null;
-  }
-
-  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-    if (this.props.onValueChange) {
-      this.props.onValueChange(e.target.name, e.target.value);
-    }
-  }
-}
-
-export default Input;
diff --git a/src/settings/components/ui/Radio.tsx b/src/settings/components/ui/Radio.tsx
new file mode 100644
index 0000000..20d4ad6
--- /dev/null
+++ b/src/settings/components/ui/Radio.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import "./Input.scss";
+
+interface Props extends React.AllHTMLAttributes<HTMLElement> {
+  name: string;
+  error?: string;
+  label: string;
+  value: string;
+  onValueChange?: (name: string, value: string) => void;
+  onBlur?: (e: React.FocusEvent<Element>) => void;
+}
+
+class Input extends React.Component<Props> {
+  renderRadio(props: Props) {
+    const inputClassName = props.error ? "input-error" : "";
+    const pp = { ...props };
+    delete pp.onValueChange;
+    return (
+      <div className="settings-ui-input">
+        <label>
+          <input
+            type="radio"
+            className={inputClassName}
+            onChange={this.bindOnChange.bind(this)}
+            {...pp}
+          />
+          {props.label}
+        </label>
+      </div>
+    );
+  }
+
+  render() {
+    return this.renderRadio(this.props);
+  }
+
+  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+    if (this.props.onValueChange) {
+      this.props.onValueChange(e.target.name, e.target.value);
+    }
+  }
+}
+
+export default Input;
diff --git a/src/settings/components/ui/Text.tsx b/src/settings/components/ui/Text.tsx
new file mode 100644
index 0000000..7ecef88
--- /dev/null
+++ b/src/settings/components/ui/Text.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import "./Input.scss";
+
+interface Props extends React.AllHTMLAttributes<HTMLElement> {
+  name: string;
+  error?: string;
+  label: string;
+  value: string;
+  onValueChange?: (name: string, value: string) => void;
+  onBlur?: (e: React.FocusEvent<Element>) => void;
+}
+
+class Input extends React.Component<Props> {
+  renderText(props: Props) {
+    const inputClassName = props.error ? "input-error" : "";
+    const pp = { ...props };
+    delete pp.onValueChange;
+    return (
+      <div className="settings-ui-input">
+        <label htmlFor={props.id}>{props.label}</label>
+        <input
+          type="text"
+          className={inputClassName}
+          onChange={this.bindOnChange.bind(this)}
+          {...pp}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    return this.renderText(this.props);
+  }
+
+  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+    if (this.props.onValueChange) {
+      this.props.onValueChange(e.target.name, e.target.value);
+    }
+  }
+}
+
+export default Input;
diff --git a/src/settings/components/ui/TextArea.tsx b/src/settings/components/ui/TextArea.tsx
new file mode 100644
index 0000000..f2b832f
--- /dev/null
+++ b/src/settings/components/ui/TextArea.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import "./Input.scss";
+
+interface Props extends React.AllHTMLAttributes<HTMLElement> {
+  name: string;
+  error?: string;
+  label: string;
+  value: string;
+  onValueChange?: (name: string, value: string) => void;
+  onBlur?: (e: React.FocusEvent<Element>) => void;
+}
+
+class TextArea extends React.Component<Props> {
+  renderTextArea(props: Props) {
+    const inputClassName = props.error ? "input-error" : "";
+    const pp = { ...props };
+    delete pp.onValueChange;
+    return (
+      <div className="settings-ui-input">
+        <label htmlFor={props.id}>{props.label}</label>
+        <textarea
+          className={inputClassName}
+          onChange={this.bindOnChange.bind(this)}
+          {...pp}
+        />
+        <p className="settings-ui-input-error">{this.props.error}</p>
+      </div>
+    );
+  }
+
+  render() {
+    return this.renderTextArea(this.props);
+  }
+
+  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+    if (this.props.onValueChange) {
+      this.props.onValueChange(e.target.name, e.target.value);
+    }
+  }
+}
+
+export default TextArea;
-- 
cgit v1.2.3


From c28ae6b82860693b8e6b012a939fb8a3dd320e23 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 21 Sep 2020 16:08:44 +0900
Subject: Introduce styled-components on settings ui

---
 src/settings/components/site.scss            |  8 +--
 src/settings/components/ui/AddButton.scss    | 13 -----
 src/settings/components/ui/AddButton.tsx     | 31 +++++++-----
 src/settings/components/ui/DeleteButton.scss | 13 -----
 src/settings/components/ui/DeleteButton.tsx  | 30 ++++++-----
 src/settings/components/ui/Input.scss        | 29 -----------
 src/settings/components/ui/Radio.tsx         | 59 +++++++++------------
 src/settings/components/ui/Text.tsx          | 70 ++++++++++++++-----------
 src/settings/components/ui/TextArea.tsx      | 76 ++++++++++++++++------------
 9 files changed, 145 insertions(+), 184 deletions(-)
 delete mode 100644 src/settings/components/ui/AddButton.scss
 delete mode 100644 src/settings/components/ui/DeleteButton.scss
 delete mode 100644 src/settings/components/ui/Input.scss

(limited to 'src/settings')

diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
index c0c4f9e..e8415e8 100644
--- a/src/settings/components/site.scss
+++ b/src/settings/components/site.scss
@@ -1,12 +1,6 @@
 .vimvixen-settings-form {
   padding: 2px;
-
-  textarea[name=json] {
-    font-family: monospace;
-    width: 100%;
-    min-height: 64ex;
-    resize: vertical;
-  }
+  font-family: system-ui;
 
   fieldset {
     margin: 0;
diff --git a/src/settings/components/ui/AddButton.scss b/src/settings/components/ui/AddButton.scss
deleted file mode 100644
index beb5688..0000000
--- a/src/settings/components/ui/AddButton.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.ui-add-button {
-  border: none;
-  padding: 4;
-  display: inline;
-  background: none;
-  font-weight: bold;
-  color: green;
-  cursor: pointer;
-
-  &:hover {
-    color: darkgreen;
-  }
-}
diff --git a/src/settings/components/ui/AddButton.tsx b/src/settings/components/ui/AddButton.tsx
index c15a732..8cf4300 100644
--- a/src/settings/components/ui/AddButton.tsx
+++ b/src/settings/components/ui/AddButton.tsx
@@ -1,19 +1,24 @@
-import "./AddButton.scss";
 import React from "react";
+import styled from "styled-components";
 
-type Props = React.AllHTMLAttributes<HTMLInputElement>;
+const Button = styled.input`
+  border: none;
+  padding: 4;
+  display: inline;
+  background: none;
+  font-weight: bold;
+  color: green;
+  cursor: pointer;
 
-class AddButton extends React.Component<Props> {
-  render() {
-    return (
-      <input
-        className="ui-add-button"
-        type="button"
-        value="&#x271a;"
-        {...this.props}
-      />
-    );
+  &:hover {
+    color: darkgreen;
   }
-}
+`;
+
+type Props = React.InputHTMLAttributes<HTMLInputElement>;
+
+const AddButton: React.FC<Props> = (props) => (
+  <Button type="button" value="&#x271a;" {...props} />
+);
 
 export default AddButton;
diff --git a/src/settings/components/ui/DeleteButton.scss b/src/settings/components/ui/DeleteButton.scss
deleted file mode 100644
index 5932a72..0000000
--- a/src/settings/components/ui/DeleteButton.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-
-.ui-delete-button {
-  border: none;
-  padding: 4;
-  display: inline;
-  background: none;
-  color: red;
-  cursor: pointer;
-
-  &:hover {
-    color: darkred;
-  }
-}
diff --git a/src/settings/components/ui/DeleteButton.tsx b/src/settings/components/ui/DeleteButton.tsx
index df8976e..ce0183b 100644
--- a/src/settings/components/ui/DeleteButton.tsx
+++ b/src/settings/components/ui/DeleteButton.tsx
@@ -1,19 +1,23 @@
-import "./DeleteButton.scss";
 import React from "react";
+import styled from "styled-components";
 
-type Props = React.AllHTMLAttributes<HTMLInputElement>;
+const Button = styled.input`
+  border: none;
+  padding: 4;
+  display: inline;
+  background: none;
+  color: red;
+  cursor: pointer;
 
-class DeleteButton extends React.Component<Props> {
-  render() {
-    return (
-      <input
-        className="ui-delete-button"
-        type="button"
-        value="&#x2716;"
-        {...this.props}
-      />
-    );
+  &:hover {
+    color: darkred;
   }
-}
+`;
+
+type Props = React.InputHTMLAttributes<HTMLInputElement>;
+
+const DeleteButton: React.FC<Props> = (props) => (
+  <Button type="button" value="&#x2716;" {...props} />
+);
 
 export default DeleteButton;
diff --git a/src/settings/components/ui/Input.scss b/src/settings/components/ui/Input.scss
deleted file mode 100644
index ad4daf8..0000000
--- a/src/settings/components/ui/Input.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.settings-ui-input {
-  page-break-inside: avoid;
-
-  * {
-    page-break-inside: avoid;
-  }
-
-  label {
-    font-weight: bold;
-    min-width: 14rem;
-    display: inline-block;
-  }
-
-  input[type='text'] {
-    padding: 4px;
-    width: 8rem;
-  }
-
-  input.input-crror,
-  textarea.input-error {
-    box-shadow: 0 0 2px red;
-  }
-
-  &-error {
-    font-weight: bold;
-    color: red;
-    min-height: 1.5em;
-  }
-}
diff --git a/src/settings/components/ui/Radio.tsx b/src/settings/components/ui/Radio.tsx
index 20d4ad6..c0d4dd9 100644
--- a/src/settings/components/ui/Radio.tsx
+++ b/src/settings/components/ui/Radio.tsx
@@ -1,44 +1,33 @@
 import React from "react";
-import "./Input.scss";
+import styled from "styled-components";
 
-interface Props extends React.AllHTMLAttributes<HTMLElement> {
-  name: string;
-  error?: string;
+const Container = styled.div`
+  font-family: system-ui;
+`;
+
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string;
-  value: string;
   onValueChange?: (name: string, value: string) => void;
-  onBlur?: (e: React.FocusEvent<Element>) => void;
 }
 
-class Input extends React.Component<Props> {
-  renderRadio(props: Props) {
-    const inputClassName = props.error ? "input-error" : "";
-    const pp = { ...props };
-    delete pp.onValueChange;
-    return (
-      <div className="settings-ui-input">
-        <label>
-          <input
-            type="radio"
-            className={inputClassName}
-            onChange={this.bindOnChange.bind(this)}
-            {...pp}
-          />
-          {props.label}
-        </label>
-      </div>
-    );
-  }
+const Radio: React.FC<Props> = (props) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.onValueChange) {
+      props.onValueChange(e.target.name, e.target.value);
+    }
+  };
 
-  render() {
-    return this.renderRadio(this.props);
-  }
+  const pp = { ...props };
+  delete pp.onValueChange;
 
-  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-    if (this.props.onValueChange) {
-      this.props.onValueChange(e.target.name, e.target.value);
-    }
-  }
-}
+  return (
+    <Container>
+      <label htmlFor={props.id}>
+        <input type="radio" onChange={onChange} {...pp} />
+        {props.label}
+      </label>
+    </Container>
+  );
+};
 
-export default Input;
+export default Radio;
diff --git a/src/settings/components/ui/Text.tsx b/src/settings/components/ui/Text.tsx
index 7ecef88..700b08a 100644
--- a/src/settings/components/ui/Text.tsx
+++ b/src/settings/components/ui/Text.tsx
@@ -1,42 +1,54 @@
 import React from "react";
-import "./Input.scss";
+import styled from "styled-components";
 
-interface Props extends React.AllHTMLAttributes<HTMLElement> {
+const Container = styled.div`
+  page-break-inside: avoid;
+`;
+
+const Input = styled.input<{ hasError: boolean }>`
+  padding: 4px;
+  width: 8rem;
+  box-shadow: ${({ hasError }) => (hasError ? "0 0 2px red" : "none")};
+`;
+
+const Label = styled.label`
+  font-weight: bold;
+  min-width: 14rem;
+  display: inline-block;
+`;
+
+interface Props extends React.HTMLAttributes<HTMLElement> {
   name: string;
   error?: string;
   label: string;
   value: string;
   onValueChange?: (name: string, value: string) => void;
-  onBlur?: (e: React.FocusEvent<Element>) => void;
 }
 
-class Input extends React.Component<Props> {
-  renderText(props: Props) {
-    const inputClassName = props.error ? "input-error" : "";
-    const pp = { ...props };
-    delete pp.onValueChange;
-    return (
-      <div className="settings-ui-input">
-        <label htmlFor={props.id}>{props.label}</label>
-        <input
+const Text: React.FC<Props> = (props) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.onValueChange) {
+      props.onValueChange(e.target.name, e.target.value);
+    }
+  };
+
+  const pp = { ...props };
+  delete pp.onValueChange;
+
+  return (
+    <Container>
+      <Label>
+        {props.label}
+        <br />
+        <Input
           type="text"
-          className={inputClassName}
-          onChange={this.bindOnChange.bind(this)}
+          hasError={props.error !== undefined}
+          onChange={onChange}
           {...pp}
         />
-      </div>
-    );
-  }
-
-  render() {
-    return this.renderText(this.props);
-  }
-
-  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-    if (this.props.onValueChange) {
-      this.props.onValueChange(e.target.name, e.target.value);
-    }
-  }
-}
+      </Label>
+    </Container>
+  );
+};
 
-export default Input;
+export default Text;
diff --git a/src/settings/components/ui/TextArea.tsx b/src/settings/components/ui/TextArea.tsx
index f2b832f..58b7bd3 100644
--- a/src/settings/components/ui/TextArea.tsx
+++ b/src/settings/components/ui/TextArea.tsx
@@ -1,42 +1,54 @@
 import React from "react";
-import "./Input.scss";
+import styled from "styled-components";
 
-interface Props extends React.AllHTMLAttributes<HTMLElement> {
-  name: string;
+const Container = styled.div`
+  page-break-inside: avoid;
+`;
+
+const Label = styled.label`
+  font-weight: bold;
+  min-width: 14rem;
+  display: inline-block;
+`;
+
+const ErrorableTextArea = styled.textarea<{ hasError: boolean }>`
+  box-shadow: ${({ hasError }) => (hasError ? "0 0 2px red" : "none")};
+  font-family: monospace;
+  font-family: monospace;
+  width: 100%;
+  min-height: 64ex;
+  resize: vertical;
+`;
+
+const ErrorMessage = styled.p`
+  font-weight: bold;
+  color: red;
+  min-height: 1.5em;
+`;
+
+interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   error?: string;
   label: string;
-  value: string;
   onValueChange?: (name: string, value: string) => void;
-  onBlur?: (e: React.FocusEvent<Element>) => void;
 }
 
-class TextArea extends React.Component<Props> {
-  renderTextArea(props: Props) {
-    const inputClassName = props.error ? "input-error" : "";
-    const pp = { ...props };
-    delete pp.onValueChange;
-    return (
-      <div className="settings-ui-input">
-        <label htmlFor={props.id}>{props.label}</label>
-        <textarea
-          className={inputClassName}
-          onChange={this.bindOnChange.bind(this)}
-          {...pp}
-        />
-        <p className="settings-ui-input-error">{this.props.error}</p>
-      </div>
-    );
-  }
-
-  render() {
-    return this.renderTextArea(this.props);
-  }
-
-  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-    if (this.props.onValueChange) {
-      this.props.onValueChange(e.target.name, e.target.value);
+const TextArea: React.FC<Props> = (props) => {
+  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (props.onValueChange) {
+      props.onValueChange(e.target.name, e.target.value);
     }
-  }
-}
+  };
+
+  const hasError = typeof props.error !== "undefined" && props.error !== "";
+  const pp = { ...props };
+  delete pp.onValueChange;
+  return (
+    <Container>
+      <Label htmlFor={props.id}>{props.label}</Label>
+      <ErrorableTextArea hasError={hasError} onChange={onChange} {...pp} />
+      {hasError ? <ErrorMessage>{props.error}</ErrorMessage> : null}
+    </Container>
+  );
+};
 
 export default TextArea;
-- 
cgit v1.2.3


From 6a674fbc53c265e27b87f86e4db032433733f2f8 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 21 Sep 2020 21:09:01 +0900
Subject: Introduce styled-components on form fields

---
 src/settings/components/form/BlacklistForm.scss    |   9 --
 src/settings/components/form/BlacklistForm.tsx     |  80 ++++++++-----
 src/settings/components/form/KeymapsForm.scss      |  11 --
 src/settings/components/form/KeymapsForm.tsx       |  22 +++-
 .../components/form/PartialBlacklistForm.scss      |  28 -----
 .../components/form/PartialBlacklistForm.tsx       | 117 ++++++++++++-------
 src/settings/components/form/PropertiesForm.scss   |  12 --
 src/settings/components/form/PropertiesForm.tsx    |  33 ++++--
 src/settings/components/form/SearchForm.scss       |  28 -----
 src/settings/components/form/SearchForm.tsx        | 126 +++++++++++++--------
 10 files changed, 248 insertions(+), 218 deletions(-)
 delete mode 100644 src/settings/components/form/BlacklistForm.scss
 delete mode 100644 src/settings/components/form/KeymapsForm.scss
 delete mode 100644 src/settings/components/form/PartialBlacklistForm.scss
 delete mode 100644 src/settings/components/form/PropertiesForm.scss
 delete mode 100644 src/settings/components/form/SearchForm.scss

(limited to 'src/settings')

diff --git a/src/settings/components/form/BlacklistForm.scss b/src/settings/components/form/BlacklistForm.scss
deleted file mode 100644
index a230d0d..0000000
--- a/src/settings/components/form/BlacklistForm.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.form-blacklist-form {
-  &-row {
-    display: flex;
-
-    .column-url {
-      flex: 1;
-    }
-  }
-}
diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
index 859cb9f..4d794f4 100644
--- a/src/settings/components/form/BlacklistForm.tsx
+++ b/src/settings/components/form/BlacklistForm.tsx
@@ -1,9 +1,29 @@
-import "./BlacklistForm.scss";
+import styled from "styled-components";
 import AddButton from "../ui/AddButton";
 import DeleteButton from "../ui/DeleteButton";
 import React from "react";
 import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
+const Grid = styled.div``;
+
+const GridRow = styled.div`
+  display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+  &:nth-child(1) {
+    flex-grow: 1;
+  }
+  &:nth-child(2) {
+    flex-shrink: 1;
+  }
+`;
+
+const Input = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 interface Props {
   value: Blacklist;
   onChange: (value: Blacklist) => void;
@@ -19,37 +39,43 @@ class BlacklistForm extends React.Component<Props> {
 
   render() {
     return (
-      <div className="form-blacklist-form">
-        {this.props.value.items.map((item, index) => {
-          if (item.partial) {
-            return null;
-          }
-          return (
-            <div key={index} className="form-blacklist-form-row">
-              <input
-                data-index={index}
-                type="text"
-                name="url"
-                className="column-url"
-                value={item.pattern}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <DeleteButton
-                data-index={index}
-                name="delete"
-                onClick={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-            </div>
-          );
-        })}
+      <>
+        <Grid>
+          {this.props.value.items.map((item, index) => {
+            if (item.partial) {
+              return null;
+            }
+            return (
+              <GridRow key={index}>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    value={item.pattern}
+                    placeholder="example.com/mail/*"
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <DeleteButton
+                    data-index={index}
+                    name="delete"
+                    onClick={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }
 
diff --git a/src/settings/components/form/KeymapsForm.scss b/src/settings/components/form/KeymapsForm.scss
deleted file mode 100644
index 1a4e5cd..0000000
--- a/src/settings/components/form/KeymapsForm.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.form-keymaps-form {
-  column-count: 3;
-
-  &-field-group {
-    margin-top: 24px;
-  }
-
-  &-field-group:first-of-type {
-    margin-top: 24px;
-  }
-}
diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx
index 25578ad..6582529 100644
--- a/src/settings/components/form/KeymapsForm.tsx
+++ b/src/settings/components/form/KeymapsForm.tsx
@@ -1,9 +1,21 @@
-import "./KeymapsForm.scss";
 import React from "react";
+import styled from "styled-components";
 import Text from "../ui/Text";
 import keymaps from "../../keymaps";
 import { FormKeymaps } from "../../../shared/SettingData";
 
+const Grid = styled.div`
+  column-count: 3;
+`;
+
+const FieldGroup = styled.div`
+  margin-top: 24px;
+
+  &:first-of-type {
+    margin-top: 24px;
+  }
+`;
+
 interface Props {
   value: FormKeymaps;
   onChange: (e: FormKeymaps) => void;
@@ -20,10 +32,10 @@ class KeymapsForm extends React.Component<Props> {
   render() {
     const values = this.props.value.toJSON();
     return (
-      <div className="form-keymaps-form">
+      <Grid>
         {keymaps.fields.map((group, index) => {
           return (
-            <div key={index} className="form-keymaps-form-field-group">
+            <FieldGroup key={index}>
               {group.map(([name, label]) => {
                 const value = values[name] || "";
                 return (
@@ -38,10 +50,10 @@ class KeymapsForm extends React.Component<Props> {
                   />
                 );
               })}
-            </div>
+            </FieldGroup>
           );
         })}
-      </div>
+      </Grid>
     );
   }
 
diff --git a/src/settings/components/form/PartialBlacklistForm.scss b/src/settings/components/form/PartialBlacklistForm.scss
deleted file mode 100644
index caf6f93..0000000
--- a/src/settings/components/form/PartialBlacklistForm.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.form-partial-blacklist-form {
-  @mixin row-base {
-    display: flex;
-
-    .column-url {
-      flex: 5;
-      min-width: 0;
-    }
-    .column-keys {
-      flex: 1;
-      min-width: 0;
-    }
-    .column-delete {
-      flex: 1;
-      min-width: 0;
-    }
-  }
-
-  &-header {
-    @include row-base;
-
-    font-weight: bold;
-  }
-
-  &-row {
-    @include row-base;
-  }
-}
diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx
index 95beee8..4c6bd35 100644
--- a/src/settings/components/form/PartialBlacklistForm.tsx
+++ b/src/settings/components/form/PartialBlacklistForm.tsx
@@ -1,9 +1,36 @@
-import "./PartialBlacklistForm.scss";
+import React from "react";
+import styled from "styled-components";
 import AddButton from "../ui/AddButton";
 import DeleteButton from "../ui/DeleteButton";
-import React from "react";
 import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
+const Grid = styled.div``;
+
+const GridRow = styled.div`
+  display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+  &:nth-child(1) {
+    flex-grow: 5;
+  }
+
+  &:nth-child(2) {
+    flex-shrink: 1;
+    min-width: 20%;
+    max-width: 20%;
+  }
+
+  &:nth-child(3) {
+    flex-shrink: 1;
+  }
+`;
+
+const Input = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 interface Props {
   value: Blacklist;
   onChange: (value: Blacklist) => void;
@@ -19,50 +46,58 @@ class PartialBlacklistForm extends React.Component<Props> {
 
   render() {
     return (
-      <div className="form-partial-blacklist-form">
-        <div className="form-partial-blacklist-form-header">
-          <div className="column-url">URL</div>
-          <div className="column-keys">Keys</div>
-        </div>
-        {this.props.value.items.map((item, index) => {
-          if (!item.partial) {
-            return null;
-          }
-          return (
-            <div key={index} className="form-partial-blacklist-form-row">
-              <input
-                data-index={index}
-                type="text"
-                name="url"
-                className="column-url"
-                value={item.pattern}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <input
-                data-index={index}
-                type="text"
-                name="keys"
-                className="column-keys"
-                value={item.keys.join(",")}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <DeleteButton
-                data-index={index}
-                name="delete"
-                onClick={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-            </div>
-          );
-        })}
+      <>
+        <Grid>
+          <GridRow>
+            <GridCell>URL</GridCell>
+            <GridCell>Keys</GridCell>
+          </GridRow>
+          {this.props.value.items.map((item, index) => {
+            if (!item.partial) {
+              return null;
+            }
+            return (
+              <GridRow key={index}>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    value={item.pattern}
+                    placeholder="example.com/mail/*"
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="keys"
+                    value={item.keys.join(",")}
+                    placeholder="j,k,<C-d>,<C-u>"
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <DeleteButton
+                    data-index={index}
+                    name="delete"
+                    onClick={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }
 
diff --git a/src/settings/components/form/PropertiesForm.scss b/src/settings/components/form/PropertiesForm.scss
deleted file mode 100644
index 7c9e167..0000000
--- a/src/settings/components/form/PropertiesForm.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.form-properties-form {
-  &-row {
-    .column-name {
-      display: inline-block;
-      min-width: 5rem;
-      font-weight: bold;
-    }
-    .column-input {
-      line-height: 2.2rem;
-    }
-  }
-}
diff --git a/src/settings/components/form/PropertiesForm.tsx b/src/settings/components/form/PropertiesForm.tsx
index aebd9b1..53ebf03 100644
--- a/src/settings/components/form/PropertiesForm.tsx
+++ b/src/settings/components/form/PropertiesForm.tsx
@@ -1,6 +1,20 @@
-import "./PropertiesForm.scss";
+import styled from "styled-components";
 import React from "react";
 
+const Form = styled.div``;
+
+const Row = styled.div``;
+
+const Label = styled.label`
+  display: inline-block;
+  min-width: 5rem;
+  font-weight: bold;
+`;
+
+const Input = styled.input`
+  line-height: 2.2rem;
+`;
+
 interface Props {
   types: { [key: string]: string };
   value: { [key: string]: any };
@@ -21,7 +35,7 @@ class PropertiesForm extends React.Component<Props> {
     const values = this.props.value;
 
     return (
-      <div className="form-properties-form">
+      <Form>
         {Object.keys(types).map((name) => {
           const type = types[name];
           let inputType = "";
@@ -42,23 +56,22 @@ class PropertiesForm extends React.Component<Props> {
             return null;
           }
           return (
-            <div key={name} className="form-properties-form-row">
-              <label>
-                <span className="column-name">{name}</span>
-                <input
+            <Row key={name}>
+              <Label>
+                <span>{name}</span>
+                <Input
                   type={inputType}
                   name={name}
-                  className="column-input"
                   value={values[name] ? values[name] : ""}
                   onChange={onChange}
                   onBlur={this.props.onBlur}
                   checked={values[name]}
                 />
-              </label>
-            </div>
+              </Label>
+            </Row>
           );
         })}
-      </div>
+      </Form>
     );
   }
 
diff --git a/src/settings/components/form/SearchForm.scss b/src/settings/components/form/SearchForm.scss
deleted file mode 100644
index 26b2f44..0000000
--- a/src/settings/components/form/SearchForm.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.form-search-form {
-  @mixin row-base {
-    display: flex;
-
-    .column-name {
-      flex: 1;
-      min-width: 0;
-    }
-    .column-url {
-      flex: 5;
-      min-width: 0;
-    }
-    .column-option {
-      text-align: right;
-      flex-basis: 5rem;
-    }
-  }
-
-  &-header {
-    @include row-base;
-
-    font-weight: bold;
-  }
-
-  &-row {
-    @include row-base;
-  }
-}
diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
index a4d923d..3ba0299 100644
--- a/src/settings/components/form/SearchForm.tsx
+++ b/src/settings/components/form/SearchForm.tsx
@@ -1,9 +1,37 @@
-import "./SearchForm.scss";
 import React from "react";
+import styled from "styled-components";
 import AddButton from "../ui/AddButton";
 import DeleteButton from "../ui/DeleteButton";
 import { FormSearch } from "../../../shared/SettingData";
 
+const Grid = styled.div``;
+
+const GridRow = styled.div`
+  display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+  &:nth-child(1) {
+    flex-grow: 0;
+    min-width: 10%;
+    max-width: 10%;
+  }
+
+  &:nth-child(2) {
+    flex-grow: 2;
+  }
+
+  &:nth-child(3) {
+    flex-grow: 0;
+    flex-shrink: 1;
+  }
+`;
+
+const Input = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 interface Props {
   value: FormSearch;
   onChange: (value: FormSearch) => void;
@@ -20,57 +48,61 @@ class SearchForm extends React.Component<Props> {
   render() {
     const value = this.props.value.toJSON();
     return (
-      <div className="form-search-form">
-        <div className="form-search-form-header">
-          <div className="column-name">Name</div>
-          <div className="column-url">URL</div>
-          <div className="column-option">Default</div>
-        </div>
-        {value.engines.map((engine, index) => {
-          return (
-            <div key={index} className="form-search-form-row">
-              <input
-                data-index={index}
-                type="text"
-                name="name"
-                className="column-name"
-                value={engine[0]}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <input
-                data-index={index}
-                type="text"
-                name="url"
-                placeholder="http://example.com/?q={}"
-                className="column-url"
-                value={engine[1]}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <div className="column-option">
-                <input
-                  data-index={index}
-                  type="radio"
-                  name="default"
-                  checked={value.default === engine[0]}
-                  onChange={this.bindValue.bind(this)}
-                />
-                <DeleteButton
-                  data-index={index}
-                  name="delete"
-                  onClick={this.bindValue.bind(this)}
-                />
-              </div>
-            </div>
-          );
-        })}
+      <>
+        <Grid>
+          <GridRow>
+            <GridCell>Name</GridCell>
+            <GridCell>URL</GridCell>
+            <GridCell>Default</GridCell>
+          </GridRow>
+          {value.engines.map((engine, index) => {
+            return (
+              <GridRow key={index}>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="name"
+                    value={engine[0]}
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    placeholder="http://example.com/?q={}"
+                    value={engine[1]}
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <input
+                    data-index={index}
+                    type="radio"
+                    name="default"
+                    checked={value.default === engine[0]}
+                    onChange={this.bindValue.bind(this)}
+                  />
+                  <DeleteButton
+                    data-index={index}
+                    name="delete"
+                    onClick={this.bindValue.bind(this)}
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }
 
-- 
cgit v1.2.3


From e1e7c2d4d86d7aeb40357add27c76a99a18350e7 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 21 Sep 2020 21:15:46 +0900
Subject: Introduce styled-components on top of form

---
 .../components/form/PartialBlacklistForm.tsx       |  9 +-
 src/settings/components/form/SearchForm.tsx        |  9 +-
 src/settings/components/index.tsx                  | 96 +++++++++++++---------
 src/settings/components/site.scss                  | 21 -----
 4 files changed, 72 insertions(+), 63 deletions(-)
 delete mode 100644 src/settings/components/site.scss

(limited to 'src/settings')

diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx
index 4c6bd35..dcdd00c 100644
--- a/src/settings/components/form/PartialBlacklistForm.tsx
+++ b/src/settings/components/form/PartialBlacklistForm.tsx
@@ -6,6 +6,11 @@ import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
 const Grid = styled.div``;
 
+const GridHeader = styled.div`
+  display: flex;
+  font-weight: bold;
+`;
+
 const GridRow = styled.div`
   display: flex;
 `;
@@ -48,10 +53,10 @@ class PartialBlacklistForm extends React.Component<Props> {
     return (
       <>
         <Grid>
-          <GridRow>
+          <GridHeader>
             <GridCell>URL</GridCell>
             <GridCell>Keys</GridCell>
-          </GridRow>
+          </GridHeader>
           {this.props.value.items.map((item, index) => {
             if (!item.partial) {
               return null;
diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
index 3ba0299..cc7061a 100644
--- a/src/settings/components/form/SearchForm.tsx
+++ b/src/settings/components/form/SearchForm.tsx
@@ -6,6 +6,11 @@ import { FormSearch } from "../../../shared/SettingData";
 
 const Grid = styled.div``;
 
+const GridHeader = styled.div`
+  display: flex;
+  font-weight: bold;
+`;
+
 const GridRow = styled.div`
   display: flex;
 `;
@@ -50,11 +55,11 @@ class SearchForm extends React.Component<Props> {
     return (
       <>
         <Grid>
-          <GridRow>
+          <GridHeader>
             <GridCell>Name</GridCell>
             <GridCell>URL</GridCell>
             <GridCell>Default</GridCell>
-          </GridRow>
+          </GridHeader>
           {value.engines.map((engine, index) => {
             return (
               <GridRow key={index}>
diff --git a/src/settings/components/index.tsx b/src/settings/components/index.tsx
index d204210..2e2ff52 100644
--- a/src/settings/components/index.tsx
+++ b/src/settings/components/index.tsx
@@ -1,6 +1,6 @@
-import "./site.scss";
 import React from "react";
 import { connect } from "react-redux";
+import styled from "styled-components";
 import TextArea from "./ui/TextArea";
 import Radio from "./ui/Radio";
 import SearchForm from "./form/SearchForm";
@@ -19,6 +19,28 @@ import { State as AppState } from "../reducers/setting";
 import Properties from "../../shared/settings/Properties";
 import Blacklist from "../../shared/settings/Blacklist";
 
+const Container = styled.form`
+  padding: 2px;
+  font-family: system-ui;
+`;
+
+const Fieldset = styled.fieldset`
+  margin: 0;
+  padding: 0;
+  border: none;
+  margin-top: 1rem;
+
+  &:first-of-type {
+    margin-top: 1rem;
+  }
+`;
+
+const Legend = styled.legend`
+  font-size: 1.5rem;
+  padding: 0.5rem 0;
+  font-weight: bold;
+`;
+
 const DO_YOU_WANT_TO_CONTINUE =
   "Some settings in JSON can be lost when migrating.  " +
   "Do you want to continue?";
@@ -41,47 +63,47 @@ class SettingsComponent extends React.Component<Props> {
   renderFormFields(form: FormSettings) {
     return (
       <div>
-        <fieldset>
-          <legend>Keybindings</legend>
+        <Fieldset>
+          <Legend>Keybindings</Legend>
           <KeymapsForm
             value={form.keymaps}
             onChange={this.bindKeymapsForm.bind(this)}
             onBlur={this.save.bind(this)}
           />
-        </fieldset>
-        <fieldset>
-          <legend>Search Engines</legend>
+        </Fieldset>
+        <Fieldset>
+          <Legend>Search Engines</Legend>
           <SearchForm
             value={form.search}
             onChange={this.bindSearchForm.bind(this)}
             onBlur={this.save.bind(this)}
           />
-        </fieldset>
-        <fieldset>
-          <legend>Blacklist</legend>
+        </Fieldset>
+        <Fieldset>
+          <Legend>Blacklist</Legend>
           <BlacklistForm
             value={form.blacklist}
             onChange={this.bindBlacklistForm.bind(this)}
             onBlur={this.save.bind(this)}
           />
-        </fieldset>
-        <fieldset>
-          <legend>Partial blacklist</legend>
+        </Fieldset>
+        <Fieldset>
+          <Legend>Partial blacklist</Legend>
           <PartialBlacklistForm
             value={form.blacklist}
             onChange={this.bindBlacklistForm.bind(this)}
             onBlur={this.save.bind(this)}
           />
-        </fieldset>
-        <fieldset>
-          <legend>Properties</legend>
+        </Fieldset>
+        <Fieldset>
+          <Legend>Properties</Legend>
           <PropertiesForm
             types={Properties.types()}
             value={form.properties.toJSON()}
             onChange={this.bindPropertiesForm.bind(this)}
             onBlur={this.save.bind(this)}
           />
-        </fieldset>
+        </Fieldset>
       </div>
     );
   }
@@ -111,30 +133,28 @@ class SettingsComponent extends React.Component<Props> {
       fields = this.renderJsonFields(this.props.json!, this.props.error);
     }
     return (
-      <div>
+      <Container>
         <h1>Configure Vim-Vixen</h1>
-        <form className="vimvixen-settings-form">
-          <Radio
-            id="setting-source-form"
-            name="source"
-            label="Use form"
-            checked={this.props.source === "form"}
-            value="form"
-            onValueChange={this.bindSource.bind(this)}
-            disabled={disabled}
-          />
+        <Radio
+          id="setting-source-form"
+          name="source"
+          label="Use form"
+          checked={this.props.source === "form"}
+          value="form"
+          onValueChange={this.bindSource.bind(this)}
+          disabled={disabled}
+        />
 
-          <Radio
-            name="source"
-            label="Use plain JSON"
-            checked={this.props.source === "json"}
-            value="json"
-            onValueChange={this.bindSource.bind(this)}
-            disabled={disabled}
-          />
-          {fields}
-        </form>
-      </div>
+        <Radio
+          name="source"
+          label="Use plain JSON"
+          checked={this.props.source === "json"}
+          value="json"
+          onValueChange={this.bindSource.bind(this)}
+          disabled={disabled}
+        />
+        {fields}
+      </Container>
     );
   }
 
diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
deleted file mode 100644
index e8415e8..0000000
--- a/src/settings/components/site.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.vimvixen-settings-form {
-  padding: 2px;
-  font-family: system-ui;
-
-  fieldset {
-    margin: 0;
-    padding: 0;
-    border: none;
-    margin-top: 1rem;
-
-    fieldset:first-of-type {
-      margin-top: 1rem;
-    }
-
-    legend {
-      font-size: 1.5rem;
-      padding: .5rem 0;
-      font-weight: bold;
-    }
-  }
-}
-- 
cgit v1.2.3


From 1f014295a54f1e16b8bd94da729fb0afd143f7fe Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 21 Sep 2020 23:27:44 +0900
Subject: Fix component test

---
 src/settings/components/form/BlacklistForm.tsx       |  4 ++--
 src/settings/components/ui/TextArea.tsx              |  4 +++-
 test/settings/components/form/BlacklistForm.test.tsx | 20 ++++++++++----------
 .../components/form/SearchEngineForm.test.tsx        | 10 +++++++---
 test/settings/components/ui/TextArea.test.tsx        |  2 +-
 5 files changed, 23 insertions(+), 17 deletions(-)

(limited to 'src/settings')

diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
index 4d794f4..d301f2c 100644
--- a/src/settings/components/form/BlacklistForm.tsx
+++ b/src/settings/components/form/BlacklistForm.tsx
@@ -40,13 +40,13 @@ class BlacklistForm extends React.Component<Props> {
   render() {
     return (
       <>
-        <Grid>
+        <Grid role="list">
           {this.props.value.items.map((item, index) => {
             if (item.partial) {
               return null;
             }
             return (
-              <GridRow key={index}>
+              <GridRow role="listitem" key={index}>
                 <GridCell>
                   <Input
                     data-index={index}
diff --git a/src/settings/components/ui/TextArea.tsx b/src/settings/components/ui/TextArea.tsx
index 58b7bd3..9dcd5be 100644
--- a/src/settings/components/ui/TextArea.tsx
+++ b/src/settings/components/ui/TextArea.tsx
@@ -46,7 +46,9 @@ const TextArea: React.FC<Props> = (props) => {
     <Container>
       <Label htmlFor={props.id}>{props.label}</Label>
       <ErrorableTextArea hasError={hasError} onChange={onChange} {...pp} />
-      {hasError ? <ErrorMessage>{props.error}</ErrorMessage> : null}
+      {hasError ? (
+        <ErrorMessage role="alert">{props.error}</ErrorMessage>
+      ) : null}
     </Container>
   );
 };
diff --git a/test/settings/components/form/BlacklistForm.test.tsx b/test/settings/components/form/BlacklistForm.test.tsx
index e34802a..8727c59 100644
--- a/test/settings/components/form/BlacklistForm.test.tsx
+++ b/test/settings/components/form/BlacklistForm.test.tsx
@@ -17,16 +17,16 @@ describe("settings/form/BlacklistForm", () => {
         />
       ).root;
 
-      const rows = root.findAllByProps({
-        className: "form-blacklist-form-row",
-      });
+      const rows = root
+        .findAllByType("div")
+        .filter((instance) => instance.props.role === "listitem");
       expect(rows).to.have.lengthOf(2);
-      expect(
-        rows[0].findByProps({ className: "column-url" }).props.value
-      ).to.equal("*.slack.com");
-      expect(
-        rows[1].findByProps({ className: "column-url" }).props.value
-      ).to.equal("www.google.com/maps");
+      expect(rows[0].findByProps({ name: "url" }).props.value).to.equal(
+        "*.slack.com"
+      );
+      expect(rows[1].findByProps({ name: "url" }).props.value).to.equal(
+        "www.google.com/maps"
+      );
 
       expect(() => root.findByType(AddButton)).not.throw();
     });
@@ -113,7 +113,7 @@ describe("settings/form/BlacklistForm", () => {
       });
 
       const button = document.querySelector(
-        "input[type=button].ui-add-button"
+        "input[type=button][name=add]"
       ) as HTMLButtonElement;
       ReactTestUtils.Simulate.click(button);
     });
diff --git a/test/settings/components/form/SearchEngineForm.test.tsx b/test/settings/components/form/SearchEngineForm.test.tsx
index 5f835cc..7b10274 100644
--- a/test/settings/components/form/SearchEngineForm.test.tsx
+++ b/test/settings/components/form/SearchEngineForm.test.tsx
@@ -21,12 +21,16 @@ describe("settings/form/SearchForm", () => {
         />
       ).root;
 
-      const names = root.findAllByProps({ name: "name" });
+      const names = root
+        .findAllByType("input")
+        .filter((instance) => instance.props.name === "name");
       expect(names).to.have.lengthOf(2);
       expect(names[0].props.value).to.equal("google");
       expect(names[1].props.value).to.equal("yahoo");
 
-      const urls = root.findAllByProps({ name: "url" });
+      const urls = root
+        .findAllByType("input")
+        .filter((instance) => instance.props.name === "url");
       expect(urls).to.have.lengthOf(2);
       expect(urls[0].props.value).to.equal("google.com");
       expect(urls[1].props.value).to.equal("yahoo.com");
@@ -139,7 +143,7 @@ describe("settings/form/SearchForm", () => {
       });
 
       const button = document.querySelector(
-        "input[type=button].ui-add-button"
+        "input[type=button][name=add]"
       ) as HTMLInputElement;
       ReactTestUtils.Simulate.click(button);
     });
diff --git a/test/settings/components/ui/TextArea.test.tsx b/test/settings/components/ui/TextArea.test.tsx
index 50313cf..232c7c0 100644
--- a/test/settings/components/ui/TextArea.test.tsx
+++ b/test/settings/components/ui/TextArea.test.tsx
@@ -32,7 +32,7 @@ describe("settings/ui/TextArea", () => {
 
     const label = document.querySelector("label")!;
     const textarea = document.querySelector("textarea")!;
-    const error = document.querySelector(".settings-ui-input-error")!;
+    const error = document.querySelector("[role=alert]")!;
     expect(label.textContent).to.contain("myfield");
     expect(textarea.nodeName).to.contain("TEXTAREA");
     expect(textarea.name).to.contain("myname");
-- 
cgit v1.2.3


From 738a699259345e47a81cba8d14beb5b9fd2d8b53 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Tue, 22 Sep 2020 10:52:13 +0900
Subject: Fix e2e test on option

---
 e2e/lib/FormOptionPage.ts                          | 177 +++++++++++----------
 e2e/lib/JSONOptionPage.ts                          |   4 +-
 src/settings/components/form/BlacklistForm.tsx     |   3 +
 .../components/form/PartialBlacklistForm.tsx       |   8 +-
 src/settings/components/form/SearchForm.tsx        |  10 +-
 5 files changed, 107 insertions(+), 95 deletions(-)

(limited to 'src/settings')

diff --git a/e2e/lib/FormOptionPage.ts b/e2e/lib/FormOptionPage.ts
index 5551684..666bac7 100644
--- a/e2e/lib/FormOptionPage.ts
+++ b/e2e/lib/FormOptionPage.ts
@@ -1,5 +1,5 @@
 import { Lanthan } from "lanthan";
-import { WebDriver, By, until } from "selenium-webdriver";
+import { WebDriver, WebElement, By, error } from "selenium-webdriver";
 
 export default class FormOptionPage {
   private webdriver: WebDriver;
@@ -9,15 +9,15 @@ export default class FormOptionPage {
   }
 
   async setBlacklist(nth: number, url: string): Promise<void> {
-    const selector = ".form-blacklist-form-row > .column-url";
-    const inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
+    const fieldset = await this.getFieldsetByLegend("Blacklist");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    if (rows.length <= nth) {
       throw new RangeError("Index out of range to set a blacklist");
     }
-    await inputs[nth].sendKeys(url);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
+
+    const input = rows[nth].findElement(By.css("[aria-label=URL]"));
+    await input.sendKeys(url);
+    await this.blurActiveElement();
   }
 
   async setPartialBlacklist(
@@ -25,121 +25,122 @@ export default class FormOptionPage {
     url: string,
     keys: string
   ): Promise<void> {
-    let selector = ".form-partial-blacklist-form-row > .column-url";
-    let inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
+    const fieldset = await this.getFieldsetByLegend("Partial blacklist");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    if (rows.length <= nth) {
       throw new RangeError("Index out of range to set a partial blacklist");
     }
-    await inputs[nth].sendKeys(url);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
 
-    selector = ".form-partial-blacklist-form-row > .column-keys";
-    inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
-      throw new RangeError("Index out of range to set a partial blacklist");
-    }
-    await inputs[nth].sendKeys(keys);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
+    const urlInput = rows[nth].findElement(By.css("[aria-label=URL]"));
+    await urlInput.sendKeys(url);
+    await this.blurActiveElement();
+
+    const keysInput = rows[nth].findElement(By.css("[aria-label=Keys]"));
+    await keysInput.sendKeys(keys);
+    await this.blurActiveElement();
   }
 
   async setSearchEngine(nth: number, name: string, url: string) {
-    let selector = ".form-search-form-row > .column-name";
-    let inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
+    const fieldset = await this.getFieldsetByLegend("Search Engines");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    if (rows.length <= nth) {
       throw new RangeError("Index out of range to set a search engine");
     }
-    await inputs[nth].sendKeys(name);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
 
-    selector = ".form-search-form-row > .column-url";
-    inputs = await this.webdriver.findElements(By.css(selector));
-    if (inputs.length <= nth) {
-      throw new RangeError("Index out of range to set a search engine");
-    }
-    await inputs[nth].sendKeys(url);
-    await this.webdriver.executeScript(
-      `document.querySelectorAll('${selector}')[${nth}].blur()`
-    );
+    const nameInput = rows[nth].findElement(By.css("[aria-label=Name"));
+    await nameInput.sendKeys(name);
+    await this.blurActiveElement();
+
+    const urlInput = rows[nth].findElement(By.css("[aria-label=URL]"));
+    await urlInput.sendKeys(url);
+    await this.blurActiveElement();
   }
 
   async addBlacklist(): Promise<void> {
-    const rows = await this.webdriver.findElements(
-      By.css(`.form-blacklist-form-row`)
-    );
-    const button = await this.webdriver.findElement(
-      By.css(".form-blacklist-form .ui-add-button")
-    );
-    await button.click();
-    await this.webdriver.wait(
-      until.elementLocated(
-        By.css(`.form-blacklist-form-row:nth-child(${rows.length + 1})`)
-      )
-    );
+    const fieldset = await this.getFieldsetByLegend("Blacklist");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    const addButton = await fieldset.findElement(By.css("[aria-label=Add]"));
+
+    await addButton.click();
+    await this.webdriver.wait(async () => {
+      const newRows = await fieldset.findElements(By.css("[role=listitem]"));
+      return newRows.length == rows.length + 1;
+    });
   }
 
   async addPartialBlacklist(): Promise<void> {
-    const rows = await this.webdriver.findElements(
-      By.css(`.form-partial-blacklist-form-row`)
-    );
-    const button = await this.webdriver.findElement(
-      By.css(".form-partial-blacklist-form .ui-add-button")
-    );
-    await button.click();
-    await this.webdriver.wait(
-      until.elementLocated(
-        By.css(`.form-partial-blacklist-form-row:nth-child(${rows.length + 2})`)
-      )
-    );
+    const fieldset = await this.getFieldsetByLegend("Partial blacklist");
+    const addButton = await fieldset.findElement(By.css("[aria-label=Add]"));
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+
+    await addButton.click();
+    await this.webdriver.wait(async () => {
+      const newRows = await fieldset.findElements(By.css("[role=listitem]"));
+      return newRows.length == rows.length + 1;
+    });
   }
 
   async removeBlackList(nth: number): Promise<void> {
-    const buttons = await this.webdriver.findElements(
-      By.css(".form-blacklist-form-row .ui-delete-button")
+    const fieldset = await this.getFieldsetByLegend("Blacklist");
+    const deleteButtons = await fieldset.findElements(
+      By.css("[aria-label=Delete]")
     );
-    if (buttons.length <= nth) {
+    if (deleteButtons.length <= nth) {
       throw new RangeError("Index out of range to remove blacklist");
     }
-    await buttons[nth].click();
+    await deleteButtons[nth].click();
   }
 
   async removePartialBlackList(nth: number): Promise<void> {
-    const buttons = await this.webdriver.findElements(
-      By.css(".form-partial-blacklist-form-row .ui-delete-button")
-    );
-    if (buttons.length <= nth) {
-      throw new RangeError("Index out of range to remove partial blacklist");
+    const fieldset = await this.getFieldsetByLegend("Partial blacklist");
+    const deleteButtons = await fieldset.findElements(
+      By.css("[aria-label=Delete]")
+    );
+    if (deleteButtons.length <= nth) {
+      throw new RangeError(
+        `Index out of range ${deleteButtons.length} to remove partial blacklist ${nth}`
+      );
     }
-    await buttons[nth].click();
+    await deleteButtons[nth].click();
   }
 
   async addSearchEngine(): Promise<void> {
-    const rows = await this.webdriver.findElements(
-      By.css(`.form-search-form-row > .column-name`)
-    );
-    const button = await this.webdriver.findElement(
-      By.css(".form-search-form > .ui-add-button")
-    );
-    await button.click();
-    await this.webdriver.wait(
-      until.elementLocated(
-        By.css(`.form-search-form-row:nth-child(${rows.length + 1})`)
-      )
-    );
+    const fieldset = await this.getFieldsetByLegend("Search Engines");
+    const rows = await fieldset.findElements(By.css("[role=listitem]"));
+    const addButton = await fieldset.findElement(By.css("[aria-label=Add]"));
+
+    await addButton.click();
+    await this.webdriver.wait(async () => {
+      const newRows = await fieldset.findElements(By.css("[role=listitem]"));
+      return newRows.length == rows.length + 1;
+    });
   }
 
   async setDefaultSearchEngine(nth: number): Promise<void> {
-    const radios = await this.webdriver.findElements(
-      By.css(".form-search-form-row input[type=radio]")
+    const fieldset = await this.getFieldsetByLegend("Search Engines");
+    const radios = await fieldset.findElements(
+      By.css("[name=default][type=radio]")
     );
     if (radios.length <= nth) {
       throw new RangeError("Index out of range to set a default search engine");
     }
     await radios[nth].click();
   }
+
+  private async getFieldsetByLegend(legendText: string): Promise<WebElement> {
+    const fieldsets = await this.webdriver.findElements(By.tagName("fieldset"));
+    for (const fieldset of fieldsets) {
+      const legend = await fieldset.findElement(By.tagName("legend"));
+      if ((await legend.getText()) === legendText) {
+        return fieldset;
+      }
+    }
+    throw new error.NoSuchElementError(
+      `Unable to locate fieldset with legend: ` + legendText
+    );
+  }
+
+  private async blurActiveElement(): Promise<void> {
+    await this.webdriver.executeScript(`document.activeElement.blur()`);
+  }
 }
diff --git a/e2e/lib/JSONOptionPage.ts b/e2e/lib/JSONOptionPage.ts
index 0f2b0a7..2d8147e 100644
--- a/e2e/lib/JSONOptionPage.ts
+++ b/e2e/lib/JSONOptionPage.ts
@@ -20,9 +20,7 @@ export default class JSONOptionPage {
   }
 
   async getErrorMessage(): Promise<string> {
-    const error = await this.webdriver.findElement(
-      By.css(".settings-ui-input-error")
-    );
+    const error = await this.webdriver.findElement(By.css("p[role=alert]"));
     return error.getText();
   }
 }
diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
index d301f2c..6fb9eca 100644
--- a/src/settings/components/form/BlacklistForm.tsx
+++ b/src/settings/components/form/BlacklistForm.tsx
@@ -52,6 +52,7 @@ class BlacklistForm extends React.Component<Props> {
                     data-index={index}
                     type="text"
                     name="url"
+                    aria-label="URL"
                     value={item.pattern}
                     placeholder="example.com/mail/*"
                     onChange={this.bindValue.bind(this)}
@@ -64,6 +65,7 @@ class BlacklistForm extends React.Component<Props> {
                     name="delete"
                     onClick={this.bindValue.bind(this)}
                     onBlur={this.props.onBlur}
+                    aria-label="Delete"
                   />
                 </GridCell>
               </GridRow>
@@ -72,6 +74,7 @@ class BlacklistForm extends React.Component<Props> {
         </Grid>
         <AddButton
           name="add"
+          aria-label="Add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx
index dcdd00c..b2da2bb 100644
--- a/src/settings/components/form/PartialBlacklistForm.tsx
+++ b/src/settings/components/form/PartialBlacklistForm.tsx
@@ -52,7 +52,7 @@ class PartialBlacklistForm extends React.Component<Props> {
   render() {
     return (
       <>
-        <Grid>
+        <Grid role="list">
           <GridHeader>
             <GridCell>URL</GridCell>
             <GridCell>Keys</GridCell>
@@ -62,12 +62,13 @@ class PartialBlacklistForm extends React.Component<Props> {
               return null;
             }
             return (
-              <GridRow key={index}>
+              <GridRow key={index} role="listitem">
                 <GridCell>
                   <Input
                     data-index={index}
                     type="text"
                     name="url"
+                    aria-label="URL"
                     value={item.pattern}
                     placeholder="example.com/mail/*"
                     onChange={this.bindValue.bind(this)}
@@ -79,6 +80,7 @@ class PartialBlacklistForm extends React.Component<Props> {
                     data-index={index}
                     type="text"
                     name="keys"
+                    aria-label="Keys"
                     value={item.keys.join(",")}
                     placeholder="j,k,<C-d>,<C-u>"
                     onChange={this.bindValue.bind(this)}
@@ -89,6 +91,7 @@ class PartialBlacklistForm extends React.Component<Props> {
                   <DeleteButton
                     data-index={index}
                     name="delete"
+                    aria-label="Delete"
                     onClick={this.bindValue.bind(this)}
                     onBlur={this.props.onBlur}
                   />
@@ -99,6 +102,7 @@ class PartialBlacklistForm extends React.Component<Props> {
         </Grid>
         <AddButton
           name="add"
+          aria-label="Add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
index cc7061a..4bf0e02 100644
--- a/src/settings/components/form/SearchForm.tsx
+++ b/src/settings/components/form/SearchForm.tsx
@@ -54,7 +54,7 @@ class SearchForm extends React.Component<Props> {
     const value = this.props.value.toJSON();
     return (
       <>
-        <Grid>
+        <Grid role="list">
           <GridHeader>
             <GridCell>Name</GridCell>
             <GridCell>URL</GridCell>
@@ -62,12 +62,13 @@ class SearchForm extends React.Component<Props> {
           </GridHeader>
           {value.engines.map((engine, index) => {
             return (
-              <GridRow key={index}>
+              <GridRow key={index} role="listitem">
                 <GridCell>
                   <Input
                     data-index={index}
                     type="text"
                     name="name"
+                    aria-label="Name"
                     value={engine[0]}
                     onChange={this.bindValue.bind(this)}
                     onBlur={this.props.onBlur}
@@ -78,6 +79,7 @@ class SearchForm extends React.Component<Props> {
                     data-index={index}
                     type="text"
                     name="url"
+                    aria-label="URL"
                     placeholder="http://example.com/?q={}"
                     value={engine[1]}
                     onChange={this.bindValue.bind(this)}
@@ -89,11 +91,14 @@ class SearchForm extends React.Component<Props> {
                     data-index={index}
                     type="radio"
                     name="default"
+                    aria-label="Default"
                     checked={value.default === engine[0]}
                     onChange={this.bindValue.bind(this)}
                   />
+                  a
                   <DeleteButton
                     data-index={index}
+                    aria-label="Delete"
                     name="delete"
                     onClick={this.bindValue.bind(this)}
                   />
@@ -104,6 +109,7 @@ class SearchForm extends React.Component<Props> {
         </Grid>
         <AddButton
           name="add"
+          aria-label="Add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-- 
cgit v1.2.3