From 325469341f925880b6922458a736cf3977f68e64 Mon Sep 17 00:00:00 2001 From: Evgeniya Date: Wed, 15 Dec 2021 01:40:29 +0300 Subject: [PATCH 1/5] build(docs): add new styleguide:props cmd & VKUI_STYLEGUIDE_PROPSPARSER env var --- package.json | 1 + styleguide/webpack.config.js | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/package.json b/package.json index 6dee1851cd..3f15a8a89f 100644 --- a/package.json +++ b/package.json @@ -145,6 +145,7 @@ "size": "yarn clear && concurrently 'yarn:babel' 'yarn:postcss' && size-limit", "size:ci": "yarn install --frozen-lockfile --ignore-scripts && yarn build:no-types", "styleguide": "cross-env NODE_ENV=development styleguidist server --config=styleguide/config.js", + "styleguide:props": "cross-env NODE_ENV=development VKUI_STYLEGUIDE_PROPSPARSER=1 styleguidist server --config=styleguide/config.js", "styleguide:build": "cross-env NODE_ENV=production styleguidist build --config=styleguide/config.js", "dev": "yarn clear && concurrently \"yarn:tsc-dev\" \"yarn:babel-dev\" \"yarn:postcss-dev\"", "dev-cjs": "yarn clear && concurrently \"yarn:tsc-cjs-dev\" \"yarn:babel-cjs-dev\" \"yarn:postcss-dev\"", diff --git a/styleguide/webpack.config.js b/styleguide/webpack.config.js index 50c9b9cf7c..e4b6ca6cf0 100644 --- a/styleguide/webpack.config.js +++ b/styleguide/webpack.config.js @@ -1,8 +1,15 @@ const path = require("path"); const webpackConfig = require("../webpack.config"); +const { DefinePlugin } = require("webpack"); const merge = require("webpack-merge"); module.exports = merge(webpackConfig, { + plugins: [ + new DefinePlugin({ + "process.env.VKUI_STYLEGUIDE_PROPSPARSER": + process.env.VKUI_STYLEGUIDE_PROPSPARSER, + }), + ], resolve: { alias: { "@rsg-components": path.resolve( From d9db5b06fba0a93b879f6564b1a6c75226d2d950 Mon Sep 17 00:00:00 2001 From: Evgeniya Date: Wed, 15 Dec 2021 01:42:22 +0300 Subject: [PATCH 2/5] chore: rename propsParser file & export --- styleguide/config.js | 4 ++-- .../{docgen-typescript.config.js => propsParser.config.js} | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename styleguide/{docgen-typescript.config.js => propsParser.config.js} (98%) diff --git a/styleguide/config.js b/styleguide/config.js index f1865080c1..06f89c60cb 100644 --- a/styleguide/config.js +++ b/styleguide/config.js @@ -1,6 +1,6 @@ const path = require("path"); const { argv } = require("yargs"); -const { tsPropsParser } = require("./docgen-typescript.config"); +const { reactDocgenTypescript } = require("./propsParser.config"); module.exports = { title: "VKUI styleguide", @@ -92,7 +92,7 @@ module.exports = { }, }, }, - propsParser: tsPropsParser, + propsParser: reactDocgenTypescript, exampleMode: "expand", assetsDir: path.join(__dirname, `assets`), sections: [ diff --git a/styleguide/docgen-typescript.config.js b/styleguide/propsParser.config.js similarity index 98% rename from styleguide/docgen-typescript.config.js rename to styleguide/propsParser.config.js index 8050aaf244..b53776d5f3 100644 --- a/styleguide/docgen-typescript.config.js +++ b/styleguide/propsParser.config.js @@ -60,7 +60,7 @@ function createServiceHost(compilerOptions, files) { } module.exports = { - tsPropsParser: (file, source) => { + reactDocgenTypescript: (file, source) => { filesCache.set(file, { text: source, version: 0, From a5158bcb18a3b7fb5bb0ec889d70a1b64483f6f3 Mon Sep 17 00:00:00 2001 From: Evgeniya Date: Wed, 15 Dec 2021 01:43:26 +0300 Subject: [PATCH 3/5] build(docs): split prod/dev configs disable propsParser for dev --- styleguide/config.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/styleguide/config.js b/styleguide/config.js index 06f89c60cb..60273446b6 100644 --- a/styleguide/config.js +++ b/styleguide/config.js @@ -2,7 +2,7 @@ const path = require("path"); const { argv } = require("yargs"); const { reactDocgenTypescript } = require("./propsParser.config"); -module.exports = { +const baseConfig = { title: "VKUI styleguide", styleguideDir: path.join(__dirname, `../${argv.dist || "docs"}`), styleguideComponents: { @@ -92,7 +92,7 @@ module.exports = { }, }, }, - propsParser: reactDocgenTypescript, + propsParser: () => ({}), exampleMode: "expand", assetsDir: path.join(__dirname, `assets`), sections: [ @@ -336,3 +336,14 @@ module.exports = { ], webpackConfig: require("./webpack.config"), }; + +const prodConfig = { + ...baseConfig, + propsParser: reactDocgenTypescript, +}; + +module.exports = + process.env.NODE_ENV === "development" && + process.env.VKUI_STYLEGUIDE_PROPSPARSER !== 1 + ? baseConfig + : prodConfig; From 2fbdca76e4f2b8b6dc033bad967676d535540982 Mon Sep 17 00:00:00 2001 From: Evgeniya Date: Wed, 15 Dec 2021 01:45:01 +0300 Subject: [PATCH 4/5] docs: show placeholder in ReactComponent in dev mode --- .../Components/ReactComponent/ReactComponent.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/styleguide/Components/ReactComponent/ReactComponent.js b/styleguide/Components/ReactComponent/ReactComponent.js index 9122dfba05..3695bf33c4 100644 --- a/styleguide/Components/ReactComponent/ReactComponent.js +++ b/styleguide/Components/ReactComponent/ReactComponent.js @@ -12,6 +12,10 @@ const ReactComponent = ({ component, exampleMode }) => { const { name, visibleName, pathLine } = component; const { description = "", examples = [] } = component.props || {}; + const showPropsPlaceholder = + process.env.NODE_ENV === "development" && + process.env.VKUI_STYLEGUIDE_PROPSPARSER !== 1; + return (
{ Свойства и методы - + {showPropsPlaceholder ? ( +
+ + В режиме разработки свойства и методы не генерируются по умолчанию. + Если они вам необходимы, воспользуйтесь командой{" "} + yarn styleguide:props. + +
+ ) : ( + + )}
); }; From b981e78aea4bb2cd5c08615c86051667a86b3c5e Mon Sep 17 00:00:00 2001 From: Evgeniya Date: Wed, 15 Dec 2021 01:45:34 +0300 Subject: [PATCH 5/5] CONTRIBUTING.md: add styleguide:props note --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 991ebf44a5..a5e9d9b20c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,7 +2,7 @@ 1. Склонировать репозиторий и перейти в созданную директорию. 2. Установить зависимости: `yarn install`. -3. Поднять локально документацию с лайврелоадом: `yarn styleguide`. +3. Поднять локально документацию с лайврелоадом: `yarn styleguide`. Свойства и методы компонента в режиме разработки по умолчанию не генерируются; если они вам нужны, используйте команду `yarn styleguide:props`. Документация будет доступна на `http://localhost:6060`. В ней ведётся вся разработка. Для удобства можно сразу перейти на страницу разрабатываемого компонента (`http://localhost:6060/#/UsersStack`)