Feat/dbeaver/vscode#86/storybook integration

common-react/@dbeaver/ui-kit/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/lib
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+tsconfig.tsbuildinfo

common-react/@dbeaver/ui-kit/.ladle/components.tsx

@@ -0,0 +1,2 @@
+import '../src/index.css';
+import './global.css';

common-react/@dbeaver/ui-kit/.ladle/config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+    addons: {
+      a11y: {
+        enabled: true,
+      },
+    },
+  };

common-react/@dbeaver/ui-kit/.ladle/global.css

@@ -0,0 +1,19 @@
+@import 'tailwindcss' prefix(tw);
+
+@layer theme {
+  a {
+    color: var(--tw-color-blue-600);
+  }
+
+  code {
+    color: var(--tw-color-yellow-600);
+  }
+
+  .comment {
+    color: var(--tw-color-gray-400);
+  }
+}
+
+:root[data-theme='dark'] {
+  color: white;
+}

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

@@ -0,0 +1,32 @@
+{
+  "name": "@dbeaver/ui-kit",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "",
+  "license": "Apache-2.0",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "rimraf --glob dist"
+  },
+  "packageManager": "[email protected]",
+  "devDependencies": {
+    "@dbeaver/tsconfig": "workspace:^",
+    "@ladle/react": "^5",
+    "@tailwindcss/vite": "^4",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@wroud/vite-plugin-asset-resolver": "^0",
+    "rimraf": "^6",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "vite": "^6"
+  },
+  "dependencies": {
+    "@ariakit/react": "^0",
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}

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

