feat(ui): add Modal component

.changeset/curly-parents-drive.md

@@ -0,0 +1,6 @@
+---
+"@shipfox/react-ui": minor
+"@shipfox/vitest": minor
+---
+
+Add Argos CI Upload Screenshots

.changeset/soft-swans-press.md

@@ -0,0 +1,5 @@
+---
+"@shipfox/react-ui": minor
+---
+
+Add Modal components

biome.json

@@ -17,7 +17,8 @@
       "!**/out",
       "!**/coverage",
       "!**/nix/store",
-      "!**/storybook-static"
+      "!**/storybook-static",
+      "!**/screenshots"
     ],
     "ignoreUnknown": false
   },

libs/react/ui/.storybook/preview.tsx

@@ -9,6 +9,17 @@ const withTheme: Decorator = (Story, context) => {
 const preview: Preview = {
   decorators: [withTheme],
   parameters: {
+    viewport: {
+      viewports: {
+        large: {
+          name: 'Large Viewport',
+          styles: {
+            width: '1280px',
+            height: '2000px',
+          },
+        },
+      },
+    },
     options: {
       storySort: {
         method: 'alphabetical',

libs/react/ui/index.css

@@ -192,7 +192,7 @@
   --background-contrast-pressed: var(--color-neutral-700);
   --background-contrast-base: var(--color-neutral-900);
   --background-neutral-background: var(--color-neutral-50);
-  --background-backdrop-backdrop: var(--color-neutral-0);
+  --background-backdrop-backdrop: var(--color-alpha-black-64);
 
   /* Button Background */
   --background-button-transparent-default: var(--color-alpha-white-0);

libs/react/ui/package.json

@@ -42,7 +42,8 @@
     "recharts": "^3.1.0",
     "shiki": "^3.15.0",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.2.0"
+    "tailwind-merge": "^3.2.0",
+    "vaul": "^1.1.1"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.19.3",

libs/react/ui/src/components/code-block/code-block-footer.tsx

@@ -1,5 +1,6 @@
 import {Slot} from '@radix-ui/react-slot';
 import {Icon} from 'components/icon/icon';
+import {Text} from 'components/typography';
 import type {ComponentProps, HTMLAttributes, ReactNode} from 'react';
 import {cn} from 'utils/cn';
 
@@ -53,22 +54,12 @@ export function CodeBlockFooter({
       className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}
       {...props}
     >
-      <div className="flex shrink-0 items-center justify-center size-20 text-tag-success-icon">
-        {defaultIcon}
-      </div>
+      <CodeBlockFooterIcon className="text-tag-success-icon">{defaultIcon}</CodeBlockFooterIcon>
       {(message || description) && (
-        <div className="flex flex-col items-start justify-center gap-0">
-          {message && (
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base">
-              {message}
-            </div>
-          )}
-          {description && (
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle">
-              {description}
-            </div>
-          )}
-        </div>
+        <CodeBlockFooterContent>
+          {message && <CodeBlockFooterMessage>{message}</CodeBlockFooterMessage>}
+          {description && <CodeBlockFooterDescription>{description}</CodeBlockFooterDescription>}
+        </CodeBlockFooterContent>
       )}
     </Comp>
   );
@@ -112,7 +103,7 @@ export function CodeBlockFooterContent({
   return (
     <Comp
       data-slot="code-block-footer-content"
-      className={cn('flex flex-col items-start justify-center gap-0', className)}
+      className={cn('flex flex-col items-start justify-center gap-0 min-w-0 flex-1', className)}
       {...props}
     >
       {children}
@@ -130,19 +121,27 @@ export function CodeBlockFooterMessage({
   children,
   ...props
 }: CodeBlockFooterMessageProps) {
-  const Comp = asChild ? Slot : 'div';
+  if (asChild) {
+    return (
+      <Slot
+        data-slot="code-block-footer-message"
+        className={cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs', className)}
+        {...props}
+      >
+        {children}
+      </Slot>
+    );
+  }
 
   return (
-    <Comp
+    <Text
       data-slot="code-block-footer-message"
-      className={cn(
-        'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base',
-        className,
-      )}
+      size="xs"
+      className={cn('overflow-hidden text-ellipsis whitespace-nowrap', className)}
       {...props}
     >
       {children}
-    </Comp>
+    </Text>
   );
 }
 
@@ -156,18 +155,26 @@ export function CodeBlockFooterDescription({
   children,
   ...props
 }: CodeBlockFooterDescriptionProps) {
-  const Comp = asChild ? Slot : 'div';
+  if (asChild) {
+    return (
+      <Slot
+        data-slot="code-block-footer-description"
+        className={cn('text-xs text-foreground-neutral-subtle', className)}
+        {...props}
+      >
+        {children}
+      </Slot>
+    );
+  }
 
   return (
-    <Comp
+    <Text
       data-slot="code-block-footer-description"
-      className={cn(
-        'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle',
-        className,
-      )}
+      size="xs"
+      className={cn('text-foreground-neutral-subtle', className)}
       {...props}
     >
       {children}
-    </Comp>
+    </Text>
   );
 }

libs/react/ui/src/components/dynamic-item/dynamic-item.stories.tsx

@@ -1,14 +1,14 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import {Button} from 'components/button/button';
 import {ItemTitle} from 'components/item';
+import {MovingBorder} from 'components/moving-border';
 import {cn} from 'utils/cn';
 import illustration1 from '../../assets/illustration-1.svg';
 import illustration2 from '../../assets/illustration-2.svg';
 import illustrationBg from '../../assets/illustration-gradient.svg';
 import {Avatar} from '../avatar/avatar';
 import {AvatarGroup, AvatarGroupTooltip} from '../avatar/avatar-group';
 import {Icon} from '../icon/icon';
-import {MovingBorder} from '../moving-border/moving-border';
 import {DynamicItem} from './dynamic-item';
 
 const meta = {

libs/react/ui/src/components/icon/icon.tsx

@@ -2,6 +2,7 @@ import {
   type RemixiconComponentType,
   RiAddLine,
   RiArrowRightSLine,
+  RiBookOpenFill,
   RiCheckLine,
   RiCloseLine,
   RiFileCopyLine,
@@ -60,6 +61,7 @@ const iconsMap = {
   copy: RiFileCopyLine,
   addLine: RiAddLine,
   chevronRight: RiArrowRightSLine,
+  bookOpen: RiBookOpenFill,
 } as const satisfies Record<string, RemixiconComponentType>;
 
 export type IconName = keyof typeof iconsMap;

libs/react/ui/src/components/index.ts

@@ -10,6 +10,7 @@ export * from './inline-tips';
 export * from './input';
 export * from './item';
 export * from './label';
+export * from './modal';
 export * from './textarea';
 export * from './theme';
 export * from './toast';

libs/react/ui/src/components/modal/index.ts

@@ -0,0 +1,23 @@
+export type {
+  ModalContentProps,
+  ModalDescriptionProps,
+  ModalHeaderProps,
+  ModalOverlayProps,
+  ModalTitleProps,
+} from './modal';
+export {
+  Modal,
+  ModalBody,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalPortal,
+  ModalTitle,
+  ModalTrigger,
+  modalContentVariants,
+  modalDefaultTransition,
+  modalOverlayVariants,
+} from './modal';