feature(Storybook): adds notes and fixes minor mdx syntax errors

rdkcentral · Aug 25, 2023 · d3cb6f2 · d3cb6f2
1 parent 6c8de59
commit d3cb6f2
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/Badge/Badge.mdx b/packages/@lightningjs/ui-components/src/components/Badge/Badge.mdx
@@ -13,11 +13,12 @@ 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';
+import { Meta, Title } from '@storybook/blocks';
 import Badge from '.';
 import * as BadgeStories from './Badge.stories.js';
 
 <Meta of={BadgeStories} />
+
 <Title />
 
 This component is used to display small keywords of metadata, like video or audio quality (ie HD or CC).

diff --git a/packages/@lightningjs/ui-components/src/mixins/withHandleKey/withHandleKey.mdx b/packages/@lightningjs/ui-components/src/mixins/withHandleKey/withHandleKey.mdx
@@ -29,7 +29,7 @@ https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lig
 
 ## Usage
 
-Out of the box, `withHandleKey` adds a generic \_handleKey & \_handleKeyRelease function and calls the corresponding `on{Key}` handler. If no key handler is found, it fires an `$on{Key}` & $on${Key}Release event.
+Out of the box, `withHandleKey` adds a generic \_handleKey & \_handleKeyRelease function and calls the corresponding `on{Key}` handler. If no key handler is found, it fires an `$on{Key}` & `$on${Key}Release` event.
 
 Additionally, if a `metricsPayload` is defined, the global `keyMetricsCallbackHandler` in Context will be invoked with
 the given `metricsPayload`.
@@ -62,7 +62,7 @@ class Example extends lng.Component {
 
 Take a look at the preview above. Tile component is using the withHandleKey mixin.
 If you press enter on the first tile, you should see it print a metrics payload in the console (inspector view)
-In this example, Tile extends `withHandleKey` and allows dynamically adding on${Key} functions or event listener for $on{key}.
+In this example, Tile extends `withHandleKey` and allows dynamically adding `on${Key}` functions or event listener for `$on{key}`.
 
 Example below - an metricPayload is provided, which will be invoked when any key is handled, with the payload
 `metricsPayload: { buttonName: 'arrowUp', uniqueId: 'unique-123' }`
diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/panels/ComponentStylesPanel.js b/packages/apps/lightning-ui-docs/.storybook/addons/panels/ComponentStylesPanel.js
@@ -31,6 +31,7 @@ import {
   updateGlobalTheme
 } from '../../utils/themeUtils';
 
+//NOTE: returns string for the control type to use
 function getControlType(value) {
   try {
     if (utils.getValidColor(value)) {
@@ -43,6 +44,7 @@ function getControlType(value) {
   }
 }
 
+//NOTE: called in debouncedUpdateComponentValue(),
 const updateComponentValue = (
   componentName,
   styleProp,
@@ -61,6 +63,7 @@ const updateComponentValue = (
   );
 };
 
+//NOTE: delays processing for # microseconds
 const debouncedUpdateComponentValue = debounce(function (
   componentName,
   prop,
@@ -71,8 +74,8 @@ const debouncedUpdateComponentValue = debounce(function (
 },
 500);
 
-let storybookInit;
-let version;
+let storybookInit; // NOTE: boolean
+let version; // NOTE: date used for deciding updates?
 let component;
 export default params => {
   const APP = globalApp();
@@ -103,7 +106,6 @@ export default params => {
   }, [tone]);
 
   function updatePanel() {
-    console.log('updatePanel');
     updateTone();
     setFields();
   }

diff --git a/packages/apps/lightning-ui-docs/.storybook/manager.js b/packages/apps/lightning-ui-docs/.storybook/manager.js
@@ -79,7 +79,7 @@ addons.register(ids.ADDON_ID, () => {
     type: types.PANEL,
     title: 'Component Style Theme Values',
     match: ({ viewMode }) => viewMode === 'story',
-    render: ComponentStylesPanel
+    render: (params, api) => ComponentStylesPanel(params, api)
   });
 
   //   // Global Theme Panel

diff --git a/packages/apps/lightning-ui-docs/.storybook/preview.js b/packages/apps/lightning-ui-docs/.storybook/preview.js
@@ -42,7 +42,7 @@ const preview = {
       theme: themes.dark
     },
     options: {
-      /**  v7 storySort must be self-contained function & no reference to outside variables
+      /** NOTE:  v7 storySort must be self-contained function & no reference to outside variables
      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort
       */
       storySort: {