Merge pull request #105 from matrix-org/matrixtwo/quotecrisis

Move to single quotes

package.json

@@ -23,11 +23,11 @@
     "lint-staged": {
         "src/**/*.{js,jsx,ts,tsx}": [
             "eslint --fix",
-            "prettier --write --tab-width 4",
+            "prettier --write --tab-width 4 --single-quote",
             "git add"
         ],
         "src/**/*.{json,css,scss,md}": [
-            "prettier --write --tab-width 4",
+            "prettier --write --tab-width 4 --single-quote",
             "git add"
         ]
     },

src/clients/Element.io.ts

@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { LinkedClient, Maturity, ClientKind } from "./types";
-import { LinkKind } from "../parser/types";
-import logo from "./element.svg";
+import { LinkedClient, Maturity, ClientKind } from './types';
+import { LinkKind } from '../parser/types';
+import logo from './element.svg';
 
 const Element: LinkedClient = {
     kind: ClientKind.LINKED_CLIENT,
-    name: "Element",
-    author: "Element",
+    name: 'Element',
+    author: 'Element',
     logo: logo,
-    homepage: "https://element.io",
+    homepage: 'https://element.io',
     maturity: Maturity.STABLE,
-    description: "Fully-featured Matrix client for the Web",
+    description: 'Fully-featured Matrix client for the Web',
     tags: [],
     toUrl: (link) => {
         switch (link.kind) {

src/clients/index.ts

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Client } from "./types";
+import { Client } from './types';
 
-import Element from "./Element.io";
+import Element from './Element.io';
 
 /*
  * All the supported clients of matrix.to

src/clients/types.ts

@@ -14,35 +14,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { SafeLink } from "../parser/types";
+import { SafeLink } from '../parser/types';
 
 /*
  * A collection of descriptive tags that can be added to
  * a clients description.
  */
 export enum Tag {
-    IOS = "IOS",
-    ANDROID = "ANDROID",
-    DESKTOP = "DESKTOP",
+    IOS = 'IOS',
+    ANDROID = 'ANDROID',
+    DESKTOP = 'DESKTOP',
 }
 
 /*
  * A collection of states used for describing a clients maturity.
  */
 export enum Maturity {
-    ALPHA = "ALPHA",
-    LATE_ALPHA = "LATE ALPHA",
-    BETA = "BETA",
-    LATE_BETA = "LATE_BETA",
-    STABLE = "STABLE",
+    ALPHA = 'ALPHA',
+    LATE_ALPHA = 'LATE ALPHA',
+    BETA = 'BETA',
+    LATE_BETA = 'LATE_BETA',
+    STABLE = 'STABLE',
 }
 
 /*
  * Used for constructing the discriminated union of all client types.
  */
 export enum ClientKind {
-    LINKED_CLIENT = "LINKED_CLIENT",
-    TEXT_CLIENT = "TEXT_CLIENT",
+    LINKED_CLIENT = 'LINKED_CLIENT',
+    TEXT_CLIENT = 'TEXT_CLIENT',
 }
 
 /*

src/components/Avatar.stories.tsx

@@ -14,17 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+// disable camelcase check because our object keys come
+// from the matrix spec
+/* eslint-disable @typescript-eslint/camelcase */
 
-import { UserAvatar } from "./Avatar";
+import React from 'react';
+
+import { UserAvatar } from './Avatar';
 
 export default {
-    title: "Avatar",
+    title: 'Avatar',
     parameters: {
         design: {
-            type: "figma",
+            type: 'figma',
             url:
-                "https://www.figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=143%3A5853",
+                'https://www.figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=143%3A5853',
         },
     },
 };
@@ -32,8 +36,8 @@ export default {
 export const Default: React.FC<{}> = () => (
     <UserAvatar
         user={{
-            avatar_url: "mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf",
-            displayname: "Jorik Schellekens",
+            avatar_url: 'mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf',
+            displayname: 'Jorik Schellekens',
         }}
         userId="@jorik:matrix.org"
     />

src/components/Avatar.tsx

@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useState } from "react";
-import classNames from "classnames";
-import { Room, User } from "matrix-cypher";
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { Room, User } from 'matrix-cypher';
 
-import { getMediaQueryFromMCX } from "../utils/cypher-wrapper";
-import logo from "../imgs/matrix-logo.svg";
+import { getMediaQueryFromMCX } from '../utils/cypher-wrapper';
+import logo from '../imgs/matrix-logo.svg';
 
-import "./Avatar.scss";
+import './Avatar.scss';
 
 interface IProps {
     className?: string;
@@ -40,7 +40,7 @@ const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
             src={src}
             onError={(): void => setSrc(logo)}
             alt={label}
-            className={classNames("avatar", className)}
+            className={classNames('avatar', className)}
         />
     );
 };

src/components/Button.stories.tsx

@@ -14,16 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { action } from "@storybook/addon-actions";
-import { text } from "@storybook/addon-knobs";
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { text } from '@storybook/addon-knobs';
 
-import Button from "./Button";
+import Button from './Button';
 
-export default { title: "Button" };
+export default { title: 'Button' };
 
 export const WithText: React.FC = () => (
-    <Button onClick={action("clicked")}>
-        {text("label", "Hello Story Book")}
+    <Button onClick={action('clicked')}>
+        {text('label', 'Hello Story Book')}
     </Button>
 );

src/components/Button.tsx

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import classnames from "classnames";
+import React from 'react';
+import classnames from 'classnames';
 
-import "./Button.scss";
+import './Button.scss';
 
 interface IProps extends React.ButtonHTMLAttributes<Element> {
     // Briefly display these instead of the children onClick
@@ -49,7 +49,7 @@ const Button: React.FC<
 
         const content = wasClicked && flashChildren ? flashChildren : children;
 
-        const classNames = classnames("button", className, {
+        const classNames = classnames('button', className, {
             buttonHighlight: wasClicked,
         });
 

src/components/CreateLinkTile.stories.tsx

@@ -14,17 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React from 'react';
 
-import CreateLinkTile from "./CreateLinkTile";
+import CreateLinkTile from './CreateLinkTile';
 
 export default {
-    title: "CreateLinkTile",
+    title: 'CreateLinkTile',
     parameters: {
         design: {
-            type: "figma",
+            type: 'figma',
             url:
-                "https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1",
+                'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1',
         },
     },
 };

src/components/CreateLinkTile.tsx

@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useRef } from "react";
-import Tile from "./Tile";
-import Button from "./Button";
-import TextButton from "./TextButton";
-import Input from "./Input";
-import { Formik, Form } from "formik";
-import * as Yup from "yup";
+import React, { useEffect, useRef } from 'react';
+import Tile from './Tile';
+import Button from './Button';
+import TextButton from './TextButton';
+import Input from './Input';
+import { Formik, Form } from 'formik';
+import * as Yup from 'yup';
 
-import "./CreateLinkTile.scss";
+import './CreateLinkTile.scss';
 
 interface ILinkNotCreatedTileProps {
     setLink: React.Dispatch<React.SetStateAction<string>>;
@@ -39,31 +39,31 @@ const LinkNotCreatedTile: React.FC<ILinkNotCreatedTileProps> = (
             </h1>
             <Formik
                 initialValues={{
-                    identifier: "",
+                    identifier: '',
                 }}
                 validationSchema={Yup.object({
                     identifier: Yup.string()
                         .test(
-                            "is-identifier",
+                            'is-identifier',
                             "That link doesn't look right. Double check the details.",
                             (link) => link
                         )
-                        .required("Required"),
+                        .required('Required'),
                 })}
                 onSubmit={(values): void => {
                     props.setLink(
                         document.location.protocol +
-                            "//" +
+                            '//' +
                             document.location.host +
-                            "/" +
+                            '/' +
                             values.identifier
                     );
                 }}
             >
                 <Form>
                     <Input
-                        name={"identifier"}
-                        type={"text"}
+                        name={'identifier'}
+                        type={'text'}
                         placeholder="#room:example.com, @user:example.com"
                     />
                     <Button type="submit">Get Link</Button>
@@ -90,12 +90,12 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
 
     return (
         <Tile className="createLinkTile">
-            <TextButton onClick={(): void => props.setLink("")}>
+            <TextButton onClick={(): void => props.setLink('')}>
                 Create another lnk
             </TextButton>
             <h1>{props.link}</h1>
             <Button
-                flashChildren={"Copied"}
+                flashChildren={'Copied'}
                 onClick={(): void => {
                     navigator.clipboard.writeText(props.link);
                 }}
@@ -108,7 +108,7 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
 };
 
 const CreateLinkTile: React.FC = () => {
-    const [link, setLink] = React.useState("");
+    const [link, setLink] = React.useState('');
     console.log(link);
     if (!link) {
         return <LinkNotCreatedTile setLink={setLink} />;

src/components/EventPreview.tsx

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { Room, Event } from "matrix-cypher";
+import React from 'react';
+import { Room, Event } from 'matrix-cypher';
 
-import RoomPreview from "./RoomPreview";
+import RoomPreview from './RoomPreview';
 
 interface IProps {
     room: Room;

src/components/Input.stories.tsx

@@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { withDesign } from "storybook-addon-designs";
-import { Formik, Form } from "formik";
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import { Formik, Form } from 'formik';
 
-import Input from "./Input";
+import Input from './Input';
 
 export default {
-    title: "Input",
+    title: 'Input',
     parameters: {
         design: {
-            type: "figma",
+            type: 'figma',
             url:
-                "https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1",
+                'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A1',
         },
     },
     decorators: [withDesign],

src/components/Input.tsx

@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import classnames from "classnames";
-import { useField } from "formik";
+import React from 'react';
+import classnames from 'classnames';
+import { useField } from 'formik';
 
-import "./Input.scss";
+import './Input.scss';
 
 interface IProps extends React.InputHTMLAttributes<Element> {
     name: string;
@@ -33,7 +33,7 @@ const Input: React.FC<IProps> = ({ className, ...props }) => {
             <div className="inputError">{meta.error}</div>
         ) : null;
 
-    const classNames = classnames("input", className, {
+    const classNames = classnames('input', className, {
         error: meta.error,
     });
 

src/components/InviteTile.stories.tsx

@@ -14,41 +14,45 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+// disable camelcase check because our object keys come
+// from the matrix spec
+/* eslint-disable @typescript-eslint/camelcase */
 
-import InviteTile from "./InviteTile";
-import UserPreview, { InviterPreview } from "./UserPreview";
-import RoomPreview, { RoomPreviewWithTopic } from "./RoomPreview";
-import Clients from "../clients";
-import { LinkKind, SafeLink } from "../parser/types";
+import React from 'react';
+
+import InviteTile from './InviteTile';
+import UserPreview, { InviterPreview } from './UserPreview';
+import RoomPreview, { RoomPreviewWithTopic } from './RoomPreview';
+import Clients from '../clients';
+import { LinkKind, SafeLink } from '../parser/types';
 
 export default {
-    title: "InviteTile",
+    title: 'InviteTile',
     parameters: {
         design: {
-            type: "figma",
+            type: 'figma',
             url:
-                "https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A334",
+                'https://figma.com/file/WSXjCGc1k6FVI093qhlzOP/04-Recieving-share-link?node-id=59%3A334',
         },
     },
 };
 
 const userLink: SafeLink = {
     kind: LinkKind.UserId,
-    identifier: "@jorik:matrix.org",
+    identifier: '@jorik:matrix.org',
     arguments: {
         vias: [],
     },
-    originalLink: "asdfsadf",
+    originalLink: 'asdfsadf',
 };
 
 const roomLink: SafeLink = {
     kind: LinkKind.Alias,
-    identifier: "#element-dev:matrix.org",
+    identifier: '#element-dev:matrix.org',
     arguments: {
         vias: [],
     },
-    originalLink: "asdfsadf",
+    originalLink: 'asdfsadf',
 };
 
 export const withLink: React.FC<{}> = () => (
@@ -67,8 +71,8 @@ export const withUserPreview: React.FC<{}> = () => (
     <InviteTile client={Clients[0]} link={userLink}>
         <UserPreview
             user={{
-                avatar_url: "mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf",
-                displayname: "Nicholas Briteli",
+                avatar_url: 'mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf',
+                displayname: 'Nicholas Briteli',
             }}
             userId="@nicholasbritelli:matrix.org"
         />
@@ -79,13 +83,13 @@ export const withRoomPreviewAndRoomTopic: React.FC<{}> = () => (
     <InviteTile client={Clients[0]} link={roomLink}>
         <RoomPreviewWithTopic
             room={{
-                aliases: ["#murrays:cheese.bar"],
-                avatar_url: "mxc://bleeker.street/CHEDDARandBRIE",
+                aliases: ['#murrays:cheese.bar'],
+                avatar_url: 'mxc://bleeker.street/CHEDDARandBRIE',
                 guest_can_join: false,
-                name: "CHEESE",
+                name: 'CHEESE',
                 num_joined_members: 37,
-                room_id: "!ol19s:bleecker.street",
-                topic: "Tasty tasty cheese",
+                room_id: '!ol19s:bleecker.street',
+                topic: 'Tasty tasty cheese',
                 world_readable: true,
             }}
         />
@@ -96,20 +100,20 @@ export const withRoomPreviewAndInviter: React.FC<{}> = () => (
     <InviteTile client={Clients[0]} link={roomLink}>
         <InviterPreview
             user={{
-                avatar_url: "mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf",
-                displayname: "Nicholas Briteli",
+                avatar_url: 'mxc://matrix.org/EqMZYbAYhREvHXvYFyfxOlkf',
+                displayname: 'Nicholas Briteli',
             }}
             userId="@nicholasbritelli:matrix.org"
         />
         <RoomPreview
             room={{
-                aliases: ["#murrays:cheese.bar"],
-                avatar_url: "mxc://bleeker.street/CHEDDARandBRIE",
+                aliases: ['#murrays:cheese.bar'],
+                avatar_url: 'mxc://bleeker.street/CHEDDARandBRIE',
                 guest_can_join: false,
-                name: "CHEESE",
+                name: 'CHEESE',
                 num_joined_members: 37,
-                room_id: "!ol19s:bleecker.street",
-                topic: "Tasty tasty cheese",
+                room_id: '!ol19s:bleecker.street',
+                topic: 'Tasty tasty cheese',
                 world_readable: true,
             }}
         />

src/components/InviteTile.tsx

@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React from 'react';
 
-import "./InviteTile.scss";
+import './InviteTile.scss';
 
-import Tile from "./Tile";
-import LinkButton from "./LinkButton";
-import TextButton from "./TextButton";
-import { Client, ClientKind } from "../clients/types";
-import { SafeLink } from "../parser/types";
+import Tile from './Tile';
+import LinkButton from './LinkButton';
+import TextButton from './TextButton';
+import { Client, ClientKind } from '../clients/types';
+import { SafeLink } from '../parser/types';
 
 interface IProps {
     children?: React.ReactNode;

src/components/LinkButton.tsx

@@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import classnames from "classnames";
+import React from 'react';
+import classnames from 'classnames';
 
-import "./Button.scss";
+import './Button.scss';
 
 interface IProps extends React.LinkHTMLAttributes<HTMLElement> {}
 
 const LinkButton: React.FC<IProps> = ({ className, ...props }: IProps) => (
-    <a className={classnames("button", className)} {...props} />
+    <a className={classnames('button', className)} {...props} />
 );
 
 export default LinkButton;

src/components/LinkPreview.tsx

@@ -14,21 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useState, useEffect } from "react";
-import { getEvent, client } from "matrix-cypher";
-
-import { RoomPreviewWithTopic } from "./RoomPreview";
-import InviteTile from "./InviteTile";
-import { SafeLink, LinkKind } from "../parser/types";
-import UserPreview from "./UserPreview";
-import EventPreview from "./EventPreview";
-import Clients from "../clients";
+import React, { useState, useEffect } from 'react';
+import { getEvent, client } from 'matrix-cypher';
+
+import { RoomPreviewWithTopic } from './RoomPreview';
+import InviteTile from './InviteTile';
+import { SafeLink, LinkKind } from '../parser/types';
+import UserPreview from './UserPreview';
+import EventPreview from './EventPreview';
+import Clients from '../clients';
 import {
     getRoomFromId,
     getRoomFromAlias,
     getRoomFromPermalink,
     getUser,
-} from "../utils/cypher-wrapper";
+} from '../utils/cypher-wrapper';
 
 interface IProps {
     link: SafeLink;
@@ -38,7 +38,7 @@ const LOADING: JSX.Element = <>Generating invite</>;
 
 const invite = async ({ link }: { link: SafeLink }): Promise<JSX.Element> => {
     // TODO: replace with client fetch
-    const defaultClient = await client("https://matrix.org");
+    const defaultClient = await client('https://matrix.org');
     switch (link.kind) {
         case LinkKind.Alias:
             return (

src/components/MatrixTile.stories.tsx

@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React from 'react';
 
-import MatrixTile from "./MatrixTile";
+import MatrixTile from './MatrixTile';
 
-export default { title: "MatrixTile" };
+export default { title: 'MatrixTile' };
 
 export const Default: React.FC = () => <MatrixTile />;

src/components/MatrixTile.tsx

@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import Tile from "./Tile";
+import React from 'react';
+import Tile from './Tile';
 
-import logo from "../imgs/matrix-logo.svg";
+import logo from '../imgs/matrix-logo.svg';
 
-import "./MatrixTile.scss";
+import './MatrixTile.scss';
 
 const MatrixTile: React.FC = () => {
     return (

src/components/RoomPreview.tsx

@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { Room } from "matrix-cypher";
+import React from 'react';
+import { Room } from 'matrix-cypher';
 
-import { RoomAvatar } from "./Avatar";
+import { RoomAvatar } from './Avatar';
 
-import "./RoomPreview.scss";
+import './RoomPreview.scss';
 
 interface IProps {
     room: Room;