refactor: converted to arrow functions everywhere

Author: Aniket-508

public/r/alert.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/ui/alert.tsx",
-      "content": "import { Box, Text } from \"ink\";\nimport type { ReactNode } from \"react\";\n\nimport { useTheme } from \"@/components/ui/theme-provider\";\n\nexport type AlertVariant = \"success\" | \"error\" | \"warning\" | \"info\";\n\nconst ICONS: Record<AlertVariant, string> = {\n  error: \"✗\",\n  info: \"ℹ\",\n  success: \"✓\",\n  warning: \"⚠\",\n};\n\nexport interface AlertProps {\n  variant?: AlertVariant;\n  title?: string;\n  children?: ReactNode;\n  icon?: string;\n  bordered?: boolean;\n  borderStyle?:\n    | \"single\"\n    | \"double\"\n    | \"round\"\n    | \"bold\"\n    | \"singleDouble\"\n    | \"doubleSingle\"\n    | \"classic\";\n  color?: string;\n  paddingX?: number;\n  paddingY?: number;\n}\n\nexport const Alert = function Alert({\n  variant = \"info\",\n  title,\n  children,\n  icon,\n  bordered = true,\n  borderStyle,\n  color,\n  paddingX = 1,\n  paddingY = 0,\n}: AlertProps) {\n  const theme = useTheme();\n\n  const variantColor =\n    color ??\n    (() => {\n      switch (variant) {\n        case \"success\": {\n          return theme.colors.success;\n        }\n        case \"error\": {\n          return theme.colors.error;\n        }\n        case \"warning\": {\n          return theme.colors.warning;\n        }\n        default: {\n          return theme.colors.info;\n        }\n      }\n    })();\n\n  const resolvedIcon = icon ?? ICONS[variant];\n\n  const inner = (\n    <>\n      <Box gap={1}>\n        <Text color={variantColor} bold>\n          {resolvedIcon}\n        </Text>\n        {title && (\n          <Text bold color={variantColor}>\n            {title}\n          </Text>\n        )}\n      </Box>\n      {children && <Text>{children}</Text>}\n    </>\n  );\n\n  if (!bordered) {\n    return (\n      <Box flexDirection=\"column\" paddingX={paddingX} paddingY={paddingY}>\n        {inner}\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      borderStyle={borderStyle ?? theme.border.style}\n      borderColor={variantColor}\n      paddingX={paddingX}\n      paddingY={paddingY}\n      flexDirection=\"column\"\n    >\n      {inner}\n    </Box>\n  );\n};\n",
+      "content": "import { Box, Text } from \"ink\";\nimport type { ReactNode } from \"react\";\n\nimport { useTheme } from \"@/components/ui/theme-provider\";\n\nexport type AlertVariant = \"success\" | \"error\" | \"warning\" | \"info\";\n\nconst ICONS: Record<AlertVariant, string> = {\n  error: \"✗\",\n  info: \"ℹ\",\n  success: \"✓\",\n  warning: \"⚠\",\n};\n\nexport interface AlertProps {\n  variant?: AlertVariant;\n  title?: string;\n  children?: ReactNode;\n  icon?: string;\n  bordered?: boolean;\n  borderStyle?:\n    | \"single\"\n    | \"double\"\n    | \"round\"\n    | \"bold\"\n    | \"singleDouble\"\n    | \"doubleSingle\"\n    | \"classic\";\n  color?: string;\n  paddingX?: number;\n  paddingY?: number;\n}\n\nexport const Alert = ({\n  variant = \"info\",\n  title,\n  children,\n  icon,\n  bordered = true,\n  borderStyle,\n  color,\n  paddingX = 1,\n  paddingY = 0,\n}: AlertProps) => {\n  const theme = useTheme();\n\n  const variantColor =\n    color ??\n    (() => {\n      switch (variant) {\n        case \"success\": {\n          return theme.colors.success;\n        }\n        case \"error\": {\n          return theme.colors.error;\n        }\n        case \"warning\": {\n          return theme.colors.warning;\n        }\n        default: {\n          return theme.colors.info;\n        }\n      }\n    })();\n\n  const resolvedIcon = icon ?? ICONS[variant];\n\n  const inner = (\n    <>\n      <Box gap={1}>\n        <Text color={variantColor} bold>\n          {resolvedIcon}\n        </Text>\n        {title && (\n          <Text bold color={variantColor}>\n            {title}\n          </Text>\n        )}\n      </Box>\n      {children && <Text>{children}</Text>}\n    </>\n  );\n\n  if (!bordered) {\n    return (\n      <Box flexDirection=\"column\" paddingX={paddingX} paddingY={paddingY}>\n        {inner}\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      borderStyle={borderStyle ?? theme.border.style}\n      borderColor={variantColor}\n      paddingX={paddingX}\n      paddingY={paddingY}\n      flexDirection=\"column\"\n    >\n      {inner}\n    </Box>\n  );\n};\n",
       "type": "registry:ui"
     }
   ],

