'If TS codebase has changes in a specific directory, then a file must also contain changes

I have a large frontend code base written in TypeScript that utilizes Storybook as a design system. Storybook is separate from the main application in the code base.

There is a problem where if a developer adds a new icon to our icon asset directory, they forget to update the corresponding Storybook story file so that Storybook will also show the newly added icon. This means that when designers use Storybook they do not see the new icons, but they appear correctly in the applicaiton.

I'm trying to figure out the best process use to check

if (icon directory has changed) {
   icon storybook file must also have a change, otherwise block developer
}

I'm not sure if there are tools or processes that already exist for this kind of task.

We use ESLint and NX for our project so I wasn't sure if I should create an NX executor or a custom linting rule in ESLint. Or if I should just make some kind of js/bash/other script that runs as part of an NX affected task. Or if I should put something in our pull request build pipeline that will fail to get the developers attention. I'm not sure if our project uses git hooks at all.

Are there tools/libraries/frameworks that already exist to solve this problem? Or should I look into a custom solution using the tools our project already utilizes?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source