@luanthnh/cntt-ui 0.1.8 → 0.1.9

package/components/ui/HoverCard/index.stories.tsx

@@ -1,38 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Avatar, AvatarFallback, AvatarImage } from '../Avatar';
-import { HoverCard, HoverCardContent, HoverCardTrigger } from './index';
-
-const meta: Meta<typeof HoverCard> = {
-  title: 'UI/HoverCard',
-  component: HoverCard,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof HoverCard>;
-
-export const Default: Story = {
-  render: (args) => (
-    <HoverCard {...args}>
-      <HoverCardTrigger asChild>
-        <span className="cursor-pointer underline underline-offset-4">@nextjs</span>
-      </HoverCardTrigger>
-      <HoverCardContent className="w-80">
-        <div className="flex justify-between space-x-4">
-          <Avatar>
-            <AvatarImage src="https://github.com/vercel.png" />
-            <AvatarFallback>VC</AvatarFallback>
-          </Avatar>
-          <div className="space-y-1">
-            <h4 className="text-sm font-semibold">@nextjs</h4>
-            <p className="text-sm">The React Framework – created and maintained by @vercel.</p>
-            <div className="flex items-center pt-2">
-              <span className="text-muted-foreground text-xs">Joined December 2021</span>
-            </div>
-          </div>
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  ),
-};

package/components/ui/HoverCard/index.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-
-import { cn } from '@/lib/utils';
-
-function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
-}
-
-function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
-}
-
-function HoverCardContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className,
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  );
-}
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };

package/components/ui/Icons/index.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Icons } from './index';
-
-const meta: Meta = {
-  title: 'UI/Icons',
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
-  render: () => (
-    <div className="grid grid-cols-4 gap-4">
-      {Object.entries(Icons).map(([name, Icon]) => (
-        <div
-          key={name}
-          className="flex flex-col items-center justify-center gap-2 rounded-lg border p-4"
-        >
-          <Icon className="h-6 w-6" />
-          <span className="text-muted-foreground text-xs">{name}</span>
-        </div>
-      ))}
-    </div>
-  ),
-};

package/components/ui/Icons/index.tsx

@@ -1,33 +0,0 @@
-import { type ForwardRefExoticComponent, type RefAttributes, type SVGProps } from 'react';
-import arrowLeft from '@/assets/icons/arrow-left.svg';
-import file from '@/assets/icons/file.svg';
-import globe from '@/assets/icons/globe.svg';
-import logo_line from '@/assets/icons/logo-line.svg';
-import next from '@/assets/icons/next.svg';
-import panel_left_expand from '@/assets/icons/panel-left-expand.svg';
-import placeholder from '@/assets/icons/placeholder.svg';
-import vercel from '@/assets/icons/vercel.svg';
-import window from '@/assets/icons/window.svg';
-
-const IconList = {
-  file,
-  globe,
-  next,
-  vercel,
-  window,
-  placeholder,
-  arrowLeft,
-  panel_left_expand,
-  logo_line,
-};
-
-type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
-type ComponentAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
-interface IconProps extends ComponentAttributes {
-  size?: string | number;
-  absoluteStrokeWidth?: boolean;
-}
-
-export type Icon = ForwardRefExoticComponent<IconProps>;
-
-export const Icons = IconList as Record<keyof typeof IconList, Icon>;

