Format all TypeScript files with Prettier through TSLint (#1529)

* Format all TypeScript files with Prettier

* Switch to double-quotes in JSX

.prettierrc

@@ -1,5 +1,9 @@
 {
-  "printWidth": 100,
+  "jsxBracketSameLine": true,
+  "jsxSingleQuote": false,
+  "parser": "typescript",
+  "printWidth": 80,
+  "semi": true,
   "singleQuote": true,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
 }

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `6.9.0`.
+- TypeScript are now formatted with Prettier ([#1529](https://github.com/elastic/eui/pull/1529))
 
 ## [`6.9.0`](https://github.com/elastic/eui/tree/v6.9.0)
 

package.json

@@ -134,7 +134,7 @@
     "postcss-inline-svg": "^3.0.0",
     "postcss-loader": "^2.0.8",
     "pre-commit": "^1.2.2",
-    "prettier": "^1.11.1",
+    "prettier": "^1.16.4",
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "raw-loader": "^0.5.1",
@@ -159,6 +159,8 @@
     "start-server-and-test": "^1.1.4",
     "style-loader": "^0.19.0",
     "tslint": "^5.11.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-plugin-prettier": "^2.0.1",
     "typescript": "^2.9.2",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.0.1",

src-docs/src/views/accessibility/screen_reader.tsx

@@ -1,21 +1,16 @@
 import React from 'react';
 
-import {
-  EuiScreenReaderOnly,
-} from '../../../../src/components/accessibility/screen_reader';
+import { EuiScreenReaderOnly } from '../../../../src/components/accessibility/screen_reader';
 
 export default () => (
   <div>
-    <p>
-      This is the first paragraph. It is visible to all.
-    </p>
+    <p>This is the first paragraph. It is visible to all.</p>
     <EuiScreenReaderOnly>
       <p>
-        This is the second paragraph. It is hidden for sighted users but visible to screen readers.
+        This is the second paragraph. It is hidden for sighted users but visible
+        to screen readers.
       </p>
     </EuiScreenReaderOnly>
-    <p>
-      This is the third paragraph. It is visible to all.
-    </p>
+    <p>This is the third paragraph. It is visible to all.</p>
   </div>
 );

src-docs/src/views/badge/notification_badge.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
 
-import {
-  EuiNotificationBadge,
-} from '../../../../src/components/badge/notification_badge';
+import { EuiNotificationBadge } from '../../../../src/components/badge/notification_badge';
 
-export default () => (
-  <EuiNotificationBadge>
-    3
-  </EuiNotificationBadge>
-);
+export default () => <EuiNotificationBadge>3</EuiNotificationBadge>;

src-docs/src/views/expression/colors.tsx

@@ -5,40 +5,17 @@ import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>
-    <EuiExpression
-      description="Secondary"
-      value="isDefault()"
-    />
+    <EuiExpression description="Secondary" value="isDefault()" />
     <EuiSpacer size="s" />
-    <EuiExpression
-      description="Primary"
-      value="color()"
-      color="primary"
-    />
+    <EuiExpression description="Primary" value="color()" color="primary" />
     <EuiSpacer size="s" />
-    <EuiExpression
-      description="accent"
-      value="color()"
-      color="accent"
-    />
+    <EuiExpression description="accent" value="color()" color="accent" />
     <EuiSpacer size="s" />
-    <EuiExpression
-      description="warning"
-      value="color()"
-      color="warning"
-    />
+    <EuiExpression description="warning" value="color()" color="warning" />
     <EuiSpacer size="s" />
-    <EuiExpression
-      description="danger"
-      value="color()"
-      color="danger"
-    />
+    <EuiExpression description="danger" value="color()" color="danger" />
     <EuiSpacer size="s" />
-    <EuiExpression
-      description="subdued"
-      value="color()"
-      color="subdued"
-    />
+    <EuiExpression description="subdued" value="color()" color="subdued" />
     <EuiSpacer size="s" />
     <EuiExpression
       description="active"

src-docs/src/views/expression/stringing.tsx

@@ -19,10 +19,7 @@ export default () => (
       value="kibana_sample_data_ky_avl right"
       onClick={() => {}}
     />
-    <EuiExpression
-      description="on"
-      value="left.smis = right.kytccountynmbr"
-    />
+    <EuiExpression description="on" value="left.smis = right.kytccountynmbr" />
     <EuiExpression
       description="group by"
       value="right.kytccountynmbr"

src-docs/src/views/horizontal_rule/horizontal_rule.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 
-import {
-  EuiHorizontalRule,
-} from '../../../../src/components/horizontal_rule';
+import { EuiHorizontalRule } from '../../../../src/components/horizontal_rule';
 
 export default () => (
   <div>
-    <EuiHorizontalRule size="quarter"/>
-    <EuiHorizontalRule size="half"/>
+    <EuiHorizontalRule size="quarter" />
+    <EuiHorizontalRule size="half" />
     <EuiHorizontalRule />
   </div>
 );

src-docs/src/views/horizontal_rule/horizontal_rule_margin.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import {
-  EuiHorizontalRule,
-} from '../../../../src/components/horizontal_rule';
+import { EuiHorizontalRule } from '../../../../src/components/horizontal_rule';
 
 export default () => (
   <div>

src-docs/src/views/spacer/spacer.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 
-import {
-  EuiSpacer,
-} from '../../../../src/components/spacer';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 export default () => (
   <div>
     <p>xs: 4px</p>
-    <EuiSpacer size="xs"/>
+    <EuiSpacer size="xs" />
 
     <br />
     <br />

src-framer/code/App.tsx

@@ -3,11 +3,11 @@ import { Data, animate, Override, Animatable } from 'framer';
 const data = Data({ scale: Animatable(1) });
 
 export const Scale: Override = () => {
-    return {
-        scale: data.scale,
-        onTap() {
-            data.scale.set(0.6);
-            animate.spring(data.scale, 1);
-        },
-    };
+  return {
+    scale: data.scale,
+    onTap() {
+      data.scale.set(0.6);
+      animate.spring(data.scale, 1);
+    },
+  };
 };

src-framer/code/Examples.tsx

@@ -9,58 +9,58 @@ const data = Data({
 });
 
 export const Scale: Override = () => {
-    return {
-        scale: data.scale,
-        onTap() {
-            data.scale.set(0.6);
-            animate.spring(data.scale, 1);
-        },
-    };
+  return {
+    scale: data.scale,
+    onTap() {
+      data.scale.set(0.6);
+      animate.spring(data.scale, 1);
+    },
+  };
 };
 
 export const Rotate: Override = props => {
-    data.rotation.set(props.rotation);
+  data.rotation.set(props.rotation);
 
-    return {
-        rotation: data.rotation,
-        onTap() {
-            animate.spring(data.rotation, data.rotation.get() + 90, {
-                tension: 250,
-                friction: 20,
-            });
-        },
-    };
+  return {
+    rotation: data.rotation,
+    onTap() {
+      animate.spring(data.rotation, data.rotation.get() + 90, {
+        tension: 250,
+        friction: 20,
+      });
+    },
+  };
 };
 
 export const Fade: Override = props => {
-    data.opacity.set(props.opacity);
+  data.opacity.set(props.opacity);
 
-    return {
-        opacity: data.opacity,
-        onTap() {
-            animate.linear(data.opacity, 0, 0.2);
-        },
-    };
+  return {
+    opacity: data.opacity,
+    onTap() {
+      animate.linear(data.opacity, 0, 0.2);
+    },
+  };
 };
 
 export const FlipOutput: Override = () => {
-    return {
-        rotationY: data.rotationY,
-    };
+  return {
+    rotationY: data.rotationY,
+  };
 };
 
 export const FlipInput: Override = () => {
-    return {
-        onTap() {
-            const toggle = data.toggle;
-            animate.spring(
-                { rotationY: data.rotationY },
-                {
-                    rotationY: toggle ? 360 : 0,
-                },
-                { tension: 200, friction: 20 }
-            );
-            data.toggle = !toggle;
+  return {
+    onTap() {
+      const toggle = data.toggle;
+      animate.spring(
+        { rotationY: data.rotationY },
+        {
+          rotationY: toggle ? 360 : 0,
         },
-    };
+        { tension: 200, friction: 20 }
+      );
+      data.toggle = !toggle;
+    },
+  };
 };

src-framer/code/_framer_helpers/frame_size.tsx

@@ -7,7 +7,6 @@ interface Props {
 }
 
 export class FrameSize extends React.Component<Props> {
-
   // Set default properties
   static defaultProps = {
     frame: true,
@@ -25,13 +24,19 @@ export class FrameSize extends React.Component<Props> {
     let optionallyFramedComponent;
     if (this.props.frame) {
       optionallyFramedComponent = (
-        <div style={{ display: 'flex', position: 'absolute', height: '100%', width: '100%' }}>
+        <div
+          style={{
+            display: 'flex',
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+          }}>
           {this.props.children}
         </div>
       );
     } else {
-      optionallyFramedComponent = (this.props.children);
+      optionallyFramedComponent = this.props.children;
     }
-    return (<React.Fragment>{optionallyFramedComponent}</React.Fragment>);
+    return <React.Fragment>{optionallyFramedComponent}</React.Fragment>;
   }
 }

src-framer/code/_framer_helpers/theme.tsx

@@ -25,17 +25,18 @@ export class Theme extends React.Component<Props> {
   };
 
   render() {
-
     const lightBgColor = '#FFF';
     const darkBgColor = '#222';
-    const bgColor = (this.props.theme === 'light' ? lightBgColor : darkBgColor);
+    const bgColor = this.props.theme === 'light' ? lightBgColor : darkBgColor;
     return (
       <FrameSize>
         <div style={{ background: bgColor, flexGrow: 1, display: 'flex' }}>
           <style
             type="text/css"
-            dangerouslySetInnerHTML={{__html: this.props.theme === 'light' ? LightCSS : DarkCSS}}>
-          </style>
+            dangerouslySetInnerHTML={{
+              __html: this.props.theme === 'light' ? LightCSS : DarkCSS,
+            }}
+          />
         </div>
       </FrameSize>
     );

src-framer/code/avatar/avatar.tsx

@@ -1,8 +1,12 @@
-import { EuiAvatar, SIZES, TYPES } from '@elastic/eui/lib/components/avatar/avatar.js';
+import {
+  EuiAvatar,
+  SIZES,
+  TYPES,
+} from '@elastic/eui/lib/components/avatar/avatar.js';
 import { ControlType, PropertyControls } from 'framer';
 import React from 'react';
 
-const initialsOptions = [ '1', '2' ];
+const initialsOptions = ['1', '2'];
 
 // Define type of property
 interface Props {
@@ -15,7 +19,6 @@ interface Props {
 }
 
 export class Avatar extends React.Component<Props> {
-
   // Set default properties
   static defaultProps = {
     name: 'Han Solo',