docs: Migrate Icons, Illustrations, and Patterns into gamut Storybook

packages/.storybook/main.ts

@@ -20,6 +20,18 @@ const config: StorybookConfig = {
       directory: '../gamut/src',
       files: '**/*.stories.@(js|jsx|ts|tsx)',
     },
+    {
+      directory: '../gamut-icons/src',
+      files: '**/*.stories.@(js|jsx|ts|tsx)',
+    },
+    {
+      directory: '../gamut-illustrations/src',
+      files: '**/*.stories.@(js|jsx|ts|tsx)',
+    },
+    {
+      directory: '../gamut-patterns/src',
+      files: '**/*.stories.@(js|jsx|ts|tsx)',
+    },
   ],
   staticDirs: ['../styleguide/src/static'],
   addons: [

packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.stories.tsx → packages/gamut-icons/src/Mini.stories.tsx

@@ -1,10 +1,10 @@
-import type { GamutIconProps } from '@skillsoft/gamut-icons';
-// eslint-disable-next-line @skillsoft/gamut/import-paths
-import * as miniIcons from '@skillsoft/gamut-icons/src/icons/mini';
 import type { Meta, StoryObj } from '@storybook/react';
 import type React from 'react';
 
-import { ImageGallery } from '~styleguide/blocks';
+import { ImageGallery } from '~storybook/blocks';
+
+import type { GamutIconProps } from '.';
+import * as miniIcons from './icons/mini';
 
 type MiniIconProps = GamutIconProps & {
   icon: typeof miniIcons.MiniStarIcon;
@@ -18,6 +18,7 @@ const MiniIconComponent: React.FC<MiniIconProps> = ({
 };
 
 const meta: Meta<typeof MiniIconComponent> = {
+  title: 'Media & Assets/Icons/Mini',
   component: MiniIconComponent,
   argTypes: {
     icon: {
@@ -38,11 +39,10 @@ export const Default: Story = {
   },
 };
 
+// Visual catalog of every mini icon — slow to render + axe, and redundant with
+// `Default`. `!test` removes the auto-applied `test` tag so addon-vitest skips
+// it; it still renders in Storybook.
 export const AllMiniIcons: Story = {
-  // Skip the render/a11y test on the full gallery — it's a visual catalog of
-  // every icon (slow to render + axe), and `Default` already covers the
-  // component's behavior. `!test` removes the auto-applied `test` tag so
-  // addon-vitest ignores this story (it still shows in Storybook).
   tags: ['!test'],
   render: () => {
     return <ImageGallery imageType="icon" images={miniIcons} />;

packages/gamut-icons/src/Regular.stories.tsx

@@ -0,0 +1,209 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ImageGallery } from '~storybook/blocks';
+
+import type { GamutIconProps } from '.';
+import * as icons from './icons/regular';
+
+type IconMap = Record<string, React.ComponentType<GamutIconProps>>;
+
+const allIcons = icons as unknown as IconMap;
+
+const pick = (names: string[]): IconMap =>
+  Object.fromEntries(
+    names
+      .filter((name) => name in allIcons)
+      .map((name) => [name, allIcons[name]])
+  );
+
+const VENDOR_ICON_NAMES = [
+  'AmexIcon',
+  'AppleIcon',
+  'DiscordIcon',
+  'DiscordOutlineIcon',
+  'EaIcon',
+  'FacebookIcon',
+  'FaviconIcon',
+  'FaviconSolidIcon',
+  'GithubIcon',
+  'GithubOutlineIcon',
+  'GoogleIcon',
+  'GplusIcon',
+  'IbmIcon',
+  'InstagramIcon',
+  'JiraIcon',
+  'LinkedinIcon',
+  'LinkedinOutlineIcon',
+  'MastercardIcon',
+  'MediumIcon',
+  'MetaIcon',
+  'MicrosoftIcon',
+  'OpenAiFullIcon',
+  'OpenAiIcon',
+  'PaypalLogoIcon',
+  'PercipioIcon',
+  'RailsIcon',
+  'ReactIcon',
+  'RedditIcon',
+  'RedditSolidIcon',
+  'SlackIcon',
+  'SpotifyIcon',
+  'TikTokIcon',
+  'TwitterIcon',
+  'TwitterOutlineIcon',
+  'VisaIcon',
+  'WhatsAppFilledIcon',
+  'XIcon',
+  'YoutubeIcon',
+  'YoutubePlayIcon',
+].sort();
+
+const LE_ICON_NAMES = [
+  'ArticleIcon',
+  'BadgeIcon',
+  'BookClosedBookmarkIcon',
+  'CertificateFilledIcon',
+  'CertificateIcon',
+  'ChallengeProjectIcon',
+  'ChecklistIcon',
+  'EditorIcon',
+  'FileSearchIcon',
+  'FitnessDumbbellIcon',
+  'ForumsChatIcon',
+  'InformationalIcon',
+  'InteractiveCursorIcon',
+  'InstructionsIcon',
+  'LearnIcon',
+  'LessonIcon',
+  'NarrativeIcon',
+  'ObjectiveIcon',
+  'OverviewIcon',
+  'PathChangeIcon',
+  'PathCompleteIcon',
+  'PathIcon',
+  'PinIcon',
+  'PortfolioProjectIcon',
+  'ProfessionalCertificateIcon',
+  'ProjectsIcon',
+  'QuizIcon',
+  'ReportIcon',
+  'ResponsiveIcon',
+  'StreakIcon',
+  'TerminalIcon',
+  'TrophyFilledIcon',
+  'TrophyIcon',
+].sort();
+
+const SKILLS_ICON_NAMES = [
+  'ArtificialIntelligenceIcon',
+  'BashShellIcon',
+  'CIcon',
+  'CPlusIcon',
+  'CSharpIcon',
+  'CloudComputingIcon',
+  'ComputerScienceIcon',
+  'CybersecurityIcon',
+  'DataAnalyticsIcon',
+  'DataEngineeringIcon',
+  'DataScienceIcon',
+  'DataVisualizationIcon',
+  'DevopsIcon',
+  'FallbackSkillIcon',
+  'FlutterIcon',
+  'GameDevelopmentIcon',
+  'GitIcon',
+  'GoIcon',
+  'HtmlCssIcon',
+  'ItIcon',
+  'JavaIcon',
+  'JavascriptIcon',
+  'KotlinIcon',
+  'MachineLearningIcon',
+  'MarkdownIcon',
+  'MathIcon',
+  'MobileDevelopmentIcon',
+  'PhpIcon',
+  'PythonIcon',
+  'RIcon',
+  'RubyIcon',
+  'SqlIcon',
+  'SwiftIcon',
+  'TypescriptIcon',
+  'WebDesignIcon',
+  'WebDevelopmentIcon',
+].sort();
+
+const VENDOR_ICONS = pick(VENDOR_ICON_NAMES);
+const LE_ICONS = pick(LE_ICON_NAMES);
+const SKILLS_ICONS = pick(SKILLS_ICON_NAMES);
+
+const categorized = new Set([
+  ...VENDOR_ICON_NAMES,
+  ...LE_ICON_NAMES,
+  ...SKILLS_ICON_NAMES,
+]);
+
+const UI_ICONS: IconMap = Object.fromEntries(
+  Object.entries(allIcons).filter(([name]) => !categorized.has(name))
+);
+
+type IconProps = GamutIconProps & {
+  icon: typeof icons.AlertIcon;
+};
+
+const IconComponent: React.FC<IconProps> = ({ icon: Icon, ...rest }) => {
+  return <Icon {...rest} />;
+};
+
+const meta: Meta<typeof IconComponent> = {
+  title: 'Media & Assets/Icons/Regular',
+  component: IconComponent,
+  argTypes: {
+    icon: {
+      options: Object.keys(icons),
+      mapping: icons,
+      control: 'select',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof IconComponent>;
+
+export const Default: Story = {
+  args: {
+    size: 40,
+    icon: icons.AlertIcon,
+  },
+};
+
+// The gallery stories are visual catalogs of every icon (slow to render + axe,
+// and redundant with `Default`). `!test` removes the auto-applied `test` tag so
+// addon-vitest skips them; they still render in Storybook.
+export const RegularInterfaceIcons: Story = {
+  tags: ['!test'],
+  render: () => {
+    return <ImageGallery imageType="icon" images={UI_ICONS} />;
+  },
+};
+
+export const RegularLearningEnvironmentIcons: Story = {
+  tags: ['!test'],
+  render: () => {
+    return <ImageGallery imageType="icon" images={LE_ICONS} />;
+  },
+};
+
+export const RegularVendorIcons: Story = {
+  tags: ['!test'],
+  render: () => {
+    return <ImageGallery imageType="icon" images={VENDOR_ICONS} />;
+  },
+};
+
+export const RegularSkillIcons: Story = {
+  tags: ['!test'],
+  render: () => {
+    return <ImageGallery imageType="icon" images={SKILLS_ICONS} />;
+  },
+};

packages/gamut-icons/tsconfig.json

@@ -7,13 +7,16 @@
     "outDir": "./dist",
     "strict": true,
     "strictFunctionTypes": false,
-    "types": []
+    "types": [],
+    "paths": {
+      "~storybook/blocks": ["../.storybook/components/"]
+    }
   },
   "include": [
     "../../typings/*.d.ts",
     "./src/**/*.ts",
     "./src/**/*.tsx",
     "../../packages/gamut-styles/dist/typings/theme.d.ts"
   ],
-  "exclude": ["jest.config.ts"]
+  "exclude": ["jest.config.ts", "**/*.stories.tsx"]
 }

packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.stories.tsx → packages/gamut-illustrations/src/Illustrations.stories.tsx

@@ -1,8 +1,9 @@
-import type { IllustrationProps } from '@skillsoft/gamut-illustrations';
-import * as illustrations from '@skillsoft/gamut-illustrations';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ImageGallery } from '~styleguide/blocks';
+import { ImageGallery } from '~storybook/blocks';
+
+import type { IllustrationProps } from '.';
+import * as illustrations from '.';
 
 type IllustrationComponentProps = IllustrationProps & {
   illustration: React.ComponentType<IllustrationProps>;
@@ -16,6 +17,7 @@ const IllustrationComponent: React.FC<IllustrationComponentProps> = ({
 };
 
 const meta: Meta<typeof IllustrationComponent> = {
+  title: 'Media & Assets/Illustrations',
   component: IllustrationComponent,
   argTypes: {
     illustration: {

packages/gamut-illustrations/tsconfig.json

@@ -6,7 +6,10 @@
     "jsx": "react-jsx",
     "outDir": "./dist",
     "rootDir": "./src",
-    "types": ["jest"]
+    "types": ["jest"],
+    "paths": {
+      "~storybook/blocks": ["../.storybook/components/"]
+    }
   },
-  "exclude": ["jest.config.ts"]
+  "exclude": ["jest.config.ts", "**/*.stories.tsx"]
 }

packages/styleguide/src/lib/Atoms/Patterns/Patterns.stories.tsx → packages/gamut-patterns/src/Patterns.stories.tsx

@@ -1,8 +1,9 @@
-import type { PatternProps } from '@skillsoft/gamut-patterns';
-import * as patterns from '@skillsoft/gamut-patterns';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ImageGallery } from '~styleguide/blocks';
+import { ImageGallery } from '~storybook/blocks';
+
+import type { PatternProps } from '.';
+import * as patterns from '.';
 
 type PatternComponentProps = PatternProps & {
   pattern: React.ComponentType<PatternProps>;
@@ -16,6 +17,7 @@ const PatternComponent: React.FC<PatternComponentProps> = ({
 };
 
 const meta: Meta<typeof PatternComponent> = {
+  title: 'Media & Assets/Patterns',
   component: PatternComponent,
   argTypes: {
     pattern: {

packages/gamut-patterns/tsconfig.json

@@ -12,7 +12,10 @@
     "jsx": "react-jsx",
     "outDir": "./dist",
     "rootDir": "./src",
-    "types": []
+    "types": [],
+    "paths": {
+      "~storybook/blocks": ["../.storybook/components/"]
+    }
   },
-  "exclude": ["jest.config.ts"]
+  "exclude": ["jest.config.ts", "**/*.stories.tsx"]
 }