@shipfox/react-ui 0.0.1

package/src/components/icon/custom/spinner.tsx

@@ -0,0 +1,98 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function SpinnerIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>Spinner</title>
+      <path
+        opacity="0.55"
+        d="M10.583 1.91667C10.583 1.41041 10.9934 1 11.4997 1C12.0059 1 12.4163 1.41041 12.4163 1.91667V5.58333C12.4163 6.08959 12.0059 6.5 11.4997 6.5C10.9934 6.5 10.583 6.08959 10.583 5.58333V1.91667Z"
+        fill="currentColor"
+        stroke="currentColor"
+        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
+        strokeWidth="0.916667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <rect
+        x="10.583"
+        y="17.5"
+        width="1.83333"
+        height="5.5"
+        rx="0.916667"
+        fill="currentColor"
+        stroke="currentColor"
+        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
+        strokeWidth="0.916667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        opacity="0.25"
+        d="M1.41667 12.918C0.910406 12.918 0.5 12.5076 0.5 12.0013C0.5 11.495 0.910405 11.0846 1.41667 11.0846L5.08333 11.0846C5.58959 11.0846 6 11.495 6 12.0013C6 12.5076 5.58959 12.918 5.08333 12.918L1.41667 12.918Z"
+        fill="currentColor"
+        stroke="currentColor"
+        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
+        strokeWidth="0.916667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        opacity="0.75"
+        d="M17.9167 12.918C17.4104 12.918 17 12.5076 17 12.0013C17 11.495 17.4104 11.0846 17.9167 11.0846L21.5833 11.0846C22.0896 11.0846 22.5 11.495 22.5 12.0013C22.5 12.5076 22.0896 12.918 21.5833 12.918L17.9167 12.918Z"
+        fill="currentColor"
+        stroke="currentColor"
+        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
+        strokeWidth="0.916667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        opacity="0.38"
+        d="M3.7224 5.52123C3.36442 5.16325 3.36442 4.58285 3.7224 4.22487C4.08038 3.86689 4.66078 3.86688 5.01876 4.22487L7.61149 6.81759C7.96947 7.17557 7.96947 7.75597 7.61149 8.11395C7.25351 8.47193 6.67311 8.47193 6.31512 8.11395L3.7224 5.52123Z"
+        fill="currentColor"
+        stroke="currentColor"
+        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
+        strokeWidth="0.916667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <rect
+        opacity="0.88"
+        x="14.7412"
+        y="16.5391"
+        width="1.83333"
+        height="5.5"
+        rx="0.916667"
+        transform="rotate(-45 14.7412 16.5391)"
+        fill="currentColor"
+        stroke="currentColor"
+        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
+        strokeWidth="0.916667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        opacity="0.13"
+        d="M5.0183 19.7796C4.66032 20.1375 4.07992 20.1375 3.72194 19.7796C3.36396 19.4216 3.36396 18.8412 3.72194 18.4832L6.31466 15.8905C6.67264 15.5325 7.25304 15.5325 7.61102 15.8905C7.969 16.2484 7.969 16.8288 7.61102 17.1868L5.0183 19.7796Z"
+        fill="currentColor"
+        stroke="currentColor"
+        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
+        strokeWidth="0.916667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        opacity="0.63"
+        d="M16.6853 8.11354C16.3273 8.47152 15.7469 8.47152 15.3889 8.11354C15.0309 7.75556 15.0309 7.17516 15.3889 6.81718L17.9817 4.22445C18.3396 3.86647 18.92 3.86647 19.278 4.22445C19.636 4.58243 19.636 5.16283 19.278 5.52081L16.6853 8.11354Z"
+        fill="currentColor"
+        stroke="currentColor"
+        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
+        strokeWidth="0.916667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/components/icon/custom/thunder.tsx

@@ -0,0 +1,17 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function ThunderIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Thunder</title>
+      <path d="M14.2707 10.1872H19.5832L10.729 22V13.8219H5.4165L14.2707 2V10.1872Z" />
+    </svg>
+  );
+}

