Fix transform source bug (#1918)

# Pull Request

## 🤨 Rationale

Fixes #1913 by using `js-beautify` instead of `prettier: ^3` in
`transformSource.js`.

## 👩‍💻 Implementation

1. Leverage a popular code formatting tool -
https://www.npmjs.com/package/js-beautify
2. Used the default formatting settings, as they looked correct to me.

## 🧪 Testing

Manual review of Storybook docs pages. 

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: rajsite <rajsite@users.noreply.github.com>

change/@ni-nimble-components-fd0f6918-b425-44fe-b644-17e155870de3.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix Storybook source preview",
+  "packageName": "@ni/nimble-components",
+  "email": "1458528+fredvisser@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/nimble-components/.storybook/transformSource.js

@@ -1,5 +1,4 @@
-import prettier from 'prettier/standalone';
-import parserHTML from 'prettier/plugins/html';
+const beautifyHTML = require('js-beautify').html;
 
 const createFragmentFromHTML = html => {
     const template = document.createElement('template');
@@ -51,7 +50,10 @@ const removeClassAttributes = node => {
     }
     // Assume that all class attributes added to nimble elements were added by FAST
     // and are not part of the control api
-    if (node instanceof HTMLElement && node.tagName.toLowerCase().startsWith('nimble-')) {
+    if (
+        node instanceof HTMLElement
+        && node.tagName.toLowerCase().startsWith('nimble-')
+    ) {
         node.removeAttribute('class');
     }
 };
@@ -61,8 +63,7 @@ const removeBlankLines = html => html
     .filter(line => line.trim() !== '')
     .join('\n');
 
-const removeEmptyAttributes = html => html
-    .replaceAll('=""', '');
+const removeEmptyAttributes = html => html.replaceAll('=""', '');
 
 // A custom source transformer. See:
 // https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#customizing-source-snippets
@@ -78,11 +79,8 @@ export const transformSource = source => {
 
     const trimmedHTML = removeBlankLines(html);
     const emptyAttributesRemovedHTML = removeEmptyAttributes(trimmedHTML);
-    const formmattedHTML = prettier.format(emptyAttributesRemovedHTML, {
-        parser: 'html',
-        plugins: [parserHTML],
-        htmlWhitespaceSensitivity: 'ignore',
-        tabWidth: 4
+    const formmattedHTML = beautifyHTML(emptyAttributesRemovedHTML, {
+        wrap_attributes: 'force-expand-multiline'
     });
     return formmattedHTML;
 };

packages/nimble-components/package.json

@@ -139,6 +139,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "html-webpack-plugin": "^5.3.1",
     "jasmine-core": "^5.1.2",
+    "js-beautify": "^1.15.1",
     "karma": "^6.3.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-firefox-launcher": "^2.1.0",
@@ -151,7 +152,6 @@
     "karma-webkit-launcher": "^2.1.0",
     "karma-webpack": "^5.0.0",
     "playwright": "1.40.0",
-    "prettier": "^3.2.5",
     "prettier-eslint": "^16.3.0",
     "prettier-eslint-cli": "^8.0.1",
     "remark-gfm": "^3.0.1",