- {params.active ? (
- styleRows && styleRows.length ? (
- <>
-
Current Theme: {utils.capitalizeFirstLetter(LUITheme)}
-
-
{
- updateToneState(val);
- }}
- />
- }
- />,
- ...styleRows
- ].filter(Boolean)}
- />
-
-
+
+
+ {params.active ? (
+ styleRows && styleRows.length ? (
+ <>
+
Current Theme: {utils.capitalizeFirstLetter(LUITheme)}
+
+
{
+ updateToneState(val);
+ }}
+ />
+ }
+ />,
+ ...styleRows
+ ].filter(Boolean)}
+ />
+
+
+ ) : (
+ No theme values available on this component.
+ )
) : (
- No theme values available on this component.
- )
- ) : (
- <>
- )}
-
+ <>
+ )}
+
+
);
};
diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/panels/GridOverlayPanel.js b/packages/apps/lightning-ui-docs/.storybook/addons/panels/GridOverlayPanel.js
index e2e9e41d6..73c8da723 100644
--- a/packages/apps/lightning-ui-docs/.storybook/addons/panels/GridOverlayPanel.js
+++ b/packages/apps/lightning-ui-docs/.storybook/addons/panels/GridOverlayPanel.js
@@ -18,8 +18,8 @@
import React from 'react';
import { GRIDOVERLAY_ID } from '../constants';
-import { BooleanControl, RangeControl } from '@storybook/components';
-import { useGlobals } from '@storybook/api';
+import { BooleanControl, RangeControl } from '@storybook/blocks';
+import { useGlobals } from '@storybook/manager-api';
import { Table, TableRow } from '../components';
function Controls() {
@@ -39,7 +39,7 @@ function Controls() {
let rows = [];
const alpha = 'alpha';
- const alphaProp = gridName+alpha;
+ const alphaProp = gridName + alpha;
if (globalProps[alphaProp]) {
rows.push(
);
}
- rows.push(...propList.map(prop => {
- const propName = prop.replace(prefix, '');
- return (
- updateGlobals({ [prop]: val.toString() })}
- />
- }
- />
- );
- }));
+ rows.push(
+ ...propList.map(prop => {
+ const propName = prop.replace(prefix, '');
+ return (
+ updateGlobals({ [prop]: val.toString() })}
+ />
+ }
+ />
+ );
+ })
+ );
return <>{rows};
}
diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/panels/ThemePanel.js b/packages/apps/lightning-ui-docs/.storybook/addons/panels/ThemePanel.js
index 3cfa93f1f..5eb7c5aa5 100644
--- a/packages/apps/lightning-ui-docs/.storybook/addons/panels/ThemePanel.js
+++ b/packages/apps/lightning-ui-docs/.storybook/addons/panels/ThemePanel.js
@@ -18,10 +18,14 @@
import React from 'react';
import lng from '@lightningjs/core';
-import { ColorControl, NumberControl } from '@storybook/components';
-import { utils } from '@lightningjs/ui-components';
-import { useGlobals } from '@storybook/api';
-import { colorUpdate, getPanelsTheme, updateGlobalTheme } from '../../utils/themeUtils';
+import { ColorControl, NumberControl } from '@storybook/blocks';
+import { utils } from '@lightningjs/ui-components/src';
+import { useGlobals } from '@storybook/manager-api';
+import {
+ colorUpdate,
+ getPanelsTheme,
+ updateGlobalTheme
+} from '../../utils/themeUtils';
import { Table, TableRow } from '../components';
function Colors() {
@@ -38,7 +42,7 @@ function Colors() {
const rgbaColor = lng.StageUtils.getRgbaString(color);
return (
{
return (
{
- addons.add(ids.ANNOUNCE_ID, {
- type: types.TOOL,
- title: 'Announce Toggle',
- render: Announce
- });
-});
-
-addons.register(ids.THEMEPICKER_ID, () => {
- addons.add(ids.THEMEPICKER_ID, {
- type: types.TOOL,
- title: 'Theme',
- render: ThemePicker
- });
-});
-
-addons.register(ids.DOWNLOAD_ID, () => {
- addons.add(ids.DOWNLOAD_ID, {
- type: types.TOOL,
- title: 'Download Button',
- render: ThemeDownload
- });
-});
-
-addons.register(ids.STAGECOLOR_ID, () => {
- addons.add(ids.STAGECOLOR_ID, {
- type: types.TOOL,
- title: 'Stage Color',
- render: StageColor
- });
-});
-
-addons.register(ids.GRIDOVERLAY_ID, () => {
- addons.add(ids.GRIDOVERLAY_ID, {
- type: types.PANEL,
- title: 'Grid Layout Overlay',
- render: params => GridOverlayPanel(params)
- });
-});
-
-addons.register(ids.COMPONENTSTYLES_ID, api => {
- addons.add(ids.COMPONENTSTYLES_ID, {
- type: types.PANEL,
- title: 'Component Style Theme Values',
- render: params => ComponentStylesPanel(params, api)
- });
-});
-
-addons.register(ids.THEMEPANEL_ID, () => {
- addons.add(ids.THEMEPANEL_ID, {
- type: types.PANEL,
- title: 'Global Theme Values',
- render: ({ key, active }) =>
- });
-});
diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/Announce.js b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/Announce.js
index df76a39b9..0c81f119c 100644
--- a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/Announce.js
+++ b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/Announce.js
@@ -16,30 +16,37 @@
* SPDX-License-Identifier: Apache-2.0
*/
-import React, { useCallback } from 'react';
-import { useGlobals } from '@storybook/api';
+import React, { memo, useCallback, useEffect } from 'react';
+import { useGlobals, useStorybookApi } from '@storybook/manager-api';
import { Icons, IconButton } from '@storybook/components';
-import { ANNOUNCE_ID } from '../constants';
+import { ADDON_ID, ANNOUNCE_ID } from '../constants';
-export default () => {
+export const Announce = memo(function MyAddonSelector() {
const [{ announce }, updateGlobals] = useGlobals();
+ const api = useStorybookApi();
+ const isActive = [true, 'true'].includes(announce);
+ const toggleAnnounce = useCallback(() => {
+ updateGlobals({
+ announce: !isActive
+ });
+ }, [isActive]);
- const toggleMyTool = useCallback(
- () =>
- updateGlobals({
- announce: !announce
- }),
- [announce]
- );
+ useEffect(() => {
+ api.setAddonShortcut(ADDON_ID, {
+ label: 'Announce Toggle [0]',
+ actionName: 'Announce',
+ action: toggleAnnounce
+ });
+ }, [toggleAnnounce, api]);
return (
);
-};
+});
diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/StageColor.js b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/StageColor.js
index 3c1582ac2..16518845c 100644
--- a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/StageColor.js
+++ b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/StageColor.js
@@ -16,30 +16,37 @@
* SPDX-License-Identifier: Apache-2.0
*/
-import React, { useCallback } from 'react';
-import { useGlobals } from '@storybook/api';
+import React, { useCallback, memo, useEffect } from 'react';
+import { useGlobals, useStorybookApi } from '@storybook/manager-api';
import { Icons, IconButton } from '@storybook/components';
-import { STAGECOLOR_ID } from '../constants';
+import { ADDON_ID, STAGECOLOR_ID } from '../constants';
-export default () => {
+export const StageColor = memo(function MyAddonSelector() {
const [{ stageColor }, updateGlobals] = useGlobals();
-
- const toggleStage = useCallback(
- () =>
- updateGlobals({
- stageColor: !stageColor
- }),
- [stageColor]
- );
+ const api = useStorybookApi();
+ const isActiveStage = [true, 'true'].includes(stageColor);
+ const toggleStage = useCallback(() => {
+ updateGlobals({
+ stageColor: !isActiveStage
+ });
+ }, [isActiveStage]);
+ useEffect(() => {
+ api.setAddonShortcut(ADDON_ID, {
+ label: 'Stage Color Toggle',
+ actionName: 'stage color',
+ showInMenu: false,
+ action: toggleStage
+ });
+ }, [toggleStage, api]);
return (
);
-};
+});
diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/ThemeDownload.js b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/ThemeDownload.js
index 9003d85c9..c7735e661 100644
--- a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/ThemeDownload.js
+++ b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/ThemeDownload.js
@@ -17,10 +17,10 @@
*/
import React from 'react';
+import { DOWNLOAD_ID } from '../constants';
import { Icons, IconButton } from '@storybook/components';
import { convertNumToHexAlphaArray } from '../../utils/helpers';
-import { utils } from '@lightningjs/ui-components';
-import { DOWNLOAD_ID } from '../constants';
+import { utils } from '@lightningjs/ui-components/src';
export default () => {
const download = () => {
diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/ThemePicker.js b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/ThemePicker.js
index e11f53e98..7ad17157a 100644
--- a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/ThemePicker.js
+++ b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/ThemePicker.js
@@ -16,17 +16,18 @@
* SPDX-License-Identifier: Apache-2.0
*/
-import { setGlobalTheme } from '../../utils/themeUtils';
-import { TabButton, TooltipLinkList, WithTooltip } from '@storybook/components';
-import { THEMEPICKER_ID, THEMES } from '../constants';
-import { useGlobals } from '@storybook/api';
import React, { useState, useEffect } from 'react';
-import { utils } from '@lightningjs/ui-components';
+import { useGlobals } from '@storybook/manager-api';
+import { TabButton, TooltipLinkList, WithTooltip } from '@storybook/components';
+import { THEMEPICKER_ID } from '../constants';
+import { setGlobalTheme } from '../../utils/themeUtils';
+import { utils } from '@lightningjs/ui-components/src';
export default () => {
const [{ LUITheme }, updateGlobals] = useGlobals();
const [tooltipLinks, updateTooltipLinks] = useState([]);
const [firstLoad, updateFirstLoad] = useState(true);
+
useEffect(() => {
if (!LUITheme) return; // LUITheme is not set until the iframe has first been loaded in preview.js
if (firstLoad && 'custom' === LUITheme) {
@@ -39,7 +40,7 @@ export default () => {
updateFirstLoad(false); // Makes sure the block above only runs once
updateTooltipLinks(
- ['base', ...Object.keys(THEMES), 'custom']
+ ['base']
.filter(theme => ('custom' === LUITheme ? theme : 'custom' !== theme))
.map((theme, idx) => {
const active = theme.toLowerCase() === LUITheme;
@@ -54,12 +55,12 @@ export default () => {
})
);
}, [LUITheme]);
-
return (
}
>
diff --git a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/index.js b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/index.js
index 8f0750e83..1305aa61b 100644
--- a/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/index.js
+++ b/packages/apps/lightning-ui-docs/.storybook/addons/toolbars/index.js
@@ -16,7 +16,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
-export { default as Announce } from './Announce';
-export { default as StageColor } from './StageColor';
+export { Announce } from './Announce';
+export { StageColor } from './StageColor';
export { default as ThemeDownload } from './ThemeDownload';
export { default as ThemePicker } from './ThemePicker';
diff --git a/packages/apps/lightning-ui-docs/.storybook/controls-delete/argTypes/index.js b/packages/apps/lightning-ui-docs/.storybook/controls-delete/argTypes/index.js
deleted file mode 100644
index a255e3427..000000000
--- a/packages/apps/lightning-ui-docs/.storybook/controls-delete/argTypes/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * 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
- */
-
-export const createModeControl = ({ options, summaryValue } = {}) => {
- return {
- mode: {
- control: 'radio',
- options:
- options && Array.isArray(options)
- ? ['unfocused', ...options]
- : ['unfocused', 'focused', 'disabled'],
- description: 'Sets the visual mode for the component',
- table: {
- defaultValue: { summary: summaryValue } // need to figure out how to add default value per story, maybe the args?
- },
- type: { name: 'mode', required: true }
- }
- };
-};
diff --git a/packages/apps/lightning-ui-docs/.storybook/main.js b/packages/apps/lightning-ui-docs/.storybook/main.js
index f2a824b81..6ca6b6fcc 100644
--- a/packages/apps/lightning-ui-docs/.storybook/main.js
+++ b/packages/apps/lightning-ui-docs/.storybook/main.js
@@ -1,4 +1,4 @@
-/**
+/**
* Copyright 2023 Comcast Cable Communications Management, LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
@@ -15,24 +15,63 @@
*
* SPDX-License-Identifier: Apache-2.0
*/
+import remarkGfm from 'remark-gfm'; // needed for Tables, Links, etc in MDX
+const path = require('path');
-module.exports = {
+const config = {
addons: [
- '@storybook/addon-docs',
- '@storybook/addon-essentials',
- '@storybook/addon-storysource',
- './addons/register',
- 'storybook-addon-turbo-build' // Speed up final build
+ {
+ name: '@storybook/addon-essentials',
+ options: {
+ backgrounds: false,
+ outline: false, // disable outline addon
+ measure: false, // disable measure addon
+ viewport: false // disable viewport addon
+ }
+ },
+ {
+ name: '@storybook/addon-docs',
+ options: {
+ mdxPluginOptions: {
+ mdxCompileOptions: {
+ remarkPlugins: [remarkGfm] // needed for MDX to use Github Flavored Markdown
+ }
+ }
+ }
+ },
+ '@storybook/addon-designs',
+ '@storybook/addon-storysource'
],
stories: [
- '../src/*.stories.@(js|jsx|ts|tsx|mdx)',
+ '../src/*.mdx',
+ '../../../@lightningjs/ui-components/src/**/*.mdx',
'../../../@lightningjs/ui-components/src/**/*.stories.@(js|jsx|ts|tsx)',
- '../../../@lightningjs/ui-components/src/docs/*.stories.@(js|jsx|ts|tsx|mdx)',
- '../../../@lightningjs/ui-components-test-utils/src/docs/*.stories.@(js|jsx|ts|tsx|mdx)',
- '../../../@lightningjs/ui-components-test-utils/src/docs/**/*.stories.@(js|jsx|ts|tsx|mdx)'
+ '../../../@lightningjs/ui-components-test-utils/src/docs/*.mdx',
+ '../../../@lightningjs/ui-components-test-utils/src/docs/**/*.mdx'
],
- staticDirs: ['../../../@lightningjs/ui-components/src/assets'], // TODO: How to handle images between projects
+ staticDirs: ['../../../@lightningjs/ui-components/src/assets'],
+ // TODO: How to handle images between projects
+ // could use something like '../public' or '../static' in the root
core: {
disableTelemetry: true
+ },
+ framework: {
+ name: '@storybook/html-webpack5',
+ options: {}
+ },
+ docs: {
+ autodocs: false
+ },
+ async webpackFinal(config) {
+ config.optimization.minimize = false; // Minification seams to to break FocusManager navigation
+ // Shorter alias for inspector
+ config.resolve.alias['lightningInspect'] = path.resolve(
+ __dirname,
+ '../../../../node_modules/@lightningjs/core/devtools/lightning-inspect'
+ );
+
+ return config;
}
};
+
+export default config;
diff --git a/packages/apps/lightning-ui-docs/.storybook/manager-head.html b/packages/apps/lightning-ui-docs/.storybook/manager-head.html
index 2ae769b69..8c243824b 100644
--- a/packages/apps/lightning-ui-docs/.storybook/manager-head.html
+++ b/packages/apps/lightning-ui-docs/.storybook/manager-head.html
@@ -67,4 +67,9 @@
border: 1px solid rgb(74, 74, 74);
padding: 10px 20px;
}
+
+ /* temporary solution for background issue not being recognized by appContentBG */
+ #storybook-preview-iframe {
+ background-color: transparent !important;
+ }
diff --git a/packages/apps/lightning-ui-docs/.storybook/manager.js b/packages/apps/lightning-ui-docs/.storybook/manager.js
index d0167989b..141c91649 100644
--- a/packages/apps/lightning-ui-docs/.storybook/manager.js
+++ b/packages/apps/lightning-ui-docs/.storybook/manager.js
@@ -16,10 +16,77 @@
* SPDX-License-Identifier: Apache-2.0
*/
-import { addons } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
import theme from './theme';
+import * as ids from './addons/constants';
+import {
+ Announce,
+ StageColor,
+ ThemeDownload,
+ ThemePicker
+} from './addons/toolbars';
+import {
+ ComponentStylesPanel,
+ GridOverlayPanel,
+ ThemePanel
+} from './addons/panels';
addons.setConfig({
- theme,
+ theme: theme, // setting Storybook theme
enableShortcuts: false
});
+
+// register addons
+addons.register(ids.ADDON_ID, () => {
+ // Announce toggle
+ addons.add(ids.ANNOUNCE_ID, {
+ type: types.TOOL,
+ title: 'Announce Toggle',
+ match: ({ viewMode }) => viewMode === 'story', // show only in story
+ render: Announce
+ });
+ // // Theme Picker
+ addons.add(ids.THEMEPICKER_ID, {
+ type: types.TOOL,
+ title: 'Theme',
+ match: ({ viewMode }) => viewMode === 'story',
+ render: ThemePicker
+ });
+ // // Theme Download tool
+ addons.add(ids.DOWNLOAD_ID, {
+ type: types.TOOL,
+ title: 'Download Button',
+ match: ({ viewMode }) => viewMode === 'story',
+ render: ThemeDownload
+ });
+ // // Stage Color Toggle
+ addons.add(ids.STAGECOLOR_ID, {
+ type: types.TOOL,
+ title: 'Stage Color',
+ match: ({ viewMode }) => viewMode === 'story',
+ render: StageColor
+ });
+ // // Grid Overlay Panel
+ addons.add(ids.GRIDOVERLAY_ID, {
+ type: types.PANEL,
+ title: 'Grid Layout Overlay',
+ match: ({ viewMode }) => viewMode === 'story',
+ render: params => GridOverlayPanel(params)
+ });
+
+ // // Component Style Panel
+ addons.add(ids.COMPONENTSTYLES_ID, {
+ type: types.PANEL,
+ title: 'Component Style Theme Values',
+ match: ({ viewMode }) => viewMode === 'story',
+ render: params => ComponentStylesPanel(params)
+ });
+
+ // // Global Theme Panel
+ addons.add(ids.THEMEPANEL_ID, {
+ type: types.PANEL,
+ title: 'Global Theme Values',
+ match: ({ viewMode }) => viewMode === 'story',
+ render: ThemePanel
+ });
+});
diff --git a/packages/apps/lightning-ui-docs/.storybook/preview-head.html b/packages/apps/lightning-ui-docs/.storybook/preview-head.html
index 9884b990a..7664fd4a7 100644
--- a/packages/apps/lightning-ui-docs/.storybook/preview-head.html
+++ b/packages/apps/lightning-ui-docs/.storybook/preview-head.html
@@ -17,9 +17,7 @@
-->
diff --git a/packages/apps/lightning-ui-docs/.storybook/preview.js b/packages/apps/lightning-ui-docs/.storybook/preview.js
index 2c83b4d60..91a977bf0 100644
--- a/packages/apps/lightning-ui-docs/.storybook/preview.js
+++ b/packages/apps/lightning-ui-docs/.storybook/preview.js
@@ -18,71 +18,105 @@
// these two lines need to be in this order
// to wait until the inspector is enabled before attaching it
-import theme from './theme';
import { withLightning } from './addons/decorators/withLightning';
import { registerEventListeners } from './utils/registerEvents';
-import { storySortOrder } from '@lightningjs/ui-components/src/docs/constants';
+import { themes } from '@storybook/theming';
// loads window event listeners
registerEventListeners();
-
/**
* custom global props that can be accessed in decorators and add-ons
* globalTypes can only be set in preview.js
* @see https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals
*/
-
-export const globalTypes = {
- LUITheme: {
- name: 'Theme',
- description: 'Theme select',
- defaultValue: 'xfinity'
- },
- 'GridOverlay-alpha': {
- defaultValue: '0'
- },
- 'GridOverlay-toggle-showColumns': {
- defaultValue: 'true'
- },
- 'GridOverlay-toggle-showMargins': {
- defaultValue: 'false'
- },
- 'GridOverlay-toggle-showSafe': {
- defaultValue: 'false'
- },
- 'GridOverlay-toggle-showGutters': {
- defaultValue: 'false'
- },
- 'GridOverlay-toggle-showText': {
- defaultValue: 'false'
- }
-};
-
-export const parameters = {
- actions: { argTypesRegex: '^on[A-Z].*' },
- backgrounds: {
- disable: true
- },
- controls: {
- hideNoControlsWarning: true,
- expanded: true,
- sort: 'requiredFirst'
- },
- docs: {
- inlineStories: false, // sets docs to use iframes
- theme, // Storybook global theme object
- iframeHeight: 300 // sets height for examples in docs
+const preview = {
+ parameters: {
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ backgrounds: {
+ disable: true
+ },
+ controls: {
+ hideNoControlsWarning: true,
+ expanded: true,
+ sort: 'requiredFirst'
+ },
+ docs: {
+ theme: themes.dark
+ },
+ options: {
+ /** 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: {
+ method: 'alphabetical',
+ order: [
+ 'Docs',
+ [
+ 'Introduction',
+ 'Read Me',
+ 'Base',
+ 'Contributing',
+ 'Lightning Resources',
+ 'Theming',
+ [
+ 'Overview',
+ 'Component Config',
+ 'Tones',
+ 'Modes',
+ 'Extensions',
+ 'Subtheming',
+ 'Use in Storybook',
+ 'Theme Properties',
+ '*'
+ ],
+ 'Unit Testing',
+ [
+ 'Overview',
+ 'Test Renderer',
+ 'Test Utils',
+ ['makeCreateComponent', '*']
+ ]
+ ],
+ 'Collections',
+ 'Utilities',
+ 'Components',
+ 'Patterns',
+ 'Templates'
+ ]
+ }
+ }
},
- options: {
- /** Sort method that accepts a function or configuration object
- * @see https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories
- */
- storySort: {
- method: 'alphabetical',
- order: storySortOrder
+ globalTypes: {
+ LUITheme: {
+ name: 'Theme',
+ description: 'Theme select',
+ defaultValue: 'base'
+ },
+ 'GridOverlay-alpha': {
+ defaultValue: '0'
+ },
+ 'GridOverlay-toggle-showColumns': {
+ defaultValue: 'true'
+ },
+ 'GridOverlay-toggle-showMargins': {
+ defaultValue: 'false'
+ },
+ 'GridOverlay-toggle-showSafe': {
+ defaultValue: 'false'
+ },
+ 'GridOverlay-toggle-showGutters': {
+ defaultValue: 'false'
+ },
+ 'GridOverlay-toggle-showText': {
+ defaultValue: 'false'
+ },
+ announce: {
+ defaultValue: false
+ },
+ stageColor: {
+ defaultValue: false
}
- }
+ },
+ decorators: [withLightning]
};
-
-// adding Lightning decorator globally
-export const decorators = [withLightning];
+export default preview;
diff --git a/packages/apps/lightning-ui-docs/.storybook/theme.js b/packages/apps/lightning-ui-docs/.storybook/theme.js
index 005c16fe7..41c08e545 100644
--- a/packages/apps/lightning-ui-docs/.storybook/theme.js
+++ b/packages/apps/lightning-ui-docs/.storybook/theme.js
@@ -16,14 +16,13 @@
* SPDX-License-Identifier: Apache-2.0
*/
-import { create } from '@storybook/theming/create';
+import { create, themes } from '@storybook/theming/create';
import brand from './brand.png';
-import { version } from '@lightningjs/ui-components/package.json';
+import { version } from '../../../@lightningjs/ui-components/package.json'; // TODO: follow up on this temp fix to get the import to work
export default create({
+ ...themes.dark,
base: 'dark',
- appBg: 'rgba(33, 35, 43, 1)',
- textColor: 'white',
brandTitle: `Lightning UI Components v${version}`,
brandUrl: 'https://github.com/rdkcentral/Lightning-UI-Components',
brandImage: brand
diff --git a/packages/apps/lightning-ui-docs/.storybook/utils/registerEvents.js b/packages/apps/lightning-ui-docs/.storybook/utils/registerEvents.js
index a983fbcd9..3f08ee18b 100644
--- a/packages/apps/lightning-ui-docs/.storybook/utils/registerEvents.js
+++ b/packages/apps/lightning-ui-docs/.storybook/utils/registerEvents.js
@@ -16,7 +16,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
-import { context } from '@lightningjs/ui-components';
+import { context } from '@lightningjs/ui-components/src';
// creates an array of extensions
// added to the theme by setTheme in themeSelect
@@ -25,7 +25,6 @@ import { context } from '@lightningjs/ui-components';
export const themeSelectFromMessageEvent = event => {
themeSelect(event.data.theme);
};
-
// called in ThemePicker
export const themeSelect = theme => {
if (!theme) return;
diff --git a/packages/apps/lightning-ui-docs/.storybook/utils/themeUtils.js b/packages/apps/lightning-ui-docs/.storybook/utils/themeUtils.js
index bcee6ed20..1e2fd1463 100644
--- a/packages/apps/lightning-ui-docs/.storybook/utils/themeUtils.js
+++ b/packages/apps/lightning-ui-docs/.storybook/utils/themeUtils.js
@@ -17,7 +17,7 @@
*/
import baseTheme from '@lightningjs/ui-components-theme-base';
-import { utils } from '@lightningjs/ui-components';
+import { utils } from '@lightningjs/ui-components/src';
import debounce from 'debounce';
// Component Styles Panel
@@ -49,7 +49,6 @@ export function setGlobalTheme(theme, updateGlobals) {
document.querySelector('iframe') &&
document.querySelector('iframe').contentWindow &&
document.querySelector('iframe').contentWindow.postMessage({ theme });
- //globalContext().setTheme(THEMES[theme] || {}); // If no theme is found it means that the base theme should be set
if (updateGlobals) updateGlobals({ LUITheme: theme });
}
diff --git a/packages/apps/lightning-ui-docs/index.js b/packages/apps/lightning-ui-docs/index.js
index 5d3a0876a..01cafbbdc 100644
--- a/packages/apps/lightning-ui-docs/index.js
+++ b/packages/apps/lightning-ui-docs/index.js
@@ -23,7 +23,7 @@ import {
Speech,
pool,
context
-} from '@lightningjs/ui-components';
+} from '@lightningjs/ui-components/src';
import {
themeSelect,
themeSelectFromMessageEvent
@@ -109,13 +109,4 @@ export const clearInspector = () => {
const div = document.querySelector('[type=StoryApp]');
div && div.parentNode.remove();
}
-
- // Move lightning inspector out of the foreground
- if (window.top.location.search.indexOf('path=/docs/') > -1) {
- document.body.classList.remove('canvas');
- const div = document.querySelector('[type=StoryApp]');
- div && (div.parentNode.style.zIndex = -1);
- } else {
- document.body.classList.add('canvas');
- }
};
diff --git a/packages/apps/lightning-ui-docs/package.json b/packages/apps/lightning-ui-docs/package.json
index 0df1fb7f4..23330ba6c 100644
--- a/packages/apps/lightning-ui-docs/package.json
+++ b/packages/apps/lightning-ui-docs/package.json
@@ -3,17 +3,12 @@
"sideEffects": false,
"private": true,
"scripts": {
- "start": "yarn run generateStorybookData && start-storybook --no-manager-cache -p 8000",
- "build": "yarn run generateStorybookData && build-storybook",
- "storybook": "start-storybook -p 6006",
+ "start": "yarn run generateStorybookData && storybook dev -p 8000",
+ "build": "yarn run generateStorybookData && storybook build",
+ "storybook": "storybook dev -p 6006",
"generateStorybookData": "node ./scripts/generate-theme-props-table.mjs",
"styleDocs": "node bin/translationScript.js"
},
- "exports": {
- ".": {
- "default": "./index.js"
- }
- },
"devDependencies": {
"@babel/core": "^7.19.6",
"@babel/plugin-transform-runtime": "^7.19.1",
@@ -22,17 +17,17 @@
"@lightningjs/ui-components": "workspace:^",
"@lightningjs/ui-components-theme-base": "workspace:^",
"@mdx-js/react": "^1.6.22",
- "@storybook/addon-actions": "^6.5.12",
- "@storybook/addon-docs": "^6.5.12",
- "@storybook/addon-essentials": "^6.5.12",
- "@storybook/addon-interactions": "^6.5.12",
- "@storybook/addon-links": "^6.5.12",
- "@storybook/addon-storysource": "^6.5.12",
- "@storybook/builder-webpack4": "^6.5.12",
- "@storybook/html": "^6.5.12",
- "@storybook/manager-webpack4": "^6.5.12",
- "@storybook/manager-webpack5": "^6.5.12",
- "@storybook/testing-library": "^0.0.13",
+ "@storybook/addon-actions": "^7.5.0",
+ "@storybook/addon-designs": "^7.0.5",
+ "@storybook/addon-essentials": "^7.5.0",
+ "@storybook/addon-interactions": "^7.5.0",
+ "@storybook/addon-links": "^7.5.0",
+ "@storybook/addon-mdx-gfm": "^7.5.0",
+ "@storybook/addon-storysource": "^7.5.0",
+ "@storybook/blocks": "^7.5.0",
+ "@storybook/html": "^7.5.0",
+ "@storybook/html-webpack5": "^7.5.0",
+ "@storybook/testing-library": "^0.2.2",
"@yarnpkg/pnpify": "^4.0.0-rc.21",
"babel-jest": "^29.0.3",
"babel-loader": "^8.2.5",
@@ -40,8 +35,8 @@
"line-reader-sync": "^0.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "storybook": "^6.5.12",
- "storybook-addon-turbo-build": "^1.1.0"
+ "remark-gfm": "^3.0.1",
+ "storybook": "^7.5.0"
},
"dependencies": {
"@babel/preset-react": "^7.18.6"
diff --git a/packages/apps/lightning-ui-docs/scripts/get-storybook-links.mjs b/packages/apps/lightning-ui-docs/scripts/get-storybook-links.mjs
index 5009da307..6a71260b8 100644
--- a/packages/apps/lightning-ui-docs/scripts/get-storybook-links.mjs
+++ b/packages/apps/lightning-ui-docs/scripts/get-storybook-links.mjs
@@ -27,12 +27,12 @@ import fs from 'fs';
* @returns {string} holds the url the user would navigate to when a component is clicked
*/
export function getStorybookLinks(component, path, name) {
- // get mdx paths
- const originalPath = `../${path}/${component}.mdx`;
+ // get stories.js paths
+ const originalPath = `../${path}/${component}.stories.js`;
let modifiedPath = originalPath;
if (component != name) {
// this is incase there are multiple elements nested inside of one folder
- modifiedPath = `../../${path}/${name}.mdx`;
+ modifiedPath = `../../${path}/${name}.stories.js`;
if (!fs.existsSync(modifiedPath)) {
modifiedPath = originalPath; // this is in case there are multiple elements nested inside of one folder but not all of them have .mdx files
}
@@ -42,22 +42,26 @@ export function getStorybookLinks(component, path, name) {
return;
}
const lrs = new LineReaderSync(modifiedPath);
- const storyIdString = '
+
+# Contributing to `@lightningjs/ui-components`
+
+First off, thanks for taking the time to contribute!
+
+The following is a set of guidelines for contributing to `@lightningjs/ui-components`. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.
+
+## Table of Contents
+
+- [I don't want to read this whole thing I just have a question!!!](#i-dont-want-to-read-this-whole-thing-i-just-have-a-question)
+- [How Can I Contribute?](#how-can-i-contribute)
+ - [Reporting Bugs](#reporting-bugs)
+ - [Suggesting Enhancements](#suggesting-enhancements)
+ - [Your First Code Contribution](#your-first-code-contribution)
+ - [Pull Requests](#pull-requests)
+- [Style Guides](#style-guides)
+ - [TypeScript](#typescript)
+ - [Git Commit Messages](#git-commit-messages)
+ - [JavaScript Style Guide](#javascript-style-guide)
+ - [Test Style Guide](#test-style-guide)
+ - [Documentation Style Guide](#documentation-style-guide)
+ - [Live Examples](#live-examples)
+ - [Storybook](#storybook)
+ - [Usage Documentation](#usage-documentation)
+ - [API Documentation](#api-documentation)
+
+## I don't want to read this whole thing I just have a question!!!
+
+> **Note:** Before you file an issue with a question, you'll get faster results by using the resources below.
+
+
+
+**Documentation**
+
+- [See the README for setup help](../?path=/story/docs-read-me--page)
+- [See Storybook for component docs with live examples](https://rdkcentral.github.io/Lightning-UI-Components/)
+
+**Discuss on Slack**
+
+
+ #lightning-ui-components-support
+
+
+## How Can I Contribute?
+
+### Reporting Bugs
+
+This section guides you through submitting a bug report for `@lightningjs/ui-components`. Following these guidelines helps maintainers and the community understand your report, reproduce the behavior, and find related reports.
+
+When you are creating a bug report please check the version of LUI that you are using. Include as many details as possible, and post either as an issue [here](https://github.com/rdkcentral/Lightning-UI-Components/issues) on GitHub.
+
+> **Note:** If you find a **Closed** issue that seems like it is the same thing that you're experiencing, open a new issue and include a link to the original issue in the body of your new one.
+
+#### How Do I Submit A (Good) Bug Report?
+
+Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues/). Create an issue and provide the following information:
+
+- Tell us the specific version of LUI you are using
+- Paste code snippets using the markdown code formatters (walls of unformatted copy and pasted text are very difficult to parse)
+- Provide links to any relevant code, tickets, or GitHub issues
+- Provide screenshots/videos to illustrate the bug you are facing
+- Provide detailed reproduction steps
+
+### Suggesting Enhancements
+
+This section guides you through submitting an enhancement suggestion for `@lightningjs/ui-components`, including new components, completely new features, and minor improvements to existing functionality. Following these guidelines helps maintainers and the community understand your suggestion and find related suggestions.
+
+#### Before Submitting An Enhancement Suggestion
+
+- **Check if there's already a component which provides that enhancement.**
+- **Perform a [cursory search](https://github.com/rdkcentral/Lightning-UI-Components/issues)** to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one.
+
+#### How Do I Submit A (Good) Enhancement Suggestion?
+
+Enhancement suggestions are tracked as [GitHub issues](https://guides.github.com/features/issues/). Create an issue and provide the following information:
+
+- **Use a clear and descriptive title** for the issue to identify the suggestion.
+- **Provide a step-by-step description of the suggested enhancement** in as many details as possible.
+- **Provide specific examples to demonstrate the steps**. Include copy/pasteable snippets which you use in those examples, as [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines).
+- **Describe the current behavior** and **explain which behavior you expected to see instead** and why.
+- **Include screenshots and animated GIFs** which help you demonstrate the steps or point out the part which the suggestion is related to. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) on Linux.
+- **Explain why this enhancement would be useful** to most `@lightningjs/ui-components` users.
+- **Include any additional information** that might be helpful
+
+### Your First Code Contribution
+
+Unsure where to begin contributing to `@lightningjs/ui-components`? You can start by looking through these `beginner` and `help-wanted` issues:
+
+- [Beginner issues][beginner] \- issues which should only require a few lines of code, and a test or two.
+- [Help wanted issues][help-wanted] \- issues which should be a bit more involved than `beginner` issues.
+
+Follow the instructions below to get started with local development:
+
+Fork and clone the project from here: https://github.com/rdkcentral/Lightning-UI-Components.
+
+In your local terminal, follow these steps:
+
+```bash
+# enter project directory
+cd packages/@lightningjs/ui-components
+```
+
+## Installation
+
+The Lightning UI Monorepo requires yarn 3.2.3^
+
+The preferred way to manage Yarn is through Corepack, a new binary shipped with all Node.js releases starting from 16.10. It acts as an intermediary between you and Yarn, and lets you use different package manager versions across multiple projects without having to check-in the Yarn binary anymore.
+
+Corepack is included by default with all Node.js installs, but is currently opt-in. To enable it, run the following command:
+
+```sh
+corepack enable
+```
+
+```sh
+corepack prepare yarn@3.2.3 --activate
+```
+
+### Installing dependencies
+
+```sh
+yarn install
+```
+
+### Starting the project
+
+```sh
+yarn start
+```
+
+Running this command will start storybook which is located in packages/apps/lightning-ui-docs. All changes made in packages/@lightningjs/ui & packages/@lightningjs/ui-components will be reflected in the storybook instance at http://localhost:8000
+
+## New component
+
+### Requirements
+
+Before a new component will be reviewed, it must meet the following prerequisite:
+
+- Component concept has been approved by @Lightning/lightning-team
+
+> **Note:** Development on a component may be broken up in separate PRs or done all at once, use your best judgement when breaking up work.
+
+### Development
+
+If you are creating a new component, you can bootstrap the required file structure with:
+
+```sh
+yarn createComponent
+```
+
+- `packageName`: name of which package the component will be published to (`@lightningjs/ui-components` or `@lightningjs/ui-components`)
+- `componentName`: name of component to be added
+
+Example: add a new component, `MyComponent`, to the `@lightningjs/ui-components` package
+
+```sh
+yarn createComponent @lightningjs/ui-components MyComponent
+```
+
+This will create the following files:
+
+```
+/
+└── packages
+ └── @lightning
+ └── ui-components
+ └── src
+ └── components
+ └── MyComponent
+ ├── index.js
+ ├── MyComponent.d.ts
+ ├── MyComponent.mdx
+ ├── MyComponent.stories.js
+ ├── MyComponent.styles.js
+ └── MyComponent.test.js
+```
+
+### Pull Requests
+
+NOTE: Before RDK accepts your code into the project you must sign the RDK Contributor License Agreement (CLA).
+
+The process described here has several goals:
+
+- Maintain `@lightningjs/ui-components`'s quality
+- Fix problems that are important to users
+- Engage the community in working toward the best possible `@lightningjs/ui-components`
+- Enable a sustainable system for `@lightningjs/ui-components` maintainers to review contributions
+
+Please follow these steps to have your contribution considered by the maintainers:
+
+1. When creating a pull request, fill out the default template. Include as much detail as possible, the changes made in the pull request and how to best approach testing the changes
+2. Follow the [style guides](#style-guides)
+3. Follow the [new component guide](#new-component) if you are submitting a new component
+4. After you submit your pull request, verify that all [status checks](https://help.github.com/articles/about-status-checks/) are passing What if the status checks are failing?
If a status check is failing, and you believe that the failure is unrelated to your change, please leave a comment on the pull request explaining why you believe the failure is unrelated. A maintainer will re-run the status check for you. If we conclude that the failure was a false positive, then we will open an issue to track that problem with our status check suite.