Commit Graph
14 Commits
Author SHA1 Message Date
52f567fded dbeaver/pro#5553 Add Sorting functionality to base grid (#3456)
* dbeaver/pro#5553 feat: add column sorting functionality to DataGrid

* dbeaver/pro#5553 feat: enhance column sorting functionality to support multiple selection

* dbeaver/pro#5553 feat: add keyboard navigation to order button

* dbeaver/pro#5553 feat: add constraints handling logic for column sorting in DataGrid

* Revert "dbeaver/pro#5553 feat: add constraints handling logic for column sorting in DataGrid"

This reverts commit 6028a48b13.

* dbeaver/pro#5553 feat: add icon generation script to UIKit, add sample icons

* dbeaver/pro#5553 refactor: use inner react-data-grid API for column sorting

* dbeaver/pro#5553 feat: add IconCross component and update icon-related files

* dbeaver/pro#5553 feat: replace Button with IconButton in OrderButton component

* dbeaver/pro#5553 style: update foreground color variables for IconButton component

* dbeaver/pro#5553 refactor: add normalization rules to layers, use IconButton in Common DialogHeader

checked if new IconButton works well in light and dark mode by using in CommonDialogHeader

* dbeaver/pro#5553 style: format code and update dependencies in CommonDialogHeader and DataGridTable components

* dbeaver/pro#5553 style: move onColumnSort prop to correct position in DataGridTable component

* dbeaver/pro#5553 refactor: remove icons component generation, use svg sprite

* dbeaver/pro#5553 refactor: update OrderButton component and inline icons sprite in Body

we decided to go with this solution for now just adding icons to a sprite and use them by id. Imports by ?url  don't work in VSCode if try to use them in <use> href, so we need to find another solution or stick to that approach.

* dbeaver/pro#5553 refactor: update column sorting and sortable logic in DataGrid components

* dbeaver/pro#5553 style: format whitespace in Body component

* dbeaver/pro#5553 feat: add new sorting icons for ascending, descending, and unsorted states

* dbeaver/pro#5553 refactor:styling for header cell and order button components

* dbeaver/pro#5553 refactor: update sorting logic in DataGrid and OrderButton components

* dbeaver/pro#5553 refactor: value deps

* dbeaver/pro#5553 feat: update sorting icons for ascending, descending, and unsorted states

* dbeaver/pro#5553 style: update aria-label and title for OrderButton component

* dbeaver/pro#5553 fix: double focus

* dbeaver/pro#5553 fix: after merge

* dbeaver/pro#5553 refactor: removed outline offset for sort button

* dbeaver/pro#5553 refactor: update Tailwind CSS import to use layer directive

---------

Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>
Co-authored-by: Alexey <wrouds@gmail.com>
2025-05-24 00:21:37 +08:00
1f4266ec95 dbeaver/pro#5745 [CB] Bump NPM dependencies #5745 (#3457)
* dbeaver/pro#5745 updates frontend deps

* updates graphql-request

* updates yarn locks for common-typescript, common-react

* updates engines node version

* react-hotkeys-hook + fixes hotkeys so it continues to work

* code cleanup for parseHotKey

* uses fixed version of tailwindcss

* adds 4.0.6 versions for tailwindcss with resolutions

* reverts tailwind 4.0.6 version for yarn.lock

* removes redundant resolutions for tailwindcss

* Update readme.md with new NodeJS version

* Update README.md with correct nodejs version according to our documentation

* updates talewindcss version 4.0.7

* fix: hotkeys types

---------

Co-authored-by: Wroud <wrouds@gmail.com>
Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>
Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
2025-05-23 17:31:13 +08:00
Sychev Andreyandmr-anton-t f0be7b6af6 dbeaver/pro#5554 [CB] [UI kit] create IconButton component (#3424)
* dbeaver/pro#5554 feat: first iteration of IconButton

* dbeaver/pro#5554 refactor: css var changes

* dbeaver/pro#5554 feat: add loading state to IconButton component

