Merge pull request #254 from spotify/freben/ts

Just some utilities converted to ts

packages/core/src/components/Lifecycle/Lifecycle.js

@@ -1,60 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-class Lifecycle extends Component {
-  static propTypes = {
-    isShorthand: PropTypes.bool,
-    fontSize: PropTypes.string,
-  };
-}
-
-const styles = {
-  alpha: {
-    color: '#d00150',
-    fontFamily: 'serif',
-    fontWeight: 'normal',
-    fontStyle: 'italic',
-  },
-  beta: {
-    color: '#4d65cc',
-    fontFamily: 'serif',
-    fontWeight: 'normal',
-    fontStyle: 'italic',
-  },
-};
-
-export class AlphaLabel extends Lifecycle {
-  render() {
-    const style = fontSize => ({ ...styles.alpha, fontSize, ...this.props.style });
-    return this.props.isShorthand ? (
-      <span style={style('120%')}>&alpha;</span>
-    ) : (
-      <span style={style('100%')}>Alpha</span>
-    );
-  }
-}
-
-export class BetaLabel extends Lifecycle {
-  render() {
-    const fontSize = this.props.fontSize || (this.props.isShorthand ? '120%' : '100%');
-    const style = { ...styles.beta, fontSize, ...this.props.style };
-
-    return this.props.isShorthand ? <span style={style}>&beta;</span> : <span style={style}>Beta</span>;
-  }
-}

packages/core/src/components/Lifecycle/Lifecycle.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import CSS from 'csstype';
+import { makeStyles } from '@material-ui/core';
+
+type Props = CSS.Properties & {
+  isShorthand?: boolean;
+};
+
+const useStyles = makeStyles({
+  alpha: {
+    color: '#d00150',
+    fontFamily: 'serif',
+    fontWeight: 'normal',
+    fontStyle: 'italic',
+  },
+  beta: {
+    color: '#4d65cc',
+    fontFamily: 'serif',
+    fontWeight: 'normal',
+    fontStyle: 'italic',
+  },
+});
+
+export const AlphaLabel: FC<Props> = props => {
+  const classes = useStyles(props);
+  const { isShorthand } = props;
+  return isShorthand ? (
+    <span className={classes.alpha} style={{ fontSize: '120%' }}>
+      &alpha;
+    </span>
+  ) : (
+    <span className={classes.alpha}>Alpha</span>
+  );
+};
+
+export const BetaLabel: FC<Props> = props => {
+  const classes = useStyles(props);
+  const { isShorthand } = props;
+  return isShorthand ? (
+    <span className={classes.beta} style={{ fontSize: '120%' }}>
+      &beta;
+    </span>
+  ) : (
+    <span className={classes.beta}>Beta</span>
+  );
+};

packages/core/src/components/Progress/Progress.tsx

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React, { useState, useEffect } from 'react';
-import { LinearProgress } from '@material-ui/core';
+import React, { FC, useState, useEffect } from 'react';
+import { LinearProgress, LinearProgressProps } from '@material-ui/core';
 
