chore: create prerequisites for icons package

packages/primitives/scripts/build.js

@@ -17,18 +17,10 @@
  * under the License.
  */
 
-const fs = require('fs');
 const path = require('path');
-const StyleDictionary = require('style-dictionary');
 const { logger } = require('@oxygen-ui/logger');
 const cp = require('child_process');
 
-// const PATHS = {
-//   source: {
-//     tokens: path.resolve(path.join(__dirname, '..', 'src', 'design-tokens')),
-//   },
-// };
-
 /* ====================================================================================== */
 /* Execution starts from here                                                             */
 /* ====================================================================================== */
@@ -38,7 +30,7 @@ logger.log();
 logger.log('                         💅  Building Style Dictionary  💅                         ');
 logger.log();
 
-// cp.fork(path.resolve(__dirname, 'build-sd.js'));
+cp.fork(path.resolve(__dirname, 'build-sd.js'));
 
 logger.log();
 logger.log('                          💅  Building the SVG Icons  💅                           ');

packages/react/.storybook/content/Icons/Icons.stories.mdx

@@ -0,0 +1,48 @@
+import {Meta, ColorPalette, ColorItem, IconGallery, IconItem, Source} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../story-config.ts';
+import defaultTheme from '../../../src/theme/default-theme';
+import * as OxygenIcons from '@oxygen-ui/react-icons';
+
+export const meta = {
+  title: StoryConfig.Icons.hierarchy,
+};
+
+<Meta title={meta.title} />
+
+# Icons
+
+- [Overview](#overview)
+- [All Icons](#colors)
+
+## Overview
+
+The SVG icons from `@oxygen-ui/primitives` exported as React components.
+
+## Usage
+
+Import and use the icons in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import {LockIcon} from '@oxygen-ui/react-icons';\n
+function Demo() {
+  return <LockIcon size="small" />;
+}`}
+/>
+
+## All Icons
+
+<IconGallery>
+  {Object.keys(OxygenIcons).map(key => {
+    const Icon = OxygenIcons[key];
+    return (
+      <IconItem name={Icon.displayName}>
+        <Icon />
+      </IconItem>
+    );
+  })}
+</IconGallery>

packages/react/.storybook/story-config.ts

@@ -20,6 +20,7 @@
 enum StorybookCategories {
   DataDisplay = 'Data Display',
   Foundations = 'Foundations',
+  Icons = 'Icons',
   Inputs = 'Inputs',
   Layout = 'Layout',
   Navigation = 'Navigation',
@@ -29,7 +30,7 @@ enum StorybookCategories {
   Surfaces = 'Surfaces'
 }
 
-export type Stories = 'AppBar' | 'Button' | 'ColorModeToggle' | 'Colors' | 'Grid' | 'Link' | 'SignIn' | 'TextField' | 'Tooltip' | 'Typography' | 'Welcome';
+export type Stories = 'AppBar' | 'Button' | 'ColorModeToggle' | 'Colors' | 'Grid' | 'Icons' | 'Link' | 'SignIn' | 'TextField' | 'Tooltip' | 'Typography' | 'Welcome';
 export type StorybookConfig = Record<Stories, {
   hierarchy: string;
   design?: {
@@ -70,6 +71,9 @@ const StoryConfig: StorybookConfig = {
   Grid: {
     hierarchy: `${StorybookCategories.Layout}/Grid`,
   },
+  Icons: {
+    hierarchy: `${StorybookCategories.Icons}/Icons`,
+  },
   Link: {
     hierarchy: `${StorybookCategories.Navigation}/Link`,
   },