Использование Styleguidist в сочетании с пользовательским интерфейсом Ant в React - PullRequest
Новая
       30

Использование Styleguidist в сочетании с пользовательским интерфейсом Ant в React

0 голосов
/ 12 ноября 2019

Я создаю руководство по стилю, в котором в качестве основы используется пользовательский интерфейс Ant. Проблема, с которой я сталкиваюсь, - это запуск конфигурации темы, когда я запускаю yarn run styleguide. Вот некоторая документация - https://ant.design/docs/react/use-with-create-react-app

Я использовал этот шаблон в качестве шаблона, но версии, которые они используют, устарели и устарели / не соответствуют последней документации styleguidist, и я хотел бы использоватьпоследние версии всего - https://github.com/newswim/styleguidist-ant-design/tree/master

Я не уверен, как перевести старую версию выше в более новую версию. Когда я запускаю yarn run start, он использует новую переменную, потому что в этой команде есть response-app-rewired, но мне нужно, чтобы она работала с styleguidist с последними версиями всего.

Спасибо.

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'
      }
  ]
}
...