How to use componentName method in storybook-root

Best JavaScript code snippet using storybook-root

demo.js

Source:demo.js Github

copy

Full Screen

1// 用在组件文档里，展示所有 Icon2import React, { useState } from 'react';3import {4 Radio,5 Input,6 Affix,7 Space,8 Slider,9 Select,10 InputNumber,11 Button,12 Modal,13 Typography,14} from '@arco-design/web-react';15import { IconCamera } from '@arco-design/web-react/icon';16import * as icons from '@arco-design/web-react/icon/index.es.js';17import { IconClassifyModal } from './classifyModal';18import { Tooltip } from '@arco-design/web-react';19import { teaLog } from '@arco-design/arco-site-utils';20import { EventMap } from '../site/src/pages/home/utils/eventMap';21const RadioGroup = Radio.Group;22const { Paragraph } = Typography;23const svgData = JSON.parse(24 '{"direction":{"outline":[{"name":"arrow-down","componentName":"IconArrowDown"},{"name":"arrow-fall","componentName":"IconArrowFall"},{"name":"arrow-left","componentName":"IconArrowLeft"},{"name":"arrow-right","componentName":"IconArrowRight"},{"name":"arrow-rise","componentName":"IconArrowRise"},{"name":"arrow-up","componentName":"IconArrowUp"},{"name":"caret-down","componentName":"IconCaretDown"},{"name":"caret-left","componentName":"IconCaretLeft"},{"name":"caret-right","componentName":"IconCaretRight"},{"name":"caret-up","componentName":"IconCaretUp"},{"name":"double-down","componentName":"IconDoubleDown"},{"name":"double-left","componentName":"IconDoubleLeft"},{"name":"double-right","componentName":"IconDoubleRight"},{"name":"double-up","componentName":"IconDoubleUp"},{"name":"down-circle","componentName":"IconDownCircle"},{"name":"down","componentName":"IconDown"},{"name":"drag-arrow","componentName":"IconDragArrow"},{"name":"expand","componentName":"IconExpand"},{"name":"left-circle","componentName":"IconLeftCircle"},{"name":"left","componentName":"IconLeft"},{"name":"menu-fold","componentName":"IconMenuFold"},{"name":"menu-unfold","componentName":"IconMenuUnfold"},{"name":"right-circle","componentName":"IconRightCircle"},{"name":"right","componentName":"IconRight"},{"name":"rotate-left","componentName":"IconRotateLeft"},{"name":"rotate-right","componentName":"IconRotateRight"},{"name":"shrink","componentName":"IconShrink"},{"name":"swap","componentName":"IconSwap"},{"name":"to-bottom","componentName":"IconToBottom"},{"name":"to-left","componentName":"IconToLeft"},{"name":"to-right","componentName":"IconToRight"},{"name":"to-top","componentName":"IconToTop"},{"name":"up-circle","componentName":"IconUpCircle"},{"name":"up","componentName":"IconUp"}]},"tips":{"fill":[{"name":"check-circle-fill","componentName":"IconCheckCircleFill"},{"name":"close-circle-fill","componentName":"IconCloseCircleFill"},{"name":"exclamation-circle-fill","componentName":"IconExclamationCircleFill"},{"name":"exclamation-polygon-fill","componentName":"IconExclamationPolygonFill"},{"name":"info-circle-fill","componentName":"IconInfoCircleFill"},{"name":"minus-circle-fill","componentName":"IconMinusCircleFill"},{"name":"plus-circle-fill","componentName":"IconPlusCircleFill"},{"name":"question-circle-fill","componentName":"IconQuestionCircleFill"}],"outline":[{"name":"check-circle","componentName":"IconCheckCircle"},{"name":"check-square","componentName":"IconCheckSquare"},{"name":"check","componentName":"IconCheck"},{"name":"clock-circle","componentName":"IconClockCircle"},{"name":"close-circle","componentName":"IconCloseCircle"},{"name":"close","componentName":"IconClose"},{"name":"exclamation-circle","componentName":"IconExclamationCircle"},{"name":"exclamation","componentName":"IconExclamation"},{"name":"info-circle","componentName":"IconInfoCircle"},{"name":"info","componentName":"IconInfo"},{"name":"minus-circle","componentName":"IconMinusCircle"},{"name":"minus","componentName":"IconMinus"},{"name":"plus-circle","componentName":"IconPlusCircle"},{"name":"plus","componentName":"IconPlus"},{"name":"question-circle","componentName":"IconQuestionCircle"},{"name":"question","componentName":"IconQuestion"},{"name":"stop","componentName":"IconStop"}]},"interactive-button":{"fill":[{"name":"heart-fill","componentName":"IconHeartFill"},{"name":"star-fill","componentName":"IconStarFill"},{"name":"thumb-down-fill","componentName":"IconThumbDownFill"},{"name":"thumb-up-fill","componentName":"IconThumbUpFill"}],"outline":[{"name":"at","componentName":"IconAt"},{"name":"cloud-download","componentName":"IconCloudDownload"},{"name":"code-block","componentName":"IconCodeBlock"},{"name":"code-square","componentName":"IconCodeSquare"},{"name":"code","componentName":"IconCode"},{"name":"customer-service","componentName":"IconCustomerService"},{"name":"download","componentName":"IconDownload"},{"name":"export","componentName":"IconExport"},{"name":"eye-invisible","componentName":"IconEyeInvisible"},{"name":"eye","componentName":"IconEye"},{"name":"heart","componentName":"IconHeart"},{"name":"history","componentName":"IconHistory"},{"name":"home","componentName":"IconHome"},{"name":"import","componentName":"IconImport"},{"name":"launch","componentName":"IconLaunch"},{"name":"list","componentName":"IconList"},{"name":"message-banned","componentName":"IconMessageBanned"},{"name":"message","componentName":"IconMessage"},{"name":"more-vertical","componentName":"IconMoreVertical"},{"name":"more","componentName":"IconMore"},{"name":"poweroff","componentName":"IconPoweroff"},{"name":"refresh","componentName":"IconRefresh"},{"name":"reply","componentName":"IconReply"},{"name":"save","componentName":"IconSave"},{"name":"scan","componentName":"IconScan"},{"name":"search","componentName":"IconSearch"},{"name":"select-all","componentName":"IconSelectAll"},{"name":"send","componentName":"IconSend"},{"name":"settings","componentName":"IconSettings"},{"name":"share-alt","componentName":"IconShareAlt"},{"name":"share-external","componentName":"IconShareExternal"},{"name":"share-internal","componentName":"IconShareInternal"},{"name":"star","componentName":"IconStar"},{"name":"sync","componentName":"IconSync"},{"name":"thumb-down","componentName":"IconThumbDown"},{"name":"thumb-up","componentName":"IconThumbUp"},{"name":"translate","componentName":"IconTranslate"},{"name":"upload","componentName":"IconUpload"},{"name":"voice","componentName":"IconVoice"}]},"edit":{"outline":[{"name":"align-center","componentName":"IconAlignCenter"},{"name":"align-left","componentName":"IconAlignLeft"},{"name":"align-right","componentName":"IconAlignRight"},{"name":"attachment","componentName":"IconAttachment"},{"name":"bg-colors","componentName":"IconBgColors"},{"name":"bold","componentName":"IconBold"},{"name":"brush","componentName":"IconBrush"},{"name":"copy","componentName":"IconCopy"},{"name":"delete","componentName":"IconDelete"},{"name":"edit","componentName":"IconEdit"},{"name":"eraser","componentName":"IconEraser"},{"name":"filter","componentName":"IconFilter"},{"name":"find-replace","componentName":"IconFindReplace"},{"name":"font-colors","componentName":"IconFontColors"},{"name":"formula","componentName":"IconFormula"},{"name":"h1","componentName":"IconH1"},{"name":"h2","componentName":"IconH2"},{"name":"h3","componentName":"IconH3"},{"name":"h4","componentName":"IconH4"},{"name":"h5","componentName":"IconH5"},{"name":"h6","componentName":"IconH6"},{"name":"h7","componentName":"IconH7"},{"name":"highlight","componentName":"IconHighlight"},{"name":"italic","componentName":"IconItalic"},{"name":"line-height","componentName":"IconLineHeight"},{"name":"link","componentName":"IconLink"},{"name":"oblique-line","componentName":"IconObliqueLine"},{"name":"ordered-list","componentName":"IconOrderedList"},{"name":"original-size","componentName":"IconOriginalSize"},{"name":"paste","componentName":"IconPaste"},{"name":"quote","componentName":"IconQuote"},{"name":"redo","componentName":"IconRedo"},{"name":"scissor","componentName":"IconScissor"},{"name":"sort-ascending","componentName":"IconSortAscending"},{"name":"sort-descending","componentName":"IconSortDescending"},{"name":"sort","componentName":"IconSort"},{"name":"strikethrough","componentName":"IconStrikethrough"},{"name":"underline","componentName":"IconUnderline"},{"name":"undo","componentName":"IconUndo"},{"name":"unordered-list","componentName":"IconUnorderedList"},{"name":"zoom-in","componentName":"IconZoomIn"},{"name":"zoom-out","componentName":"IconZoomOut"}]},"media":{"fill":[{"name":"mute-fill","componentName":"IconMuteFill"},{"name":"pause-circle-fill","componentName":"IconPauseCircleFill"},{"name":"play-arrow-fill","componentName":"IconPlayArrowFill"},{"name":"play-circle-fill","componentName":"IconPlayCircleFill"},{"name":"skip-next-fill","componentName":"IconSkipNextFill"},{"name":"skip-previous-fill","componentName":"IconSkipPreviousFill"},{"name":"sound-fill","componentName":"IconSoundFill"}],"outline":[{"name":"backward","componentName":"IconBackward"},{"name":"forward","componentName":"IconForward"},{"name":"fullscreen-exit","componentName":"IconFullscreenExit"},{"name":"fullscreen","componentName":"IconFullscreen"},{"name":"live-broadcast","componentName":"IconLiveBroadcast"},{"name":"music","componentName":"IconMusic"},{"name":"mute","componentName":"IconMute"},{"name":"pause-circle","componentName":"IconPauseCircle"},{"name":"pause","componentName":"IconPause"},{"name":"play-arrow","componentName":"IconPlayArrow"},{"name":"play-circle","componentName":"IconPlayCircle"},{"name":"record-stop","componentName":"IconRecordStop"},{"name":"record","componentName":"IconRecord"},{"name":"skip-next","componentName":"IconSkipNext"},{"name":"skip-previous","componentName":"IconSkipPrevious"},{"name":"sound","componentName":"IconSound"}]},"logo":{"color":[{"name":"bytedance-color","componentName":"IconBytedanceColor"},{"name":"lark-color","componentName":"IconLarkColor"},{"name":"tiktok-color","componentName":"IconTiktokColor"},{"name":"xigua-color","componentName":"IconXiguaColor"}],"fill":[{"name":"faceBook-circle-fill","componentName":"IconFaceBookCircleFill"},{"name":"facebook-square-fill","componentName":"IconFacebookSquareFill"},{"name":"google-circle-fill","componentName":"IconGoogleCircleFill"},{"name":"qq-circle-fill","componentName":"IconQqCircleFill"},{"name":"twitter-circle-fill","componentName":"IconTwitterCircleFill"},{"name":"weibo-circle-fill","componentName":"IconWeiboCircleFill"}],"outline":[{"name":"alipay-circle","componentName":"IconAlipayCircle"},{"name":"code-sandbox","componentName":"IconCodeSandbox"},{"name":"codepen","componentName":"IconCodepen"},{"name":"facebook","componentName":"IconFacebook"},{"name":"github","componentName":"IconGithub"},{"name":"gitlab","componentName":"IconGitlab"},{"name":"google","componentName":"IconGoogle"},{"name":"qq-zone","componentName":"IconQqZone"},{"name":"qq","componentName":"IconQq"},{"name":"twitter","componentName":"IconTwitter"},{"name":"wechat","componentName":"IconWechat"},{"name":"wechatpay","componentName":"IconWechatpay"},{"name":"weibo","componentName":"IconWeibo"}]},"general":{"fill":[{"name":"chinese-fill","componentName":"IconChineseFill"},{"name":"english-fill","componentName":"IconEnglishFill"},{"name":"face-frown-fill","componentName":"IconFaceFrownFill"},{"name":"face-meh-fill","componentName":"IconFaceMehFill"},{"name":"face-smile-fill","componentName":"IconFaceSmileFill"},{"name":"moon-fill","componentName":"IconMoonFill"},{"name":"pen-fill","componentName":"IconPenFill"},{"name":"sun-fill","componentName":"IconSunFill"}],"outline":[{"name":"apps","componentName":"IconApps"},{"name":"archive","componentName":"IconArchive"},{"name":"book","componentName":"IconBook"},{"name":"branch","componentName":"IconBranch"},{"name":"bug","componentName":"IconBug"},{"name":"bulb","componentName":"IconBulb"},{"name":"calendar-clock","componentName":"IconCalendarClock"},{"name":"calendar","componentName":"IconCalendar"},{"name":"camera","componentName":"IconCamera"},{"name":"cloud","componentName":"IconCloud"},{"name":"command","componentName":"IconCommand"},{"name":"common","componentName":"IconCommon"},{"name":"compass","componentName":"IconCompass"},{"name":"copyright","componentName":"IconCopyright"},{"name":"dashboard","componentName":"IconDashboard"},{"name":"desktop","componentName":"IconDesktop"},{"name":"dice","componentName":"IconDice"},{"name":"drag-dot-vertical","componentName":"IconDragDotVertical"},{"name":"drag-dot","componentName":"IconDragDot"},{"name":"drive-file","componentName":"IconDriveFile"},{"name":"ear","componentName":"IconEar"},{"name":"email","componentName":"IconEmail"},{"name":"empty","componentName":"IconEmpty"},{"name":"experiment","componentName":"IconExperiment"},{"name":"file-audio","componentName":"IconFileAudio"},{"name":"file-image","componentName":"IconFileImage"},{"name":"file-pdf","componentName":"IconFilePdf"},{"name":"file-video","componentName":"IconFileVideo"},{"name":"file","componentName":"IconFile"},{"name":"fire","componentName":"IconFire"},{"name":"folder-add","componentName":"IconFolderAdd"},{"name":"folder-delete","componentName":"IconFolderDelete"},{"name":"folder","componentName":"IconFolder"},{"name":"gift","componentName":"IconGift"},{"name":"idcard","componentName":"IconIdcard"},{"name":"image-close","componentName":"IconImageClose"},{"name":"image","componentName":"IconImage"},{"name":"interaction","componentName":"IconInteraction"},{"name":"language","componentName":"IconLanguage"},{"name":"layout","componentName":"IconLayout"},{"name":"loading","componentName":"IconLoading"},{"name":"location","componentName":"IconLocation"},{"name":"lock","componentName":"IconLock"},{"name":"loop","componentName":"IconLoop"},{"name":"man","componentName":"IconMan"},{"name":"menu","componentName":"IconMenu"},{"name":"mind-mapping","componentName":"IconMindMapping"},{"name":"mobile","componentName":"IconMobile"},{"name":"moon","componentName":"IconMoon"},{"name":"mosaic","componentName":"IconMosaic"},{"name":"nav","componentName":"IconNav"},{"name":"notification-close","componentName":"IconNotificationClose"},{"name":"notification","componentName":"IconNotification"},{"name":"palette","componentName":"IconPalette"},{"name":"pen","componentName":"IconPen"},{"name":"phone","componentName":"IconPhone"},{"name":"printer","componentName":"IconPrinter"},{"name":"public","componentName":"IconPublic"},{"name":"pushpin","componentName":"IconPushpin"},{"name":"qrcode","componentName":"IconQrcode"},{"name":"robot-add","componentName":"IconRobotAdd"},{"name":"robot","componentName":"IconRobot"},{"name":"safe","componentName":"IconSafe"},{"name":"schedule","componentName":"IconSchedule"},{"name":"shake","componentName":"IconShake"},{"name":"skin","componentName":"IconSkin"},{"name":"stamp","componentName":"IconStamp"},{"name":"storage","componentName":"IconStorage"},{"name":"subscribe-add","componentName":"IconSubscribeAdd"},{"name":"subscribe","componentName":"IconSubscribe"},{"name":"subscribed","componentName":"IconSubscribed"},{"name":"sun","componentName":"IconSun"},{"name":"tag","componentName":"IconTag"},{"name":"tags","componentName":"IconTags"},{"name":"thunderbolt","componentName":"IconThunderbolt"},{"name":"tool","componentName":"IconTool"},{"name":"trophy","componentName":"IconTrophy"},{"name":"unlock","componentName":"IconUnlock"},{"name":"user-add","componentName":"IconUserAdd"},{"name":"user-group","componentName":"IconUserGroup"},{"name":"user","componentName":"IconUser"},{"name":"video-camera","componentName":"IconVideoCamera"},{"name":"wifi","componentName":"IconWifi"},{"name":"woman","componentName":"IconWoman"}]}}'25);26const newIcons = JSON.parse(27 '[{"file":"general/outline/palette.svg","name":"IconPalette","version":"2.19.2"},{"file":"general/outline/calendar-clock.svg","name":"IconCalendarClock","version":"2.20.0"}]'28);29const lineCaps = ['butt', 'round', 'square'];30const lineJoins = ['arcs', 'bevel', 'miter', 'miter-clip', 'round'];31const locale = {32 'zh-CN': {33 title: '图标配置',34 line: '线性图标',35 fill: '面性图标',36 color: '多色图标',37 search: '搜索图标，点击可复制图标用法',38 'stroke-width': '线宽：',39 size: '图标大小：',40 lineJoin: '拐角：',41 lineCap: '端点：',42 desc1: '全局配置（将以下的类添加到 css 中）:',43 desc2: (44 <span>45 单个组件的话可以直接将以上样式写到 <code>IconXXX</code> 的 <code>style</code> 中46 </span>47 ),48 'show-config': '显示配置',49 add: '添加',50 iconClassifyModalTitle: '上传图片搜索图标',51 },52 'en-US': {53 title: 'Icon Configuration',54 line: 'Stroke',55 fill: 'Fill',56 color: 'Color',57 search: 'Search icon, click to copy usage',58 'stroke-width': 'Stroke Width:',59 size: 'Size:',60 lineJoin: 'Line Join:',61 lineCap: 'Line Cap:',62 desc1: 'Global configuration (add the following class to css):',63 desc2: (64 <span>65 For a single component, you can directly write the above style to the <code>style</code>66 of <code>IconXXX</code>67 </span>68 ),69 'show-config': 'Show Config',70 add: 'Add',71 iconClassifyModalTitle: 'Upload an image to search for icons',72 },73};74export default function ({ lang = 'zh-CN' }) {75 const [type, setType] = useState('outline');76 const [filter, setFilter] = useState('');77 const [strokeWidth, setStrokeWidth] = useState(4);78 const [lineCap, setLineCap] = useState('butt');79 const [lineJoin, setLineJoin] = useState('miter');80 const [fontSize, setFontSize] = useState(32);81 const sliderStyle = { width: 120, marginRight: 20 };82 const inputNumberStyle = { width: 60 };83 const getWidthStyle = (width) => ({ width });84 const iconStyle = { fontSize };85 const spaceStyle = { justifyContent: 'space-between', whiteSpace: 'nowrap' };86 const [iconClassifyModalVisible, setIconClassifyModalVisible] = useState(false);87 const maps = JSON.parse(88 '{"zh-CN":{"direction":"方向指示类图标","tips":"提示建议类图标","interactive-button":"交互按钮类图标","edit":"编辑类图标","media":"影音类图标","logo":"商标类图标","general":"通用类图标"},"en-US":{"direction":"Direction indicator","tips":"Prompt suggestion","interactive-button":"Interactive button","edit":"Editable","media":"Media","logo":"Logo","general":"General"}}'89 )[lang];90 const t = locale[lang];91 return (92 <div>93 <div className="iconlist-bar">94 <RadioGroup95 size="large"96 type="button"97 mode="fill"98 name="type"99 defaultValue="outline"100 onChange={setType}101 >102 <Radio value="outline">{t.line}</Radio>103 <Radio value="fill">{t.fill}</Radio>104 <Radio value="color">{t.color}</Radio>105 </RadioGroup>106 <Input.Search size="large" onChange={setFilter} placeholder={t.search} />107 <Tooltip content={t.iconClassifyModalTitle}>108 <Button109 size="large"110 icon={<IconCamera />}111 style={{ marginLeft: 8 }}112 onClick={() => {113 teaLog(EventMap.searchIconByImg, { type: 'open' });114 setIconClassifyModalVisible(true);115 }}116 />117 <IconClassifyModal118 title={t.iconClassifyModalTitle}119 lang={lang}120 visible={iconClassifyModalVisible}121 onVisibleChange={setIconClassifyModalVisible}122 />123 </Tooltip>124 </div>125 <Affix offsetTop={60} className="iconlist-affix">126 <Space className="iconlist-operations" style={spaceStyle}>127 <Space>128 {t['stroke-width']}129 <Slider130 defaultValue={4}131 style={sliderStyle}132 showTicks133 min={1}134 max={5}135 onChange={(value) => setStrokeWidth(value)}136 />137 {t.size}138 <InputNumber139 min={14}140 max={80}141 value={fontSize}142 onChange={(value) => setFontSize(value)}143 style={inputNumberStyle}144 />145 {t.lineJoin}146 <Select147 options={lineJoins}148 value={lineJoin}149 onChange={(value) => setLineJoin(value)}150 style={getWidthStyle(100)}151 />152 {t.lineCap}153 <Select154 options={lineCaps}155 value={lineCap}156 onChange={(value) => setLineCap(value)}157 style={getWidthStyle(84)}158 />159 </Space>160 <Button161 type="primary"162 onClick={() =>163 Modal.success({164 title: t.title,165 content: (166 <div>167 <Paragraph>{t.desc1} </Paragraph>168 <Paragraph code>{`.arco-icon {169 font-size: ${fontSize};170 ${lineCap !== 'butt' ? `stroke-linecap: ${lineCap};` : ''}171 ${lineJoin !== 'miter' ? `stroke-linejoin: ${lineJoin};` : ''}172 ${strokeWidth !== 4 ? `stroke-width: ${strokeWidth};` : ''}173 }`}</Paragraph>174 <Paragraph>{t.desc2}</Paragraph>175 </div>176 ),177 })178 }179 >180 {t['show-config']}181 </Button>182 </Space>183 </Affix>184 {Object.keys(svgData).map((key) => {185 const filteredData =186 filter && svgData[key][type]187 ? svgData[key][type].filter((s) => {188 return s.componentName.toLowerCase().indexOf(filter.toLowerCase()) !== -1;189 })190 : svgData[key][type];191 let className = 'iconlist-wrapper';192 if (key === 'out-of-date') {193 className += ' out-of-date';194 }195 return filteredData && filteredData.length ? (196 <div className={className} key={key}>197 <div className="iconlist-title" id={maps[key]}>198 {maps[key]}199 </div>200 <ul className="iconlist">201 {filteredData.map((n) => {202 const Tag = icons[n.componentName];203 const newIcon = newIcons.find((_n) => _n.name === n.componentName);204 return (205 <li key={n.componentName} className="icon-cell" aria-label={n.componentName}>206 <div className="icon-show">207 <Tag208 strokeWidth={strokeWidth}209 strokeLinecap={lineCap}210 strokeLinejoin={lineJoin}211 style={iconStyle}212 />213 </div>214 <p className="name">{n.componentName}</p>215 {newIcon ? (216 <span className="version">217 {newIcon.version} {t.add}218 </span>219 ) : null}220 </li>221 );222 })}223 </ul>224 </div>225 ) : null;226 })}227 </div>228 );...

