refactor: export types (Part 1) (carbon-design-system#5784)

* refactor: export types (Part 1)

* Update packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheet.tsx

Co-authored-by: Matt Gallo <[email protected]>

* refactor: removes unused type

* chore: adds copyright header

---------

Co-authored-by: Matt Gallo <[email protected]>

packages/ibm-products/src/components/APIKeyModal/index.js → packages/ibm-products/src/components/APIKeyModal/index.ts

@@ -6,3 +6,4 @@
 //
 
 export { APIKeyModal } from './APIKeyModal';
+export type { APIKeyModalProps } from './APIKeyModal.types';

packages/ibm-products/src/components/AboutModal/AboutModal.tsx

@@ -28,7 +28,7 @@ import uuidv4 from '../../global/js/utils/uuidv4';
 const blockClass = `${pkg.prefix}--about-modal`;
 const componentName = 'AboutModal';
 
-interface AboutModalProps {
+export interface AboutModalProps {
   /**
    * If you are legally required to display logos of technologies used
    * to build your product you can provide this in the additionalInfo.

packages/ibm-products/src/components/AboutModal/index.js → packages/ibm-products/src/components/AboutModal/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { AboutModal } from './AboutModal';
+export type { AboutModalProps } from './AboutModal';

packages/ibm-products/src/components/ActionSet/ActionSet.tsx

@@ -5,18 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// Carbon and package components we use.
+import { Button, ButtonSet, InlineLoading } from '@carbon/react';
 // Import portions of React that are needed.
 import React, { ComponentProps, PropsWithChildren } from 'react';
+import { allPropTypes, prepareProps } from '../../global/js/utils/props-helper';
 
+import { ButtonProps } from '@carbon/react';
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
-import { allPropTypes, prepareProps } from '../../global/js/utils/props-helper';
-
-// Carbon and package components we use.
-import { Button, ButtonSet, InlineLoading } from '@carbon/react';
-import { ButtonProps } from '@carbon/react';
 
 const blockClass = `${pkg.prefix}--action-set`;
 const componentName = 'ActionSet';
@@ -90,7 +89,7 @@ const defaults = {
   size: 'md',
 };
 
-interface ActionSetProps {
+export interface ActionSetProps {
   /**
    * The action buttons to show. Each action is specified as an object
    * representation of a Carbon button.

packages/ibm-products/src/components/ActionSet/index.js → packages/ibm-products/src/components/ActionSet/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { ActionSet } from './ActionSet';
+export type { ActionSetProps } from './ActionSet';

packages/ibm-products/src/components/AddSelect/index.js → packages/ibm-products/src/components/AddSelect/index.ts

@@ -6,3 +6,4 @@
 //
 
 export { AddSelect } from './AddSelect';
+export type { AddSelectProps } from './AddSelect';

packages/ibm-products/src/components/Carousel/index.js → packages/ibm-products/src/components/Carousel/index.ts

@@ -7,3 +7,4 @@
 
 export { Carousel } from './Carousel';
 export { CarouselItem } from './CarouselItem';
+export type { CarouselProps } from './Carousel';

packages/ibm-products/src/components/Cascade/Cascade.tsx

@@ -5,17 +5,18 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-import React, { forwardRef, PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode, forwardRef } from 'react';
+
 import { Grid } from '@carbon/react';
-import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { pkg } from '../../settings';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
 
 const blockClass = `${pkg.prefix}--cascade`;
 const componentName = 'Cascade';
 
-interface CascadeProps {
+export interface CascadeProps {
   children: ReactNode;
   /**
    * Specify an optional className to be applied to

packages/ibm-products/src/components/Cascade/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2021, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+export { Cascade } from './Cascade';
+export type { CascadeProps } from './Cascade';

packages/ibm-products/src/components/Checklist/Checklist.tsx

@@ -12,6 +12,9 @@
  *   PageHeader (PageHeaderTitle, PageHeaderUtils)
  */
 
+// Carbon and package components we use.
+import { Button, IconButton } from '@carbon/react';
+import { Kind, Kinds, Theme, Themes } from './Checklist.types';
 // Import portions of React that are needed.
 import React, {
   ForwardedRef,
@@ -21,21 +24,15 @@ import React, {
   useState,
 } from 'react';
 
+import { ChecklistChart } from './ChecklistChart';
+import { ChecklistIcon } from './ChecklistIcon';
+import { ChevronUp } from '@carbon/react/icons';
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import uuidv4 from '../../global/js/utils/uuidv4';
 import { pkg } from '../../settings';
-
-// Carbon and package components we use.
-import { Button, IconButton } from '@carbon/react';
-import { ChevronUp } from '@carbon/react/icons';
-
-import { ChecklistIcon } from './ChecklistIcon';
-import { ChecklistChart } from './ChecklistChart';
-import { Kinds, Kind, Theme, Themes } from './Checklist.types';
+import uuidv4 from '../../global/js/utils/uuidv4';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--checklist`;
@@ -63,7 +60,7 @@ type TaskList = {
   tasks: Array<Task>;
 };
 
-interface ChecklistProps {
+export interface ChecklistProps {
   /**
    * Define both `chartLabel` and `chartValue` to show the chart and its label together.
    */

packages/ibm-products/src/components/Checklist/index.js → packages/ibm-products/src/components/Checklist/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { Checklist } from './Checklist';
+export type { ChecklistProps } from './Checklist';

packages/ibm-products/src/components/Coachmark/Coachmark.tsx

@@ -6,23 +6,24 @@
  */
 
 import React, {
-  forwardRef,
   MutableRefObject,
   ReactNode,
+  forwardRef,
+  useCallback,
   useEffect,
   useRef,
   useState,
-  useCallback,
 } from 'react';
-import cx from 'classnames';
+import { useClickOutsideElement, useWindowEvent } from './utils/hooks';
+
+import { COACHMARK_OVERLAY_KIND } from './utils/enums';
+import { CoachmarkContext } from './utils/context';
+import { CoachmarkOverlay } from './CoachmarkOverlay';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
-import { CoachmarkOverlay } from './CoachmarkOverlay';
-import { CoachmarkContext } from './utils/context';
-import { COACHMARK_OVERLAY_KIND } from './utils/enums';
-import { useClickOutsideElement, useWindowEvent } from './utils/hooks';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { pkg /*, carbon */ } from '../../settings';
+import { pkg } from '../../settings';
 import { throttle } from 'lodash';
 import { Popover, PopoverAlignment, PopoverContent } from '@carbon/react';
 import { useIsomorphicEffect } from '../../global/js/hooks';
@@ -39,7 +40,7 @@ const defaults = {
   theme: 'light',
 };
 
-interface CoachmarkProps {
+export interface CoachmarkProps {
   /**
    * Where to render the Coachmark relative to its target.
    * Applies only to Floating and Tooltip Coachmarks.

packages/ibm-products/src/components/Coachmark/index.js → packages/ibm-products/src/components/Coachmark/index.ts

@@ -13,3 +13,4 @@ export {
   COACHMARK_ALIGNMENT,
 } from './utils/enums';
 export { useCoachmark } from './utils/context';
+export type { CoachmarkProps } from './Coachmark';

packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.tsx

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// Import portions of React that are needed.
-import React from 'react';
+import { BEACON_KIND, useCoachmark } from '../Coachmark';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
+// Import portions of React that are needed.
+import React from 'react';
 import cx from 'classnames';
-import { BEACON_KIND, useCoachmark } from '../Coachmark';
-
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { pkg /*, carbon */ } from '../../settings';
+import { pkg } from '../../settings';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--coachmark-beacon`;
@@ -24,7 +23,7 @@ const defaults = {
   kind: 'default',
 };
 
-interface CoachmarkBeaconProps {
+export interface CoachmarkBeaconProps {
   /**
    * Optional class name for this component.
    */

packages/ibm-products/src/components/CoachmarkBeacon/index.js → packages/ibm-products/src/components/CoachmarkBeacon/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { CoachmarkBeacon } from './CoachmarkBeacon';
+export type { CoachmarkBeaconProps } from './CoachmarkBeacon';

packages/ibm-products/src/components/CoachmarkButton/CoachmarkButton.tsx

@@ -5,21 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// Import portions of React that are needed.
-import React from 'react';
-
+import { Button } from '@carbon/react';
 // Other standard imports.
 import PropTypes from 'prop-types';
+// Import portions of React that are needed.
+import React from 'react';
 import cx from 'classnames';
-
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { pkg /*, carbon */ } from '../../settings';
-import { Button } from '@carbon/react';
+import { pkg } from '../../settings';
 import { useCoachmark } from '../Coachmark';
+
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
-interface CoachmarkButtonProps {
+export interface CoachmarkButtonProps {
   /**
    * Provide an optional class to be applied to the containing node.
    */

packages/ibm-products/src/components/CoachmarkButton/index.js → packages/ibm-products/src/components/CoachmarkButton/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { CoachmarkButton } from './CoachmarkButton';
+export type { CoachmarkButtonProps } from './CoachmarkButton';

packages/ibm-products/src/components/CoachmarkFixed/CoachmarkFixed.tsx

@@ -7,28 +7,26 @@
 
 // Import portions of React that are needed.
 import React, {
+  ReactNode,
+  useCallback,
   useEffect,
   useRef,
   useState,
-  useCallback,
-  ReactNode,
-  TransitionEvent,
 } from 'react';
 
+import { COACHMARK_OVERLAY_KIND } from '../Coachmark/utils/enums';
+import { CoachmarkContext } from '../Coachmark/utils/context';
+import { CoachmarkOverlay } from '../Coachmark/CoachmarkOverlay';
+import { CoachmarkTagline } from '../Coachmark/CoachmarkTagline';
 // Other standard imports.
 import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
 import cx from 'classnames';
-
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { pkg /*, carbon */ } from '../../settings';
-
-import { createPortal } from 'react-dom';
-import { CoachmarkOverlay } from '../Coachmark/CoachmarkOverlay';
-import { CoachmarkTagline } from '../Coachmark/CoachmarkTagline';
-import { CoachmarkContext } from '../Coachmark/utils/context';
-import { COACHMARK_OVERLAY_KIND } from '../Coachmark/utils/enums';
+import { pkg } from '../../settings';
 import { useIsomorphicEffect } from '../../global/js/hooks';
 import { useReducedMotion } from 'framer-motion';
+
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -38,7 +36,7 @@ const blockClass = `${coachmarkClass}-fixed`;
 const overlayBlockClass = `${coachmarkClass}-overlay`;
 const componentName = 'CoachmarkFixed';
 
-interface CoachmarkFixedProps {
+export interface CoachmarkFixedProps {
   /**
    * CoachmarkFixed should use a single CoachmarkOverlayElements component as a child.
    */

packages/ibm-products/src/components/CoachmarkFixed/index.js → packages/ibm-products/src/components/CoachmarkFixed/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { CoachmarkFixed } from './CoachmarkFixed';
+export type { CoachmarkFixedProps } from './CoachmarkFixed';

packages/ibm-products/src/components/CoachmarkOverlayElement/CoachmarkOverlayElement.tsx

@@ -11,15 +11,14 @@ import React, { ReactNode } from 'react';
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { pkg /*, carbon */ } from '../../settings';
+import { pkg } from '../../settings';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--coachmark-overlay-element`;
 const componentName = 'CoachmarkOverlayElement';
 
-interface CoachmarkOverlayElementProps {
+export interface CoachmarkOverlayElementProps {
   /**
    * An optional button can be rendered below the description.
    * This can be a link, button, Coachmark button, etc.

packages/ibm-products/src/components/CoachmarkOverlayElement/index.js → packages/ibm-products/src/components/CoachmarkOverlayElement/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { CoachmarkOverlayElement } from './CoachmarkOverlayElement';
+export type { CoachmarkOverlayElementProps } from './CoachmarkOverlayElement';

packages/ibm-products/src/components/CoachmarkOverlayElements/CoachmarkOverlayElements.tsx

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// Carbon and package components we use.
+import { Button, ButtonProps } from '@carbon/react';
 // Import portions of React that are needed.
 import React, {
   Children,
@@ -15,28 +17,25 @@ import React, {
   useState,
 } from 'react';
 
+//TODO THIS PATH WILL NEED TO BE UPDATED ONCE IN IBM PRODUCTS
+import { Carousel } from '../Carousel';
+import { CarouselProps } from '../Carousel/Carousel';
 // Other standard imports.
 import PropTypes from 'prop-types';
+//TODO THIS PATH WILL NEED TO BE UPDATED ONCE IN IBM PRODUCTS
+import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia';
+import { clamp } from 'lodash';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { pkg /*, carbon */ } from '../../settings';
-
-// Carbon and package components we use.
-import { Button, ButtonProps } from '@carbon/react';
-import { useCoachmark } from '../Coachmark';
-import { clamp } from 'lodash';
 import pconsole from '../../global/js/utils/pconsole';
-//TODO THIS PATH WILL NEED TO BE UPDATED ONCE IN IBM PRODUCTS
-import { Carousel } from '../Carousel';
-//TODO THIS PATH WILL NEED TO BE UPDATED ONCE IN IBM PRODUCTS
-import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia';
-import { CarouselProps } from '../Carousel/Carousel';
+import { pkg } from '../../settings';
+import { useCoachmark } from '../Coachmark';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--coachmark-overlay-elements`;
 const componentName = 'CoachmarkOverlayElements';
 
-interface CoachmarkOverlayElementsProps {
+export interface CoachmarkOverlayElementsProps {
   /**
    * CoachmarkOverlayElements should be used with one or many CoachmarkOverlayElement components as children.
    * @see CoachmarkOverlayElement

packages/ibm-products/src/components/CoachmarkOverlayElements/index.js → packages/ibm-products/src/components/CoachmarkOverlayElements/index.ts

@@ -6,3 +6,4 @@
  */
 
 export { CoachmarkOverlayElements } from './CoachmarkOverlayElements';
+export type { CoachmarkOverlayElementsProps } from './CoachmarkOverlayElements';