Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'feature/dnd_v1' into 'master'

Browse Source 
Feature/dnd v1

See merge request theappsmith/internal-tools-client!12
This commit is contained in:
Abhinav Jha 2019-09-03 03:40:53 +00:00
commit 773b6dcd68
69 changed files with 1419 additions and 703 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/.editorconfig
View File

@ -9,4 +9,4 @@ indent_size = 2
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
trim_trailing_whitespace = false

23
app/client/.eslintrc.js Normal file
View File

@ -0,0 +1,23 @@
module.exports = {
parser: '@typescript-eslint/parser',
// plugins: ['@typescript-eslint', 'react'],
extends: [
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
'plugin:@typescript-eslint/recommended'
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: "module", // Allows for the use of imports
ecmaFeatures: {
jsx: true // Allows for the parsing of JSX
}
},
rules: {
"@typescript-eslint/explicit-function-return-type": "off",
},
settings: {
react: {
version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
}
}
};

2
app/client/.nvmrc
View File

@ -1 +1 @@
lts/dubnium
lts/dubnium

3
app/client/.prettierignore
View File

@ -2,4 +2,5 @@ build/
node_modules/
package-lock.json
yarn.lock
package.json
package.json

16
app/client/.prettierrc
View File

@ -1,9 +1,9 @@
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "all",
"parser": "typescript"
}
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "all",
"parser": "typescript"
}

16
app/client/Concepts.md Normal file
View File

@ -0,0 +1,16 @@
Concepts
========
Widgets
- WidgetProperties
- WIDGET_PROPERTY_LABEL (STRING)
- WIDGET_PROPERTY_TYPE (STRING)
- WIDGET_PROPERTY_DEFAULT (STRING)
- WIDGET_PROPERTY_ENABLED (BOOLEAN)
- WIDGET_PROPERTY_META
- ALLOWED_VALUES (LIST<STRING>)
- Components
- WidgetCards
- WIDGET_TYPE (STRING)
- WIDGET_CARD_LABEL (STRING)
- WIDGET_CARD_ENABLED (BOOLEAN)
- WIDGET_CARD_ICON (UTF-16)

9
app/client/package.json
View File

@ -16,6 +16,7 @@
"@types/jest": "^24.0.18",
"@types/lodash": "^4.14.120",
"@types/moment-timezone": "^0.5.10",
"@types/nanoid": "^2.0.0",
"@types/netlify-identity-widget": "^1.4.1",
"@types/node": "^10.12.18",
"@types/react": "^16.8.2",
@ -28,6 +29,7 @@
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
"lodash": "^4.17.11",
"nanoid": "^2.0.4",
"netlify-identity-widget": "^1.5.5",
"node-sass": "^4.11.0",
"normalizr": "^3.3.0",
@ -40,10 +42,11 @@
"react-redux": "^6.0.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "3.1.1",
"react-scripts": "^3.1.1",
"redux": "^4.0.1",
"redux-saga": "^1.0.0",
"styled-components": "^4.1.3",
"ts-loader": "^6.0.4",
"typescript": "^3.2.4"
},
"scripts": {
@ -66,6 +69,10 @@
"not op_mini all"
],
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.0.0",
"@typescript-eslint/parser": "^2.0.0",
"eslint-config-prettier": "^6.1.0",
"eslint-plugin-prettier": "^3.1.0",
"dotenv": "^8.1.0",
"redux-devtools": "^3.5.0"
}

44
app/client/src/App.tsx
View File

@ -1,29 +1,29 @@
import React, { Component } from "react";
import logo from "./assets/images/logo.svg";
import "./App.css";
import "../node_modules/@blueprintjs/core/src/blueprint.scss";
import React, { Component } from "react"
import logo from "./assets/images/logo.svg"
import "./App.css"
import "../node_modules/@blueprintjs/core/src/blueprint.scss"
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>{"src/App.tsx"}</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>{"src/App.tsx"}</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)
}
}
export default App;
export default App

21
app/client/src/actions/pageActions.tsx
View File

@ -4,6 +4,7 @@ import {
} from "../constants/ActionConstants"
import { PageRequest } from "../api/PageApi"
import { RenderMode } from "../constants/WidgetConstants";
import { IWidgetProps } from "../widgets/BaseWidget";
export const fetchPage = (pageId: string, renderMode: RenderMode): ReduxAction<PageRequest> => {
return {
@ -14,3 +15,23 @@ export const fetchPage = (pageId: string, renderMode: RenderMode): ReduxAction<P
}
}
}
export const addWidget = (pageId: string, widget: IWidgetProps): ReduxAction<{ pageId: string, widget: IWidgetProps}> => {
return {
type: ActionTypes.ADD_PAGE_WIDGET,
payload: {
pageId,
widget,
}
}
}
export const removeWidget = (pageId: string, widgetId: string): ReduxAction<{ pageId: string, widgetId: string}> => {
return {
type: ActionTypes.REMOVE_PAGE_WIDGET,
payload: {
pageId,
widgetId,
}
}
}

30
app/client/src/actions/widgetCardsPaneActions.tsx Normal file
View File

@ -0,0 +1,30 @@
import {
ActionTypes
} from "../constants/ActionConstants"
import { IWidgetCardProps } from '../widgets/BaseWidget'
export const fetchWidgetCards = () => {
return {
type: ActionTypes.FETCH_WIDGET_CARDS
}
}
export const errorFetchingWidgetCards = (error: any) => {
return {
type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS,
error
}
}
export const successFetchingWidgetCards = (cards: { [id: string]: IWidgetCardProps[] }) => {
return {
type: ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS,
cards
}
}
export default {
fetchWidgetCards,
errorFetchingWidgetCards,
successFetchingWidgetCards
}

1
app/client/src/api/ApiRequests.tsx
View File

