Create traffic sign component

[AronPetrauskas]

Changes

A new RUI component is introduced that renders traffic signs onto a konva canvas.

• TrafficSign component created.
• TrafficSign component variations created in storybook.
• End-to-end tests written for the TrafficSign component.

Dependencies

UI/UX

Highway traffic sign example:

Testing notes

Important

Failed CI tests are a known issue, please ignore. Tests failing because of "timeout" are a known flaky test issue.

1. Checkout the branch
2. pnpm i
3. pnpm run storybook
4. Test the 'TrafficSign' component under Road View (category)
   Test all props can be changed and the component updates as expected.

Author checklist before assigning a reviewer

• Reviewed my own code-diff.
• [ ] Branch has been run in docker.
• PR assigned to me or an appropriate delegate.
• Relevant labels added to the PR.
• Appropriate tests have been added.
• Lint and test workflows pass.

[dmbarry86]

5. Using the testing tab in VSCode run the tests manually. Make sure they all run. Make sure storybook is running before testing!

Note

You'll have to run the test at least twice. First run generates the reference images. Make sure the reference images display the expected component.

I don't think we should recommend manually running tests in PRs like this. You should recommend to run the tests via Docker, for which snapshots already exist. Don't confuse it for reviewers.

[dmbarry86]

A new RUI component is introduced that renders traffic signs onto a konva canvas.

• TrafficSign component created.
• TrafficSign component variations created in storybook.
• End-to-end tests written for the TrafficSign component.

It would be nice to show a screenshot of the component in future reviews. That's what the UI section is for (which you deleted by the look of it).

[dmbarry86]

You need to make sure your component is exported from the root index otherwise you won't be able to import it in your app. Same goes for figure component which also appears to be missing although already merged.

https://github.com/IPG-Automotive-UK/react-ui/blob/create-traffic-sign-component/src/index.ts

[dmbarry86]

The default story should show default values for all props. The "set number" buttons etc mean there isn't currently a value defined in the story. Make sure all stories have appropriate values defined for all props.

[dmbarry86]

In future, just delete sections that are no longer relevant rather than strikethrough. I don't need to see the past state when I'm reviewing it today.

[dmbarry86]

I've had an initial run through and bash. Some general and some specific comments. I've told the team to hold off reviewing the other PRs for now as some of the general points here will also come up in those PRs so it seems best to get one right first and then ask people to review the others in which case hopefully they are then just picking up on specific things for that component. I appreciate some of the general points are because you are new to the team. I've asked the senior developers to start a code style guideline document so maybe you could also contribute to that with the things you have picked up so far with your time in the team which we don't yet have written down. @jegasriskantha is going to start that doc.

[dmbarry86]

I don't think this is related to your changes but there's something weird with storybook giving me this error for your component and all components. If I open in incognito browser it works fine but doesn't work in my usual browser window. Some weird cache or something maybe between branches. I'm copying in @mattcorner to take a look as I wonder if it's related to vite changes #810.

No need to hold up this PR with it.