chore(web_common): add more shared components (#5243)

Author: mykalmax

pnpm-lock.yaml

@@ -4,3 +4,5 @@ tsconfig.tsbuildinfo
 
 *storybook.log
 storybook-static
+**/__snapshots__/**
+**/__screenshots__/**

web/common/.gitignore

@@ -4,10 +4,12 @@
   "devDependencies": {
     "@eslint/js": "^9.31.0",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@storybook/addon-docs": "^9.1.2",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-onboarding": "^9.1.2",
     "@storybook/react-vite": "^9.1.2",
+    "@storybook/test": "^8.6.14",
     "@tailwindcss/typography": "^0.5.16",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
@@ -17,20 +19,23 @@
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitest/browser": "^3.2.4",
+    "@xyflow/react": "^12.8.4",
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "eslint": "^9.31.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-storybook": "^9.1.2",
     "globals": "^16.3.0",
+    "lucide-react": "^0.542.0",
     "playwright": "^1.54.1",
     "postcss": "^8.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^9.1.2",
     "syncpack": "^13.0.4",
     "tailwind-merge": "^3.3.1",
+    "tailwind-scrollbar": "^4.0.2",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.38.0",
@@ -62,9 +67,12 @@
   "module": "dist/sqlmesh-common.es.js",
   "peerDependencies": {
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/typography": "^0.5.16",
+    "@xyflow/react": "^12.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^0.542.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^3.3.1",

web/common/package.json

@@ -1,4 +1,4 @@
 :root {
-  --color-badge-background: var(--color-gray-100);
+  --color-badge-background: var(--color-neutral-100);
   --color-badge-foreground: var(--color-prose);
 }

web/common/src/components/Badge/Badge.css

@@ -1,23 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
-import { EnumShape, EnumSize } from '@/types/enums'
+import type { Shape, Size } from '@/types'
 import { Badge } from './Badge'
 
 const meta: Meta<typeof Badge> = {
   title: 'Components/Badge',
   component: Badge,
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: Object.values(EnumSize),
-    },
-    shape: {
-      control: { type: 'select' },
-      options: Object.values(EnumShape),
-    },
-    children: { control: 'text' },
-  },
 }
 
 export default meta
@@ -29,10 +17,13 @@ export const Default: Story = {
   },
 }
 
+const sizes: Size[] = ['2xs', 'xs', 's', 'm', 'l', 'xl', '2xl']
+const shapes: Shape[] = ['square', 'round', 'pill']
+
 export const Sizes: Story = {
   render: args => (
     <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-      {Object.values(EnumSize).map(size => (
+      {sizes.map(size => (
         <Badge
           key={size}
           size={size}
@@ -51,7 +42,7 @@ export const Sizes: Story = {
 export const Shapes: Story = {
   render: args => (
     <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-      {Object.values(EnumShape).map(shape => (
+      {shapes.map(shape => (
         <Badge
           key={shape}
           shape={shape}
@@ -78,32 +69,32 @@ export const Colors: Story = {
       }}
     >
       <Badge
-        size={EnumSize.S}
-        shape={EnumShape.Pill}
+        size="s"
+        shape="pill"
         className="bg-[red] text-light"
         {...args}
       >
         Primary Badge
       </Badge>
       <Badge
-        size={EnumSize.S}
-        shape={EnumShape.Pill}
+        size="s"
+        shape="pill"
         className="bg-[lightblue] text-prose"
         {...args}
       >
         Secondary Badge
       </Badge>
       <Badge
-        size={EnumSize.S}
-        shape={EnumShape.Round}
+        size="s"
+        shape="round"
         className="bg-[green] text-light"
         {...args}
       >
         Failed Badge
       </Badge>
       <Badge
-        size={EnumSize.XXS}
-        shape={EnumShape.Round}
+        size="2xs"
+        shape="round"
         className="bg-[orange] text-light"
         {...args}
       >

web/common/src/components/Badge/Badge.stories.tsx

@@ -1,16 +1,13 @@
 import { Slot } from '@radix-ui/react-slot'
-import { type VariantProps } from 'class-variance-authority'
 import React from 'react'
 
-import { type Size, type Shape } from '@/types/enums'
+import type { Shape, Size } from '@/types'
 import { cn } from '@/utils'
-import { badgeVariants } from './help'
+import { cva } from 'class-variance-authority'
 
 import './Badge.css'
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> {
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   asChild?: boolean
   size?: Size
   shape?: Shape
@@ -30,3 +27,33 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
   },
 )
 Badge.displayName = 'Badge'
+
+const size: Record<Size, string> = {
+  '2xs': 'h-5 px-2 text-2xs leading-none rounded-2xs',
+  xs: 'h-6 px-2 text-2xs rounded-xs',
+  s: 'h-7 px-3 text-xs rounded-sm',
+  m: 'h-8 px-4 rounded-md',
+  l: 'h-9 px-4 rounded-lg',
+  xl: 'h-10 px-4 rounded-xl',
+  '2xl': 'h-11 px-6 rounded-2xl',
+}
+
+const shape: Record<Shape, string> = {
+  square: 'rounded-none',
+  round: 'rounded-inherit',
+  pill: 'rounded-full',
+}
+
+const badgeVariants = cva(
+  'bg-badge-background text-badge-foreground font-mono inline-flex align-middle items-center justify-center gap-2 leading-none whitespace-nowrap font-semibold',
+  {
+    variants: {
+      size,
+      shape,
+    },
+    defaultVariants: {
+      size: 's',
+      shape: 'round',
+    },
+  },
+)

web/common/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,31 @@
+:root {
+  --color-button-primary-background: var(--color-action);
+  --color-button-primary-foreground: var(--color-light);
+  --color-button-primary-hover: var(--color-action-hover);
+  --color-button-primary-active: var(--color-action-active);
+
+  --color-button-secondary-background: var(--color-neutral-100);
+  --color-button-secondary-foreground: var(--color-prose);
+  --color-button-secondary-hover: var(--color-neutral-125);
+  --color-button-secondary-active: var(--color-neutral-150);
+
+  --color-button-alternative-background: var(--color-light);
+  --color-button-alternative-foreground: var(--color-prose);
+  --color-button-alternative-hover: var(--color-neutral-125);
+  --color-button-alternative-active: var(--color-neutral-150);
+
+  --color-button-destructive-background: var(--color-neutral-100);
+  --color-button-destructive-foreground: var(--color-destructive-foreground);
+  --color-button-destructive-hover: var(--color-neutral-125);
+  --color-button-destructive-active: var(--color-neutral-150);
+
+  --color-button-danger-background: var(--color-destructive);
+  --color-button-danger-foreground: var(--color-light);
+  --color-button-danger-hover: var(--color-destructive-hover);
+  --color-button-danger-active: var(--color-destructive-active);
+
+  --color-button-transparent-background: transparent;
+  --color-button-transparent-foreground: var(--color-prose);
+  --color-button-secondary-hover: var(--color-neutral-125);
+  --color-button-secondary-active: var(--color-neutral-150);
+}