feat(react): export usePrefix and add story (#11615)

* feat(react): export usePrefix and add story

* chore(react): fix typo

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -8710,6 +8710,7 @@ Map {
   "unstable_useContextMenu" => Object {},
   "unstable_useFeatureFlag" => Object {},
   "unstable_useFeatureFlags" => Object {},
+  "usePrefix" => Object {},
   "useTheme" => Object {},
 }
 `;

packages/react/src/__tests__/index-test.js

@@ -230,6 +230,7 @@ describe('Carbon Components React', () => {
         "unstable_useContextMenu",
         "unstable_useFeatureFlag",
         "unstable_useFeatureFlags",
+        "usePrefix",
         "useTheme",
       ]
     `);

packages/react/src/index.js

@@ -237,3 +237,4 @@ export unstable_TreeView, {
 } from './components/TreeView';
 export { TabPanel, TabPanels, TabList, IconTab } from './components/Tabs';
 export { GlobalTheme, Theme, useTheme } from './components/Theme';
+export { usePrefix } from './internal/usePrefix';

packages/react/src/internal/usePrefix.stories.mdx

@@ -0,0 +1,34 @@
+import { usePrefix } from './usePrefix';
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Hooks/usePrefix" component={usePrefix} />
+
+# usePrefix
+
+[Source code](https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/usePrefix.js)
+
+## Overview
+
+A hook that returns the prefix used in our classes.
+
+## Examples
+
+```js
+import { usePrefix } from '@carbon/react';
+
+function ExampleComponent() {
+  const prefix = usePrefix();
+}
+```
+
+Typically, `usePrefix` will be used alongside `classnames`.
+
+```js
+import { usePrefix } from '@carbon/react';
+import { cx } from 'classnames';
+
+function ExampleComponent() {
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--custom-component`);
+}
+```