package/src/components/icon/custom/x-circle-solid.tsx

@@ -0,0 +1,24 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function XCircleSolidIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg
+      width="19"
+      height="18"
+      viewBox="0 0 19 18"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>X Circle Solid</title>
+      <g clipPath="url(#clip0_6552_160759)">
+        <path d="M9.49964 0.464844C4.79458 0.464844 0.966309 4.29311 0.966309 8.99818C0.966309 13.7032 4.79458 17.5315 9.49964 17.5315C14.2047 17.5315 18.033 13.7032 18.033 8.99818C18.033 4.29311 14.2047 0.464844 9.49964 0.464844ZM12.9983 11.3662C13.3108 11.6787 13.3108 12.1854 12.9983 12.4979C12.8426 12.6536 12.6378 12.7326 12.433 12.7326C12.2282 12.7326 12.0234 12.6547 11.8676 12.4979L9.49964 10.1299L7.13164 12.4979C6.97591 12.6536 6.77111 12.7326 6.56631 12.7326C6.36151 12.7326 6.15671 12.6547 6.00097 12.4979C5.68844 12.1854 5.68844 11.6787 6.00097 11.3662L8.36897 8.99818L6.00097 6.63018C5.68844 6.31764 5.68844 5.81098 6.00097 5.49844C6.31351 5.18591 6.82018 5.18591 7.13271 5.49844L9.50071 7.86644L11.8687 5.49844C12.1812 5.18591 12.6879 5.18591 13.0004 5.49844C13.313 5.81098 13.313 6.31764 13.0004 6.63018L10.6324 8.99818L13.0004 11.3662H12.9983Z" />
+      </g>
+      <defs>
+        <clipPath id="clip0_6552_160759">
+          <rect width="18" height="18" fill="white" transform="translate(0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/components/icon/icon.stories.tsx

