Format all TypeScript files with Prettier through TSLint

.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',