fix(react): export types for Stack component (carbon-design-system#15456

)

* fix(react): export types for Stack component

Signed-off-by: Onur Özkardeş <[email protected]>

* refactor(react/stack): move type declarations into main component file

* fix(stack): get spacing definition from layout instead of icons-react

---------

Signed-off-by: Onur Özkardeş <[email protected]>
Co-authored-by: Onur Özkardeş <[email protected]>
Co-authored-by: Andrea N. Cardona <[email protected]>

.all-contributorsrc

@@ -1390,6 +1390,14 @@
       ]
     },
     {
+      "login": "onurozkardes",
+      "name": "Onur Özkardeş",
+      "avatar_url": "https://avatars.githubusercontent.com/u/38096930?v=4",
+      "profile": "https://github.com/onurozkardes",
+      "contributions": [
+        "code"
+      ]
+    },
       "login": "mattborghi",
       "name": "Matias Borghi",
       "avatar_url": "https://avatars.githubusercontent.com/u/11933424?v=4",

packages/react/src/components/Stack/HStack.tsx

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import { Stack, StackProps } from './Stack';
+
+const HStack = React.forwardRef<React.ReactNode, StackProps>(function HStack(
+  { children, ...props },
+  ref
+) {
+  return (
+    <Stack {...props} ref={ref} orientation="horizontal">
+      {children}
+    </Stack>
+  );
+});
+
+export { HStack };

packages/react/src/components/Stack/Stack.tsx

@@ -5,10 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { spacing } from '@carbon/layout';
+import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import { spacing } from '@carbon/layout';
+
 import { usePrefix } from '../../internal/usePrefix';
 
 /**
@@ -21,7 +22,7 @@ const SPACING_STEPS = Array.from({ length: spacing.length - 1 }).map(
   }
 );
 
-interface StackProps extends React.HTMLAttributes<HTMLElement> {
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Provide a custom element type to render as the outermost element in
    * the Stack component. By default, this component will render a `div`.

packages/react/src/components/Stack/VStack.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import { Stack, StackProps } from './Stack';
+
+const VStack = React.forwardRef<React.ReactNode, StackProps>(function VStack(
+  props,
+  ref
+) {
+  return <Stack {...props} ref={ref} orientation="vertical" />;
+});
+
+export { VStack };

packages/react/src/components/Stack/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 { HStack } from './HStack';
+export { VStack } from './VStack';
+export { Stack, type StackProps } from './Stack';

packages/react/src/index.ts

@@ -76,6 +76,7 @@ export * from './components/SkeletonIcon';
 export * from './components/SkeletonPlaceholder';
 export * from './components/SkeletonText';
 export * from './components/Slider';
+export * from './components/Stack';
 export * from './components/StructuredList';
 export * from './components/Switch';
 export * from './components/Tab';