[Add]: formatted text styles

[upteran]

Fixes #118

• Add base styles for allowed tags from the allowed list in FormattedText component
• Add a story for the FormatterText component with different HTML tag examples
• Add CSS custom properties for a common list for link and code-block tags.

Motivation

The changes were made to the styles in the formatter text component to enhance the visual appeal and readability of the long heading text.

Screenshots

Few screenshots to show some frequently used tags. The entire list of other tags has been added to the story.

Checklist

• [ ] Don’t rush. Check all changes in PR again.
• [ ] Think about changing documentation.
  • If you added a script to scripts/, add a comment with a description.
  • If you added a new folder, add its description to the project’s README.md.
  • If you added config, describe how we use this tool in the config’s comment.
  • If you added something to the project’s architecture, describe it in the project’s README.md.
  • Try to focus on “why?”, not “how?”.
• If you added a new dependency:
  • [ ] Look for alternatives, not just take the most popular one.
  • [ ] Check alternatives for bundle size, node_modules size, and subdependencies number.
  • [ ] Check that the project is active by their repository/issues/PR.
  • [ ] Run cd web && pnpm size, check the JS bundle size changes, about limits if necessary.
• [ ] Think about testing
  • If you added a feature, add unit tests.
  • If you added a new state to the UI, add visual tests.
  • If you fixed the bug, think about preventing bug regression in the future.
• If you changed web client:
  • [ ] Think about moving code to core/. What code will also be useful on other platforms?
  • [ ] Run pnpm size and check the difference in the JS bundle size. Is it relevant to the changes? Change the limit in web/.size-limit.json if necessary.
  • [ ] Think about keyboard UX. Is it easy to use the new feature with only one hand on a keyboard? Is it easy to understand what keys to press?
  • [ ] Think about HTML semantics.
  • [ ] Think about accessibility. Check a11y recommendations. Think about how screen reader users will use the tool. Is it easy to use on a screen with bad contrast?
  • [ ] Think about translations. Will
  • [ ] Think about right-to-left languages. What parts of the screen should be mirrored for Arabic or Hebrew languages?
• If you changed the colors token in the web client:
  • [ ] Think about app loading styles inlined in index.html.
• If you changed core/:
  • [ ] Think about making types more precise. Can you better explain data relations by type?
  • [ ] Think about conflict resolution. We don’t need some very smart changing merging; just 2 changes of the same item on different clients should not break the database. What if the user changes an item on one machine and removes it on another?
  • [ ] Think about log and storage migration.
• If you changed English translations:
  • [ ] Change translation ID if you change the meaning of the text.

Questions during PR:

I have few questions about PR:

• I added the createTable function to build table examples, but I'm not sure if it's necessary because it's probably complicated code a simple few row/cell table by string might be enough.
• Regarding image links, I want to add some to the stories as examples, but I'm not sure if external links to other sites are a good choice.
• Added some custom variables, but perhaps they should be placed in the FormatterText component? However, in this case, we might forget about these variables if we change some styles for the theme.
• And about the story, I've seen separate stories for light and dark mode in other components (number 2 in the screenshot), but without this separation, I can still check the story without creating two different ones by switching the theme toggler (number 1 in the screenshot). Do we need to add two components with different theme prop configurations, or is the Base enough?

[ai]

Do we need to add two components with different theme prop configurations, or is the Base enough?

Yes, we need separated stories.

The problem with theme switcher is that we can’t use it on Chromatic (screenshot based testing).

Another reason is that now checking Storybook by eyes is very straight-forward—you just going from one story to another and check it by eyes. With theme switcher you need to remember to manually test every story in different themes, which is more complex than clicking Next Story.