* dbeaver/pro#5554 style: update background color for loading state in IconButton

* dbeaver/pro#5554 feat: separate icon button styles and loader variables

* dbeaver/pro#5554 refactor: extract ButtonRoot component to use as a base for Button and IconButton components

That approach lets us use common logic (loading) but don't mixup styles and tokens and have better control

* dbeaver/pro#5554 refactor: update loading state styles for IconButton component

* dbeaver/pro#5554 refactor: ButtonRootProps

* dbeaver/pro#5554 refactor: remove opacity from loading state in Button and IconButton components

* dbeaver/pro#5554 refactor: create content wrapper, move general styles there, add loader wrapper

---------

Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
2025-05-19 19:38:30 +08:00
Sychev AndreyandDaria Marutkina 591083435d 5490 cb create spinner UI kit component (#3415)
* #5490 feat: create basic spin component

* #5490 refactor: use new Spin component in button loading state

* #5490 refactor: add tokens to Spin component

add SpecialLoader story to show how to change Spin appearance for special use cases

* #5490 fix: reverts f4d9b6b101

Element should not get focus visible after mouse interactions

* 5490 fix: lost dash

* #5490 refactor: rename Spin to Spinner

---------

Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>
2025-05-07 16:23:06 +02:00
Sychev Andrey f5e4f14159 #5509 fix: checkbox doesn't get focused on click (#3406) 2025-05-05 15:24:34 +08:00
08e6d9631f dbeaver/pro#5440 feat: display boolean as checkbox in grid (#3372)
* dbeaver/pro#5440 feat: display boolean as checkbox in grid

* #5440 refactor: make checkboxes disabled inside grid

It's a very strange UX when checkbox is inside a cell of a table and behaves like a real one. It's much more expected when only cell takes focus and checkbox only represents the value in a way we want without acting like a real input. Moreover, using Focusable component enables smooth toggling between all 3 states of a boolean cell from a keyboard.

* #5440 fix: remove inline padding

* #5440 feat: add hover effect for boolean formatter

* #5440 refactor: revert full width

* #5440 refactor: split onClick and onKeyDown interfaces

* #5440 fix: return onClick

---------

Co-authored-by: Andrey Sychev <nukemoore@gmail.com>
Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>
2025-04-14 22:42:44 +08:00
sergeyteleshev 143cbb0d88 Cb 6265 Return front unit tests after migration (#3338)
* СB-6265 sets up vitest instead of jest

* CB-6265 gets back core-utils tests

* СB-6265 gets back react-testing-library tests

* СB-6265 gets back some tests from another plugins

* CB-6265 renames dist -> lib in each plugin + removes all jest from the repo

* CB-6265 disables watch mode so build can go on

* CB-6265 extends tests types for react-testing-library

* CB-6265 reverts dist->lib rename cause it contains other assets also

* CB-6265 moves setupFiles to the vitest.config.ts

* CB-6265 pr fixes

* CB-6265 fixes tests run for Windows

* CB-6265 removes global: true in config + uses jest-dom/vitest lib to have extended expect types

* CB-6565 removes unused deps

* СB-6265 improves performance of the test x10 times

* CB-6265 gets back renderInApp, fixes vitest setup reset config for mocks, cleans up

* CB-6265 reset -> restore all mocks

* CB-6265 fixes unit tests

* CB-6265 vitest.setup.ts cleanup

* CB-6265 timestamp to date shows military time both: on unix and windows (win tests fix)

* CB-6265 improves tests running (sequential run instead of parallel)

* CB-6265 cleanup

* CB-6265 eslint fix

* CB-6265 eslint fix 2

* CB-6265 reverts useCombined handler

* CB-6265 reverts some tests

* CB-6265 removes all redundant timer configs

* Merge branch 'devel' into CB-6265-return-front-unit-tests-after-migration

* CB-6265 pr fixes

* CB-6265 fixes time for windows

* CB-6265 removes default fake timers before each test
2025-04-14 18:48:33 +08:00
Alexeyandmr-anton-t 9c3cc17bd9 dbeaver/pro#5394 feat: null and boolean formatter for base grid (#3359)
* dbeaver/pro#5394 feat: null and boolean formatter for base grid

* feat: reuse base grid formatters

* chore: try to adjust workflow concurrency

* chore: trigger workflow

* chore: trigger workflow cancel

* chore: fix label styles

---------

Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
2025-04-09 15:06:32 +08:00
Sychev Andrey a3d8e92b5c fix: wrap input styles in base layer (#3358) 2025-04-03 18:00:51 +08:00
Sychev Andrey 348d6b3161 [#113] Add clsx dependency to UI kit (#3335)
* chore: add clsx dependency to ui-kit

* chore: import clsx from ui-kit

* refactor: use clsx for class management in Button

* refactor: use clsx in Checkbox

* refactor: use clsx in Input component

* feat: use clsx in radio and radiogroup

* feat: use clsx in Select component

* feat: reexport VisuallyHidden and Focus trap components from ariakit
2025-03-27 20:02:00 +08:00
Sychev Andrey 584e5bb260 103 create radio and radio group components (#3313)
* refactor: rename css variable in order to be more descriptive and stick to the naming convention

* refactor: unify controls, add new global control css variables

* feat: add radio component

* docs: add radio stories

* docs: add input docs story

* docs: add simple form story

* refactor: change default radio dot size

* refactor: change class name for radio children wrapper

* refactor: don't reexport inner radio elements

* refactor: simplify RadioGroup interface by removing items props, make label(any) required

The radiogroup must have an accessible name either by a visible label referenced by aria-labelledby or has a label specified with aria-label.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/radiogroup_role

* refactor: use label wrapper for input component to simplify structure

* refactor: add classname for radio group container
2025-03-21 18:52:39 +08:00
Sychev Andrey 36102cdee5 88 create select component (#3302)
* feat: add simple select

* feat: add items states vars and popover animation

* feat: add SelectField component

* feat: select field uses getters to get value/label/selected value, update stories to demonstrate

* docs: update select stories

* refactor: remove margin top because we use gutter in SelectField and for reexported aria popover we don't want to setup such default

* fix: select field - set not the very first value by default, but the first not disabled value

* refactor: add popover height variable, remove padding to look more like select in cloudbeaver by default

* feat: add styles for Select Field description

* refactor: rename properties

* refactor: remove redundant docs for props, remove placeholder props because it's not how aria select is supposed to work, you need to use extra select item to create a placeholder

* refactor: remove support for property path, keep only support for property name or custom getter in sake of simplicity and ease of maintenance

* fix: story for key getters

* fix: return type

* fix: don't set disabled value if all items are disabled

* fix: controlled mode, respect value prop over selectedValue

* refactor: remove width property

* refactor: typesafe key getter

The type iterates through every property key in ItemType.
For each property key, it evaluates whether the property's type is assignable to ValueType and creates a union type of all keys that passed the type check

* refactor: fixes after merge and item hover variable

* fix: input

* feat: add custom arrow icon prop

* refactor: remove ability to use object keys as getters, rename options to items in all places

* fix: rename token
2025-03-06 23:32:41 +08:00
c532298eba 87 create checkbox component (#3294)
* refactor: remove --dbv-kit-color-text variable in favor of --dbv-kit-color-foreground, add --dbv-kit-control-disabled-opacity to use for all controls, remove --dbv-kit-btn-disabled-opacity, update docs

* refactor: add ControlSize type

* feat: create checkbox component

* docs: add checkbox stories, update button docs

* refactor: polish checkbox component, added some vars, add docs, change some defaults

* feat: add indeterminate state

* fix: prioritize check prop over inner state

* fix: button styles layer

* fix: comments

* fix: change checkbox checked style

* Revert "fix: change checkbox checked style"

This reverts commit eba1e21eb9.

---------

Co-authored-by: Wroud <wrouds@gmail.com>
Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
2025-03-05 15:25:55 +08:00
Sychev Andreyandmr-anton-t a4102b28dd Feat/dbeaver/vscode#86/storybook integration (#3251)
* feat: add ui-kit package to common-react

* feat: add tailwind and ladle to ui-kit, use ui-kit in ce

* feat: create custom properties for button and checkbox using tailwind values as default

* feat: create simple button with 2 variants

* feat: create simple checkbox

* refactor: update after rebase

* feat: experiments with button and checkbox

* feat: add buttons sizes, adjust btn loader, add interactive story instead of many stories

* fix: add license

* fix: a11y issues with color contrast

* fix: mdx stories support

* feat: experiments with icons

* feat: try custom rendering

* docs: add small kinda docs for button

* refactor:  css layers

* chore: deps

* chore: remove buildinfo from git

* chore: remove tsbuildinfo from git

* fix: vertical tab overflow

* feat: use UIKit button as base for Cloudbeaver button

* fix: box-sizing problems

* refactor: button styles use BEM model

* refactor: separate base tokens from aliases

* refactor: add some defaults, write all properties in snake case

* refactor: rename button classes, add ui-kit prefix

* refactor: remove redundant story, omit a couple of props, add example to ladle

* refactor: add general sizes tokens, update license

* feat: add scaffold for input component

* refactor: update deps

* refactor: remove links

* refactor: change props naming, add prefixes in checkbox, removes validation nodes in input

* refactor: partially revert "feat: use UIKit button as base for Cloudbeaver button" to keep the old Button interface without changes

Original commit SHA: 62bb1fe9a0.

* Revert "refactor: update deps"

This reverts commit f7d6533967.

* refactor: update deps once again

* refactor: rename ui-kit prefix

* chore: update deps

* refactor: Button Icon Interface

* refactor: use JSDoc for placement comment

* refactor css custom props for Button

* refactor: introduce opacity custom property, fix icon margin property

* fix: button text should not wrap;

* fix: tailwindcss version

* fix: tailwindcss version

* refactor: remove checkbox styles, keep only wireframe

* refactor: move input-related css variables to the dedicated folder

* refactor: remove unused input props

* refactor: btn loader animation

* refactor: use nesting for states, refactor classnames using BEM delimiters

* refactor: introduce btn-border-width prop, removed redundant btn-padding-block since we use fixed heights

* refactor: input and button

* fix: input

* chore: deps

* chore: deps

* chore: add vite as dev dep

* refactor: button variants

* chore: yarn install

* fix: loading button should not react on hover

* docs: add stories about tokens

* chore:  remove lint command

* refactor: add prefix to css variables

* refactor: add base border-radius and border-width for controls

* fix: don't import tailwind in style files

* fix: add tailwindcss import for ladle

* fix: base radius variable

* refactor: rename css var

* refactor: add tw prefix for tailwind classes and vars

* fix: styles in easy-config

* fix: after tailwind reset paddings don't in width anymore, compensate

* fix: don't show outline on mouse click

* refactor: change btn state classes, remove not loading for hover because it's strange that button reacts on click when in loading state, but not on hover.

* fix: icons

* fix: add letter-spacing to normalize to prevent tailwind reset it with inherit value

* fix: welcome page selector

* fix: button outline uses a variable for width,  proper loading state in aria, icon class name

* feat: add global styles for UI-kit ladle

* docs: refactored stories composition, added stories

* refactor: simplify loader, enable custom loaders, introduced token for btn loader, fix class names, updated stories

* docs: add global styles for ladle

* feat: use custom loader in cloudbeaver

* refactor: use oklch color space for color mixing in loaders

* docs: add readme

* fix: tsconfig, format ladle config

* docs: add short command for ladle, update readme

* fix: module export

* build: add vite plugin

* fix: remove aria-label for loading

* fix: yarn

---------

Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
2025-02-25 21:04:57 +08:00