How to use fullAPI method in storybook-root

Best JavaScript code snippet using storybook-root

shortcuts.ts

Source:shortcuts.ts Github

copy

Full Screen

1import { navigator, document } from 'global';2import { PREVIEW_KEYDOWN } from '@storybook/core-events';3import { Module, API } from '../index';4import { shortcutMatchesShortcut, eventToShortcut } from '../lib/shortcut';5import { focusableUIElements } from './layout';6export const isMacLike = () =>7 navigator && navigator.platform ? !!navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) : false;8export const controlOrMetaKey = () => (isMacLike() ? 'meta' : 'control');9export function keys<O>(o: O) {10 return Object.keys(o) as (keyof O)[];11}12export interface SubState {13 shortcuts: Shortcuts;14}15export interface SubAPI {16 getShortcutKeys(): Shortcuts;17 setShortcuts(shortcuts: Shortcuts): Promise<Shortcuts>;18 setShortcut(action: Action, value: KeyCollection): Promise<KeyCollection>;19 restoreAllDefaultShortcuts(): Promise<Shortcuts>;20 restoreDefaultShortcut(action: Action): Promise<KeyCollection>;21 handleKeydownEvent(api: API, event: Event): void;22 handleShortcutFeature(api: API, feature: Action): void;23}24export type KeyCollection = string[];25export interface Shortcuts {26 fullScreen: KeyCollection;27 togglePanel: KeyCollection;28 panelPosition: KeyCollection;29 toggleNav: KeyCollection;30 toolbar: KeyCollection;31 search: KeyCollection;32 focusNav: KeyCollection;33 focusIframe: KeyCollection;34 focusPanel: KeyCollection;35 prevComponent: KeyCollection;36 nextComponent: KeyCollection;37 prevStory: KeyCollection;38 nextStory: KeyCollection;39 shortcutsPage: KeyCollection;40 aboutPage: KeyCollection;41 escape: KeyCollection;42 collapseAll: KeyCollection;43 expandAll: KeyCollection;44}45export type Action = keyof Shortcuts;46export const defaultShortcuts: Shortcuts = Object.freeze({47 fullScreen: ['F'],48 togglePanel: ['A'],49 panelPosition: ['D'],50 toggleNav: ['S'],51 toolbar: ['T'],52 search: ['/'],53 focusNav: ['1'],54 focusIframe: ['2'],55 focusPanel: ['3'],56 prevComponent: ['alt', 'ArrowUp'],57 nextComponent: ['alt', 'ArrowDown'],58 prevStory: ['alt', 'ArrowLeft'],59 nextStory: ['alt', 'ArrowRight'],60 shortcutsPage: [controlOrMetaKey(), 'shift', ','],61 aboutPage: [','],62 escape: ['escape'], // This one is not customizable63 collapseAll: [controlOrMetaKey(), 'shift', 'ArrowUp'],64 expandAll: [controlOrMetaKey(), 'shift', 'ArrowDown'],65});66export interface Event extends KeyboardEvent {67 target: {68 tagName: string;69 addEventListener(): void;70 removeEventListener(): boolean;71 dispatchEvent(event: Event): boolean;72 getAttribute(attr: string): string | null;73 };74}75export default function initShortcuts({ store }: Module) {76 const api: SubAPI = {77 // Getting and setting shortcuts78 getShortcutKeys(): Shortcuts {79 return store.getState().shortcuts;80 },81 async setShortcuts(shortcuts: Shortcuts) {82 await store.setState({ shortcuts }, { persistence: 'permanent' });83 return shortcuts;84 },85 async restoreAllDefaultShortcuts() {86 return api.setShortcuts(defaultShortcuts);87 },88 async setShortcut(action, value) {89 const shortcuts = api.getShortcutKeys();90 await api.setShortcuts({ ...shortcuts, [action]: value });91 return value;92 },93 async restoreDefaultShortcut(action) {94 const defaultShortcut = defaultShortcuts[action];95 return api.setShortcut(action, defaultShortcut);96 },97 // Listening to shortcut events98 handleKeydownEvent(fullApi, event) {99 const shortcut = eventToShortcut(event);100 const shortcuts = api.getShortcutKeys();101 const actions = keys(shortcuts);102 const matchedFeature = actions.find((feature: Action) =>103 shortcutMatchesShortcut(shortcut, shortcuts[feature])104 );105 if (matchedFeature) {106 api.handleShortcutFeature(fullApi, matchedFeature);107 }108 },109 handleShortcutFeature(fullApi, feature) {110 const {111 layout: { isFullscreen, showNav, showPanel },112 ui: { enableShortcuts },113 } = store.getState();114 if (!enableShortcuts) {115 return;116 }117 switch (feature) {118 case 'escape': {119 if (isFullscreen) {120 fullApi.toggleFullscreen();121 } else if (!showNav) {122 fullApi.toggleNav();123 }124 break;125 }126 case 'focusNav': {127 if (isFullscreen) {128 fullApi.toggleFullscreen();129 }130 if (!showNav) {131 fullApi.toggleNav();132 }133 fullApi.focusOnUIElement(focusableUIElements.storyListMenu);134 break;135 }136 case 'search': {137 if (isFullscreen) {138 fullApi.toggleFullscreen();139 }140 if (!showNav) {141 fullApi.toggleNav();142 }143 setTimeout(() => {144 fullApi.focusOnUIElement(focusableUIElements.storySearchField);145 }, 0);146 break;147 }148 case 'focusIframe': {149 const element = document.getElementById('storybook-preview-iframe');150 if (element) {151 try {152 // should be like a channel message and all that, but yolo for now153 element.contentWindow.focus();154 } catch (e) {155 //156 }157 }158 break;159 }160 case 'focusPanel': {161 if (isFullscreen) {162 fullApi.toggleFullscreen();163 }164 if (!showPanel) {165 fullApi.togglePanel();166 }167 fullApi.focusOnUIElement(focusableUIElements.storyPanelRoot);168 break;169 }170 case 'nextStory': {171 fullApi.jumpToStory(1);172 break;173 }174 case 'prevStory': {175 fullApi.jumpToStory(-1);176 break;177 }178 case 'nextComponent': {179 fullApi.jumpToComponent(1);180 break;181 }182 case 'prevComponent': {183 fullApi.jumpToComponent(-1);184 break;185 }186 case 'fullScreen': {187 fullApi.toggleFullscreen();188 break;189 }190 case 'togglePanel': {191 if (isFullscreen) {192 fullApi.toggleFullscreen();193 fullApi.resetLayout();194 }195 fullApi.togglePanel();196 break;197 }198 case 'toggleNav': {199 if (isFullscreen) {200 fullApi.toggleFullscreen();201 fullApi.resetLayout();202 }203 fullApi.toggleNav();204 break;205 }206 case 'toolbar': {207 fullApi.toggleToolbar();208 break;209 }210 case 'panelPosition': {211 if (isFullscreen) {212 fullApi.toggleFullscreen();213 }214 if (!showPanel) {215 fullApi.togglePanel();216 }217 fullApi.togglePanelPosition();218 break;219 }220 case 'aboutPage': {221 fullApi.navigate('/settings/about');222 break;223 }224 case 'shortcutsPage': {225 fullApi.navigate('/settings/shortcuts');226 break;227 }228 case 'collapseAll': {229 fullApi.collapseAll();230 break;231 }232 case 'expandAll': {233 fullApi.expandAll();234 break;235 }236 default:237 break;238 }239 },240 };241 const { shortcuts: persistedShortcuts = defaultShortcuts }: SubState = store.getState();242 const state: SubState = {243 // Any saved shortcuts that are still in our set of defaults244 shortcuts: keys(defaultShortcuts).reduce(245 (acc, key) => ({ ...acc, [key]: persistedShortcuts[key] || defaultShortcuts[key] }),246 defaultShortcuts247 ),248 };249 const init = ({ api: fullApi }: API) => {250 function focusInInput(event: Event) {251 return (252 /input|textarea/i.test(event.target.tagName) ||253 event.target.getAttribute('contenteditable') !== null254 );255 }256 // Listen for keydown events in the manager257 document.addEventListener('keydown', (event: Event) => {258 if (!focusInInput(event)) {259 fullApi.handleKeydownEvent(fullApi, event);260 }261 });262 // Also listen to keydown events sent over the channel263 fullApi.on(PREVIEW_KEYDOWN, (data: { event: Event }) => {264 fullApi.handleKeydownEvent(fullApi, data.event);265 });266 };267 const result = { api, state, init };268 return result;...

Full Screen

Full Screen

PhalApi.js

Source:PhalApi.js Github

copy

Full Screen

1/**2 * PhalApi框架 JS请求SDK3 *4 * "猫了_个咪"提供,博客地址w-blog.cn5 * 有好的意见或建议请联系我-><wenzhenxi@vip.qq.com> 2015-10-206 *7 * 分为3种请求方式:get,post和get_jsonp8 *9 * 所有请求均统一传递4个参数值(请求地址,接口名称.请求参数GET传递拼接好的参数10 * Post传递数组key-value值,回调函数)11 *12 * 统一使用方式如下13 * var url = '';14 * var api = '';15 * var data = '';16 * query_get(url, api, data, function(rs){17 * //回调函数 rs为返回结果已经反json化18 * if(rs.ret == 200){19 * 成功处理20 * }else{21 * 失败处理22 * }23 * });24 *25 */26//-------------------------------配置项------------------------------------27var debug = true; //调试模式28//-------------------------------配置项------------------------------------29/**30 * 普通的post请求方法31 **/32function query_post(api_url, api_name, data, callback){33 //拼接请求的URL地址34 var fullapi = api_url + '?service=' + api_name;35 //执行请求36 $.ajax({37 url : fullapi, //请求地址38 method : 'POST', //请求方式39 crossDomain: true,40 data : data, //请求参数41 complete : function(rs){42 //反Json化43 rs = JSON.parse(rs.response || rs.responseText);44 //把返回结果返回到控制台(debug模式自动开启)45 if(debug == true){46 console.log(fullapi, 'back', rs);47 }48 //回调函数49 callback(rs);50 }51 });52}53/**54 * 普通的get请求方法55 **/56function query_get(api_url, api_name, data, callback){57 //拼接请求的URL地址58 var fullapi = api_url + '?service=' + api_name + data;59 //执行请求60 $.ajax({61 url : fullapi, //请求地址62 method : 'GET', //请求方式63 complete: function(rs){64 //反Json化65 rs = JSON.parse(rs.response || rs.responseText);66 //把返回结果返回到控制台(debug模式自动开启)67 if(debug == true){68 console.log(fullapi, 'back', rs);69 }70 //回调函数71 callback(rs);72 }73 });74}75/**76 * JsonP请求方法(用于跨域请求,只能进行get请求)77 **/78function query_jsonp(api_url, api_name, data, callback){79 //拼接请求的URL地址(&callback=1是Phalapi默认使用JsonP格式)80 var fullapi = api_url + '?service=' + api_name + '&callback=1' + data;81 //执行请求82 $.ajax({83 type : "get",84 async : false,85 url : fullapi, //请求参数86 dataType: "jsonp",87 jsonp : "callback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)88 success : function(rs){89 //把返回结果返回到控制台(debug模式自动开启)90 if(debug == true){91 console.log(fullapi, 'back', rs);92 }93 //回调函数94 callback(rs);95 },96 error : function(error){97 alert('fail');98 }99 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { addDecorator } from "@storybook/react";2import { withFullAPI } from "storybook-root-decorator";3addDecorator(withFullAPI);4import { addDecorator } from "@storybook/react";5import { withCustomDecorator } from "storybook-root-decorator";6addDecorator(withCustomDecorator);7import { addDecorator } from "@storybook/react";8import { withCustomDecoratorWithProps } from "storybook-root-decorator";9addDecorator(withCustomDecoratorWithProps);10import { addDecorator } from "@storybook/react";11import { withCustomDecoratorWithPropsAndContext } from "storybook-root-decorator";12addDecorator(withCustomDecoratorWithPropsAndContext);13import { addDecorator } from "@storybook/react";14import { withCustomDecoratorWithPropsContextAndFullAPI } from "storybook-root-decorator";15addDecorator(withCustomDecoratorWithPropsContextAndFullAPI

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { fullAPI } from 'storybook-root-decorator';4const stories = storiesOf('Test', module);5stories.add('test', () => (6));7fullAPI(stories);8MIT © [kylemcdonald](

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { addDecorator } from "@storybook/react";2import { withRootDecorator } from "storybook-root-decorator";3addDecorator(withRootDecorator);4import { addDecorator } from "@storybook/react";5import { muiTheme } from "storybook-addon-material-ui";6import theme from "./theme";7addDecorator(muiTheme([theme]));

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { fullAPI } from 'storybook-root';2fullAPI()3 .then(api => console.log(api))4 .catch(error => console.error(error));5import { fullAPI } from 'storybook-root';6fullAPI()7 .then(api => console.log(api))8 .catch(error => console.error(error));9### `fullAPI()`10### `storybookRoot()`11Returns the path to the root directory of the Storybook instance. This is useful for importing modules from the Storybook instance, for example:12import { storybookRoot } from 'storybook-root';13const { fullAPI } = require(`${storybookRoot()}/lib/api`);14fullAPI()15 .then(api => console.log(api))16 .catch(error => console.error(error));17### `storybookVersion()`18If you have any questions or suggestions, feel free to [open an issue](

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { addDecorator } from '@storybook/react';2import { withRootDecorator } from 'storybook-root-decorator';3addDecorator(withRootDecorator);4import { addDecorator } from '@storybook/react';5import { addWrapper } from 'storybook-root-decorator';6import { Provider } from 'react-redux';7const store = createStore();8addDecorator(addWrapper(Provider, { store }));9import { addDecorator } from '@storybook/react';10import { addWrapper } from 'storybook-root-decorator';11import { Provider } from 'react-redux';12import { ThemeProvider } from 'styled-components';13const store = createStore();14const theme = { color: 'red' };15addDecorator(addWrapper(Provider, { store }));16addDecorator(addWrapper(ThemeProvider, { theme }));17import { addDecorator } from '@storybook/react';18import { addWrapper } from 'storybook-root-decorator';19import { Provider } from 'react-redux';20import { ThemeProvider } from 'styled-components';21const store = createStore();22const theme = { color: 'red' };23addDecorator(addWrapper(Provider, { store }, 'ReduxProvider'));24addDecorator(addWrapper(ThemeProvider, { theme }, 'StyledComponentsThemeProvider'));25import { addDecorator } from '@storybook/react';26import { addWrapper } from 'storybook-root-decorator';27import { Provider } from 'react-redux';28import { ThemeProvider } from 'styled-components';29const store = createStore();30const theme = { color: 'red' };31addDecorator(addWrapper(Provider, { store }, 'ReduxProvider', 1));32addDecorator(addWrapper(ThemeProvider, { theme }, 'StyledComponentsThemeProvider', 0));

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { fullAPI } from 'storybook-root';2fullAPI()3 .then(api => {4 });5import { fullAPI } from 'storybook-root';6fullAPI({7})8 .then(api => {9 });

Full Screen

Full Screen

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.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful