From 02f8a8149fe14d7887a9a3d0b630984f556292c4 Mon Sep 17 00:00:00 2001 From: Konstantin Ryzhov Date: Wed, 8 Jul 2020 03:48:11 +0300 Subject: [PATCH 01/10] WIP: @material-ui updated to v4 in package.json; Initial types and changes for v4 added --- js/flow-typed/material-ui-core-4.x.x.js | 1184 +++++++++++++++++++++++ js/package.json | 8 +- js/rex-ui/Layout.js | 2 +- js/yarn.lock | 485 ++++------ 4 files changed, 1366 insertions(+), 313 deletions(-) create mode 100644 js/flow-typed/material-ui-core-4.x.x.js diff --git a/js/flow-typed/material-ui-core-4.x.x.js b/js/flow-typed/material-ui-core-4.x.x.js new file mode 100644 index 000000000..c59269777 --- /dev/null +++ b/js/flow-typed/material-ui-core-4.x.x.js @@ -0,0 +1,1184 @@ +declare type CSS = { + escape(value: string): string, + supports(property: string, value?: string): boolean, +}; + +declare type Color = { + "50": string, + "100": string, + "200": string, + "300": string, + "400": string, + "500": string, + "600": string, + "700": string, + "800": string, + "900": string, + A100: string, + A200: string, + A400: string, + A700: string, +}; + +declare module "@material-ui/types" { + import type { AbstractComponent } from "react"; + + declare export type PropInjector = < + C = AbstractComponent, + >( + component: C, + ) => AbstractComponent; +} + +declare module "@material-ui/styles" { + import typeof _makeStyles from "@material-ui/styles/makeStyles"; + import typeof _createStyles from "@material-ui/styles/createStyles"; + import typeof _getThemeProps from "@material-ui/styles/getThemeProps"; + import typeof _jssPreset from "@material-ui/styles/jssPreset"; + import typeof _mergeClasses from "@material-ui/styles/mergeClasses"; + import typeof _ServerStyleSheets from "@material-ui/styles/ServerStyleSheets"; + import typeof _styled from "@material-ui/styles/styled"; + import typeof _StylesProvider from "@material-ui/styles/StylesProvider"; + import typeof _ThemeProvider from "@material-ui/styles/ThemeProvider"; + import typeof _useTheme from "@material-ui/styles/useTheme"; + import typeof _withStyles from "@material-ui/styles/withStyles"; + import typeof _withTheme from "@material-ui/styles/withTheme"; + import typeof _DefaultTheme from "@material-ui/styles/DefaultTheme"; + + import type { ThemeOptions } from "@material-ui/core/styles"; + declare export type Theme = ThemeOptions; + + declare export type color = string; + + declare export var createStyles: _createStyles; + declare export var getThemeProps: _getThemeProps; + declare export var jssPreset: _jssPreset; + declare export var makeStyles: _makeStyles; + declare export var mergeClasses: _mergeClasses; + declare export var ServerStyleSheets: _ServerStyleSheets; + declare export var styled: _styled; + declare export var StylesProvider: _StylesProvider; + declare export var ThemeProvider: _ThemeProvider; + declare export var useTheme: _useTheme; + declare export var withStyles: _withStyles; + declare export var withTheme: _withTheme; + declare export var DefaultTheme: _DefaultTheme; +} + +declare module "@material-ui/styles/createGenerateClassName" { + declare type GenerateId = any; + + declare export type GenerateClassNameOptions = { + disableGlobal?: boolean, + productionPrefix?: string, + seed?: string, + }; + + declare export default function createGenerateClassName( + options?: GenerateClassNameOptions, + ): GenerateId; +} + +declare module "@material-ui/styles/createStyles" { + import type { StyleRules } from "@material-ui/styles/withStyles"; + + declare export default function createStyles( + styles: StyleRules, + ): StyleRules; +} + +declare module "@material-ui/styles/getThemeProps" { + declare export default function getThemeProps(): any; +} + +declare module "@material-ui/styles/jssPreset" { + import type { JssOptions } from "jss"; + + declare export default function jssPreset(): JssOptions; +} + +declare module "@material-ui/styles/makeStyles" { + import type { Theme } from "@material-ui/core/styles"; + + declare function makeStyles( + styles: (Theme) => Styles, + Object, + ): any => $ObjMap(V) => string>; + + declare export default typeof makeStyles; +} + +declare module "@material-ui/styles/mergeClasses" { + import type { ElementType } from "react"; + + declare export type Classes = { + [k: string]: string, + }; + + declare export type MergeClassesOption = { + baseClasses: Classes, + newClasses: Classes, + Component: ElementType, + }; + + declare export default function mergeClasses( + options?: MergeClassesOption, + ): Classes; +} + +declare module "@material-ui/styles/ServerStyleSheets" { + import type { ElementType, Node } from "react"; + + declare class ServerStyleSheets { + constructor(options?: {}): ServerStyleSheets; + collect(children: Node, options?: {}): ElementType; + toString(): string; + getStyleElement(props?: {}): ElementType; + } + + declare export default ServerStyleSheets; +} + +declare module "@material-ui/styles/styled" { + // We don't want a union type here (like React.ComponentType) in order to support mapped types. + import type { ElementType, Node } from "react"; + + declare export type StyledComponent

= ( + props: P, + ) => React.ElementType | null; +} + +declare module "@material-ui/styles/StylesProvider" { +} + +declare module "@material-ui/styles/ThemeProvider" { + import type { Node } from "react"; + import type { Theme } from "@material-ui/core/styles"; + + declare export var ThemeProvider: AbstractComponent<{| + children: Node, + theme: Theme, + |}>; + + declare export default ThemeProvider; +} + +declare module "@material-ui/styles/useTheme" { + import type { Theme } from "@material-ui/core/styles"; + + declare export function useTheme(): Theme; +} + +declare module "@material-ui/styles/withStyles" { + import type { StandardProperties as CSSProperties } from "csstype"; + + declare export type ClassNameMap = { [key: string]: string }; + + declare export type StyleRules = { + [key: string]: CSS & CSSProperties, + }; + + declare export default function withStyles(): any; +} + +declare module "@material-ui/styles/withTheme" { +} + +declare module "@material-ui/styles/DefaultTheme" { +} + +declare module "@material-ui/core" { + import type { + AbstractComponent, + Node, + ElementType, + ElementRef, + Ref, + } from "react"; + import type { StandardProperties as CSSProperties } from "csstype"; + + declare export type ClassNameMap = { [key: string]: string }; + + /** + * All standard components exposed by `material-ui` are `StyledComponents` with + * certain `classes`, on which one can also set a top-level `className` and inline + * `style`. + */ + declare export type StyledComponentProps = { + /** + * Override or extend the styles applied to the component. + */ + classes?: $Shape, + innerRef?: Ref, + }; + + declare export type StandardProps = StyledComponentProps & { + className?: string, + ref?: Ref | { current: ElementRef | null }, + style?: CSSProperties, + }; + + declare export type PaletteType = "light" | "dark"; + + declare export type PropTypes = { + Alignment: "inherit" | "left" | "center" | "right" | "justify", + Color: "inherit" | "primary" | "secondary" | "default", + Margin: "none" | "dense" | "normal", + }; + + declare export type TypographyColor = + | "initial" + | "inherit" + | "primary" + | "secondary" + | "textPrimary" + | "textSecondary" + | "error"; + + declare export type TypographyProps = {| + ...DOMProps, + children: ?Node, + className?: string, + id?: string, + classes?: Object, + align?: "inherit" | "left" | "center" | "right" | "justify", + color?: TypographyColor, + component?: ElementType, + display?: "initial" | "block" | "inline", + gutterBottom?: boolean, + noWrap?: boolean, + paragraph?: boolean, + inline?: boolean, + variant?: + | "h1" + | "h2" + | "h3" + | "h4" + | "h5" + | "h6" + | "subtitle1" + | "subtitle2" + | "body1" + | "body2" + | "caption" + | "button" + | "overline" + | "srOnly" + | "inherit", + title?: string, + style?: Object, + href?: string, + |}; + + declare export var Typography: AbstractComponent; + + declare export type DOMProps = {| + onClick?: UIEvent => any, + onMouseDown?: MouseEvent => any, + onMouseUp?: MouseEvent => any, + onMouseMove?: MouseEvent => any, + onFocus?: UIEvent => any, + onBlur?: UIEvent => any, + title?: string, + style?: Object, + className?: string, + "aria-label"?: string, + tabIndex?: number, + href?: string, + target?: string, + rel?: string, + |}; + + declare export type ButtonBaseProps = {| + ...DOMProps, + "aria-label"?: string, + "aria-controls"?: string, + "aria-haspopup"?: string, + download?: string, + href?: string, + action?: Function, + buttonRef?: Function, + centerRipple?: boolean, + children?: Node, + classes?: Object, + component?: ElementType, + disabled?: boolean, + disableRipple?: boolean, + disableTouchRipple?: boolean, + focusRipple?: boolean, + focusVisibleClassName?: string, + onFocusVisible?: Function, + TouchRippleProps?: Object, + type?: "submit" | "reset" | "button", + |}; + + declare export var ButtonBase: AbstractComponent; + + declare export type ButtonVariants = + | "text" + | "flat" + | "outlined" + | "contained" + | "raised" + | "fab" + | "extendedFab"; + + declare export type ButtonProps = {| + ...ButtonBaseProps, + color?: "default" | "inherit" | "primary" | "secondary", + fullWidth?: boolean, + size?: "small" | "medium" | "large", + variant?: ButtonVariants, + target?: string, + |}; + + declare export var Button: AbstractComponent; + + declare export type IconButtonProps = {| + ...ButtonBaseProps, + color?: "default" | "inherit" | "primary" | "secondary", + edge?: "start" | "end" | false, + size?: "small" | "medium", + |}; + + declare export var IconButton: AbstractComponent; + + declare export type InputProps = {| + value?: string, + onChange?: UIEvent => void, + autoComplete?: string, + autoFocus?: boolean, + classes?: Object, + className?: string, + defaultValue?: string, + disabled?: boolean, + disableUnderline?: boolean, + endAdornment?: Node, + error?: boolean, + fullWidth?: boolean, + id?: string, + inputComponent?: ElementType, + inputProps?: Object, + inputRef?: any, + margin?: "dense" | "none", + multiline?: boolean, + name?: string, + placeholder?: string, + readOnly?: boolean, + required?: boolean, + rows?: string | number, + rowsMax?: string | number, + startAdornment?: Node, + type?: string, + onBlur?: UIEvent => any, + onKeyDown?: KeyboardEvent => any, + onKeyUp?: KeyboardEvent => any, + |}; + declare export var Input: AbstractComponent; + + declare export type PopperProps = {| + ...DOMProps, + anchorEl: any, + children: Node | (any => Node), + open: boolean, + container?: any, + disablePortal?: boolean, + keepMounted?: boolean, + modifiers?: Object, + placement?: + | "bottom-end" + | "bottom-start" + | "bottom" + | "left-end" + | "left-start" + | "left" + | "right-end" + | "right-start" + | "right" + | "top-end" + | "top-start" + | "top", + popperOptions?: Object, + transition?: boolean, + |}; + declare export var Popper: AbstractComponent; + + declare export type PopoverProps = {| + anchorEl: any, + open: boolean, + children: Node, + action?: Function, + anchorOrigin?: { + horizontal: number | "left" | "center" | "right", + vertical: number | "top" | "center" | "bottom", + }, + anchorPosition?: { left: number, top: number }, + anchorReference?: "anchorEl" | "anchorPosition" | "none", + classes?: Object, + container?: any, + elevation?: number, + getContentAnchorEl?: Function, + marginThreshold?: number, + ModalClasses?: Object, + onClose?: Function, + onEnter?: Function, + onEntered?: Function, + onEntering?: Function, + onExit?: Function, + onExited?: Function, + onExiting?: Function, + PaperProps?: Object, + transformOrigin?: { + horizontal: number | "left" | "center" | "right", + vertical: number | "top" | "center" | "bottom", + }, + TransitionComponent?: ElementType, + transitionDuration?: number | { enter?: number, exit?: number } | "auto", + TransitionProps?: Object, + |}; + declare export var Popover: AbstractComponent; + + declare export type GridProps = {| + ...DOMProps, + alignContent?: + | "stretch" + | "center" + | "flex-start" + | "flex-end" + | "space-between" + | "space-around" + | "stretch", + alignItems?: + | "flex-start" + | "center" + | "flex-end" + | "stretch" + | "baseline" + | "stretch", + children?: React.Node, + classes?: Object, + component?: string, + container?: boolean, + direction?: "row" | "row-reverse" | "column" | "column-reverse" | "row", + item?: boolean, + justify?: + | "center" + | "flex-end" + | "space-between" + | "space-around" + | "space-evenly" + | "flex-start", + lg?: + | false + | "auto" + | true + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12, + md?: + | false + | "auto" + | true + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12, + sm?: + | false + | "auto" + | true + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12, + spacing?: 0 | 8 | 16 | 24 | 32 | 40, + wrap?: "nowrap" | "wrap" | "wrap-reverse", + xl?: + | "auto" + | true + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12 + | false, + xs?: + | "auto" + | true + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12 + | false, + zeroMinWidth?: boolean, + style?: Object, + className?: ?string, + |}; + declare export var Grid: AbstractComponent; + + import typeof _createMuiTheme from "@material-ui/core/styles/createMuiTheme"; + declare export var createMuiTheme: _createMuiTheme; + + declare export var colors: { + common: Color, + red: Color, + pink: Color, + purple: Color, + deepPurple: Color, + indigo: Color, + blue: Color, + lightBlue: Color, + cyan: Color, + teal: Color, + green: Color, + lightGreen: Color, + lime: Color, + yellow: Color, + amber: Color, + orange: Color, + deepOrange: Color, + brown: Color, + grey: Color, + blueGrey: Color, + }; + + import typeof _MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; + declare export var MuiThemeProvider: _MuiThemeProvider; + + declare export var AppBar: any; + declare export var Avatar: any; + declare export var Backdrop: any; + declare export var Badge: any; + declare export var BottomNavigation: any; + declare export var BottomNavigationAction: any; + declare export var Breadcrumbs: any; + declare export var Card: any; + declare export var CardActionArea: any; + declare export var CardActions: any; + declare export var CardContent: any; + declare export var CardHeader: any; + declare export var CardMedia: any; + declare export var Checkbox: any; + declare export var Chip: any; + declare export var CircularProgress: any; + declare export var ClickAwayListener: any; + declare export var Collapse: any; + declare export var Container: any; + declare export var CssBaseline: any; + declare export var Dialog: any; + declare export var DialogActions: any; + declare export var DialogContent: any; + declare export var DialogContentText: any; + declare export var DialogTitle: any; + declare export var Divider: any; + declare export var Drawer: any; + declare export var ExpansionPanel: any; + declare export var ExpansionPanelActions: any; + declare export var ExpansionPanelDetails: any; + declare export var ExpansionPanelSummary: any; + declare export var Fab: any; + declare export var Fade: any; + declare export var FilledInput: any; + declare export var FormControl: any; + declare export var FormControlLabel: any; + declare export var FormGroup: any; + declare export var FormHelperText: any; + declare export var FormLabel: any; + declare export var Grid: any; + declare export var GridList: any; + declare export var GridListTile: any; + declare export var GridListTileBar: any; + declare export var Grow: any; + declare export var Hidden: any; + declare export var Icon: any; + declare export var InputAdornment: any; + declare export var InputBase: any; + declare export var InputLabel: any; + declare export var LinearProgress: any; + declare export var Link: any; + declare export var List: any; + declare export var ListItem: any; + declare export var ListItemAvatar: any; + declare export var ListItemIcon: any; + declare export var ListItemSecondaryAction: any; + declare export var ListItemText: any; + declare export var ListSubheader: any; + declare export var Menu: any; + declare export var MenuItem: any; + declare export var MenuList: any; + declare export var MobileStepper: any; + declare export var Modal: any; + declare export var ModalManager: any; + declare export var NativeSelect: any; + declare export var NoSsr: any; + declare export var OutlinedInput: any; + declare export var Paper: any; + declare export var Portal: any; + declare export var Radio: any; + declare export var RadioGroup: any; + declare export var RootRef: any; + declare export var Select: any; + declare export var Slide: any; + declare export var Snackbar: any; + declare export var SnackbarContent: any; + declare export var Step: any; + declare export var StepButton: any; + declare export var StepConnector: any; + declare export var StepContent: any; + declare export var StepIcon: any; + declare export var StepLabel: any; + declare export var Stepper: any; + declare export var SvgIcon: any; + declare export var SwipeableDrawer: any; + declare export var Switch: any; + declare export var Tab: any; + declare export var Table: any; + declare export var TableBody: any; + declare export var TableCell: any; + declare export var TableFooter: any; + declare export var TableHead: any; + declare export var TablePagination: any; + declare export var TableRow: any; + declare export var TableSortLabel: any; + declare export var Tabs: any; + declare export var TextField: any; + declare export var Toolbar: any; + declare export var Tooltip: any; + declare export var withMobileDialog: any; + declare export var withWidth: any; + declare export var Zoom: any; +} + +declare type CommonColors = { + black: string, + white: string, +}; + +declare module "@material-ui/core/useMediaQuery" { + declare export default function useMediaQuery( + query: string | ((theme: Theme) => string), + options?: Options, + ): boolean; +} + +declare module "@material-ui/core/colors" { + declare export type CommonColors = { + black: string, + white: string, + }; + + declare export var common: CommonColors; + declare export var red: Color; + declare export var pink: Color; + declare export var purple: Color; + declare export var deepPurple: Color; + declare export var indigo: Color; + declare export var blue: Color; + declare export var lightBlue: Color; + declare export var cyan: Color; + declare export var teal: Color; + declare export var green: Color; + declare export var lightGreen: Color; + declare export var lime: Color; + declare export var yellow: Color; + declare export var amber: Color; + declare export var orange: Color; + declare export var deepOrange: Color; + declare export var brown: Color; + declare export var grey: Color; + declare export var blueGrey: Color; +} + +declare module "@material-ui/core/styles" { + import typeof _createMuiTheme from "@material-ui/core/styles/createMuiTheme"; + import type { Theme as MuiTheme } from "@material-ui/core/styles/createMuiTheme"; + + import typeof _MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; + + import typeof _withStyles from "@material-ui/core/styles/withStyles"; + import type { WithStyles as MuiWithStyles } from "@material-ui/core/styles/withStyles"; + + import typeof _withTheme from "@material-ui/core/styles/withTheme"; + import type { WithTheme as MuiWithTheme } from "@material-ui/core/styles/withTheme"; + + import typeof _createGenerateClassName from "@material-ui/core/styles/createGenerateClassName"; + import typeof _jssPreset from "@material-ui/core/styles/jssPreset"; + + declare export type Theme = MuiTheme; + declare export type WithStyles = MuiWithStyles; + declare export type WithTheme = MuiWithTheme; + + declare export var MuiThemeProvider: _MuiThemeProvider; + declare export var createMuiTheme: _createMuiTheme; + declare export var withStyles: _withStyles; + declare export var withTheme: _withTheme; + declare export var createGenerateClassName: _createGenerateClassName; + declare export var jssPreset: _jssPreset; +} + +declare module "@material-ui/core/styles/withStyles" { + import typeof _withStyles from "@material-ui/styles/withStyles"; + + declare export var withStyles: _withStyles; + declare export default withStyles; +} + +declare module "@material-ui/core/styles/withTheme" { + import typeof _withTheme from "@material-ui/styles/withTheme"; + + declare export var withTheme: _withTheme; + declare export default withTheme; +} + +declare module "@material-ui/core/styles/createMuiTheme" { + import type { + Palette, + PaletteOptions, + } from "@material-ui/core/styles/createPalette"; + import type { + Typography, + TypographyOptions, + } from "@material-ui/core/styles/createTypography"; + import type { + Mixins, + MixinsOptions, + } from "@material-ui/core/styles/createMixins"; + import type { + Breakpoints, + BreakpointsOptions, + } from "@material-ui/core/styles/createBreakpoints"; + import type { Shadows } from "@material-ui/core/styles/shadows"; + import type { Shape, ShapeOptions } from "@material-ui/core/styles/shape"; + import type { + Transitions, + TransitionsOptions, + } from "@material-ui/core/styles/transitions"; + import type { + Spacing, + SpacingOptions, + } from "@material-ui/core/styles/spacing"; + import type { ZIndex, ZIndexOptions } from "@material-ui/core/styles/zIndex"; + + declare type ComponentsProps = any; + declare type Overrides = {}; + + declare export type Direction = "ltr" | "rtl"; + + declare export type ThemeOptions = { + shape?: ShapeOptions, + breakpoints?: BreakpointsOptions, + direction?: Direction, + mixins?: MixinsOptions, + overrides?: Overrides, + palette?: PaletteOptions, + props?: ComponentsProps, + shadows?: Shadows, + spacing?: SpacingOptions, + transitions?: TransitionsOptions, + typography?: TypographyOptions | ((palette: Palette) => TypographyOptions), + zIndex?: ZIndexOptions, + unstable_strictMode?: boolean, + }; + + declare export type Theme = { + shape: Shape, + breakpoints: Breakpoints, + direction: Direction, + mixins: Mixins, + overrides?: Overrides, + palette: Palette, + props?: ComponentsProps, + shadows: Shadows, + spacing: Spacing, + transitions: Transitions, + typography: Typography, + zIndex: ZIndex, + unstable_strictMode?: boolean, + }; + + declare export default function createMuiTheme( + options?: ThemeOptions, + ...args: Array<{}> + ): Theme; +} + +declare module "@material-ui/core/styles/createPalette" { + import type { CommonColors } from "@material-ui/core/colors/common"; + + declare export type TypeText = { + primary: string, + secondary: string, + disabled: string, + hint: string, + }; + + declare export type TypeAction = { + active: string, + hover: string, + hoverOpacity: number, + selected: string, + selectedOpacity: number, + disabled: string, + disabledOpacity: number, + disabledBackground: string, + focus: string, + focusOpacity: number, + activatedOpacity: number, + }; + + declare export type TypeBackground = { + default: string, + paper: string, + }; + + declare export type TypeDivider = string; + + declare export type SimplePaletteColorOptions = { + light?: string, + main: string, + dark?: string, + contrastText?: string, + }; + + declare export type PaletteColorOptions = + | SimplePaletteColorOptions + | $Shape; + + declare export type PaletteColor = { + light: string, + main: string, + dark: string, + contrastText: string, + }; + + declare export type TypeObject = { + text: TypeText, + action: TypeAction, + divider: TypeDivider, + background: TypeBackground, + }; + + declare export type PaletteTonalOffset = + | number + | { + light: number, + dark: number, + }; + + declare export var light: TypeObject; + declare export var dark: TypeObject; + + declare export type Palette = { + common: CommonColors, + type: PaletteType, + contrastThreshold: number, + tonalOffset: PaletteTonalOffset, + primary: PaletteColor, + secondary: PaletteColor, + error: PaletteColor, + warning: PaletteColor, + info: PaletteColor, + success: PaletteColor, + grey: Color, + text: TypeText, + divider: TypeDivider, + action: TypeAction, + background: TypeBackground, + getContrastText: (background: string) => string, + augmentColor: { + ( + color: $Shape, + mainShade?: number | string, + lightShade?: number | string, + darkShade?: number | string, + ): PaletteColor, + (color: PaletteColorOptions): PaletteColor, + }, + }; + + declare export type PartialTypeObject = $Shape; + + declare export type PaletteOptions = { + primary?: PaletteColorOptions, + secondary?: PaletteColorOptions, + error?: PaletteColorOptions, + warning?: PaletteColorOptions, + info?: PaletteColorOptions, + success?: PaletteColorOptions, + type?: PaletteType, + tonalOffset?: PaletteTonalOffset, + contrastThreshold?: number, + common?: $Shape, + grey?: ColorPartial, + text?: $Shape, + divider?: string, + action?: $Shape, + background?: $Shape, + getContrastText?: (background: string) => string, + }; + + declare export default function createPalette( + palette: PaletteOptions, + ): Palette; +} + +declare module "@material-ui/core/styles/createTypography" { + import type { StandardProperties as CSSProperties } from "csstype"; + + import type { Palette } from "@material-ui/core/styles/createPalette"; + + declare export type Variant = + | "h1" + | "h2" + | "h3" + | "h4" + | "h5" + | "h6" + | "subtitle1" + | "subtitle2" + | "body1" + | "body2" + | "caption" + | "button" + | "overline"; + + declare type FontStyle = { + fontFamily: $PropertyType, + fontSize: $PropertyType, + fontWeightLight: $PropertyType, + fontWeightRegular: $PropertyType, + fontWeightMedium: $PropertyType, + fontWeightBold: $PropertyType, + }; + + declare type FontStyleOptions = $Shape & { + htmlFontSize?: number, + allVariants?: React.CSSProperties, + }; + + declare type TypographyStyle = { + color?: string, + fontFamily: $PropertyType, + fontSize: $PropertyType, + fontWeight: $PropertyType, + letterSpacing?: $PropertyType, + lineHeight?: $PropertyType, + textTransform?: $PropertyType, + }; + + declare export type TypographyStyleOptions = TypographyStyle; + + declare type TypographyUtils = { + pxToRem: (px: number) => string, + }; + + declare export type Typography = { + [style: Variant]: $Shape, + } & FontStyle & + TypographyUtils; + + declare export type TypographyOptions = $Shape< + { + [style: Variant]: $Shape, + useNextVariants: boolean, + } & FontStyle, + >; + + declare export default function createTypography( + palette: Palette, + typography: TypographyOptions | ((palette: Palette) => TypographyOptions), + ): Typography; +} + +declare module "@material-ui/core/styles/createMixins" { + import type { StandardProperties as CSSProperties } from "csstype"; + import type { Breakpoints } from "@material-ui/core/styles/createBreakpoints"; + + declare export type Mixins = { + gutters: (styles?: CSSProperties) => CSSProperties, + toolbar: CSSProperties, + }; + + declare export type MixinsOptions = $Shape; + + declare export default function createMixins( + breakpoints: Breakpoints, + spacing: any, + mixins: MixinsOptions, + ): Mixins; +} + +declare module "@material-ui/core/styles/createBreakpoints" { + declare type BreakpointKeys = "xs" | "sm" | "md" | "lg" | "xl"; + + declare export type BreakpointDefaults = { [key: BreakpointKeys]: {} }; + declare export type Breakpoint = BreakpointDefaults; + declare export type BreakpointValues = { [key: BreakpointKeys]: number }; + declare export var keys: Breakpoint[]; + + declare export type Breakpoints = { + keys: Breakpoint[], + values: BreakpointValues, + up: (key: Breakpoint | number) => string, + down: (key: Breakpoint | number) => string, + between: (start: Breakpoint | number, end: Breakpoint | number) => string, + only: (key: Breakpoint) => string, + width: (key: Breakpoint) => number, + }; + + declare export type BreakpointsOptions = $Shape<{ + ...Breakpoints, + unit: string, + step: number, + }>; + + declare export default function createBreakpoints( + options: BreakpointsOptions, + ): Breakpoints; +} + +declare module "@material-ui/core/styles/shadows" { + declare export type Shadows = Array<"none" | string>; + declare var shadows: Shadows; + + declare export default typeof shadows; +} + +declare module "@material-ui/core/styles/shape" { + declare export type Shape = { + borderRadius: number, + }; + + declare export type ShapeOptions = Partial; + + declare var shape: Shape; + + declare export default typeof shape; +} + +declare module "@material-ui/core/styles/transitions" { + declare export type Easing = { + easeInOut: string, + easeOut: string, + easeIn: string, + sharp: string, + }; + + declare export var easing: Easing; + + declare export type Duration = { + shortest: number, + shorter: number, + short: number, + standard: number, + complex: number, + enteringScreen: number, + leavingScreen: number, + }; + + declare export var duration: Duration; + + declare export function formatMs(milliseconds: number): string; + + declare export type Transitions = { + easing: Easing, + duration: Duration, + create( + props: string | string[], + options?: $Shape<{ + duration: number | string, + easing: string, + delay: number | string, + }>, + ): string, + getAutoHeightDuration(height: number): number, + }; + + declare export type TransitionsOptions = { + easing?: $Shape, + duration?: $Shape, + create?: ( + props: string | string[], + options?: $Shape<{ + duration: number | string, + easing: string, + delay: number | string, + }>, + ) => string, + getAutoHeightDuration?: (height: number) => number, + }; + + declare var transitions: Transitions; + declare export default typeof transitions; +} + +declare module "@material-ui/core/styles/spacing" { + declare export type SpacingArgument = number | string; + declare export type Spacing = () => number; + + declare export type SpacingOptions = + | number + | ((factor: number) => string | number) + | number[]; + declare export default function createSpacing( + spacing: SpacingOptions, + ): Spacing; +} + +declare module "@material-ui/core/styles/zIndex" { + declare export type ZIndex = { + mobileStepper: number, + speedDial: number, + appBar: number, + drawer: number, + modal: number, + snackbar: number, + tooltip: number, + }; + + declare export type ZIndexOptions = $Shape; + + declare var zIndex: ZIndex; + + declare export default typeof zIndex; +} diff --git a/js/package.json b/js/package.json index c5c65ef3b..42ba8b5af 100644 --- a/js/package.json +++ b/js/package.json @@ -32,10 +32,10 @@ "eslint-plugin-react-hooks": "2.4.0" }, "resolutions": { - "**/@material-ui/core": "3.9.3", - "**/@material-ui/styles": "3.0.0-alpha.10", - "**/@material-ui/lab": "3.0.0-alpha.30", - "**/@material-ui/icons": "3.0.2", + "**/@material-ui/core": "4.11.0", + "**/@material-ui/styles": "4.10.0", + "**/@material-ui/lab": "4.0.0-alpha.56", + "**/@material-ui/icons": "4.9.1", "**/react": "16.8.1", "**/react-dom": "16.8.1", "**/react-router": "5.1.2", diff --git a/js/rex-ui/Layout.js b/js/rex-ui/Layout.js index a57dc4e76..6283e8d89 100644 --- a/js/rex-ui/Layout.js +++ b/js/rex-ui/Layout.js @@ -8,7 +8,7 @@ import ResizeObserver from "resize-observer-polyfill"; import * as React from "react"; import * as ReactUtil from "./ReactUtil.js"; import { useTheme } from "./Theme.js"; -import { unstable_useMediaQuery as useMediaQuery } from "@material-ui/core/useMediaQuery"; +import useMediaQuery from "@material-ui/core/useMediaQuery"; export type LayoutMode = "desktop" | "tablet" | "phone"; diff --git a/js/yarn.lock b/js/yarn.lock index 7d140f8d0..47ced5b46 100644 --- a/js/yarn.lock +++ b/js/yarn.lock @@ -1507,27 +1507,20 @@ core-js "^2.6.5" regenerator-runtime "^0.13.2" -"@babel/runtime@7.1.2": - version "7.1.2" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.1.2.tgz#81c89935f4647706fc54541145e6b4ecfef4b8e3" - integrity sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg== +"@babel/runtime@7.8.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2": + version "7.8.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308" + integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ== dependencies: - regenerator-runtime "^0.12.0" + regenerator-runtime "^0.13.2" -"@babel/runtime@7.2.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2": version "7.2.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f" integrity sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg== dependencies: regenerator-runtime "^0.12.0" -"@babel/runtime@7.8.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2": - version "7.8.4" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308" - integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ== - dependencies: - regenerator-runtime "^0.13.2" - "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.3": version "7.4.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12" @@ -1542,6 +1535,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.4.tgz#a6724f1a6b8d2f6ea5236dbfe58c7d7ea9c5eb99" + integrity sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2": version "7.2.2" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907" @@ -1654,10 +1654,10 @@ resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7" integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw== -"@emotion/hash@^0.7.1": - version "0.7.4" - resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831" - integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A== +"@emotion/hash@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" + integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== "@jest/console@^24.7.1": version "24.7.1" @@ -1805,98 +1805,87 @@ "@types/istanbul-reports" "^1.1.1" "@types/yargs" "^12.0.9" -"@material-ui/core@*", "@material-ui/core@3.9.3": - version "3.9.3" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-3.9.3.tgz#d378c1f4beb18df9a534ca7258c2c33fb8e0e51f" - integrity sha512-REIj62+zEvTgI/C//YL4fZxrCVIySygmpZglsu/Nl5jPqy3CDjZv1F9ubBYorHqmRgeVPh64EghMMWqk4egmfg== - dependencies: - "@babel/runtime" "^7.2.0" - "@material-ui/system" "^3.0.0-alpha.0" - "@material-ui/utils" "^3.0.0-alpha.2" - "@types/jss" "^9.5.6" - "@types/react-transition-group" "^2.0.8" - brcast "^3.0.1" - classnames "^2.2.5" - csstype "^2.5.2" - debounce "^1.1.0" - deepmerge "^3.0.0" - dom-helpers "^3.2.1" - hoist-non-react-statics "^3.2.1" - is-plain-object "^2.0.4" - jss "^9.8.7" - jss-camel-case "^6.0.0" - jss-default-unit "^8.0.2" - jss-global "^3.0.0" - jss-nested "^6.0.1" - jss-props-sort "^6.0.0" - jss-vendor-prefixer "^7.0.0" - normalize-scroll-left "^0.1.2" - popper.js "^1.14.1" - prop-types "^15.6.0" - react-event-listener "^0.6.2" - react-transition-group "^2.2.1" - recompose "0.28.0 - 0.30.0" - warning "^4.0.1" +"@material-ui/core@*", "@material-ui/core@4.11.0": + version "4.11.0" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.0.tgz#b69b26e4553c9e53f2bfaf1053e216a0af9be15a" + integrity sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/styles" "^4.10.0" + "@material-ui/system" "^4.9.14" + "@material-ui/types" "^5.1.0" + "@material-ui/utils" "^4.10.2" + "@types/react-transition-group" "^4.2.0" + clsx "^1.0.4" + hoist-non-react-statics "^3.3.2" + popper.js "1.16.1-lts" + prop-types "^15.7.2" + react-is "^16.8.0" + react-transition-group "^4.4.0" -"@material-ui/icons@*", "@material-ui/icons@3.0.2": - version "3.0.2" - resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-3.0.2.tgz#d67a6dd1ec8312d3a88ec97944a63daeef24fe10" - integrity sha512-QY/3gJnObZQ3O/e6WjH+0ah2M3MOgLOzCy8HTUoUx9B6dDrS18vP7Ycw3qrDEKlB6q1KNxy6CZHm5FCauWGy2g== +"@material-ui/icons@*", "@material-ui/icons@4.9.1": + version "4.9.1" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665" + integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg== dependencies: - "@babel/runtime" "^7.2.0" - recompose "0.28.0 - 0.30.0" + "@babel/runtime" "^7.4.4" -"@material-ui/lab@*", "@material-ui/lab@3.0.0-alpha.30": - version "3.0.0-alpha.30" - resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-3.0.0-alpha.30.tgz#c6c64d0ff2b28410a09e4009f3677499461f3df8" - integrity sha512-d8IXbkQO92Ln7f/Tzy8Q5cLi/sMWH/Uz1xrOO5NKUgg42whwyCuoT9ErddDPFNQmPi9d1C7A5AG8ONjEAbAIyQ== +"@material-ui/lab@*", "@material-ui/lab@4.0.0-alpha.56": + version "4.0.0-alpha.56" + resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz#ff63080949b55b40625e056bbda05e130d216d34" + integrity sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw== dependencies: - "@babel/runtime" "^7.2.0" - "@material-ui/utils" "^3.0.0-alpha.2" - classnames "^2.2.5" - keycode "^2.1.9" - prop-types "^15.6.0" + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.10.2" + clsx "^1.0.4" + prop-types "^15.7.2" + react-is "^16.8.0" + +"@material-ui/styles@*", "@material-ui/styles@4.10.0", "@material-ui/styles@^4.10.0": + version "4.10.0" + resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071" + integrity sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q== + dependencies: + "@babel/runtime" "^7.4.4" + "@emotion/hash" "^0.8.0" + "@material-ui/types" "^5.1.0" + "@material-ui/utils" "^4.9.6" + clsx "^1.0.4" + csstype "^2.5.2" + hoist-non-react-statics "^3.3.2" + jss "^10.0.3" + jss-plugin-camel-case "^10.0.3" + jss-plugin-default-unit "^10.0.3" + jss-plugin-global "^10.0.3" + jss-plugin-nested "^10.0.3" + jss-plugin-props-sort "^10.0.3" + jss-plugin-rule-value-function "^10.0.3" + jss-plugin-vendor-prefixer "^10.0.3" + prop-types "^15.7.2" -"@material-ui/styles@*", "@material-ui/styles@3.0.0-alpha.10": - version "3.0.0-alpha.10" - resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-3.0.0-alpha.10.tgz#4c28a6d6dacb1fb71aff4642f92b63232a3f298d" - integrity sha512-qJ5eiupBPRCNlMCDZ2G5h8auBtBtm8uT/oCUAJ/FqhO5oC7POLmmvDN1Cq1cgAmqQnaL6uN5mAM1Gc90GpKr9A== +"@material-ui/system@^4.9.14": + version "4.9.14" + resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.9.14.tgz#4b00c48b569340cefb2036d0596b93ac6c587a5f" + integrity sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w== dependencies: - "@babel/runtime" "^7.2.0" - "@emotion/hash" "^0.7.1" - "@material-ui/utils" "^3.0.0-alpha.2" - classnames "^2.2.5" - deepmerge "^3.0.0" - hoist-non-react-statics "^3.2.1" - jss "^10.0.0-alpha.7" - jss-plugin-camel-case "^10.0.0-alpha.7" - jss-plugin-default-unit "^10.0.0-alpha.7" - jss-plugin-global "^10.0.0-alpha.7" - jss-plugin-nested "^10.0.0-alpha.7" - jss-plugin-props-sort "^10.0.0-alpha.7" - jss-plugin-rule-value-function "^10.0.0-alpha.7" - jss-plugin-vendor-prefixer "^10.0.0-alpha.7" - prop-types "^15.6.0" - warning "^4.0.1" + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.9.6" + csstype "^2.5.2" + prop-types "^15.7.2" -"@material-ui/system@^3.0.0-alpha.0": - version "3.0.0-alpha.1" - resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-3.0.0-alpha.1.tgz#9309e79a88dc069323b4adbf42e844a2facaf93b" - integrity sha512-5EihYa6Ct5mA/shfFSjWO8e/whV+otbXAduYfiL34GH+Mh4vZs+wjcy0P80XA/cDIwSgkQ7vTvvY1x04AgIz4w== - dependencies: - "@babel/runtime" "7.1.2" - deepmerge "^2.0.1" - prop-types "^15.6.0" - warning "^4.0.1" +"@material-ui/types@^5.1.0": + version "5.1.0" + resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2" + integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A== -"@material-ui/utils@^3.0.0-alpha.2": - version "3.0.0-alpha.3" - resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz#836c62ea46f5ffc6f0b5ea05ab814704a86908b1" - integrity sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng== +"@material-ui/utils@^4.10.2", "@material-ui/utils@^4.9.6": + version "4.10.2" + resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.10.2.tgz#3fd5470ca61b7341f1e0468ac8f29a70bf6df321" + integrity sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw== dependencies: - "@babel/runtime" "^7.2.0" - prop-types "^15.6.0" - react-is "^16.6.3" + "@babel/runtime" "^7.4.4" + prop-types "^15.7.2" + react-is "^16.8.0" "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" @@ -2045,14 +2034,6 @@ "@types/istanbul-lib-coverage" "*" "@types/istanbul-lib-report" "*" -"@types/jss@^9.5.6": - version "9.5.7" - resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.7.tgz#fa57a6d0b38a3abef8a425e3eb6a53495cb9d5a0" - integrity sha512-OZimStu2QdDMtZ0h72JXqvLVbWUjXd5ZLk8vxLmfuC/nM1AabRyyGoxSufnzixrbpEcVcyy/JV5qeQu2JnjVZw== - dependencies: - csstype "^2.0.0" - indefinite-observable "^1.0.1" - "@types/node@*": version "14.0.1" resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.1.tgz#5d93e0a099cd0acd5ef3d5bde3c086e1f49ff68c" @@ -2078,10 +2059,10 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.1.tgz#48fd98c1561fe718b61733daed46ff115b496e18" integrity sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA== -"@types/react-transition-group@^2.0.8": - version "2.0.15" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.0.15.tgz#e5ee3fe558832e141cc6041bdd54caea7b787af8" - integrity sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw== +"@types/react-transition-group@^4.2.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d" + integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w== dependencies: "@types/react" "*" @@ -3504,11 +3485,6 @@ braces@^2.3.0, braces@^2.3.1: split-string "^3.0.2" to-regex "^3.0.1" -brcast@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/brcast/-/brcast-3.0.1.tgz#6256a8349b20de9eed44257a9b24d71493cd48dd" - integrity sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg== - brorand@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" @@ -3997,11 +3973,6 @@ chalk@~0.4.0: has-color "~0.1.0" strip-ansi "~0.1.0" -change-emitter@^0.1.2: - version "0.1.6" - resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515" - integrity sha1-6LL+PX8at9aaMhma/5HqaTFAlRU= - chardet@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" @@ -4192,6 +4163,11 @@ clone@^2.1.1, clone@^2.1.2: resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18= +clsx@^1.0.4: + version "1.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" + integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== + co@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" @@ -4917,14 +4893,7 @@ css-url-regex@^1.1.0: resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec" integrity sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w= -css-vendor@^0.3.8: - version "0.3.8" - resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-0.3.8.tgz#6421cfd3034ce664fe7673972fd0119fc28941fa" - integrity sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo= - dependencies: - is-in-browser "^1.0.2" - -css-vendor@^2.0.7: +css-vendor@^2.0.8: version "2.0.8" resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d" integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ== @@ -5061,7 +5030,7 @@ cssstyle@^1.0.0: dependencies: cssom "0.3.x" -csstype@^2.0.0, csstype@^2.2.0, csstype@^2.5.2: +csstype@^2.2.0, csstype@^2.5.2: version "2.6.0" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.0.tgz#6cf7b2fa7fc32aab3d746802c244d4eda71371a2" integrity sha512-by8hi8BlLbowQq0qtkx54d9aN73R9oUW20HISpka5kmgsR9F7nnxgfsemuR2sdCKZh+CDNf5egW9UZMm4mgJRg== @@ -5071,6 +5040,11 @@ csstype@^2.6.5: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b" integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w== +csstype@^2.6.7: + version "2.6.11" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.11.tgz#452f4d024149ecf260a852b025e36562a253ffc5" + integrity sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw== + csurf@~1.8.3: version "1.8.3" resolved "https://registry.yarnpkg.com/csurf/-/csurf-1.8.3.tgz#23f2a13bf1d8fce1d0c996588394442cba86a56a" @@ -5212,7 +5186,7 @@ debounce-promise@^2.1.1: resolved "https://registry.yarnpkg.com/debounce-promise/-/debounce-promise-2.1.1.tgz#4c6a6a2ba6b4a75bac544d688dd1ad4fcce9f30b" integrity sha1-TGpqK6a0p1usVE1ojdGtT8zp8ws= -debounce@^1.0.0, debounce@^1.1.0: +debounce@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131" integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg== @@ -5386,16 +5360,6 @@ deeply@^2.0.1: fulcon "^1.0.1" precise-typeof "^1.0.2" -deepmerge@^2.0.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" - integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== - -deepmerge@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.0.0.tgz#ca7903b34bfa1f8c2eab6779280775a411bfc6ba" - integrity sha512-a8z8bkgHsAML+uHLqmMS83HHlpy3PvZOOuiTQqaa3wu8ZVg3h0hqHk6aCsGdOnZV2XMM/FRimNGjUh0KCcmHBw== - default-gateway@^2.6.0: version "2.7.2" resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-2.7.2.tgz#b7ef339e5e024b045467af403d50348db4642d0f" @@ -5654,13 +5618,21 @@ dom-converter@~0.2: dependencies: utila "~0.4" -dom-helpers@^3.2.1, dom-helpers@^3.3.1: +dom-helpers@^3.3.1: version "3.4.0" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== dependencies: "@babel/runtime" "^7.1.2" +dom-helpers@^5.0.1: + version "5.1.4" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b" + integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^2.6.7" + dom-serialize@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b" @@ -7055,7 +7027,7 @@ fbjs@0.1.0-alpha.7: promise "^7.0.3" whatwg-fetch "^0.9.0" -fbjs@^0.8.1, fbjs@^0.8.4, fbjs@^0.8.9: +fbjs@^0.8.4, fbjs@^0.8.9: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= @@ -8411,25 +8383,18 @@ hoek@4.x.x: resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb" integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA== -hoist-non-react-statics@^2.1.0, hoist-non-react-statics@^2.3.1: +hoist-non-react-statics@^2.1.0: version "2.5.5" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== -hoist-non-react-statics@^3.1.0: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== dependencies: react-is "^16.7.0" -hoist-non-react-statics@^3.2.1: - version "3.2.1" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz#c09c0555c84b38a7ede6912b61efddafd6e75e1e" - integrity sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw== - dependencies: - react-is "^16.3.2" - homedir-polyfill@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc" @@ -8648,11 +8613,6 @@ https-browserify@^1.0.0: resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM= -hyphenate-style-name@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b" - integrity sha1-MRYKNpMK2vH8BMYHT360FGXU7Es= - hyphenate-style-name@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" @@ -8896,13 +8856,6 @@ imurmurhash@^0.1.4: resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= -indefinite-observable@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/indefinite-observable/-/indefinite-observable-1.0.2.tgz#0a328793ab2385d4b9dca23eaab4afe6936a73f8" - integrity sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA== - dependencies: - symbol-observable "1.2.0" - indent-string@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80" @@ -10399,120 +10352,76 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" -jss-camel-case@^6.0.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44" - integrity sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ== - dependencies: - hyphenate-style-name "^1.0.2" - -jss-default-unit@^8.0.2: - version "8.0.2" - resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6" - integrity sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg== - -jss-global@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2" - integrity sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q== - -jss-nested@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/jss-nested/-/jss-nested-6.0.1.tgz#ef992b79d6e8f63d939c4397b9d99b5cbbe824ca" - integrity sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA== - dependencies: - warning "^3.0.0" - -jss-plugin-camel-case@^10.0.0-alpha.7: - version "10.1.1" - resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.1.1.tgz#8e73ecc4f1d0f8dfe4dd31f6f9f2782588970e78" - integrity sha512-MDIaw8FeD5uFz1seQBKz4pnvDLnj5vIKV5hXSVdMaAVq13xR6SVTVWkIV/keyTs5txxTvzGJ9hXoxgd1WTUlBw== +jss-plugin-camel-case@^10.0.3: + version "10.3.0" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.3.0.tgz#ae4da53b39a6e3ea94b70a20fc41c11f0b87386a" + integrity sha512-tadWRi/SLWqLK3EUZEdDNJL71F3ST93Zrl9JYMjV0QDqKPAl0Liue81q7m/nFUpnSTXczbKDy4wq8rI8o7WFqA== dependencies: "@babel/runtime" "^7.3.1" hyphenate-style-name "^1.0.3" - jss "10.1.1" + jss "^10.3.0" -jss-plugin-default-unit@^10.0.0-alpha.7: - version "10.1.1" - resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.1.1.tgz#2df86016dfe73085eead843f5794e3890e9c5c47" - integrity sha512-UkeVCA/b3QEA4k0nIKS4uWXDCNmV73WLHdh2oDGZZc3GsQtlOCuiH3EkB/qI60v2MiCq356/SYWsDXt21yjwdg== +jss-plugin-default-unit@^10.0.3: + version "10.3.0" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.3.0.tgz#cd74cf5088542620a82591f76c62c6b43a7e50a6" + integrity sha512-tT5KkIXAsZOSS9WDSe8m8lEHIjoEOj4Pr0WrG0WZZsMXZ1mVLFCSsD2jdWarQWDaRNyMj/I4d7czRRObhOxSuw== dependencies: "@babel/runtime" "^7.3.1" - jss "10.1.1" + jss "^10.3.0" -jss-plugin-global@^10.0.0-alpha.7: - version "10.1.1" - resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.1.1.tgz#36b0d6d9facb74dfd99590643708a89260747d14" - integrity sha512-VBG3wRyi3Z8S4kMhm8rZV6caYBegsk+QnQZSVmrWw6GVOT/Z4FA7eyMu5SdkorDlG/HVpHh91oFN56O4R9m2VA== +jss-plugin-global@^10.0.3: + version "10.3.0" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.3.0.tgz#6b883e74900bb71f65ac2b19bea78f7d1e85af3f" + integrity sha512-etYTG/y3qIR/vxZnKY+J3wXwObyBDNhBiB3l/EW9/pE3WHE//BZdK8LFvQcrCO48sZW1Z6paHo6klxUPP7WbzA== dependencies: "@babel/runtime" "^7.3.1" - jss "10.1.1" + jss "^10.3.0" -jss-plugin-nested@^10.0.0-alpha.7: - version "10.1.1" - resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.1.1.tgz#5c3de2b8bda344de1ebcef3a4fd30870a29a8a8c" - integrity sha512-ozEu7ZBSVrMYxSDplPX3H82XHNQk2DQEJ9TEyo7OVTPJ1hEieqjDFiOQOxXEj9z3PMqkylnUbvWIZRDKCFYw5Q== +jss-plugin-nested@^10.0.3: + version "10.3.0" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.3.0.tgz#ae8aceac95e09c3d40c991ea32403fb647d9e0a8" + integrity sha512-qWiEkoXNEkkZ+FZrWmUGpf+zBsnEOmKXhkjNX85/ZfWhH9dfGxUCKuJFuOWFM+rjQfxV4csfesq4hY0jk8Qt0w== dependencies: "@babel/runtime" "^7.3.1" - jss "10.1.1" + jss "^10.3.0" tiny-warning "^1.0.2" -jss-plugin-props-sort@^10.0.0-alpha.7: - version "10.1.1" - resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.1.1.tgz#34bddcbfaf9430ec8ccdf92729f03bb10caf1785" - integrity sha512-g/joK3eTDZB4pkqpZB38257yD4LXB0X15jxtZAGbUzcKAVUHPl9Jb47Y7lYmiGsShiV4YmQRqG1p2DHMYoK91g== +jss-plugin-props-sort@^10.0.3: + version "10.3.0" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.3.0.tgz#5b0625f87b6431a7969c56b0d8c696525969bfe4" + integrity sha512-boetORqL/lfd7BWeFD3K+IyPqyIC+l3CRrdZr+NPq7Noqp+xyg/0MR7QisgzpxCEulk+j2CRcEUoZsvgPC4nTg== dependencies: "@babel/runtime" "^7.3.1" - jss "10.1.1" + jss "^10.3.0" -jss-plugin-rule-value-function@^10.0.0-alpha.7: - version "10.1.1" - resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.1.1.tgz#be00dac6fc394aaddbcef5860b9eca6224d96382" - integrity sha512-ClV1lvJ3laU9la1CUzaDugEcwnpjPTuJ0yGy2YtcU+gG/w9HMInD5vEv7xKAz53Bk4WiJm5uLOElSEshHyhKNw== +jss-plugin-rule-value-function@^10.0.3: + version "10.3.0" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.3.0.tgz#498b0e2bae16cb316a6bdb73fd783cf9604ba747" + integrity sha512-7WiMrKIHH3rwxTuJki9+7nY11r1UXqaUZRhHvqTD4/ZE+SVhvtD5Tx21ivNxotwUSleucA/8boX+NF21oXzr5Q== dependencies: "@babel/runtime" "^7.3.1" - jss "10.1.1" + jss "^10.3.0" + tiny-warning "^1.0.2" -jss-plugin-vendor-prefixer@^10.0.0-alpha.7: - version "10.1.1" - resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.1.1.tgz#8348b20749f790beebab3b6a8f7075b07c2cfcfd" - integrity sha512-09MZpQ6onQrhaVSF6GHC4iYifQ7+4YC/tAP6D4ZWeZotvCMq1mHLqNKRIaqQ2lkgANjlEot2JnVi1ktu4+L4pw== +jss-plugin-vendor-prefixer@^10.0.3: + version "10.3.0" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.3.0.tgz#b09c13a4d05a055429d8a24e19cc01ce049f0ed4" + integrity sha512-sZQbrcZyP5V0ADjCLwUA1spVWoaZvM7XZ+2fSeieZFBj31cRsnV7X70FFDerMHeiHAXKWzYek+67nMDjhrZAVQ== dependencies: "@babel/runtime" "^7.3.1" - css-vendor "^2.0.7" - jss "10.1.1" + css-vendor "^2.0.8" + jss "^10.3.0" -jss-props-sort@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323" - integrity sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g== - -jss-vendor-prefixer@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71" - integrity sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA== - dependencies: - css-vendor "^0.3.8" - -jss@10.1.1, jss@^10.0.0-alpha.7: - version "10.1.1" - resolved "https://registry.yarnpkg.com/jss/-/jss-10.1.1.tgz#450b27d53761af3e500b43130a54cdbe157ea332" - integrity sha512-Xz3qgRUFlxbWk1czCZibUJqhVPObrZHxY3FPsjCXhDld4NOj1BgM14Ir5hVm+Qr6OLqVljjGvoMcCdXNOAbdkQ== +jss@^10.0.3, jss@^10.3.0: + version "10.3.0" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.3.0.tgz#2cf7be265f72b59c1764d816fdabff1c5dd18326" + integrity sha512-B5sTRW9B6uHaUVzSo9YiMEOEp3UX8lWevU0Fsv+xtRnsShmgCfIYX44bTH8bPJe6LQKqEXku3ulKuHLbxBS97Q== dependencies: "@babel/runtime" "^7.3.1" csstype "^2.6.5" is-in-browser "^1.1.3" tiny-warning "^1.0.2" -jss@^9.8.7: - version "9.8.7" - resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05" - integrity sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ== - dependencies: - is-in-browser "^1.1.3" - symbol-observable "^1.1.0" - warning "^3.0.0" - jstransform@^11.0.3: version "11.0.3" resolved "https://registry.yarnpkg.com/jstransform/-/jstransform-11.0.3.tgz#09a78993e0ae4d4ef4487f6155a91f6190cb4223" @@ -10672,11 +10581,6 @@ kew@~0.7.0: resolved "https://registry.yarnpkg.com/kew/-/kew-0.7.0.tgz#79d93d2d33363d6fdd2970b335d9141ad591d79b" integrity sha1-edk9LTM2PW/dKXCzNdkUGtWR15s= -keycode@^2.1.9: - version "2.2.0" - resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04" - integrity sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ= - keyv@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.0.0.tgz#44923ba39e68b12a7cec7df6c3268c031f2ef373" @@ -12296,11 +12200,6 @@ normalize-range@^0.1.2: resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= -normalize-scroll-left@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz#6b79691ba79eb5fb107fa5edfbdc06b55caee2aa" - integrity sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg== - normalize-url@2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-2.0.1.tgz#835a9da1551fa26f70e92329069a23aa6574d7e6" @@ -13204,10 +13103,10 @@ policyfile@0.0.4: resolved "https://registry.yarnpkg.com/policyfile/-/policyfile-0.0.4.tgz#d6b82ead98ae79ebe228e2daf5903311ec982e4d" integrity sha1-1rgurZiueeviKOLa9ZAzEeyYLk0= -popper.js@^1.14.1: - version "1.14.6" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz#ab20dd4edf9288b8b3b6531c47c361107b60b4b0" - integrity sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA== +popper.js@1.16.1-lts: + version "1.16.1-lts" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" + integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== portfinder@^1.0.9: version "1.0.20" @@ -14540,15 +14439,6 @@ react-error-overlay@^5.1.2: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.2.tgz#888957b884d4b25b083a82ad550f7aad96585394" integrity sha512-7kEBKwU9R8fKnZJBRa5RSIfay4KJwnYvKB6gODGicUmDSAhQJ7Tdnll5S0RLtYrzRfMVXlqYw61rzrSpP4ThLQ== -react-event-listener@^0.6.2: - version "0.6.5" - resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.5.tgz#d374dbe5da485c9f9d4702f0e76971afbe9b6b2e" - integrity sha512-//lCxOM3DQ0+xmTa/u9mI9mm55zCPdIKp89d8MGjlNsOOnXQ5sFDD1eed+sMBzQXKiRBLBMtSg/2T9RJFtfovw== - dependencies: - "@babel/runtime" "7.2.0" - prop-types "^15.6.0" - warning "^4.0.1" - react-icon-base@2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d" @@ -14584,12 +14474,7 @@ react-input-mask@^2.0.0: invariant "^2.2.4" warning "^4.0.2" -react-is@^16.3.2, react-is@^16.6.3: - version "16.8.2" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.2.tgz#09891d324cad1cb0c1f2d91f70a71a4bee34df0f" - integrity sha512-D+NxhSR2HUCjYky1q1DwpNUD44cDpUXzSmmFyC3ug1bClcU/iDNy0YNn1iwme28fn+NFhpA13IndOd42CrFb+Q== - -react-is@^16.6.0: +react-is@^16.6.0, react-is@^16.8.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -14604,7 +14489,7 @@ react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== -react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: +react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== @@ -14719,7 +14604,7 @@ react-tools@~0.12.1: commoner "^0.10.0" jstransform "^8.2.0" -react-transition-group@^2.2.1, react-transition-group@^2.5.0: +react-transition-group@^2.5.0: version "2.5.3" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.3.tgz#26de363cab19e5c88ae5dbae105c706cf953bb92" integrity sha512-2DGFck6h99kLNr8pOFk+z4Soq3iISydwOFeeEVPjTN6+Y01CmvbWmnN02VuTWyFdnRtIDPe+wy2q6Ui8snBPZg== @@ -14729,6 +14614,16 @@ react-transition-group@^2.2.1, react-transition-group@^2.5.0: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" +react-transition-group@^4.4.0: + version "4.4.1" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" + integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-virtualized-auto-sizer@*: version "1.0.2" resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd" @@ -14929,18 +14824,6 @@ recharts@^1.4.2: recharts-scale "^0.4.2" reduce-css-calc "~1.3.0" -"recompose@0.28.0 - 0.30.0": - version "0.30.0" - resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0" - integrity sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w== - dependencies: - "@babel/runtime" "^7.0.0" - change-emitter "^0.1.2" - fbjs "^0.8.1" - hoist-non-react-statics "^2.3.1" - react-lifecycles-compat "^3.0.2" - symbol-observable "^1.0.4" - recursive-readdir@2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f" @@ -16720,7 +16603,7 @@ svgo@^1.3.2: unquote "~1.1.1" util.promisify "~1.0.0" -symbol-observable@1.2.0, symbol-observable@^1.0.3, symbol-observable@^1.0.4, symbol-observable@^1.1.0: +symbol-observable@^1.0.3: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== @@ -17630,20 +17513,6 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" -warning@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" - integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w= - dependencies: - loose-envify "^1.0.0" - -warning@^4.0.1: - version "4.0.2" - resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.2.tgz#aa6876480872116fa3e11d434b0d0d8d91e44607" - integrity sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug== - dependencies: - loose-envify "^1.0.0" - warning@^4.0.2: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" From cee95b9d8eee31adcc1b7dc9336c112cce595c2b Mon Sep 17 00:00:00 2001 From: Konstantin Ryzhov Date: Wed, 8 Jul 2020 13:08:31 +0300 Subject: [PATCH 02/10] flow-typed mui v4 small fixes --- js/flow-typed/material-ui-core-4.x.x.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/js/flow-typed/material-ui-core-4.x.x.js b/js/flow-typed/material-ui-core-4.x.x.js index c59269777..3a1b97032 100644 --- a/js/flow-typed/material-ui-core-4.x.x.js +++ b/js/flow-typed/material-ui-core-4.x.x.js @@ -140,12 +140,11 @@ declare module "@material-ui/styles/ServerStyleSheets" { } declare module "@material-ui/styles/styled" { - // We don't want a union type here (like React.ComponentType) in order to support mapped types. import type { ElementType, Node } from "react"; declare export type StyledComponent

= ( props: P, - ) => React.ElementType | null; + ) => ElementType | null; } declare module "@material-ui/styles/StylesProvider" { @@ -455,7 +454,7 @@ declare module "@material-ui/core" { | "stretch" | "baseline" | "stretch", - children?: React.Node, + children?: Node, classes?: Object, component?: string, container?: boolean, @@ -793,10 +792,11 @@ declare module "@material-ui/core/styles/createMuiTheme" { Transitions, TransitionsOptions, } from "@material-ui/core/styles/transitions"; + import type { Spacing, SpacingOptions, - } from "@material-ui/core/styles/spacing"; + } from "@material-ui/core/styles/createSpacing"; import type { ZIndex, ZIndexOptions } from "@material-ui/core/styles/zIndex"; declare type ComponentsProps = any; @@ -993,7 +993,7 @@ declare module "@material-ui/core/styles/createTypography" { declare type FontStyleOptions = $Shape & { htmlFontSize?: number, - allVariants?: React.CSSProperties, + allVariants?: CSSProperties, }; declare type TypographyStyle = { @@ -1152,14 +1152,21 @@ declare module "@material-ui/core/styles/transitions" { declare export default typeof transitions; } -declare module "@material-ui/core/styles/spacing" { +declare module "@material-ui/core/styles/createSpacing" { declare export type SpacingArgument = number | string; - declare export type Spacing = () => number; + + declare export type Spacing = ( + top?: SpacingArgument, + right?: SpacingArgument, + bottom?: SpacingArgument, + left?: SpacingArgument, + ) => string; declare export type SpacingOptions = | number | ((factor: number) => string | number) | number[]; + declare export default function createSpacing( spacing: SpacingOptions, ): Spacing; From d596269847ce5cc3d0a7caf635739040abc52b26 Mon Sep 17 00:00:00 2001 From: Konstantin Ryzhov Date: Fri, 10 Jul 2020 12:25:50 +0300 Subject: [PATCH 03/10] WIP flow-typed, Theme, rex-action-application updated --- js/flow-typed/material-ui-core-4.x.x.js | 18 ++++++++++++++---- js/rex-action-application/src/index.js | 7 ++----- js/rex-ui/Theme.js | 11 ----------- 3 files changed, 16 insertions(+), 20 deletions(-) diff --git a/js/flow-typed/material-ui-core-4.x.x.js b/js/flow-typed/material-ui-core-4.x.x.js index 3a1b97032..69d038652 100644 --- a/js/flow-typed/material-ui-core-4.x.x.js +++ b/js/flow-typed/material-ui-core-4.x.x.js @@ -45,8 +45,12 @@ declare module "@material-ui/styles" { import typeof _withTheme from "@material-ui/styles/withTheme"; import typeof _DefaultTheme from "@material-ui/styles/DefaultTheme"; - import type { ThemeOptions } from "@material-ui/core/styles"; - declare export type Theme = ThemeOptions; + import type { + Theme as _Theme, + ThemeOptions as _ThemeOptions, + } from "@material-ui/core/styles"; + declare export type Theme = _Theme; + declare export type ThemeOptions = _ThemeOptions; declare export type color = string; @@ -730,7 +734,10 @@ declare module "@material-ui/core/colors" { declare module "@material-ui/core/styles" { import typeof _createMuiTheme from "@material-ui/core/styles/createMuiTheme"; - import type { Theme as MuiTheme } from "@material-ui/core/styles/createMuiTheme"; + import type { + Theme as MuiTheme, + ThemeOptions as MuiThemeOptions, + } from "@material-ui/core/styles/createMuiTheme"; import typeof _MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; @@ -744,6 +751,7 @@ declare module "@material-ui/core/styles" { import typeof _jssPreset from "@material-ui/core/styles/jssPreset"; declare export type Theme = MuiTheme; + declare export type ThemeOptions = MuiThemeOptions; declare export type WithStyles = MuiWithStyles; declare export type WithTheme = MuiWithTheme; @@ -834,6 +842,8 @@ declare module "@material-ui/core/styles/createMuiTheme" { typography: Typography, zIndex: ZIndex, unstable_strictMode?: boolean, + + [key: string]: any, }; declare export default function createMuiTheme( @@ -1052,7 +1062,7 @@ declare module "@material-ui/core/styles/createBreakpoints" { declare type BreakpointKeys = "xs" | "sm" | "md" | "lg" | "xl"; declare export type BreakpointDefaults = { [key: BreakpointKeys]: {} }; - declare export type Breakpoint = BreakpointDefaults; + declare export type Breakpoint = BreakpointKeys; declare export type BreakpointValues = { [key: BreakpointKeys]: number }; declare export var keys: Breakpoint[]; diff --git a/js/rex-action-application/src/index.js b/js/rex-action-application/src/index.js index 6ccf5c66d..463a69da8 100644 --- a/js/rex-action-application/src/index.js +++ b/js/rex-action-application/src/index.js @@ -6,9 +6,6 @@ // END IMPORTS FOR STATIC ASSETS -let { install } = require("@material-ui/styles"); -install(); - require("rex-widget").Transitionable.registerPackageResolver(function(pkgName) { switch (pkgName) { case "rex-about": @@ -44,6 +41,6 @@ window.Rex = { return import("rex-form-previewer").then(m => { m.renderForm(options); }); - } - } + }, + }, }; diff --git a/js/rex-ui/Theme.js b/js/rex-ui/Theme.js index 24e683537..ad6a6dcc2 100644 --- a/js/rex-ui/Theme.js +++ b/js/rex-ui/Theme.js @@ -14,18 +14,11 @@ import * as styles from "@material-ui/styles"; export type Theme = styles.Theme; -let defaultTheme: Theme = mui.createMuiTheme({ - typography: { - useNextVariants: true, - }, -}); - export let theme: Theme = mui.createMuiTheme({ typography: { useNextVariants: true, }, palette: { - ...defaultTheme.palette, success: { main: mui.colors.green["600"], light: mui.colors.green["200"], @@ -41,10 +34,6 @@ export let theme: Theme = mui.createMuiTheme({ xl: 1920, }, }, - definitonList: { - verticalSpacing: 8, - horizontalSpacing: 8, - }, }); export let useTheme: void => Theme = () => { From e16180dff91cb8db3f39a7f841f0639dde45da30 Mon Sep 17 00:00:00 2001 From: Konstantin Ryzhov Date: Fri, 10 Jul 2020 12:36:49 +0300 Subject: [PATCH 04/10] Removed theme.definitonList from code --- js/rex-widget/form/ReadOnlyField.js | 8 ++++---- js/rex-widget/form/ViewValue.js | 16 ++++++++-------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/js/rex-widget/form/ReadOnlyField.js b/js/rex-widget/form/ReadOnlyField.js index 7e233e993..a796e914b 100644 --- a/js/rex-widget/form/ReadOnlyField.js +++ b/js/rex-widget/form/ReadOnlyField.js @@ -53,7 +53,7 @@ type Props = { /** * The input element to use. */ - children?: React.Node + children?: React.Node, }; /** @@ -70,7 +70,7 @@ function ReadOnlyField(props: Props) { renderValue = renderValueDefault, formValue: formValueOfProps, select, - children + children, } = props; let theme = rexui.useTheme(); @@ -83,8 +83,8 @@ function ReadOnlyField(props: Props) { let labelSizePercent = `30%`; let inputSizePercent = `70%`; - let { verticalSpacing, horizontalSpacing } = theme.definitonList; - let dimensions = { vertical: verticalSpacing, horizontal: horizontalSpacing }; + let spacing = theme.spacing(); + let dimensions = { vertical: spacing, horizontal: spacing }; return ( @@ -71,7 +71,7 @@ export function ViewValue(props: Props) { {label} @@ -87,8 +87,8 @@ export function ViewValue(props: Props) { ); } else { let padding = { - vertical: verticalSpacing / 2, - horizontal: 0 + vertical: spacing / 2, + horizontal: 0, }; return ( From 703f12a229ef2a521cec6a0177f0c41c07ee9608 Mon Sep 17 00:00:00 2001 From: Konstantin Ryzhov Date: Fri, 10 Jul 2020 12:58:50 +0300 Subject: [PATCH 05/10] Fixed Theme type in rapid, updated flow-typed v4 --- js/flow-typed/material-ui-core-4.x.x.js | 10 ++-- js/rex-ui/rapid/themes.js | 61 +++++++++++++------------ 2 files changed, 37 insertions(+), 34 deletions(-) diff --git a/js/flow-typed/material-ui-core-4.x.x.js b/js/flow-typed/material-ui-core-4.x.x.js index 69d038652..e96c375bf 100644 --- a/js/flow-typed/material-ui-core-4.x.x.js +++ b/js/flow-typed/material-ui-core-4.x.x.js @@ -812,7 +812,7 @@ declare module "@material-ui/core/styles/createMuiTheme" { declare export type Direction = "ltr" | "rtl"; - declare export type ThemeOptions = { + declare export type ThemeOptions = {| shape?: ShapeOptions, breakpoints?: BreakpointsOptions, direction?: Direction, @@ -826,9 +826,9 @@ declare module "@material-ui/core/styles/createMuiTheme" { typography?: TypographyOptions | ((palette: Palette) => TypographyOptions), zIndex?: ZIndexOptions, unstable_strictMode?: boolean, - }; + |}; - declare export type Theme = { + declare export type Theme = {| shape: Shape, breakpoints: Breakpoints, direction: Direction, @@ -842,9 +842,7 @@ declare module "@material-ui/core/styles/createMuiTheme" { typography: Typography, zIndex: ZIndex, unstable_strictMode?: boolean, - - [key: string]: any, - }; + |}; declare export default function createMuiTheme( options?: ThemeOptions, diff --git a/js/rex-ui/rapid/themes.js b/js/rex-ui/rapid/themes.js index 0354399ef..efc955ef7 100644 --- a/js/rex-ui/rapid/themes.js +++ b/js/rex-ui/rapid/themes.js @@ -15,9 +15,9 @@ import green from "@material-ui/core/colors/green"; import red from "@material-ui/core/colors/red"; import yellow from "@material-ui/core/colors/yellow"; -export type Theme = {| +export type Theme = { ...ThemeBase, - status: { + status: $Shape<{ successText: color, successBackground: color, errorText: color, @@ -26,8 +26,8 @@ export type Theme = {| inProgressBackground: color, warningText: color, warningBackground: color, - }, -|}; + }>, +}; export let makeStyles: ( styles: (Theme) => Styles, @@ -39,13 +39,16 @@ export let ThemeProvider: React.AbstractComponent<{| theme: Theme, |}> = (ThemeProviderBase: any); -export const DEFAULT_THEME: Theme = createMuiTheme({ - palette: { - secondary: deepPurple, - }, - typography: { - useNextVariants: true, - }, +export const DEFAULT_THEME: Theme = { + ...createMuiTheme({ + palette: { + secondary: deepPurple, + }, + typography: { + useNextVariants: true, + }, + }), + status: { successText: green[500], successBackground: green[50], @@ -56,24 +59,26 @@ export const DEFAULT_THEME: Theme = createMuiTheme({ warningText: yellow[800], warningBackground: yellow[50], }, -}); +}; -export const DARK_THEME: Theme = createMuiTheme({ - palette: { - primary: { - main: "rgb(128,128,128)", - dark: "rgb(66,66,66)", - contrastText: "white", +export const DARK_THEME: Theme = { + ...createMuiTheme({ + palette: { + primary: { + main: "rgb(128,128,128)", + dark: "rgb(66,66,66)", + contrastText: "white", + }, + secondary: brown, }, - secondary: brown, - }, + typography: { + useNextVariants: true, + }, + }), status: { - success: green[500], - error: red[500], - inProgress: blue[500], - warning: yellow[500], - }, - typography: { - useNextVariants: true, + successBackground: green[500], + errorBackground: red[500], + inProgressBackground: blue[500], + warningBackground: yellow[500], }, -}); +}; From 2325506ba5adacf5b34d320744807ab969a14c65 Mon Sep 17 00:00:00 2001 From: Konstantin Ryzhov Date: Fri, 10 Jul 2020 12:59:49 +0300 Subject: [PATCH 06/10] Updated theme.spacing v3 -> theme.spacing(n) v4 across the codebase; prettier applied on some files --- js/rex-ui/Autocomplete.js | 6 ++--- js/rex-ui/Button.js | 4 +-- js/rex-ui/app/AppDrawer.js | 2 +- js/rex-ui/app/Breadcrumbs.js | 2 +- js/rex-ui/datepicker/Common.js | 2 +- js/rex-ui/forms/FileUploadField.js | 2 +- js/rex-ui/forms/FormSection.js | 8 +++--- js/rex-ui/forms/ListField.js | 2 +- js/rex-ui/rapid/Autocomplete.js | 4 +-- js/rex-ui/rapid/List.js | 2 +- js/rex-ui/rapid/LoadingCard.js | 2 +- js/rex-ui/rapid/NotFoundCard.js | 2 +- js/rex-ui/rapid/Pick/PickCardListView.js | 4 +-- js/rex-ui/rapid/Pick/PickFilterToolbar.js | 4 +-- js/rex-ui/rapid/Pick/PickHeader.js | 4 +-- js/rex-ui/rapid/ShowRenderer.js | 10 ++++---- js/rex-ui/rapid/Status.js | 6 ++--- js/rex-widget/conf-form/ConfView.js | 20 +++++++-------- js/rex-widget/form/CheckboxGroupField.js | 11 ++++----- js/rex-widget/form/Fieldset.js | 8 +++--- js/rex-widget/form/FileUploadField.js | 30 +++++++++++------------ js/rex-widget/form/RadioGroupField.js | 8 +++--- js/rex-widget/form/RepeatingFieldset.js | 22 ++++++++--------- js/rex-widget/form/SourceCodeField.js | 4 +-- js/rex-widget/ui/Notification.js | 18 +++++++------- 25 files changed, 92 insertions(+), 95 deletions(-) diff --git a/js/rex-ui/Autocomplete.js b/js/rex-ui/Autocomplete.js index 9dab0df0a..ae77d887c 100644 --- a/js/rex-ui/Autocomplete.js +++ b/js/rex-ui/Autocomplete.js @@ -114,7 +114,7 @@ let useStyles = styles.makeStyles((theme: Theme) => ({ error: { fontSize: "10pt", color: theme.palette.error.main, - padding: theme.spacing.unit, + padding: theme.spacing(), }, container: { position: "relative", @@ -122,7 +122,7 @@ let useStyles = styles.makeStyles((theme: Theme) => ({ suggestionsContainerOpen: { position: "absolute", zIndex: 1, - marginTop: theme.spacing.unit, + marginTop: theme.spacing(), left: 0, right: 0, }, @@ -135,7 +135,7 @@ let useStyles = styles.makeStyles((theme: Theme) => ({ listStyleType: "none", }, divider: { - height: theme.spacing.unit * 2, + height: theme.spacing(2), }, })); diff --git a/js/rex-ui/Button.js b/js/rex-ui/Button.js index 140751ef3..097a3e160 100644 --- a/js/rex-ui/Button.js +++ b/js/rex-ui/Button.js @@ -38,13 +38,13 @@ export let ButtonIcon = ({ if (size === "small") { paddingRight = 0; } else { - paddingRight = theme.spacing.unit; + paddingRight = theme.spacing(); } } let iconStyle = { paddingRight, height: "1em", - marginLeft: -theme.spacing.unit / 4, + marginLeft: theme.spacing(-0.25), transform: size === "small" ? "scale(0.75)" : null, }; iconElement =

{icon}
; diff --git a/js/rex-ui/app/AppDrawer.js b/js/rex-ui/app/AppDrawer.js index ecae5a33b..88dedac90 100644 --- a/js/rex-ui/app/AppDrawer.js +++ b/js/rex-ui/app/AppDrawer.js @@ -23,7 +23,7 @@ let useAppDrawerStyles = Theme.makeStyles(theme => { display: "flex", flexDirection: "row", justifyContent: "flex-end", - padding: theme.spacing.unit, + padding: theme.spacing(), ...theme.mixins.toolbar, }, buttonClose: { diff --git a/js/rex-ui/app/Breadcrumbs.js b/js/rex-ui/app/Breadcrumbs.js index bf2bf896b..4a9e37470 100644 --- a/js/rex-ui/app/Breadcrumbs.js +++ b/js/rex-ui/app/Breadcrumbs.js @@ -11,7 +11,7 @@ let useStyles = makeStyles(theme => { return { root: { backgroundColor: "#FFFFFF", - padding: theme.spacing.unit, + padding: theme.spacing(), }, ol: { display: "flex", diff --git a/js/rex-ui/datepicker/Common.js b/js/rex-ui/datepicker/Common.js index 26e0efe77..39f51593d 100644 --- a/js/rex-ui/datepicker/Common.js +++ b/js/rex-ui/datepicker/Common.js @@ -36,7 +36,7 @@ export let BackButtonWithTitle = ({ -
+
({ let useStyles = makeStyles(theme => ({ control: { - paddingTop: theme.spacing.unit * 3, + paddingTop: theme.spacing(3), }, })); diff --git a/js/rex-ui/forms/FormSection.js b/js/rex-ui/forms/FormSection.js index b2b25d791..224667a22 100644 --- a/js/rex-ui/forms/FormSection.js +++ b/js/rex-ui/forms/FormSection.js @@ -33,13 +33,13 @@ export function FormSection({ let useStyles = Rapid.makeStyles(theme => ({ root: { - padding: theme.spacing.unit, + padding: theme.spacing(), display: "flex", flexDirection: "column", }, header: { - padding: theme.spacing.unit, - paddingTop: theme.spacing.unit * 2, - paddingBottom: theme.spacing.unit * 2, + padding: theme.spacing(), + paddingTop: theme.spacing(2), + paddingBottom: theme.spacing(2), }, })); diff --git a/js/rex-ui/forms/ListField.js b/js/rex-ui/forms/ListField.js index 23bbe8af0..aea32d17d 100644 --- a/js/rex-ui/forms/ListField.js +++ b/js/rex-ui/forms/ListField.js @@ -117,6 +117,6 @@ export function ListField({ let useStyles = makeStyles(theme => ({ addItemButtonContainer: { - marginTop: theme.spacing.unit, + marginTop: theme.spacing(), }, })); diff --git a/js/rex-ui/rapid/Autocomplete.js b/js/rex-ui/rapid/Autocomplete.js index 6cc235b34..947e694b7 100644 --- a/js/rex-ui/rapid/Autocomplete.js +++ b/js/rex-ui/rapid/Autocomplete.js @@ -79,7 +79,7 @@ let useStyles = makeStyles(theme => ({ suggestionsContainerOpen: { position: "absolute", zIndex: 1, - marginTop: theme.spacing.unit, + marginTop: theme.spacing(), left: 0, right: 0, }, @@ -92,7 +92,7 @@ let useStyles = makeStyles(theme => ({ listStyleType: "none", }, divider: { - height: theme.spacing.unit * 2, + height: theme.spacing(2), }, })); diff --git a/js/rex-ui/rapid/List.js b/js/rex-ui/rapid/List.js index bc3e29740..3db69997c 100644 --- a/js/rex-ui/rapid/List.js +++ b/js/rex-ui/rapid/List.js @@ -213,6 +213,6 @@ export function ListItem({ primary, secondary, icon, status }: ListItemProps) { let useStyles = makeStyles(theme => ({ actionbar: { display: "inline-flex", - paddingBottom: theme.spacing.unit, + paddingBottom: theme.spacing(), }, })); diff --git a/js/rex-ui/rapid/LoadingCard.js b/js/rex-ui/rapid/LoadingCard.js index 0e09b506d..f3de44357 100644 --- a/js/rex-ui/rapid/LoadingCard.js +++ b/js/rex-ui/rapid/LoadingCard.js @@ -53,7 +53,7 @@ let useStyles = makeStyles(theme => ({ }, title: { textAlign: "center", - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), fontSize: 16, }, })); diff --git a/js/rex-ui/rapid/NotFoundCard.js b/js/rex-ui/rapid/NotFoundCard.js index 98c55efca..b4277fce4 100644 --- a/js/rex-ui/rapid/NotFoundCard.js +++ b/js/rex-ui/rapid/NotFoundCard.js @@ -51,7 +51,7 @@ let useStyles = makeStyles(theme => ({ }, title: { textAlign: "center", - marginBottom: theme.spacing.unit * 2, + marginBottom: theme.spacing(2), fontSize: 16, }, })); diff --git a/js/rex-ui/rapid/Pick/PickCardListView.js b/js/rex-ui/rapid/Pick/PickCardListView.js index 1045e12f4..849ebc15f 100644 --- a/js/rex-ui/rapid/Pick/PickCardListView.js +++ b/js/rex-ui/rapid/Pick/PickCardListView.js @@ -134,8 +134,8 @@ let useStyles = makeStyles(theme => ({ }, checkboxContainer: { position: "absolute", - top: theme.spacing.unit / 2, - right: theme.spacing.unit / 2, + top: theme.spacing(0.5), + right: theme.spacing(0.5), }, buttonBase: { width: "100%", diff --git a/js/rex-ui/rapid/Pick/PickFilterToolbar.js b/js/rex-ui/rapid/Pick/PickFilterToolbar.js index 011294a54..8609fe2b1 100644 --- a/js/rex-ui/rapid/Pick/PickFilterToolbar.js +++ b/js/rex-ui/rapid/Pick/PickFilterToolbar.js @@ -22,7 +22,7 @@ import { DateInput } from "../../DateInput2.js"; export const useFilterToolbarStyles = makeStyles((theme: Theme) => { return { - tableControl: { padding: theme.spacing.unit }, + tableControl: { padding: theme.spacing() }, formContainer: { display: "flex", width: "100%", @@ -45,7 +45,7 @@ export const useFilterToolbarStyles = makeStyles((theme: Theme) => { flexWrap: "nowrap", }, formControl: { - marginLeft: theme.spacing.unit, + marginLeft: theme.spacing(), flex: 1, }, toggleButton: { diff --git a/js/rex-ui/rapid/Pick/PickHeader.js b/js/rex-ui/rapid/Pick/PickHeader.js index 25fcc3356..df1632435 100644 --- a/js/rex-ui/rapid/Pick/PickHeader.js +++ b/js/rex-ui/rapid/Pick/PickHeader.js @@ -69,7 +69,7 @@ export const PickHeader = ({ let useStyles = makeStyles((theme: Theme) => ({ PickHeader__root: { - padding: theme.spacing.unit * 2, + padding: theme.spacing(2), }, PickHeader__top: { display: "flex", @@ -79,7 +79,7 @@ let useStyles = makeStyles((theme: Theme) => ({ flexDirection: "row", justifyContent: "space-between", alignItems: "center", - paddingTop: theme.spacing.unit, + paddingTop: theme.spacing(), }, PickHeader__title: { marginBottom: 8, diff --git a/js/rex-ui/rapid/ShowRenderer.js b/js/rex-ui/rapid/ShowRenderer.js index 73a7ed3c9..965a5d6ae 100644 --- a/js/rex-ui/rapid/ShowRenderer.js +++ b/js/rex-ui/rapid/ShowRenderer.js @@ -279,8 +279,8 @@ let useStyles = makeStyles(theme => ({ }, }, header: { - padding: theme.spacing.unit, - marginBottom: theme.spacing.unit, + padding: theme.spacing(), + marginBottom: theme.spacing(), }, titleSmall: { fontSize: 16, @@ -303,19 +303,19 @@ let useStyles = makeStyles(theme => ({ contentWrapper: { maxWidth: 640, wordBreak: "break-word", - padding: theme.spacing.unit, + padding: theme.spacing(), }, fieldContainer: { flex: 1, }, toolbar: { - padding: theme.spacing.unit * 1, + padding: theme.spacing(), }, editToolbar: { alignSelf: "flex-end", }, toolbarButton: { - marginLeft: theme.spacing.unit, + marginLeft: theme.spacing(), wordBread: "keep-all", }, })); diff --git a/js/rex-ui/rapid/Status.js b/js/rex-ui/rapid/Status.js index 8106e70ce..8c9cd9df2 100644 --- a/js/rex-ui/rapid/Status.js +++ b/js/rex-ui/rapid/Status.js @@ -219,9 +219,9 @@ let useStyles = makeStyles(theme => ({ }, StatusMessage__root: { - padding: theme.spacing.unit, - paddingTop: theme.spacing.unit * 2, - paddingBottom: theme.spacing.unit * 2, + padding: theme.spacing(), + paddingTop: theme.spacing(2), + paddingBottom: theme.spacing(2), borderRadius: theme.shape.borderRadius, }, StatusMessage__root_success: { diff --git a/js/rex-widget/conf-form/ConfView.js b/js/rex-widget/conf-form/ConfView.js index 93ea14884..9eec4ba2b 100644 --- a/js/rex-widget/conf-form/ConfView.js +++ b/js/rex-widget/conf-form/ConfView.js @@ -19,13 +19,13 @@ import { toReactKey } from "../KeyPath"; type Props = {| initialValue: mixed, schema?: ReactForms.schema, - config: Config + config: Config, |}; export function ConfView({ config, schema, initialValue }: Props) { let value = React.useMemo( () => ReactForms.createValue({ schema, value: initialValue }), - [initialValue, schema] + [initialValue, schema], ); return ( @@ -36,10 +36,10 @@ export function ConfView({ config, schema, initialValue }: Props) { function Field({ config, - value + value, }: {| config: Config, - value: ReactForms.value + value: ReactForms.value, |}) { let theme = rexui.useTheme(); @@ -57,7 +57,7 @@ function Field({ label: config.label, hint: config.hint, formValue: value, - readOnly: true + readOnly: true, }); } else if (config.widget != null && config.widget.show != null) { let widget: React.Element = (config.widget.show: any); @@ -66,7 +66,7 @@ function Field({ label: config.label, hint: config.hint, formValue: value, - readOnly: true + readOnly: true, }); } else { switch (config.type) { @@ -161,7 +161,7 @@ function Field({ case "list": { invariant( Array.isArray(value.value) || value.value == null, - "ConfView: expected an array for a list field config" + "ConfView: expected an array for a list field config", ); let values = value.value || []; let items = values.map((item, key) => { @@ -180,8 +180,8 @@ function Field({ -
+
{config.label}
diff --git a/js/rex-widget/form/CheckboxGroupField.js b/js/rex-widget/form/CheckboxGroupField.js index 0b9753a4a..589a9ef80 100644 --- a/js/rex-widget/form/CheckboxGroupField.js +++ b/js/rex-widget/form/CheckboxGroupField.js @@ -18,15 +18,15 @@ import CheckboxGroup, { entityValueStrategy, type Value, type Option, - type ValueStrategy + type ValueStrategy, } from "./CheckboxGroup"; function TitleList({ value, - options + options, }: { value: ?(Value[]), - options: ?(Option[]) + options: ?(Option[]), }) { if (options == null) { return null; @@ -54,7 +54,6 @@ type Props = {| options: Fetcher, noOptionsText?: string, - |}; export function CheckboxGroupField({ @@ -92,7 +91,7 @@ export function CheckboxGroupField({ return ; } else if (options == null || options.length === 0) { return ( - + {noOptionsText} ); @@ -116,7 +115,7 @@ export function CheckboxGroupField({ filled={true} required={labelProps.required} error={labelProps.error} - style={{ paddingBottom: theme.spacing.unit }} + style={{ paddingBottom: theme.spacing() }} > {labelProps.label} diff --git a/js/rex-widget/form/Fieldset.js b/js/rex-widget/form/Fieldset.js index 3c167375b..63c723559 100644 --- a/js/rex-widget/form/Fieldset.js +++ b/js/rex-widget/form/Fieldset.js @@ -10,7 +10,7 @@ import { Fieldset as FieldsetBase, useFormValue, type value, - type select + type select, } from "react-forms"; import { VBox } from "react-stylesheet"; import { ErrorList } from "./ErrorList"; @@ -21,7 +21,7 @@ type Props = { formValue?: value, select?: select, children: React.Node, - Component?: React.AbstractComponent<{}> + Component?: React.AbstractComponent<{}>, }; export function Fieldset({ @@ -30,7 +30,7 @@ export function Fieldset({ hint, formValue: formValueOfProps, select, - children + children, }: Props) { let theme = rexui.useTheme(); let formValue = useFormValue(formValueOfProps, select); @@ -45,7 +45,7 @@ export function Fieldset({ {label} diff --git a/js/rex-widget/form/FileUploadField.js b/js/rex-widget/form/FileUploadField.js index 34d247820..0bd692e61 100644 --- a/js/rex-widget/form/FileUploadField.js +++ b/js/rex-widget/form/FileUploadField.js @@ -21,32 +21,32 @@ import uploadFileDefault from "../upload"; let styles = { styleInput: { - display: "none" + display: "none", }, stylePlaceholder: { fontSize: "90%", - color: "#AAAAAA" + color: "#AAAAAA", }, styleError: { fontSize: "90%", - color: "rgb(234, 69, 69)" + color: "rgb(234, 69, 69)", }, styleNote: { color: "#8e8ee2", fontSize: "90%", fontWight: "400", - marginRight: "10px" + marginRight: "10px", }, styleIconAnimation: { display: "inline-block", marginLeft: "5px", animation: "spin .7s infinite linear", - webkitAnimation: "spin2 0.9s infinite linear" - } + webkitAnimation: "spin2 0.9s infinite linear", + }, }; type InputProps = { @@ -60,8 +60,8 @@ type InputProps = { uploadFile?: ( url: string, file: FileValue, - onProgress?: (number) => void - ) => Promise<{ file: string }> + onProgress?: (number) => void, + ) => Promise<{ file: string }>, }; export let Input = (props: InputProps) => { @@ -73,7 +73,7 @@ export let Input = (props: InputProps) => { ownerRecordID, storage, error, - uploadFile = uploadFileDefault + uploadFile = uploadFileDefault, } = props; let inputRef = React.useRef(null); @@ -81,7 +81,7 @@ export let Input = (props: InputProps) => { let [{ file, progress, error: errorOfUpload }, setState] = React.useState({ file: null, progress: null, - error: null + error: null, }); let handleOnChange = e => { @@ -90,7 +90,7 @@ export let Input = (props: InputProps) => { setState(state => ({ ...state, file: null, error: null })); uploadFile(storage, file, _onUploadProgress).then( _onUploadComplete, - _onUploadError + _onUploadError, ); }; @@ -105,7 +105,7 @@ export let Input = (props: InputProps) => { setState({ file: null, progress: null, - error: null + error: null, }); onChange(undefined); }; @@ -191,7 +191,7 @@ type Props = { label?: string, hint?: string, - readOnly?: boolean + readOnly?: boolean, }; /** @@ -207,7 +207,7 @@ export function FileUploadField(props: Props) { formValue: formValueOfProps, select, label, - hint + hint, } = props; let theme = rexui.useTheme(); @@ -226,7 +226,7 @@ export function FileUploadField(props: Props) { filled={true} required={labelProps.required} error={labelProps.error} - style={{ paddingBottom: theme.spacing.unit }} + style={{ paddingBottom: theme.spacing() }} > {labelProps.label} diff --git a/js/rex-widget/form/RadioGroupField.js b/js/rex-widget/form/RadioGroupField.js index 50210f4b0..d164f97a0 100644 --- a/js/rex-widget/form/RadioGroupField.js +++ b/js/rex-widget/form/RadioGroupField.js @@ -32,7 +32,7 @@ type Props = {| * Either an array of options or a producible which returns a list of * objects with `id` and `title` attributes. */ - options: Fetcher + options: Fetcher, |}; function RadioGroupField({ @@ -65,7 +65,7 @@ function RadioGroupField({ filled={true} required={labelProps.required} error={labelProps.error} - style={{ paddingBottom: theme.spacing.unit }} + style={{ paddingBottom: theme.spacing() }} > {labelProps.label} @@ -73,9 +73,7 @@ function RadioGroupField({ }; let renderInput = inputProps => { if (updating) { - return ( - - ); + return ; } else { return ; } diff --git a/js/rex-widget/form/RepeatingFieldset.js b/js/rex-widget/form/RepeatingFieldset.js index e7953a34c..63e4cb3a1 100644 --- a/js/rex-widget/form/RepeatingFieldset.js +++ b/js/rex-widget/form/RepeatingFieldset.js @@ -12,7 +12,7 @@ import { useFormValue, Fieldset as FieldsetBase, type value, - type select + type select, } from "react-forms"; import { Fieldset } from "./Fieldset"; @@ -64,7 +64,7 @@ type Props = {| forceShowErrors?: boolean, - layout?: layout + layout?: layout, |}; /** @@ -116,7 +116,7 @@ export function RepeatingFieldset({ // TODO: validate that we have an array here let fieldsets = value.map((item, idx) => { const toolbar = ( - + } @@ -132,11 +132,11 @@ export function RepeatingFieldset({ ); return ( - + - +
- {content} + {content}
@@ -144,8 +144,8 @@ export function RepeatingFieldset({ ); }); - const verticalFieldSpacing = theme.spacing.unit; - const horizontalFieldSpacing = theme.spacing.unit * 2; + const verticalFieldSpacing = theme.spacing(); + const horizontalFieldSpacing = theme.spacing(2); let isRequired = schema != null && schema.isRequired; let showErrors = formValue.params.forceShowErrors || forceShowErrors; @@ -157,7 +157,7 @@ export function RepeatingFieldset({ {label} @@ -188,7 +188,7 @@ export function RepeatingFieldset({ {isError && } {!isError && preventiveErrorHint} {!readOnly && ( - + } size="small" onClick={addItem}> {addButtonText} {label} @@ -213,7 +213,7 @@ function renderPreventiveErrorHint(schema, value) { let hint = null; if (minItems != null && maxItems != null) { hint = `Between ${minItems} and ${maxItems} ${name( - maxItems + maxItems, )} should be specified`; } else if (minItems != null) { hint = `Should have at least ${minItems} ${name(minItems)} specified`; diff --git a/js/rex-widget/form/SourceCodeField.js b/js/rex-widget/form/SourceCodeField.js index d6da2a69d..bc1edf349 100644 --- a/js/rex-widget/form/SourceCodeField.js +++ b/js/rex-widget/form/SourceCodeField.js @@ -24,7 +24,7 @@ function serializerDefault(value: mixed) { export type Props = {| ...Field.Props, - serializer?: mixed => React.Node + serializer?: mixed => React.Node, |}; let renderInputDefault = props => ; @@ -46,7 +46,7 @@ export function SourceCodeField(props: Props) { variant="standard" required={labelProps.required} error={labelProps.error} - style={{ paddingBottom: theme.spacing.unit }} + style={{ paddingBottom: theme.spacing() }} > {labelProps.label} diff --git a/js/rex-widget/ui/Notification.js b/js/rex-widget/ui/Notification.js index 7e474f9c4..8965579b0 100644 --- a/js/rex-widget/ui/Notification.js +++ b/js/rex-widget/ui/Notification.js @@ -14,28 +14,28 @@ import Icon from "./Icon"; let NotificationStyle = { icon: { marginRight: "10px", - textAlign: "center" + textAlign: "center", }, success: { color: "#3c763d", backgroundColor: "#dff0d8", - borderColor: "#d6e9c6" + borderColor: "#d6e9c6", }, danger: { color: "#a94442", backgroundColor: "#f2dede", - borderColor: "#ebccd1" + borderColor: "#ebccd1", }, info: { color: "#31708f", backgroundColor: "#d9edf7", - borderColor: "#bce8f1" + borderColor: "#bce8f1", }, warning: { color: "#8a6d3b", backgroundColor: "#fcf8e3", - borderColor: "#faebcc" - } + borderColor: "#faebcc", + }, }; export type Props = {| @@ -56,7 +56,7 @@ export type Props = {| * Otherwise the object is used. * Naturally it must have only valid css attributes. */ - kind?: "icon" | "success" | "danger" | "info" | "warning" + kind?: "icon" | "success" | "danger" | "info" | "warning", |}; /** @@ -70,8 +70,8 @@ function Notification(props: Props) { let { children, text, icon, kind = "info" } = props; let theme = rexui.useTheme(); let style = { - padding: theme.spacing.unit * 2, - ...NotificationStyle[kind] + padding: theme.spacing(2), + ...NotificationStyle[kind], }; return ( From 18b3abbc4b3c292650f1afc7bd8dfcc274d4a3dc Mon Sep 17 00:00:00 2001 From: Konstantin Ryzhov Date: Mon, 13 Jul 2020 14:54:47 +0300 Subject: [PATCH 07/10] WIP Updated mui v4 types, fixed props in code --- js/flow-typed/material-ui-core-4.x.x.js | 270 ++++++++++++------------ js/rex-ui/Theme.js | 3 - js/rex-ui/rapid/Pick/PickPagination.js | 2 +- js/rex-ui/rapid/Status.js | 2 +- js/rex-ui/rapid/themes.js | 6 - 5 files changed, 142 insertions(+), 141 deletions(-) diff --git a/js/flow-typed/material-ui-core-4.x.x.js b/js/flow-typed/material-ui-core-4.x.x.js index e96c375bf..a90fe6440 100644 --- a/js/flow-typed/material-ui-core-4.x.x.js +++ b/js/flow-typed/material-ui-core-4.x.x.js @@ -185,9 +185,15 @@ declare module "@material-ui/styles/withStyles" { } declare module "@material-ui/styles/withTheme" { + import type { AbstractComponent } from "react"; + + declare export function withTheme

( + C: AbstractComponent

, + ): AbstractComponent

; } declare module "@material-ui/styles/DefaultTheme" { + declare export default {}; } declare module "@material-ui/core" { @@ -252,6 +258,10 @@ declare module "@material-ui/core" { noWrap?: boolean, paragraph?: boolean, inline?: boolean, + + // Changes in mui v4: + // body1 (default) => body2 (default) + // body2 => body1 variant?: | "h1" | "h2" @@ -317,14 +327,7 @@ declare module "@material-ui/core" { declare export var ButtonBase: AbstractComponent; - declare export type ButtonVariants = - | "text" - | "flat" - | "outlined" - | "contained" - | "raised" - | "fab" - | "extendedFab"; + declare export type ButtonVariants = "text" | "outlined" | "contained"; declare export type ButtonProps = {| ...ButtonBaseProps, @@ -441,122 +444,7 @@ declare module "@material-ui/core" { |}; declare export var Popover: AbstractComponent; - declare export type GridProps = {| - ...DOMProps, - alignContent?: - | "stretch" - | "center" - | "flex-start" - | "flex-end" - | "space-between" - | "space-around" - | "stretch", - alignItems?: - | "flex-start" - | "center" - | "flex-end" - | "stretch" - | "baseline" - | "stretch", - children?: Node, - classes?: Object, - component?: string, - container?: boolean, - direction?: "row" | "row-reverse" | "column" | "column-reverse" | "row", - item?: boolean, - justify?: - | "center" - | "flex-end" - | "space-between" - | "space-around" - | "space-evenly" - | "flex-start", - lg?: - | false - | "auto" - | true - | 1 - | 2 - | 3 - | 4 - | 5 - | 6 - | 7 - | 8 - | 9 - | 10 - | 11 - | 12, - md?: - | false - | "auto" - | true - | 1 - | 2 - | 3 - | 4 - | 5 - | 6 - | 7 - | 8 - | 9 - | 10 - | 11 - | 12, - sm?: - | false - | "auto" - | true - | 1 - | 2 - | 3 - | 4 - | 5 - | 6 - | 7 - | 8 - | 9 - | 10 - | 11 - | 12, - spacing?: 0 | 8 | 16 | 24 | 32 | 40, - wrap?: "nowrap" | "wrap" | "wrap-reverse", - xl?: - | "auto" - | true - | 1 - | 2 - | 3 - | 4 - | 5 - | 6 - | 7 - | 8 - | 9 - | 10 - | 11 - | 12 - | false, - xs?: - | "auto" - | true - | 1 - | 2 - | 3 - | 4 - | 5 - | 6 - | 7 - | 8 - | 9 - | 10 - | 11 - | 12 - | false, - zeroMinWidth?: boolean, - style?: Object, - className?: ?string, - |}; + import type { GridProps } from "@material-ui/core/Grid"; declare export var Grid: AbstractComponent; import typeof _createMuiTheme from "@material-ui/core/styles/createMuiTheme"; @@ -627,7 +515,6 @@ declare module "@material-ui/core" { declare export var FormGroup: any; declare export var FormHelperText: any; declare export var FormLabel: any; - declare export var Grid: any; declare export var GridList: any; declare export var GridListTile: any; declare export var GridListTileBar: any; @@ -671,7 +558,9 @@ declare module "@material-ui/core" { declare export var StepIcon: any; declare export var StepLabel: any; declare export var Stepper: any; - declare export var SvgIcon: any; + declare export var SvgIcon: AbstractComponent<{ + htmlColor?: string, + }>; declare export var SwipeableDrawer: any; declare export var Switch: any; declare export var Tab: any; @@ -692,6 +581,129 @@ declare module "@material-ui/core" { declare export var Zoom: any; } +declare module "@material-ui/core/Grid" { + declare export type GridProps = {| + ...DOMProps, + alignContent?: + | "stretch" + | "center" + | "flex-start" + | "flex-end" + | "space-between" + | "space-around" + | "stretch", + alignItems?: + | "flex-start" + | "center" + | "flex-end" + | "stretch" + | "baseline" + | "stretch", + children?: Node, + classes?: Object, + component?: string, + container?: boolean, + direction?: "row" | "row-reverse" | "column" | "column-reverse" | "row", + item?: boolean, + justify?: + | "center" + | "flex-end" + | "space-between" + | "space-around" + | "space-evenly" + | "flex-start", + lg?: + | false + | "auto" + | true + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12, + md?: + | false + | "auto" + | true + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12, + sm?: + | false + | "auto" + | true + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12, + spacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10, + wrap?: "nowrap" | "wrap" | "wrap-reverse", + xl?: + | "auto" + | true + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12 + | false, + xs?: + | "auto" + | true + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | 7 + | 8 + | 9 + | 10 + | 11 + | 12 + | false, + zeroMinWidth?: boolean, + style?: Object, + className?: ?string, + |}; + + declare var Grid: AbstractComponent; + + declare export default Grid; +} + declare type CommonColors = { black: string, white: string, @@ -742,7 +754,6 @@ declare module "@material-ui/core/styles" { import typeof _MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; import typeof _withStyles from "@material-ui/core/styles/withStyles"; - import type { WithStyles as MuiWithStyles } from "@material-ui/core/styles/withStyles"; import typeof _withTheme from "@material-ui/core/styles/withTheme"; import type { WithTheme as MuiWithTheme } from "@material-ui/core/styles/withTheme"; @@ -752,8 +763,8 @@ declare module "@material-ui/core/styles" { declare export type Theme = MuiTheme; declare export type ThemeOptions = MuiThemeOptions; - declare export type WithStyles = MuiWithStyles; - declare export type WithTheme = MuiWithTheme; + declare export type WithStyles = any; + declare export type WithTheme = { theme: Theme }; declare export var MuiThemeProvider: _MuiThemeProvider; declare export var createMuiTheme: _createMuiTheme; @@ -1028,7 +1039,6 @@ declare module "@material-ui/core/styles/createTypography" { declare export type TypographyOptions = $Shape< { [style: Variant]: $Shape, - useNextVariants: boolean, } & FontStyle, >; diff --git a/js/rex-ui/Theme.js b/js/rex-ui/Theme.js index ad6a6dcc2..ea610bf16 100644 --- a/js/rex-ui/Theme.js +++ b/js/rex-ui/Theme.js @@ -15,9 +15,6 @@ import * as styles from "@material-ui/styles"; export type Theme = styles.Theme; export let theme: Theme = mui.createMuiTheme({ - typography: { - useNextVariants: true, - }, palette: { success: { main: mui.colors.green["600"], diff --git a/js/rex-ui/rapid/Pick/PickPagination.js b/js/rex-ui/rapid/Pick/PickPagination.js index 2af8a0d9f..abed3a8c0 100644 --- a/js/rex-ui/rapid/Pick/PickPagination.js +++ b/js/rex-ui/rapid/Pick/PickPagination.js @@ -41,7 +41,7 @@ export const PickPagination = ({ direction="row" justify="flex-end" alignItems="center" - spacing={8} + spacing={2} className={classes.paginationWrapper} > diff --git a/js/rex-ui/rapid/Status.js b/js/rex-ui/rapid/Status.js index 8c9cd9df2..40cfc99ac 100644 --- a/js/rex-ui/rapid/Status.js +++ b/js/rex-ui/rapid/Status.js @@ -144,7 +144,7 @@ export function StatusMessage({ }); return (

- + diff --git a/js/rex-ui/rapid/themes.js b/js/rex-ui/rapid/themes.js index efc955ef7..d0db1edf8 100644 --- a/js/rex-ui/rapid/themes.js +++ b/js/rex-ui/rapid/themes.js @@ -44,9 +44,6 @@ export const DEFAULT_THEME: Theme = { palette: { secondary: deepPurple, }, - typography: { - useNextVariants: true, - }, }), status: { @@ -71,9 +68,6 @@ export const DARK_THEME: Theme = { }, secondary: brown, }, - typography: { - useNextVariants: true, - }, }), status: { successBackground: green[500], From cd2cf02d63a54a36dc910adf23d2ab66dbfce9f5 Mon Sep 17 00:00:00 2001 From: Konstantin Ryzhov Date: Wed, 15 Jul 2020 00:32:36 +0300 Subject: [PATCH 08/10] Updated mui v4 typings --- js/flow-typed/material-ui-core-4.x.x.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/js/flow-typed/material-ui-core-4.x.x.js b/js/flow-typed/material-ui-core-4.x.x.js index a90fe6440..974a1e0df 100644 --- a/js/flow-typed/material-ui-core-4.x.x.js +++ b/js/flow-typed/material-ui-core-4.x.x.js @@ -187,9 +187,9 @@ declare module "@material-ui/styles/withStyles" { declare module "@material-ui/styles/withTheme" { import type { AbstractComponent } from "react"; - declare export function withTheme

( - C: AbstractComponent

, - ): AbstractComponent

; + declare export default function withTheme( + C: AbstractComponent, + ): AbstractComponent; } declare module "@material-ui/styles/DefaultTheme" { @@ -745,6 +745,8 @@ declare module "@material-ui/core/colors" { } declare module "@material-ui/core/styles" { + import type { AbstractComponent } from "react"; + import typeof _createMuiTheme from "@material-ui/core/styles/createMuiTheme"; import type { Theme as MuiTheme, @@ -769,7 +771,9 @@ declare module "@material-ui/core/styles" { declare export var MuiThemeProvider: _MuiThemeProvider; declare export var createMuiTheme: _createMuiTheme; declare export var withStyles: _withStyles; - declare export var withTheme: _withTheme; + declare export function withTheme( + C: AbstractComponent, + ): AbstractComponent; declare export var createGenerateClassName: _createGenerateClassName; declare export var jssPreset: _jssPreset; } @@ -782,10 +786,11 @@ declare module "@material-ui/core/styles/withStyles" { } declare module "@material-ui/core/styles/withTheme" { - import typeof _withTheme from "@material-ui/styles/withTheme"; + import type { AbstractComponent } from "react"; - declare export var withTheme: _withTheme; - declare export default withTheme; + declare export default function withTheme( + C: AbstractComponent, + ): AbstractComponent; } declare module "@material-ui/core/styles/createMuiTheme" { From f4b5becc549575968902dd8f9c9011e49026121c Mon Sep 17 00:00:00 2001 From: Konstantin Ryzhov Date: Wed, 15 Jul 2020 16:09:03 +0300 Subject: [PATCH 09/10] Grid spacing fix --- js/rex-ui/rapid/Pick/PickPagination.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/rex-ui/rapid/Pick/PickPagination.js b/js/rex-ui/rapid/Pick/PickPagination.js index abed3a8c0..e8d04dd31 100644 --- a/js/rex-ui/rapid/Pick/PickPagination.js +++ b/js/rex-ui/rapid/Pick/PickPagination.js @@ -41,7 +41,7 @@ export const PickPagination = ({ direction="row" justify="flex-end" alignItems="center" - spacing={2} + spacing={1} className={classes.paginationWrapper} > From 82e52dfb4a7296207e2b8f7513cb96543307d00b Mon Sep 17 00:00:00 2001 From: Konstantin Ryzhov Date: Wed, 15 Jul 2020 20:02:25 +0300 Subject: [PATCH 10/10] mui v4 flow-typed update --- js/flow-typed/material-ui-core-4.x.x.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/js/flow-typed/material-ui-core-4.x.x.js b/js/flow-typed/material-ui-core-4.x.x.js index 974a1e0df..f0aa15b02 100644 --- a/js/flow-typed/material-ui-core-4.x.x.js +++ b/js/flow-typed/material-ui-core-4.x.x.js @@ -152,6 +152,10 @@ declare module "@material-ui/styles/styled" { } declare module "@material-ui/styles/StylesProvider" { + import type { AbstractComponent } from "react"; + + declare function StylesProvider(props: {}): AbstractComponent; + declare export default typeof StylesProvider; } declare module "@material-ui/styles/ThemeProvider" { @@ -174,6 +178,7 @@ declare module "@material-ui/styles/useTheme" { declare module "@material-ui/styles/withStyles" { import type { StandardProperties as CSSProperties } from "csstype"; + import type { Theme } from "@material-ui/core/styles"; declare export type ClassNameMap = { [key: string]: string }; @@ -181,7 +186,9 @@ declare module "@material-ui/styles/withStyles" { [key: string]: CSS & CSSProperties, }; - declare export default function withStyles(): any; + declare export default function withStyles( + fn: (theme: Theme) => StyleRules, + ): (C: AbstractComponent) => any; } declare module "@material-ui/styles/withTheme" { @@ -476,6 +483,8 @@ declare module "@material-ui/core" { import typeof _MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; declare export var MuiThemeProvider: _MuiThemeProvider; + import typeof _withStyles from "@material-ui/core/styles/withStyles"; + declare export var AppBar: any; declare export var Avatar: any; declare export var Backdrop: any; @@ -578,6 +587,7 @@ declare module "@material-ui/core" { declare export var Tooltip: any; declare export var withMobileDialog: any; declare export var withWidth: any; + declare export var withStyles: _withStyles; declare export var Zoom: any; }