Feat/dbeaver/vscode#86/storybook integration #3251

SychevAndrey · 2025-02-10T09:37:42Z

No description provided.

… values as default

…tead of many stories

… to ladle

Wroud · 2025-02-14T11:12:29Z

common-react/@dbeaver/ui-kit/package.json

+    "@ariakit/react": "^0.4.15",
+    "@ladle/react": "^5.0.1",
+    "@tailwindcss/vite": "^4.0.3",
+    "@wroud/vite-plugin-asset-resolver": "^0.1.5",


please keep only major version like ^5
also check for dependencies that it's added correctly to devDependencies and dependencies

Wroud · 2025-02-14T11:14:07Z

common-react/@dbeaver/ui-kit/src/Button/Button.tsx

+}
+
+export function Button({ className, variant = 'primary', size = 'medium', loading, children, onClick, ...props }: UiKitButtonProps) {
+  const classToApply = `dbv-ui-button dbv-ui-button--${variant} dbv-ui-button--${size}` + (className ? ` ${className}` : '');


maybe it's better to use a prefix like dbv-kit

kit has less meaning for me than ui, plus ui is one symbol shorter means less html and css. So why should we change it? Can we vote in the team maybe?

Wroud · 2025-02-14T11:16:38Z

common-react/@dbeaver/ui-kit/src/Button/Button.tsx

+}
+
+export interface ButtonIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  position?: 'left' | 'right';


this is composition element, doesn't position controlled by inserting component in the right position?:

<Button> some text <Button.Icon /> </Button>

<Button> <Button.Icon /> some text </Button>

yes, you are basically not controlling the position with this props, but styles (subtract padding to balance the button). You may define the prop or keep it empty. It's not ideal, let's discuss

Wroud · 2025-02-14T11:17:09Z

common-react/@dbeaver/ui-kit/src/Button/button.css

