clean up

Author: mykalmax

pnpm-lock.yaml

@@ -10,7 +10,6 @@ export default tseslint.config(
   tseslint.configs.recommended,
   {
     rules: {
-      '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/no-empty-object-type': 'off',
       '@typescript-eslint/no-unused-expressions': 'off',

web/common/eslint.config.mjs

@@ -3,43 +3,45 @@
   "version": "0.0.1",
   "devDependencies": {
     "@eslint/js": "^9.31.0",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.15",
-    "@tanstack/react-virtual": "^3.13.12",
-    "cmdk": "^1.1.1",
-    "fuse.js": "^7.1.0",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-onboarding": "^9.1.5",
     "@storybook/react-vite": "^9.1.5",
     "@tailwindcss/typography": "^0.5.16",
+    "@tanstack/react-virtual": "^3.13.12",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^20.11.25",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@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",
+    "cmdk": "^1.1.1",
     "eslint": "^9.31.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-storybook": "^9.1.5",
+    "fuse.js": "^7.1.0",
     "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",
+    "react-syntax-highlighter": "^15.6.6",
     "storybook": "^9.1.5",
     "syncpack": "^13.0.4",
     "tailwind-merge": "^3.3.1",
-    "tailwind-scrollbar": "^4.0.2",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.38.0",
@@ -70,18 +72,18 @@
   "main": "dist/sqlmesh-common.umd.js",
   "module": "dist/sqlmesh-common.es.js",
   "peerDependencies": {
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.15",
-    "@tanstack/react-virtual": "^3.13.12",
-    "cmdk": "^1.1.1",
-    "fuse.js": "^7.1.0",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/typography": "^0.5.16",
+    "@tanstack/react-virtual": "^3.13.12",
     "@xyflow/react": "^12.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "fuse.js": "^7.1.0",
     "lucide-react": "^0.542.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

web/common/package.json

@@ -18,9 +18,9 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     const Comp = asChild ? Slot : 'span'
     return (
       <Comp
+        data-component="Badge"
         className={cn(badgeVariants({ size, shape, className }))}
         ref={ref}
-        data-component="Badge"
         {...props}
       />
     )

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

@@ -28,6 +28,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : 'button'
     return (
       <Comp
+        data-component="Button"
         className={cn(
           buttonVariants({ variant, size, className }),
           disabled && 'pointer-events-none bg-neutral-150 text-prose',

web/common/src/components/Button/Button.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, within, userEvent, fn } from 'storybook/test'
+import { Code } from './Code'
+
+const meta: Meta<typeof Code> = {
+  title: 'Components/Code',
+  component: Code,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Code>
+
+export const Default: Story = {
+  args: {
+    content: `MODEL (
+  name tier1.compliance_application_affiliated_person,
+  owner 'data-infra',
+  start '2023-01-01',
+  cron '0 */4 * * *',
+  tags (creditrisk, tier1_mart),
+  dialect bigquery,
+  kind VIEW (
+    materialized FALSE
+  ),
+  virtual_environment_mode 'full'
+)
+SELECT
+  compliance_application_affiliated_person_internal_id,
+  compliance_application_affiliated_person_id,
+  effective_at,
+  updated_at,
+  business_affiliated_person_internal_id,
+  status,
+  address_city,
+  address_country,
+  address_line1,
+  address_line2,
+  address_post_code,
+  address_state,
+  birth_date,
+  email,
+  first_name,
+  ip_address,
+  last_name,
+  middle_name,
+  phone_nr,
+  ssn,
+  tags,
+  alloy_entity_external_id,
+  compliance_application_internal_id,
+  is_ubo,
+  is_control_person,
+  datastream_metadata__uuid,
+  datastream_metadata__source_timestamp
+FROM tier1.stg_pg__compliance_application_affiliated_persons
+    `,
+  },
+}

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

@@ -0,0 +1,49 @@
+import { cn } from '@/utils'
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { vs } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+import { CopyButton } from '../CopyButton/CopyButton'
+import { VerticalContainer } from '../VerticalContainer/VerticalContainer'
+
+export function Code({
+  content,
+  language = 'sql',
+  className,
+  hideNumbers = false,
+  wrap = false,
+  showCopy = true,
+}: {
+  content: string
+  language?: 'sql' | 'python' | 'yaml' | 'json' | 'diff'
+  hideNumbers?: boolean
+  wrap?: boolean
+  showCopy?: boolean
+  className?: string
+}) {
+  return (
+    <VerticalContainer
+      data-component="Code"
+      className={cn(
+        'relative p-2 rounded-2xl border border-neutral-10 font-mono text-xs',
+        className,
+      )}
+    >
+      {showCopy && (
+        <div className="flex justify-end flex-shrink-0 absolute top-2 right-4">
+          <CopyButton text={content}>
+            {copied => (copied ? 'Copied!' : 'Copy')}
+          </CopyButton>
+        </div>
+      )}
+      <VerticalContainer scroll>
+        <SyntaxHighlighter
+          language={language}
+          style={vs}
+          showLineNumbers={!hideNumbers}
+          wrapLines={wrap}
+        >
+          {content}
+        </SyntaxHighlighter>
+      </VerticalContainer>
+    </VerticalContainer>
+  )
+}

web/common/src/components/Code/Code.tsx

@@ -45,6 +45,7 @@ export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
     return (
       <Button
         ref={ref}
+        data-component="CopyButton"
         title={title}
         size={size}
         variant={variant}