55ce83c444
* Add WIP spreadsheet * Add footer and improve styles * Refactor to use IDs and support changing text values inline * Add inline editing of options fields * Add row deletion and fix sizing * Add ability to add new rows * Fix z-index issue with option cells * Remove deletion notification and fix selection * Add gap between items in an options cell * Tweak options cell to be pixel perfect * Fix padding around sheet not working when scrolling * Add resizable columns and add support for all themes * Allow multiselect component and field to support text values * Generate inclusion schema when importing multiselect columns * Add support for multiselect type * Add number cell * Add functional date cell * Disable editing autocolumns * Make sticky column the primary display and fix opening options cells * Improve display of relationship cell and options cell * Support empty dates and use CSS variables for easier styling * Use more CSS variables and add utils to spreadsheets * Add drag and drop column reordering * Break out reordering logic into new stores * Rename reordering to reorder * Break out other components from spreadsheet for cleaner code * Break out spreadsheet body into its own component * Split into more modular components and try virtual rendering * Test absolute positioning * Optimise virtual rendering for both columns and rows to handle infinitely large datasets * Optimise scrolling and virtual rendering performance * Fix columnn reordering * Migrate sheet to data section, improve reordering and reszing * Clean up more sheet state and increase performance * Fix multiple issues with z-index, reordering and resizing * Fix date cells in sheets * Separate data fetching logic from main sheet and tidy up * Add infinite scroll, improve row fetching, add error handling, fix svelte store updates * Fix overly thin scrollbars in firefox * Use nicer checkboxes and fix some hover styles * Fix issue reordering columns in firefox and increase performance * Tidy up * Use search endpoint instead of get endpoint to fetch individual rows so that relationship enrichment occurs * Tidy up * Fix relationship issues when creating rows * Optimise resetting data to smoothly transition when changing datasource * Add WIP virtual dom implementation to massively increase performance * Refactor spreadsheet into more discreet components * Fix multiple issues, clean up rendering, improve performance * Tune cell sizes * Fix some scroll issues and add shadow to sticky column * Fix issue when no primary display is set * Add padding to sheet * Improve styles * Allow reordering columns to be the first column after sticky column * Fix row hover state not being removed * Update hovered row on wheel * Update scroll styles and z-index * Improve scroll logic and handle horizontal wheel events * Simplify and improve z index styles * Fix styles when using no sticky columns * Improve rendering performance * Improve performance by removing keyed each blocks and fix reorder target styling * Ensure scroll top is always properly reset and add config store * Allow configuring selecting rows and adding rows * Integrate sheet into data section better * Add back in functional delete row button * Refactor stores and make state more modular * Lint and remove unused deps * Remove add column button * Fix options cells being unable to scroll * Add WIP initial multi-user websocket implementation for sheets * Add WIP multi-user UI for sheet interface * Fix issues with not disconnecting users when swapping datasource and improve multi-user UI * Update layout and remove logging * WIP column popovers for dataspace sheets * Add popovers to sheet column headers, improve mouse UX * Tidy reordering stuff * Refactor resizing logic into store and improve UX around hover events when resizing/reordering * Add column sorting and reordering via popover * Handle context menu events in header cells * Fully integrates sheets with datasection and remove lots of old stuff * Fix buttons being highlighted when filters are set * Add flags for controlling editing and adding rows in sheets * Count context menu clicks when considering the click outside handler * Prevent adding rows to users table and remove log * Expose loading state of sheet and improve column highlighting logic * Small style updates * Update delete button and allow horizontal scrolling * Add context menu to sheets with deletion and duplication features * Improve UX around selecting rows and cells * Add basic keyboard interactions to dataspaces * Improve keyboard navigation in sheets * Remove unnecessary searching through large rows array * Fix issue with deleting rows and fix relationship cells displaying undefined * Improve loading state * Update menu width * Merge with new shared-core and moved lucene utils * Improve rendering performance and simplify component props * Remove new row component and improve mouse interactions * Tidy up buttons above sheets and add FAB for adding rows * Optimise sheet data loading and add sort button * Update sorting and remove logs * Add sheet button to control column visibilty, improve sorting, improve disabled states * Fix bug with select placeholders and fix sorting loops causing endless refreshes * Update filter button to look consistent and add double click to resize columns to default width * Ensure all derived stores have default values * Reset scrolling when datasource changes and fix wasted pagination calls * Improve performance by removing searches through the full row array * Add advanced key handling for spreadsheets and improve blur and focus UX * Ensure the selected cell is always visible * Add icons for all data types * Add new long form text cell * Add boolean cell * Add ability to focus first cell via tab * Add cells for formulae and JSON * Remove console logs * Add attachment cell * Increase padding to account for attachment dropdown * Prevent deleting autocolumns via keyboard * Fix attachments overflowing * Improve sort button, remove header more icons unless hovered and highlight sorted column * Add functional relationship cell * Improve relationship cell * Fix race conditions and edge cases in relationship cell * Update user avatar colours * Improve preservation of column widths in sheets when making schema changes * Remove redundant sheet schema context and fix issues with mutating table schema * Disable websocket in sheets * Rollback state changes when row saving fails * Fix one-to-many relationships allowing selecting multiple rows on both sides * Remove log * Make sheet gutter width customisable * Allow expanding rows using existing edit row modal * Fix text cell not using full width * Sort columns to put autocolumns last * Add new footer for adding rows, improve store memoization, support inverting all data types * Improve animations for adding rows and handle add row failure * Ensure all sheet feature flags work as expected and fix multi row deletion * Fix options ordering * Fix add row button not appearing when horizontal scrollbar is hidden * Fix selecting newly created rows * Remove log and add notification when creating or editing columns * Move new row component to top, automatically invert cell renderers when required * Add resizable rows * Fix overlapping long form text borders * Fix scroll not working in new row * Update new row component, fix z-index issues, improve UX * Large refactors to row creation, naming and sheet APIs * Refactor stores to fix dependency issues, use modals for adding rows, simplify sheet * Fix resize overlays * Add custom colors for drop shadows and blue-100 to all themes, fix sticky column shadow * Increase horizontal padding when scrolling to a selected cell * Add multiple validation improvements * Add validation to duplicating rows * Remove log * Restore missing event handler * Improve data fetch reset logic, fix issues with stale cache in spreadsheets * Fix issue with cell colors, improve row API interactions to avoid relationship issues due to API response differences * Fix filters not working * Simplify logic for reordering and add new overlay. Simplify sheet cells * Fix importing and exporting with sheets * Fix reorder overlay z-index issue * Fix issue when no display column exists * Fix issue with display column not being able to be unset * Add persitence to column size and order in sheets * Improve sheet integration with data section and add horizontal cell inversion * Fix double click resizing of sticky column * Make column visibility persistent and refactor column updating * Improve sheet loading states * Add beta button to sheet, tidy up constants * Work around table API inconsistencies to handle table schema updates * Add additional reorder options and improve beta button * Improve sorting * Add copy and paste to spreadsheet and add immediate editing of cells without additional click * Remove copy/paste rows, remove move to start/end, improve copy/paste for cell values * Fix dependency ordering * Refactor other sheet stores to improve dependency ordering * Fix errors not showing in sticky column and clear cell value on backspace press * Rewrite relationship cell and update default column widths * Ensure dynamic row height is properly accounted for * Update text cells, number cells, long form field cells and relationship cells to respect row height * Fix row heights with sticky column * Update JSON, boolean and date cells to respect row height * Update attachment cell to respect row height * Use unique background for focused cell * Standardise shadows across cell types * Persist row height as table metadata * Improve a few design issues * Clean up * Fix relationship cells not being readonly * Lint * Fix icon padding in relationship picker * Improve styles in relationship dropdown * Update shadow * Update relationship icons * Update relationship icons * Update error label max size and position * Prevent using invalid data types as display columns * Add menu option to edit rows in modal * Prevent sheet handling key events sourcing from modals * Standardise menu overlay shadow and add count to relationship cells when hovering * Improve relationship cell performance * Remove spellcheck from text fields * Fix resize overlay handler height * Fix reorder overlay height * Remove unused code and change selected table faster in data section * Fix table selection not working when on datasource page * Improve sheet loading state * Add rowHeight property to table types * Restore builder middleware * Remove any naming of dataspaces * Lint * Disable row import button for users table and add optional chaining to spreadsheetsocket invocations to fix tests * Use unique user edit modal for editing users in sheets * Add schemaOverrides prop to sheet and use it to customise user table schema * Update number icon * Fix primary display column not properly disabling certain menu options * Merge * Update beta button position slightly * Update beta button text * Fix HMR for custom plugins which was broken due to signed minio links * Add maze link to grid * Update koa <> socket.io integation to improve fake koa context and allow current app middleware * Rename sheet to grid * Fix menu postiion, fix copy and paste in menu not working * Remove commented out usages of websocket emissions for grid |
||
|---|---|---|
| .. | ||
| src | ||
| .gitignore | ||
| LICENSE | ||
| README.md | ||
| package.json | ||
| rollup.config.js | ||
README.md
Budibase bbui
A package that handles all common components across the Budibase organisation. You can find the current live version Here.
Install
- Clone
npm installnpm run svench
(Note: yarn won't work!)
Example workflow to create a component
- Create a file:
Headline.svelte - Create a Svench file:
Headline.svench - Build component and add variants to the Svench file.
- Once done, re-export the file in
src/index.js. - Publish, update the package in the main project and profit.
Guidelines
Making components
- Think about re-usability
- Use the css custom properties (variables) that are in the css stylesheet. This makes it easy to tweak things later down the line.
- Opt to forward events (
<button on:click>for example) rather than using callbacks. - Avoid adding margins to the outermost container of the component.
Using components and the styleguide
- Get familiar with the different props that exist on the component. If something vital is missing, make a PR and add it.
- Take advantage of the css custom properties in the stylesheet and avoid writing hard-coded values.
- 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 gapor 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.