Merge pull request #1 from storybookjs/mdx1-support

Add MDXv1 compiler, tests, example

.github/workflows/linear-export.yml

@@ -20,7 +20,7 @@ jobs:
           ghRepoOwner: ${{ github.event.repository.owner.login }}
           ghRepoName: ${{ github.event.repository.name }}
           ghToken: ${{ secrets.LINEAR_GH_TOKEN }}
-          linearIssuePrefix: linear-issue-prefix
+          linearIssuePrefix: csf-mdx1
           linearLabel: Storybook
           linearPRLabel: PR
           linearTeam: SB

.storybook/main.js

@@ -0,0 +1,35 @@
+const { createCompiler } = require('../dist/cjs');
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: '@storybook/react',
+  webpackFinal: async (config) => {
+    const rules = (config.module.rules || []).filter(
+      (rule) => !rule.test?.toString().endsWith('\\.mdx$/')
+    );
+    rules.push({
+      // 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate
+      //     the docs page from the markdown
+      test: /\.(stories|story)\.mdx$/,
+      use: [
+        {
+          // Need to add babel-loader as dependency: `yarn add -D babel-loader`
+          loader: require.resolve('babel-loader'),
+          // may or may not need this line depending on your app's setup
+          options: {
+            plugins: ['@babel/plugin-transform-react-jsx'],
+          },
+        },
+        {
+          loader: require.resolve('../loader'),
+        },
+      ],
+    });
+    config.module.rules = rules;
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -1,87 +1,71 @@
-# Storybook Library Kit
+## @storybook/mdx1-csf
 
-Simplify the creation of Storybook libraries
+Storybook's `mdx1-csf` is a compiler that turns MDXv1 input into CSF output.
 
-- 📝 Live-editing in development
-- ⚛️ React/JSX support
-- 📦 Transpiling and bundling with Babel
-- 🚢 Release management with [Auto](https://github.com/intuit/auto)
-- 🧺 Boilerplate and sample code + Jest tests
-- 📕 Storybook example
-- 👷 Github workflows (test, release, linear)
-- 🖼 Github templates (issues, pull request)
-- 🛠 Husky + Lint-staged + Prettier + ESLint
-- 🛄 ESM support
-- 🛂 TypeScript
+For example, the following input:
 
-> ⚠️ This template is intended to help bootstrap libraries and not addons. Please check [Storybook's addon kit](https://github.com/storybookjs/addon-kit) for addons instead!
+```mdx
+import { Meta, Story } from '@storybook/addon-docs';
 
-## Getting Started
+<Meta title="atoms/Button" />
 
-Click the **Use this template** button to get started.
-
-![](https://user-images.githubusercontent.com/1671563/154354190-e145b3d1-7ca9-4243-afac-96e3c39cb895.gif)
-
-Clone your repository and install dependencies.
-
-```sh
-yarn
+<Story name="Bar">
+  <Button>hello</Button>
+</Story>
 ```
 
-After installing the dependencies, you will be onboarded with some questions to help setup the project. After answering them, the project will fill in the necessary info, delete the unnecessary code and create an initial commit with everything ready for you to succeed!
-
-### Development scripts
-
-- `yarn start` runs babel in watch mode and starts Storybook
-- `yarn build` build and package your library code
-
-## Release Management
+Might be transformed into the following CSF (over-simplified):
 
-### Setup
+```js
+export default {
+  title: 'atoms/Button',
+};
 
-This project is configured to use [auto](https://github.com/intuit/auto) for release management. It generates a changelog and pushes it to both GitHub and npm. Therefore, you need to configure access to both:
-
-- [`NPM_TOKEN`](https://docs.npmjs.com/creating-and-viewing-access-tokens#creating-access-tokens) Create a token with both _Read and Publish_ permissions.
-- [`GH_TOKEN`](https://github.com/settings/tokens) Create a token with the `repo` scope.
+export const Bar = () => <Button>hello</Button>;
+```
 
-#### Local
+## API
 
-To use `auto` locally create a `.env` file at the root of your project and add your tokens to it:
+This library exports three functions to compile MDX: `compile`, `compileSync`, and `createCompiler`.
 
-```bash
-GH_TOKEN=<value you just got from GitHub>
-NPM_TOKEN=<value you just got from npm>
-```
+### compile
 
-Lastly, **create labels on GitHub**. You’ll use these labels in the future when making changes to the package.
+Asynchronously compile a string:
 
-```bash
-npx auto create-labels
+```js
+const code = '# hello\n\nworld';
+const output = await compile(code);
 ```
 
-If you check on GitHub, you’ll now see a set of labels that `auto` would like you to use. Use these to tag future pull requests.
+### compileSync
 
-#### GitHub Actions
+Synchronously compile a string:
 
-This template comes with GitHub actions already set up to publish your library anytime someone pushes to your repository.
+```js
+const code = '# hello\n\nworld';
+const output = compileSync(code);
+```
 
-Go to `Settings > Secrets`, click `New repository secret`, and add your `NPM_TOKEN`.
+### createCompiler
 
-### Creating a release
+Create a compiler plugin for for MDXv1:
 
-To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.
+```js
+import mdx from '@mdx-js/mdx';
+import { createCompiler } from '@storybook/mdx1-csf';
 
-```sh
-yarn release
+const code = '# hello\n\nworld';
+mdx.sync(code, { compilers: [createCompiler()] });
 ```
 
-That will:
+## Contributing
+
+We welcome contributions to Storybook!
 
-- Build and package the addon code
-- Bump the version
-- Push a release to GitHub and npm
-- Push a changelog to GitHub
+- 📥 Pull requests and 🌟 Stars are always welcome.
+- Read our [contributing guide](CONTRIBUTING.md) to get started,
+  or find us on [Discord](https://discord.gg/storybook), we will take the time to guide you
 
-### Credits
+## License
 
-This project is highly inspired by [Storybook's addon kit](https://github.com/storybookjs/addon-kit).
+[MIT](https://github.com/storybookjs/csf-mdx1/blob/main/LICENSE)

loader.js

@@ -0,0 +1,41 @@
+const { getOptions } = require('loader-utils');
+const mdx = require('@mdx-js/mdx');
+const { createCompiler } = require('./dist/cjs');
+
+const DEFAULT_RENDERER = `
+import React from 'react'
+import { mdx } from '@mdx-js/react'
+`;
+
+// Lifted from MDXv1 loader
+// https://github.com/mdx-js/mdx/blob/v1/packages/loader/index.js
+//
+// Added
+// - webpack5 support
+// - MDX compiler built in
+const loader = async function (content) {
+  const callback = this.async();
+  // this.getOptions() is webpack5 only
+  const queryOptions = this.getOptions ? this.getOptions() : getOptions(this);
+  const options = Object.assign({}, queryOptions, {
+    filepath: this.resourcePath,
+  });
+  if (!options.skipCsf) {
+    options.compilers = [createCompiler(options), ...(options.compilers || [])];
+  }
+
+  let result;
+
+  try {
+    result = await mdx(content, options);
+  } catch (err) {
+    return callback(err);
+  }
+
+  const { renderer = DEFAULT_RENDERER } = options;
+
+  const code = `${renderer}\n${result}`;
+  return callback(null, code);
+};
+
+module.exports = loader;

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "package-name",
+  "name": "@storybook/mdx1-csf",
   "version": "0.0.0",
-  "description": "package-description",
+  "description": "MDXv1 to CSF webpack compiler and loader",
   "repository": {
     "type": "git",
-    "url": "https://github.com/storybookjs/package-base-name"
+    "url": "https://github.com/storybookjs/csf-mdx1"
   },
-  "author": "package-author",
+  "author": "Michael Shilman <[email protected]>",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -27,13 +27,26 @@
     "build": "concurrently \"yarn buildBabel\" \"yarn buildTsc\"",
     "build:watch": "concurrently \"yarn buildBabel:cjs -- --watch\" \"yarn buildTsc -- --watch\"",
     "test": "jest",
-    "start": "yarn build:watch",
+    "start": "yarn \"build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
     "release": "yarn build && auto shipit",
     "lint": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.html,.ts,.tsx,.mjs",
     "prettier": "prettier",
-    "prerelease": "node scripts/prepublish-checks.js",
-    "postinstall": "node scripts/welcome-message.js",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "dependencies": {
+    "@babel/generator": "^7.12.11",
+    "@babel/parser": "^7.12.11",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/types": "^7.12.11",
+    "@mdx-js/mdx": "^1.6.22",
+    "@types/lodash": "^4.14.167",
+    "js-string-escape": "^1.0.1",
+    "loader-utils": "^2.0.0",
+    "lodash": "^4.17.21",
+    "prettier": ">=2.2.1 <=2.3.0",
+    "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@auto-it/released": "^10.32.6",
@@ -43,13 +56,19 @@
     "@babel/preset-react": "^7.12.5",
     "@babel/preset-typescript": "^7.13.0",
     "@babel/template": "^7.14.5",
-    "@babel/types": "^7.14.8",
     "@jest/types": "^27.0.6",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
     "@storybook/eslint-config-storybook": "^3.1.2",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
     "@testing-library/dom": "^8.1.0",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.3",
+    "@types/js-string-escape": "^1.0.1",
     "@types/node": "^16.4.1",
     "auto": "^10.3.0",
     "babel-jest": "^27.0.6",
@@ -60,7 +79,6 @@
     "jest": "^27.0.6",
     "jest-environment-jsdom": "^27.0.6",
     "lint-staged": ">=10",
-    "prettier": "^2.3.1",
     "prompts": "^2.4.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",