Skip to content

Commit

Permalink
feat(Storybook): upgrade to v8 (#527)
Browse files Browse the repository at this point in the history
* feat(Storybook): upgrade to v8

* fix: comment out useArgs for future implementation

* fix: update yarn.lock

* fix: yarn.lock
  • Loading branch information
ImCoolNowRight authored Sep 19, 2024
1 parent 3c47b12 commit 6c79934
Show file tree
Hide file tree
Showing 8 changed files with 3,211 additions and 6,125 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import lng from '@lightningjs/core';
import { default as ListItemSliderComponent } from './ListItemSlider';
import { createModeControl, generateSubStory } from '../../docs/utils';
import { Basic as SliderStory } from '../Slider/Slider.stories';
import { useArgs } from '@storybook/client-api';
// TODO: Re-implement after figuring out how to in Storybook 8; worked in 7.
// import { useArgs } from '@storybook/manager-api';

/**
* A ListItem component with slider functionality
Expand All @@ -31,23 +32,23 @@ export default {
};

export const ListItemSlider = () => {
const [{ value }, updateArgs] = useArgs();
// const [{ value }, updateArgs] = useArgs();
return class ListItemSlider extends lng.Component {
static _template() {
return {
ListItemSlider: {
type: ListItemSliderComponent,
value: value,
signals: {
onSliderChange: true
}
type: ListItemSliderComponent
// value: value,
// signals: {
// onSliderChange: true
// }
}
};
}
// update arg control when value changes
onSliderChange(value) {
updateArgs({ value });
}
// onSliderChange(value) {
// updateArgs({ value });
// }
};
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,30 +20,31 @@ import lng from '@lightningjs/core';
import { createModeControl } from '../../docs/utils';
import TextBox from '../TextBox';
import Slider from '.';
import { useArgs } from '@storybook/client-api';
// TODO: Re-implement after figuring out how to in Storybook 8; worked in 7.
// import { useArgs } from '@storybook/manager-api';

export default {
title: 'Components/Slider/Slider'
};

export const Basic = () => {
const [{ value }, updateArgs] = useArgs();
// const [{ value }, updateArgs] = useArgs();
return class Basic extends lng.Component {
static _template() {
return {
Slider: {
type: Slider,
value: value,
signals: {
onChange: true
}
type: Slider
// value: value,
// signals: {
// onChange: true
// }
}
};
}
// update arg control when value changes
onChange(value) {
updateArgs({ value });
}
// onChange(value) {
// updateArgs({ value });
// }
};
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,30 +20,31 @@ import lng from '@lightningjs/core';
import Slider from './SliderLarge';
import { createModeControl } from '../../docs/utils';
import TextBox from '../TextBox';
import { useArgs } from '@storybook/client-api';
// TODO: Re-implement after figuring out how to in Storybook 8; worked in 7.
// import { useArgs } from '@storybook/manager-api';

export default {
title: 'Components/Slider/SliderLarge'
};

export const Basic = () => {
const [{ value }, updateArgs] = useArgs();
// const [{ value }, updateArgs] = useArgs();
return class Basic extends lng.Component {
static _template() {
return {
Slider: {
type: Slider,
value: value,
signals: {
onChange: true
}
type: Slider
// value: value,
// signals: {
// onChange: true
// }
}
};
}
// update arg control when value changes
onChange(value) {
updateArgs({ value });
}
// onChange(value) {
// updateArgs({ value });
// }
};
};

Expand Down
2 changes: 1 addition & 1 deletion packages/@lightningjs/ui-components/src/docs/Storybook.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ Specifically, `useArgs` has a method called `updateArgs` that can be used to upd
Below is an example of how to use `updateArgs` along with the value property:

```js
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/manager-api';

const [{ value }, updateArgs] = useArgs();

Expand Down
48 changes: 23 additions & 25 deletions packages/apps/lightning-ui-docs/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { dirname, join } from "path";
/**
* Copyright 2023 Comcast Cable Communications Management, LLC
*
Expand All @@ -19,29 +20,24 @@ import remarkGfm from 'remark-gfm'; // needed for Tables, Links, etc in MDX
const path = require('path');

const config = {
addons: [
{
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
}
addons: [{
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'
],
}
}, getAbsolutePath("@storybook/addon-designs"), getAbsolutePath("@storybook/addon-storysource"), '@storybook/addon-webpack5-compiler-babel'],
stories: [
'../src/*.mdx',
'../../../@lightningjs/ui-components/src/**/*.mdx',
Expand All @@ -56,12 +52,10 @@ const config = {
disableTelemetry: true
},
framework: {
name: '@storybook/html-webpack5',
name: getAbsolutePath("@storybook/html-webpack5"),
options: {}
},
docs: {
autodocs: false
},
docs: {},
async webpackFinal(config) {
config.optimization.minimize = false; // Minification seams to to break FocusManager navigation
// Shorter alias for inspector
Expand All @@ -75,3 +69,7 @@ const config = {
};

export default config;

function getAbsolutePath(value) {
return dirname(require.resolve(join(value, "package.json")));
}
2 changes: 1 addition & 1 deletion packages/apps/lightning-ui-docs/.storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ registerEventListeners();
*/
const preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
actions: { argTypesRegex: '^on.*' },
backgrounds: {
disable: true
},
Expand Down
29 changes: 16 additions & 13 deletions packages/apps/lightning-ui-docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,29 @@
"@lightningjs/ui-components": "workspace:^",
"@lightningjs/ui-components-theme-base": "workspace:^",
"@mdx-js/react": "^1.6.22",
"@storybook/addon-actions": "^7.6.6",
"@storybook/addon-designs": "^7.0.7",
"@storybook/addon-essentials": "^7.6.6",
"@storybook/addon-interactions": "^7.6.6",
"@storybook/addon-links": "^7.6.6",
"@storybook/addon-mdx-gfm": "^7.6.6",
"@storybook/addon-storysource": "^7.6.6",
"@storybook/blocks": "^7.6.6",
"@storybook/html": "^7.6.6",
"@storybook/html-webpack5": "^7.6.6",
"@storybook/testing-library": "^0.2.2",
"@storybook/addon-actions": "^8.2.9",
"@storybook/addon-designs": "^8.0.3",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/addon-mdx-gfm": "^8.2.9",
"@storybook/addon-storysource": "^8.2.9",
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
"@storybook/blocks": "^8.2.9",
"@storybook/html": "^8.2.9",
"@storybook/html-webpack5": "^8.2.9",
"@storybook/manager-api": "^8.2.9",
"@storybook/test": "^8.2.9",
"@storybook/theming": "^8.2.9",
"@yarnpkg/pnpify": "^4.0.0-rc.21",
"babel-jest": "^29.0.3",
"babel-loader": "^8.2.5",
"encoding": "^0.1.13",
"line-reader-sync": "^0.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"remark-gfm": "^3.0.1",
"storybook": "^7.6.6"
"remark-gfm": "^4.0.0",
"storybook": "^8.2.9"
},
"dependencies": {
"@babel/preset-react": "^7.18.6"
Expand Down
Loading

0 comments on commit 6c79934

Please sign in to comment.