+ * you may not use this file except in compliance with the License.
+ */
+
+@layer components {


file name is incorrect (must be Button)

git didn't want to change it) Fixed.

Wroud · 2025-02-14T11:23:10Z

common-react/@dbeaver/ui-kit/src/Button/button.css

+  .dbv-ui-button--small {
+    padding-inline: calc(var(--btn-padding-inline) * 0.5);
+    padding-block: calc(var(--btn-padding-block) * 0.5);
+    font-size: calc(var(--btn-font-size) * 0.875);
+    height: var(--control-height-small);
+  }
+
+  .dbv-ui-button--medium {
+    height: var(--control-height-medium);
+    font-size: var(--btn-font-size);
+  }
+
+  .dbv-ui-button--large {
+    padding-inline: calc(var(--btn-padding-inline) * 1.25);
+    padding-block: calc(var(--btn-padding-block) * 1.25);
+    font-size: calc(var(--btn-font-size) * 1.125);
+    height: var(--control-height-large);
+  }
+
+  .dbv-ui-button--xlarge {
+    padding-inline: calc(var(--btn-padding-inline) * 1.5);
+    padding-block: calc(var(--btn-padding-block) * 1.5);
+    font-size: calc(var(--btn-font-size) * 1.25);
+    height: var(--control-height-xlarge);
+  }


why can't we adjust css variable instead, like:

.dbv-ui-button--large { --btn-padding-inline: calc(var(--btn-padding-inline) * 1.25); --btn-padding-block: calc(var(--btn-padding-block) * 1.25); --btn-font-size: calc(var(--btn-font-size) * 1.125); --btn-height: var(--control-height-large); }

(this code may not work as expected but shows an idea)

It also may be good to use a global multiplier (so you need to change only one variable)

sorry didn't understand

understood, working on that

Wroud · 2025-02-14T11:36:32Z

common-react/@dbeaver/ui-kit/src/Button/Button.tsx

+import { Button as AriaButton, type ButtonProps } from '@ariakit/react';
+import './Button.css';
+
+export interface UiKitButtonProps extends Omit<ButtonProps, 'clickOnEnter' | 'clickOnSpace'> {


just ButtonProps

webapp/packages/core-blocks/src/ToolsPanel/ToolsAction.module.css

Wroud · 2025-02-14T11:37:50Z

webapp/packages/core-ui/src/Tabs/Tab/TabActions.module.css

-  height: 8px;
-  width: 8px;
+  height: 16px;
+  width: 16px;
  align-self: flex-start;


strange changes

Wroud · 2025-02-14T11:37:58Z

webapp/packages/core-ui/src/Tabs/Tab/TabIcon.module.css

-  height: 24px;
+  height: 32px;


strange changes

Wroud · 2025-02-14T11:38:02Z

webapp/packages/core-ui/src/Tabs/Tab/TabIcon.module.css

  padding-left: 8px;
  justify-content: center;
  align-items: center;

  & .staticImage,
  & .iconOrImage,
  & img {
+    max-width: 16px;


strange changes

…dation nodes in input

…eaver button" to keep the old Button interface without changes Original commit SHA: 62bb1fe.

This reverts commit f7d6533.

SychevAndrey requested a review from Wroud February 10, 2025 09:37

SychevAndrey self-assigned this Feb 10, 2025

SychevAndrey force-pushed the feat/dbeaver/vscode#86/storybook-integration branch 2 times, most recently from aeaf44d to 60369a4 Compare February 12, 2025 11:12

SychevAndrey added 18 commits February 12, 2025 14:59

feat: add ui-kit package to common-react

e0896aa

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

c47c19b

feat: create custom properties for button and checkbox using tailwind…

d11fe80

… values as default

feat: create simple button with 2 variants

74241c0

feat: create simple checkbox

0ed231c

refactor: update after rebase

2cf9224

feat: experiments with button and checkbox

f02c669

feat: add buttons sizes, adjust btn loader, add interactive story ins…

3e41bfc

…tead of many stories

fix: add license

01b1fa8

fix: a11y issues with color contrast

ba32e62

fix: mdx stories support

c88f33e

feat: experiments with icons

3393ff4

feat: try custom rendering

c5a5419

docs: add small kinda docs for button

e2f79cc

refactor: css layers

3173019

chore: deps

e54263e

chore: remove buildinfo from git

805487e

chore: remove tsbuildinfo from git

574f786

SychevAndrey force-pushed the feat/dbeaver/vscode#86/storybook-integration branch from bbfb88d to 574f786 Compare February 12, 2025 13:59

SychevAndrey added 3 commits February 12, 2025 21:08

fix: vertical tab overflow

ef3e005

feat: use UIKit button as base for Cloudbeaver button

62bb1fe

fix: box-sizing problems

67d0522

SychevAndrey marked this pull request as ready for review February 13, 2025 08:52

SychevAndrey added 2 commits February 13, 2025 10:48

refactor: button styles use BEM model

ed91ba2

refactor: separate base tokens from aliases

f5e137c

SychevAndrey requested a review from sergeyteleshev February 13, 2025 11:17

SychevAndrey requested a review from devnaumov February 13, 2025 11:17

SychevAndrey added 5 commits February 13, 2025 19:13

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

5322cd8

refactor: rename button classes, add ui-kit prefix

5506e34

refactor: remove redundant story, omit a couple of props, add example…

5c2b6c7

… to ladle

refactor: add general sizes tokens, update license

22600ca

feat: add scaffold for input component

d515341

Wroud requested changes Feb 14, 2025

View reviewed changes

SychevAndrey added 3 commits February 14, 2025 12:55

refactor: update deps

f7d6533

refactor: remove links

ff8b6e7

refactor: change props naming, add prefixes in checkbox, removes vali…

7fa37ac

…dation nodes in input

SychevAndrey requested a review from Wroud February 14, 2025 12:11

SychevAndrey added 12 commits February 14, 2025 14:16

refactor: partially revert "feat: use UIKit button as base for Cloudb…

1d93f2b

…eaver button" to keep the old Button interface without changes Original commit SHA: 62bb1fe.

Revert "refactor: update deps"

c58f40f

This reverts commit f7d6533.

refactor: update deps once again

72ea725

refactor: rename ui-kit prefix

e7fa7df

chore: update deps

9f16ad0

refactor: Button Icon Interface

3cec396

refactor: use JSDoc for placement comment

f27cf5d

refactor css custom props for Button

8da1693

refactor: introduce opacity custom property, fix icon margin property

4522512

fix: button text should not wrap;

e421ed2

fix: tailwindcss version

705459d

fix: tailwindcss version

a576223

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/dbeaver/vscode#86/storybook integration #3251

Feat/dbeaver/vscode#86/storybook integration #3251

SychevAndrey commented Feb 10, 2025

Wroud Feb 14, 2025

Wroud Feb 14, 2025

SychevAndrey Feb 14, 2025

Wroud Feb 14, 2025

SychevAndrey Feb 14, 2025

Wroud Feb 14, 2025

SychevAndrey Feb 14, 2025

Wroud Feb 14, 2025

Wroud Feb 14, 2025

SychevAndrey Feb 14, 2025

SychevAndrey Feb 14, 2025

Wroud Feb 14, 2025

Wroud Feb 14, 2025

Wroud Feb 14, 2025

Wroud Feb 14, 2025

Feat/dbeaver/vscode#86/storybook integration #3251

Are you sure you want to change the base?

Feat/dbeaver/vscode#86/storybook integration #3251

Conversation

SychevAndrey commented Feb 10, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment