refactor file structure

package.json

@@ -31,7 +31,7 @@
     "@storybook/blocks": "^8.0.5",
     "@storybook/react": "^8.0.5",
     "@storybook/react-vite": "^8.0.5",
-    "@types/react": "^18.2.73",
+    "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.23",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",

src/components/checkbox/Checkbox.tsx

@@ -82,7 +82,7 @@ export const Checkbox = forwardRef<
                 </SodaSimpleTransition>
             </div>
             <div className="sd-checkbox-ripple">
-                <Ripple />
+                <Ripple as="div" />
             </div>
         </div>
     )

src/components/chip/Chip.tsx

@@ -38,6 +38,7 @@ export const Chip = forwardRef<
         <Ripple
             {...props}
             ref={ref}
+            as="div"
             className={clsx('sd-chip', `sd-chip-${variant}`, className)}
             onClick={onClick}
             data-sd-disabled={disabled}

src/components/date-picker/MenuButton.tsx

@@ -18,7 +18,7 @@ export function MenuButton({
         <div className="sd-menu_button-outer">
             <IconButton path={mdiChevronLeft} onClick={onLeft} />
             {children && (
-                <Ripple className="sd-menu_button" onClick={onClick}>
+                <Ripple as="div" className="sd-menu_button" onClick={onClick}>
                     <span>{children}</span>
                     <Icon size={1} path={mdiMenuDown} />
                 </Ripple>

src/components/navigation/NavigationDrawer.tsx

@@ -178,6 +178,7 @@ export const NavigationDrawerItem = forwardRef<
     <Ripple
         {...props}
         ref={ref}
+        as="div"
         data-sd-active={active}
         className={clsx('sd-navigation_drawer_item', className)}
     >

src/components/radio-button/RadioButton.tsx

@@ -80,7 +80,7 @@ export const RadioButton = forwardRef<
             <div className="sd-radio_button-box">
                 <div className="sd-radio_button-circle" />
                 <div className="sd-radio_button-ripple">
-                    <Ripple ref={rippleRef} />
+                    <Ripple as="div" ref={rippleRef} />
                 </div>
             </div>
             <span

src/components/segmented-button/SegmentedButton.tsx

@@ -60,6 +60,7 @@ export const SegmentedButton = forwardRef<
             {items &&
                 items.map(({ label, disabled, value: value$i }, index) => (
                     <Ripple
+                        as="div"
                         key={value$i}
                         tabIndex={index + 1}
                         className="sd-segmented_button-item"

src/components/tab/Tab.tsx

@@ -38,6 +38,7 @@ export const Tab = forwardRef<
         <Ripple
             {...props}
             ref={ref}
+            as="div"
             tabIndex={0}
             className={clsx('sd-tab', className)}
             data-sd-active={active}

src/composition/ActionButton/index.ts

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

src/composition/Blockquote.tsx → src/composition/Blockquote/Blockquote.tsx

@@ -6,7 +6,7 @@ import { Icon } from '@mdi/react'
 import { useCollapsible } from '@/hooks/use-collapsible'
 import { useMergeRefs } from '@/hooks/use-merge'
 import { ExtendProps } from '@/utils/type'
-import { IconRippleButton } from './IconRippleButton'
+import { IconRippleButton } from '../IconRippleButton'
 
 export const Blockquote = forwardRef<
     HTMLQuoteElement,

src/composition/Blockquote/index.ts

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

src/composition/Details/index.ts

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

src/composition/IconRippleButton.tsx → src/composition/IconRippleButton/IconRippleButton.tsx

@@ -33,7 +33,7 @@ export const IconRippleButton = forwardRef<
         >
             {path ? <Icon path={path} /> : children}
             <div className="sd-icon_ripple_button-ripple">
-                <Ripple />
+                <Ripple as="div" />
             </div>
         </div>
     )

src/composition/IconRippleButton/index.ts

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

src/composition/NestedMenu.stories.tsx → src/composition/NestedMenu/NestedMenu.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { mdiDotsVertical } from '@mdi/js'
-import { IconButton } from '..'
+import { IconButton } from '../..'
 import { NestedMenu as Menu, NestedMenuItem as MenuItem } from './NestedMenu'
 
 const meta = {

src/composition/NestedMenu/index.ts

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

src/composition/PopoverHolder.stories.tsx → src/composition/PopoverHolder/PopoverHolder.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useRef } from 'react'
 import { mdiAccount, mdiDotsVertical, mdiMenu } from '@mdi/js'
-import { TopAppBar } from '../components/app-bar'
-import { IconButton } from '../components/icon-button'
-import { Default as menuDefaultStory } from '../components/menu/Menu.stories'
-import { PlainTooltip, RichTooltip } from '../components/tooltip'
+import { TopAppBar } from '@/components/app-bar'
+import { IconButton } from '@/components/icon-button'
+import { Default as menuDefaultStory } from '@/components/menu/Menu.stories'
+import { PlainTooltip, RichTooltip } from '@/components/tooltip'
 import { PopoverHolder, PopoverHolderHandle } from './PopoverHolder'
 
 const meta = {

src/composition/PopoverHolder/index.ts

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

src/composition/Scrim/index.ts

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

src/composition/Select.stories.tsx → src/composition/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { mdiChevronRight } from '@mdi/js'
 import Icon from '@mdi/react'
-import { List } from '../components/list'
+import { List } from '@/components/list'
 import { Select } from './Select'
 
 const fruits = [

src/composition/Select.tsx → src/composition/Select/Select.tsx

@@ -291,7 +291,10 @@ export const Select = forwardRef<
                     {typeof children === 'function'
                         ? children(value!)
                         : children ?? (
-                              <Ripple className="sd-select-menu_button">
+                              <Ripple
+                                  as="div"
+                                  className="sd-select-menu_button"
+                              >
                                   <div className="sd-select-menu_button-label">
                                       <span>
                                           {getOptionValue(

src/composition/Select/index.ts

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

src/composition/SodaImage.stories.tsx → src/composition/SodaImage/SodaImage.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useRef, useState } from 'react'
-import { Button } from '..'
+import { Button } from '@/components/button'
 import { SodaImage } from './SodaImage'
+import 'csstype'
 
 const meta = {
     title: 'composition/SodaImage',
@@ -11,7 +12,7 @@ const meta = {
         minWidth: 100,
         minHeight: 100,
     },
-} satisfies Meta<typeof SodaImage>
+} satisfies Meta<typeof SodaImage> as any
 
 export default meta
 

src/composition/SodaImage/index.ts

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

src/composition/SodaTransition.stories.tsx → src/composition/SodaTransition/SodaTransition.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
-import { Button } from '..'
+import { Button } from '@/components/button'
 import { SodaSimpleTransition, SodaTransition } from './SodaTransition'
 
 const meta = {

src/composition/SodaTransition/index.ts

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

src/composition/Table/index.ts

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

src/composition/TooltipHolder.stories.tsx → src/composition/TooltipHolder/TooltipHolder.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useRef } from 'react'
 import { mdiAccount, mdiDotsVertical, mdiMenu } from '@mdi/js'
-import { TopAppBar } from '../components/app-bar'
-import { IconButton } from '../components/icon-button'
-import { Default as menuDefaultStory } from '../components/menu/Menu.stories'
-import { PlainTooltip, RichTooltip } from '../components/tooltip'
+import { TopAppBar } from '@/components/app-bar'
+import { IconButton } from '@/components/icon-button'
+import { Default as menuDefaultStory } from '@/components/menu/Menu.stories'
+import { PlainTooltip, RichTooltip } from '@/components/tooltip'
 import { TooltipHolder, TooltipHolderHandle } from './TooltipHolder'
 
 const meta = {

src/composition/TooltipHolder/index.ts

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

src/composition/index.ts

@@ -1,12 +1,12 @@
-export * from './ActionButton.tsx'
-export * from './Blockquote.tsx'
-export * from './Details.tsx'
-export * from './IconRippleButton.tsx'
-export * from './NestedMenu.tsx'
-export * from './PopoverHolder.tsx'
-export * from './Scrim.tsx'
-export * from './Select.tsx'
-export * from './SodaImage.tsx'
-export * from './SodaTransition.tsx'
-export * from './Table.tsx'
-export * from './TooltipHolder.tsx'
+export * from './ActionButton'
+export * from './Blockquote'
+export * from './Details'
+export * from './IconRippleButton'
+export * from './NestedMenu'
+export * from './PopoverHolder'
+export * from './Scrim'
+export * from './Select'
+export * from './SodaImage'
+export * from './SodaTransition'
+export * from './Table'
+export * from './TooltipHolder'

src/ripple/Ripple.tsx

@@ -2,12 +2,7 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
 import { ExtendProps, TagNameString } from '@/utils/type'
 import { ripple } from './ripple-effect'
 
-type Props = ExtendProps<{
-    /**
-     * HTML tag name, div by default
-     */
-    as?: TagNameString
-    children?: React.ReactNode
+interface RippleProps {
     disabled?: boolean
     /**
      * In ms
@@ -17,7 +12,22 @@ type Props = ExtendProps<{
      * Any css color string
      */
     rippleColor?: string
-}>
+}
+
+interface RippleRefProps extends RippleProps {
+    /**
+     * HTML tag name, div by default
+     */
+    as: TagNameString
+    children?: React.ReactNode
+}
+
+interface RippleFnProps extends RippleProps {
+    as?: undefined
+    children: (ref: React.Ref<HTMLElement>) => React.ReactNode
+}
+
+type Props = ExtendProps<RippleRefProps | RippleFnProps>
 
 type RippleAt = (
     rippleX: number,
@@ -31,7 +41,7 @@ export type RippleHandle = HTMLElement & { rippleAt?: RippleAt }
  * Wrapper component for ripple-effect.ts
  */
 export const Ripple = forwardRef<RippleHandle, Props>(
-    ({ as, disabled, rippleColor, ...props }, ref) => {
+    ({ as, disabled, rippleColor, children, ...props }, ref) => {
         const eRef = useRef<HTMLElement>(null)
         const rippleAtRef = useRef<RippleAt | undefined>(undefined)
         useEffect(() => {
@@ -45,12 +55,15 @@ export const Ripple = forwardRef<RippleHandle, Props>(
             return e
         })
 
-        const As: any = as || 'div'
+        if (as) {
+            const As = as as any
+            return (
+                <As {...props} ref={eRef} disabled={disabled}>
+                    {children}
+                </As>
+            )
+        }
 
-        return (
-            <As {...props} ref={eRef} disabled={disabled}>
-                {props.children}
-            </As>
-        )
+        return children(eRef)
     },
 )

src/ripple/index.ts

@@ -0,0 +1,3 @@
+export * from './ripple-effect'
+export * from './hooks'
+export * from './Ripple'