How to use react-cosmos - 10 common examples

export function getAppWebpackConfig({ path, filename, mode }) {
  // XXX: This is an experiment to see what would a Cosmos API for building
  // an app bundle would look like
  const { rootPath, globalImports } = getCosmosConfig(COSMOS_CONFIG_PATH);
  const defaultWebpackConfig = getDefaultWebpackConfig(rootPath);

  let webpackConfig = {
    ...defaultWebpackConfig,
    mode,
    devtool: mode === 'production' ? false : defaultWebpackConfig.devtool,
    entry: [...globalImports, require.resolve('../../../App.dom')],
    output: {
      path,
      filename,
      publicPath: '/'
    }
  };

  // XXX: Omit HtmlWebpackPlugin used in renderer build
  webpackConfig = {
    ...webpackConfig,

return () => {
    const [searchText, setSearchText] = useValue('searchText', {
      defaultValue: ''
    });
    return (
       console.log('Close fixture search overlay')}
        onSelect={selectedFixtureId =>
          console.log('Select fixture', selectedFixtureId)
        }
      />
    );

return () => {
    const [
      selectedFixtureId,
      setSelectedFixtureId
    ] = useValue('selectedFixtureId', { defaultValue: fixtureId });
    const [treeExpansion, setTreeExpansion] = useValue('treeExpansion', {
      defaultValue: initialTreeExpansion
    });
    return (
      
    );
  };
}

export default () => {
  const [count, setCount] = useValue('count', { defaultValue: 0 });
  return (
     setCount(prevCount => prevCount + 1)}
    />
  );
};

export default () => {
  const [string] = useValue('string', { defaultValue: 'How are you doing?' });
  const [number] = useValue('number', { defaultValue: 1989 });
  const [boolean] = useValue('boolean', { defaultValue: true });
  const [object] = useValue('object', {
    defaultValue: { isAdmin: true, name: 'Pat D', age: 44 }
  });
  const [array] = useValue('array', {
    defaultValue: [
      { isAdmin: true, name: 'Pat D', age: 44 },
      { isAdmin: false, name: 'Dan B', age: 39 }
    ]
  });

  return (

export default () => {
  const [string] = useValue('string', { defaultValue: 'How are you doing?' });
  const [number] = useValue('number', { defaultValue: 1989 });
  const [boolean] = useValue('boolean', { defaultValue: true });
  const [object] = useValue('object', {
    defaultValue: { isAdmin: true, name: 'Pat D', age: 44 }
  });
  const [array] = useValue('array', {
    defaultValue: [
      { isAdmin: true, name: 'Pat D', age: 44 },
      { isAdmin: false, name: 'Dan B', age: 39 }
    ]
  });

  return (

export default () => {
  const [viewport, setViewport] = useValue('viewport', {
    defaultValue: initialViewport
  });
  const [scaled, setScaled] = useValue('scaled', { defaultValue: false });
  const scaleFactor = getViewportScaleFactor(viewport, containerViewport);
  return (
    <header> setScaled(!scaled)}
    /&gt;
  );
};
</header>

}
            },
            currentValue: {
              type: 'object',
              values: {
                isAdmin: { type: 'primitive', value: true },
                name: { type: 'primitive', value: 'Pat D' },
                age: { type: 'primitive', value: 45 }
              }
            }
          }
        }
      }
    }
  );
  const [treeExpansion, setTreeExpansion] = useValue('treeExpansion', {
    defaultValue: {}
  });

  return (
    
  );
};

export default () => {
  const [fixtureState, setFixtureState] = useValue(
    'fixtureState',
    {
      defaultValue: {
        values: {
          string: {
            defaultValue: { type: 'primitive', value: 'hello world' },
            currentValue: { type: 'primitive', value: 'hello world' }
          },
          number: {
            defaultValue: { type: 'primitive', value: 1337 },
            currentValue: { type: 'primitive', value: 1337 }
          },
          boolean: {
            defaultValue: { type: 'primitive', value: false },
            currentValue: { type: 'primitive', value: false }
          },

type: 'unserializable',
            stringifiedValue: '<div>'
          }
        }
      },
      string: {
        type: 'primitive',
        value: 'hello world'
      },
      number: {
        type: 'primitive',
        value: 1337
      }
    }
  });
  const [treeExpansion, setTreeExpansion] = useValue(
    'treeExpansion',
    { defaultValue: { object: true } }
  );
  return (
    
  );
};
</div>