1
0
Fork 0
mirror of synced 2024-07-18 20:56:04 +12:00
budibase/packages/bbui
Andrew Kingston 8cd7ba1fdf Undo/Redo for Design and Automate sections + automations refactor (#9714)
* Add full undo/redo support for screens

* Add loading states to disable spamming undo/redo

* Add keyboard shortcuts for undo and redo

* Fix modals not closing in design section when escape is pressed

* Remove log

* Add smart metadata saving to undo/redo

* Add error handling to undo/redo

* Add active state to hoverable icons

* Fix screen deletion

* Always attempt to get latest doc version before deleting in case rev has changed

* Move undo listener top level, hide controls when on certain tabs, and improve selection state

* Add tooltips to undo/redo control

* Update automation section nav to match other sections

* Fix automation list padding

* Fix some styles in create automation modal

* Improve automation section styles and add undo/redo

* Update styles in add action modal

* Fix button size when creating admin user

* Fix styles in add automation step modal

* Fix issue selecting disabled automation steps

* Reset automation history store when changing app

* Reduce spammy unnecessary API calls when editing cron trigger

* WIP automation refactor

* Rewrite most automation state

* Rewrite most of the rest of automation state

* Finish refactor of automation state

* Fix selection state when selecting new doc after history recreates it

* Prune nullish or empty block inputs from automations and avoid sending API requests when no changes have been made

* Fix animation issues with automations

* Sort automations and refetch list when adding or deleting

* Fix formatting

* Add back in ability to swap between values and bindings for block inputs

* Lint

* Format

* Fix potential issue in design section when selected screen is unset

* Fix automation arrow directions everywhere, tidy up logic and fix crash when using invalid looping

* Lint

* Fix more cases of automation errors

* Fix implicity any TS error

* Respect _id specified when creating automations

* Fix crash in history store when reverting a change on a doc whose ID has changed

* Lint

* Ensure cloneDeep helper doesn't crash when a nullish value is passed in

* Remove deprecated frontend automation test

---------

Co-authored-by: Rory Powell <rory.codes@gmail.com>
2023-02-23 13:55:18 +00:00
..
src Undo/Redo for Design and Automate sections + automations refactor (#9714) 2023-02-23 13:55:18 +00:00
.gitignore
LICENSE License cleanup 2021-11-17 14:21:16 +00:00
package.json v2.3.18-alpha.7 2023-02-23 12:14:21 +00:00
README.md Fixing issue that refactoring file caused (some strings renamed to ts rather than js). 2022-09-22 15:18:10 +01:00
rollup.config.js Fixing issue that refactoring file caused (some strings renamed to ts rather than js). 2022-09-22 15:18:10 +01:00
yarn.lock Quick updates for #8989 - this issue appeared to be fixed already but just adding a few extra bits of security to make sure that looping only occurs when valid data is found in the binding. 2023-01-24 19:09:36 +00:00

Budibase bbui

A package that handles all common components across the Budibase organisation. You can find the current live version Here.

Install

  1. Clone
  2. npm install
  3. npm run svench

(Note: yarn won't work!)

Example workflow to create a component

  1. Create a file: Headline.svelte
  2. Create a Svench file: Headline.svench
  3. Build component and add variants to the Svench file.
  4. Once done, re-export the file in src/index.js.
  5. Publish, update the package in the main project and profit.

Guidelines

Making components

  1. Think about re-usability
  2. Use the css custom properties (variables) that are in the css stylesheet. This makes it easy to tweak things later down the line.
  3. Opt to forward events (<button on:click> for example) rather than using callbacks.
  4. Avoid adding margins to the outermost container of the component.

Using components and the styleguide

  1. Get familiar with the different props that exist on the component. If something vital is missing, make a PR and add it.
  2. Take advantage of the css custom properties in the stylesheet and avoid writing hard-coded values.
  3. Since there is no margin on the components, think about the structure of the DOM and how to achieve correct spacing, etc. This can be done using css grid + grid gap or with a container div where you specify a padding or margin. The best solution depends on the circumstance.

TODO

  • Figure out a good documentation situation
  • Add testing suite (E2E using Playwright?)

Other

The project uses Svench. It is somewhat akin to Storybook but a lot less bloated and much easier to setup. It also supports HMR for quick development.