UX-and-I / storybook-design-token

Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.
https://dev.to/psqrrl/managing-design-tokens-using-storybook-5975
MIT License
648 stars 123 forks source link

Request: allow customization of token locations #119

Open emzarts opened 2 years ago

emzarts commented 2 years ago

It would be super awesome to have the ability to specify a file location for the tokens! We currently have a use case where we want to store the tokens in their own package separate from our storybook implementation. So the ability to:

  1. Use files outside the compiler.context
  2. specify which file paths to ignore/ not ignore

would be awesome!

This is the relevant section of the addon code:

  return glob.sync(
    path.join(
      compiler.context,
      process.env.DESIGN_TOKEN_GLOB || '**/*.{css,scss,less,svg,png,jpeg,gif}'
    ),
    {
      ignore: ['**/node_modules/**', '**/storybook-static/**', '**/*.chunk.*']
    }
  );

Thanks!!

jbvolvo commented 2 years ago

This can be achieved already? with env variables: DESIGN_TOKEN_GLOB=../../somewhere/**/tokens.{css,scss,less,svg}

mis6ko13 commented 2 years ago

@jbvolvo Could you please provide an example how to configure this? I was following this doc - https://storybook.js.org/docs/react/configure/environment-variables#using-storybook-configuration, but didn't succeed...

emzarts commented 2 years ago

@jbvolvo Could you please provide an example how to configure this? I was following this doc - https://storybook.js.org/docs/react/configure/environment-variables#using-storybook-configuration, but didn't succeed...

This method only worked for me with the using .env file. That populates the environment variables during the build phase.

emzarts commented 2 years ago

This can be achieved already? with env variables: DESIGN_TOKEN_GLOB=../../somewhere/**/tokens.{css,scss,less,svg}

Sorry I didn't clarify more! I would like to have the option to import from other sources than just a GLOB. Like a node module (which is filered out of the GLOB using the ignore param)