Reactのprops管理をいい感じにするnpmパッケージをつくった

src
├── @types
│   └── import-image.d.ts
├── components
│   └── AspectFrame
│       ├── LayoutContainer.tsx
│       ├── index.tsx
│       └── model.ts
│   
├── index.ts
└── stories
    ├── AspectFrame.stories.tsx
    ├── args
    │   ├── AspectFrame.ts
    │   └── common
    │       ├── as.ts
    │       ├── children.ts
    │       └── ref.ts
    └── assets
        └── scenery.jpg

type CoreProps<As extends React.ElementType> = PolymorphicComponentPropWithRef<As>

type CoreProps<As extends React.ElementType> = {
  as: As,
  children: React.ReactNode,
} & React.ComponentPropsWithRef<As>

import { NotRequired, getPropType, getDefaultProps, PolymorphicComponentPropWithRef } from '@polym/react-props'
import { ElementType } from 'react'

// コンポーネントの振る舞いを制御するprops
const conf = {
  ratioX: NotRequired<number>(16),
  ratioY: NotRequired<number>(9)
}
export type CharacterProps = getPropType<typeof conf>

// HTML属性や、Reactコンポーネントが最低限持つべきprops
export type CoreProps<As extends ElementType> =
  PolymorphicComponentPropWithRef<As>

// 全propsをまとめておく
export type AllProps<As extends ElementType> = CharacterProps & CoreProps<As>

// デフォルト値オブジェクト
export const defaultProps = getDefaultProps<CharacterProps>(conf)

import { CharacterProps } from './model'
import styled from 'styled-components'

export const LayoutContainer = styled.div<CharacterProps>`
  --height: ${({ ratioY }) => ratioY};
  --width: ${({ ratioX }) => ratioX};

  /* &&で優先度を上げてasが持つstyleを上書き */
  && {
    padding-bottom: calc(var(--height) / var(--width) * 100%);
    position: relative;
  }

  /* 直下の要素にだけスタイルが当たるように'>'は必須 */
  & > * {
    /* every-layoutのFrame CSSを丸写しなので割愛 */
  }

  & > img,
  & > video {
    /* every-layoutのFrame CSSを丸写しなので割愛 */
  }
`

import { ElementType, forwardRef, ReactElement } from 'react'
import { LayoutContainer } from './LayoutContainer'
import { defaultProps, AllProps } from './model'

type AspectFrameComponent = <As extends ElementType>(
  props: AllProps<As>
) => ReactElement | null

// forwardRefで包むコンポーネントにもちゃんと名前をつける
const _AspectFrame = <As extends ElementType>(
  { ref, as, children, ...props }: AllProps<As> = {
    ...defaultProps // デフォルト値をハードコーディングせずに済む
  } as AllProps<As>
) => {
  return (
    <LayoutContainer {...props} ref={ref} as={as || 'div'}>
      {children}
    </LayoutContainer>
  )
}

// story定義時にComponentStory<typeof AspectFrame>でエラーが出ないように、
// forwardRefで包んだ状態でAspectFrameComponent型をつけておく
export const AspectFrame: AspectFrameComponent = forwardRef(_AspectFrame)

import { defaultProps } from '../../components/AspectFrame/model'

export const desc_AspectFrameProps = {
  ratioX: {
    control: {
      type: 'number'
    },
    description: 'Width as denominator of aspect ratio',
    table: {
      type: {
        summary: null
      },
      category: 'style control',
      defaultValue: {
	// デフォルト値をハードコーディングしない
        summary: defaultProps.ratioX,
        details: null
      }
    }
  },
  ratioY: {
    control: {
      type: 'number'
    },
    description: 'Height as the numerator of the aspect ratio',
    table: {
      type: {
        summary: null
      },
      category: 'style control',
      defaultValue: {
        // デフォルト値をハードコーディングしない
        summary: defaultProps.ratioY,
        details: null
      }
    }
  }
}

import { ComponentStory } from '@storybook/react'
import { AspectFrame } from '../components/AspectFrame'
import { defaultProps } from '../components/AspectFrame/model'
import { desc_AspectFrameProps } from './args/AspectFrame'
import { desc_as } from './args/common/as'
import { desc_children } from './args/common/children'
import { desc_ref } from './args/common/ref'
import styled from 'styled-components'
// ここでエラーが出る。その対策は後述
import sampleImage from './assets/scenery.jpg'

export default {
  title: 'layout/AspectFrame',
  component: AspectFrame,
  parameters: {
    docs: {
      description: {
        component:
          'Suitable solution to crop the media to the specified aspect ratio'
      }
    }
  },
  argTypes: {
    ...desc_as,
    ...desc_ref,
    ...desc_children,
    ...desc_AspectFrameProps
  }
}

// asに指定してみるコンポーネント
const ExampleContainer = styled.div`
  box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;
  height: 100%;
  width: 100%;
  box-sizing: padding-box;
`

const Template: ComponentStory<typeof AspectFrame> = ({
  children,
  ...args
}) => (
  <AspectFrame {...args} as={ExampleContainer}>
    <img src={sampleImage} />
  </AspectFrame>
)

export const playground = Template.bind({})
playground.args = {
  // デフォルト値を流し込んで表示
  ...defaultProps
}