public/r/app-shell.json

@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/ui/app-shell.tsx",
-      "content": "import { Box, Text } from \"ink\";\nimport React, { useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useTheme } from \"@/components/ui/theme-provider\";\nimport { useInput } from \"@/hooks/use-input\";\n\nexport interface AppShellProps {\n  children: ReactNode;\n  fullscreen?: boolean;\n}\n\nexport interface AppShellHeaderProps {\n  children: ReactNode;\n}\n\nexport interface AppShellTipProps {\n  children: ReactNode;\n}\n\nexport interface AppShellInputProps {\n  value?: string;\n  onChange?: (value: string) => void;\n  onSubmit?: (value: string) => void;\n  placeholder?: string;\n  borderStyle?: \"single\" | \"double\" | \"round\" | \"bold\";\n  borderColor?: string;\n  prefix?: string;\n}\n\nexport interface AppShellContentProps {\n  children: ReactNode;\n  autoscroll?: boolean;\n  height?: number;\n}\n\nexport interface AppShellHintsProps {\n  items?: string[];\n  children?: ReactNode;\n}\n\nconst AppShellRoot = function AppShellRoot({ children }: AppShellProps) {\n  return (\n    <Box flexDirection=\"column\" flexGrow={1}>\n      {children}\n    </Box>\n  );\n};\n\nconst AppShellHeader = function AppShellHeader({\n  children,\n}: AppShellHeaderProps) {\n  return <Box flexDirection=\"column\">{children}</Box>;\n};\n\nconst AppShellTip = function AppShellTip({ children }: AppShellTipProps) {\n  return (\n    <Box paddingLeft={2} paddingY={0}>\n      <Text dimColor>{\"  Tip: \"}</Text>\n      <Text dimColor>{children}</Text>\n    </Box>\n  );\n};\n\nconst AppShellInput = function AppShellInput({\n  value: controlledValue,\n  onChange,\n  onSubmit,\n  placeholder = \"Type something...\",\n  borderStyle = \"single\",\n  borderColor,\n  prefix = \">\",\n}: AppShellInputProps) {\n  const [internalValue, setInternalValue] = useState(\"\");\n  const theme = useTheme();\n  const value = controlledValue ?? internalValue;\n\n  useInput((input, key) => {\n    if (key.return) {\n      onSubmit?.(value);\n      if (!controlledValue) {\n        setInternalValue(\"\");\n      }\n      return;\n    }\n    if (key.backspace || key.delete) {\n      const next = value.slice(0, -1);\n      if (onChange) {\n        onChange(next);\n      } else {\n        setInternalValue(next);\n      }\n      return;\n    }\n    if (key.escape || key.upArrow || key.downArrow || key.tab) {\n      return;\n    }\n    const next = value + input;\n    if (onChange) {\n      onChange(next);\n    } else {\n      setInternalValue(next);\n    }\n  });\n\n  return (\n    <Box\n      borderStyle={borderStyle}\n      borderColor={borderColor ?? theme.colors.border}\n      flexDirection=\"row\"\n      paddingX={1}\n    >\n      {prefix && (\n        <Text color={theme.colors.primary} bold>\n          {`${prefix} `}\n        </Text>\n      )}\n      <Text>{value || <Text dimColor>{placeholder}</Text>}</Text>\n      <Text color={theme.colors.focusRing}>█</Text>\n    </Box>\n  );\n};\n\nconst AppShellContent = function AppShellContent({\n  children,\n  height = 20,\n}: AppShellContentProps) {\n  const [scrollTop, setScrollTop] = useState(0);\n\n  useInput((_input, key) => {\n    if (key.upArrow) {\n      setScrollTop((s) => Math.max(0, s - 1));\n    } else if (key.downArrow) {\n      setScrollTop((s) => s + 1);\n    }\n  });\n\n  return (\n    <Box flexDirection=\"row\" height={height} overflow=\"hidden\">\n      <Box flexGrow={1} flexDirection=\"column\" marginTop={-scrollTop as number}>\n        {children}\n      </Box>\n    </Box>\n  );\n};\n\nconst AppShellHints = function AppShellHints({\n  items,\n  children,\n}: AppShellHintsProps) {\n  const theme = useTheme();\n  const content = items ? items.join(\" | \") : children;\n  return (\n    <Box paddingX={1}>\n      <Text dimColor color={theme.colors.mutedForeground}>\n        {content as string}\n      </Text>\n    </Box>\n  );\n};\n\nexport const AppShell = Object.assign(AppShellRoot, {\n  Content: AppShellContent,\n  Header: AppShellHeader,\n  Hints: AppShellHints,\n  Input: AppShellInput,\n  Tip: AppShellTip,\n});\n",
+      "content": "import { Box, Text } from \"ink\";\nimport React, { useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useTheme } from \"@/components/ui/theme-provider\";\nimport { useInput } from \"@/hooks/use-input\";\n\nexport interface AppShellProps {\n  children: ReactNode;\n  fullscreen?: boolean;\n}\n\nexport interface AppShellHeaderProps {\n  children: ReactNode;\n}\n\nexport interface AppShellTipProps {\n  children: ReactNode;\n}\n\nexport interface AppShellInputProps {\n  value?: string;\n  onChange?: (value: string) => void;\n  onSubmit?: (value: string) => void;\n  placeholder?: string;\n  borderStyle?: \"single\" | \"double\" | \"round\" | \"bold\";\n  borderColor?: string;\n  prefix?: string;\n}\n\nexport interface AppShellContentProps {\n  children: ReactNode;\n  autoscroll?: boolean;\n  height?: number;\n}\n\nexport interface AppShellHintsProps {\n  items?: string[];\n  children?: ReactNode;\n}\n\nconst AppShellRoot = ({ children }: AppShellProps) => (\n  <Box flexDirection=\"column\" flexGrow={1}>\n    {children}\n  </Box>\n);\n\nconst AppShellHeader = ({ children }: AppShellHeaderProps) => (\n  <Box flexDirection=\"column\">{children}</Box>\n);\n\nconst AppShellTip = ({ children }: AppShellTipProps) => (\n  <Box paddingLeft={2} paddingY={0}>\n    <Text dimColor>{\"  Tip: \"}</Text>\n    <Text dimColor>{children}</Text>\n  </Box>\n);\n\nconst AppShellInput = ({\n  value: controlledValue,\n  onChange,\n  onSubmit,\n  placeholder = \"Type something...\",\n  borderStyle = \"single\",\n  borderColor,\n  prefix = \">\",\n}: AppShellInputProps) => {\n  const [internalValue, setInternalValue] = useState(\"\");\n  const theme = useTheme();\n  const value = controlledValue ?? internalValue;\n\n  useInput((input, key) => {\n    if (key.return) {\n      onSubmit?.(value);\n      if (!controlledValue) {\n        setInternalValue(\"\");\n      }\n      return;\n    }\n    if (key.backspace || key.delete) {\n      const next = value.slice(0, -1);\n      if (onChange) {\n        onChange(next);\n      } else {\n        setInternalValue(next);\n      }\n      return;\n    }\n    if (key.escape || key.upArrow || key.downArrow || key.tab) {\n      return;\n    }\n    const next = value + input;\n    if (onChange) {\n      onChange(next);\n    } else {\n      setInternalValue(next);\n    }\n  });\n\n  return (\n    <Box\n      borderStyle={borderStyle}\n      borderColor={borderColor ?? theme.colors.border}\n      flexDirection=\"row\"\n      paddingX={1}\n    >\n      {prefix && (\n        <Text color={theme.colors.primary} bold>\n          {`${prefix} `}\n        </Text>\n      )}\n      <Text>{value || <Text dimColor>{placeholder}</Text>}</Text>\n      <Text color={theme.colors.focusRing}>█</Text>\n    </Box>\n  );\n};\n\nconst AppShellContent = ({ children, height = 20 }: AppShellContentProps) => {\n  const [scrollTop, setScrollTop] = useState(0);\n\n  useInput((_input, key) => {\n    if (key.upArrow) {\n      setScrollTop((s) => Math.max(0, s - 1));\n    } else if (key.downArrow) {\n      setScrollTop((s) => s + 1);\n    }\n  });\n\n  return (\n    <Box flexDirection=\"row\" height={height} overflow=\"hidden\">\n      <Box flexGrow={1} flexDirection=\"column\" marginTop={-scrollTop as number}>\n        {children}\n      </Box>\n    </Box>\n  );\n};\n\nconst AppShellHints = ({ items, children }: AppShellHintsProps) => {\n  const theme = useTheme();\n  const content = items ? items.join(\" | \") : children;\n  return (\n    <Box paddingX={1}>\n      <Text dimColor color={theme.colors.mutedForeground}>\n        {content as string}\n      </Text>\n    </Box>\n  );\n};\n\nexport const AppShell = Object.assign(AppShellRoot, {\n  Content: AppShellContent,\n  Header: AppShellHeader,\n  Hints: AppShellHints,\n  Input: AppShellInput,\n  Tip: AppShellTip,\n});\n",
       "type": "registry:ui"
     }
   ],

