https://github.com/one-com/wsb-data-flow-research-app
Website builder data flow research
https://github.com/one-com/wsb-data-flow-research-app
Last synced: about 2 months ago
JSON representation
Website builder data flow research
- Host: GitHub
- URL: https://github.com/one-com/wsb-data-flow-research-app
- Owner: One-com
- Created: 2019-06-12T12:32:56.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T21:59:31.000Z (about 2 years ago)
- Last Synced: 2025-02-05T07:49:07.210Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 911 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Table of Contents
=================
* [Purpose](#purpose)
* [Functional requirements](#functional-requirements)
* [Layout](#layout)
* [Components panel](#components-panel)
* [Workspace](#workspace)
* [Properties panel](#properties-panel)
* [Button component](#button-component)
* ["Button & PP" case](#button--pp-case)
* ["Button & PP" case: undo / redo](#button--pp-case-undo--redo)
* [Text component](#text-component)
* [Text component push down case](#text-component-push-down-case)
* [Undo / Redo](#undo--redo)
* [Data persistance](#data-persistance)
* [Technical requirements](#technical-requirements)
* [Starter kit](#starter-kit)
* [Running on codesandbox.io](#running-on-codesandboxio)
## Purpose
Of this repo is to provide a started kit to the wsb data flow research.
See more about research itself in [here](https://confluence.one.com/display/WED/Wbtgen+data+flow+framework+research).
## Functional requirements
### Layout
- Top bar
- Save button
- Undo / redo
- Components panel (aka left panel)
- Workspace
- Template lines
### Components panel
- Click to component to add it to workspace
### Workspace
- Show template lines
- Move components to change their positions on the workspace
- Components should not go beyond template lines
- Components should expand template width when they touch template lines
### Properties panel
- Clicking on comopnent activates properties panel
- Each components has its own properties panel implementation
### Button component
- Update button label in place
- Button width should be adjusted to new label
- Properties panel
- Update button width
#### "Button & PP" case
- button text is changed
- button width growth
- PP that is near to button shifts down so no overlapping happens between button and PP
#### "Button & PP" case: undo / redo
- undo happens
- button text returns back
- button width goes back
- PP does not return back
### Text component
- Change text dimensions
- Update text in place
- Text component might grow in height
- Properties panel
- Update global font size
#### Text component push down case
- there are multiple Text components on the page
- there are some other (take simple Box) components below Text components
- there is global style that is applied to Text components
- global style is changed
- Text components grow in height
- push down should happen with all respects
### Undo / Redo
- Works for components in the workspace
### Data persistance
- Save should persist in local storage
- State should be preserved after reloading
## Technical requirements
- UI framework: React
- Typechecking: Flowtype
- Tests: jest
## Starter kit
- Webpack / webpack dev server
- Layout is impelemented using React
- Handlers are attached
- D&D handlers are attached to components
- PP skeleton is created
## Running on codesandbox.io
Create sandbox from git repo using main url.
E.g.: https://github.com/One-com/wsb-data-flow-research-app.