@repobuddy/storybook 0.13.0 → 0.14.0

package/esm/components/show_html.d.ts

@@ -0,0 +1,16 @@
+import type { ClassNameProps, StyleProps } from '@just-web/css';
+import { type UserConfig } from 'htmlfy';
+export type ShowHtmlProps = ClassNameProps & StyleProps & {
+    selector?: string | undefined;
+    config?: UserConfig | undefined;
+};
+/**
+ * A component that displays the HTML of a subject element.
+ * Uses `htmlfy` internally to format and prettify the HTML output.
+ *
+ * @param selector - CSS selector to find the subject element. Defaults to '[data-testid="subject"]'
+ * @param config - Configuration options passed to htmlfy's prettify function
+ * @param props - Additional props (className, style) passed to the pre element
+ * @returns A pre element containing the formatted HTML
+ */
+export declare function ShowHtml({ selector, config, ...props }: ShowHtmlProps): import("react/jsx-runtime").JSX.Element;

package/esm/components/show_html.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prettify } from 'htmlfy';
+import { useEffect, useState } from 'react';
+/**
+ * A component that displays the HTML of a subject element.
+ * Uses `htmlfy` internally to format and prettify the HTML output.
+ *
+ * @param selector - CSS selector to find the subject element. Defaults to '[data-testid="subject"]'
+ * @param config - Configuration options passed to htmlfy's prettify function
+ * @param props - Additional props (className, style) passed to the pre element
+ * @returns A pre element containing the formatted HTML
+ */
+export function ShowHtml({ selector = '[data-testid="subject"]', config, ...props }) {
+    const [html, setHtml] = useState('');
+    useEffect(() => {
+        const subject = document.querySelector(selector);
+        if (subject) {
+            setHtml(prettify(subject.outerHTML, {
+                tag_wrap: 40,
+                ...config
+            }));
+        }
+        else {
+            setHtml('No subject found');
+        }
+    }, [selector]);
+    return _jsx("pre", { ...props, children: html });
+}

package/esm/index.d.ts

@@ -1,6 +1,6 @@
 export * from '@repobuddy/test';
+export * from './components/show_html.tsx';
 export * from './decorators/show_doc_source.tsx';
-export * from './decorators/when_running_in_test.tsx';
 export * from './parameters/define_actions_param.ts';
 export * from './parameters/define_backgrounds_param.ts';
 export * from './parameters/define_docs_param.ts';
@@ -9,3 +9,4 @@ export * from './parameters/define_parameters.ts';
 export * from './parameters/define_test_param.ts';
 export * from './parameters/define_viewport_param.ts';
 export * from './parameters/story_sort.ts';
+export * from './testing/decorators/when_running_in_test.tsx';

package/esm/index.js

@@ -1,6 +1,6 @@
 export * from '@repobuddy/test';
+export * from "./components/show_html.js";
 export * from "./decorators/show_doc_source.js";
-export * from "./decorators/when_running_in_test.js";
 export * from "./parameters/define_actions_param.js";
 export * from "./parameters/define_backgrounds_param.js";
 export * from "./parameters/define_docs_param.js";
@@ -9,3 +9,4 @@ export * from "./parameters/define_parameters.js";
 export * from "./parameters/define_test_param.js";
 export * from "./parameters/define_viewport_param.js";
 export * from "./parameters/story_sort.js";
