reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-22 22:19:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

stash

Browse Source
This commit is contained in:
Nathan Bierema 2020-09-06 09:17:34 -04:00
parent 48dac45b5d
commit b4bd49a1ef
23 changed files with 263 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/devui/.storybook/preview.tsx
View File

@ -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].*' },

2
packages/devui/.storybook/tsconfig.json
View File

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

1
packages/devui/package.json
View File

@ -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",

2
packages/devui/src/Button/Button.stories.tsx
View File

@ -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 />,

2
packages/devui/src/Editor/Editor.stories.tsx
View File

@ -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 } },

14
packages/devui/src/Editor/WithTabs.tsx
View File

@ -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}
/>
);
}

32
packages/devui/src/Form/widgets.tsx
View File

@ -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 }) => (
<Select options={options.enumOptions} multiple={multi} {...rest} />
const SelectWidget: Widget = ({ options, ...rest }) => (
<Select options={options.enumOptions} {...rest} />
);
const RangeWidget: Widget = ({
const RangeWidget: Widget = (({
schema,
readonly,
autofocus,
disabled,
label, // eslint-disable-line
options, // eslint-disable-line
formContext, // eslint-disable-line
registry, // eslint-disable-line
...rest
}) => (
<Slider
{...rest}
autoFocus={autofocus}
readOnly={readonly}
min={schema.minimum}
max={schema.maximum}
step={schema.multipleOf}
withValue
/>
);
}: WidgetProps & { registry: FieldProps['registry'] }) =>
(
<Slider
{...rest}
disabled={disabled}
min={schema.minimum}
max={schema.maximum}
withValue
/>
) as unknown) as Widget;
export default { SelectWidget, RangeWidget };

2
packages/devui/src/Select/Select.tsx
View File

@ -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

8
packages/devui/src/Tabs/Tabs.stories.tsx
View File

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

24
packages/devui/src/Tabs/Tabs.tsx
View File

@ -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,15 +96,15 @@ export default class Tabs<P> extends Component<TabsProps<P>> {
</TabsContainer>
);
}
static propTypes = {
tabs: PropTypes.array.isRequired,
selected: PropTypes.string,
main: PropTypes.bool,
onClick: PropTypes.func.isRequired,
collapsible: PropTypes.bool,
position: PropTypes.oneOf(['left', 'right', 'center']),
};
static defaultProps = { position: 'left' };
}
Tabs.propTypes = {
tabs: PropTypes.array.isRequired,
selected: PropTypes.string,
main: PropTypes.bool,
onClick: PropTypes.func.isRequired,
collapsible: PropTypes.bool,
position: PropTypes.oneOf(['left', 'right', 'center']),
};
Tabs.defaultProps = { position: 'left' };

82
packages/devui/src/Tabs/TabsHeader.tsx
View File

@ -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>) {
super(props);
this.state = {
visibleTabs: props.tabs.slice(),
hiddenTabs: [],
subMenuOpened: false,
contextMenu: undefined,
};
this.iconWidth = 0;
this.hiddenTabsWidth = [];
}
state: State = {
visibleTabs: this.props.tabs.slice(),
hiddenTabs: [],
subMenuOpened: false,
contextMenu: undefined,
};
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;
if (this.tabsRef.children[tabButtons.length - 1].value === 'expandIcon') {
const tabButtons = this.tabsRef!.children;
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] <
tabsWrapperRef.getBoundingClientRect().width
tabsRef!.getBoundingClientRect().width + this.hiddenTabsWidth[0] <
tabsWrapperRef!.getBoundingClientRect().width
) {
while (
i < tabs.length - 1 &&
tabsRef.getBoundingClientRect().width + this.hiddenTabsWidth[0] <
tabsWrapperRef.getBoundingClientRect().width
tabsRef!.getBoundingClientRect().width + this.hiddenTabsWidth[0] <
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,14 +235,14 @@ export default class TabsHeader<P> extends Component<Props<P>, State> {
</TabsWrapper>
);
}
}
TabsHeader.propTypes = {
tabs: PropTypes.array.isRequired,
items: PropTypes.array.isRequired,
main: PropTypes.bool,
onClick: PropTypes.func,
position: PropTypes.string,
collapsible: PropTypes.bool,
selected: PropTypes.string,
};
static propTypes = {
tabs: PropTypes.array.isRequired,
items: PropTypes.array.isRequired,
main: PropTypes.bool,
onClick: PropTypes.func,
position: PropTypes.string,
collapsible: PropTypes.bool,
selected: PropTypes.string,
};
}

8
packages/devui/src/Tabs/data.tsx
View File

@ -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}` });

7
packages/devui/src/Tabs/styles/common.ts
View File

@ -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;

12
packages/devui/src/Tabs/styles/default.ts
View File

@ -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;

9
packages/devui/src/Tabs/styles/material.ts
View File

@ -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;

86
packages/devui/src/Toolbar/Toolbar.stories.tsx
View File

@ -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>

14
packages/devui/src/Toolbar/styles/Toolbar.ts
View File

@ -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;

1
packages/devui/src/colorSchemes/default.ts
View File

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

6
packages/devui/src/simple-element-resize-detector.ts Normal file
View File

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

5
packages/devui/src/utils/animations.ts
View File

@ -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;

7
packages/devui/src/utils/autoPrefix.ts
View File

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

44
packages/devui/src/utils/createThemedComponent.tsx
View File

@ -1,13 +1,41 @@
import React from 'react';
import getDefaultTheme from '../themes/default';
import React, { ComponentType } from 'react';
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) =>
props.theme && props.theme.type ? (
withTheme(<UnthemedComponent {...props} />)
) : (
// used outside of container (theme provider)
<UnthemedComponent {...props} theme={getDefaultTheme({})} />
export default <C extends React.ComponentType<any>>(
UnthemedComponent: React.ComponentProps<C> extends { theme?: Theme }
? C
: never
) => {
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?

4
packages/devui/src/utils/invertColors.ts
View File

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