Storybook의 Package Composition을 disable로 만들고 싶어요.

개시하다

CRA × Chakra UI × 스토리북과 같은 환경npm run storybook에서 화면을 확인해보니 눈에 거슬리는 것이 나타났다.
현재의 개발 환경은 필요 없기 때문에 삭제하려고 합니다.

Storybook Composition

↑ 빨간 테두리의 두드러진 부분은 Storybook 6.0에서 가져온 Storybook Composition 기능이다.
간단하게 설명하자면 어떤 스토리북에서 다른 스토리북의 기능을 참조할 수 있다.
https://storybook.js.org/docs/html/workflows/storybook-composition
위와 같은 URL의 문서를 보면 .storybook/main.js에 다음과 같은 설정이 적혀 있으면 설정할 수 있습니다.
.storybook/main.js

module.exports={
  // your Storybook configuration
  refs: {
   'design-system': {
     title: "Storybook Design System",
     url: "https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com"
   }
  }
}

그래서 나는 자신의 프로젝트를 확인했지만 상술한 설정을 하지 않았다.
그렇다면 Chakra UI의 Composition은 어디에 설정되어 있습니까?

Package Composition

Composition에는 Package Composition라는 기능도 있습니다.
이는 참조 객체의 포장package.json에 설정을 적어 참조 소스의 Storybook을 자동으로 읽을 수 있도록 한 것입니다.
https://storybook.js.org/docs/html/workflows/package-composition
이번 프로젝트에서 참조한 패키지입니다.제이슨 좀 찾아볼게요.
조사 후 다음과 같은 출처를 발견하였다.바로 이거야...
package.json

"storybook": {
    "title": "Chakra UI",
    "url": "https://chakra-ui.netlify.app"
},

https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/package.json
상기 문서에 따르면 @chakra-ui/react에 설정되어 있으면 디스플레이로 만들 수 있으니 한번 해 보세요.
.storybook/main.js

module.exports = {
  // 省略
  refs: {
    '@chakra-ui/react': { disable: true },
  },

그리고 실행!

무사히 disable을 만들었습니다!