-const Progress = childProps => {
+const Progress: FC<LinearProgressProps> = props => {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
@@ -26,7 +26,7 @@ const Progress = childProps => {
   }, []);
 
   return isVisible ? (
-    <LinearProgress {...childProps} data-testid="progress" />
+    <LinearProgress {...props} data-testid="progress" />
   ) : (
     <div style={{ display: 'none' }} data-testid="progress" />
   );

packages/core/src/components/Status/Status.js

@@ -1,95 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { pure } from 'recompose';
-import { withStyles } from '@material-ui/core';
-
-const styles = theme => ({
-  status: {
-    width: 12,
-    height: 12,
-    display: 'inline-block',
-    marginRight: 1,
-  },
-  ok: {
-    backgroundColor: theme.palette.status.ok,
-    borderRadius: '50%',
-  },
-  warning: {
-    backgroundColor: theme.palette.status.warning,
-  },
-  error: {
-    width: '0',
-    height: '0',
-    borderLeft: '7px solid transparent',
-    borderRight: '7px solid transparent',
-    borderBottom: `14px solid ${theme.palette.status.error}`,
-  },
-  pending: {
-    backgroundColor: theme.palette.status.pending,
-  },
-  failed: {
-    backgroundColor: 'rgba(245, 155, 35, 0.5)',
-  },
-  running: {
-    animation: 'blink 0.8s step-start 0s infinite',
-    backgroundColor: theme.palette.status.running,
-  },
-  '@keyframes blink': {
-    '50%': {
-      backgroundColor: theme.palette.status.background,
-    },
-  },
-});
-
-export const StatusOK = pure(
-  withStyles(styles)(props => (
-    <span className={`${props.classes.status} ${props.classes.ok}`} aria-label="Status OK" {...props} />
-  )),
-);
-
-export const StatusWarning = pure(
-  withStyles(styles)(props => (
-    <span className={`${props.classes.status} ${props.classes.warning}`} aria-label="Status warning" {...props} />
-  )),
-);
-
-export const StatusError = pure(
-  withStyles(styles)(props => (
-    <span className={`${props.classes.status} ${props.classes.error}`} aria-label="Status error" {...props} />
-  )),
-);
-
-export const StatusNA = pure(() => <span aria-label="Status N/A">N/A</span>);
-
-export const StatusPending = pure(
-  withStyles(styles)(props => (
-    <span className={`${props.classes.status} ${props.classes.pending}`} aria-label="Status pending" {...props} />
-  )),
-);
-
-export const StatusRunning = pure(
-  withStyles(styles)(props => (
-    <span className={`${props.classes.status} ${props.classes.running}`} aria-label="Status running" {...props} />
-  )),
-);
-
-export const StatusFailed = pure(
-  withStyles(styles)(props => (
-    <span className={`${props.classes.status} ${props.classes.failed}`} aria-label="Status failed" {...props} />
-  )),
-);

packages/core/src/components/Status/Status.tsx

@@ -0,0 +1,130 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { makeStyles } from '@material-ui/core';
+import classNames from 'classnames';
+import React, { FC } from 'react';
+import { BackstageTheme } from '../../theme/theme';
+
+const useStyles = makeStyles((theme: BackstageTheme) => ({
+  status: {
+    width: 12,
+    height: 12,
+    display: 'inline-block',
+    marginRight: 1,
+  },
+  ok: {
+    backgroundColor: theme.palette.status.ok,
+    borderRadius: '50%',
+  },
+  warning: {
+    backgroundColor: theme.palette.status.warning,
+  },
+  error: {
+    width: '0',
+    height: '0',
+    borderLeft: '7px solid transparent',
+    borderRight: '7px solid transparent',
+    borderBottom: `14px solid ${theme.palette.status.error}`,
+  },
+  pending: {
+    backgroundColor: theme.palette.status.pending,
+  },
+  failed: {
+    backgroundColor: 'rgba(245, 155, 35, 0.5)',
+  },
+  running: {
+    animation: 'blink 0.8s step-start 0s infinite',
+    backgroundColor: theme.palette.status.running,
+  },
+  '@keyframes blink': {
+    '50%': {
+      backgroundColor: theme.palette.status.background,
+    },
+  },
+}));
+
+export const StatusOK: FC<{}> = props => {
+  const classes = useStyles(props);
+  return (
+    <span
+      className={classNames(classes.status, classes.ok)}
+      aria-label="Status OK"
+      {...props}
+    />
+  );
+};
+
+export const StatusWarning: FC<{}> = props => {
+  const classes = useStyles(props);
+  return (
+    <span
+      className={classNames(classes.status, classes.warning)}
+      aria-label="Status warning"
+      {...props}
+    />
+  );
+};
+
+export const StatusError: FC<{}> = props => {
+  const classes = useStyles(props);
+  return (
+    <span
+      className={classNames(classes.status, classes.error)}
+      aria-label="Status error"
+      {...props}
+    />
+  );
+};
+
+export const StatusNA: FC<{}> = props => (
+  <span aria-label="Status N/A" {...props}>
+    N/A
+  </span>
+);
+
+export const StatusPending: FC<{}> = props => {
+  const classes = useStyles(props);
+  return (
+    <span
+      className={classNames(classes.status, classes.pending)}
+      aria-label="Status pending"
+      {...props}
+    />
+  );
+};
+
+export const StatusRunning: FC<{}> = props => {
+  const classes = useStyles(props);
+  return (
+    <span
+      className={classNames(classes.status, classes.running)}
+      aria-label="Status running"
+      {...props}
+    />
+  );
+};
+
+export const StatusFailed: FC<{}> = props => {
+  const classes = useStyles(props);
+  return (
+    <span
+      className={classNames(classes.status, classes.failed)}
+      aria-label="Status failed"
+      {...props}
+    />
+  );
+};

packages/core/src/theme/theme.d.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Theme } from '@material-ui/core';
+
+export type BackstageTheme = Theme & {
+  palette: {
+    status: {
+      ok: string;
+      warning: string;
+      error: string;
+      pending: string;
+      running: string;
+      background: string;
+    };
+  };
+};