Merge pull request #489 from Zonos/refactor/move-mdx-components

Refactor/move mdx components

.storybook/__tests__/buildStories.test.ts

@@ -1,6 +1,6 @@
 import { buildStories } from '../buildStories';
 
-describe('Make sure buildStories work as expected', () => {
+describe('Make sure buildStories works as expected', () => {
   test(`Should order by name for base folder 'src'`, () => {
     const stories = buildStories([
       '../src/components/text/__stories__/Typography.stories.tsx',
@@ -15,15 +15,15 @@ describe('Make sure buildStories work as expected', () => {
     ]);
     expect(stories.map(story => `${story.directory}/${story.files}`))
       .toMatchInlineSnapshot(`
-      Array [
+      [
         "../src/__stories__/Composer.stories.tsx",
         "../src/icons/__stories__/AllIcons.stories.tsx",
         "../src/__stories__/ScratchPad.stories.tsx",
         "../src/components/tag/__stories__/Tag.stories.tsx",
         "../src/components/text/__stories__/Typography.stories.tsx",
         "../src/components/text-avatar/__stories__/TextAvatar.stories.tsx",
-        "../src/components/toast/__stories__/ToastConsumer.stories.tsx",
         "../src/components/toast/__stories__/Toast.stories.tsx",
+        "../src/components/toast/__stories__/ToastConsumer.stories.tsx",
         "../src/components/tooltip/__stories__/Tooltip.stories.tsx",
       ]
     `);
@@ -41,13 +41,13 @@ describe('Make sure buildStories work as expected', () => {
     ]);
     expect(stories.map(story => `${story.directory}/${story.files}`))
       .toMatchInlineSnapshot(`
-      Array [
-        "../src/components/styles/__stories__/BoxShadow.stories.tsx",
-        "../src/components/styles/__stories__/Colors.stories.tsx",
+      [
         "../src/components/sortable-list/__stories__/SortableList.stories.tsx",
         "../src/components/spinner/__stories__/Spinner.stories.tsx",
         "../src/components/stack/__stories__/HStack.stories.tsx",
         "../src/components/stack/__stories__/VStack.stories.tsx",
+        "../src/components/styles/__stories__/BoxShadow.stories.tsx",
+        "../src/components/styles/__stories__/Colors.stories.tsx",
         "../src/components/switch/__stories__/Switch.stories.tsx",
       ]
     `);
@@ -78,9 +78,7 @@ describe('Make sure buildStories work as expected', () => {
     ]);
     expect(stories.map(story => `${story.directory}/${story.files}`))
       .toMatchInlineSnapshot(`
-      Array [
-        "../src/components/styles/__stories__/BoxShadow.stories.tsx",
-        "../src/components/styles/__stories__/Colors.stories.tsx",
+      [
         "../src/__stories__/Composer.stories.tsx",
         "../src/icons/__stories__/AllIcons.stories.tsx",
         "../src/__stories__/ScratchPad.stories.tsx",
@@ -90,6 +88,8 @@ describe('Make sure buildStories work as expected', () => {
         "../src/components/spinner/__stories__/Spinner.stories.tsx",
         "../src/components/stack/__stories__/HStack.stories.tsx",
         "../src/components/stack/__stories__/VStack.stories.tsx",
+        "../src/components/styles/__stories__/BoxShadow.stories.tsx",
+        "../src/components/styles/__stories__/Colors.stories.tsx",
         "../src/components/switch/__stories__/Switch.stories.tsx",
         "../src/components/table/__stories__/Table.stories.tsx",
         "../src/components/tabs/__stories__/Tabs.stories.tsx",
@@ -102,4 +102,31 @@ describe('Make sure buildStories work as expected', () => {
       ]
     `);
   });
+
+  test('Various story paths', () => {
+    const stories = buildStories([
+      '../src/__stories__/Composer.stories.tsx',
+      '../src/icons/__stories__/Icons.stories.tsx',
+      '../src/components/mdx/mdx-related-content/__stories__/MdxRelatedContent.stories.tsx',
+      '../src/components/layout/__stories__/NavigationGroup.stories.tsx',
+      '../src/components/checkbox/__stories__/Checkbox.stories.tsx',
+      '../src/components/alert-dialog/__stories__/Alert.stories.tsx',
+    ]);
+
+    const expectedPaths = [
+      // This one is because the folder is a different name
+      'Amino/Alert-Dialog/Alert',
+      'Amino/Checkbox',
+      'Amino/Composer',
+      'Amino/Icons',
+      'Amino/Layout/NavigationGroup',
+      'Amino/mdx/MdxRelatedContent',
+    ];
+
+    const paths = stories.map(
+      story => `${story.titlePrefix}/${story.fileName}`
+    );
+
+    expect(paths).toEqual(expectedPaths);
+  });
 });

.storybook/buildStories.ts

@@ -1,41 +1,85 @@
 import { capitalize } from '../build-utils/css/utils/capitalize';
-type ProcessingStoryEntry = {
+
+// https://storybook.js.org/docs/react/configure/overview#with-a-configuration-object
+type StorySpecifier = {
+  /**
+   * When auto-titling, what to prefix all generated titles with (default: '')
+   */
   titlePrefix: string;
-  folder: string;
+  /**
+   * Where to start looking for story files
+   */
   directory: string;
+  /**
+   * What does the filename of a story file look like?
+   * (a glob, relative to directory, no leading `./`)
+   * If unset, we use `** / *.@(mdx|stories.@(mdx|tsx|ts|jsx|js))` (no spaces)
+   */
   files: string;
 };
 
-const isRootFolder = (folder: string) => ['src', 'styles'].includes(folder);
-
-// Read the specified title from a story meta.
-const getTitle = (entry: ProcessingStoryEntry): string =>
-  isRootFolder(entry.folder) ? entry.files : entry.folder;
-
-const getStoryEntry = (storyPath: string) => {
-  const matched = storyPath.match(
-    /(.+)\/([a-zA-Z-_]+?)\/__stories__\/([a-zA-Z]+)\.stories\.tsx*/i
-  );
-  const [, fullPath, folder, fileName] = matched || [];
-  /** remove the `-` and lowercase it for comparing */
-  const sanitizedFolder = folder.toLowerCase().replace(/-/g, '');
-  const titlePrefix =
-    /** If it's not root folder, make folder for the prefix title, otherwise just namespace */
-    sanitizedFolder !== fileName.toLowerCase() && !isRootFolder(folder)
-      ? `Amino/${capitalize(folder)}/${fileName}`
-      : `Amino`;
+type StoryEntry = StorySpecifier & {
+  fileName: string;
+};
+
+// We don't want to show these folders in the sidebar
+const removedPrefixes = /(components|icons|styles)\//;
+
+const pathRegex =
+  /(?<fullFolder>..\/src(\/(?<folder>.*))?\/__stories__)\/(?<fileName>.*)\.stories\.tsx/i;
+
+// The titlePrefix defines the folder structure in the sidebar
+const getTitlePrefix = ({
+  folder,
+  fileName,
+}: {
+  folder?: string;
+  fileName: string;
+}): string => {
+  if (!folder) {
+    return 'Amino';
+  }
+
+  const removedCommonPrefixFolder = folder.replace(removedPrefixes, '');
+
+  const folderParts = removedCommonPrefixFolder.split('/');
+
+  // Just want the immediate parent folder
+  const parentFolder = folderParts.pop() || '';
+
+  const sanitizedParentFolder = parentFolder.toLowerCase().replace(/-/g, '');
+
+  // Folder name and file name are the same, so we can remove the folder name from the prefix
+  const hoist = sanitizedParentFolder === fileName.toLowerCase();
+
+  return hoist
+    ? ['Amino', ...folderParts].join('/')
+    : ['Amino', ...folderParts, capitalize(parentFolder)].join('/');
+};
+
+const getStoryEntry = (storyPath: string): StoryEntry => {
+  const matched = storyPath.match(pathRegex);
+
+  const { fullFolder, folder, fileName } = matched?.groups || {};
+
+  const titlePrefix = getTitlePrefix({ folder, fileName });
+
   return {
-    titlePrefix: titlePrefix,
-    folder: sanitizedFolder,
-    directory: `${fullPath}/${folder}/__stories__`,
+    directory: fullFolder,
+    fileName,
+    titlePrefix,
     files: `${fileName}.stories.tsx`,
   };
 };
+
+const getTitle = (entry: StoryEntry): string =>
+  `${entry.titlePrefix}/${entry.fileName}`;
+
 /** Build story entries object */
 export const buildStories = (stories: string[]) =>
   stories
     .map(storyPath => getStoryEntry(storyPath))
-    // Will order stories alphabetically by file name if it's root folder, otherwise order by folder name.
+    // Will order stories alphabetically by full name
     .sort((a, b) => {
       const storyNameA = getTitle(a);
       const storyNameB = getTitle(b);

build-utils/css/utils/__tests__/__snapshots__/convertToCssVariable.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Theme content: 1`] = `
-Object {
+{
   "--amino-appbar-elevation": "var(--amino-elevation-500)",
   "--amino-appbar-height": "55px",
   "--amino-backdrop-color": "var(--amino-gray-1000)",

jest.config.ts

@@ -14,16 +14,11 @@ const config: InitialOptionsTsJest = {
   modulePathIgnorePatterns: ['dist', '__stories__', 'playwright'],
   setupFilesAfterEnv: ['./jest/setupJest.ts'],
   transform: {
-    '^.+\\.(js|jsx|ts|tsx)?$': 'ts-jest',
+    '^.+\\.(js|jsx|ts|tsx)?$': ['ts-jest', { isolatedModules: true }],
     '^.+\\.svg$': 'jest-transformer-svg',
     '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform',
   },
   testEnvironment: 'jsdom',
-  globals: {
-    'ts-jest': {
-      isolatedModules: true,
-    },
-  },
 };
 
 export default config;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
     "autoprefixer": "10.4.4",
-    "babel-jest": "^28.1.3",
+    "babel-jest": "^29.5.0",
     "babel-loader": "^8.3.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react-app": "^10.0.1",
@@ -59,7 +59,7 @@
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-deprecation": "^1.3.3",
+    "eslint-plugin-deprecation": "^1.4.1",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jest": "^27.0.2",
     "eslint-plugin-jsx-a11y": "6.5.1",
@@ -73,11 +73,11 @@
     "graphiql": "^2.4.1",
     "graphql": "^16.6.0",
     "graphql-request": "~5.1.0",
-    "jest": "^28.1.3",
+    "jest": "^29.5.0",
     "jest-css-modules-transform": "^4.4.2",
     "jest-environment-jsdom": "^28.1.3",
     "jest-image-snapshot": "^6.1.0",
-    "jest-transformer-svg": "^2.0.0",
+    "jest-transformer-svg": "^2.0.1",
     "lodash": "^4.17.21",
     "postcss": "8.4.12",
     "postcss-preset-env": "8.3.2",
@@ -189,8 +189,8 @@
     "test:pw": "playwright test",
     "test": "jest --watchAll --testPathIgnorePatterns storyshots",
     "tsc": "tsc --noEmit",
-    "version:major": "pnpm build && npm version major -m 'Bump version %s' && pnpm push:tags",
-    "version:minor": "pnpm build && npm version minor -m 'Bump version %s' && pnpm push:tags",
-    "version:patch": "pnpm build && npm version patch -m 'Bump version %s' && pnpm push:tags"
+    "version:major": "pnpm build && pnpm version major -m 'Bump version %s' && pnpm push:tags",
+    "version:minor": "pnpm build && pnpm version minor -m 'Bump version %s' && pnpm push:tags",
+    "version:patch": "pnpm build && pnpm version patch -m 'Bump version %s' && pnpm push:tags"
   }
 }