@shipfox/react-ui 0.2.0 → 0.4.0

package/src/components/checkbox/checkbox.stories.tsx

@@ -0,0 +1,375 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code, Header} from 'components/typography';
+import {Checkbox, CheckboxLabel, CheckboxLinks} from '.';
+
+const meta = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: {control: 'boolean'},
+    checked: {control: 'boolean'},
+  },
+  args: {
+    size: 'md',
+    disabled: false,
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-32">
+      <div className="flex flex-col gap-16">
+        <Header variant="h4">Controlled Checkbox</Header>
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Use the controls below to change the checkbox state
+        </Code>
+        <Checkbox {...args} />
+      </div>
+
+      <div className="flex flex-col gap-32">
+        <Header variant="h4">All States</Header>
+        {(['sm', 'md', 'lg'] as const).map((size) => (
+          <div key={size} className="flex flex-wrap gap-16">
+            <Header variant="h4">Size: {size}</Header>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Unchecked
+              </Code>
+              <Checkbox size={size} />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Checked
+              </Code>
+              <Checkbox size={size} checked />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Indeterminate
+              </Code>
+              <Checkbox size={size} checked="indeterminate" />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Disabled (Unchecked)
+              </Code>
+              <Checkbox size={size} disabled />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Disabled (Checked)
+              </Code>
+              <Checkbox size={size} checked disabled />
+            </div>
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="text-foreground-neutral-subtle">
+                Focus
+              </Code>
+              <Checkbox size={size} className="focus" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+  parameters: {
+    pseudo: {
+      focusVisible: '.focus',
+    },
+  },
+};
+
+export const CheckboxLabelStory: StoryObj = {
+  render: () => (
+    <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        CHECKBOX LABEL - WITHOUT BORDER
+      </Code>
+      <div className="flex flex-col gap-16">
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Unchecked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Hover - Unchecked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            className="hover"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Checked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Hover - Checked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+            className="hover"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Indeterminate
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked="indeterminate"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Disabled - Checked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            checked
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            disabled
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Disabled - Unchecked
+          </Code>
+          <CheckboxLabel
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            disabled
+          />
+        </div>
+      </div>
+
+      <Code variant="label" className="text-foreground-neutral-subtle mt-32">
+        CHECKBOX LABEL - WITH BORDER
+      </Code>
+      <div className="flex flex-col gap-16">
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Unchecked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-default-unchecked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            border
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Hover - Unchecked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-hover-unchecked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            border
+            className="hover"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Focus - Unchecked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-focus-unchecked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            border
+            className="focus"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Checked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-default-checked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+            border
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Hover - Checked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-hover-checked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+            border
+            className="hover"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Focus - Checked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-focus-checked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+            border
+            className="focus"
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Default - Indeterminate
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-default-indeterminate"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked="indeterminate"
+            border
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Disabled - Unchecked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-disabled-unchecked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            disabled
+            border
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Disabled - Checked
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-disabled-checked"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked
+            disabled
+            border
+          />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
+            Disabled - Indeterminate
+          </Code>
+          <CheckboxLabel
+            id="checkbox-border-disabled-indeterminate"
+            label="Label"
+            optional
+            showInfoIcon
+            description="The quick brown fox jumps over a lazy dog."
+            checked="indeterminate"
+            disabled
+            border
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+CheckboxLabelStory.parameters = {
+  pseudo: {
+    hover: '.hover',
+    focusVisible: '.focus',
+  },
+};
+
+export const CheckboxLinksStory: StoryObj = {
+  args: {
+    disabled: true,
+  },
+
+  render: () => (
+    <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        CHECKBOX LINKS
+      </Code>
+      <div className="flex flex-col gap-16">
+        <CheckboxLinks
+          id="checkbox-links-default"
+          label="Accept policies"
+          links={[
+            {label: 'Terms of use', href: '#'},
+            {label: 'Privacy Policy', href: '#'},
+          ]}
+        />
+        <CheckboxLinks
+          id="checkbox-links-checked"
+          label="Accept policies"
+          links={[
+            {label: 'Terms of use', href: '#'},
+            {label: 'Privacy Policy', href: '#'},
+          ]}
+          checked
+        />
+      </div>
+    </div>
+  ),
+};

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,71 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const checkboxVariants = cva(
+  'peer shrink-0 border-none transition-all duration-100 outline-none cursor-pointer',
+  {
+    variants: {
+      size: {
+        sm: 'size-16',
+        md: 'size-20',
+        lg: 'size-24',
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+    },
+  },
+);
+
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> &
+  VariantProps<typeof checkboxVariants>;
+
+export function Checkbox({
+  className,
+  size,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  ...props
+}: CheckboxProps) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onCheckedChange={onCheckedChange}
+      className={cn(
+        checkboxVariants({size}),
+        // Unchecked state - default
+        'rounded-4 bg-checkbox-unchecked-bg shadow-checkbox-unchecked',
+        // Unchecked state - hover
+        'hover:bg-checkbox-unchecked-bg-hover',
+        // Unchecked state - focus
+        'focus-visible:shadow-checkbox-unchecked-focus',
+        // Checked state
+        'data-[state=checked]:bg-checkbox-checked-bg data-[state=checked]:text-foreground-neutral-on-color data-[state=checked]:shadow-checkbox-checked',
+        'data-[state=checked]:hover:bg-checkbox-checked-bg-hover',
+        'data-[state=checked]:focus-visible:shadow-checkbox-checked-focus',
+        // Indeterminate state
+        'data-[state=indeterminate]:bg-checkbox-indeterminate-bg data-[state=indeterminate]:text-foreground-neutral-on-color data-[state=indeterminate]:shadow-checkbox-indeterminate',
+        'data-[state=indeterminate]:hover:bg-checkbox-indeterminate-bg-hover',
+        'data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus',
+        // Disabled state
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        {checked === 'indeterminate' ? (
+          <Icon name="subtractLine" className="size-16" aria-hidden="true" />
+        ) : (
+          <Icon name="check" className="size-16" aria-hidden="true" />
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}

package/src/components/checkbox/index.ts

@@ -0,0 +1,3 @@
+export * from './checkbox';
+export * from './checkbox-label';
+export * from './checkbox-links';

package/src/components/code-block/code-block-footer.tsx

@@ -0,0 +1,173 @@
+import {Slot} from '@radix-ui/react-slot';
+import {Icon} from 'components/icon/icon';
+import type {ComponentProps, HTMLAttributes, ReactNode} from 'react';
+import {cn} from 'utils/cn';
+
+export type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {
+  asChild?: boolean;
+  state?: 'running' | 'done';
+  message?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+};
+
+export function CodeBlockFooter({
+  className,
+  asChild = false,
+  state = 'running',
+  message,
+  description,
+  icon,
+  children,
+  ...props
+}: CodeBlockFooterProps) {
+  const Comp = asChild ? Slot : 'div';
+
+  const defaultIcon =
+    icon ??
+    (state === 'running' ? (
+      <Icon name="shipfox" className="size-20" aria-hidden="true" />
+    ) : (
+      <Icon
+        name="checkCircleSolid"
+        className="size-20 text-foreground-neutral-base"
+        aria-hidden="true"
+      />
+    ));
+
+  if (asChild || children) {
+    return (
+      <Comp
+        data-slot="code-block-footer"
+        className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  }
+
+  return (
+    <Comp
+      data-slot="code-block-footer"
+      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>
+      {(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>
+      )}
+    </Comp>
+  );
+}
+
+export type CodeBlockFooterIconProps = ComponentProps<'div'> & {
+  asChild?: boolean;
+};
+
+export function CodeBlockFooterIcon({
+  className,
+  asChild = false,
+  children,
+  ...props
+}: CodeBlockFooterIconProps) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      data-slot="code-block-footer-icon"
+      className={cn('flex shrink-0 items-center justify-center size-20', className)}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+export type CodeBlockFooterContentProps = ComponentProps<'div'> & {
+  asChild?: boolean;
+};
+
+export function CodeBlockFooterContent({
+  className,
+  asChild = false,
+  children,
+  ...props
+}: CodeBlockFooterContentProps) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      data-slot="code-block-footer-content"
+      className={cn('flex flex-col items-start justify-center gap-0', className)}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+export type CodeBlockFooterMessageProps = ComponentProps<'div'> & {
+  asChild?: boolean;
+};
+
+export function CodeBlockFooterMessage({
+  className,
+  asChild = false,
+  children,
+  ...props
+}: CodeBlockFooterMessageProps) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      data-slot="code-block-footer-message"
+      className={cn(
+        'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+export type CodeBlockFooterDescriptionProps = ComponentProps<'div'> & {
+  asChild?: boolean;
+};
+
+export function CodeBlockFooterDescription({
+  className,
+  asChild = false,
+  children,
+  ...props
+}: CodeBlockFooterDescriptionProps) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      data-slot="code-block-footer-description"
+      className={cn(
+        'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}