[Feature Request]: allow filtering variables in DocBlock

[yarinsa]

Want to begin and say I am willing to contribute this feature :).

The motivation:

Our overrides.less file (overrides antd parsed and replaced using less 'modifyVars' ) looks something like this:

:root {
/**
  * @tokens borderRadius
  * @presenter BorderRadius
*/
    --border-radius-base: 6px;
/**
/**
  * @tokens Colors
  * @presenter Color
*/
    --blue-6: #4597ff;
    // More colors....
    --info-color: var(--blue-6);
    // more intent colors...
/**
* @tokens-end
*/
    // Alert component
    --alert-info-bg-color: var(--info-color);
    --alert-border-radius: var(--border-radius-base);

I will wrap the alert variables with @tokens as well and separate it's type. But In the Alert Story I would like to present a table of all the variables containing "--alert-*".

Thought the the most flexible thing will be to add <DesignTokenDocBlock filter={predicateFn} />;

WDYT? @Sqrrl

[Sqrrl]

Sounds really useful. Go for it if you like.

[yarinsa]

@Sqrrl I finally got into this contribution.

1. Cloned the repo
2. Ran yarn install
3. Ran start in the addon directory
4. Ran start in the demo directory

Got:

ERR! Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/yarinsasson/Documents/Work/storybook-design-token/node_modules/postcss-safe-parser/node_modules/postcss/package.json

Here is my offer...

1. Add contribution.md to a good quick contribution start
2. Add "workspace" configuration such as "turbo" to ease development , WDYT?

(Also would love to get help to be able to contribute)

[Sqrrl]

Hm, not sure what causes this. I just tried with a clean clone of the repo, which worked fine.

1. run yarn install inside root directory
2. cd addon && yarn start
3. in another terminal tab: cd demo && yarn start

I'm running yarn v1.22.19 and node v18.7.0.

I will add the contribution.md soon.

[acherkashin]

It would be really helpful to have CONTRIBUTION.md

[yarinsa]

I am sorry for the late response, work is crazy but now I got some free time until March. I followed your instruction precisely (on 2 machines) and I am getting the exact same error. Can we get on a call or try it out together?

Hm, not sure what causes this. I just tried with a clean clone of the repo, which worked fine.

1. run yarn install inside root directory
2. cd addon && yarn start
3. in another terminal tab: cd demo && yarn start

I'm running yarn v1.22.19 and node v18.7.0.

I will add the contribution.md soon.

[Sqrrl]

Was finally able to reproduce the issue on a Windows VM. Seems like a yarn workspace hoisting issue. I'll try to come up with a solution.

In the meantime you could use the webpack5-demo for developing. This runs outside of yarn workspaces.

cd addon && yarn start cd ../demo-webpack5 && yarn && yarn start

[yarinsa]

Done. I would like to open a PR but I can't push a new branch to this repo. @Sqrrl

And now iv'e got another feature request :) Can open a separate issue if you find it useful, WDYT about add the table "rawValue" column? Can be useful for designers, that can see their tokens in one place all the way to the value

[yarinsa]

@Sqrrl Your help to push my code would be appreciated

[Sqrrl]

@yarinsa You can fork the repo and create a PR with your fork. The raw value could be useful, not sure about giving it its own column though. Maybe as a tooltip?

[acherkashin]

@yarinsa Could you create a Pull Request? Ping me if you need any assistance

[yarinsa]

@yarinsa Could you create a Pull Request? Ping me if you need any assistance

Already left that work :( I don't have the source code anymore

[acherkashin]

@yarinsa it is pity. But, I think I will get it done in a while