feat(Storybook): upgrade v7 (#280)

* feature(Storybook): upgrade to Storybook v7
Co-authored-by: Josh Howenstine <[email protected]>

.eslintrc.js

@@ -33,7 +33,12 @@ module.exports = {
     '**/*.json'
   ],
   plugins: ['jest', 'prettier'],
-  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'prettier'],
+  extends: [
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'prettier',
+    'plugin:mdx/recommended'
+  ],
   rules: {
     'import/no-useless-path-segments': 'error', // Please note this rule has been patched with Yarn to allow imports from npm packages to apply. The open issue can be found here https://github.com/import-js/eslint-plugin-import/issues/1280
     'no-console': 'off',
@@ -113,6 +118,11 @@ module.exports = {
         '@typescript-eslint/no-redeclare': [1, { ignoreDeclarationMerge: true }]
       },
       plugins: ['@typescript-eslint', 'eslint-plugin-import']
+    },
+    {
+      files: '*.mdx',
+      parser: 'eslint-mdx',
+      extends: 'plugin:mdx/recommended'
     }
   ]
 };

.prettierignore

@@ -1,4 +1,3 @@
-docs
 reports
 dist
 ci

README.md

@@ -107,7 +107,7 @@ class MyComponent extends lng.Component {
   _getFocused() {
     return this.tag('FocusManager');
   }
-};
+}
 ```
 
 ## Questions???

bin/templates/docs.template.js

@@ -1,45 +1,48 @@
-/**
- * Copyright 2023 Comcast Cable Communications Management, LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- */
-
-const urlBase = 'https://github.com/rdkcentral/Lightning-UI-Components/tree/develop/packages/%40lightningjs/ui-components/src/components/';
-
-module.exports = (name, dir) => `<!--
-  Copyright 2023 Comcast Cable Communications Management, LLC
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
-  SPDX-License-Identifier: Apache-2.0
--->
-
-import { Canvas, Story } from '@storybook/addon-docs';
-import ${name} from '.';
-
-# ${name}
+{/* prettier-ignore */}
+{
+  /**
+   * Copyright 2023 Comcast Cable Communications Management, LLC
+   *
+   * Licensed under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License.
+   * You may obtain a copy of the License at
+   *
+   * http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software
+   * distributed under the License is distributed on an "AS IS" BASIS,
+   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   * See the License for the specific language governing permissions and
+   * limitations under the License.
+   *
+   * SPDX-License-Identifier: Apache-2.0
+   */
+}
+
+const urlBase =
+  'https://github.com/rdkcentral/Lightning-UI-Components/tree/develop/packages/%40lightningjs/ui-components/src/components/';
+
+module.exports = name => `{/* prettier-ignore */}
+{/*Copyright 2023 Comcast Cable Communications Management, LLC
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+SPDX-License-Identifier: Apache-2.0 */}
+
+import { Meta, Title } from '@storybook/blocks';
+import * ${name}Stories from './${name}.stories';
+
+<Meta of={${name}Stories} />
+
+<Title />
 
 ## Source
 
@@ -61,10 +64,6 @@ class Basic extends lng.Component {
 };
 \`\`\`
 
-<Canvas>
-  <Story id="${dir}-${name.toLowerCase()}--basic" />
-</Canvas>
-
 ## API
 
 ### Properties

bin/templates/story.template.js

@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-module.exports = (name) => {
+module.exports = name => {
   return `/**
  * Copyright 2023 Comcast Cable Communications Management, LLC
  *
@@ -37,17 +37,11 @@ module.exports = (name) => {
 
 import lng from '@lightningjs/core';
 import ${name} from '.';
-import mdx from './${name}.mdx';
 import { CATEGORIES } from '../../docs/constants';
 
 export default {
   // TODO: replace categoryIndex with key for which category this component's story should be nested in. See CATEGORIES object in packages/apps/lightning-ui-docs/index.js
   title: 'CATEGORIES[categoryIndex]/${name}',
-  parameters: {
-    docs: {
-      page: mdx
-    }
-  }
 };
 
 export const Basic = () =>

package.json

@@ -43,6 +43,7 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jest": "^24.3.2",
+    "eslint-plugin-mdx": "^2.1.0",
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-promise": "^6.0.0",

packages/@lightningjs/ui-components-test-utils/src/docs/Overview.mdx

@@ -0,0 +1,53 @@
+{/* prettier-ignore */}
+{/*
+Copyright 2023 Comcast Cable Communications Management, LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+\*/}
+
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Docs / Unit Testing / Overview" />
+
+# @lightningjs/ui-components-test-utils
+
+The `@lightningjs/ui-components-test-utils` package provides 2 artifacts to assist with unit testing Lightning components.
+
+1. **Test Renderer**
+
+- [create](/story/docs-unit-testing-test-renderer-create--page): Generates a `testRenderer` object with built in utilities for unit testing Lightning Components.
+- [toJSON](/story/docs-unit-testing-test-renderer-tojson--page): Converts Lightning components to JSON to be used in [Jest Snapshot Tests](https://jestjs.io/docs/snapshot-testing)
+
+2. **Test Utils**
+
+- [makeCreateComponent](/story/docs-unit-testing-test-utils-makecreatecomponent--page): Returns a `createComponent` function which is used to generate an instance of a component to run unit test cases against.
+- [completeAnimation](/story/docs-unit-testing-test-utils-completeanimation--page): Returns a Promise that resolves once all animating properties have updated to their target value(s).
+- [fastForward](/story/docs-unit-testing-test-utils-fastforward--page): Force all running Lightning Transitions on one or more Lightning Elements to finish and update the transitioning property to its target value immediately.
+- [nextTick](/story/docs-unit-testing-test-utils-nexttick--page): Creates a Promise that resolves after a defined amount of time. If no amount of time is specified, the Promise will resolve immediately.
+
+```js
+// jest.config.js
+
+const config = {
+  // ...other Jest config properties
+  setupFiles: ['jest-webgl-canvas-mock'],
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@lightningjs/ui-components-test-utils)/)'
+  ]
+  // ...other Jest config properties
+};
+
+export default config;
+```

packages/@lightningjs/ui-components-test-utils/src/docs/TestRenderer/create.stories.mdx → packages/@lightningjs/ui-components-test-utils/src/docs/TestRenderer/create.mdx

@@ -1,22 +1,23 @@
-<!--
-  Copyright 2023 Comcast Cable Communications Management, LLC
+{/* prettier-ignore */}
+{/*
+Copyright 2023 Comcast Cable Communications Management, LLC
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-  http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0
--->
+SPDX-License-Identifier: Apache-2.0
+\*/}
 
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Docs / Unit Testing / Test Renderer / create" />