badoo / styleguide Goto Github PK

We have extra complexity for loaders since the styleguide uses SCSS and the consumer may use the same technology as well.

Possible option – CSS in JS.

src/components folder is a good candidate to be moved to TypeScript first.

Is your feature request related to a problem? Please describe.
One of the frictions with this style guide is it needs embedding inside the package structure of an existing application. So for example if an application forces a certain version of a package that's incompatible with Badoo style guide it causes problems. It also increases the size of the node_modules folder of each application.

Pros

1. Easy to upgrade, no need to update dependency tree. Just update the command to run styleguide (e.g. npx [email protected] ...args
2. Easy to maintain for consumers, no need for deep integration with their package.json

Cons

1. Slightly slower to run on CI agents as npx needs to download and install the package
2. Might possibly need some refactoring of how the config works

Describe the solution you'd like
The Badoo styleguide should instead be published as an npm executable. Here is an overview of changes needed:

1. Move all peerDependencies back to dependencies
2. Add bin field in package.json - https://docs.npmjs.com/cli/v6/configuring-npm/package-json#bin

Once these changes are done we can do a test run with the tool in several projects in the company. We need to check if the required dependencies can be pulled from both the globally installed package and/or the project it's being used in.

Example:

npx badoo-styleguide --config=./styleguide/styleguide.config.js --port=8084 --host=0.0.0.0

Describe the bug

When user try to type component name in search field, all sections are closed

Expected behavior

• When user type any letter - set all sections open.
• When user clear search input - activate only section open.

It worth moving all the examples and the styleguide.config.js to separate /examples/ folder.
We need to illustrate the following examples:

• react configuration
• react native configuration
• typescript configuration