Skip to content

Commit

Permalink
Add UI plugin example (#1239)
Browse files Browse the repository at this point in the history
  • Loading branch information
ovidiuch committed Jul 31, 2020
1 parent f95b157 commit 59011fb
Show file tree
Hide file tree
Showing 79 changed files with 722 additions and 383 deletions.
1 change: 1 addition & 0 deletions .circleci/config.yml
Expand Up @@ -36,6 +36,7 @@ jobs:
# Test build
- run: yarn dist
- run: yarn build
- run: yarn build:plugin
- run: yarn export
- run:
command: yarn start
Expand Down
1 change: 0 additions & 1 deletion .gitignore
Expand Up @@ -3,7 +3,6 @@ npm-debug.log
yarn-error.log

packages/*/dist
packages/react-cosmos-playground2/src/plugins/pluginEntry.ts

coverage
cypress/screenshots
Expand Down
8 changes: 4 additions & 4 deletions cypress/tests/native.js
Expand Up @@ -23,13 +23,13 @@ describe('Native', () => {
});

it('has fixture paths', () => {
userDepsContainsModule('__fixtures__/Hello World.ts');
userDepsContainsModule('Counter/index.fixture.tsx');
userDepsContainsModule('WelcomeMessage/index.fixture.tsx');
userDepsContainsModule('components/__fixtures__/Hello World.ts');
userDepsContainsModule('components/Counter/index.fixture.tsx');
userDepsContainsModule('components/WelcomeMessage/index.fixture.tsx');
});

it('has decorator paths', () => {
userDepsContainsModule('WelcomeMessage/cosmos.decorator.tsx');
userDepsContainsModule('components/WelcomeMessage/cosmos.decorator.tsx');
});
});
});
Expand Down
1 change: 1 addition & 0 deletions example/.gitignore
@@ -1,2 +1,3 @@
cosmos-export
cosmos.userdeps.js
booleanInputPlugin/dist
4 changes: 4 additions & 0 deletions example/booleanInputPlugin/cosmos.plugin.json
@@ -0,0 +1,4 @@
{
"name": "Boolean input",
"ui": "dist/ui"
}
36 changes: 36 additions & 0 deletions example/booleanInputPlugin/src/BooleanInput.tsx
@@ -0,0 +1,36 @@
import React from 'react';

type Props = {
indentLevel: number;
itemName: string;
value: boolean;
onChange: (value: boolean) => unknown;
};

export function BooleanInput({
indentLevel,
itemName,
value,
onChange,
}: Props) {
return (
<label
style={{
display: 'flex',
height: 28,
marginLeft: indentLevel * 12 + 20,
flexDirection: 'row',
alignItems: 'center',
userSelect: 'none',
}}
>
<input
style={{ marginRight: 8 }}
type="checkbox"
checked={value}
onChange={e => onChange(e.target.checked)}
/>
{itemName}
</label>
);
}
31 changes: 31 additions & 0 deletions example/booleanInputPlugin/src/ui.tsx
@@ -0,0 +1,31 @@
import React from 'react';
import { ValueInputSlotProps } from 'react-cosmos-playground2/plugin';
import { createPlugin } from 'react-plugin';
import { BooleanInput } from './BooleanInput';

type BooleanInputPluginSpec = {
name: 'booleanInputPlugin';
};

const { plug, register } = createPlugin<BooleanInputPluginSpec>({
name: 'booleanInputPlugin',
});

plug<ValueInputSlotProps>('valueInput', ({ slotProps, children }) => {
const { item, itemName, parents, onInputChange } = slotProps;

if (item.type === 'primitive' && typeof item.value === 'boolean')
return (
<BooleanInput
indentLevel={parents.length}
itemName={itemName}
value={item.value}
onChange={onInputChange}
/>
);

// Fall back to default inputs
return <>{children}</>;
});

register();
38 changes: 38 additions & 0 deletions example/booleanInputPlugin/webpack.config.js
@@ -0,0 +1,38 @@
const { join } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const src = join(__dirname, 'src');
const dist = join(__dirname, 'dist');
const env = process.env.NODE_ENV || 'development';

const plugins = [];

module.exports = {
mode: env,
devtool: false,
entry: join(src, 'ui.tsx'),
output: {
path: dist,
filename: 'ui.js',
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
externals: {
'react-dom': 'ReactDom',
'react-plugin': 'ReactPlugin',
react: 'React',
},
module: {
rules: [
{
test: /\.tsx?$/,
include: src,
use: {
loader: 'babel-loader',
},
},
],
},
plugins,
};
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`returns fixture elements: __fixtures__/Controls playground.tsx 1`] = `
exports[`returns fixture elements: components/__fixtures__/Controls playground.tsx 1`] = `
Array [
<pre>
{
Expand Down Expand Up @@ -49,9 +49,9 @@ Array [
]
`;

exports[`returns fixture elements: __fixtures__/Hello World.ts 1`] = `"Hello World!"`;
exports[`returns fixture elements: components/__fixtures__/Hello World.ts 1`] = `"Hello World!"`;

exports[`returns fixture elements: __fixtures__/Props playground.tsx 1`] = `
exports[`returns fixture elements: components/__fixtures__/Props playground.tsx 1`] = `
<pre>
{
"string": "How are you doing?",
Expand All @@ -70,7 +70,7 @@ exports[`returns fixture elements: __fixtures__/Props playground.tsx 1`] = `
</pre>
`;

exports[`returns fixture elements: Counter/index.fixture.tsx default 1`] = `
exports[`returns fixture elements: components/Counter/index.fixture.tsx default 1`] = `
<button
onClick={[Function]}
>
Expand All @@ -80,7 +80,7 @@ exports[`returns fixture elements: Counter/index.fixture.tsx default 1`] = `
</button>
`;

exports[`returns fixture elements: Counter/index.fixture.tsx large number 1`] = `
exports[`returns fixture elements: components/Counter/index.fixture.tsx large number 1`] = `
<button
onClick={[Function]}
>
Expand All @@ -90,7 +90,7 @@ exports[`returns fixture elements: Counter/index.fixture.tsx large number 1`] =
</button>
`;

exports[`returns fixture elements: Counter/index.fixture.tsx small number 1`] = `
exports[`returns fixture elements: components/Counter/index.fixture.tsx small number 1`] = `
<button
onClick={[Function]}
>
Expand All @@ -100,7 +100,7 @@ exports[`returns fixture elements: Counter/index.fixture.tsx small number 1`] =
</button>
`;

exports[`returns fixture elements: CounterButton/index.fixture.tsx 1`] = `
exports[`returns fixture elements: components/CounterButton/index.fixture.tsx 1`] = `
<button
onClick={[Function]}
>
Expand All @@ -110,7 +110,7 @@ exports[`returns fixture elements: CounterButton/index.fixture.tsx 1`] = `
</button>
`;

exports[`returns fixture elements: NestedDecorators/index.fixture.tsx 1`] = `
exports[`returns fixture elements: components/NestedDecorators/index.fixture.tsx 1`] = `
<span>
(layout:
wide
Expand All @@ -134,7 +134,7 @@ exports[`returns fixture elements: NestedDecorators/index.fixture.tsx 1`] = `
</span>
`;

exports[`returns fixture elements: WelcomeMessage/index.fixture.tsx 1`] = `
exports[`returns fixture elements: components/WelcomeMessage/index.fixture.tsx 1`] = `
<div
style={
Object {
Expand Down
Expand Up @@ -2,7 +2,7 @@ import { FixtureId } from 'react-cosmos-shared2/renderer';
import { getCosmosConfigAtPath, getFixtures } from 'react-cosmos';
import { create } from 'react-test-renderer';

const cosmosConfig = getCosmosConfigAtPath(require.resolve('./cosmos.config'));
const cosmosConfig = getCosmosConfigAtPath(require.resolve('../cosmos.config'));

it('returns fixture elements', async () => {
expect.hasAssertions();
Expand Down
56 changes: 28 additions & 28 deletions example/fixtures2.test.ts → example/components/fixtures2.test.ts
@@ -1,6 +1,6 @@
import { getCosmosConfigAtPath, getFixtures2 } from 'react-cosmos';

const cosmosConfig = getCosmosConfigAtPath(require.resolve('./cosmos.config'));
const cosmosConfig = getCosmosConfigAtPath(require.resolve('../cosmos.config'));

it('returns fixture info', async () => {
const fixtures = getFixtures2(cosmosConfig);
Expand All @@ -12,10 +12,10 @@ it('returns fixture info', async () => {
name: 'default',
parents: [],
playgroundUrl:
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22Counter%2Findex.fixture.tsx%22%2C%22name%22%3A%22default%22%7D',
relativeFilePath: 'Counter/index.fixture.tsx',
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22components%2FCounter%2Findex.fixture.tsx%22%2C%22name%22%3A%22default%22%7D',
relativeFilePath: 'components/Counter/index.fixture.tsx',
rendererUrl:
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22Counter%2Findex.fixture.tsx%22%2C%22name%22%3A%22default%22%7D',
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22components%2FCounter%2Findex.fixture.tsx%22%2C%22name%22%3A%22default%22%7D',
treePath: ['Counter', 'default'],
},
{
Expand All @@ -25,10 +25,10 @@ it('returns fixture info', async () => {
name: 'small number',
parents: [],
playgroundUrl:
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22Counter%2Findex.fixture.tsx%22%2C%22name%22%3A%22small%20number%22%7D',
relativeFilePath: 'Counter/index.fixture.tsx',
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22components%2FCounter%2Findex.fixture.tsx%22%2C%22name%22%3A%22small%20number%22%7D',
relativeFilePath: 'components/Counter/index.fixture.tsx',
rendererUrl:
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22Counter%2Findex.fixture.tsx%22%2C%22name%22%3A%22small%20number%22%7D',
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22components%2FCounter%2Findex.fixture.tsx%22%2C%22name%22%3A%22small%20number%22%7D',
treePath: ['Counter', 'small number'],
},
{
Expand All @@ -38,10 +38,10 @@ it('returns fixture info', async () => {
name: 'large number',
parents: [],
playgroundUrl:
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22Counter%2Findex.fixture.tsx%22%2C%22name%22%3A%22large%20number%22%7D',
relativeFilePath: 'Counter/index.fixture.tsx',
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22components%2FCounter%2Findex.fixture.tsx%22%2C%22name%22%3A%22large%20number%22%7D',
relativeFilePath: 'components/Counter/index.fixture.tsx',
rendererUrl:
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22Counter%2Findex.fixture.tsx%22%2C%22name%22%3A%22large%20number%22%7D',
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22components%2FCounter%2Findex.fixture.tsx%22%2C%22name%22%3A%22large%20number%22%7D',
treePath: ['Counter', 'large number'],
},
{
Expand All @@ -50,11 +50,11 @@ it('returns fixture info', async () => {
getElement: expect.any(Function),
name: null,
parents: [],
relativeFilePath: '__fixtures__/Controls playground.tsx',
relativeFilePath: 'components/__fixtures__/Controls playground.tsx',
rendererUrl:
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22__fixtures__%2FControls%20playground.tsx%22%2C%22name%22%3Anull%7D',
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22components%2F__fixtures__%2FControls%20playground.tsx%22%2C%22name%22%3Anull%7D',
playgroundUrl:
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22__fixtures__%2FControls%20playground.tsx%22%2C%22name%22%3Anull%7D',
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22components%2F__fixtures__%2FControls%20playground.tsx%22%2C%22name%22%3Anull%7D',
treePath: ['Controls playground'],
},
{
Expand All @@ -64,10 +64,10 @@ it('returns fixture info', async () => {
name: null,
parents: [],
playgroundUrl:
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22__fixtures__%2FHello%20World.ts%22%2C%22name%22%3Anull%7D',
relativeFilePath: '__fixtures__/Hello World.ts',
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22components%2F__fixtures__%2FHello%20World.ts%22%2C%22name%22%3Anull%7D',
relativeFilePath: 'components/__fixtures__/Hello World.ts',
rendererUrl:
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22__fixtures__%2FHello%20World.ts%22%2C%22name%22%3Anull%7D',
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22components%2F__fixtures__%2FHello%20World.ts%22%2C%22name%22%3Anull%7D',
treePath: ['Hello World'],
},
{
Expand All @@ -76,11 +76,11 @@ it('returns fixture info', async () => {
getElement: expect.any(Function),
name: null,
parents: [],
relativeFilePath: '__fixtures__/Props playground.tsx',
relativeFilePath: 'components/__fixtures__/Props playground.tsx',
rendererUrl:
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22__fixtures__%2FProps%20playground.tsx%22%2C%22name%22%3Anull%7D',
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22components%2F__fixtures__%2FProps%20playground.tsx%22%2C%22name%22%3Anull%7D',
playgroundUrl:
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22__fixtures__%2FProps%20playground.tsx%22%2C%22name%22%3Anull%7D',
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22components%2F__fixtures__%2FProps%20playground.tsx%22%2C%22name%22%3Anull%7D',
treePath: ['Props playground'],
},
{
Expand All @@ -90,10 +90,10 @@ it('returns fixture info', async () => {
name: null,
parents: [],
playgroundUrl:
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22CounterButton%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
relativeFilePath: 'CounterButton/index.fixture.tsx',
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22components%2FCounterButton%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
relativeFilePath: 'components/CounterButton/index.fixture.tsx',
rendererUrl:
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22CounterButton%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22components%2FCounterButton%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
treePath: ['CounterButton'],
},
{
Expand All @@ -103,10 +103,10 @@ it('returns fixture info', async () => {
name: null,
parents: [],
playgroundUrl:
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22NestedDecorators%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
relativeFilePath: 'NestedDecorators/index.fixture.tsx',
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22components%2FNestedDecorators%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
relativeFilePath: 'components/NestedDecorators/index.fixture.tsx',
rendererUrl:
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22NestedDecorators%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22components%2FNestedDecorators%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
treePath: ['NestedDecorators'],
},
{
Expand All @@ -116,10 +116,10 @@ it('returns fixture info', async () => {
name: null,
parents: [],
playgroundUrl:
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22WelcomeMessage%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
relativeFilePath: 'WelcomeMessage/index.fixture.tsx',
'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22components%2FWelcomeMessage%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
relativeFilePath: 'components/WelcomeMessage/index.fixture.tsx',
rendererUrl:
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22WelcomeMessage%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22components%2FWelcomeMessage%2Findex.fixture.tsx%22%2C%22name%22%3Anull%7D',
treePath: ['WelcomeMessage'],
},
]);
Expand Down

0 comments on commit 59011fb

Please sign in to comment.