@@ -0,0 +1,172 @@
+@import './_base.css';
+@import './_sizes.css';
+@import './_variants.css';
+
+@layer components {
+  .dbv-kit-button {
+    display: inline-flex;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    align-items: center;
+    white-space: nowrap;
+
+    height: var(--dbv-kit-btn-height);
+    padding-inline: var(--dbv-kit-btn-padding-inline);
+    gap: var(--dbv-kit-btn-gap);
+
+    background-color: var(--dbv-kit-btn-background);
+    color: var(--dbv-kit-btn-foreground);
+
+    border-radius: var(--dbv-kit-btn-border-radius);
+    border-width: var(--dbv-kit-btn-border-width);
+    border-color: var(--dbv-kit-btn-border-color);
+    border-style: var(--dbv-kit-btn-border-style);
+
+    font-size: var(--dbv-kit-btn-font-size);
+    font-weight: var(--dbv-kit-btn-font-weight);
+
+    &:focus-visible,
+    &[data-focus-visible] {
+      outline: 2px solid var(--dbv-kit-color-outline);
+    }
+
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--dbv-kit-btn-background-hover);
+      }
+    }
+
+    &:active,
+    &[data-active] {
+      background-color: var(--dbv-kit-btn-background-active);
+    }
+
+    &:disabled {
+      opacity: var(--dbv-kit-btn-disabled-opacity);
+    }
+  }
+
+  /* ---------------------------- */
+  /* Sizes */
+
+  .dbv-kit-button__small {
+    --dbv-kit-btn-padding-inline: var(--dbv-kit-btn-small-padding-inline);
+    --dbv-kit-btn-font-size: var(--dbv-kit-btn-small-font-size);
+    --dbv-kit-btn-height: var(--dbv-kit-btn-small-height);
+    --dbv-kit-btn-gap: var(--dbv-kit-btn-small-gap);
+
+    --dbv-kit-btn-icon-margin-inline: calc(var(--dbv-kit-btn-small-padding-inline) * -0.25);
+  }
+
+  .dbv-kit-button__medium {
+    --dbv-kit-btn-padding-inline: var(--dbv-kit-btn-medium-padding-inline);
+    --dbv-kit-btn-font-size: var(--dbv-kit-btn-medium-font-size);
+    --dbv-kit-btn-height: var(--dbv-kit-btn-medium-height);
+    --dbv-kit-btn-gap: var(--dbv-kit-btn-medium-gap);
+
+    --dbv-kit-btn-icon-margin-inline: calc(var(--dbv-kit-btn-medium-padding-inline) * -0.25);
+  }
+
+  .dbv-kit-button__large {
+    --dbv-kit-btn-padding-inline: var(--dbv-kit-btn-large-padding-inline);
+    --dbv-kit-btn-font-size: var(--dbv-kit-btn-large-font-size);
+    --dbv-kit-btn-height: var(--dbv-kit-btn-large-height);
+    --dbv-kit-btn-gap: var(--dbv-kit-btn-large-gap);
+
+    --dbv-kit-btn-icon-margin-inline: calc(var(--dbv-kit-btn-large-padding-inline) * -0.25);
+  }
+
+  .dbv-kit-button__xlarge {
+    --dbv-kit-btn-padding-inline: var(--dbv-kit-btn-xlarge-padding-inline);
+    --dbv-kit-btn-font-size: var(--dbv-kit-btn-xlarge-font-size);
+    --dbv-kit-btn-height: var(--dbv-kit-btn-xlarge-height);
+    --dbv-kit-btn-gap: var(--dbv-kit-btn-xlarge-gap);
+
+    --dbv-kit-btn-icon-margin-inline: calc(var(--dbv-kit-btn-xlarge-padding-inline) * -0.25);
+  }
+
+  /* ---------------------------- */
+  /* Variants */
+
+  .dbv-kit-button__primary {
+    --dbv-kit-btn-background: var(--dbv-kit-btn-primary-background);
+    --dbv-kit-btn-foreground: var(--dbv-kit-btn-primary-foreground);
+    --dbv-kit-btn-background-hover: var(--dbv-kit-btn-primary-background-hover);
+    --dbv-kit-btn-background-active: var(--dbv-kit-btn-primary-background-active);
+
+    --dbv-kit-btn-loader-color: color-mix(in srgb, var(--dbv-kit-btn-background) 65%, var(--tw-color-white));
+    --dbv-kit-btn-loader-background: color-mix(in srgb, var(--dbv-kit-btn-foreground) 85%, transparent);
+  }
+
+  .dbv-kit-button__secondary {
+    --dbv-kit-btn-background: var(--dbv-kit-btn-secondary-background);
+    --dbv-kit-btn-foreground: var(--dbv-kit-btn-secondary-foreground);
+    --dbv-kit-btn-background-hover: var(--dbv-kit-btn-secondary-background-hover);
+    --dbv-kit-btn-background-active: var(--dbv-kit-btn-secondary-background-active);
+    --dbv-kit-btn-border-color: var(--dbv-kit-btn-secondary-border-color);
+
+    --dbv-kit-btn-loader-color: color-mix(in srgb, var(--dbv-kit-btn-secondary-foreground) 75%, var(--tw-color-gray-600));
+    --dbv-kit-btn-loader-background: color-mix(in srgb, var(--tw-color-white) 75%, transparent);
+  }
+
+  .dbv-kit-button__danger {
+    --dbv-kit-btn-background: var(--dbv-kit-btn-danger-background);
+    --dbv-kit-btn-foreground: var(--dbv-kit-btn-danger-foreground);
+    --dbv-kit-btn-background-hover: var(--dbv-kit-btn-danger-background-hover);
+    --dbv-kit-btn-background-active: var(--dbv-kit-btn-danger-background-active);
+
+    --dbv-kit-btn-loader-color: color-mix(in srgb, var(--dbv-kit-btn-danger-background) 65%, var(--tw-color-white));
+    --dbv-kit-btn-loader-background: color-mix(in srgb, var(--dbv-kit-btn-danger-foreground) 85%, transparent);
+  }
+
+  /* ---------------------------- */
+  /* Loader */
+
+  .dbv-kit-button_loader {
+    position: absolute;
+    top: calc(var(--dbv-kit-btn-border-width) * -1);
+    left: calc(var(--dbv-kit-btn-border-width) * -1);
+    width: calc(100% + var(--dbv-kit-btn-border-width) * 2);
+    height: calc(100% + var(--dbv-kit-btn-border-width) * 2);
+    background: color-mix(in srgb, var(--dbv-kit-btn-loader-background) 75%, var(--tw-color-gray-100));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: inherit;
+    pointer-events: none;
+
+    &::after {
+      --loader-width: calc(var(--dbv-kit-btn-font-size) * 0.2);
+      content: '';
+      border: var(--loader-width) solid var(--dbv-kit-btn-loader-background);
+      border-top: var(--loader-width) solid var(--dbv-kit-btn-loader-color);
+      border-radius: 50%;
+      opacity: 1;
+      width: calc(var(--dbv-kit-btn-font-size) * 1.2);
+      height: calc(var(--dbv-kit-btn-font-size) * 1.2);
+      animation: var(--dbv-kit-btn-loader-animation);
+    }
+  }
+
+  /* ---------------------------- */
+  /* Icon */
+
+  .dbv-kit-button_icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    fill: currentColor;
+  }
+
+  .dbv-kit-button_icon__start {
+    margin-inline-start: var(--dbv-kit-btn-icon-margin-inline);
+  }
+
+  .dbv-kit-button_icon__end {
+    margin-inline-end: var(--dbv-kit-btn-icon-margin-inline);
+  }
+}

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