package/components/ui/ImageWithFallback/index.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ImageWithFallback } from './index';
-
-const meta: Meta<typeof ImageWithFallback> = {
-  title: 'UI/ImageWithFallback',
-  component: ImageWithFallback,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof ImageWithFallback>;
-
-export const Default: Story = {
-  args: {
-    src: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=500&auto=format&fit=crop&q=60',
-    alt: 'Beautiful Gradient',
-    width: 300,
-    height: 200,
-    className: 'rounded-lg object-cover',
-  },
-};
-
-export const Fallback: Story = {
-  args: {
-    src: 'invalid-image-url',
-    alt: 'Failed image',
-    width: 300,
-    height: 200,
-    className: 'rounded-lg object-cover',
-  },
-};

package/components/ui/ImageWithFallback/index.tsx

@@ -1,34 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-
-const ERROR_IMG_SRC = '/images/placeholder.svg';
-
-export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
-  const [didError, setDidError] = useState(false);
-
-  const handleError = () => {
-    setDidError(true);
-  };
-
-  const { src, alt, style, className, ...rest } = props;
-
-  return didError ? (
-    <div
-      className={`dark:bg-card inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
-      style={style}
-    >
-      <div className="flex h-full w-full items-center justify-center">
-        <img
-          src={ERROR_IMG_SRC}
-          alt="Error loading image"
-          className={className}
-          {...rest}
-          data-original-url={src}
-        />
-      </div>
-    </div>
-  ) : (
-    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
-  );
-}

package/components/ui/Input/index.stories.tsx

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Input } from './index';
-
-const meta: Meta<typeof Input> = {
-  title: 'UI/Input',
-  component: Input,
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['text', 'password', 'email', 'number', 'tel', 'url'],
-    },
-    disabled: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Type something...',
-  },
-};
-
-export const Password: Story = {
-  args: {
-    type: 'password',
-    placeholder: 'Enter password...',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    placeholder: 'Disabled input',
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    defaultValue: 'Hello World',
-  },
-};

package/components/ui/Input/index.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-primary-100 flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-base file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-base dark:border-gray-700 dark:shadow-gray-900/50',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };

package/components/ui/InputOtp/index.stories.tsx

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './index';
-
-const meta: Meta<typeof InputOTP> = {
-  title: 'UI/InputOTP',
-  component: InputOTP,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof InputOTP>;
-
-export const Default: Story = {
-  args: {
-    maxLength: 6,
-  },
-  render: (args) => {
-    return (
-      <InputOTP maxLength={args.maxLength} containerClassName={args.containerClassName}>
-        <InputOTPGroup>
-          <InputOTPSlot index={0} />
-          <InputOTPSlot index={1} />
-          <InputOTPSlot index={2} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-          <InputOTPSlot index={3} />
-          <InputOTPSlot index={4} />
-          <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-    );
-  },
-};

package/components/ui/InputOtp/index.tsx

@@ -1,70 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { OTPInput, OTPInputContext } from 'input-otp';
-import { MinusIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-function InputOTP({
-  className,
-  containerClassName,
-  ...props
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string;
-}) {
-  return (
-    <OTPInput
-      data-slot="input-otp"
-      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}
-      className={cn('disabled:cursor-not-allowed', className)}
-      {...props}
-    />
-  );
-}
-
-function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="input-otp-group" className={cn('flex items-center', className)} {...props} />
-  );
-}
-
-function InputOTPSlot({
-  index,
-  className,
-  ...props
-}: React.ComponentProps<'div'> & {
-  index: number;
-}) {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
-
-  return (
-    <div
-      data-slot="input-otp-slot"
-      data-active={isActive}
-      className={cn(
-        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
-        className,
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
-      <MinusIcon />
-    </div>
-  );
-}
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/components/ui/Label/index.stories.tsx

@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Label } from './index';
-
-const meta: Meta<typeof Label> = {
-  title: 'UI/Label',
-  component: Label,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Label>;
-
-export const Default: Story = {
-  args: {
-    children: 'Label Text',
-  },
-};

package/components/ui/Label/index.tsx

@@ -1,21 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-
-import { cn } from '@/lib/utils';
-
-function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        'flex items-center gap-2 text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Label };

package/components/ui/Marquee/index.stories.tsx

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Marquee } from './index';
-
-const meta: Meta<typeof Marquee> = {
-  title: 'UI/Marquee',
-  component: Marquee,
-  tags: ['autodocs'],
-  argTypes: {
-    direction: {
-      control: 'select',
-      options: ['left', 'up'],
-    },
-    pauseOnHover: {
-      control: 'boolean',
-    },
-    reverse: {
-      control: 'boolean',
-    },
-    fade: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Marquee>;
-
-const logos = [
-  'Google',
-  'Microsoft',
-  'Apple',
-  'Amazon',
-  'Meta',
-  'Netflix',
-  'Twitter',
-  'LinkedIn',
-  'Adobe',
-  'Spotify',
-];
-
-export const Default: Story = {
-  args: {
-    children: logos.map((name) => (
-      <div
-        key={name}
-        className="bg-primary/10 text-primary border-primary/20 flex items-center justify-center rounded-xl border px-8 py-4 font-bold"
-      >
-        {name}
-      </div>
-    )),
-    direction: 'left',
-  },
-};
-
-export const Up: Story = {
-  render: (args) => (
-    <div className="h-100">
-      <Marquee {...args} direction="up">
-        {logos.map((name) => (
-          <div
-            key={name}
-            className="bg-primary/10 text-primary border-primary/20 flex items-center justify-center rounded-xl border px-4 py-8 font-bold"
-          >
-            {name}
-          </div>
-        ))}
-      </Marquee>
-    </div>
-  ),
-};

package/components/ui/Marquee/index.tsx

@@ -1,65 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-import { cn } from '@/lib/utils';
-
-export type MarqueeProps = HTMLAttributes<HTMLDivElement> & {
-  children: ReactNode;
-  direction?: 'left' | 'up';
-  pauseOnHover?: boolean;
-  reverse?: boolean;
-  fade?: boolean;
-  innerClassName?: string;
-  numberOfCopies?: number;
-};
-
-export function Marquee({
-  children,
-  direction = 'left',
-  pauseOnHover = true,
-  reverse = false,
-  fade = true,
-  className,
-  innerClassName,
-  numberOfCopies = 3,
-  ...rest
-}: MarqueeProps) {
-  return (
-    <div
-      className={cn(
-        'group flex gap-[1rem] overflow-hidden',
-        direction === 'left' ? 'flex-row' : 'flex-col',
-        className,
-      )}
-      style={{
-        maskImage: fade
-          ? `linear-gradient(${
-              direction === 'left' ? 'to right' : 'to bottom'
-            }, transparent 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, transparent 100%)`
-          : undefined,
-        WebkitMaskImage: fade
-          ? `linear-gradient(${
-              direction === 'left' ? 'to right' : 'to bottom'
-            }, transparent 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, transparent 100%)`
-          : undefined,
-      }}
-      {...rest}
-    >
-      {Array(numberOfCopies)
-        .fill(0)
-        .map((_, i) => (
-          <div
-            key={i}
-            className={cn(
-              'flex shrink-0 justify-around gap-[1rem] py-3 [--gap:1rem]',
-              direction === 'left' ? 'marquee-left flex-row' : 'marquee-up flex-col',
-              pauseOnHover && 'group-hover:[animation-play-state:paused]',
-              reverse && 'direction-reverse',
-              innerClassName,
-            )}
-          >
-            {children}
-          </div>
-        ))}
-    </div>
-  );
-}

package/components/ui/Menubar/index.stories.tsx

@@ -1,116 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from './index';
-
-const meta: Meta<typeof Menubar> = {
-  title: 'UI/Menubar',
-  component: Menubar,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Menubar>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Menubar {...args}>
-      <MenubarMenu>
-        <MenubarTrigger>File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            New Window <MenubarShortcut>⌘N</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>New Incognito Window</MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>Share</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Email link</MenubarItem>
-              <MenubarItem>Messages</MenubarItem>
-              <MenubarItem>Notes</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarSeparator />
-          <MenubarItem>
-            Print... <MenubarShortcut>⌘P</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>Find</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Search the web</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Find...</MenubarItem>
-              <MenubarItem>Find Next</MenubarItem>
-              <MenubarItem>Find Previous</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarSeparator />
-          <MenubarItem>Cut</MenubarItem>
-          <MenubarItem>Copy</MenubarItem>
-          <MenubarItem>Paste</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>View</MenubarTrigger>
-        <MenubarContent>
-          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-          <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
-          <MenubarSeparator />
-          <MenubarItem inset>
-            Reload <MenubarShortcut>⌘R</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled inset>
-            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Hide Sidebar</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Profiles</MenubarTrigger>
-        <MenubarContent>
-          <MenubarRadioGroup value="benoit">
-            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-          </MenubarRadioGroup>
-          <MenubarSeparator />
-          <MenubarItem inset>Edit...</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Add Profile...</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-};