@ -4,7 +4,6 @@ export interface ApiHeaders {
Accept: ContentType
"Content-Type": ContentType
dataType: DataType
"Accept-Encoding": EncodingType
}
export interface ApiRequest {

17
app/client/src/api/PageApi.tsx
View File

@ -1,27 +1,27 @@
import Api from "./Api"
import { IContainerWidgetProps } from "../widgets/ContainerWidget"
import { ContainerWidgetProps } from "../widgets/ContainerWidget"
import { ApiResponse } from "./ApiResponses"
import { RenderMode } from "../constants/WidgetConstants";
export interface PageRequest {
pageId: string,
renderMode: RenderMode
pageId: string;
renderMode: RenderMode;
}
export interface SavePageRequest {
pageWidget: IContainerWidgetProps<any>
pageWidget: ContainerWidgetProps<any>;
}
export interface PageResponse extends ApiResponse {
pageWidget: IContainerWidgetProps<any>
pageWidget: ContainerWidgetProps<any>;
}
export interface SavePageResponse {
pageId: string
pageId: string;
}
class PageApi extends Api {
static url: string = "/page"
static url = "/page"
static fetchPage(pageRequest: PageRequest): Promise<PageResponse> {
return Api.get(PageApi.url + "/" + pageRequest.pageId, pageRequest)
@ -30,7 +30,8 @@ class PageApi extends Api {
static savePage(savePageRequest: SavePageRequest): Promise<PageResponse> {
return Api.post(PageApi.url, undefined, savePageRequest)
}
}
export default PageApi

17
app/client/src/api/WidgetCardsPaneApi.tsx Normal file
View File

@ -0,0 +1,17 @@
import Api from "./Api"
import { IWidgetCardProps } from "../widgets/BaseWidget"
export interface WidgetCardsPaneResponse {
cards : { [id: string]: IWidgetCardProps[]}
}
export interface WidgetCardsPaneRequest {}
class WidgetCardsPaneApi extends Api {
static url: string = "/widgetCards"
static fetchWidgetCards(): Promise<WidgetCardsPaneResponse> {
return Api.get(WidgetCardsPaneApi.url, {})
}
}
export default WidgetCardsPaneApi

BIN
app/client/src/assets/images/blank.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 B

30
app/client/src/constants/ActionConstants.tsx
View File

@ -1,5 +1,5 @@
import ContainerWidget from "../widgets/ContainerWidget"
import { IWidgetProps } from "../widgets/BaseWidget"
// import ContainerWidget from "../widgets/ContainerWidget"
import { IWidgetProps, IWidgetCardProps } from "../widgets/BaseWidget"
export type ActionType =
| "UPDATE_CANVAS"
@ -9,6 +9,16 @@ export type ActionType =
| "REMOVE_WIDGET_CANVAS"
| "LOAD_WIDGET_PANE"
| "FETCH_PAGE"
| "ZOOM_IN_CANVAS"
| "ZOOM_OUT_CANVAS"
| "PUBLISH"
| "UNDO_CANVAS_ACTION"
| "REDO_CANVAS_ACTION"
| "FETCH_WIDGET_CARDS"
| "SUCCESS_FETCHING_WIDGET_CARDS"
| "ERROR_FETCHING_WIDGET_CARDS"
| "ADD_PAGE_WIDGET"
| "REMOVE_PAGE_WIDGET"
export const ActionTypes: { [id: string]: ActionType } = {
UPDATE_CANVAS: "UPDATE_CANVAS",
@ -17,7 +27,17 @@ export const ActionTypes: { [id: string]: ActionType } = {
FETCH_PAGE: "FETCH_PAGE",
DROP_WIDGET_CANVAS: "DROP_WIDGET_CANVAS",
REMOVE_WIDGET_CANVAS: "REMOVE_WIDGET_CANVAS",
LOAD_WIDGET_PANE: "LOAD_WIDGET_PANE"
LOAD_WIDGET_PANE: "LOAD_WIDGET_PANE",
ZOOM_IN_CANVAS: "ZOOM_IN_CANVAS",
ZOOM_OUT_CANVAS: "ZOOM_OUT_CANVAS",
UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION",
REDO_CANVAS_ACTION: "REDO_CANVAS_ACTION",
PUBLISH: "PUBLISH",
FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS",
ERROR_FETCHING_WIDGET_CARDS: "ERROR_FETCHING_WIDGET_CARDS",
ADD_PAGE_WIDGET: "ADD_PAGE_WIDGET",
REMOVE_PAGE_WIDGET: "REMOVE_PAGE_WIDGET"
}
export interface ReduxAction<T> {
@ -33,3 +53,7 @@ export interface LoadCanvasPayload {
export interface LoadWidgetPanePayload {
widgets: IWidgetProps[]
}
export interface LoadWidgetCardsPanePayload {
cards: { [id: string] : IWidgetCardProps[] }
}

9
app/client/src/constants/ApiConstants.tsx
View File

@ -5,12 +5,17 @@ export type ContentType = "application/json" | "application/x-www-form-urlencode
export type EncodingType = "gzip"
export const PROD_BASE_URL = "https://mobtools.com/api/"
export const MOCK_BASE_URL = "https://f78ff9dd-2c08-45f1-9bf9-8c670a1bb696.mock.pstmn.io"
export const STAGE_BASE_URL = "https://14157cb0-190f-4082-a791-886a8df05930.mock.pstmn.io"
export const BASE_URL = STAGE_BASE_URL
export const BASE_URL = MOCK_BASE_URL
export const REQUEST_TIMEOUT_MS = 2000
export const REQUEST_HEADERS: ApiHeaders = {
Accept: "application/json",
"Content-Type": "application/json",
dataType: "json",
"Accept-Encoding": "gzip"
}
export interface APIException {
error: number;
message: string;
}

12
app/client/src/constants/WidgetConstants.tsx
View File

@ -13,6 +13,16 @@ export type WidgetType =
| "NUMERIC_INPUT_WIDGET"
| "CHECKBOX_WIDGET"
| "RADIO_GROUP_WIDGET"
| "INPUT_WIDGET"
| "TOGGLE_WIDGET"
export const WidgetTypes: {[id: string]: WidgetType } = {
BUTTON_WIDGET: "BUTTON_WIDGET",
TEXT_WIDGET: "TEXT_WIDGET",
INPUT_WIDGET: "INPUT_WIDGET",
TOGGLE_WIDGET: "TOGGLE_WIDGET",
}
export type ContainerOrientation = "HORIZONTAL" | "VERTICAL"
export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION"
export type CSSUnit =
@ -47,6 +57,6 @@ export const RenderModes: { [id: string]: RenderMode } = {
export const CSSUnits: { [id: string]: CSSUnit } = {
PIXEL: "px",
RELATIVE_FONTSIZE: "em",
RELATIVE_FONTSIZE: "rem",
RELATIVE_PARENT: "%"
}

34
app/client/src/editorComponents/BaseComponent.tsx
View File

@ -1,32 +1,28 @@
import { Component } from "react"
import React from "react"
import { PositionType, CSSUnit } from "../constants/WidgetConstants"
import { Color } from "../constants/StyleConstants"
/***
* Components are responsible for binding render inputs to corresponding UI SDKs
*/
abstract class BaseComponent<T extends IComponentProps> extends Component<T> {
constructor(componentProps: T) {
super(componentProps)
}
}
abstract class BaseComponent<T extends IComponentProps> extends Component<T> {}
export interface BaseStyle {
height?: number
width?: number
positionType: PositionType
xPosition: number
yPosition: number
xPositionUnit: CSSUnit
yPositionUnit: CSSUnit
heightUnit?: CSSUnit
widthUnit?: CSSUnit
height?: number;
width?: number;
positionType: PositionType;
xPosition: number;
yPosition: number;
xPositionUnit: CSSUnit;
yPositionUnit: CSSUnit;
heightUnit?: CSSUnit;
widthUnit?: CSSUnit;
backgroundColor?: Color;
}
export interface IComponentProps {
widgetId: string
style: BaseStyle
widgetId: string;
style: BaseStyle;
}
export default BaseComponent

16
app/client/src/editorComponents/BreadcrumbsComponent.tsx
View File

@ -3,13 +3,11 @@ import { IComponentProps } from "./BaseComponent"
import {
Boundary,
Breadcrumbs,
Breadcrumb,
Card,
IBreadcrumbProps
} from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
class BreadcrumbsComponent extends React.Component<IBreadcrumbsComponentProps> {
class BreadcrumbsComponent extends React.Component<BreadcrumbsComponentProps> {
render() {
return (
<Container {...this.props}>
@ -24,12 +22,12 @@ class BreadcrumbsComponent extends React.Component<IBreadcrumbsComponentProps> {
}
}
export interface IBreadcrumbsComponentProps extends IComponentProps {
width?: number
collapseFrom?: Boundary
className?: string
minVisibleItems?: number
items?: IBreadcrumbProps[]
export interface BreadcrumbsComponentProps extends IComponentProps {
width?: number;
collapseFrom?: Boundary;
className?: string;
minVisibleItems?: number;
items?: IBreadcrumbProps[];
}
export default BreadcrumbsComponent

2
app/client/src/editorComponents/ButtonComponent.tsx
View File

@ -7,7 +7,7 @@ class ButtonComponent extends React.Component<IButtonComponentProps> {
render() {
return (
<Container {...this.props}>
<Button text={this.props.text} icon={this.props.icon} />
<Button icon={this.props.icon}>{this.props.text}</Button>
</Container>
)
}

43
app/client/src/editorComponents/ContainerComponent.tsx
View File

@ -1,9 +1,12 @@
import BaseComponent, { IComponentProps } from "./BaseComponent"
import { ContainerOrientation } from "../constants/WidgetConstants"
import styled from "../constants/DefaultTheme"
import React from "react"
import { IComponentProps } from "./BaseComponent";
import { ContainerOrientation } from "../constants/WidgetConstants";
import styled from "../constants/DefaultTheme";
import { useDrop } from "react-dnd"
import { WidgetTypes } from "../constants/WidgetConstants"
import { DraggableWidget } from "../widgets/BaseWidget"
import React from "react";
export const Container = styled("div")<IContainerProps>`
export const Container = styled("div")<ContainerProps>`
display: flex;
flex-direction: ${props => {
return props.orientation === "HORIZONTAL" ? "row" : "column"
@ -14,22 +17,30 @@ export const Container = styled("div")<IContainerProps>`
return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative"
}};
left: ${props => {
return props.style.xPosition + props.style.xPositionUnit
return props.style.positionType !== "ABSOLUTE" ? undefined : props.style.xPosition + props.style.xPositionUnit
}};
top: ${props => {
return props.style.yPosition + props.style.yPositionUnit
return props.style.positionType !== "ABSOLUTE" ? undefined : props.style.yPosition + props.style.yPositionUnit
}};
`
class ContainerComponent extends BaseComponent<IContainerProps> {
render() {
return <Container {...this.props}>{this.props.children}</Container>
}
`;
const ContainerComponent = (props: ContainerProps) => {
const addWidgetFn = props.addWidget;
const [, drop] = useDrop({
accept: Object.values(WidgetTypes),
drop(item: DraggableWidget, monitor) {
if (addWidgetFn && monitor.isOver({shallow: true})){
addWidgetFn(item.type);
}
return undefined
},
})
return <Container ref={drop} {...props}>{props.children}</Container>
}
export interface IContainerProps extends IComponentProps {
children?: JSX.Element[] | JSX.Element
orientation?: ContainerOrientation
export interface ContainerProps extends IComponentProps {
children?: JSX.Element[] | JSX.Element;
orientation?: ContainerOrientation;
addWidget?: Function;
}
export default ContainerComponent

52
app/client/src/editorComponents/DraggableComponent.tsx Normal file
View File

@ -0,0 +1,52 @@
import * as React from "react"
import { IWidgetProps, IWidgetState } from "../widgets/BaseWidget"
import { DragSource, DragSourceConnector, DragSourceMonitor } from "react-dnd"
import { ContainerProps } from "./ContainerComponent"
export interface DraggableProps extends ContainerProps {
connectDragSource: Function;
isDragging?: boolean;
}
class DraggableComponent extends React.Component<DraggableProps, IWidgetState> {
render() {
return this.props.connectDragSource(
<div
style={{
display: "flex",
flexDirection: "column",
left: this.props.style
? this.props.style.xPosition + this.props.style.xPositionUnit
: 0,
top: this.props.style
? this.props.style.yPosition + this.props.style.yPositionUnit
: 0
}}
>
{this.props.children}
</div>
)
}
}
const widgetSource = {
beginDrag(props: IWidgetProps) {
return {
widgetId: props.widgetId,
widgetType: props.widgetType
}
}
}
const widgetType = (props: IWidgetProps) => {
return props.widgetType
}
function collect(connect: DragSourceConnector, monitor: DragSourceMonitor) {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}
}
export default DragSource(widgetType, widgetSource, collect)(DraggableComponent)

58
app/client/src/editorComponents/DroppableComponent.tsx Normal file
View File

@ -0,0 +1,58 @@
import * as React from "react"
import { IWidgetProps, IWidgetState } from "../widgets/BaseWidget"
import { DropTargetConnector, DropTargetMonitor, DropTarget, XYCoord } from "react-dnd"
import { ContainerProps } from "./ContainerComponent"
import WidgetFactory from "../utils/WidgetFactory";
export interface DroppableProps extends ContainerProps {
connectDropTarget: Function;
isOver?: boolean;
}
class DroppableComponent extends React.Component<
DroppableProps,
IWidgetState
> {
render() {
return this.props.connectDropTarget(
<div
style={{
position: "absolute",
left: this.props.style.xPosition + this.props.style.xPositionUnit,
height: this.props.style.height,
width: this.props.style.width,
background: this.props.isOver ? "#f4f4f4" : undefined,
top: this.props.style.yPosition + this.props.style.yPositionUnit
}}
>
{ this.props.isOver ? undefined : this.props.children}
</div>
)
}
}
const dropTarget = {
canDrop(props: IWidgetProps) {
return true
},
drop(props: IWidgetProps, monitor: DropTargetMonitor) {
const item = monitor.getItem()
const delta = monitor.getDifferenceFromInitialOffset() as XYCoord
const left = Math.round(item.left + delta.x)
const top = Math.round(item.top + delta.y)
return { left: left, top: top }
}
}
const getDropTypes = (props: IWidgetProps) => {
return WidgetFactory.getWidgetTypes()
}
function collect(connect: DropTargetConnector, monitor: DropTargetMonitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
}
}
export default DropTarget(getDropTypes, dropTarget, collect)(DroppableComponent)

12
app/client/src/editorComponents/IconComponent.tsx
View File

@ -3,7 +3,7 @@ import { IComponentProps } from "./BaseComponent"
import { Icon, Intent } from "@blueprintjs/core"
import { IconName } from "@blueprintjs/icons"
import { Container } from "./ContainerComponent"
class IconComponent extends React.Component<IIconComponentProps> {
class IconComponent extends React.Component<IconComponentProps> {
render() {
return (
<Container {...this.props}>
@ -17,11 +17,11 @@ class IconComponent extends React.Component<IIconComponentProps> {
}
}
export interface IIconComponentProps extends IComponentProps {
iconSize?: number
icon?: IconName
intent?: Intent
ellipsize?: boolean
export interface IconComponentProps extends IComponentProps {
iconSize?: number;
icon?: IconName;
intent?: Intent;
ellipsize?: boolean;
}
export default IconComponent

26
app/client/src/editorComponents/RadioGroupComponent.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import { IComponentProps } from "./BaseComponent"
import { Radio, RadioGroup, IOptionProps } from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
class RadioGroupComponent extends React.Component<IRadioGroupComponentProps> {
class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
render() {
return (
<Container {...this.props}>
@ -25,19 +25,19 @@ class RadioGroupComponent extends React.Component<IRadioGroupComponentProps> {
}
}
export interface IRadioGroupComponentProps extends IComponentProps {
label: string
inline: boolean
selectedValue: string | number
handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void
disabled: boolean
className: string
name: string
options: IOptionProps[]
export interface RadioGroupComponentProps extends IComponentProps {
label: string;
inline: boolean;
selectedValue: string | number;
handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void;
disabled: boolean;
className: string;
name: string;
options: IOptionProps[];
items: Array<{
label: string
value: number | string
}>
label: string;
value: number | string;
}>;
}
export default RadioGroupComponent

4
app/client/src/editorComponents/SpinnerComponent.tsx
View File

@ -3,7 +3,7 @@ import { IComponentProps } from "./BaseComponent"
import { Spinner, Intent } from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
class SpinnerComponent extends React.Component<ISpinnerComponentProps> {
class SpinnerComponent extends React.Component<SpinnerComponentProps> {
render() {
return (
<Container {...this.props}>
@ -17,7 +17,7 @@ class SpinnerComponent extends React.Component<ISpinnerComponentProps> {
}
}
export interface ISpinnerComponentProps extends IComponentProps {
export interface SpinnerComponentProps extends IComponentProps {
size?: number
value?: number
intent?: Intent

4
app/client/src/editorComponents/TagInputComponent.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react"
import { IComponentProps } from "./BaseComponent"
import { Intent, ITagProps, TagInput, HTMLInputProps } from "@blueprintjs/core"
import { Container } from "./ContainerComponent"
class TagInputComponent extends React.Component<ITagInputComponentProps> {
class TagInputComponent extends React.Component<TagInputComponentProps> {
render() {
return (
<Container {...this.props}>
@ -15,7 +15,7 @@ class TagInputComponent extends React.Component<ITagInputComponentProps> {
}
}
export interface ITagInputComponentProps extends IComponentProps {
export interface TagInputComponentProps extends IComponentProps {
addOnPaste?: boolean
className?: string
disabled?: boolean

1
app/client/src/index.css
View File

@ -6,6 +6,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #efefef;
}
code {

31
app/client/src/index.tsx
View File

@ -14,6 +14,10 @@ import WidgetBuilderRegistry from "./utils/WidgetRegistry";
import { ThemeProvider, theme } from "./constants/DefaultTheme";
import createSagaMiddleware from 'redux-saga'
import { rootSaga } from "./sagas"
// import { ActionType, ReduxAction } from "./constants/ActionConstants";
import { DndProvider } from "react-dnd"
import HTML5Backend from "react-dnd-html5-backend"
import { appInitializer } from "./utils/AppsmithUtils";
import ProtectedRoute from "./pages/common/ProtectedRoute";
appInitializer();
@ -22,18 +26,21 @@ const sagaMiddleware = createSagaMiddleware()
const store = createStore(appReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga)
ReactDOM.render(
<Provider store={store}>
<ThemeProvider theme={theme}>
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<ProtectedRoute path="/builder" component={Editor} />
<Route exact path="/login" component={LoginPage} />
<Route component={PageNotFound} />
</Switch>
</BrowserRouter>
</ThemeProvider>
</Provider>,
<DndProvider backend={HTML5Backend}>
<Provider store={store}>
<ThemeProvider theme={theme}>
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route exact path="/builder" component={Editor} />
<Route exact path="/login" component={LoginPage} />
<Route component={PageNotFound} />
</Switch>
</BrowserRouter>
</ThemeProvider>
</Provider>
</DndProvider>,
document.getElementById("root")
);

173
app/client/src/mockResponses/CanvasResponse.tsx
View File

@ -1,173 +0,0 @@
import { IContainerWidgetProps } from "../widgets/ContainerWidget"
import { RenderModes } from "../constants/WidgetConstants"
const CanvasResponse: IContainerWidgetProps<any> = {
widgetId: "0",
widgetType: "CONTAINER_WIDGET",
snapColumns: 10,
snapRows: 10,
topRow: 100,
bottomRow: 700,
leftColumn: 100,
rightColumn: 1000,
parentColumnSpace: 1,
parentRowSpace: 1,
renderMode: RenderModes.CANVAS,
children: [
{
widgetId: "1",
widgetType: "TEXT_WIDGET",
topRow: 2,
leftColumn: 1,
bottomRow: 5,
rightColumn: 3,
text: "Lorem Ipsum asda asd kjhsadjhas kdh kashkjdas kdhas d as",
renderMode: RenderModes.CANVAS
},
{
widgetId: "2",
widgetType: "BUTTON_WIDGET",
topRow: 2,
leftColumn: 4,
bottomRow: 5,
rightColumn: 5,
text: "Lorem Ipsum",
renderMode: RenderModes.CANVAS
},
{
widgetId: "3",
widgetType: "INPUT_GROUP_WIDGET",
topRow: 1,
leftColumn: 1,
bottomRow: 1,
rightColumn: 5,
placeholder: "Lorem Ipsum",
renderMode: RenderModes.CANVAS
},
{
widgetId: "4",
widgetType: "CALLOUT_WIDGET",
topRow: 2,
leftColumn: 8,
bottomRow: 4,
rightColumn: 14,
id: "sample_id",
title: "Visually important content",
description:
"The component is a simple wrapper around the CSS API that provides props for modifiers and optional title element. Any additional HTML props will be spread to the rendered <div> element.",
icon: "",
intent: "success",
renderMode: RenderModes.CANVAS
},
{
widgetId: "5",
widgetType: "ICON_WIDGET",
topRow: 4,
leftColumn: 2,
bottomRow: 5,
rightColumn: 3,
icon: "globe",
iconSize: "20",
intent: "warning",
renderMode: RenderModes.CANVAS
},
{
widgetId: "6",
widgetType: "SPINNER_WIDGET",
topRow: 5,
leftColumn: 6,
bottomRow: 5,
rightColumn: 5,
size: 20
},
{
widgetId: "7",
widgetType: "BREADCRUMBS_WIDGET",
topRow: 6,
leftColumn: 2,
bottomRow: 5,
rightColumn: 5,
width: "100%",
collapseFrom: "start",
className: "breadcrumbs",
size: 20,
renderMode: RenderModes.CANVAS,
items: [
{ icon: "folder-close", text: "All files" },
{ icon: "folder-close", text: "Users" },
{ icon: "folder-close", text: "Janet" },
{ href: "#", icon: "folder-close", text: "Photos" },
{ href: "#", icon: "folder-close", text: "Wednesday" },
{ icon: "document", text: "image.jpg" }
]
},
{
widgetId: "8",
widgetType: "TAG_INPUT_WIDGET",
topRow: 7,
leftColumn: 1,
bottomRow: 5,
rightColumn: 5,
palceholder: "Lorem, Ipsum",
values: ["abx", "somf", "soke"],
renderMode: RenderModes.CANVAS
},
{
widgetId: "9",
widgetType: "NUMERIC_INPUT_WIDGET",
topRow: 4,
leftColumn: 1,
bottomRow: 5,
rightColumn: 5,
palceholder: "Numeric input",
allowNumericCharactersOnly: true,
renderMode: RenderModes.CANVAS
},
{
widgetId: "10",
widgetType: "CHECKBOX_WIDGET",
topRow: 6,
leftColumn: 1,
bottomRow: 5,
rightColumn: 5,
items: [
{
label: "a",
value: 1
},
{
label: "b",
value: 2
},
{
label: "c",
value: 3
}
]
},
{
widgetId: "11",
widgetType: "RADIO_GROUP_WIDGET",
topRow: 6,
leftColumn: 1,
bottomRow: 5,
rightColumn: 5,
items: [
{
label: "a",
value: 1
},
{
label: "b",
value: 2
},
{
label: "c",
value: 3
}
]
}
]
}
export default CanvasResponse

78
app/client/src/mockResponses/WidgetCardsPaneResponse.tsx Normal file
View File

@ -0,0 +1,78 @@
import { WidgetCardsPaneReduxState } from "../reducers/uiReducers/widgetCardsPaneReducer";
const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
cards: {
common: [
{
widgetType: "BUTTON_WIDGET",
icon: "\f243",
label: "Button",
groups: ["common", "form"]
},
{
widgetType: "INPUT_WIDGET",
icon: "\f243",
label: "Input",
groups: ["common", "form"]
},
{
widgetType: "TOGGLE_WIDGET",
icon: "\f205",
label: "Toggle",
groups: ["common", "view"]
}
],
form: [
{
widgetType: "BUTTON_WIDGET",
icon: "\f243",
label: "Button",
groups: ["common", "form"]
},
{
widgetType: "INPUT_WIDGET",
icon: "\f243",
label: "Input",
groups: ["common", "form"]
}
],
view: [
{
widgetType: "TOGGLE_WIDGET",
icon: "\f205",
label: "Toggle",
groups: ["common", "view"]
}
]
}
};
// const WidgetPaneResponse: WidgetPaneReduxState = {
// widgets: [
// {
// widgetType: "BUTTON_WIDGET",
// text: "Lorem Ipsum",
// renderMode: RenderModes.COMPONENT_PANE,
// bottomRow: 50,
// widgetId: "wp1",
// rightColumn: 200
// },
// {
// widgetType: "TEXT_WIDGET",
// text: "Lorem Ipsum",
// renderMode: RenderModes.COMPONENT_PANE,
// bottomRow: 50,
// widgetId: "wp2",
// rightColumn: 200
// },
// {
// widgetType: "SPINNER_WIDGET",
// renderMode: RenderModes.COMPONENT_PANE,
// backgroundColor: "#434343",
// bottomRow: 50,
// widgetId: "wp3",
// rightColumn: 200
// }
// ]
// }
export default WidgetCardsPaneResponse;

33
app/client/src/mockResponses/WidgetPaneResponse.tsx
View File

@ -1,33 +0,0 @@
import { WidgetPaneReduxState } from "../reducers/uiReducers/widgetPaneReducer"
import { RenderModes } from "../constants/WidgetConstants"
const WidgetPaneResponse: WidgetPaneReduxState = {
widgets: [
{
widgetType: "BUTTON_WIDGET",
text: "Lorem Ipsum",
renderMode: RenderModes.COMPONENT_PANE,
bottomRow: 50,
widgetId: "1",
rightColumn: 200
},
{
widgetType: "TEXT_WIDGET",
text: "Lorem Ipsum",
renderMode: RenderModes.COMPONENT_PANE,
bottomRow: 50,
widgetId: "2",
rightColumn: 200
},
{
widgetType: "SPINNER_WIDGET",
renderMode: RenderModes.COMPONENT_PANE,
backgroundColor: "#434343",
bottomRow: 50,
widgetId: "3",
rightColumn: 200
}
]
}
export default WidgetPaneResponse

10
app/client/src/normalizers/CanvasWidgetsNormalizer.tsx
View File

@ -1,10 +1,10 @@
import { normalize, schema, denormalize } from 'normalizr';
import { PageResponse } from '../api/PageApi';
import { IContainerWidgetProps } from '../widgets/ContainerWidget';
import { ContainerWidgetProps } from '../widgets/ContainerWidget';
export const widgetSchema = new schema.Entity('canvasWidgets', { }, { idAttribute: "widgetId" }, );
const widgets = new schema.Array(widgetSchema);
widgetSchema.define({ children: widgets });
export const widgetSchema = new schema.Entity('canvasWidgets', { }, { idAttribute: "widgetId" });
// const widgets = new schema.Array(widgetSchema);
widgetSchema.define({ children: [widgetSchema] });
class CanvasWidgetsNormalizer {
@ -12,7 +12,7 @@ class CanvasWidgetsNormalizer {
return normalize(pageResponse.pageWidget, widgetSchema)
}
static denormalize(pageWidgetId: string, entities: any): IContainerWidgetProps<any> {
static denormalize(pageWidgetId: string, entities: any): ContainerWidgetProps<any> {
return denormalize(pageWidgetId, widgetSchema, entities)
}

106
app/client/src/pages/Editor/Canvas.tsx
View File

@ -1,46 +1,82 @@
import React, { Component } from "react"
import { connect } from "react-redux"
import { AppState } from "../../reducers"
import React, { MutableRefObject, useLayoutEffect } from "react"
import styled from "styled-components"
import WidgetFactory from "../../utils/WidgetFactory"
import CanvasWidgetsNormalizer, { widgetSchema } from "../../normalizers/CanvasWidgetsNormalizer";
import { IContainerWidgetProps } from "../../widgets/ContainerWidget";
import { fetchPage } from "../../actions/pageActions";
import { RenderModes } from "../../constants/WidgetConstants";
import { WidgetTypes } from "../../constants/WidgetConstants"
import { DraggableWidget } from "../../widgets/BaseWidget"
import { useDrop } from "react-dnd"
import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
import EditorDragLayer from "./EditorDragLayer"
class Canvas extends Component<{ pageWidget: IContainerWidgetProps<any>, fetchPage: Function }> {
const ArtBoardBackgroundMask = styled.div`
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -10;
`;
componentDidMount() {
this.props.fetchPage("123")
}
const ArtBoard = styled.div<ArtBoardProps>`
width: 100%;
height: 100%;
position:relative;
overflow: auto;
background: linear-gradient(
90deg,
transparent,
transparent 1px,
#ffffff 1px,
#ffffff 63px,
transparent 63px,
transparent 100%),
linear-gradient(
transparent,
transparent 1px,
#ffffff 1px,
#ffffff 63px,
transparent 63px,
transparent 100%), black;
background-size: 64px 64px;
background-position:0 0;
`;
render() {
const pageWidget = this.props.pageWidget
return (
<div>
{pageWidget
? WidgetFactory.createWidget(pageWidget)
: undefined}
</div>
)
}
interface CanvasProps {
pageWidget: ContainerWidgetProps<any>;
addWidget: Function;
}
const mapStateToProps = (state: AppState, props: any) => {
const pageWidget = CanvasWidgetsNormalizer.denormalize(state.ui.canvas.pageWidgetId, state.entities)
return {
pageWidget: pageWidget
}
interface ArtBoardProps {
cellSize: string;
}
const mapDispatchToProps = (dispatch: any) => {
return {
fetchPage: (pageId: string) => {
return dispatch(fetchPage(pageId, RenderModes.CANVAS))
const Canvas = (props: CanvasProps) => {
const [width, setWidth] = React.useState(1)
const artBoardMask: MutableRefObject<HTMLDivElement | null> = React.useRef(null)
const [, drop] = useDrop({
accept: Object.values(WidgetTypes),
drop(item: DraggableWidget) {
props.addWidget(item.type, item.key);
return undefined
},
})
useLayoutEffect(()=> {
const el = artBoardMask.current
if (el) {
const rect = el.getBoundingClientRect()
setWidth(rect.width)
}
}
}, [setWidth])
return (
<React.Fragment>
<EditorDragLayer />
<ArtBoard ref={drop} cellSize={(Math.floor(width / 16) - 1)+ "px"}>
<ArtBoardBackgroundMask ref={artBoardMask}></ArtBoardBackgroundMask>
{props.pageWidget && WidgetFactory.createWidget(props.pageWidget)}
</ArtBoard>
</React.Fragment>
)
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Canvas)
export default Canvas

88
app/client/src/pages/Editor/EditorDragLayer.tsx Normal file
View File

@ -0,0 +1,88 @@
import React from 'react'
import styled from 'styled-components'
import { XYCoord, useDragLayer } from 'react-dnd'
import snapToGrid from './snapToGrid'
import WidgetFactory from '../../utils/WidgetFactory';
import { RenderModes, WidgetType } from '../../constants/WidgetConstants';
const WrappedDragLayer = styled.div`
position: absolute;
pointer-events: none;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 10px solid #000;
`;
function getItemStyles(
initialOffset: XYCoord | null,
currentOffset: XYCoord | null
) {
if (!initialOffset || !currentOffset) {
return {
display: 'none',
}
}
let { x, y } = currentOffset
x -= initialOffset.x
y -= initialOffset.y
;[x, y] = snapToGrid(64, x, y)
x += initialOffset.x
y += initialOffset.y
const transform = `translate(${x}px, ${y}px)`
return {
transform,
WebkitTransform: transform,
}
}
const EditorDragLayer: React.FC = () => {
const {
itemType,
isDragging,
item,
initialOffset,
currentOffset,
} = useDragLayer(monitor => ({
item: monitor.getItem(),
itemType: monitor.getItemType(),
initialOffset: monitor.getInitialSourceClientOffset(),
currentOffset: monitor.getSourceClientOffset(),
isDragging: monitor.isDragging(),
}))
function renderItem() {
return WidgetFactory.createWidget({
widgetType: itemType as WidgetType,
widgetId: item.key,
topRow: 10,
leftColumn: 10,
bottomRow: 14,
rightColumn: 20,
parentColumnSpace: 1,
parentRowSpace: 1,
renderMode: RenderModes.CANVAS
})
}
if (!isDragging) {
return null
}
return (
<WrappedDragLayer>
<div
style={getItemStyles(initialOffset, currentOffset)}
>
{renderItem()}
</div>
</WrappedDragLayer>
)
}
export default EditorDragLayer

34
app/client/src/pages/Editor/EditorHeader.tsx Normal file
View File

@ -0,0 +1,34 @@
import React, { Component } from "react"
import styled from "styled-components"
import { connect } from "react-redux"
import { AppState } from "../../reducers"
import { EditorHeaderReduxState } from "../../reducers/uiReducers/editorHeaderReducer";
const Header = styled.header`
height: 50px;
box-shadow: 0px 0px 3px #ccc;
background: #fff;
`;
class EditorHeader extends Component<EditorHeaderReduxState> {
render() {
return (
<Header>
</Header>
)
}
}
const mapStateToProps = (state: AppState, props: any): EditorHeaderReduxState => {
return {}
}
const mapDispatchToProps = (dispatch: any) => {
return {}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(EditorHeader)

76
app/client/src/pages/Editor/WidgetCard.tsx Normal file
View File

@ -0,0 +1,76 @@
import React, { useState, useLayoutEffect, MutableRefObject } from 'react';
import { useDrag, DragSourceMonitor, DragPreviewImage } from 'react-dnd'
import blankImage from "../../assets/images/blank.png"
import { IWidgetCardProps } from '../../widgets/BaseWidget'
import styled from 'styled-components'
import { Icon } from '@blueprintjs/core'
import { IconNames } from '@blueprintjs/icons'
import { generateReactKey } from "../../utils/generators"
type WidgetCardProps = {
details: IWidgetCardProps;
}
export const Wrapper = styled.div`
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex: 1;
padding: 10px 5px 10px 5px;
margin: 0px 10px 0 0;
border-radius: 5px;
background: #eee
border: 1px solid #eee;
&:hover{
background: #fff;
cursor: grab;
}
`;
export const IconLabel = styled.h5`
text-align: center;
padding: 10px 0;
margin: 0;
text-transform: uppercase;
font-weight: normal;
flex-shrink: 1;
font-size: 0.5rem;
`;
/* eslint-disable @typescript-eslint/no-unused-vars */
const WidgetCard = (props: WidgetCardProps) => {
const [initialOffset, setInitialOffset] = useState({ x: 0, y: 0})
const [{ isDragging }, drag, preview] = useDrag({
item: { type: props.details.widgetType, widget: props.details, key: generateReactKey(), initialOffset},
collect: (monitor: DragSourceMonitor) => ({
isDragging: monitor.isDragging(),
}),
})
const card: MutableRefObject<HTMLDivElement | null> = React.useRef(null)
useLayoutEffect(()=> {
const el = card.current
if (el) {
const rect = el.getBoundingClientRect()
setInitialOffset({
x: Math.ceil(rect.left),
y: Math.ceil(rect.top)
})
}
}, [setInitialOffset])
return (
<React.Fragment >
<DragPreviewImage connect={preview} src={blankImage} />
<Wrapper ref={drag}>
<div ref={card}>
<Icon icon={IconNames.SEGMENTED_CONTROL} iconSize={20} />
<IconLabel>{props.details.label}</IconLabel>
</div>
</Wrapper>
</React.Fragment>
)
}
export default WidgetCard

42
app/client/src/pages/Editor/WidgetCardsPane.tsx Normal file
View File

@ -0,0 +1,42 @@
import React from "react"
import WidgetCard from "./WidgetCard"
import styled from "styled-components"
import { IWidgetCardProps } from "../../widgets/BaseWidget"
type WidgetCardPaneProps = {
cards: { [id: string]: IWidgetCardProps[]};
}
const CardsPaneWrapper = styled.div`
width: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 3px #ccc;
padding: 5px 10px;
`;
const CardsWrapper = styled.div`
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
`;
const WidgetCardsPane: React.SFC<WidgetCardPaneProps> = (props: WidgetCardPaneProps) => {
const groups = Object.keys(props.cards)
return (
<CardsPaneWrapper>
{
groups.map((group: string) =>
<React.Fragment key={group}>
<h5>{group}</h5>
<CardsWrapper>
{ props.cards[group].map((card: IWidgetCardProps) => <WidgetCard details={card} key={card.widgetType} />) }
</CardsWrapper>
</React.Fragment>
)
}
</CardsPaneWrapper>
)
}
export default WidgetCardsPane

31
app/client/src/pages/Editor/WidgetPane.tsx
View File

@ -1,31 +0,0 @@
import React, { Component } from "react"
import { connect } from "react-redux"
import { AppState } from "../../reducers"
import WidgetFactory from "../../utils/WidgetFactory"
import { WidgetPaneReduxState } from "../../reducers/uiReducers/widgetPaneReducer";
import { IWidgetProps } from "../../widgets/BaseWidget";
class WidgetPane extends Component<WidgetPaneReduxState> {
render() {
return (<div style={{ height: "600px", width: "300px", backgroundColor: "#f4f4f4", position: "absolute", top: 100 }}>
{this.props.widgets.map((widget: IWidgetProps) => {
return WidgetFactory.createWidget(widget)
})}
</div>)
}
}
const mapStateToProps = (state: AppState, props: any): WidgetPaneReduxState => {
return {
widgets: state.ui.widgetPane.widgets
}
}
const mapDispatchToProps = (dispatch: any) => {
return {}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(WidgetPane)

110
app/client/src/pages/Editor/index.tsx
View File

@ -1,16 +1,110 @@
import React, { Component } from "react"
import { connect } from "react-redux"
import styled from "styled-components"
import Canvas from "./Canvas"
import WidgetPane from "./WidgetPane"
import { IWidgetCardProps, IWidgetProps } from '../../widgets/BaseWidget'
import { AppState } from "../../reducers"
import { EditorReduxState } from "../../reducers/uiReducers/editorReducer"
import WidgetCardsPane from "./WidgetCardsPane"
import EditorHeader from "./EditorHeader"
import { WidgetType } from "../../constants/WidgetConstants"
import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer"
import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
import { fetchPage, addWidget } from "../../actions/pageActions"
import { RenderModes } from "../../constants/WidgetConstants"
// import EditorDragLayer from "./EditorDragLayer"
class Editor extends Component {
render() {
const CanvasContainer = styled.section`
height: 100%;
width: 100%;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin: 0px 10px;
&:before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 1000;
pointer-events: none;
}
`;
const EditorWrapper = styled.div`
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
width: 100vw;
overflow: hidden;
padding: 10px;
height: calc(100vh - 60px);
`;
type EditorProps = {
pageWidget: ContainerWidgetProps<any> | any;
fetchCanvasWidgets: Function;
cards: { [id: string]: IWidgetCardProps[] } | any;
addPageWidget: Function;
page: string;
}
class Editor extends Component<EditorProps> {
componentDidMount() {
this.props.fetchCanvasWidgets("1")
}
addWidgetToCanvas = (widgetType: WidgetType, key: string): void => {
this.props.addPageWidget("1", {
key: key,
bottomRow: 9,
leftColumn: 1,
parentColumnSpace: 90,
parentRowSpace: 50,
renderMode: RenderModes.CANVAS,
rightColumn: 3,
snapColumns: 20,
snapRows: 20,
children: [],
topRow: 1,
widgetId: key,
widgetType: widgetType
})
}
public render() {
return (
<div style={{ display: "flex", flexDirection: "row-reverse" }}>
<Canvas />
<WidgetPane />
</div>
<React.Fragment>
<EditorHeader></EditorHeader>
<EditorWrapper>
<WidgetCardsPane cards={this.props.cards} />
<CanvasContainer>
<Canvas pageWidget={this.props.pageWidget} addWidget={this.addWidgetToCanvas} />
</CanvasContainer>
</EditorWrapper>
</React.Fragment>
)
}
}
export default Editor
const mapStateToProps = (state: AppState, props: EditorProps): EditorReduxState => {
const pageWidget = CanvasWidgetsNormalizer.denormalize(
state.ui.canvas.pageWidgetId,
state.entities
)
return {
cards: state.ui.widgetCardsPane.cards,
pageWidget,
}
}
const mapDispatchToProps = (dispatch: any) => {
return {
fetchCanvasWidgets: (pageId: string) => dispatch(fetchPage(pageId, RenderModes.CANVAS)),
addPageWidget: (pageId: string, widgetProps: IWidgetProps) => dispatch(addWidget(pageId, widgetProps))
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Editor)

5
app/client/src/pages/Editor/snapToGrid.ts Normal file
View File

@ -0,0 +1,5 @@
export default function snapToGrid(cellSize: number, x: number, y: number) {
const snappedX = Math.round(x / cellSize) * cellSize
const snappedY = Math.round(y / cellSize) * cellSize
return [snappedX, snappedY]
}

36
app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx
View File

@ -5,20 +5,13 @@ import {
ReduxAction
} from "../../constants/ActionConstants"
import { IWidgetProps } from "../../widgets/BaseWidget"
import { RenderModes } from "../../constants/WidgetConstants"
import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer";
const initialState: CanvasWidgetsReduxState = {
"0": {
widgetId: "0",
widgetType: "CONTAINER_WIDGET",
topRow: 100,
bottomRow: 700,
leftColumn: 100,
rightColumn: 800,
parentColumnSpace: 1,
parentRowSpace: 1,
renderMode: RenderModes.CANVAS
}
const initialState: CanvasWidgetsReduxState = {}
export interface IFlattenedWidgetProps extends IWidgetProps {
children?: string[];
}
const canvasWidgetsReducer = createReducer(initialState, {
@ -27,11 +20,26 @@ const canvasWidgetsReducer = createReducer(initialState, {
action: ReduxAction<LoadCanvasPayload>
) => {
return { ...action.payload.widgets }
},
[ActionTypes.ADD_PAGE_WIDGET]: (
state: CanvasWidgetsReduxState,
action: ReduxAction<{pageId: string, widget: IWidgetProps}>
) => {
const widget = action.payload.widget
const widgetTree = CanvasWidgetsNormalizer.denormalize("0", { canvasWidgets: state })
const children = widgetTree.children || []
children.push(widget)
widgetTree.children = children
const newState = CanvasWidgetsNormalizer.normalize({
responseMeta: {},
pageWidget: widgetTree
}).entities
return newState.canvasWidgets
}
})
export interface CanvasWidgetsReduxState {
[widgetId: string]: IWidgetProps
[widgetId: string]: IFlattenedWidgetProps;
}
export default canvasWidgetsReducer

8
app/client/src/reducers/index.tsx
View File

@ -3,7 +3,9 @@ import entityReducer from "./entityReducers"
import uiReducer from "./uiReducers"
import { CanvasReduxState } from "./uiReducers/canvasReducer"
import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers"
import { WidgetPaneReduxState } from "./uiReducers/widgetPaneReducer"
import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer"
import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer"
import { EditorReduxState } from "./uiReducers/editorReducer"
const appReducer = combineReducers({
entities: entityReducer,
@ -15,7 +17,9 @@ export default appReducer
export interface AppState {
ui: {
canvas: CanvasReduxState
widgetPane: WidgetPaneReduxState
widgetCardsPane: WidgetCardsPaneReduxState
editorHeader: EditorHeaderReduxState
editor: EditorReduxState
}
entities: {
canvasWidgets: CanvasWidgetsReduxState

9
app/client/src/reducers/uiReducers/editorHeaderReducer.tsx Normal file
View File

@ -0,0 +1,9 @@
import { createReducer } from "../../utils/AppsmithUtils"
const initialState: EditorHeaderReduxState = {}
const editorHeaderReducer = createReducer(initialState, {})
export interface EditorHeaderReduxState {}
export default editorHeaderReducer

41
app/client/src/reducers/uiReducers/editorReducer.tsx Normal file
View File

@ -0,0 +1,41 @@
import { createReducer } from "../../utils/AppsmithUtils"
import {
ActionTypes,
ReduxAction,
LoadCanvasPayload,
LoadWidgetCardsPanePayload
} from "../../constants/ActionConstants"
import { IWidgetCardProps, IWidgetProps } from "../../widgets/BaseWidget"
import { ContainerWidgetProps } from "../../widgets/ContainerWidget"
const initialState: EditorReduxState = {}
const editorReducer = createReducer(initialState, {
[ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS]: (
state: EditorReduxState,
action: ReduxAction<LoadWidgetCardsPanePayload>
) => {
return { ...state.pageWidget, ...action.payload }
},
[ActionTypes.ADD_PAGE_WIDGET]: (
state: EditorReduxState,
action: ReduxAction<{pageId: string, widget: IWidgetProps}>
) => {
return state
},
[ActionTypes.UPDATE_CANVAS]: (
state: EditorReduxState,
action: ReduxAction<LoadCanvasPayload>
) => {
return { pageWidgetId: action.payload.pageWidgetId }
}
})
export interface EditorReduxState {
pageWidget?: ContainerWidgetProps<any>;
cards?: {
[id: string]: IWidgetCardProps[];
};
}
export default editorReducer

6
app/client/src/reducers/uiReducers/index.tsx
View File

@ -1,6 +1,8 @@
import { combineReducers } from "redux"
import canvasReducer from "./canvasReducer"
import widgetPaneReducer from "./widgetPaneReducer";
import widgetCardsPaneReducer from "./widgetCardsPaneReducer"
import editorHeaderReducer from "./editorHeaderReducer"
import editorReducer from "./editorReducer"
const uiReducer = combineReducers({ canvas: canvasReducer, widgetPane: widgetPaneReducer })
const uiReducer = combineReducers({ canvas: canvasReducer, widgetCardsPane: widgetCardsPaneReducer, editorHeader: editorHeaderReducer, editor: editorReducer })
export default uiReducer

27
app/client/src/reducers/uiReducers/widgetCardsPaneReducer.tsx Normal file
View File

@ -0,0 +1,27 @@
import { createReducer } from "../../utils/AppsmithUtils"
import {
ActionTypes,
ReduxAction,
LoadWidgetCardsPanePayload
} from "../../constants/ActionConstants"
import { IWidgetCardProps } from "../../widgets/BaseWidget";
import WidgetCardsPaneResponse from "../../mockResponses/WidgetCardsPaneResponse"
const initialState: WidgetCardsPaneReduxState = WidgetCardsPaneResponse
const widgetCardsPaneReducer = createReducer(initialState, {
[ActionTypes.ERROR_FETCHING_WIDGET_CARDS]: (
state: WidgetCardsPaneReduxState,
action: ReduxAction<LoadWidgetCardsPanePayload>
) => {
return { cards: action.payload.cards }
}
})
export interface WidgetCardsPaneReduxState {
cards: {
[id: string]: IWidgetCardProps[]
}
}
export default widgetCardsPaneReducer

25
app/client/src/reducers/uiReducers/widgetPaneReducer.tsx
View File

@ -1,25 +0,0 @@
import { createReducer } from "../../utils/AppsmithUtils"
import {
ActionTypes,
ReduxAction,
LoadWidgetPanePayload
} from "../../constants/ActionConstants"
import { IWidgetProps } from "../../widgets/BaseWidget";
import WidgetPaneResponse from "../../mockResponses/WidgetPaneResponse"
const initialState: WidgetPaneReduxState = WidgetPaneResponse
const widgetPaneReducer = createReducer(initialState, {
// [ActionTypes.LOAD_CANVAS]: (
// state: WidgetPaneReduxState,
// action: ReduxAction<LoadWidgetPanePayload>
// ) => {
// return { widgets: action.payload.widgets }
// }
})
export interface WidgetPaneReduxState {
widgets: (IWidgetProps | any)[]
}
export default widgetPaneReducer

20
app/client/src/sagas/PageSagas.tsx
View File

@ -1,19 +1,23 @@
import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer"
import { ActionTypes, ReduxAction } from "../constants/ActionConstants"
import PageApi, { PageResponse, PageRequest } from "../api/PageApi"
import { call, put, takeLeading, all, takeEvery } from "redux-saga/effects"
import { call, put, takeEvery } from "redux-saga/effects"
import { RenderModes } from "../constants/WidgetConstants"
export function* fetchPageSaga(pageRequestAction: ReduxAction<PageRequest>) {
const pageRequest = pageRequestAction.payload
const pageResponse: PageResponse = yield call(PageApi.fetchPage, pageRequest)
if (pageRequest.renderMode === RenderModes.CANVAS) {
const normalizedResponse = CanvasWidgetsNormalizer.normalize(pageResponse)
const payload = {
pageWidgetId: normalizedResponse.result,
widgets: normalizedResponse.entities.canvasWidgets
try {
const pageResponse: PageResponse = yield call(PageApi.fetchPage, pageRequest)
if (pageRequest.renderMode === RenderModes.CANVAS) {
const normalizedResponse = CanvasWidgetsNormalizer.normalize(pageResponse)
const payload = {
pageWidgetId: normalizedResponse.result,
widgets: normalizedResponse.entities.canvasWidgets
}
yield put({ type: ActionTypes.UPDATE_CANVAS, payload })
}
yield put({ type: ActionTypes.UPDATE_CANVAS, payload })
} catch(err){
//TODO(abhinav): REFACTOR THIS
}
}

19
app/client/src/sagas/WidgetCardsPaneSagas.tsx Normal file
View File

@ -0,0 +1,19 @@
// import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer"
import { ActionTypes, ReduxAction } from "../constants/ActionConstants"
import WidgetCardsPaneApi, { WidgetCardsPaneResponse, WidgetCardsPaneRequest } from "../api/WidgetCardsPaneApi"
import { successFetchingWidgetCards } from "../actions/widgetCardsPaneActions"
import { call, put, takeLatest } from "redux-saga/effects"
export function* fetchWidgetCards(widgetCardsRequestAction: ReduxAction<WidgetCardsPaneRequest>) {
try {
const widgetCards: WidgetCardsPaneResponse = yield call(WidgetCardsPaneApi.fetchWidgetCards)
yield put(successFetchingWidgetCards(widgetCards.cards))
} catch(err) {
yield put({ type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS, err})
}
}
export function* fetchWidgetCardsSaga() {
yield takeLatest(ActionTypes.FETCH_WIDGET_CARDS, fetchWidgetCards)
}

3
app/client/src/sagas/index.tsx
View File

@ -1,6 +1,7 @@
import { all } from "redux-saga/effects"
import { watchFetchPage } from "../sagas/PageSagas"
import { fetchWidgetCardsSaga } from './WidgetCardsPaneSagas'
export function* rootSaga() {
yield all([watchFetchPage()])
yield all([watchFetchPage(), fetchWidgetCardsSaga()])
}

10
app/client/src/utils/WidgetFactory.tsx
View File

@ -15,17 +15,21 @@ class WidgetFactory {
if (widgetBuilder)
return widgetBuilder.buildWidget(widgetData)
else {
const ex: IWidgetCreationException = {
const ex: WidgetCreationException = {
message: "Widget Builder not registered for widget type" + widgetData.widgetType
}
throw ex
}
}
static getWidgetTypes(): WidgetType[] {
return Array.from(this.widgetMap.keys());
}
}
export interface IWidgetCreationException {
message: string
export interface WidgetCreationException {
message: string;
}
export default WidgetFactory

51
app/client/src/utils/WidgetRegistry.tsx
View File

@ -1,104 +1,105 @@
import BaseWidget, { IWidgetProps } from "../widgets/BaseWidget"
import { IWidgetProps } from "../widgets/BaseWidget"
import ContainerWidget, {
IContainerWidgetProps
ContainerWidgetProps
} from "../widgets/ContainerWidget"
import TextWidget, { ITextWidgetProps } from "../widgets/TextWidget"
import TextWidget, { TextWidgetProps } from "../widgets/TextWidget"
import InputGroupWidget, {
IInputGroupWidgetProps
InputGroupWidgetProps
} from "../widgets/InputGroupWidget"
import CalloutWidget, { ICalloutWidgetProps } from "../widgets/CalloutWidget"
import IconWidget, { IIconWidgetProps } from "../widgets/IconWidget"
import SpinnerWidget, { ISpinnerWidgetProps } from "../widgets/SpinnerWidget"
import CalloutWidget, { CalloutWidgetProps } from "../widgets/CalloutWidget"
import IconWidget, { IconWidgetProps } from "../widgets/IconWidget"
import SpinnerWidget, { SpinnerWidgetProps } from "../widgets/SpinnerWidget"
import BreadcrumbsWidget, {
IBreadcrumbsWidgetProps
BreadcrumbsWidgetProps
} from "../widgets/BreadcrumbsWidget"
import TagInputWidget, { ITagInputWidgetProps } from "../widgets/TagInputWidget"
import TagInputWidget, { TagInputWidgetProps } from "../widgets/TagInputWidget"
import NumericInputWidget, {
INumericInputWidgetProps
NumericInputWidgetProps
} from "../widgets/NumericInputWidget"
import CheckboxWidget, { ICheckboxWidgetProps } from "../widgets/CheckboxWidget"
import CheckboxWidget, { CheckboxWidgetProps } from "../widgets/CheckboxWidget"
import RadioGroupWidget, {
IRadioGroupWidgetProps
RadioGroupWidgetProps
} from "../widgets/RadioGroupWidget"
import WidgetFactory from "./WidgetFactory"
import React from "react"
import ButtonWidget, { IButtonWidgetProps } from "../widgets/ButtonWidget"
import ButtonWidget, { ButtonWidgetProps } from "../widgets/ButtonWidget"
class WidgetBuilderRegistry {
static registerWidgetBuilders() {
WidgetFactory.registerWidgetBuilder("CONTAINER_WIDGET", {
buildWidget(
widgetData: IContainerWidgetProps<IWidgetProps>
widgetData: ContainerWidgetProps<IWidgetProps>
): JSX.Element {
return <ContainerWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("TEXT_WIDGET", {
buildWidget(widgetData: ITextWidgetProps): JSX.Element {
buildWidget(widgetData: TextWidgetProps): JSX.Element {
return <TextWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("BUTTON_WIDGET", {
buildWidget(widgetData: IButtonWidgetProps): JSX.Element {
buildWidget(widgetData: ButtonWidgetProps): JSX.Element {
return <ButtonWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("CALLOUT_WIDGET", {
buildWidget(widgetData: ICalloutWidgetProps): JSX.Element {
buildWidget(widgetData: CalloutWidgetProps): JSX.Element {
return <CalloutWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("ICON_WIDGET", {
buildWidget(widgetData: IIconWidgetProps): JSX.Element {
buildWidget(widgetData: IconWidgetProps): JSX.Element {
return <IconWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("SPINNER_WIDGET", {
buildWidget(widgetData: ISpinnerWidgetProps): JSX.Element {
buildWidget(widgetData: SpinnerWidgetProps): JSX.Element {
return <SpinnerWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("INPUT_GROUP_WIDGET", {
buildWidget(widgetData: IInputGroupWidgetProps): JSX.Element {
buildWidget(widgetData: InputGroupWidgetProps): JSX.Element {
return <InputGroupWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("BREADCRUMBS_WIDGET", {
buildWidget(widgetData: IBreadcrumbsWidgetProps): JSX.Element {
buildWidget(widgetData: BreadcrumbsWidgetProps): JSX.Element {
return <BreadcrumbsWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("TAG_INPUT_WIDGET", {
buildWidget(widgetData: ITagInputWidgetProps): JSX.Element {
buildWidget(widgetData: TagInputWidgetProps): JSX.Element {
return <TagInputWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("NUMERIC_INPUT_WIDGET", {
buildWidget(widgetData: INumericInputWidgetProps): JSX.Element {
buildWidget(widgetData: NumericInputWidgetProps): JSX.Element {
return <NumericInputWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("CHECKBOX_WIDGET", {
buildWidget(widgetData: ICheckboxWidgetProps): JSX.Element {
buildWidget(widgetData: CheckboxWidgetProps): JSX.Element {
return <CheckboxWidget {...widgetData} />
}
})
WidgetFactory.registerWidgetBuilder("RADIO_GROUP_WIDGET", {
buildWidget(widgetData: IRadioGroupWidgetProps): JSX.Element {
buildWidget(widgetData: RadioGroupWidgetProps): JSX.Element {
return <RadioGroupWidget {...widgetData} />
}
})
}
}

11
app/client/src/utils/generators.tsx Normal file
View File

@ -0,0 +1,11 @@
import generate from 'nanoid/generate'
const ALPHABET = "1234567890abcdefghijklmnopqrstuvwxyz"
export const generateReactKey = ({prefix = ""}: {prefix?: string}={}): string => {
return prefix + generate(ALPHABET, 10)
}
export default {
generateReactKey
}

68
app/client/src/widgets/BaseWidget.tsx
View File

@ -12,18 +12,22 @@ import {
import { Component } from "react"
import { BaseStyle } from "../editorComponents/BaseComponent"
import _ from "lodash"
import React from "react"
import DraggableComponent from "../editorComponents/DraggableComponent"
abstract class BaseWidget<
T extends IWidgetProps,
K extends IWidgetState
> extends Component<T, Partial<K>> {
> extends Component<T, K> {
constructor(props: T) {
super(props)
const initialState: Partial<K> = {
const initialState: IWidgetState = {
height: 0,
width: 0
}
initialState.height = 0
initialState.width = 0
this.state = initialState
this.state = initialState as K
}
componentDidMount(): void {
@ -93,7 +97,17 @@ abstract class BaseWidget<
}
getComponentPaneView(): JSX.Element {
return this.getPageView()
return (
<DraggableComponent
{...this.props}
style={{
...this.getPositionStyle()
}}
orientation={"VERTICAL"}
>
{this.getPageView()}
</DraggableComponent>
)
}
abstract getWidgetType(): WidgetType
@ -101,7 +115,7 @@ abstract class BaseWidget<
getPositionStyle(): BaseStyle {
return {
positionType:
this.props.renderMode === RenderModes.COMPONENT_PANE
this.props.renderMode !== RenderModes.PAGE
? "CONTAINER_DIRECTION"
: "ABSOLUTE",
height: this.state.height,
@ -114,33 +128,47 @@ abstract class BaseWidget<
}
static defaultProps: Partial<IWidgetProps> = {
parentRowSpace: 1,
parentColumnSpace: 1,
parentRowSpace: 64,
parentColumnSpace: 64,
topRow: 0,
leftColumn: 0
}
}
export interface IWidgetState {
height: number
width: number
height: number;
width: number;
}
export interface DraggableWidget {
type: string;
widget: IWidgetProps;
key: string;
}
export interface IWidgetBuilder<T extends IWidgetProps> {
buildWidget(data: T): JSX.Element
buildWidget(data: T): JSX.Element;
}
export interface IWidgetProps {
widgetType: WidgetType
key?: string
widgetId: string
topRow: number
leftColumn: number
bottomRow: number
rightColumn: number
parentColumnSpace: number
parentRowSpace: number
renderMode: RenderMode
widgetType: WidgetType;
key?: string;
widgetId: string;
topRow: number;
leftColumn: number;
bottomRow: number;
rightColumn: number;
parentColumnSpace: number;
parentRowSpace: number;
renderMode: RenderMode;
}
export interface IWidgetCardProps {
widgetType: WidgetType;
key?: string;
label: string;
icon: string;
groups: string[];
}
export default BaseWidget

22
app/client/src/widgets/BreadcrumbsWidget.tsx
View File

@ -1,17 +1,13 @@
import * as React from "react"
import React from "react"
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
import { WidgetType } from "../constants/WidgetConstants"
import { Boundary, IBreadcrumbProps } from "@blueprintjs/core"
import BreadcrumbsComponent from "../editorComponents/BreadcrumbsComponent"
import _ from "lodash"
class BreadcrumbsWidget extends BaseWidget<
IBreadcrumbsWidgetProps,
BreadcrumbsWidgetProps,
IWidgetState
> {
constructor(widgetProps: IBreadcrumbsWidgetProps) {
super(widgetProps)
}
getPageView() {
return (
@ -32,12 +28,12 @@ class BreadcrumbsWidget extends BaseWidget<
}
}
export interface IBreadcrumbsWidgetProps extends IWidgetProps {
width?: number
collapseFrom?: Boundary
className?: string
minVisibleItems?: number
items?: IBreadcrumbProps[]
export interface BreadcrumbsWidgetProps extends IWidgetProps {
width?: number;
collapseFrom?: Boundary;
className?: string;
minVisibleItems?: number;
items?: IBreadcrumbProps[];
}
export default BreadcrumbsWidget

17
app/client/src/widgets/ButtonWidget.tsx
View File

@ -1,14 +1,9 @@
import * as React from "react"
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
import { WidgetType } from "../constants/WidgetConstants"
import ButtonComponent from "../editorComponents/ButtonComponent"
import _ from "lodash"
import WidgetFactory from "../utils/WidgetFactory";
class ButtonWidget extends BaseWidget<IButtonWidgetProps, IWidgetState> {
constructor(widgetProps: IButtonWidgetProps) {
super(widgetProps)
}
class ButtonWidget extends BaseWidget<ButtonWidgetProps, IWidgetState> {
getPageView() {
return (
@ -16,7 +11,7 @@ class ButtonWidget extends BaseWidget<IButtonWidgetProps, IWidgetState> {
style={this.getPositionStyle()}
widgetId={this.props.widgetId}
key={this.props.widgetId}
text={this.props.text}
text={this.props.text || "Button"}
/>
)
}
@ -26,9 +21,9 @@ class ButtonWidget extends BaseWidget<IButtonWidgetProps, IWidgetState> {
}
}
export interface IButtonWidgetProps extends IWidgetProps {
text?: string
ellipsize?: boolean
export interface ButtonWidgetProps extends IWidgetProps {
text?: string;
ellipsize?: boolean;
}
export default ButtonWidget

15
app/client/src/widgets/CalloutWidget.tsx
View File

@ -1,15 +1,10 @@
import * as React from "react";
import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
import { Callout, Code, H5, Intent, Switch } from "@blueprintjs/core";
import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
import { Intent } from "@blueprintjs/core";
import { WidgetType } from "../constants/WidgetConstants";
import CalloutComponent from "../editorComponents/CalloutComponent";
import _ from "lodash";
class CalloutWidget extends BaseWidget<ICalloutWidgetProps, IWidgetState> {
constructor(widgetProps: ICalloutWidgetProps) {
super(widgetProps);
}
class CalloutWidget extends BaseWidget<CalloutWidgetProps, IWidgetState> {
getPageView() {
return (
<CalloutComponent
@ -29,7 +24,7 @@ class CalloutWidget extends BaseWidget<ICalloutWidgetProps, IWidgetState> {
}
}
export interface ICalloutWidgetProps extends IWidgetProps {
export interface CalloutWidgetProps extends IWidgetProps {
id?: string;
title?: string;
description?: string;

23
app/client/src/widgets/CheckboxWidget.tsx
View File

@ -1,16 +1,9 @@
import * as React from "react"
import React from "react"
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
import { Icon, Intent } from "@blueprintjs/core"
import { IconName } from "@blueprintjs/icons"
import { WidgetType } from "../constants/WidgetConstants"
import CheckboxComponent from "../editorComponents/CheckboxComponent"
import _ from "lodash"
class CheckboxWidget extends BaseWidget<ICheckboxWidgetProps, IWidgetState> {
constructor(widgetProps: ICheckboxWidgetProps) {
super(widgetProps)
}
class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, IWidgetState> {
getPageView() {
return (
<CheckboxComponent
@ -27,12 +20,12 @@ class CheckboxWidget extends BaseWidget<ICheckboxWidgetProps, IWidgetState> {
}
}
export interface ICheckboxWidgetProps extends IWidgetProps {
export interface CheckboxWidgetProps extends IWidgetProps {
items: Array<{
label: string
defaultIndeterminate: boolean
value: number | string
}>
label: string;
defaultIndeterminate: boolean;
value: number | string;
}>;
}
export default CheckboxWidget

76
app/client/src/widgets/ContainerWidget.tsx
View File

@ -1,49 +1,57 @@
import React from "react"
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import ContainerComponent, {
IContainerProps
} from "../editorComponents/ContainerComponent"
import ContainerComponent from "../editorComponents/ContainerComponent"
import {
ContainerOrientation,
WidgetType,
CSSUnits
} from "../constants/WidgetConstants"
import WidgetFactory from "../utils/WidgetFactory"
import React from "react"
import _ from "lodash"
import { Color } from "../constants/StyleConstants"
import DroppableComponent from "../editorComponents/DroppableComponent"
const DEFAULT_NUM_COLS = 13
const DEFAULT_NUM_ROWS = 13
const DEFAULT_NUM_COLS = 16
const DEFAULT_NUM_ROWS = 16
class ContainerWidget extends BaseWidget<
IContainerWidgetProps<IWidgetProps>,
IWidgetState
ContainerWidgetProps<IWidgetProps>,
ContainerWidgetState
> {
snapColumnSpace: number = 100
snapRowSpace: number = 100
constructor(props: IContainerWidgetProps<IWidgetProps>) {
constructor(props: ContainerWidgetProps<IWidgetProps>) {
super(props)
this.renderChildWidget = this.renderChildWidget.bind(this)
this.state = {
width: 0,
height: 0
height: 0,
snapColumnSpace: DEFAULT_NUM_COLS,
snapRowSpace: DEFAULT_NUM_ROWS
}
}
componentDidUpdate(previousProps: IContainerWidgetProps<IWidgetProps>) {
componentDidUpdate(previousProps: ContainerWidgetProps<IWidgetProps>) {
super.componentDidUpdate(previousProps)
let snapColumnSpace = this.state.snapColumnSpace
let snapRowSpace = this.state.snapRowSpace
if (this.state.width)
this.snapColumnSpace =
snapColumnSpace =
this.state.width / (this.props.snapColumns || DEFAULT_NUM_COLS)
if (this.state.height)
this.snapRowSpace =
snapRowSpace =
this.state.height / (this.props.snapRows || DEFAULT_NUM_ROWS)
if (
this.state.snapColumnSpace !== snapColumnSpace ||
this.state.snapRowSpace !== snapRowSpace
) {
this.setState({
snapColumnSpace: snapColumnSpace,
snapRowSpace: snapRowSpace
})
}
}
renderChildWidget(childWidgetData: IWidgetProps) {
childWidgetData.parentColumnSpace = this.snapColumnSpace
childWidgetData.parentRowSpace = this.snapRowSpace
childWidgetData.parentColumnSpace = this.state.snapColumnSpace
childWidgetData.parentRowSpace = this.state.snapRowSpace
return WidgetFactory.createWidget(childWidgetData)
}
@ -61,18 +69,36 @@ class ContainerWidget extends BaseWidget<
)
}
getCanvasView() {
return (
<DroppableComponent
{...this.props}
style={{
...this.getPositionStyle()
}}
>
{super.getCanvasView()}
</DroppableComponent>
)
}
getWidgetType(): WidgetType {
return "CONTAINER_WIDGET"
}
}
export interface IContainerWidgetProps<T extends IWidgetProps>
export interface ContainerWidgetState extends IWidgetState {
snapColumnSpace: number;
snapRowSpace: number;
}
export interface ContainerWidgetProps<T extends IWidgetProps>
extends IWidgetProps {
children?: T[]
snapColumns?: number
snapRows?: number
orientation?: ContainerOrientation
backgroundColor?: Color
children?: T[];
snapColumns?: number;
snapRows?: number;
orientation?: ContainerOrientation;
backgroundColor?: Color;
}
export default ContainerWidget

15
app/client/src/widgets/IconWidget.tsx
View File

@ -1,16 +1,11 @@
import * as React from "react";
import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
import { Icon, Intent } from "@blueprintjs/core";
import { WidgetType } from "../constants/WidgetConstants";
import { Intent } from "@blueprintjs/core";
import { IconName } from "@blueprintjs/icons";
import IconComponent from "../editorComponents/IconComponent";
import _ from "lodash";
class IconWidget extends BaseWidget<IIconWidgetProps, IWidgetState> {
constructor(widgetProps: IIconWidgetProps) {
super(widgetProps);
}
class IconWidget extends BaseWidget<IconWidgetProps, IWidgetState> {
getPageView() {
return (
<IconComponent
@ -29,7 +24,7 @@ class IconWidget extends BaseWidget<IIconWidgetProps, IWidgetState> {
}
}
export interface IIconWidgetProps extends IWidgetProps {
export interface IconWidgetProps extends IWidgetProps {
icon?: IconName;
iconSize?: number;
ellipsize?: boolean;

14
app/client/src/widgets/InputGroupWidget.tsx
View File

@ -1,17 +1,13 @@
import * as React from "react";
import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
import { WidgetType } from "../constants/WidgetConstants";
import InputGroupComponent from "../editorComponents/InputGroupComponent";
import { IconName, InputGroup, Intent } from "@blueprintjs/core";
import _ from "lodash";
import { IconName, Intent } from "@blueprintjs/core";
class InputGroupWidget extends BaseWidget<
IInputGroupWidgetProps,
InputGroupWidgetProps,
IWidgetState
> {
constructor(widgetProps: IInputGroupWidgetProps) {
super(widgetProps);
}
getPageView() {
return (
@ -40,7 +36,7 @@ class InputGroupWidget extends BaseWidget<
}
}
export interface IInputGroupWidgetProps extends IWidgetProps {
export interface InputGroupWidgetProps extends IWidgetProps {
className?: string;
disabled?: boolean;
large?: boolean;

48
app/client/src/widgets/NumericInputWidget.tsx
View File

@ -3,15 +3,11 @@ import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import { WidgetType } from "../constants/WidgetConstants"
import NumericInputComponent from "../editorComponents/NumericInputComponent"
import { Intent, IconName } from "@blueprintjs/core"
import _ from "lodash"
class NumericInputWidget extends BaseWidget<
INumericInputWidgetProps,
NumericInputWidgetProps,
IWidgetState
> {
constructor(widgetProps: INumericInputWidgetProps) {
super(widgetProps)
}
getPageView() {
return (
@ -47,27 +43,27 @@ class NumericInputWidget extends BaseWidget<
}
}
export interface INumericInputWidgetProps extends IWidgetProps {
className?: string
disabled?: boolean
large?: boolean
intent?: Intent
defaultValue?: string
leftIcon?: IconName
rightElement?: JSX.Element
allowNumericCharactersOnly?: boolean
fill?: boolean
majorStepSize?: number | null
max?: number
min?: number
minorStepSize?: number | null
onValueChange?: (valueAsNumber: number, valueAsString: string) => void
onButtonClick?: (valueAsNumber: number, valueAsString: string) => void
inputRef?: (ref: HTMLInputElement | null) => any
selectAllOnFocus?: boolean
selectAllOnIncrement?: boolean
stepSize?: number
placeholder?: string
export interface NumericInputWidgetProps extends IWidgetProps {
className?: string;
disabled?: boolean;
large?: boolean;
intent?: Intent;
defaultValue?: string;
leftIcon?: IconName;
rightElement?: JSX.Element;
allowNumericCharactersOnly?: boolean;
fill?: boolean;
majorStepSize?: number | null;
max?: number;
min?: number;
minorStepSize?: number | null;
onValueChange?: (valueAsNumber: number, valueAsString: string) => void;
onButtonClick?: (valueAsNumber: number, valueAsString: string) => void;
inputRef?: (ref: HTMLInputElement | null) => any;
selectAllOnFocus?: boolean;
selectAllOnIncrement?: boolean;
stepSize?: number;
placeholder?: string;
}
export default NumericInputWidget

32
app/client/src/widgets/RadioGroupWidget.tsx
View File

@ -1,17 +1,13 @@
import * as React from "react"
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
import { WidgetType, CSSUnits } from "../constants/WidgetConstants"
import { WidgetType } from "../constants/WidgetConstants"
import RadioGroupComponent from "../editorComponents/RadioGroupComponent"
import { IOptionProps } from "@blueprintjs/core"
import _ from "lodash"
class RadioButtonWidget extends BaseWidget<
IRadioGroupWidgetProps,
RadioGroupWidgetProps,
IWidgetState
> {
constructor(widgetProps: IRadioGroupWidgetProps) {
super(widgetProps)
}
getPageView() {
return (
@ -37,19 +33,19 @@ class RadioButtonWidget extends BaseWidget<
}
}
export interface IRadioGroupWidgetProps extends IWidgetProps {
label: string
inline: boolean
selectedValue: string | number
handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void
disabled: boolean
className: string
name: string
options: IOptionProps[]
export interface RadioGroupWidgetProps extends IWidgetProps {
label: string;
inline: boolean;
selectedValue: string | number;
handleRadioChange: (event: React.FormEvent<HTMLInputElement>) => void;
disabled: boolean;
className: string;
name: string;
options: IOptionProps[];
items: Array<{
label: string
value: number | string
}>
label: string;
value: number | string;
}>;
}
export default RadioButtonWidget

14
app/client/src/widgets/SpinnerWidget.tsx
View File

@ -1,14 +1,10 @@
import * as React from "react";
import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
import { Spinner, Intent } from "@blueprintjs/core";
import { WidgetType } from "../constants/WidgetConstants";
import { Intent } from "@blueprintjs/core";
import SpinnerComponent from "../editorComponents/SpinnerComponent";
import _ from "lodash";
class SpinnerWidget extends BaseWidget<ISpinnerWidgetProps, IWidgetState> {
constructor(widgetProps: ISpinnerWidgetProps) {
super(widgetProps);
}
class SpinnerWidget extends BaseWidget<SpinnerWidgetProps, IWidgetState> {
getPageView() {
return (
@ -28,7 +24,7 @@ class SpinnerWidget extends BaseWidget<ISpinnerWidgetProps, IWidgetState> {
}
}
export interface ISpinnerWidgetProps extends IWidgetProps {
export interface SpinnerWidgetProps extends IWidgetProps {
size?: number;
value?: number;
ellipsize?: boolean;

14
app/client/src/widgets/TagInputWidget.tsx
View File

@ -1,15 +1,11 @@
import * as React from "react";
import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
import { WidgetType } from "../constants/WidgetConstants";
import TagInputComponent from "../editorComponents/TagInputComponent";
import { Intent, ITagProps, TagInput, HTMLInputProps } from "@blueprintjs/core";
import { Intent, ITagProps, HTMLInputProps } from "@blueprintjs/core";
import _ from "lodash";
class TagInputWidget extends BaseWidget<ITagInputWidgetProps, IWidgetState> {
constructor(widgetProps: ITagInputWidgetProps) {
super(widgetProps);
}
class TagInputWidget extends BaseWidget<TagInputWidgetProps, IWidgetState> {
getPageView() {
return (
@ -28,7 +24,7 @@ class TagInputWidget extends BaseWidget<ITagInputWidgetProps, IWidgetState> {
}
}
export interface ITagInputWidgetProps extends IWidgetProps {
export interface TagInputWidgetProps extends IWidgetProps {
addOnPaste?: boolean;
className?: string;
disabled?: boolean;

12
app/client/src/widgets/TextWidget.tsx
View File

@ -1,13 +1,9 @@
import * as React from "react";
import React from "react";
import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget";
import { WidgetType, CSSUnits } from "../constants/WidgetConstants";
import { WidgetType } from "../constants/WidgetConstants";
import TextComponent from "../editorComponents/TextComponent";
import _ from "lodash";
class TextWidget extends BaseWidget<ITextWidgetProps, IWidgetState> {
constructor(widgetProps: ITextWidgetProps) {
super(widgetProps);
}
class TextWidget extends BaseWidget<TextWidgetProps, IWidgetState> {
getPageView() {
return (
@ -26,7 +22,7 @@ class TextWidget extends BaseWidget<ITextWidgetProps, IWidgetState> {
}
}
export interface ITextWidgetProps extends IWidgetProps {
export interface TextWidgetProps extends IWidgetProps {
text?: string;
ellipsize?: boolean;
tagName?: keyof JSX.IntrinsicElements;

11
app/client/tsconfig.json
View File

@ -4,21 +4,26 @@
"lib": [
"dom",
"dom.iterable",
"esnext"
"esnext",
"es5",
"es2015.collection",
"es2015.iterable"
],
"strict": true,
"outDir": "./out/js/src",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
"jsx": "react",
"downlevelIteration": true,
"importHelpers": true
},
"include": [
"./src/**/*"

154
app/client/yarn.lock
View File

@ -1409,6 +1409,13 @@
dependencies:
moment ">=2.14.0"
"@types/nanoid@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@types/nanoid/-/nanoid-2.0.0.tgz#b59002c475e6dfcc26e67ba563ff61b512e5ebf8"
integrity sha512-NtwPHfAyU3IDXdKAB2OMPpAauHBg9gUjpOYr3FAzI84D70nWdS8k5mryteLvT/s1ACeAFAkGg132/XJVN4qx/w==
dependencies:
"@types/node" "*"
"@types/netlify-identity-widget@^1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@types/netlify-identity-widget/-/netlify-identity-widget-1.4.1.tgz#a963bd0360ac9dd8f4fd437be6764179d396e3a4"
@ -1533,6 +1540,17 @@
regexpp "^2.0.1"
tsutils "^3.7.0"
"@typescript-eslint/eslint-plugin@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.0.0.tgz#609a5d7b00ce21a6f94d7ef282eba9da57ca1e42"
integrity sha512-Mo45nxTTELODdl7CgpZKJISvLb+Fu64OOO2ZFc2x8sYSnUpFrBUW3H+H/ZGYmEkfnL6VkdtOSxgdt+Av79j0sA==
dependencies:
"@typescript-eslint/experimental-utils" "2.0.0"
eslint-utils "^1.4.0"
functional-red-black-tree "^1.0.1"
regexpp "^2.0.1"
tsutils "^3.14.0"
"@typescript-eslint/experimental-utils@1.13.0":
version "1.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-1.13.0.tgz#b08c60d780c0067de2fb44b04b432f540138301e"
@ -1542,6 +1560,15 @@
"@typescript-eslint/typescript-estree" "1.13.0"
eslint-scope "^4.0.0"
"@typescript-eslint/experimental-utils@2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.0.0.tgz#f3d298bb411357f35c4184e24280b256b6321949"
integrity sha512-XGJG6GNBXIEx/mN4eTRypN/EUmsd0VhVGQ1AG+WTgdvjHl0G8vHhVBHrd/5oI6RRYBRnedNymSYWW1HAdivtmg==
dependencies:
"@types/json-schema" "^7.0.3"
"@typescript-eslint/typescript-estree" "2.0.0"
eslint-scope "^4.0.0"
"@typescript-eslint/parser@1.13.0":
version "1.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-1.13.0.tgz#61ac7811ea52791c47dc9fd4dd4a184fae9ac355"
@ -1552,6 +1579,16 @@
"@typescript-eslint/typescript-estree" "1.13.0"
eslint-visitor-keys "^1.0.0"
"@typescript-eslint/parser@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.0.0.tgz#4273bb19d03489daf8372cdaccbc8042e098178f"
integrity sha512-ibyMBMr0383ZKserIsp67+WnNVoM402HKkxqXGlxEZsXtnGGurbnY90pBO3e0nBUM7chEEOcxUhgw9aPq7fEBA==
dependencies:
"@types/eslint-visitor-keys" "^1.0.0"
"@typescript-eslint/experimental-utils" "2.0.0"
"@typescript-eslint/typescript-estree" "2.0.0"
eslint-visitor-keys "^1.0.0"
"@typescript-eslint/typescript-estree@1.13.0":
version "1.13.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-1.13.0.tgz#8140f17d0f60c03619798f1d628b8434913dc32e"
@ -1560,6 +1597,14 @@
lodash.unescape "4.0.1"
semver "5.5.0"
"@typescript-eslint/typescript-estree@2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.0.0.tgz#c9f6c0efd1b11475540d6a55dc973cc5b9a67e77"
integrity sha512-NXbmzA3vWrSgavymlzMWNecgNOuiMMp62MO3kI7awZRLRcsA1QrYWo6q08m++uuAGVbXH/prZi2y1AWuhSu63w==
dependencies:
lodash.unescape "4.0.1"
semver "^6.2.0"
"@webassemblyjs/ast@1.8.5":
version "1.8.5"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@ -2427,6 +2472,13 @@ braces@^2.3.1, braces@^2.3.2:
split-string "^3.0.2"
to-regex "^3.0.1"
braces@^3.0.1:
version "3.0.2"
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
dependencies:
fill-range "^7.0.1"
brorand@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
@ -2722,7 +2774,7 @@ caseless@~0.12.0:
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@ -3702,11 +3754,6 @@ diff-sequences@^24.9.0:
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
diff@^3.2.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
diffie-hellman@^5.0.0:
version "5.0.3"
resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@ -3944,7 +3991,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
dependencies:
once "^1.4.0"
enhanced-resolve@^4.1.0:
enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng==
@ -4053,6 +4100,13 @@ escodegen@^1.11.0, escodegen@^1.9.1:
optionalDependencies:
source-map "~0.6.1"
eslint-config-prettier@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.1.0.tgz#e6f678ba367fbd1273998d5510f76f004e9dce7b"
integrity sha512-k9fny9sPjIBQ2ftFTesJV21Rg4R/7a7t7LCtZVrYQiHEp8Nnuk3EGaDmsKSAnsPj0BYcgB2zxzHa2NTkIxcOLg==
dependencies:
get-stdin "^6.0.0"
eslint-config-react-app@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.0.1.tgz#5f3d666ba3ee3cb384eb943e260e868f6c72251b"
@ -4126,6 +4180,13 @@ eslint-plugin-jsx-a11y@6.2.3:
has "^1.0.3"
jsx-ast-utils "^2.2.1"
eslint-plugin-prettier@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.0.tgz#8695188f95daa93b0dc54b249347ca3b79c4686d"
integrity sha512-XWX2yVuwVNLOUhQijAkXz+rMPPoCr7WFiAl8ig6I7Xn+pPVhDhzg4DxHpmbeb0iqjO9UronEA3Tb09ChnFVHHA==
dependencies:
prettier-linter-helpers "^1.0.0"
eslint-plugin-react-hooks@^1.6.1:
version "1.7.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
@ -4170,7 +4231,7 @@ eslint-scope@^5.0.0:
esrecurse "^4.1.0"
estraverse "^4.1.1"
eslint-utils@^1.3.1, eslint-utils@^1.4.2:
eslint-utils@^1.3.1, eslint-utils@^1.4.0, eslint-utils@^1.4.2:
version "1.4.2"
resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.2.tgz#166a5180ef6ab7eb462f162fd0e6f2463d7309ab"
integrity sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==
@ -4445,6 +4506,11 @@ fast-deep-equal@^2.0.1:
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
fast-diff@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
fast-glob@^2.0.2:
version "2.2.7"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@ -4538,6 +4604,13 @@ fill-range@^4.0.0:
repeat-string "^1.6.1"
to-regex-range "^2.1.0"
fill-range@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
dependencies:
to-regex-range "^5.0.1"
finalhandler@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@ -5745,6 +5818,11 @@ is-number@^3.0.0:
dependencies:
kind-of "^3.0.2"
is-number@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
is-obj@^1.0.0, is-obj@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
@ -6059,11 +6137,6 @@ jest-environment-node@^24.9.0:
jest-mock "^24.9.0"
jest-util "^24.9.0"
jest-get-type@^22.1.0:
version "22.4.3"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"
integrity sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==
jest-get-type@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
@ -7064,6 +7137,14 @@ micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
snapdragon "^0.8.1"
to-regex "^3.0.2"
micromatch@^4.0.0:
version "4.0.2"
resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
dependencies:
braces "^3.0.1"
picomatch "^2.0.5"
miller-rabin@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@ -7264,6 +7345,11 @@ nan@^2.12.1, nan@^2.13.2:
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
nanoid@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.0.4.tgz#4889355c9ce8e24efad7c65945a4a2875ac3e8f4"
integrity sha512-sOJnBmY3TJQBVIBqKHoifuwygrocXg3NjS9rZSMnVl05XWSHK7Qxb177AIZQyMDjP86bz+yneozj/h9qsPLcCA==
nanomatch@^1.2.9:
version "1.2.13"
resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@ -8046,6 +8132,11 @@ performance-now@^2.1.0:
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
picomatch@^2.0.5:
version "2.0.7"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.0.7.tgz#514169d8c7cd0bdbeecc8a2609e34a7163de69f6"
integrity sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==
pify@^2.0.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@ -8811,6 +8902,13 @@ prelude-ls@~1.1.2:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
prettier-linter-helpers@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
dependencies:
fast-diff "^1.1.2"
prettier@^1.16.0:
version "1.18.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
@ -8829,14 +8927,6 @@ pretty-error@^2.1.1:
renderkid "^2.0.1"
utila "~0.4"
pretty-format@^23.6.0:
version "23.6.0"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
integrity sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==
dependencies:
ansi-regex "^3.0.0"
ansi-styles "^3.2.0"
pretty-format@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
@ -9213,7 +9303,7 @@ react-router@^4.3.1:
prop-types "^15.6.1"
warning "^4.0.1"
react-scripts@3.1.1:
react-scripts@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.1.1.tgz#1796bc92447f3a2d3072c3b71ca99f88d099c48d"
integrity sha512-dbjTG9vJC61OI62hIswQYg5xHvwlxDTH6QXz6ICEuA5AqkFQWk1LKl76sk8fVL2WsyumbBc4FErALwKcEV2vNA==
@ -10878,6 +10968,13 @@ to-regex-range@^2.1.0:
is-number "^3.0.0"
repeat-string "^1.6.1"
to-regex-range@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
dependencies:
is-number "^7.0.0"
to-regex@^3.0.1, to-regex@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
@ -10953,6 +11050,17 @@ ts-jest@^24.0.2:
semver "^5.5"
yargs-parser "10.x"
ts-loader@^6.0.4:
version "6.0.4"
resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.0.4.tgz#bc331ad91a887a60632d94c9f79448666f2c4b63"
integrity sha512-p2zJYe7OtwR+49kv4gs7v4dMrfYD1IPpOtqiSPCbe8oR+4zEBtdHwzM7A7M91F+suReqgzZrlClk4LRSSp882g==
dependencies:
chalk "^2.3.0"
enhanced-resolve "^4.0.0"
loader-utils "^1.0.2"
micromatch "^4.0.0"
semver "^6.0.0"
ts-pnp@1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.2.tgz#be8e4bfce5d00f0f58e0666a82260c34a57af552"
@ -11016,7 +11124,7 @@ tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
tsutils@^3.7.0:
tsutils@^3.14.0, tsutils@^3.7.0:
version "3.17.1"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==