+export * from "./testing/decorators/when_running_in_test.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -43,7 +43,8 @@
   ],
   "dependencies": {
     "@just-web/css": "^0.5.0",
-    "@repobuddy/test": "^1.0.0"
+    "@repobuddy/test": "^1.0.0",
+    "htmlfy": "^0.7.5"
   },
   "devDependencies": {
     "@repobuddy/vitest": "^1.2.2",

package/readme.md

@@ -64,17 +64,18 @@ addons.setConfig({
 If you use [`storybook-addon-tag-badges`][`storybook-addon-tag-badges`],
 we provide a different set of badges that uses emojis:
 
-- ✏️ Editor - Stories with live editor
-- 🆕 New components/features
-- 🅱️ Beta status
-- 🪦 Deprecated notices
-- ⚠️ Outdated warnings
-- 🚨 Dangerous
-- 📋 To-do items
-- 📝 Code-only stories
-- 📸 Snapshot tests
-- 🧪 Unit tests
-- 🔗 Integration tests
+- ✏️ `editor` - Live Editor Stories (with [`storybook-addon-code-editor`][`storybook-addon-code-editor`])
+- 🆕 `new` - New components/features
+- 🅱️ `beta` - Beta status
+- 🪦 `deprecated` - Deprecated notices
+- ⚠️ `outdated` - Outdated warnings
+- 🚨 `danger` - Dangerous
+- 📋 `todo` - To-do items
+- 📝 `code-only` - Code-only stories
+- 🔒 `internal` - Internal stories (when set up, hidden from the sidebar in public Storybook)
+- 📸 `snapshot` - Snapshot tests
+- 🧪 `unit` - Unit tests
+- 🔗 `integration` - Integration tests
 - Version indicators (unchanged)
 
 To use them, add them to your `.storybook/manager.ts`:
@@ -110,7 +111,7 @@ import {
 export const preview: Preview = {
 	parameters: {
 		docs: {
-		container: createDarkModeDocsContainer()
+			container: createDarkModeDocsContainer()
 		},
 		darkMode: defineDarkModeParam({
 			classTarget: 'html',
@@ -127,3 +128,4 @@ export const preview: Preview = {
 [`@repobuddy/storybook`]: https://github.com/repobuddy/storybook
 [`storybook-addon-tag-badges`]: https://github.com/Sidnioulz/storybook-addon-tag-badges
 [`storybook-dark-mode`]: https://github.com/hipstersmoothie/storybook-dark-mode
+[`storybook-addon-code-editor`]: https://github.com/storybookjs/storybook/tree/main/addons/code/code-editor

package/src/components/show_html.tsx

@@ -0,0 +1,36 @@
+import type { ClassNameProps, StyleProps } from '@just-web/css'
+import { prettify, type UserConfig } from 'htmlfy'
+import { useEffect, useState } from 'react'
+
+export type ShowHtmlProps = ClassNameProps &
+	StyleProps & {
+		selector?: string | undefined
+		config?: UserConfig | undefined
+	}
+
+/**
+ * A component that displays the HTML of a subject element.
+ * Uses `htmlfy` internally to format and prettify the HTML output.
+ *
+ * @param selector - CSS selector to find the subject element. Defaults to '[data-testid="subject"]'
+ * @param config - Configuration options passed to htmlfy's prettify function
+ * @param props - Additional props (className, style) passed to the pre element
+ * @returns A pre element containing the formatted HTML
+ */
+export function ShowHtml({ selector = '[data-testid="subject"]', config, ...props }: ShowHtmlProps) {
+	const [html, setHtml] = useState('')
+	useEffect(() => {
+		const subject = document.querySelector(selector)
+		if (subject) {
+			setHtml(
+				prettify(subject.outerHTML, {
+					tag_wrap: 40,
+					...config
+				})
+			)
+		} else {
+			setHtml('No subject found')
+		}
+	}, [selector])
+	return <pre {...props}>{html}</pre>
+}

package/src/index.ts

@@ -1,6 +1,6 @@
 export * from '@repobuddy/test'
+export * from './components/show_html.tsx'
 export * from './decorators/show_doc_source.tsx'
-export * from './decorators/when_running_in_test.tsx'
 export * from './parameters/define_actions_param.ts'
 export * from './parameters/define_backgrounds_param.ts'
 export * from './parameters/define_docs_param.ts'
@@ -9,3 +9,4 @@ export * from './parameters/define_parameters.ts'
 export * from './parameters/define_test_param.ts'
 export * from './parameters/define_viewport_param.ts'
 export * from './parameters/story_sort.ts'
+export * from './testing/decorators/when_running_in_test.tsx'