feat: use official webpack config for rax

app/rax/README.md

@@ -0,0 +1,29 @@
+# Storybook for Rax
+
+Storybook for Rax is a UI development environment for your Rax components.
+With it, you can visualize different states of your UI components and develop them interactively.
+
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
+
+Storybook runs outside of your app.
+So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
+
+## Getting Started
+
+```sh
+cd my-rax-app
+npx -p @storybook/cli sb init
+```
+
+For more information visit: [storybook.js.org](https://storybook.js.org)
+
+---
+
+Storybook also comes with a lot of [addons](https://storybook.js.org/docs/rax/configure/storybook-addons) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/docs/rax/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
+
+## Docs
+
+- [Basics](https://storybook.js.org/docs/rax/get-started/introduction)
+- [Configurations](https://storybook.js.org/docs/rax/configure/overview)
+- [Addons](https://storybook.js.org/docs/rax/configure/storybook-addons)

app/rax/bin/build.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+require('../dist/cjs/server/build');

app/rax/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require('../dist/cjs/server');

app/rax/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@storybook/rax",
+  "version": "6.4.0-beta.26",
+  "description": "Storybook for Rax: Develop Rax Component in isolation.",
+  "keywords": [
+    "rax",
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/rax",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "app/rax"
+  },
+  "license": "MIT",
+  "main": "dist/cjs/client/index.js",
+  "module": "dist/esm/client/index.js",
+  "types": "dist/ts3.9/client/index.d.ts",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "dist/ts3.4/*"
+      ]
+    }
+  },
+  "bin": {
+    "build-storybook": "./bin/build.js",
+    "start-storybook": "./bin/index.js",
+    "storybook-server": "./bin/index.js"
+  },
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/core": "6.4.0-beta.26",
+    "@storybook/core-common": "6.4.0-beta.26",
+    "driver-dom": "^2.2.0",
+    "global": "^4.4.0",
+    "postcss-import": "^12.0.1",
+    "postcss-plugin-rpx2vw": "^0.0.2",
+    "postcss-preset-env": "^6.7.0",
+    "rax-babel-config": "^1.0.5",
+    "rax-webpack-config": "^2.0.4",
+    "read-pkg-up": "^7.0.1",
+    "ts-dedent": "^2.0.0",
+    "webpack": "4",
+    "webpack-chain": "^6.5.1"
+  },
+  "devDependencies": {
+    "@types/rax": "^1.0.2",
+    "rax": "^1.2.0"
+  },
+  "peerDependencies": {
+    "@babel/core": "*",
+    "rax": "^0.4.0 || ^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "ddc43c3b4cf4ae8463a2e284b290e5014e33780e"
+}

app/rax/src/client/index.ts

@@ -0,0 +1,10 @@
+export {
+  storiesOf,
+  setAddon,
+  addDecorator,
+  addParameters,
+  configure,
+  getStorybook,
+  forceReRender,
+  raw,
+} from './preview';

app/rax/src/client/preview/globals.ts

@@ -0,0 +1,5 @@
+import { window } from 'global';
+
+if (window) {
+  window.STORYBOOK_ENV = 'rax';
+}

app/rax/src/client/preview/index.ts

@@ -0,0 +1,22 @@
+import { start } from '@storybook/core/client';
+
+import './globals';
+import render from './render';
+
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
+
+export const {
+  setAddon,
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  getStorybook,
+  raw,
+} = clientApi;
+
+const framework = 'rax';
+export const storiesOf = (kind: string, m: any) =>
+  clientApi.storiesOf(kind, m).addParameters({ framework });
+export const configure = (loadable: any, m: any) => coreConfigure(framework, loadable, m);
+
+export { forceReRender };

app/rax/src/client/preview/render.ts

@@ -0,0 +1,46 @@
+import { createElement, render } from 'rax';
+import * as DriverDOM from 'driver-dom';
+
+import { document } from 'global';
+import dedent from 'ts-dedent';
+
+const rootElement = document ? document.getElementById('root') : null;
+
+export default function renderMain({
+  storyFn,
+  kind,
+  name,
+  showMain,
+  showError,
+}: {
+  storyFn: Function;
+  kind: string;
+  name: string;
+  showMain: () => any;
+  showError: (input: { title: string; description: string }) => void;
+}) {
+  const Element = storyFn;
+
+  if (!Element) {
+    showError({
+      title: `Expecting a Rax element from the story: "${name}" of "${kind}".`,
+      description: dedent`
+        Did you forget to return the Rax element from the story?
+        Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
+      `,
+    });
+    return;
+  }
+
+  showMain();
+
+  // There is something miscellaneous here, for now, more precisely on L23,
+  // as we are using the storyFn directly and not calling it, so `Element` is a
+  // function but according to `createElement` types, there is no signature
+  // taking a function as input.
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  render(createElement(Element), rootElement, {
+    driver: DriverDOM,
+  });
+}

app/rax/src/server/build.ts

@@ -0,0 +1,4 @@
+import { buildStatic } from '@storybook/core/server';
+import options from './options';
+
+buildStatic(options);

app/rax/src/server/framework-preset-rax.ts

@@ -0,0 +1,22 @@
+import { Configuration } from 'webpack';
+import { getRaxWebpackConfig } from './get-rax-wabpack-config';
+
+export function webpackFinal(config: Configuration) {
+  const raxWebpackConfig = getRaxWebpackConfig();
+
+  // Conflict with rax css loader, remove it
+  const cssRuleIndex = config.module.rules.findIndex(
+    (rule) => rule.test.toString() === '/\\.css$/'
+  );
+  if (cssRuleIndex) {
+    config.module.rules.splice(cssRuleIndex, 1);
+  }
+
+  return {
+    ...config,
+    module: {
+      rules: [...config.module.rules, ...raxWebpackConfig.module.rules],
+    },
+    plugins: [...config.plugins, ...raxWebpackConfig.plugins],
+  };
+}

app/rax/src/server/get-rax-wabpack-config.ts

@@ -0,0 +1,34 @@
+import getWebpackConfig from 'rax-webpack-config';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import getBabelConfig from 'rax-babel-config';
+import path from 'path';
+import Config, { Rule } from 'webpack-chain';
+
+const setPostCssConfig = (rule: Rule) => {
+  rule.use('postcss-loader').tap((options) => {
+    return {
+      ...options,
+      config: {
+        path: path.resolve(__dirname),
+      },
+    };
+  });
+};
+
+export const getRaxWebpackConfig = () => {
+  const babelConfig = getBabelConfig({});
+  const webpackConfig: Config = getWebpackConfig({
+    babelConfig,
+  });
+
+  ['css', 'less', 'scss'].forEach((item) => {
+    const rule = webpackConfig.module.rule(item);
+    const moduleRule = webpackConfig.module.rule(`${item}-module`);
+
+    setPostCssConfig(rule);
+    setPostCssConfig(moduleRule);
+  });
+
+  return webpackConfig.toConfig();
+};

app/rax/src/server/index.ts

@@ -0,0 +1,4 @@
+import { buildDev } from '@storybook/core/server';
+import options from './options';
+
+buildDev(options);

app/rax/src/server/options.ts

@@ -0,0 +1,8 @@
+import { sync } from 'read-pkg-up';
+import { LoadOptions } from '@storybook/core-common';
+
+export default {
+  packageJson: sync({ cwd: __dirname }).packageJson,
+  framework: 'rax',
+  frameworkPresets: [require.resolve('./framework-preset-rax.js')],
+} as LoadOptions;

app/rax/src/server/postcss.config.js

@@ -0,0 +1,17 @@
+/* eslint-disable global-require */
+
+// See https://github.com/postcss/postcss-loader#context-ctx
+module.exports = () => {
+  return {
+    plugins: [
+      require('postcss-import'),
+      require('postcss-preset-env')({
+        autoprefixer: {
+          flexbox: 'no-2009',
+        },
+        stage: 3,
+      }),
+      require('postcss-plugin-rpx2vw')(),
+    ],
+  };
+};

app/rax/src/typings.d.ts

@@ -0,0 +1 @@
+declare module 'global';

app/rax/standalone.js

@@ -0,0 +1,8 @@
+const build = require('@storybook/core/standalone');
+const frameworkOptions = require('./dist/cjs/server/options').default;
+
+async function buildStandalone(options) {
+  return build(options, frameworkOptions);
+}
+
+module.exports = buildStandalone;

app/rax/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "types": ["webpack-env", "node"]
+  }
+}

examples/rax-kitchen-sink/.env

@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+NODE_PATH=src

examples/rax-kitchen-sink/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  settings: {
+    react: {
+      pragma: 'createElement',
+    },
+  },
+};

examples/rax-kitchen-sink/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+jest-test-results.json
+
+
+

examples/rax-kitchen-sink/.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  stories: ['../src/stories/**/*.stories.js', '../src/stories/**/*.stories.tsx'],
+  logLevel: 'debug',
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-a11y',
+    '@storybook/addon-controls',
+  ],
+  core: {
+    builder: 'webpack4',
+  },
+  features: {
+    postcss: false,
+  },
+};

examples/rax-kitchen-sink/.storybook/preview.js

@@ -0,0 +1,13 @@
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming';
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'Storybook for Rax',
+  brandUrl: 'https://github.com/storybookjs/storybook/tree/master/examples/rax-kitchen-sink',
+});
+
+addons.setConfig({
+  panelPosition: 'bottom',
+  theme,
+});