diff --git a/apps/preact/index.html b/apps/preact/index.html index 554349f76e2..105a40a8256 100644 --- a/apps/preact/index.html +++ b/apps/preact/index.html @@ -4,11 +4,25 @@ React component library + -

React components rendered with Preact

-

This example uses ES Modules and import maps.

-
- + + +

Look no Storybook!

+ diff --git a/apps/preact/package.json b/apps/preact/package.json index 32e19dd2f5a..0fb291c20e4 100644 --- a/apps/preact/package.json +++ b/apps/preact/package.json @@ -10,9 +10,12 @@ "start": "http-server ." }, "dependencies": { + "@utrecht/storybook-react": "workspace:*", + "@utrecht/button-css": "workspace:*", "@utrecht/button-react": "workspace:*", "@utrecht/component-library-react": "workspace:*", "@utrecht/design-tokens": "workspace:*", + "@utrecht/icon": "workspace:*", "preact": "10.24.3" }, "devDependencies": { diff --git a/apps/preact/story-react.mjs b/apps/preact/story-react.mjs new file mode 100644 index 00000000000..5ab375c3d86 --- /dev/null +++ b/apps/preact/story-react.mjs @@ -0,0 +1,78 @@ +import { render, createElement } from 'preact'; +import { Button } from '@utrecht/button-react/dist/css'; +import * as ButtonStories from '@utrecht/storybook-react/dist/src/stories/Button.stories.js'; +// import { Separator } from '@utrecht/component-library-react/dist/css-module'; + +customElements.define( + 'story-react', + class StoryReact extends HTMLElement { + constructor() { + super(); + const style = this.ownerDocument.createElement('style'); + style.textContent = ` + .example-story-canvas { + background-color: white; + border-radius: 4px; + border-width: 1px; + border-style: solid; + border-color: rgba(0, 0, 0, 0.1); + box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; + margin-block-end: 40px; + margin-block-start: 25px; + padding-block-end: 30px; + padding-block-start: 30px; + padding-inline-end: 20px; + padding-inline-start: 20px; + position: relative; + }`; + const shadow = this.attachShadow({ mode: 'closed' }); + shadow.appendChild(style); + const div = this.ownerDocument.createElement('div'); + div.className = 'example-story-canvas'; + div.appendChild(this.ownerDocument.createElement('slot')); + shadow.appendChild(div); + } + }, +); + +customElements.define( + 'story-list-react', + class StoryReact extends HTMLElement { + constructor() { + super(); + import(this.getAttribute('src')).then((stories) => { + const Component = stories.default.component; + const defaultArgs = stories.default.args; + this.stories = stories; + this.Component = Component; + this.defaultArgs = defaultArgs; + this.render(); + }); + } + render() { + const { Component, stories, defaultArgs } = this; + // Remove current rendering + while (this.lastChild) { + this.removeChild(this.lastChild); + } + + // Render new version + render( + createElement('div', { + children: Object.entries(stories) + .filter(([name]) => name !== 'default') + .map(([name, storyObj]) => [ + createElement('h2', { children: name }), + createElement('story-react', { + children: createElement(Component, { + ...defaultArgs, + ...storyObj.args, + }), + }), + ]), + }), + this, + ); + } + }, +); diff --git a/packages/components-react/body-react/tsconfig.build.json b/packages/components-react/body-react/tsconfig.build.json index 1012da06307..5429f95f944 100644 --- a/packages/components-react/body-react/tsconfig.build.json +++ b/packages/components-react/body-react/tsconfig.build.json @@ -2,5 +2,6 @@ "extends": "./tsconfig.json", "compilerOptions": { "composite": true - } + }, + "include": ["config/**/*.ts", "config/**/*.tsx"] } diff --git a/packages/storybook-react/log b/packages/storybook-react/log new file mode 100644 index 00000000000..9bc38153bdb --- /dev/null +++ b/packages/storybook-react/log @@ -0,0 +1,4 @@ + +> @utrecht/storybook-react@0.0.0 build:ts /Users/bobby/Sites/github.com/nl-design-system/utrecht-npm/packages/storybook-react +> tsc --project tsconfig.build.json + diff --git a/packages/storybook-react/package.json b/packages/storybook-react/package.json index ac5f482da92..c965a92bee6 100644 --- a/packages/storybook-react/package.json +++ b/packages/storybook-react/package.json @@ -16,6 +16,7 @@ }, "scripts": { "build": "storybook build --output-dir dist/ --config-dir config/ --quiet", + "build:ts": "tsc --project tsconfig.build.json", "clean": "rimraf dist/", "lint-build:todo": "tsc --noEmit --project tsconfig.json", "start": "http-server dist/", diff --git a/packages/storybook-react/src/stories/Button.stories.tsx b/packages/storybook-react/src/stories/Button.stories.tsx index c9f00d5ee32..4e483be280a 100644 --- a/packages/storybook-react/src/stories/Button.stories.tsx +++ b/packages/storybook-react/src/stories/Button.stories.tsx @@ -1,17 +1,18 @@ import { Meta, StoryObj } from '@storybook/react'; -import readme from '@utrecht/button-css/README.md?raw'; +// import readme from '@utrecht/button-css/README.md?raw'; import tokensDefinition from '@utrecht/button-css/dist/tokens.mjs'; -import { Button, ButtonProps } from '@utrecht/button-react/dist/css'; +import { Button, ButtonProps } from '@utrecht/button-react'; import tokens from '@utrecht/design-tokens/dist/list.mjs'; import iconSet from '@utrecht/icon/dist/iconset.mjs'; -import React from 'react'; -import { designTokenStory } from './util.js'; +import type { PropsWithChildren } from 'react'; +// import { designTokenStory } from './util.js'; +const readme = ''; interface ButtonStoryProps extends ButtonProps { icon?: string; } -const ButtonStory = ({ children, icon, ...props }: ButtonStoryProps) => { +const ButtonStory = ({ children, icon, ...props }: PropsWithChildren) => { const IconElement = icon; return (