Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: react native server v6 (experimental) #393

Merged
merged 16 commits into from
Dec 2, 2022
1 change: 0 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@ module.exports = {
extends: ['prettier'],
rules: {
...conf.rules,
quotes: [1, 'single'],
},
overrides: [...conf.overrides, { files: ['*.ts', '*.tsx'], rules: { 'no-undef': 'off' } }],
};
8 changes: 4 additions & 4 deletions addons/ondevice-actions/package.json
Original file line number Diff line number Diff line change
@@ -26,15 +26,15 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "^6.5",
"@storybook/core-events": "^6.5",
"@storybook/addons": "^6.5.14",
"@storybook/core-events": "^6.5.14",
"fast-deep-equal": "^2.0.1"
},
"devDependencies": {
"@storybook/addon-actions": "^6.5"
"@storybook/addon-actions": "^6.5.14"
},
"peerDependencies": {
"@storybook/addon-actions": "^6.5",
"@storybook/addon-actions": "^6.5.14",
"react": "*",
"react-native": "*"
},
6 changes: 3 additions & 3 deletions addons/ondevice-backgrounds/package.json
Original file line number Diff line number Diff line change
@@ -31,9 +31,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "^6.5",
"@storybook/api": "^6.5",
"@storybook/client-api": "^6.5",
"@storybook/addons": "^6.5.14",
"@storybook/api": "^6.5.14",
"@storybook/client-api": "^6.5.14",
"core-js": "^3.0.1",
"prop-types": "^15.7.2"
},
16 changes: 10 additions & 6 deletions addons/ondevice-backgrounds/src/BackgroundPanel.tsx
Original file line number Diff line number Diff line change
@@ -26,10 +26,14 @@ const BackgroundMeta: ComponentMeta<typeof Background> = {
component: Background,
decorators: [withBackgrounds],
parameters: {
backgrounds: [
{ name: 'warm', value: 'hotpink', default: true },
{ name: 'cool', value: 'deepskyblue' },
],
backgrounds: {
default: 'plain',
values: [
{ name: 'plain', value: 'white' },
{ name: 'warm', value: 'hotpink' },
{ name: 'cool', value: 'deepskyblue' },
],
},
},
};

