\n);\n```\n\nThe component can only be used within a Gatsby project and links within the rich\ntext part won't even benefit from it! Apart from being solved in a very\nquestionable way using `dangerouslySetInnerHtml`.\n\nWe can use the types defined in this package to build our component in a less\ndependent way:\n\n```tsx\nimport React from 'react';\nimport { Link, Html } from '@amazeelabs/react-framework-bridge';\n\ntype TeaserProps = React.PropsWithChildren<{\n title: string;\n Description: Html;\n Link: Link;\n}>;\n\nexport const Teaser = (props) => (\n
\n
{props.title}
\n
\n \n
\n Learn more ...\n
\n);\n```\n\nNow we can use the builder functions provided to showcase the component in a\nStory:\n\n```tsx\nimport React from 'react';\nimport { Meta } from '@storybook/react';\nimport { Teaser as TeaserComponent } from '../teaser';\nimport {\n buildHtml,\n buildLink,\n} from '@amazeelabs/react-framework-bridge/storybook';\n\nexport default {\n title: 'Components/Molecules/Teaser',\n component: TeaserComponent,\n} as Meta;\n\nexport const Teaser = () => (\n This is a text with a Link.
',\n )}\n Link={buildLink({ href: '/about-us' })}\n />\n);\n```\n\nWhen actually using the component in Gatsby, we simply use the helpers tailored\nto this framework:\n\n```tsx\nimport React from 'react';\nimport { Teaser } from 'my-ui-library';\nimport {\n buildHtml,\n buildLink,\n} from '@amazeelabs/react-framework-bridge/gatsby';\n\nexport const query = graphql`...`;\n\nconst Homepage = (data) => (\n
\n
Latest news
\n {data.teasers.map((teaser) => (\n \n ))}\n
\n);\nexport default Homepage;\n```\n\nStorybook and Gatsby are cleanly separated while Typescript still makes sure\nthat everything fits together!\n\n## Supported Frameworks\n\nCurrently Gatsby and Storybook are supported.\n\n## Supported components\n\n### Link\n\nThe `buildLink` for Gatsby and Storybook functions accept a set of properties\nthat is equivalent to the allowed attributes of a standard Anchor element,\nexcept the CSS-class attribute. Instead, it is possible to add `className` and\n`activeClassName` properties to the resulting component to control the visual\nappearance within the component library.\n\nIn Storybook, the `activeClassName` will be applied if the `href` attribute\ncontains `active`. In Gatsby it will use the built-in active-link functionality.\n\n```tsx\nconst Link = buildLink({ href: '/active' });\n\n//...\n\n\n I'm red!\n;\n```\n\nThe Link also exposes a `navigate` method that will cause the application to\nnavigate to its target.\n\n```tsx\nconst Link = buildLink({ href: '/active' });\n\n//...\n\n;\n```\n\nBoth rendering `Link` and using `navigate` allow adding or override query\nparameters and fragments from the user interface code.\n\n```tsx\nconst Link = buildLink({ href: '/active' });\n\n//...\n\n\n To infinity and beyond!\n;\n\n Link.navigate({ query: { foo: 'bar' }, fragment: 'baz' })}\n>\n To infinity and beyond!\n;\n```\n\n### Images\n\nImage support is very simple. The Storybook variant expects a `src` and an `alt`\ntext (along with any other valid image attributes), while Gatsby needs the data\nobject provided by `gatsby-plugin-image`. In both cases it's possible to pass\n`className` to the resulting component to control the design.\n\n```tsx\nconst Image = buildImage({ src: './cat.jpg', alt: 'A cat!' });\n\n;\n```\n\n### Html\n\nWe also provide a dedicated component for rendering strings that contain HTML\nmarkup, typically emitted by a content management system. In this case we just\npass the string containing the markup to the build function. The resulting\ncomponent then allows to control the visual appearance by selecting elements and\nadding classes to them. The selection suppoerts the syntax documented in\n[`hast-util-select`](https://github.com/syntax-tree/hast-util-select#support).\n\n```tsx\nconst Html = buildHtml(\n `
`,\n);\n...\n\n\n```\n\nIt also allows to specify custom react components for certain HTML tags. These\ncomponents will receive the elements properties and children as regular\nproperties, as well as an additional `node` property that is of type\n[`Element`](https://github.com/syntax-tree/hast#element) and can be used to do\nadditional checks.\n\n```tsx\nconst Html = buildHtml(\n `
`,\n);\n...\n\n\n node.parent.tagName === 'div'\n ? \n : {children}\n }}\n/>\n```\n\nBy adding custom\n[unified plugins](https://unifiedjs.com/learn/guide/create-a-plugin/), the UI\ncomponent has even more control over rendering of the HTML.\n\n```tsx\n/**\n * Inject arrows at the end of links that are alone within a paragraph.\n */\nconst arrowLinks: Plugin = () => (tree) => {\n visit(\n tree,\n 'element',\n modifyChildren((node) => {\n if (\n isElement(node, 'p') &&\n node.children.length === 1 &&\n isElement(node.children[0], 'a')\n ) {\n node.children[0].children.push({\n type: 'element',\n tagName: 'span',\n properties: {\n className: ['arrow'],\n },\n children: [],\n });\n }\n }),\n );\n};\n\n;\n```\n\n## Storybook actions integration\n\nThe `buildLink` and `buildForm` functions integrate with\n[@storybook/addon-actions](https://www.npmjs.com/package/@storybook/addon-actions)\nand\n[@storybook/addon-interactions](https://www.npmjs.com/package/@storybook/addon-interactions).\nA play function that clicks a `Link` or submits af `Form` will trigger an action\nthat is logged. Additionally, artificial arguments called `wouldNavigate` and\n`wouldSubmit` are added to the story context. They can be used with jest's\nassertions on mock functions to test actual interactions in a play function.\n\nIt needs to be added to the projects `.storybook/preview.tsx` file to work.\nFirst, re-export the `argTypes` definition provided by this package to tell\nStorybook that `wouldNavigate` and `wouldSubmit` are events that need to be\nlogged and mocked. To collect all occurences you also have to add the\n`ActionsDecorator`.\n\n```typescript\nexport { argTypes } from '@amazeelabs/react-framework-bridge/storybook';\n\nimport { ActionsDecorator } from '@amazeelabs/react-framework-bridge/storybook';\n\nexport const decorator = [ActionsDecorator];\n```\n\nNow you should be able to implement assertions in play functions like this:\n\n```typescript\nexport const MyStory = {\n play: async (context) => {\n const canvas = within(context.canvasElement);\n fireEvent.click(await canvas.findByRole('link', { name: 'Test' }));\n await waitFor(() =>\n expect(context.args.wouldNavigate).toHaveBeenCalledWith('/test'),\n );\n },\n};\n```\n\n## Zustand integration\n\nOrganisms can accept a [Zustand](https://github.com/pmndrs/zustand) store as a\nprop to implement dynamic behaviour with fine-grained control over re-rendering.\nCreate a store api with the `createStore` function and pass it to the organisms'\nproperty. Inside the organism, make use of `useStore` to retrieve values from\nit.\n\n```tsx\ntype Counter = {\n count: number;\n increment: () => void;\n};\n\nconst store = createStore({\n count: 0,\n increment: (state) => () => {\n state.count++;\n },\n});\n\nfunction CounterDisplay({ counter }: { counter: StoreApi }) {\n const count = useStore(counter, (state) => state.count);\n return