public/r/aspect-ratio.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/ui/aspect-ratio.tsx",
-      "content": "import { Box } from \"ink\";\nimport type { ReactNode } from \"react\";\n\nexport interface AspectRatioProps {\n  children: ReactNode;\n  ratio?: number;\n  width?: number;\n}\n\nexport const AspectRatio = function AspectRatio({\n  children,\n  ratio = 16 / 9,\n  width = 80,\n}: AspectRatioProps) {\n  const height = Math.round(width / ratio / 2);\n\n  return (\n    <Box width={width} height={height} overflow=\"hidden\">\n      {children}\n    </Box>\n  );\n};\n",
+      "content": "import { Box } from \"ink\";\nimport type { ReactNode } from \"react\";\n\nexport interface AspectRatioProps {\n  children: ReactNode;\n  ratio?: number;\n  width?: number;\n}\n\nexport const AspectRatio = ({\n  children,\n  ratio = 16 / 9,\n  width = 80,\n}: AspectRatioProps) => {\n  const height = Math.round(width / ratio / 2);\n\n  return (\n    <Box width={width} height={height} overflow=\"hidden\">\n      {children}\n    </Box>\n  );\n};\n",
       "type": "registry:ui"
     }
   ],

public/r/badge.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/ui/badge.tsx",
-      "content": "import { Box, Text } from \"ink\";\n\nimport { useTheme } from \"@/components/ui/theme-provider\";\n\nexport type BadgeVariant =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"secondary\";\n\nexport interface BadgeProps {\n  children: string;\n  variant?: BadgeVariant;\n  color?: string;\n  bold?: boolean;\n  bordered?: boolean;\n  borderStyle?:\n    | \"single\"\n    | \"double\"\n    | \"round\"\n    | \"bold\"\n    | \"singleDouble\"\n    | \"doubleSingle\"\n    | \"classic\";\n  paddingX?: number;\n}\n\nexport const Badge = function Badge({\n  children,\n  variant = \"default\",\n  color,\n  bold = false,\n  bordered = true,\n  borderStyle = \"round\",\n  paddingX = 1,\n}: BadgeProps) {\n  const theme = useTheme();\n\n  const variantColor =\n    color ??\n    (() => {\n      switch (variant) {\n        case \"success\": {\n          return theme.colors.success;\n        }\n        case \"warning\": {\n          return theme.colors.warning;\n        }\n        case \"error\": {\n          return theme.colors.error;\n        }\n        case \"info\": {\n          return theme.colors.info;\n        }\n        case \"secondary\": {\n          return theme.colors.secondary;\n        }\n        default: {\n          return theme.colors.primary;\n        }\n      }\n    })();\n\n  if (!bordered) {\n    return (\n      <Text color={variantColor} bold={bold}>\n        {children}\n      </Text>\n    );\n  }\n\n  return (\n    <Box\n      borderStyle={borderStyle}\n      borderColor={variantColor}\n      paddingX={paddingX}\n    >\n      <Text color={variantColor} bold={bold}>\n        {children}\n      </Text>\n    </Box>\n  );\n};\n",
+      "content": "import { Box, Text } from \"ink\";\n\nimport { useTheme } from \"@/components/ui/theme-provider\";\n\nexport type BadgeVariant =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"secondary\";\n\nexport interface BadgeProps {\n  children: string;\n  variant?: BadgeVariant;\n  color?: string;\n  bold?: boolean;\n  bordered?: boolean;\n  borderStyle?:\n    | \"single\"\n    | \"double\"\n    | \"round\"\n    | \"bold\"\n    | \"singleDouble\"\n    | \"doubleSingle\"\n    | \"classic\";\n  paddingX?: number;\n}\n\nexport const Badge = ({\n  children,\n  variant = \"default\",\n  color,\n  bold = false,\n  bordered = true,\n  borderStyle = \"round\",\n  paddingX = 1,\n}: BadgeProps) => {\n  const theme = useTheme();\n\n  const variantColor =\n    color ??\n    (() => {\n      switch (variant) {\n        case \"success\": {\n          return theme.colors.success;\n        }\n        case \"warning\": {\n          return theme.colors.warning;\n        }\n        case \"error\": {\n          return theme.colors.error;\n        }\n        case \"info\": {\n          return theme.colors.info;\n        }\n        case \"secondary\": {\n          return theme.colors.secondary;\n        }\n        default: {\n          return theme.colors.primary;\n        }\n      }\n    })();\n\n  if (!bordered) {\n    return (\n      <Text color={variantColor} bold={bold}>\n        {children}\n      </Text>\n    );\n  }\n\n  return (\n    <Box\n      borderStyle={borderStyle}\n      borderColor={variantColor}\n      paddingX={paddingX}\n    >\n      <Text color={variantColor} bold={bold}>\n        {children}\n      </Text>\n    </Box>\n  );\n};\n",
       "type": "registry:ui"
     }
   ],