From 80761f204e3c3c3468affd028a6b904bc46d5126 Mon Sep 17 00:00:00 2001 From: Bill Keese Date: Wed, 13 Dec 2023 00:32:53 +0900 Subject: [PATCH] fix: declarations of ContentSwitcher, Slider, SkeletonIcon Addresses errors like: TS2305: Module '"@carbon/react"' has no exported member 'ContentSwitcher'. 12 import { ContentSwitcher } from "@carbon/react"; This contains two types of fixes: Whenever the underlying component is written in Typescript, the index file needs to be named index.ts. If it's named index.js, the build won't even generate an index.d.ts file. (The index file can also be named index.tsx, but that doesn't make sense unless it contains React markup.) I updated createClassWrapper() so that Typescript knows the type of the returned functional component: export function createClassWrapper( Component: ComponentClass ): FunctionComponent { ... } Note that the generated index.d.ts are a bit weird, for example /// declare const Slider: import("react").FunctionComponent; If I add casting to the index.ts files themselves, ex: const Slider = createClassWrapper(SliderComponent) as FC; That generates more canonical index.d.ts files: import { FC } from "react"; import { SliderProps } from './Slider'; declare const Slider: FC; (So I can do that if you like.) Of course, the createClassWrapper() calls should be temporary, as all remaining class components should be converted to functional components. Refs #13550, #12557, #13574. --- .../components/ContentSwitcher/{index.js => index.ts} | 7 +++++-- .../components/SkeletonIcon/{index.js => index.ts} | 0 .../src/components/Slider/{index.js => index.ts} | 0 .../src/components/Switch/{index.js => index.ts} | 0 .../{createClassWrapper.js => createClassWrapper.tsx} | 11 +++++------ 5 files changed, 10 insertions(+), 8 deletions(-) rename packages/react/src/components/ContentSwitcher/{index.js => index.ts} (57%) rename packages/react/src/components/SkeletonIcon/{index.js => index.ts} (100%) rename packages/react/src/components/Slider/{index.js => index.ts} (100%) rename packages/react/src/components/Switch/{index.js => index.ts} (100%) rename packages/react/src/internal/{createClassWrapper.js => createClassWrapper.tsx} (70%) diff --git a/packages/react/src/components/ContentSwitcher/index.js b/packages/react/src/components/ContentSwitcher/index.ts similarity index 57% rename from packages/react/src/components/ContentSwitcher/index.js rename to packages/react/src/components/ContentSwitcher/index.ts index 9c65d795b1e5..2d9c0a2dce1e 100644 --- a/packages/react/src/components/ContentSwitcher/index.js +++ b/packages/react/src/components/ContentSwitcher/index.ts @@ -5,9 +5,12 @@ * LICENSE file in the root directory of this source tree. */ +import { ComponentClass } from 'react'; import { createClassWrapper } from '../../internal/createClassWrapper'; -import ContentSwitcherCarbon from './ContentSwitcher'; +import ContentSwitcherCarbon, { ContentSwitcherProps } from './ContentSwitcher'; -const ContentSwitcher = createClassWrapper(ContentSwitcherCarbon); +const ContentSwitcher = createClassWrapper( + ContentSwitcherCarbon as ComponentClass +); export default ContentSwitcher; export { ContentSwitcher }; diff --git a/packages/react/src/components/SkeletonIcon/index.js b/packages/react/src/components/SkeletonIcon/index.ts similarity index 100% rename from packages/react/src/components/SkeletonIcon/index.js rename to packages/react/src/components/SkeletonIcon/index.ts diff --git a/packages/react/src/components/Slider/index.js b/packages/react/src/components/Slider/index.ts similarity index 100% rename from packages/react/src/components/Slider/index.js rename to packages/react/src/components/Slider/index.ts diff --git a/packages/react/src/components/Switch/index.js b/packages/react/src/components/Switch/index.ts similarity index 100% rename from packages/react/src/components/Switch/index.js rename to packages/react/src/components/Switch/index.ts diff --git a/packages/react/src/internal/createClassWrapper.js b/packages/react/src/internal/createClassWrapper.tsx similarity index 70% rename from packages/react/src/internal/createClassWrapper.js rename to packages/react/src/internal/createClassWrapper.tsx index 1928b4102515..5d6610b56081 100644 --- a/packages/react/src/internal/createClassWrapper.js +++ b/packages/react/src/internal/createClassWrapper.tsx @@ -5,16 +5,15 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, { ComponentClass, FunctionComponent } from 'react'; /** * Wrap a class component with a functional component. This prevents an end-user * from being able to pass `ref` and access the underlying class instance. - * - * @param {ReactNode} Component - * @returns {ReactNode} */ -export function createClassWrapper(Component) { +export function createClassWrapper( + Component: ComponentClass +): FunctionComponent { function ClassWrapper(props) { return ; } @@ -22,5 +21,5 @@ export function createClassWrapper(Component) { const name = Component.displayName || Component.name; ClassWrapper.displayName = `ClassWrapper(${name})`; - return ClassWrapper; + return ClassWrapper as FunctionComponent; }