fix: icon exports were breaking storybook

Author: jsladerman

README.md

@@ -30,7 +30,6 @@ Checklist for creating a new component:
 
 - Does it have proper type definitions?
 - Does it have prop types?
-- Can it pass a ref with forwardRef?
 - Does it have a story in the Storybook?
 
 ## Contributing

src/components/icons/AWSIcon.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ReactElement } from 'react'
+import { ComponentPropsWithRef, ReactElement } from 'react'
 import { useTheme } from 'styled-components'
 
 enum AWSIconName {
@@ -470,28 +470,29 @@ interface AWSIconProps {
   size?: number
 }
 
-const AWSIcon = forwardRef<HTMLImageElement, AWSIconProps>(
-  ({ name, size = 24, ...props }, ref) => {
-    const theme = useTheme()
-    const icon = AWSIcons[name]?.(size) ?? null
+function AWSIcon({
+  name,
+  size = 24,
+  ...props
+}: AWSIconProps & ComponentPropsWithRef<'div'>) {
+  const theme = useTheme()
+  const icon = AWSIcons[name]?.(size) ?? null
 
-    return icon ? (
-      <div
-        ref={ref}
-        style={{
-          display: 'block',
-          borderRadius: theme.borderRadiuses.medium,
-          overflow: 'hidden',
-          width: size,
-          height: size,
-        }}
-        {...props}
-      >
-        {icon}
-      </div>
-    ) : null
-  }
-)
+  return icon ? (
+    <div
+      style={{
+        display: 'block',
+        borderRadius: theme.borderRadiuses.medium,
+        overflow: 'hidden',
+        width: size,
+        height: size,
+      }}
+      {...props}
+    >
+      {icon}
+    </div>
+  ) : null
+}
 
 export default AWSIcon
 

src/icons.ts

@@ -242,4 +242,3 @@ export { default as WebhooksIcon } from './components/icons/WebhooksIcon'
 export { default as WindowsLogoIcon } from './components/icons/WindowsLogoIcon'
 export { default as WorkspaceIcon } from './components/icons/WorkspaceIcon'
 export { default as YouTubeIcon } from './components/icons/YouTubeIcon'
-export { default as AWSIcon, AWSIconName } from './components/icons/AWSIcon'

src/index.ts

@@ -8,8 +8,12 @@ export * from './icons'
 export * from './plural-logos'
 
 // Components
-export { default as Accordion, AccordionItem } from './components/Accordion'
-export type { AccordionProps } from './components/Accordion'
+export {
+  default as Accordion,
+  AccordionItem,
+  type AccordionProps,
+} from './components/Accordion'
+export { default as AWSIcon, AWSIconName } from './components/icons/AWSIcon'
 export { AnimatedDiv } from './components/AnimatedDiv'
 export { default as AppIcon } from './components/AppIcon'
 export { default as ArrowScroll } from './components/ArrowScroll'