feat(web_common): make simpler including common package directly within repo (#5523)

Author: mykalmax

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

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

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
-import type { Shape, Size } from '@/types'
+import type { Shape, Size } from '@sqlmesh-common/types'
 import { Badge } from './Badge'
 
 const meta: Meta<typeof Badge> = {

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

@@ -1,8 +1,8 @@
 import { Slot } from '@radix-ui/react-slot'
 import React from 'react'
 
-import type { Shape, Size } from '@/types'
-import { cn } from '@/utils'
+import type { Shape, Size } from '@sqlmesh-common/types'
+import { cn } from '@sqlmesh-common/utils'
 import { cva } from 'class-variance-authority'
 
 import './Badge.css'

web/common/src/components/Button/Button.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-button-primary-background: var(--color-action);
   --color-button-primary-foreground: var(--color-light);
   --color-button-primary-hover: var(--color-action-hover);

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import type { Size } from '@/types'
+import type { Size } from '@sqlmesh-common/types'
 import { Button, type ButtonVariant } from './Button'
 import { fn, expect, userEvent, within } from 'storybook/test'
 

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

@@ -2,8 +2,8 @@ import React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils'
-import type { Shape, Size } from '@/types'
+import { cn } from '@sqlmesh-common/utils'
+import type { Shape, Size } from '@sqlmesh-common/types'
 
 import './Button.css'
 

web/common/src/components/CopyButton/CopyButton.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
 
-import { Button, type ButtonProps } from '@/components/Button/Button'
-import { useCopyClipboard } from '@/hooks/useCopyClipboard'
+import {
+  Button,
+  type ButtonProps,
+} from '@sqlmesh-common/components/Button/Button'
+import { useCopyClipboard } from '@sqlmesh-common/hooks/useCopyClipboard'
 
 export interface CopyButtonProps extends Omit<ButtonProps, 'children'> {
   text: string

web/common/src/components/HorizontalContainer/HorizontalContainer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { cn } from '@/utils'
+import { cn } from '@sqlmesh-common/utils'
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer'
 
 export interface HorizontalContainerProps

web/common/src/components/Input/Input.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
   --color-input-background: var(--color-light);
   --color-input-background-translucid: var(--color-neutral-5);
   --color-input-foreground: var(--color-prose);

web/common/src/components/Input/Input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { cn } from '@/utils'
-import type { Size } from '@/types'
+import { cn } from '@sqlmesh-common/utils'
+import type { Size } from '@sqlmesh-common/types'
 import { cva } from 'class-variance-authority'
 
 import './Input.css'