fix(design-system): use mockdate in storybook tests instead of vi [AR-46279]

[iromanchuk-dn]

Steps to reporoduce

Navigate to Storybook DateInput component.
You'll see error:

Root cause

In a nutshell, importing from vitest import { vi } from 'vitest'; breaks storybook. See details here.

Solution

Use mockdate package to mock dates. I took the idea from Storybook documentation.

Alternative Solution

I also considered @sinonjs/fake-timers package since it is more popular and in active development, but it's usage looks a bit more complicated and its size is 103 kB versus 13.8 kB of mockdate

[StyleShit]

you can add a skip changelog label to skip the changeset check since this is only a test fix pr

[iromanchuk-dn]

you can add a skip changelog label to skip the changeset check since this is only a test fix pr

Thanks for info. However, this is not obvious, I will add a few words about it to README.

[iromanchuk-dn]

Something that bothers me the most - why our CI/CD didn't catch the fact that specific story is completely broken.

[StyleShit]

I will add a few words about it to README.

please extract to its own pr since it's unrelated to this one

why our CI/CD didn't catch

that's a great question... needs investigation
also, it worked locally for @mmurawski-dn, maybe it's something on your machine?

EDIT: nvm, saw it in production
I think it's because vitest isn't bundled into the deployed app
we can add a custom eslint rule to disallow imports from vitest inside stories

[iromanchuk-dn]

@StyleShit

please extract to its own pr since it's unrelated to this one

When I compare what is more important:

1. Save 10+ minutes (time to extract change into a separate PR and get the approval)
2. Have slightly cleaner PR history
   I prefer the first one.
   If I made some changes to other components (ex. fix a small bug in unrelated component), then I would prefer to move it to separate PR. For my current PR it feels like overkill. What do you think?
   Fun fact, I spend more time writing this comment, than it would take me to extract the change into separate PR 😁 but I'd like to establish a common pattern for such things, moving forward it might save 10+ minutes hundreds of times 🙂

it worked locally for @mmurawski-dn

It doesn't work locally, but all tests are passing. I assume Michal was so sure it works, that didn't check if story is rendered.

we can add a custom eslint rule to disallow imports from vitest`

It would be nice to have a universal check that verifies stories can be rendered without errors. Do you have anything on your mind how we can achieve it?

[StyleShit]

cleaner PR history

it's not for cleaner history, it's for easier revert and separation
if we'll revert this pr at some point, we might lose this unrelated documentation fix without noticing

universal check that verifies stories can be rendered without errors

I agree, but I don't have a good idea currently, since I assumed vitest is doing it
need to think about it

[iromanchuk-dn]

@StyleShit all right, I can see the benefit of doing that, here: #127