@@ -0,0 +1,29 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from 'components/typography';
+import {Icon, iconNames} from './icon';
+
+const meta = {
+  title: 'Components/Icon',
+  component: Icon,
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Gallery: Story = {
+  args: {name: 'google'},
+  render: (args) => (
+    <div className="flex flex-col gap-16">
+      <div className="grid grid-cols-8 gap-16">
+        {iconNames.toSorted().map((name) => (
+          <div key={name} className="flex flex-col items-center gap-4">
+            <Icon {...args} name={name} />
+            <Code variant="label" className="text-foreground-neutral-subtle">
+              {name}
+            </Code>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};

package/src/components/icon/icon.tsx

@@ -0,0 +1,42 @@
+import {type RemixiconComponentType, RiGoogleFill, RiMicrosoftFill} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+import {
+  BadgeIcon,
+  CheckCircleSolidIcon,
+  CircleDottedLineIcon,
+  ComponentFillIcon,
+  ComponentLineIcon,
+  EllipseMiniSolidIcon,
+  InfoTooltipFillIcon,
+  ResizeIcon,
+  SpinnerIcon,
+  ThunderIcon,
+  XCircleSolidIcon,
+} from './custom';
+
+const iconsMap = {
+  google: RiGoogleFill,
+  microsoft: RiMicrosoftFill,
+  badge: BadgeIcon,
+  checkCircleSolid: CheckCircleSolidIcon,
+  circleDottedLine: CircleDottedLineIcon,
+  componentFill: ComponentFillIcon,
+  xCircleSolid: XCircleSolidIcon,
+  thunder: ThunderIcon,
+  resize: ResizeIcon,
+  infoTooltipFill: InfoTooltipFillIcon,
+  spinner: SpinnerIcon,
+  ellipseMiniSolid: EllipseMiniSolidIcon,
+  componentLine: ComponentLineIcon,
+} as const satisfies Record<string, RemixiconComponentType>;
+
+export type IconName = keyof typeof iconsMap;
+export const iconNames = Object.keys(iconsMap) as IconName[];
+
+type BaseIconProps = ComponentProps<typeof RiGoogleFill>;
+type IconProps = {name: IconName} & Omit<BaseIconProps, 'name'>;
+
+export function Icon({name, ...props}: IconProps) {
+  const IconComponent = iconsMap[name];
+  return <IconComponent {...props} />;
+}

package/src/components/icon/index.ts

@@ -0,0 +1 @@
+export * from './icon';

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './button';
+export * from './icon';
+export * from './theme-provider';
+export * from './typography';

package/src/components/renovate.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended",
+    "group:recommended",
+    "monorepo:turbo",
+    "monorepo:vitest",
+    "monorepo:react",
+    "packages:react",
+    "packages:vite",
+    "packages:unitTest",
+    "helpers:pinGitHubActionDigests",
+    "helpers:followTypescriptRc",
+    "customManagers:biomeVersions",
+    "customManagers:dockerfileVersions",
+    "replacements:all",
+    "security:openssf-scorecard",
+    ":configMigration",
+    "abandonments:recommended",
+    ":gitSignOff",
+    "schedule:daily"
+  ]
+}

package/src/components/theme-provider.tsx

@@ -0,0 +1,50 @@
+import {type ReactNode, useEffect, useState} from 'react';
+import {type Theme, ThemeProviderContext} from 'state/theme';
+
+type ThemeProviderProps = {
+  children: ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'shipfox-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove('light', 'dark');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}

package/src/components/typography/code.stories.tsx

@@ -0,0 +1,36 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from './code';
+
+const meta: Meta = {
+  title: 'Typography/Code',
+};
+export default meta;
+
+type Story = StoryObj;
+
+const variants = ['label', 'paragraph'] as const;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      {variants.map((variant) => (
+        <div key={variant} className="grid grid-cols-2 gap-8">
+          <div className="flex flex-col gap-4">
+            <Code variant="label" className="text-foreground-neutral-subtle">
+              {variant}
+            </Code>
+            <Code variant={variant}>The quick brown fox jumps over the lazy dog</Code>
+          </div>
+          <div className="flex flex-col gap-4">
+            <Code variant="label" className="text-foreground-neutral-subtle">
+              {variant} - Bold
+            </Code>
+            <Code variant={variant} bold>
+              The quick brown fox jumps over the lazy dog
+            </Code>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/components/typography/code.tsx

@@ -0,0 +1,38 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ElementType, HTMLAttributes, PropsWithChildren} from 'react';
+import {cn} from 'utils';
+
+export const codeVariants = cva('', {
+  variants: {
+    variant: {
+      label: 'text-xs',
+      paragraph: 'text-sm',
+    },
+  },
+  defaultVariants: {
+    variant: 'paragraph',
+  },
+});
+
+export type CodeProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> &
+  VariantProps<typeof codeVariants> & {
+    as?: ElementType;
+    bold?: boolean;
+  };
+
+export function Code({children, className, variant, as, bold, ...props}: CodeProps) {
+  const Component = as ?? 'p';
+  return (
+    <Component
+      className={cn(
+        codeVariants({variant}),
+        'leading-20 font-code',
+        {'font-bold': bold},
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/components/typography/header.stories.tsx

@@ -0,0 +1,27 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from './code';
+import {Header} from './header';
+
+const meta: Meta = {
+  title: 'Typography/Header',
+};
+export default meta;
+
+type Story = StoryObj;
+
+const variants = ['h1', 'h2', 'h3', 'h4'] as const;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      {variants.map((variant) => (
+        <div key={variant} className="flex flex-col gap-4">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            {variant}
+          </Code>
+          <Header variant={variant}>The quick brown fox jumps over the lazy dog</Header>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/components/typography/header.tsx

@@ -0,0 +1,41 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ElementType, HTMLAttributes, PropsWithChildren} from 'react';
+import {cn} from 'utils';
+
+export const headerVariants = cva('', {
+  variants: {
+    variant: {
+      h1: 'text-3xl',
+      h2: 'text-xl',
+      h3: 'text-lg',
+      h4: 'text-md',
+    },
+  },
+  defaultVariants: {
+    variant: 'h1',
+  },
+});
+
+const components = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+} as const;
+
+export type HeaderProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> &
+  VariantProps<typeof headerVariants> & {
+    as?: ElementType;
+  };
+
+export function Header({children, className, variant, as, ...props}: HeaderProps) {
+  const Component = as ?? (variant ? components[variant] : 'h1');
+  return (
+    <Component
+      className={cn(headerVariants({variant}), 'font-display font-medium', className)}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/components/typography/index.ts

@@ -0,0 +1,3 @@
+export * from './code';
+export * from './header';
+export * from './text';

package/src/components/typography/text.stories.tsx

@@ -0,0 +1,67 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from './code';
+import {Text} from './text';
+
+const meta: Meta = {
+  title: 'Typography/Text',
+};
+export default meta;
+
+type Story = StoryObj;
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      {sizes.map((size) => (
+        <div key={size} className="grid grid-cols-2 gap-8">
+          <div className="flex flex-col gap-4">
+            <Code variant="label" className="text-foreground-neutral-subtle">
+              {size}
+            </Code>
+            <Text size={size}>The quick brown fox jumps over the lazy dog</Text>
+          </div>
+          <div className="flex flex-col gap-4">
+            <Code variant="label" className="text-foreground-neutral-subtle">
+              {size} - Bold
+            </Code>
+            <Text size={size} bold>
+              The quick brown fox jumps over the lazy dog
+            </Text>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+const textParagraph =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+export const Paragraph: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      {sizes.map((size) => (
+        <div key={size} className="grid grid-cols-2 gap-8">
+          <div className="flex flex-col gap-4">
+            <Code variant="label" className="text-foreground-neutral-subtle">
+              {size} - Regular
+            </Code>
+            <Text size={size} compact={false}>
+              {textParagraph}
+            </Text>
+          </div>
+          <div className="flex flex-col gap-4">
+            <Code variant="label" className="text-foreground-neutral-subtle">
+              {size} - Compact
+            </Code>
+            <Text size={size} compact={true}>
+              {textParagraph}
+            </Text>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/components/typography/text.tsx

@@ -0,0 +1,42 @@
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ElementType, HTMLAttributes, PropsWithChildren} from 'react';
+import {cn} from 'utils';
+
+export const textVariants = cva('', {
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-md',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export type TextProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> &
+  VariantProps<typeof textVariants> & {
+    as?: ElementType;
+    compact?: boolean;
+    bold?: boolean;
+  };
+
+export function Text({children, className, size, as, compact, bold, ...props}: TextProps) {
+  const Component = as ?? 'p';
+  return (
+    <Component
+      className={cn(
+        textVariants({size}),
+        'font-display',
+        {'leading-20': compact, 'font-medium': bold},
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useCopyToClipboard';
+export * from './useTheme';

package/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,20 @@
+import {useState} from 'react';
+import {copyTextToClipboard} from 'utils';
+
+interface UseCopyToClipboardParams {
+  text: string;
+  onCopy?: (text: string) => void;
+}
+
+export function useCopyToClipboard({text, onCopy}: UseCopyToClipboardParams) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    await copyTextToClipboard(text);
+
+    if (onCopy) onCopy(text);
+    setCopied(true);
+  };
+
+  return {copy, copied};
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,10 @@
+import {useContext} from 'react';
+import {ThemeProviderContext} from 'state/theme';
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+
+  return context;
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+export * from './utils';

package/src/state/theme.ts

@@ -0,0 +1,15 @@
+import {createContext} from 'react';
+
+export type Theme = 'dark' | 'light' | 'system';
+
+export type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+};
+
+export const ThemeProviderContext = createContext<ThemeProviderState>(initialState);

package/src/utils/clipboard.ts

@@ -0,0 +1,4 @@
+export async function copyTextToClipboard(text: string) {
+  if ('clipboard' in navigator) return await navigator.clipboard.writeText(text);
+  return document.execCommand('copy', true, text);
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import {type ClassValue, clsx} from 'clsx';
+import {twMerge} from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}