2

I am creating a style guide that uses Ant UI as a baseline. The issue I'm running into is getting the theme configuration started when I run yarn run styleguide. Here is some documentation -- https://ant.design/docs/react/use-with-create-react-app

I have used this boilerplate as a template but the versions they are using are deprecated and older / not up to date with the latest styleguidist documentation and I would like to use the latest versions of everything -- https://github.com/newswim/styleguidist-ant-design/tree/master

I'm not sure how to translate the older version above to the newer version. When I run yarn run start, it uses the new variable because react-app-rewired is in that command but I need it to work with styleguidist with the latest versions of everything.

Thanks.

package.json

  "name": "components",
  "version": "0.1.0",
  "private": false,
  "dependencies": {
    "@types/classnames": "^2.2.9",
    "@types/jest": "24.0.22",
    "@types/node": "12.12.6",
    "@types/react": "16.9.11",
    "@types/react-dom": "16.9.4",
    "antd": "^3.25.0",
    "babel-plugin-import": "^1.12.2",
    "classnames": "^2.2.6",
    "customize-cra": "^0.8.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "prop-types": "^15.7.2",
    "react": "^16.11.0",
    "react-app-rewire-less": "^2.1.3",
    "react-app-rewired": "^2.1.5",
    "react-docgen-typescript": "^1.15.1",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0",
    "react-styleguidist": "^10.2.0",
    "todomvc-app-css": "^2.3.0",
    "typescript": "3.7.2"
  },
  "scripts": {
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

config-overrides.js


module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#ffffff' },
  }),
);

styleguide.config.js

module.exports = {
  title: 'UI Components',
  pagePerSection: true,
  version: 'v1.0.0',
  propsParser: require('react-docgen-typescript').withCustomConfig(
    './tsconfig.json'
  ).parse,
  sections: [
      {
          name: "Introduction",
          content: "docs/introduction.md"
      },
      {
          name: "Documentation",
          sections: [
              {
                  name: "Installation",
                  content: "docs/installation.md",
                  description: "The description for the installation section"
              }
          ]
      },
      {
          name: "UI Components",
          content: "docs/reactui.md",
          components: "src/components/**/!(*.spec).tsx",
          ignore: [
              "src/components/App.js",
              "src/components/Footer.js",
              "src/components/Header.js"
          ],
          exampleMode: "expand", // 'hide' | 'collapse' | 'expand'
          usageMode: "expand" // 'hide' | 'collapse' | 'expand'
      }
  ]
}
userlkjsflkdsvm
  • 961
  • 1
  • 21
  • 53

1 Answers1

1

Styleguidist overrides your config-overrides.js file and removes babel-plugin-import of antd.

Try adding dangerouslyUpdateWebpackConfig to your styleguide.config.js, similar to config-overrides.js just for styleguide.

For example:

const { addBabelPlugin, addLessLoader } = require('customize-cra');

module.exports = {
  dangerouslyUpdateWebpackConfig(webpackConfig, env) {
    webpackConfig = addBabelPlugin(
      ['import', { libraryName: 'antd', style: true }],
    )(webpackConfig);
    return webpackConfig;
  },
};
Noam Manyfler
  • 41
  • 7