@repobuddy/storybook 0.13.0 → 0.15.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/esm/storybook-addon-tag-badges/tag_badges.d.ts

@@ -31,6 +31,7 @@ export declare const codeOnlyBadge: TagBadgeParameter;
 export declare const snapshotBadge: TagBadgeParameter;
 export declare const unitBadge: TagBadgeParameter;
 export declare const integrationBadge: TagBadgeParameter;
+export declare const keyboardBadge: TagBadgeParameter;
 export declare const internalBadge: TagBadgeParameter;
 export declare const tagBadges: TagBadgeParameters;
 export {};

package/esm/storybook-addon-tag-badges/tag_badges.js

@@ -141,6 +141,15 @@ export const integrationBadge = {
         sidebar: false
     }
 };
+export const keyboardBadge = {
+    tags: 'keyboard',
+    badge: {
+        text: '⌨️',
+        bgColor: 'transparent',
+        borderColor: 'transparent',
+        tooltip: 'Keyboard Interaction'
+    }
+};
 export const internalBadge = {
     tags: 'internal',
     badge: {
@@ -154,6 +163,7 @@ export const tagBadges = [
     editorBadge,
     unitBadge,
     integrationBadge,
+    keyboardBadge,
     newBadge,
     betaBadge,
     deprecatedBadge,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "0.13.0",
+  "version": "0.15.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'

package/src/storybook-addon-tag-badges/tag_badges.ts

@@ -157,6 +157,16 @@ export const integrationBadge: TagBadgeParameter = {
 	}
 }
 
+export const keyboardBadge: TagBadgeParameter = {
+	tags: 'keyboard',
+	badge: {
+		text: '⌨️',
+		bgColor: 'transparent',
+		borderColor: 'transparent',
+		tooltip: 'Keyboard Interaction'
+	}
+}
+
 export const internalBadge: TagBadgeParameter = {
 	tags: 'internal',
 	badge: {
@@ -171,6 +181,7 @@ export const tagBadges: TagBadgeParameters = [
 	editorBadge,
 	unitBadge,
 	integrationBadge,
+	keyboardBadge,
 	newBadge,
 	betaBadge,
 	deprecatedBadge,