Full Screen

Full Screen

new.js

Source:new.js Github

copy

Full Screen

1'use strict';2console.log();3process.on('exit', () => {4 console.log();5});6if (!process.argv[2]) {7 console.error('[组件名]必填 - Please enter new component name');8 process.exit(1);9}10const path = require('path');11const fs = require('fs');12const fileSave = require('file-save');13const uppercamelcase = require('uppercamelcase');14const componentname = process.argv[2];15const chineseName = process.argv[3] || componentname;16const ComponentName = uppercamelcase(componentname);17const PackagePath = path.resolve(__dirname, '../../packages', componentname);18const Files = [19 {20 filename: 'index.js',21 content: `import ${ComponentName} from './src/main';22/* istanbul ignore next */23${ComponentName}.install = function(Vue) {24 Vue.component(${ComponentName}.name, ${ComponentName});25};26export default ${ComponentName};`27 },28 {29 filename: 'src/main.vue',30 content: `<template>31 <div class="el-${componentname}"></div>32</template>33<script>34export default {35 name: 'El${ComponentName}'36};37</script>`38 },39 {40 filename: path.join('../../examples/docs/zh-CN', `${componentname}.md`),41 content: `## ${ComponentName} ${chineseName}`42 },43 {44 filename: path.join('../../examples/docs/en-US', `${componentname}.md`),45 content: `## ${ComponentName}`46 },47 {48 filename: path.join('../../examples/docs/es', `${componentname}.md`),49 content: `## ${ComponentName}`50 },51 {52 filename: path.join('../../examples/docs/fr-FR', `${componentname}.md`),53 content: `## ${ComponentName}`54 },55 {56 filename: path.join('../../test/unit/specs', `${componentname}.spec.js`),57 content: `import { createTest, destroyVM } from '../util';58import ${ComponentName} from 'packages/${componentname}';59describe('${ComponentName}', () => {60 let vm;61 afterEach(() => {62 destroyVM(vm);63 });64 it('create', () => {65 vm = createTest(${ComponentName}, true);66 expect(vm.$el).to.exist;67 });68});69`70 },71 {72 filename: path.join('../../packages/theme-chalk/src', `${componentname}.scss`),73 content: `@import "mixins/mixins";74@import "common/var";75@include b(${componentname}) {76}`77 },78 {79 filename: path.join('../../types', `${componentname}.d.ts`),80 content: `import { ElementUIComponent } from './component'81/** ${ComponentName} Component */82export declare class El${ComponentName} extends ElementUIComponent {83}`84 }85];86// 添加到 components.json87const componentsFile = require('../../components.json');88if (componentsFile[componentname]) {89 console.error(`${componentname} 已存在.`);90 process.exit(1);91}92componentsFile[componentname] = `./packages/${componentname}/index.js`;93fileSave(path.join(__dirname, '../../components.json'))94 .write(JSON.stringify(componentsFile, null, ' '), 'utf8')95 .end('\n');96// 添加到 index.scss97const sassPath = path.join(__dirname, '../../packages/theme-chalk/src/index.scss');98const sassImportText = `${fs.readFileSync(sassPath)}@import "./${componentname}.scss";`;99fileSave(sassPath)100 .write(sassImportText, 'utf8')101 .end('\n');102// 添加到 element-ui.d.ts103const elementTsPath = path.join(__dirname, '../../types/element-ui.d.ts');104let elementTsText = `${fs.readFileSync(elementTsPath)}105/** ${ComponentName} Component */106export class ${ComponentName} extends El${ComponentName} {}`;107const index = elementTsText.indexOf('export') - 1;108const importString = `import { El${ComponentName} } from './${componentname}'`;109elementTsText = elementTsText.slice(0, index) + importString + '\n' + elementTsText.slice(index);110fileSave(elementTsPath)111 .write(elementTsText, 'utf8')112 .end('\n');113// 创建 package114Files.forEach(file => {115 fileSave(path.join(PackagePath, file.filename))116 .write(file.content, 'utf8')117 .end('\n');118});119// 添加到 nav.config.json120const navConfigFile = require('../../examples/nav.config.json');121Object.keys(navConfigFile).forEach(lang => {122 let groups = navConfigFile[lang][4].groups;123 groups[groups.length - 1].list.push({124 path: `/${componentname}`,125 title: lang === 'zh-CN' && componentname !== chineseName126 ? `${ComponentName} ${chineseName}`127 : ComponentName128 });129});130fileSave(path.join(__dirname, '../../examples/nav.config.json'))131 .write(JSON.stringify(navConfigFile, null, ' '), 'utf8')132 .end('\n');...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { withRootDecorator } from 'storybook-root-decorator';2import { componentName } from 'storybook-root-decorator';3import { storiesOf } from '@storybook/react';4import { action } from '@storybook/addon-actions';5import { linkTo } from '@storybook/addon-links';6storiesOf('Button', module)7 .addDecorator(withRootDecorator({ componentName: 'Button' }))8 .add('with text', () => (9 <Button onClick={action('clicked')}>Hello Button</Button>10 .add('with some emoji', () => (11 <Button onClick={action('clicked')}>12 ));13import { configure } from '@storybook/react';14configure(require.context('../src', true, /\.stories\.js$/), module);15import React from 'react';16import ReactDOM from 'react-dom';17import './index.css';18import App from './App';19import * as serviceWorker from './serviceWorker';20ReactDOM.render(<App />, document.getElementById('root'));21import React, { Component } from 'react';22import logo from './logo.svg';23import './App.css';24import { Button } from './components/Button/Button';25class App extends Component {26 render() {27 return (28 <img src={logo} className="App-logo" alt="logo" />29 );30 }31}32export default App;33import React from 'react';34import PropTypes from 'prop-types';35export const Button = props => {36 return (37 <button data-testid="button" onClick={props.onClick}>38 {props.children}39 );40};41Button.propTypes = {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { componentName } from 'storybook-root-decorator';2import { withRootDecorator } from 'storybook-root-decorator';3import { withRootDecorator } from 'storybook-root-decorator';4import { withRootDecorator } from 'storybook-root-decorator';5import { withRootDecorator } from 'storybook-root-decorator';6import { withRootDecorator } from 'storybook-root-decorator';7import { withRootDecorator } from 'storybook-root-decorator';8import { withRootDecorator } from 'storybook-root-decorator';9import { withRootDecorator } from 'storybook-root-decorator';10import { withRootDecorator } from 'storybook-root-decorator';11import { withRootDecorator } from 'storybook-root-decorator';12import { withRootDecorator } from 'storybook-root-decorator';13import { withRootDecorator } from 'storybook-root-decorator';14import { withRootDecorator } from 'storybook-root-decorator';15import { withRootDecorator } from 'storybook-root-decorator';16import { withRootDecorator } from 'storybook-root-decorator';

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { componentName } from 'storybook-root-decorator';2import rootDecorator from 'storybook-root-decorator';3import rootDecorator from 'storybook-root-decorator';4import rootDecorator from 'storybook-root-decorator';5import rootDecorator from 'storybook-root-decorator';6import rootDecorator from 'storybook-root-decorator';7import rootDecorator from 'storybook-root-decorator';8import rootDecorator from 'storybook-root-decorator';9import rootDecorator from 'storybook-root-decorator';10import rootDecorator from 'storybook-root-decorator';11import rootDecorator from 'storybook-root-decorator';12import rootDecorator from 'storybook-root-decorator';13import rootDecorator from 'storybook-root-decorator';14import rootDecorator from 'storybook-root-decorator';15import rootDecorator from 'storybook-root-decorator';16import rootDecorator from 'storybook-root-decorator';17import rootDecorator from 'storybook-root-decorator';18import rootDecorator from 'storybook-root-decorator';19import rootDecorator from 'storybook-root-decorator';20import rootDecorator from 'storybook-root-decorator';21import rootDecorator from 'storybook-root-decorator';22import rootDecorator from 'storybook-root-decorator';23import rootDecorator from 'storybook-root-decorator';

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { componentName } from 'storybook-root-decorator'2console.log(componentName)3import { componentName } from 'storybook-root-decorator'4console.log(componentName)5import { componentName } from 'storybook-root-decorator'6console.log(componentName)7import { componentName } from 'storybook-root-decorator'8console.log(componentName)9import { componentName } from 'storybook-root-decorator'10console.log(componentName)11import { componentName } from 'storybook-root-decorator'12console.log(componentName)13import { componentName } from 'storybook-root-decorator'14console.log(componentName)15import { componentName } from 'storybook-root-decorator'16console.log(componentName)17import { componentName } from 'storybook-root-decorator'18console.log(componentName)19import { componentName } from 'storybook-root-decorator'20console.log(componentName)21import { componentName } from 'storybook-root-decorator'22console.log(componentName)23import

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { componentName } from 'storybook-root-decorator'2const MyComponent = () => {3 return <div>{componentName()}</div>4}5import { storiesOf } from '@storybook/react'6import { withStorybookRootDecorator } from 'storybook-root-decorator'7import MyComponent from './test'8storiesOf('MyComponent', module)9 .addDecorator(withStorybookRootDecorator)10 .add('default', () => <MyComponent />)11import { shallow } from 'enzyme'12import { withStorybookRootDecorator } from 'storybook-root-decorator'13import MyComponent from './test'14describe('MyComponent', () => {15 it('should render', () => {16 const wrapper = shallow(17 withStorybookRootDecorator(<MyComponent />)18 ).dive()19 expect(wrapper).toMatchSnapshot()20 })21})22import { mount } from '@vue/test-utils'23import { withStorybookRootDecorator } from 'storybook-root-decorator'24import MyComponent from './test'25describe('MyComponent', () => {26 it('should render', () => {27 const wrapper = mount(28 withStorybookRootDecorator(<MyComponent />)29 expect(wrapper).toMatchSnapshot()30 })31})32import { shallow } from 'enzyme'33import { withStorybookRootDecorator } from 'storybook-root-decorator'34import MyComponent from './test'35describe('MyComponent', () => {36 it('should render', () => {37 const wrapper = shallow(38 withStorybookRootDecorator(<MyComponent />)39 ).dive()40 expect(wrapper).toMatchSnapshot()41 })42})43import { mount } from '@vue/test-utils'44import { withStorybookRootDecorator } from 'storybook-root-decorator'45import MyComponent from './test'46describe('MyComponent', () => {47 it('should render', () => {48 const wrapper = mount(49 withStorybookRootDecorator(<MyComponent />)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { componentName } from 'storybook-root-decorator';2console.log(componentName());3import { componentName } from 'storybook-root-decorator';4console.log(componentName());5import { componentName } from 'storybook-root-decorator';6console.log(componentName());7import { componentName } from 'storybook-root-decorator';8console.log(componentName());9import { componentName } from 'storybook-root-decorator';10console.log(componentName());11import { componentName } from 'storybook-root-decorator';12console.log(componentName());13import { componentName } from 'storybook-root-decorator';14console.log(componentName());15import { componentName } from 'storybook-root-decorator';16console.log(componentName());17import { componentName } from 'storybook-root-decorator';18console.log(componentName());19import { componentName } from 'storybook-root-decorator';20console.log(componentName());21import { componentName } from 'storybook-root-decorator';22console.log(componentName());23import { componentName } from 'storybook-root-decorator';24console.log(componentName());

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