stash

packages/devui/.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container } from '../src';
 import { listSchemes, listThemes } from '../src/utils/theme';
-import '../src/presets.js';
+import '../src/presets';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

packages/devui/.storybook/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../../tsconfig.react.base.json",
-  "include": ["../src", "./"]
+  "include": ["../src", "."]
 }

packages/devui/package.json

@@ -39,6 +39,7 @@
     "base16": "^1.0.0",
     "codemirror": "^5.56.0",
     "color": "^3.1.2",
+    "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.7.2",
     "react-icons": "^3.10.0",
     "react-jsonschema-form": "^1.8.1",

packages/devui/src/Button/Button.stories.tsx

@@ -27,6 +27,7 @@ const Template: Story<ButtonProps> = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   title: 'Hello Tooltip! \\a And from new line hello!',
+  tooltipPosition: 'top',
   primary: true,
   size: 'normal',
   disabled: false,
@@ -43,6 +44,7 @@ export const Mark = Template.bind({});
 Mark.args = {
   mark: 'base08',
   title: 'Hello Tooltip',
+  tooltipPosition: 'top',
   size: 'normal',
   disabled: false,
   children: <MdFiberManualRecord />,

packages/devui/src/Editor/Editor.stories.tsx

@@ -42,7 +42,7 @@ const WithTabsTemplate: Story<WithTabsProps> = (args) => (
 export const WithTabs = WithTabsTemplate.bind({});
 WithTabs.args = {
   lineNumbers: true,
-  align: 'left',
+  position: 'left',
 };
 WithTabs.argTypes = {
   value: { control: { disable: true } },

packages/devui/src/Editor/WithTabs.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, ComponentType } from 'react';
 import Editor from './';
 import Tabs from '../Tabs';
 
@@ -11,7 +11,7 @@ const value2 = `
 `;
 
 export interface WithTabsProps {
-  align: 'left' | 'right' | 'center';
+  position: 'left' | 'right' | 'center';
   lineNumbers: boolean;
 }
 
@@ -27,18 +27,18 @@ export default class WithTabs extends Component<WithTabsProps> {
   };
 
   render() {
-    const { align, lineNumbers } = this.props;
+    const { position, lineNumbers } = this.props;
     return (
-      <Tabs
+      <Tabs<TabProps>
         tabs={[
           {
             name: 'Function 1',
-            component: Editor,
+            component: (Editor as unknown) as ComponentType<TabProps>,
             selector: () => ({ value: value1, lineNumbers }),
           },
           {
             name: 'Function 2',
-            component: Editor,
+            component: (Editor as unknown) as ComponentType<TabProps>,
             selector: () => ({ value: value2, lineNumbers }),
           },
         ]}
@@ -46,7 +46,7 @@ export default class WithTabs extends Component<WithTabsProps> {
         onClick={(selected) => {
           this.setState({ selected });
         }}
-        align={align}
+        position={position}
       />
     );
   }

packages/devui/src/Form/widgets.tsx

@@ -1,32 +1,30 @@
 import React from 'react';
-import { Widget } from 'react-jsonschema-form';
+import { FieldProps, Widget, WidgetProps } from 'react-jsonschema-form';
 import Select from '../Select';
 import Slider from '../Slider';
 
 /* eslint-disable react/prop-types */
-const SelectWidget: Widget = ({ options, multi, ...rest }) => (
+const SelectWidget: Widget = ({ options, ...rest }) => (
-  <Select options={options.enumOptions} multiple={multi} {...rest} />
+  <Select options={options.enumOptions} {...rest} />
 );
 
-const RangeWidget: Widget = ({
+const RangeWidget: Widget = (({
   schema,
-  readonly,
+  disabled,
-  autofocus,
   label, // eslint-disable-line
   options, // eslint-disable-line
   formContext, // eslint-disable-line
   registry, // eslint-disable-line
   ...rest
-}) => (
+}: WidgetProps & { registry: FieldProps['registry'] }) =>
+  (
     <Slider
       {...rest}
-    autoFocus={autofocus}
+      disabled={disabled}
-    readOnly={readonly}
       min={schema.minimum}
       max={schema.maximum}
-    step={schema.multipleOf}
       withValue
     />
-);
+  ) as unknown) as Widget;
 
 export default { SelectWidget, RangeWidget };

packages/devui/src/Select/Select.tsx

@@ -11,7 +11,7 @@ export interface SelectProps extends Omit<ReactSelectProps, 'theme'> {
 /**
  * Wrapper around [React Select](https://github.com/JedWatson/react-select).
  */
-class Select extends (PureComponent || Component)<SelectProps> {
+export class Select extends (PureComponent || Component)<SelectProps> {
   render() {
     return (
       <ReactSelect

packages/devui/src/Tabs/Tabs.stories.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Story } from '@storybook/react';
 import Tabs from './';
 import { tabs, simple10Tabs } from './data';
+import { TabsProps } from './Tabs';
 
 const Container = styled.div`
   display: flex;
@@ -16,7 +18,7 @@ export default {
   component: Tabs,
 };
 
-const Template = (args) => (
+const Template: Story<TabsProps<unknown>> = (args) => (
   <Container>
     <Tabs {...args} />
   </Container>
@@ -35,7 +37,9 @@ Default.argTypes = {
   onClick: { control: { disable: true } },
 };
 
-export const WithContent = Template.bind({});
+export const WithContent = (Template as Story<
+  TabsProps<{ selected: string }>
+>).bind({});
 WithContent.args = {
   tabs,
   selected: 'Tab2',

packages/devui/src/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import TabsHeader from './TabsHeader';
+import TabsHeader, { ReactButtonElement, Tab } from './TabsHeader';
 import { TabsContainer } from './styles/common';
 
 export type Position = 'left' | 'right' | 'center';
@@ -96,9 +96,8 @@ export default class Tabs<P> extends Component<TabsProps<P>> {
       </TabsContainer>
     );
   }
-}
 
-Tabs.propTypes = {
+  static propTypes = {
     tabs: PropTypes.array.isRequired,
     selected: PropTypes.string,
     main: PropTypes.bool,
@@ -107,4 +106,5 @@ Tabs.propTypes = {
     position: PropTypes.oneOf(['left', 'right', 'center']),
   };
 
-Tabs.defaultProps = { position: 'left' };
+  static defaultProps = { position: 'left' };
+}

packages/devui/src/Tabs/TabsHeader.tsx

@@ -22,7 +22,7 @@ export interface Tab<P> {
 
 interface Props<P> {
   tabs: ReactButtonElement[];
-  items: Tab<P>;
+  items: Tab<P>[];
   main: boolean | undefined;
   onClick: (value: string) => void;
   position: 'left' | 'right' | 'center';
@@ -38,17 +38,18 @@ interface State {
 }
 
 export default class TabsHeader<P> extends Component<Props<P>, State> {
-  constructor(props: Props<P>) {
+  state: State = {
-    super(props);
+    visibleTabs: this.props.tabs.slice(),
-    this.state = {
-      visibleTabs: props.tabs.slice(),
     hiddenTabs: [],
     subMenuOpened: false,
     contextMenu: undefined,
   };
-    this.iconWidth = 0;
+
-    this.hiddenTabsWidth = [];
+  iconWidth = 0;
-  }
+  hiddenTabsWidth: number[] = [];
+  tabsWrapperRef?: HTMLDivElement | null;
+  tabsRef?: HTMLDivElement | null;
+  resizeDetector?: HTMLIFrameElement;
 
   UNSAFE_componentWillReceiveProps(nextProps: Props<P>) {
     if (
@@ -76,8 +77,11 @@ export default class TabsHeader<P> extends Component<Props<P>, State> {
 
     let shouldCollapse = false;
     if (this.iconWidth === 0) {
-      const tabButtons = this.tabsRef.children;
+      const tabButtons = this.tabsRef!.children;
-      if (this.tabsRef.children[tabButtons.length - 1].value === 'expandIcon') {
+      if (
+        (this.tabsRef!.children[tabButtons.length - 1] as HTMLButtonElement)
+          .value === 'expandIcon'
+      ) {
         this.iconWidth = tabButtons[
           tabButtons.length - 1
         ].getBoundingClientRect().width;
@@ -104,12 +108,12 @@ export default class TabsHeader<P> extends Component<Props<P>, State> {
   }
 
   enableResizeEvents() {
-    this.resizeDetector = observeResize(this.tabsWrapperRef, this.collapse);
+    this.resizeDetector = observeResize(this.tabsWrapperRef!, this.collapse);
     window.addEventListener('mousedown', this.hideSubmenu);
   }
 
   disableResizeEvents() {
-    this.resizeDetector.remove();
+    this.resizeDetector!.remove();
     window.removeEventListener('mousedown', this.hideSubmenu);
   }
 
@@ -119,13 +123,13 @@ export default class TabsHeader<P> extends Component<Props<P>, State> {
     const { selected, tabs } = this.props;
     const tabsWrapperRef = this.tabsWrapperRef;
     const tabsRef = this.tabsRef;
-    const tabButtons = this.tabsRef.children;
+    const tabButtons = this.tabsRef!.children;
     const visibleTabs = this.state.visibleTabs;
     const hiddenTabs = this.state.hiddenTabs;
-    let tabsWrapperRight = tabsWrapperRef.getBoundingClientRect().right;
+    let tabsWrapperRight = tabsWrapperRef!.getBoundingClientRect().right;
     if (!tabsWrapperRight) return; // tabs are hidden
 
-    const tabsRefRight = tabsRef.getBoundingClientRect().right;
+    const tabsRefRight = tabsRef!.getBoundingClientRect().right;
     let i = visibleTabs.length - 1;
     let hiddenTab;
 
@@ -133,16 +137,16 @@ export default class TabsHeader<P> extends Component<Props<P>, State> {
       if (
         this.props.position === 'right' &&
         hiddenTabs.length > 0 &&
-        tabsRef.getBoundingClientRect().width + this.hiddenTabsWidth[0] <
+        tabsRef!.getBoundingClientRect().width + this.hiddenTabsWidth[0] <
-          tabsWrapperRef.getBoundingClientRect().width
+          tabsWrapperRef!.getBoundingClientRect().width
       ) {
         while (
           i < tabs.length - 1 &&
-          tabsRef.getBoundingClientRect().width + this.hiddenTabsWidth[0] <
+          tabsRef!.getBoundingClientRect().width + this.hiddenTabsWidth[0] <
-            tabsWrapperRef.getBoundingClientRect().width
+            tabsWrapperRef!.getBoundingClientRect().width
         ) {
           hiddenTab = hiddenTabs.shift();
-          visibleTabs.splice(Number(hiddenTab.key), 0, hiddenTab);
+          visibleTabs.splice(Number(hiddenTab!.key), 0, hiddenTab!);
           i++;
         }
       } else {
@@ -152,7 +156,7 @@ export default class TabsHeader<P> extends Component<Props<P>, State> {
           tabButtons[i].getBoundingClientRect().right >=
             tabsWrapperRight - this.iconWidth
         ) {
-          if (tabButtons[i].value !== selected) {
+          if ((tabButtons[i] as HTMLButtonElement).value !== selected) {
             hiddenTabs.unshift(...visibleTabs.splice(i, 1));
             this.hiddenTabsWidth.unshift(
               tabButtons[i].getBoundingClientRect().width
@@ -171,7 +175,7 @@ export default class TabsHeader<P> extends Component<Props<P>, State> {
           tabsWrapperRight - this.iconWidth
       ) {
         hiddenTab = hiddenTabs.shift();
-        visibleTabs.splice(Number(hiddenTab.key), 0, hiddenTab);
+        visibleTabs.splice(Number(hiddenTab!.key), 0, hiddenTab!);
         this.hiddenTabsWidth.shift();
         i++;
       }
@@ -183,15 +187,15 @@ export default class TabsHeader<P> extends Component<Props<P>, State> {
     this.setState({ subMenuOpened: false, contextMenu: undefined });
   };
 
-  getTabsWrapperRef = (node) => {
+  getTabsWrapperRef: React.RefCallback<HTMLDivElement> = (node) => {
     this.tabsWrapperRef = node;
   };
 
-  getTabsRef = (node) => {
+  getTabsRef: React.RefCallback<HTMLDivElement> = (node) => {
     this.tabsRef = node;
   };
 
-  expandMenu = (e) => {
+  expandMenu: React.MouseEventHandler = (e) => {
     const rect = e.currentTarget.children[0].getBoundingClientRect();
     this.setState({
       contextMenu: {
@@ -231,9 +235,8 @@ export default class TabsHeader<P> extends Component<Props<P>, State> {
       </TabsWrapper>
     );
   }
-}
 
-TabsHeader.propTypes = {
+  static propTypes = {
     tabs: PropTypes.array.isRequired,
     items: PropTypes.array.isRequired,
     main: PropTypes.bool,
@@ -242,3 +245,4 @@ TabsHeader.propTypes = {
     collapsible: PropTypes.bool,
     selected: PropTypes.string,
   };
+}

packages/devui/src/Tabs/data.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 /* eslint-disable react/prop-types */
-const Component = ({ selected }) => (
+const Component = ({ selected }: { selected: string }) => (
   <div
     style={{
       display: 'flex',
@@ -17,7 +17,9 @@ const Component = ({ selected }) => (
 );
 /* eslint-enable react/prop-types */
 
-const selector = (tab) => ({ selected: tab.name });
+const selector = (tab: { name: string; value?: string }) => ({
+  selected: tab.name,
+});
 
 export const tabs = [
   {
@@ -37,6 +39,6 @@ export const tabs = [
   },
 ];
 
-export const simple10Tabs = [];
+export const simple10Tabs: { name: string; value: string }[] = [];
 for (let i = 1; i <= 10; i++)
   simple10Tabs.push({ name: `Tab${i}`, value: `${i}` });

packages/devui/src/Tabs/styles/common.ts

@@ -1,6 +1,11 @@
 import styled from 'styled-components';
+import { Position } from '../Tabs';
 
-export const TabsContainer = styled.div`
+interface StyleProps {
+  position: Position;
+}
+
+export const TabsContainer = styled.div<StyleProps>`
   position: relative;
   display: flex;
   flex-direction: column;

packages/devui/src/Tabs/styles/default.ts

@@ -1,6 +1,14 @@
-import { css } from 'styled-components';
+import { css, ThemedStyledProps } from 'styled-components';
+import { Theme } from '../../themes/default';
 
-export const style = ({ theme, main }) => css`
+export interface StyleProps {
+  main: boolean | undefined;
+}
+
+export const style = ({
+  theme,
+  main,
+}: ThemedStyledProps<StyleProps, Theme>) => css`
   display: flex;
   flex: 0 0 1;
   padding-left: 1px;

packages/devui/src/Tabs/styles/material.ts

@@ -1,7 +1,12 @@
-import { css } from 'styled-components';
+import { css, ThemedStyledProps } from 'styled-components';
 import { ripple } from '../../utils/animations';
+import { Theme } from '../../themes/default';
+import { StyleProps } from './default';
 
-export const style = ({ theme, main }) => css`
+export const style = ({
+  theme,
+  main,
+}: ThemedStyledProps<StyleProps, Theme>) => css`
   display: flex;
   flex: 0 0 1;
   padding-left: 1px;

packages/devui/src/Toolbar/Toolbar.stories.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from 'styled-components';
+import { Story } from '@storybook/react';
 import { MdPlayArrow } from 'react-icons/md';
 import { MdFiberManualRecord } from 'react-icons/md';
 import { MdKeyboardArrowLeft } from 'react-icons/md';
@@ -16,6 +17,9 @@ import {
 } from '../';
 import { options } from '../Select/options';
 import { simple10Tabs } from '../Tabs/data';
+import { BorderPosition } from './styles/Toolbar';
+import { TooltipPosition } from '../Button/Button';
+import { Position } from '../Tabs/Tabs';
 
 const Container = styled.div`
   display: flex;
@@ -35,12 +39,27 @@ export default {
   component: Toolbar,
 };
 
-const Template = ({
+interface TemplateArgs {
+  borderPosition: BorderPosition;
+  title?: string;
+  tooltipPosition: TooltipPosition;
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  label: ReactNode;
+}
+
+const Template: Story<TemplateArgs> = ({
+  // eslint-disable-next-line react/prop-types
   borderPosition,
+  // eslint-disable-next-line react/prop-types
   title,
+  // eslint-disable-next-line react/prop-types
   tooltipPosition,
+  // eslint-disable-next-line react/prop-types
   disabled,
+  // eslint-disable-next-line react/prop-types
   onClick,
+  // eslint-disable-next-line react/prop-types
   label,
 }) => (
   <Container>
@@ -104,17 +123,41 @@ Default.argTypes = {
   },
 };
 
-const TabsTemplate = ({
+interface TabsTemplateArgs {
+  title?: string;
+  tooltipPosition: TooltipPosition;
+  disabled?: boolean;
+  buttonOnClick?: React.MouseEventHandler<HTMLButtonElement>;
+  label: ReactNode;
+  selected?: string;
+  main?: boolean;
+  tabsOnClick: (value: string) => void;
+  collapsible?: boolean;
+  position: Position;
+}
+
+const TabsTemplate: Story<TabsTemplateArgs> = ({
+  // eslint-disable-next-line react/prop-types
   title,
+  // eslint-disable-next-line react/prop-types
   tooltipPosition,
+  // eslint-disable-next-line react/prop-types
   disabled,
+  // eslint-disable-next-line react/prop-types
   buttonOnClick,
+  // eslint-disable-next-line react/prop-types
   label,
+  // eslint-disable-next-line react/prop-types
   selected,
+  // eslint-disable-next-line react/prop-types
   main,
-  tabOnClick,
+  // eslint-disable-next-line react/prop-types
+  tabsOnClick,
+  // eslint-disable-next-line react/prop-types
   collapsible,
+  // eslint-disable-next-line react/prop-types
   position,
+  // eslint-disable-next-line react/prop-types
 }) => (
   <Container>
     <Toolbar>
@@ -130,7 +173,7 @@ const TabsTemplate = ({
         tabs={simple10Tabs}
         selected={selected}
         main={main}
-        onClick={tabOnClick}
+        onClick={tabsOnClick}
         collapsible={collapsible}
         position={position}
       />
@@ -176,7 +219,7 @@ Tabs.argTypes = {
   buttonOnClick: {
     action: 'button clicked',
   },
-  tabOnClick: {
+  tabsOnClick: {
     action: 'tab selected',
   },
   position: {
@@ -187,19 +230,48 @@ Tabs.argTypes = {
   },
 };
 
-const WithSliderTemplate = ({
+interface WithSliderTemplateArgs {
+  title?: string;
+  tooltipPosition: TooltipPosition;
+  playOnClick?: React.MouseEventHandler<HTMLButtonElement>;
+  value: number;
+  min: number;
+  max: number;
+  label?: string;
+  withValue?: boolean;
+  onChange: (value: number) => void;
+  previousStateOnClick?: React.MouseEventHandler<HTMLButtonElement>;
+  nextStateOnClick?: React.MouseEventHandler<HTMLButtonElement>;
+  selected?: string;
+  segmentedControlOnClick: (value: string) => void;
+}
+
+const WithSliderTemplate: Story<WithSliderTemplateArgs> = ({
+  // eslint-disable-next-line react/prop-types
   title,
+  // eslint-disable-next-line react/prop-types
   tooltipPosition,
+  // eslint-disable-next-line react/prop-types
   playOnClick,
+  // eslint-disable-next-line react/prop-types
   value,
+  // eslint-disable-next-line react/prop-types
   min,
+  // eslint-disable-next-line react/prop-types
   max,
+  // eslint-disable-next-line react/prop-types
   label,
+  // eslint-disable-next-line react/prop-types
   withValue,
+  // eslint-disable-next-line react/prop-types
   onChange,
+  // eslint-disable-next-line react/prop-types
   previousStateOnClick,
+  // eslint-disable-next-line react/prop-types
   nextStateOnClick,
+  // eslint-disable-next-line react/prop-types
   selected,
+  // eslint-disable-next-line react/prop-types
   segmentedControlOnClick,
 }) => (
   <Container>

packages/devui/src/Toolbar/styles/Toolbar.ts

@@ -1,6 +1,16 @@
-import styled from 'styled-components';
+import styled, { ThemedStyledInterface } from 'styled-components';
+import { Theme } from '../../themes/default';
 
-const Toolbar = styled.div`
+export type BorderPosition = 'top' | 'bottom';
+
+export interface Props {
+  fullHeight?: boolean;
+  compact?: boolean;
+  borderPosition?: BorderPosition;
+  noBorder?: boolean;
+}
+
+const Toolbar = (styled as ThemedStyledInterface<Theme>).div<Props>`
   display: flex;
   flex-shrink: 0;
   box-sizing: border-box;

packages/devui/src/colorSchemes/default.ts

@@ -3,6 +3,7 @@
 
 export default {
   scheme: 'default',
+  author: 'Mihail Diordiev (https://github.com/zalmoxisus)',
   base00: '#ffffff',
   base01: '#f3f3f3',
   base02: '#e8e8e8',

packages/devui/src/simple-element-resize-detector.ts

@@ -0,0 +1,6 @@
+declare module 'simple-element-resize-detector' {
+  export default function (
+    element: HTMLElement,
+    handler: () => void
+  ): HTMLIFrameElement;
+}

packages/devui/src/utils/animations.ts

@@ -1,9 +1,10 @@
 import { css, keyframes } from 'styled-components';
+import { Theme } from '../themes/default';
 
 export const spin = keyframes`
   to { transform: rotate(1turn); }
 `;
-export const spinner = (theme) => css`
+export const spinner = (theme: Theme) => css`
   animation: ${spin} 400ms infinite linear;
   width: ${theme.spinnerSize}px;
   height: ${theme.spinnerSize}px;
@@ -21,7 +22,7 @@ export const fadeIn = keyframes`
 `;
 
 // Based on https://github.com/mladenplavsic/css-ripple-effect
-export const ripple = (theme) => `
+export const ripple = (theme: Theme) => `
   & {
     position: relative;
     overflow: hidden;

packages/devui/src/utils/autoPrefix.ts

@@ -1,2 +1,5 @@
-export const prefixSelectors = (tag, selectors, style) =>
+export const prefixSelectors = (
-  selectors.map((selector) => `${tag}::-${selector} ${style}`);
+  tag: string,
+  selectors: string[],
+  style: string
+) => selectors.map((selector) => `${tag}::-${selector} ${style}`);

packages/devui/src/utils/createThemedComponent.tsx

@@ -1,13 +1,41 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
-import getDefaultTheme from '../themes/default';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import getDefaultTheme, { Theme } from '../themes/default';
 import { withTheme } from 'styled-components';
+import { Base16Theme } from 'base16';
 
-export default (UnthemedComponent) => (props) =>
+export default <C extends React.ComponentType<any>>(
-  props.theme && props.theme.type ? (
+  UnthemedComponent: React.ComponentProps<C> extends { theme?: Theme }
-    withTheme(<UnthemedComponent {...props} />)
+    ? C
-  ) : (
+    : never
-    // used outside of container (theme provider)
+) => {
-    <UnthemedComponent {...props} theme={getDefaultTheme({})} />
+  const ThemedComponent = React.forwardRef<C, React.ComponentProps<C>>(
+    (props, ref) => {
+      // eslint-disable-next-line react/prop-types
+      if (props.theme && props.theme.type) {
+        const ThemedComponent = withTheme(
+          UnthemedComponent as ComponentType<{ theme?: Theme }>
+        );
+        return <ThemedComponent {...props} ref={ref} />;
+      }
+      const UnthemedComponentAny = UnthemedComponent as any;
+      return (
+        <UnthemedComponentAny
+          {...props}
+          ref={ref}
+          theme={getDefaultTheme({} as Base16Theme)}
+        />
+      );
+    }
   );
 
+  hoistNonReactStatics(ThemedComponent, UnthemedComponent);
+
+  ThemedComponent.displayName = `ThemedComponent(${
+    UnthemedComponent.displayName ?? 'Component'
+  })`;
+
+  return ThemedComponent;
+};
+
 // TODO: memoize it?

packages/devui/src/utils/invertColors.ts

@@ -1,4 +1,6 @@
-function invertColors(theme) {
+import { Base16Theme } from 'base16';
+
+function invertColors(theme: Base16Theme) {
   return {
     ...theme,
     base00: theme.base07,