How to use NAMED_SHAPE method in storybook-root
Best JavaScript code snippet using storybook-root
prop-types.js
Source:prop-types.js 
1/* eslint-disable react/no-unused-prop-types */2import React from 'react';3// @ts-ignore4import PropTypes, { string, shape } from 'prop-types';5import momentPropTypes from 'react-moment-proptypes';6import { PRESET_SHAPE, SOME_PROP_TYPES } from './ext';7const NAMED_OBJECT = {8 text: PropTypes.string.isRequired,9 value: PropTypes.string.isRequired,10};11const ANOTHER_OBJECT = {12 foo: PropTypes.string,13 bar: PropTypes.string,14};15const NAMED_SHAPE = PropTypes.shape({16 foo: PropTypes.string,17});18export const POSITIONS = ['top-left', 'top-right', 'top-center'];19const FunctionalComponent = () => {20 return <div>FunctionnalComponent!</div>;21};22class ClassComponent extends React.PureComponent {23 render() {24 return <div>ClassComponent!</div>;25 }26}27function concat(a, b) {28 return a + b;29}30function customPropType() {31 return null;32}33const nestedCustomPropType = {34 custom: customPropType,35};36const SOME_INLINE_PROP_TYPES = {37 /**38 * Hey Hey!39 */40 inlineString: PropTypes.string,41 inlineBool: PropTypes.bool,42 inlineNumber: PropTypes.number,43 inlineObj: PropTypes.shape({44 foo: PropTypes.string,45 }),46 inlineArray: PropTypes.arrayOf(PropTypes.number),47 inlineArrayOfObjects: PropTypes.arrayOf({ foo: PropTypes.string }),48 inlineFunctionalElement: PropTypes.element,49 inlineFunctionalElementInline: PropTypes.element,50 inlineFunctionalElementInlineReturningNull: PropTypes.element,51 inlineHtmlElement: PropTypes.element,52 inlineFunctionalElementInlineWithProps: PropTypes.element,53 inlineFunctionalElementNamedInline: PropTypes.element,54 inlineClassElement: PropTypes.element,55 inlineClassElementWithProps: PropTypes.element,56 inlineClassElementWithChildren: PropTypes.element,57 inlineClassElementInline: PropTypes.element,58 inlineFunc: PropTypes.func,59};60const SOME_INLINE_DEFAULT_PROPS = {61 inlineString: 'Inline prop default value',62 inlineBool: true,63 inlineNumber: 10,64 inlineObj: { foo: 'bar' },65 inlineArray: [1, 2, 3],66 inlineArrayOfObjects: [67 { foo: 'bar' },68 { foo: 'bar' },69 { foo: 'bar' },70 { foo: 'bar' },71 { foo: 'bar' },72 ],73 inlineFunctionalElement: <FunctionalComponent />,74 inlineFunctionalElementInline: () => {75 return <div>Inlined FunctionnalComponent!</div>;76 },77 inlineFunctionalElementInlineReturningNull: () => {78 return null;79 },80 inlineHtmlElement: <div>Hey!</div>,81 // eslint-disable-next-line react/prop-types82 inlineFunctionalElementInlineWithProps: ({ foo }) => {83 return <div>{foo}</div>;84 },85 inlineFunctionalElementNamedInline: function InlinedFunctionalComponent() {86 return <div>Inlined FunctionnalComponent!</div>;87 },88 inlineClassElement: <ClassComponent />,89 inlineClassElementWithProps: <ClassComponent className="toto" />,90 inlineClassElementWithChildren: (91 <ClassComponent>92 <div>hey!</div>93 </ClassComponent>94 ),95 inlineClassElementInline: class InlinedClassComponent extends React.PureComponent {96 render() {97 return <div>Inlined ClassComponent!</div>;98 }99 },100 inlineFunc: function add(a, b) {101 return a + b;102 },103};104export const PropTypesProps = () => <div>PropTypes!</div>;105PropTypesProps.propTypes = {106 // eslint-disable-next-line react/forbid-prop-types107 any: PropTypes.any,108 bool: PropTypes.bool,109 string: PropTypes.string,110 func: PropTypes.func,111 /**112 * A function with JSDoc tags.113 *114 * @param {string} foo - A foo value.115 * @param {number} bar - A bar value.116 * @returns {ComplexObject} - Returns a complex object.117 */118 funcWithJsDoc: PropTypes.func,119 /**120 * @param {string} foo - A foo value.121 * @param {number} bar - A bar value.122 * @param {number} bar1 - A bar value.123 * @param {number} bar2 - A bar value.124 * @param {number} bar3 - A bar value.125 * @param {number} bar4 - A bar value.126 * @param {number} bar5 - A bar value.127 * @returns {ComplexObject} - Returns a complex object.128 */129 semiLongFuncWithJsDoc: PropTypes.func,130 /**131 * @param {string} foo - A foo value.132 * @param {number} bar - A bar value.133 * @param {number} bar1 - A bar value.134 * @param {number} bar2 - A bar value.135 * @param {number} bar3 - A bar value.136 * @param {number} bar4 - A bar value.137 * @param {number} bar5 - A bar value.138 * @param {number} bar6 - A bar value.139 * @param {number} bar7 - A bar value.140 * @param {number} bar8 - A bar value.141 * @param {number} bar9 - A bar value.142 * @param {number} bar10 - A bar value.143 * @returns {ComplexObject} - Returns a complex object.144 */145 veryLongFuncWithJsDoc: PropTypes.func,146 namedDefaultFunc: PropTypes.func,147 number: PropTypes.number,148 /**149 * Plain object propType (use shape!!)150 */151 obj: PropTypes.object, // eslint-disable-line react/forbid-prop-types152 symbol: PropTypes.symbol,153 node: PropTypes.node,154 useCustomPropType: customPropType,155 useNestedCustomPropType: nestedCustomPropType.custom,156 externalMomentPropType: momentPropTypes.momentObj,157 functionalElement: PropTypes.element,158 functionalElementInline: PropTypes.element,159 functionalElementNamedInline: PropTypes.element,160 classElement: PropTypes.element,161 classElementInline: PropTypes.element,162 functionalElementType: PropTypes.elementType,163 classElementType: PropTypes.elementType,164 elementWithProps: PropTypes.elementType,165 /**166 * `instanceOf` is also supported and the custom type will be shown instead of `instanceOf`167 */168 instanceOf: PropTypes.instanceOf(Set),169 /**170 * `oneOf` is basically an Enum which is also supported but can be pretty big.171 */172 oneOfString: PropTypes.oneOf(['News', 'Photos']),173 oneOfNumeric: PropTypes.oneOf([0, 1, 2, 3]),174 oneOfShapes: PropTypes.oneOf([175 PropTypes.shape({ foo: PropTypes.string }),176 PropTypes.shape({ bar: PropTypes.number }),177 ]),178 oneOfComplexShapes: PropTypes.oneOf([179 PropTypes.shape({180 /**181 * Just an internal propType for a shape.182 * It's also required, and as you can see it supports multi-line comments!183 */184 id: PropTypes.number.isRequired,185 /**186 * A simple non-required function187 */188 func: PropTypes.func,189 /**190 * An `arrayOf` shape191 */192 arr: PropTypes.arrayOf(193 PropTypes.shape({194 /**195 * 5-level deep propType definition and still works.196 */197 index: PropTypes.number.isRequired,198 })199 ),200 }),201 shape({ bar: PropTypes.number }),202 ]),203 oneOfComplexType: PropTypes.oneOf([NAMED_OBJECT, ANOTHER_OBJECT]),204 oneOfComponents: PropTypes.oneOf([FunctionalComponent, ClassComponent]),205 oneOfEval: PropTypes.oneOf((() => ['News', 'Photos'])()),206 oneOfVar: PropTypes.oneOf(POSITIONS),207 oneOfNested: PropTypes.oneOf(['News', ['bottom-left', 'botton-center', 'bottom-right']]),208 oneOfNestedSimpleInlineObject: PropTypes.oneOf(['News', [{ foo: PropTypes.string }]]),209 oneOfNestedComplexInlineObject: PropTypes.oneOf([210 'News',211 [{ nested: { foo: PropTypes.string } }],212 ]),213 oneOfNestedComplexShape: PropTypes.oneOf([214 'News',215 [{ nested: PropTypes.shape({ foo: PropTypes.string }) }],216 ]),217 /**218 * A multi-type prop is also valid and is displayed as `Union<String|Message>`219 */220 oneOfType: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Set)]),221 /**222 * array of a primitive type223 */224 arrayOfPrimitive: PropTypes.arrayOf(PropTypes.number),225 arrayOfNamedObject: PropTypes.arrayOf(NAMED_OBJECT),226 arrayOfShortInlineObject: PropTypes.arrayOf({227 foo: PropTypes.string,228 }),229 arrayOfInlineObject: PropTypes.arrayOf({230 text: PropTypes.string.isRequired,231 value: PropTypes.string.isRequired,232 }),233 arrayOfComplexInlineObject: PropTypes.arrayOf({234 text: PropTypes.string.isRequired,235 value: PropTypes.string.isRequired,236 shape: {237 id: PropTypes.string.isRequired,238 age: PropTypes.number.isRequired,239 },240 }),241 arrayOfShortShape: PropTypes.arrayOf(242 PropTypes.shape({243 bar: PropTypes.string,244 })245 ),246 arrayOfComplexShape: PropTypes.arrayOf(247 PropTypes.shape({248 /**249 * Just an internal propType for a shape.250 * It's also required, and as you can see it supports multi-line comments!251 */252 id: PropTypes.number.isRequired,253 /**254 * A simple non-required function255 */256 func: PropTypes.func,257 /**258 * An `arrayOf` shape259 */260 arr: PropTypes.arrayOf(261 PropTypes.shape({262 /**263 * 5-level deep propType definition and still works.264 */265 index: PropTypes.number.isRequired,266 })267 ),268 })269 ),270 arrayExternalShape: PropTypes.arrayOf(PropTypes.shape(PRESET_SHAPE)),271 /**272 * A simple `objectOf` propType.273 */274 simpleObjectOf: PropTypes.objectOf(PropTypes.number),275 objectOfShortInlineObject: PropTypes.objectOf({276 foo: PropTypes.string,277 }),278 objectOfInlineObject: PropTypes.objectOf({279 foo: PropTypes.string,280 bar: PropTypes.string,281 barry: PropTypes.string,282 }),283 objectOfShortShape: PropTypes.objectOf(284 PropTypes.shape({285 foo: string,286 })287 ),288 /**289 * A very complex `objectOf` propType.290 */291 objectOfComplexShape: PropTypes.objectOf(292 PropTypes.shape({293 /**294 * Just an internal propType for a shape.295 * It's also required, and as you can see it supports multi-line comments!296 */297 id: PropTypes.number.isRequired,298 /**299 * A simple non-required function300 */301 func: PropTypes.func,302 /**303 * An `arrayOf` shape304 */305 arr: PropTypes.arrayOf(306 PropTypes.shape({307 /**308 * 5-level deep propType definition and still works.309 */310 index: PropTypes.number.isRequired,311 })312 ),313 })314 ),315 namedObjectOf: PropTypes.objectOf(NAMED_OBJECT),316 shapeShort: PropTypes.shape({317 foo: string,318 }),319 shapeLong: PropTypes.shape({320 foo: string,321 prop1: string,322 prop2: string,323 prop3: string,324 prop4: string,325 prop5: string,326 prop6: string,327 prop7: string,328 }),329 /**330 * propType for shape with nested arrayOf331 *332 * Also, multi-line description333 */334 shapeComplex: PropTypes.shape({335 /**336 * Just an internal propType for a shape.337 * It's also required, and as you can see it supports multi-line comments!338 */339 id: PropTypes.number.isRequired,340 /**341 * A simple non-required function342 */343 func: PropTypes.func,344 /**345 * An `arrayOf` shape346 */347 arr: PropTypes.arrayOf(348 PropTypes.shape({349 /**350 * 5-level deep propType definition and still works.351 */352 index: PropTypes.number.isRequired,353 })354 ),355 shape: PropTypes.shape({356 shape: PropTypes.shape({357 foo: PropTypes.string,358 oneOf: PropTypes.oneOf(['one', 'two']),359 }),360 }),361 oneOf: PropTypes.oneOf(['one', 'two']),362 }),363 shapeWithArray: PropTypes.shape({364 arr: PropTypes.arrayOf({ foo: PropTypes.string }),365 }),366 namedShape: NAMED_SHAPE,367 namedObjectInShape: PropTypes.shape(NAMED_OBJECT),368 exact: PropTypes.exact({369 name: PropTypes.string,370 quantity: PropTypes.number,371 }),372 namedExact: PropTypes.exact(NAMED_OBJECT),373 /**374 * test string with a comment that has375 * two identical lines376 * two identical lines377 */378 optionalString: PropTypes.string,379 requiredString: PropTypes.string.isRequired,380 nullDefaultValue: PropTypes.string,381 undefinedDefaultValue: PropTypes.string,382 ...SOME_INLINE_PROP_TYPES,383 ...SOME_PROP_TYPES,384};385PropTypesProps.defaultProps = {386 any: 'Default any',387 bool: false,388 string: 'Default string',389 func: () => {},390 funcWithJsDoc: (foo, bar) => {391 // eslint-disable-next-line392 const yo = window.document;393 // eslint-disable-next-line394 const pouf = souffle;395 return { foo, bar };396 },397 namedDefaultFunc: concat,398 number: 5,399 obj: {400 key: 'value',401 },402 symbol: Symbol('Default symbol'),403 node: <div>Hello!</div>,404 functionalElement: <FunctionalComponent className="toto" />,405 functionalElementInline: () => {406 return <div>Inlined FunctionnalComponent!</div>;407 },408 functionalElementNamedInline: function InlinedFunctionalComponent() {409 return <div>Inlined FunctionnalComponent!</div>;410 },411 classElement: <ClassComponent />,412 classElementInline: class InlinedClassComponent extends React.PureComponent {413 render() {414 return <div>Inlined ClassComponent!</div>;415 }416 },417 functionalElementType: FunctionalComponent,418 classElementType: ClassComponent,419 elementWithProps: <ClassComponent className="w8 h8 fill-marine-500" />,420 instanceOf: new Set(),421 oneOfString: 'News',422 oneOfNumeric: 1,423 oneOfShapes: { foo: 'bar' },424 oneOfComplexShapes: {425 thing: {426 id: 2,427 func: () => {},428 arr: [],429 },430 },431 oneOfComplexType: { text: 'foo', value: 'bar' },432 oneOfComponents: <FunctionalComponent />,433 oneOfEval: 'Photos',434 oneOfVar: 'top-right',435 oneOfNested: 'top-right',436 oneOfType: 'hello',437 arrayOfPrimitive: [1, 2, 3],438 arrayOfString: ['0px', '0px'],439 arrayOfNamedObject: [{ text: 'foo', value: 'bar' }],440 arrayOfShortInlineObject: [{ foo: 'bar' }],441 arrayOfInlineObject: [{ text: 'foo', value: 'bar' }],442 arrayOfComplexInlineObject: [{ text: 'foo', value: 'bar' }],443 arrayOfShortShape: [{ bar: 'foo' }],444 arrayOfComplexShape: [445 {446 thing: {447 id: 2,448 func: () => {},449 arr: [],450 },451 },452 ],453 simpleObjectOf: { key: 1 },454 objectOfShortInlineObject: { foo: 'bar' },455 objectOfInlineObject: { foo: 'bar', bar: 'foo' },456 objectOfShortShape: { foo: 'bar' },457 objectOfComplexShape: {458 thing: {459 id: 2,460 func: () => {},461 arr: [],462 },463 },464 namedObjectOf: { text: 'foo', value: 'bar' },465 shapeShort: { foo: 'bar' },466 shapeComplex: {467 id: 3,468 func: () => {},469 arr: [],470 shape: {471 shape: {472 foo: 'bar',473 },474 },475 },476 namedShape: { foo: 'bar' },477 namedObjectInShape: { text: 'foo', value: 'bar' },478 exact: { name: 'foo', quantity: 2 },479 namedExact: { text: 'foo', value: 'bar' },480 optionalString: 'Default String',481 nullDefaultValue: null,482 undefinedDefaultValue: undefined,483 ...SOME_INLINE_DEFAULT_PROPS,...
Using AI Code Generation
1import React from 'react';2import { storiesOf } from '@storybook/react';3import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';4import { withInfo } from '@storybook/addon-info';5import { action } from '@storybook/addon-actions';6import { Button } from '@storybook/react/demo';7storiesOf('Button', module)8 .addDecorator(withKnobs)9 .add('with text', () => (10 <Button onClick={action('clicked')}>{text('Label', 'Hello Button')}</Button>11 .add('with some emoji', () => (12 <Button onClick={action('clicked')}>13 {text('Label', 'π π π π―')}14 .add('with some emoji and action', () => (15 <Button onClick={action('this was clicked')}>16 {text('Label', 'π π π π―')}17 .add('with some emoji and action', () => (18 <Button onClick={action('this was clicked')}>19 {text('Label', 'π π π π―')}20 .add('with some emoji and action', () => (21 <Button onClick={action('this was clicked')}>22 {text('Label', 'π π π π―')}23 ));24import { configure } from '@storybook/react';25import { addParameters } from '@storybook/react';26import { setOptions } from '@storybook/addon-options';27import { setDefaults } from '@storybook/addon-info';28import { setOptions as setOptionsKnobs } from '@storybook/addon-knobs';29import { setDefaults as setDefaultsKnobs } from '@storybook/addon-knobs';30import { setDefaults as setDefaultsActions } from '@storybook/addon-actions';31setOptions({
Using AI Code Generation
1import { NAMED_SHAPE } from 'storybook-root'2import { NAMED_SHAPE } from 'storybook-root'3import { NAMED_SHAPE } from 'storybook-root'4import { NAMED_SHAPE } from 'storybook-root'5import { NAMED_SHAPE } from 'storybook-root'6import { NAMED_SHAPE } from 'storybook-root'7import { NAMED_SHAPE } from 'storybook-root'8import { NAMED_SHAPE } from 'storybook-root'9import { NAMED_SHAPE } from 'storybook-root'10import { NAMED_SHAPE } from 'storybook-root'11import { NAMED_SHAPE } from 'storybook-root'12import { NAMED_SHAPE } from 'storybook-root'13import { NAMED_SHAPE } from 'storybook-root'14import { NAMED_SHAPE } from 'storybook-root'15import { NAMED_SHAPE } from 'storybook-root'16import { NAMED_SHAPE } from 'storybook-root'17import { NAMED_SHAPE } from 'storybook-root'18import { NAMED_SHAPE } from 'storybook-root'19import { NAMED_SHAPE } from 'storybook-root'20import { NAMED_SHAPE } from 'storybook-root'
Using AI Code Generation
1import { NAMED_SHAPE } from "storybook-root";2import { NAMED_SHAPE } from "storybook-root";3const { NAMED_SHAPE } = require("storybook-root");4const { NAMED_SHAPE } = require("storybook-root");5import { NAMED_SHAPE } from "storybook-root";6import { NAMED_SHAPE } from "storybook-root";7const { NAMED_SHAPE } = require("storybook-root");8const { NAMED_SHAPE } = require("storybook-root");9import { NAMED_SHAPE } from "storybook-root";10import { NAMED_SHAPE } from "storybook-root";11const { NAMED_SHAPE } = require("storybook-root");12const { NAMED_SHAPE } = require("storybook-root");13import { NAMED_SHAPE } from "storybook-root";14import { NAMED_SHAPE } from "storybook-root";15const { NAMED_SHAPE } = require("storybook-root");16const { NAMED_SHAPE } = require("storybook-root");17import { NAMED_SHAPE } from "storybook-root";18import { NAMED_SHAPE } from "storybook-root";19const { NAMED_SHAPE } = require("storybook-root");20const { NAMED_SHAPE } = require("storybook-root");21import { NAMED_SHAPE } from "storybook-root";22import { NAMED_SHAPE } from "storybook-root";23const { NAMED_SHAPE } = require("storybook-root");24const { NAMED_SHAPE } = require("storybook-root");25import { NAMED_SHAPE } from "storybook-root";26import { NAMED_SHAPE } from "storybook-root";27const { NAMED_SHAPE } = require("storybook-root");28const { NAMED_SHAPE } = require("storybook-root");
Using AI Code Generation
1import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';2export default {3 parameters: {4 },5};6export const test = () => {7 const name = text('name', 'John Doe');8 const age = number('age', 44);9 const content = `I am ${name} and I'm ${age} years old.`;10 return {11 template: '<div>{{content}}</div>',12 props: {13 content: {14 },15 },16 };17};18import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';19import { test } from './test';20module.exports = {21 module: {22 {23 {24 },25 {26 },27 },28 },29};30Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):31ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):32SyntaxError: /Users/.../src/preview.js: Unexpected token (1:0)33> 1 | .storybook {34 2 | height: 100%;35 3 | width: 100%;36 4 | display: flex;
Using AI Code Generation
1import { NAMED_SHAPE } from 'storybook-root';2import { storiesOf } from '@storybook/react';3storiesOf('My Component', module)4 .add('my story', () => (5 ));6import React from 'react';7export default function Shape() {8 return <div>Shape</div>;9}10import Shape from './shape';11export { Shape };12import React from 'react';13import ReactDOM from 'react-dom';14import { Shape } from './components';15ReactDOM.render(<Shape />, document.getElementById('root'));16import { configure } from '@storybook/react';17import { setOptions } from '@storybook/addon-options';18import { setDefaults } from 'storybook-root';19setOptions({
Using AI Code Generation
1import { NAMED_SHAPE } from 'storybook-root';2const test = () => {3 const namedShape = NAMED_SHAPE.get('myNamedShape');4 return namedShape;5};6export default test;7import { NAMED_SHAPE } from 'storybook-root';8import test from './test';9describe('test', () => {10 it('should return named shape', () => {11 const namedShape = NAMED_SHAPE.get('myNamedShape');12 const result = test();13 expect(result).toEqual(namedShape);14 });15});16jest.mock('storybook-root', () => ({17 NAMED_SHAPE: {18 get: jest.fn(),19 },20}));21describe('test', () => {22 const namedShape = 'namedShape';23 beforeEach(() => {24 NAMED_SHAPE.get.mockReturnValue(namedShape);25 });26 it('should return named shape', () => {27 const result = test();28 expect(result).toEqual(namedShape);29 });30});
Using AI Code Generation
1import { NAMED_SHAPE } from 'storybook-root'2NAMED_SHAPE.addNamedShape('test', 'test')3export default {4}5export const test = () => {6}7import { NAMED_SHAPE } from 'storybook-root'8NAMED_SHAPE.addNamedShape('test', 'test')9export default {10}11export const storybookRoot = () => {12}13import { NAMED_SHAPE } from 'storybook-root'14NAMED_SHAPE.addNamedShape('test', 'test')15export default {16}17export const storybookRoot = () => {18}
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