@@ -71,14 +75,14 @@ const BackgroundPanel = ({ active, api, channel }: BackgroundPanelProps) => {
const store = api.store();
const storyId = store.getSelection().storyId;
const story = store.fromId(storyId);
const backgrounds: Background[] = story.parameters[PARAM_KEY];
const backgrounds: { default?: string; values: Background[] } = story.parameters[PARAM_KEY];
const setBackgroundFromSwatch = (background: string) => {
channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background);
};
return (
<View>
{backgrounds ? (
backgrounds.map(({ value, name }) => (
backgrounds.values.map(({ value, name }) => (
<View key={`${name} ${value}`}>
<Swatch value={value} name={name} setBackground={setBackgroundFromSwatch} />
</View>
14 changes: 9 additions & 5 deletions addons/ondevice-backgrounds/src/index.tsx
Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@ import Container from './container';
export interface Background {
name: string;
value: string;
default?: boolean;
}

export const withBackgrounds = makeDecorator({
@@ -17,14 +16,19 @@ export const withBackgrounds = makeDecorator({
skipIfNoParametersOrOptions: true,

wrapper: (getStory, context, { options, parameters }) => {
const data = parameters || options || [];
const backgrounds: Background[] = Array.isArray(data) ? data : Object.values(data);
const data = (parameters || options || { values: [] }) as {
default?: string;
values: Background[];
};
const backgrounds: Background[] = data.values;

let background = 'transparent';
if (backgrounds.length !== 0) {
addons.getChannel().emit(Events.SET, backgrounds);

const defaultOrFirst = backgrounds.find((x) => x.default) || backgrounds[0];
const defaultValue = data.default
? backgrounds.find((b) => b.name === data.default)
: undefined;
const defaultOrFirst = defaultValue ? defaultValue : backgrounds[0];

if (defaultOrFirst) {
background = defaultOrFirst.value;
10 changes: 5 additions & 5 deletions addons/ondevice-controls/package.json
Original file line number Diff line number Diff line change
@@ -30,9 +30,9 @@
},
"dependencies": {
"@emotion/native": "^10.0.14",
"@storybook/addons": "^6.5",
"@storybook/client-logger": "^6.5",
"@storybook/core-events": "^6.5",
"@storybook/addons": "^6.5.14",
"@storybook/client-logger": "^6.5.14",
"@storybook/core-events": "^6.5.14",
"core-js": "^3.0.1",
"deep-equal": "^1.0.1",
"prop-types": "^15.7.2",
@@ -41,13 +41,13 @@
"tinycolor2": "^1.4.1"
},
"devDependencies": {
"@storybook/addon-controls": "^6.5",
"@storybook/addon-controls": "^6.5.14",
"@types/react-native": "^0.70.4"
},
"peerDependencies": {
"@react-native-community/datetimepicker": "*",
"@react-native-community/slider": "*",
"@storybook/addon-controls": "^6.5",
"@storybook/addon-controls": "^6.5.14",
"react": "*",
"react-native": "*"
},
1 change: 0 additions & 1 deletion addons/ondevice-controls/src/types/Object.tsx
Original file line number Diff line number Diff line change
@@ -37,7 +37,6 @@ const ObjectType = ({ arg, onChange, isPristine }: ObjectProps) => {

const handleChange = (value) => {
const withReplacedQuotes = value
// eslint-disable-next-line quotes
.replace(/[\u2018\u2019]/g, "'")
.replace(/[\u201C\u201D]/g, '"');

10 changes: 5 additions & 5 deletions addons/ondevice-notes/package.json
Original file line number Diff line number Diff line change
@@ -29,11 +29,11 @@
},
"dependencies": {
"@emotion/core": "^10.0.20",
"@storybook/addons": "^6.5",
"@storybook/api": "^6.5",
"@storybook/client-api": "^6.5",
"@storybook/client-logger": "^6.5",
"@storybook/core-events": "^6.5",
"@storybook/addons": "^6.5.14",
"@storybook/api": "^6.5.14",
"@storybook/client-api": "^6.5.14",
"@storybook/client-logger": "^6.5.14",
"@storybook/core-events": "^6.5.14",
"core-js": "^3.0.1",
"prop-types": "^15.7.2",
"simple-markdown": "^0.7.3"
1 change: 0 additions & 1 deletion addons/ondevice-notes/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { logger } from '@storybook/client-logger';

if (__DEV__) {
// eslint-disable-next-line quotes
logger.log("import '@storybook/addon-ondevice-notes/register' to register the notes addon");
}
22 changes: 11 additions & 11 deletions app/react-native-server/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@storybook/react-native-server",
"version": "6.0.1-beta.10",
"private": "true",
"private": "false",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@@ -18,7 +18,7 @@
},
"license": "MIT",
"bin": {
"start-storybook": "./bin/index.js",
"react-native-storybook-server": "./bin/index.js",
"storybook-server": "./bin/index.js"
},
"files": [
@@ -32,26 +32,26 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "^6.5",
"@storybook/api": "^6.5",
"@storybook/channel-websocket": "^6.5",
"@storybook/core": "^6.5",
"@storybook/core-events": "^6.5",
"@storybook/ui": "^6.5",
"@storybook/addons": "^6.5.14",
"@storybook/api": "^6.5.14",
"@storybook/channel-websocket": "^6.5.14",
"@storybook/core": "^6.5.14",
"@storybook/core-events": "^6.5.14",
"@storybook/ui": "^6.5.14",
"commander": "^8.2.0",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^18.2.0",
"react-dom": "18.2.0",
"uuid": "^3.3.2",
"webpack": "^5.74.0",
"webpack": "^4",
"ws": "^7.1.2"
},
"peerDependencies": {
"babel-loader": "^7.0.0 || ^8.0.0"
"babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0"
},
"engines": {
"node": ">=8.0.0"
"node": ">=16.0.0"
},
"publishConfig": {
"access": "public"
1 change: 0 additions & 1 deletion app/react-native-server/src/client/manager/provider.js
Original file line number Diff line number Diff line change
@@ -65,6 +65,5 @@ export default class ReactProvider extends Provider {

handleAPI(api) {
addons.loadAddons(api);
api.emit(Events.GET_STORIES);
}
}
13 changes: 7 additions & 6 deletions app/react-native-server/src/server/cli.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import path from 'path';
import program from 'commander';
import { program } from 'commander';

export function parseList(str) {
return str.split(',');
@@ -24,15 +24,16 @@ function getCli() {
.option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
.option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
.option('--smoke-test', 'Exit after successful start')
// eslint-disable-next-line quotes
.option('--ci', "CI mode (skip interactive prompts, don't open browser")
.option('--quiet', 'Suppress verbose build output')
.parse(process.argv);
.option('--quiet', 'Suppress verbose build output');

const configDir = path.resolve(program.configDir || './storybook');
program.parse();
const options = program.opts();

const configDir = path.resolve(options.configDir || './.storybook_server');

return {
...program,
...options,
configDir,
};
}
3 changes: 1 addition & 2 deletions app/react-native-server/src/server/options.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { managerPreset } from '@storybook/core/server';
import packageJson from '../../package.json';

function extendOptions(options, extendServer) {
@@ -14,7 +13,7 @@ function extendOptions(options, extendServer) {
ignorePreview: true,
corePresets: [
{
name: managerPreset,
name: '@storybook/manager-webpack4/manager-preset',
options: { managerEntry: require.resolve('../client/manager') },
},
{
2 changes: 1 addition & 1 deletion app/react-native-server/src/server/rn-options-preset.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ export async function managerWebpack(config, options) {
return {
...config,
plugins: [
...config.plugins,
...(config?.plugins ?? []),
new webpack.DefinePlugin({
storybookOptions: JSON.stringify(storybookOptions),
}),
16 changes: 8 additions & 8 deletions app/react-native/package.json
Original file line number Diff line number Diff line change
@@ -49,15 +49,15 @@
"dependencies": {
"@emotion/core": "^10.0.20",
"@emotion/native": "^10.0.14",
"@storybook/addons": "^6.5",
"@storybook/channel-websocket": "^6.5",
"@storybook/channels": "^6.5",
"@storybook/client-api": "^6.5",
"@storybook/client-logger": "^6.5",
"@storybook/core-client": "^6.5",
"@storybook/core-events": "^6.5",
"@storybook/addons": "^6.5.14",
"@storybook/channel-websocket": "^6.5.14",
"@storybook/channels": "^6.5.14",
"@storybook/client-api": "^6.5.14",
"@storybook/client-logger": "^6.5.14",
"@storybook/core-client": "^6.5.14",
"@storybook/core-events": "^6.5.14",
"@storybook/csf": "0.0.2--canary.7c6c115.0",
"@storybook/preview-web": "^6.5",
"@storybook/preview-web": "^6.5.14",
"chokidar": "^3.5.1",
"commander": "^8.2.0",
"emotion-theming": "^10.0.19",
42 changes: 0 additions & 42 deletions app/react-native/src/document-polyfill/DOM/Document.js

This file was deleted.

Loading