How to use storyContext method in storybook-root

Best JavaScript code snippet using storybook-root

example.jsx

Source: example.jsx Github

copy

Full Screen

1/​/​ Copyright (c) 2015-present, salesforce.com, inc. All rights reserved2/​/​ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/​sfdc-license3import React from 'react';4import { FormElement, Fieldset } from '../​';5import Input from '../​../​input/​';6import { Textarea } from '../​../​textarea/​base/​example';7import { Checkbox } from '../​../​checkbox/​base/​example';8import { Radio } from '../​../​radio-group/​base/​example';9const storyContext = 'Base';10const inputLabel = 'Form Element Label';11const errorId = 'error-message-unique-id';12export default [13 {14 id: 'default',15 label: `${storyContext} - Default`,16 context: `${storyContext}`,17 element: (18 <FormElement labelContent={inputLabel} inputId="input-unique-id-01">19 <Input id="input-unique-id-01" /​>20 </​FormElement>21 ),22 },23];24export let states = [25 {26 id: 'required',27 label: `${storyContext} - Required`,28 context: `${storyContext}`,29 element: (30 <FormElement31 labelContent={inputLabel}32 inputId="input-unique-id-02"33 isRequired34 >35 <Input id="input-unique-id-02" required /​>36 </​FormElement>37 ),38 },39 {40 id: 'error',41 label: `${storyContext} - Error`,42 context: `${storyContext}`,43 element: (44 <FormElement45 labelContent={inputLabel}46 inputId="input-unique-id-03"47 errorId={errorId}48 isRequired49 hasError50 inlineMessage="This field is required"51 >52 <Input id="input-unique-id-03" required aria-describedby={errorId} /​>53 </​FormElement>54 ),55 },56 {57 id: 'checkbox-required',58 label: `${storyContext} - Checkbox - Required`,59 context: `${storyContext}`,60 element: (61 <FormElement>62 <Checkbox label="Checkbox Label" isRequired /​>63 </​FormElement>64 ),65 },66 {67 id: 'checkbox-required-help-text',68 label: `${storyContext} - Checkbox - Required (help text icon)`,69 context: `${storyContext}`,70 element: (71 <FormElement>72 <Checkbox label="Checkbox Label" isRequired hasTooltip /​>73 </​FormElement>74 ),75 },76 {77 id: 'checkbox-group-required',78 label: `${storyContext} - Checkbox Group (Required)`,79 context: `${storyContext}`,80 element: (81 <Fieldset label="Form Element Legend" isRequired>82 <Checkbox label="Checkbox Label" /​>83 <Checkbox label="Checkbox Label" /​>84 </​Fieldset>85 ),86 },87 {88 id: 'checkbox-group-required-help-text',89 label: `${storyContext} - Checkbox Group (Required with help text icon)`,90 context: `${storyContext}`,91 element: (92 <Fieldset93 id="fieldset-with-help-text"94 label="Form Element Legend"95 isRequired96 hasTooltip97 >98 <Checkbox label="Checkbox Label" /​>99 <Checkbox label="Checkbox Label" /​>100 </​Fieldset>101 ),102 },103 {104 id: 'radio-group-required',105 label: `${storyContext} - Radio Group (Required)`,106 context: `${storyContext}`,107 element: (108 <Fieldset label="Form Element Label" isRequired>109 <Radio checked label="Radio Label One" /​>110 <Radio label="Radio Label Two" /​>111 </​Fieldset>112 ),113 },114 {115 id: 'radio-group-required-help-text',116 label: `${storyContext} - Radio Group (Required with help text icon)`,117 context: `${storyContext}`,118 element: (119 <Fieldset120 id="fieldset-with-help-text"121 label="Form Element Label"122 isRequired123 hasTooltip124 >125 <Radio checked label="Radio Label One" /​>126 <Radio label="Radio Label Two" /​>127 </​Fieldset>128 ),129 },130 {131 id: 'required-tooltip-help',132 label: `${storyContext} - Tooltip Help (Required)`,133 context: `${storyContext}`,134 demoStyles: `padding-top: 3rem; position: relative`,135 storybookStyles: true,136 element: (137 <FormElement138 labelContent={inputLabel}139 inputId="input-unique-id-04"140 hasTooltip141 showTooltip142 isRequired143 >144 <Input id="input-unique-id-04" required /​>145 </​FormElement>146 ),147 },148];149export let examples = [150 {151 id: 'input',152 label: `${storyContext} - Input`,153 context: `${storyContext}`,154 element: (155 <FormElement labelContent={inputLabel} inputId="input-unique-id-05">156 <Input id="input-unique-id-05" /​>157 </​FormElement>158 ),159 },160 {161 id: 'textarea',162 label: `${storyContext} - Textarea`,163 context: `${storyContext}`,164 element: (165 <FormElement labelContent={inputLabel} inputId="input-unique-id-06">166 <Textarea id="input-unique-id-06" /​>167 </​FormElement>168 ),169 },170 {171 id: 'checkbox',172 label: `${storyContext} - Checkbox`,173 context: `${storyContext}`,174 element: (175 <FormElement>176 <Checkbox label="Checkbox Label" /​>177 </​FormElement>178 ),179 },180 {181 id: 'checkbox-group',182 label: `${storyContext} - Checkbox Group`,183 context: `${storyContext}`,184 element: (185 <Fieldset label="Form Element Legend">186 <Checkbox label="Checkbox Label" /​>187 <Checkbox label="Checkbox Label" /​>188 </​Fieldset>189 ),190 },191 {192 id: 'radio-group',193 label: `${storyContext} - Radio Group`,194 context: `${storyContext}`,195 element: (196 <Fieldset label="Form Element Label">197 <Radio checked label="Radio Label One" /​>198 <Radio label="Radio Label Two" /​>199 </​Fieldset>200 ),201 },202 {203 id: 'inline-help',204 label: `${storyContext} - Inline Help`,205 context: `${storyContext}`,206 element: (207 <FormElement208 labelContent={inputLabel}209 inputId="input-unique-id-07"210 inlineMessage="ex: (415)111-2222"211 >212 <Input id="input-unique-id-07" /​>213 </​FormElement>214 ),215 },216 {217 id: 'tooltip-help',218 label: `${storyContext} - Tooltip Help`,219 context: `${storyContext}`,220 demoStyles: `padding-top: 3px; position: relative`,221 storybookStyles: true,222 element: (223 <FormElement224 labelContent={inputLabel}225 inputId="input-unique-id-08"226 hasTooltip227 showTooltip228 >229 <Input id="input-unique-id-08" /​>230 </​FormElement>231 ),232 },...

Full Screen

Full Screen

index.ts

Source: index.ts Github

copy

Full Screen

1/​* eslint-disable prefer-destructuring */​2import { ComponentOptions, defineComponent, h, Component } from 'vue';3const { start } = require('@storybook/​core/​client')4import {5 ClientStoryApi,6 StoryFn,7 DecoratorFunction,8 StoryContext,9 Loadable,10} from '@storybook/​addons';11import './​globals';12import { IStorybookSection, StoryFnVueReturnType } from './​types';13import render, { propsContainer } from './​render';14import { extractProps } from './​util';15function prepare(16 rawStory: StoryFnVueReturnType,17 innerStory?: ComponentOptions18): Component | null {19 let story: ComponentOptions;20 if (typeof rawStory === 'string') {21 story = { template: rawStory } as ComponentOptions;22 } else if (rawStory != null) {23 story = rawStory;24 } else {25 return null;26 }27 /​/​ @ts-ignore28 /​/​ eslint-disable-next-line no-underscore-dangle29 if (innerStory) {30 story.components = { story: innerStory }31 return story32 }33 propsContainer.props = extractProps(story.props)34 return defineComponent({35 render() {36 return h(story, propsContainer.props)37 }38 })39}40const defaultContext: StoryContext = {41 id: 'unspecified',42 name: 'unspecified',43 kind: 'unspecified',44 parameters: {},45 args: {},46 argTypes: {},47 globals: {},48};49function decorateStory(50 storyFn: StoryFn<StoryFnVueReturnType>,51 decorators: DecoratorFunction<any>[]52): StoryFn<any> {53 const result = decorators.reduce(54 (decorated: StoryFn<any>, decorator) => (context: StoryContext = defaultContext) => {55 let story;56 const decoratedStory = decorator(57 ({ parameters, ...innerContext }: StoryContext = {} as StoryContext) => {58 story = decorated({ ...context, ...innerContext });59 return story;60 },61 context62 );63 if (!story) {64 story = decorated(context);65 }66 if (decoratedStory === story) {67 return story;68 }69 return prepare(decoratedStory, story);70 },71 (context) => prepare(storyFn(context))72 );73 return result74}75const framework = 'vue3';76interface ClientApi extends ClientStoryApi<StoryFnVueReturnType> {77 setAddon(addon: any): void;78 configure(loader: Loadable, module: NodeModule): void;79 getStorybook(): IStorybookSection[];80 clearDecorators(): void;81 forceReRender(): void;82 raw: () => any; /​/​ todo add type83 load: (...args: any[]) => void;84}85const api = start(render, { decorateStory });86export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {87 return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({88 framework,89 });90};91export const configure: ClientApi['configure'] = (...args) => api.configure(framework, ...args);92export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;93export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;94export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;95export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;96export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;97export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;...

Full Screen

Full Screen

index.js

Source: index.js Github

copy

Full Screen

1/​/​ pages/​startstory/​index.js2const db = wx.cloud.database()3Page({4 context:[],5 src:[],6 data: {7 member:[],8 type:'',9 text:"",10 src:"",11 currentsrc:0,12 currenttext:0,13 finish:"继续"14 },15 16 onLoad: function (options) {17 18 19 const {index}=options20 const { group } = options21 let storycontext = wx.getStorageSync('storycontext')22 if (!storycontext){23 wx.showLoading({24 title: '加载中',25 })26 console.log("组名",group,"第几段",index)27 wx.cloud.callFunction({28 name:'getonedb',29 data:{30 name:'storycontext'31 }32 }).then(res=>{33 console.log("云端读取剧情",res)34 wx.setStorageSync('storycontext', res.result.data)35 let story=this.select(group,index,res.result.data)36 console.log(story)37 this.context=story.context38 this.src=story.src39 var type40 if(!this.context[0].type){41 type=042 }else{43 type=this.context[0].type44 }45 this.setData({46 member:story.member,47 type:type,48 text:this.context[0].text,49 src:this.src[0]50 })51 wx.hideLoading()52 })53 }else{54 console.log("本地存储剧情")55 let story = this.select(group, index, storycontext)56 this.context = story.context57 this.src = story.src58 var type59 if (!story.type) {60 type = 061 } else {62 type =story.type63 }64 this.setData({65 member: story.member,66 type: type,67 text: this.context[0].text,68 src: this.src[0]69 })70 71 }72 },73 select(group,index,storycontext) {74 console.log(storycontext)75 function has(element) {76 return (element.group == group && element.index == index)77 }78 let story = storycontext.filter(has)79 console.log(story)80 return story[0]81 },82 next(){83 if(this.data.finish=="已结束"){84 wx.navigateBack({85 86 })87 }else{88 var currenttext=this.data.currenttext89 if(currenttext==this.context.length-1){90 this.setData({91 finish:"已结束"92 })93 }else{94 let currentcontext = this.context[currenttext + 1]95 96 var type97 if(!currentcontext.type){98 type=099 }else{100 101 type=currentcontext.type102 console.log("对话", type)103 }104 if(currentcontext.change){105 console.log("换背景")106 var currentsrc = this.data.currentsrc107 this.setData({108 src:this.src[currentsrc+1],109 currentsrc:currentsrc+1,110 text:currentcontext.text,111 currenttext:currenttext+1,112 type:type113 })114 }else{115 this.setData({116 text: currentcontext.text,117 currenttext: currenttext + 1,118 type: type119 })120 }121 }122 }123 },124 onShareAppMessage: function () {125 return {126 title: '我在 <HMH48抽抽抽> 中解锁了剧情',/​/​分享内容127 path: '/​pages/​index/​index',/​/​分享地址128 }129 },...

Full Screen

Full Screen

Blogs

Check out the latest blogs from LambdaTest on this topic:

Oct’22 Updates: New Analytics And App Automation Dashboard, Test On Google Pixel 7 Series, And More

Hey everyone! We hope you had a great Hacktober. At LambdaTest, we thrive to bring you the best with each update. Our engineering and tech teams work at lightning speed to deliver you a seamless testing experience.

Now Log Bugs Using LambdaTest and DevRev

In today’s world, an organization’s most valuable resource is its customers. However, acquiring new customers in an increasingly competitive marketplace can be challenging while maintaining a strong bond with existing clients. Implementing a customer relationship management (CRM) system will allow your organization to keep track of important customer information. This will enable you to market your services and products to these customers better.

How To Run Cypress Tests In Azure DevOps Pipeline

When software developers took years to create and introduce new products to the market is long gone. Users (or consumers) today are more eager to use their favorite applications with the latest bells and whistles. However, users today don’t have the patience to work around bugs, errors, and design flaws. People have less self-control, and if your product or application doesn’t make life easier for users, they’ll leave for a better solution.

How to Position Your Team for Success in Estimation

Estimates are critical if you want to be successful with projects. If you begin with a bad estimating approach, the project will almost certainly fail. To produce a much more promising estimate, direct each estimation-process issue toward a repeatable standard process. A smart approach reduces the degree of uncertainty. When dealing with presales phases, having the most precise estimation findings can assist you to deal with the project plan. This also helps the process to function more successfully, especially when faced with tight schedules and the danger of deviation.

How To Write End-To-End Tests Using Cypress App Actions

When I started writing tests with Cypress, I was always going to use the user interface to interact and change the application’s state when running tests.

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:

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!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful