Best JavaScript code snippet using storybook-root
example.jsx
Source: example.jsx
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 },...
index.ts
Source: index.ts
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;...
index.js
Source: index.js
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 },...
Check out the latest blogs from LambdaTest on this topic:
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.
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.
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.
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.
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.
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.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!