@@ -0,0 +1,39 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { Button as AriaButton, type ButtonProps as AriaKitButtonProps } from '@ariakit/react';
+import './Button.css';
+
+export interface ButtonProps extends Omit<AriaKitButtonProps, 'clickOnEnter' | 'clickOnSpace'> {
+  variant?: 'primary' | 'secondary' | 'danger';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  loading?: boolean;
+}
+
+export function Button({ className, variant = 'primary', size = 'medium', loading, children, onClick, ...props }: ButtonProps) {
+  const classToApply = `dbv-kit-button dbv-kit-button__${variant} dbv-kit-button__${size}` + (className ? ` ${className}` : '');
+
+  return (
+    <AriaButton aria-label={loading ? 'Loading' : ''} onClick={loading ? () => null : onClick} className={classToApply} {...props}>
+      {loading && <span className="dbv-kit-button_loader" />}
+      {children}
+    </AriaButton>
+  );
+}
+export interface ButtonIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  placement?: 'start' | 'end';
+}
+
+/**
+ *  Button Icon component - used to place an icon inside a button, renders span element.;
+ *
+ * @param props.placement This property is needed to adjust icon placement inside a button. The icon with placement="start" will cut the inline-start padding. placement="end" will affect the padding-inline-end accordingly. This property supports RTL and LTR, so you don't need to think about it.
+ */
+Button.Icon = function ButtonIcon({ className, children, placement }: ButtonIconProps) {
+  const classToApply = `dbv-kit-button_icon` + (placement ? ` dbv-kit-button-icon__${placement}` : '') + (className ? ` ${className}` : '');
+  return <span className={classToApply}>{children}</span>;
+};

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

@@ -0,0 +1,19 @@
+@layer base {
+  :root {
+    --dbv-kit-btn-height: var(--dbv-kit-control-height-medium);
+    --dbv-kit-btn-padding-inline: calc(var(--tw-spacing) * 2.5);
+    --dbv-kit-btn-gap: calc(var(--dbv-kit-btn-padding-inline) / 4);
+    --dbv-kit-btn-foreground: var(--tw-color-white);
+    --dbv-kit-btn-background: var(--dbv-kit-color-primary-600);
+    --dbv-kit-btn-background-hover: var(--dbv-kit-color-primary-700);
+    --dbv-kit-btn-background-active: var(--dbv-kit-color-primary-800);
+    --dbv-kit-btn-border-width: var(--dbv-kit-control-border-width);
+    --dbv-kit-btn-border-color: transparent;
+    --dbv-kit-btn-border-style: solid;
+    --dbv-kit-btn-border-radius: var(--dbv-kit-control-border-radius);
+    --dbv-kit-btn-font-weight: var(--tw-font-weight-normal);
+    --dbv-kit-btn-font-size: calc(var(--dbv-kit-font-size-base) * 0.875);
+    --dbv-kit-btn-disabled-opacity: 0.5;
+    --dbv-kit-btn-loader-animation: var(--tw-animate-spin);
+  }
+}

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

