Docs(web-react): Introduce stories to the rest of the components #DS-476

[crishpeen]

Issue reference

DS-476

---

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Follow the PR Title/Commit Message Convention.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[netlify]

✅ Deploy Preview for spirit-design-system-storybook ready!

Name	Link
🔨 Latest commit	f221eaa
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/64fe3b73bc3fc60008395d3d
😎 Deploy Preview	https://deploy-preview-1037--spirit-design-system-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for spirit-design-system-demo ready!

Name	Link
🔨 Latest commit	f221eaa
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-demo/deploys/64fe3b737fde590008fe0f68
😎 Deploy Preview	https://deploy-preview-1037--spirit-design-system-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for spirit-design-system-validations canceled.

Name	Link
🔨 Latest commit	f221eaa
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-validations/deploys/64fe3b737fde590008fe0f6d

[netlify]

✅ Deploy Preview for spirit-design-system-react ready!

Name	Link
🔨 Latest commit	f221eaa
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-react/deploys/64fe3b73218de70008f2ed94
😎 Deploy Preview	https://deploy-preview-1037--spirit-design-system-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

coverage: 69.502% (-0.7%) from 70.213% when pulling 56f3d60 on docs/stories-rest into 439654f on main.

[literat]

It is looking good but I have started having a problem with mixing stories with component files. The original concept was to have one .stories.tsx in the component directory which imports files from /stories directory. But now there are several stories mixed with component files and it looks a little bit messy for me and I do not quite like it. :-/

Do you think that will be possible to move those files into the stories directory when there is more than one story? Storybook only picks the .stories. extension so it does not care where the story is really placed. 🤷

[crishpeen]

It is looking good but I have started having a problem with mixing stories with component files. The original concept was to have one .stories.tsx in the component directory which imports files from /stories directory. But now there are several stories mixed with component files and it looks a little bit messy for me and I do not quite like it. :-/

Do you think that will be possible to move those files into the stories directory when there is more than one story? Storybook only picks the .stories. extension so it does not care where the story is really placed. 🤷

Sure it could be anywhere. We just have to agree on the system. I would prefer to have everything everywhere inside the stories folder. Or have only subcomponents in the stories folder and the main one will be still in the root.

[crishpeen]

It is looking good but I have started having a problem with mixing stories with component files. The original concept was to have one .stories.tsx in the component directory which imports files from /stories directory. But now there are several stories mixed with component files and it looks a little bit messy for me and I do not quite like it. :-/
Do you think that will be possible to move those files into the stories directory when there is more than one story? Storybook only picks the .stories. extension so it does not care where the story is really placed. 🤷

Sure it could be anywhere. We just have to agree on the system. I would prefer to have everything everywhere inside the stories folder. Or have only subcomponents in the stories folder and the main one will be still in the root.

We decided to move all stories to the stories folder. But it will be another PR.

[github-actions]

coverage: 69.502% (-0.7%) from 70.213% when pulling cbb94bb on docs/stories-rest into 439654f on main.

[coveralls]

coverage: 70.438%. remained the same when pulling f221eaa on docs/stories-rest into 7f05e3e on main.