@@ -0,0 +1,27 @@
+@layer base {
+  :root {
+    /*Small button*/
+    --dbv-kit-btn-small-padding-inline: calc(var(--dbv-kit-btn-padding-inline) * 0.5);
+    --dbv-kit-btn-small-font-size: calc(var(--dbv-kit-btn-font-size) * 0.875);
+    --dbv-kit-btn-small-height: var(--dbv-kit-control-height-small);
+    --dbv-kit-btn-small-gap: calc(var(--dbv-kit-btn-gap) * 0.5);
+
+    /*Medium button*/
+    --dbv-kit-btn-medium-padding-inline: var(--dbv-kit-btn-padding-inline);
+    --dbv-kit-btn-medium-font-size: var(--dbv-kit-btn-font-size);
+    --dbv-kit-btn-medium-height: var(--dbv-kit-control-height-medium);
+    --dbv-kit-btn-medium-gap: var(--dbv-kit-btn-gap);
+
+    /*Large button*/
+    --dbv-kit-btn-large-padding-inline: calc(var(--dbv-kit-btn-padding-inline) * 1.25);
+    --dbv-kit-btn-large-font-size: calc(var(--dbv-kit-btn-font-size) * 1.125);
+    --dbv-kit-btn-large-height: var(--dbv-kit-control-height-large);
+    --dbv-kit-btn-large-gap: calc(var(--dbv-kit-btn-gap) * 1.25);
+
+    /*Extra large button*/
+    --dbv-kit-btn-xlarge-padding-inline: calc(var(--dbv-kit-btn-padding-inline) * 1.5);
+    --dbv-kit-btn-xlarge-font-size: calc(var(--dbv-kit-btn-font-size) * 1.25);
+    --dbv-kit-btn-xlarge-height: var(--dbv-kit-control-height-xlarge);
+    --dbv-kit-btn-xlarge-gap: calc(var(--dbv-kit-btn-gap) * 1.5);
+  }
+}

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

@@ -0,0 +1,22 @@
+@layer base {
+  :root {
+    /* Primary Button */
+    --dbv-kit-btn-primary-foreground: var(--tw-color-white);
+    --dbv-kit-btn-primary-background: var(--dbv-kit-color-primary-600);
+    --dbv-kit-btn-primary-background-hover: var(--dbv-kit-color-primary-700);
+    --dbv-kit-btn-primary-background-active: var(--dbv-kit-color-primary-800);
+
+    /* Secondary Button */
+    --dbv-kit-btn-secondary-foreground: var(--dbv-kit-color-primary-600);
+    --dbv-kit-btn-secondary-background: transparent;
+    --dbv-kit-btn-secondary-background-hover: var(--dbv-kit-color-primary-50);
+    --dbv-kit-btn-secondary-background-active: var(--dbv-kit-color-primary-100);
+    --dbv-kit-btn-secondary-border-color: var(--dbv-kit-color-primary-600);
+
+    /* Danger Button */
+    --dbv-kit-btn-danger-foreground: var(--tw-color-white);
+    --dbv-kit-btn-danger-background: var(--tw-color-red-600);
+    --dbv-kit-btn-danger-background-hover: var(--tw-color-red-700);
+    --dbv-kit-btn-danger-background-active: var(--tw-color-red-800);
+  }
+}