How to use componentsDirectory method in storybook-root

Best JavaScript code snippet using storybook-root

cli.js

Source:cli.js

1#!/usr/bin/env node2const fsp = require('fs').promises3const fs = require('fs')4const path = require('path')5const readline = require('readline')6const yargs = require('yargs')7const mergeObjectsWithArrayProperties = require('./utils/mergeObjectsWithArrayProperties')8const argv = yargs9  .option('componentsDirectory', {10    alias: 'c',11    description: 'Change the default path to the components directory',12    type: 'string'13  })14  .option('pagesDirectory', {15    alias: 'p',16    description: 'Change the default path to the pages directory',17    type: 'string'18  })19  .help()20  .alias('help', 'h')21  .argv22if (argv.time) {23  console.log('The current time is: ', new Date().toLocaleTimeString())24}25let componentsDirectory = '../../components/'26let pagesDirectory = '../../components/'27if (argv.componentsDirectory) {28  console.log('argv.componentsDirectory: ', argv.componentsDirectory)29  componentsDirectory = argv.componentsDirectory30}31if (argv.pagesDirectory) {32  console.log('argv.pagesDirectory: ', argv.pagesDirectory)33  pagesDirectory = argv.pagesDirectory34}35/**36 * Get directory files37 *38 * @param dir39 * @returns {Promise<unknown>}40 */41async function getDirectoryFiles (dir) {42  let files = await fsp.readdir(dir)43  files = await Promise.all(files.map(async (file) => {44    const filePath = path.join(dir, file)45    const stats = await fsp.stat(filePath)46    if (stats.isDirectory()) {47      return getDirectoryFiles(filePath)48    } else if (stats.isFile()) {49      return filePath50    }51  }))52  return files.reduce((all, folderContents) => all.concat(folderContents), [])53}54let components = {}55/**56 * Push occurrence57 *58 * @param occurrences59 * @param path60 * @param lineNumber61 * @returns {*}62 */63const pushOccurrence = (occurrences, path, lineNumber) => {64  const _occurrences = { ...occurrences }65  const alreadyOccurredOnce = Object.keys(_occurrences)66    .includes(path)67  if (alreadyOccurredOnce) {68    return { ..._occurrences, [path]: [..._occurrences[path], lineNumber] }69  } else {70    return { ..._occurrences, [path]: [lineNumber] }71  }72}73const checkPath = (components, path) => {74  const _components = { ...components }75  const numberOfComponents = Object.keys(_components).length76  return new Promise((resolve, reject) => {77    const readInterface = readline.createInterface({78      input: fs.createReadStream(path),79      output: false,80      console: false81    })82    let lineNumber = 083    readInterface.on('line', function (line) {84      lineNumber++85      return Object.entries(_components)86        .forEach((entry, index) => {87          const component = entry[1]88          const lowercaseNameWithDashes = component.name89          lowercaseNameWithDashes.replace(/[A-Z][a-z]*/g, str => '-' + str.toLowerCase() + '-')90          // Convert words to lower case and add hyphens around it (for stuff like "&")91            .replace('--', '-') // remove double hyphens92            .replace(/(^-)|(-$)/g, '') // remove hyphens at the beginning and the end93          const names = [`<${component.name}`, `<${lowercaseNameWithDashes}`]94          if (line.includes(names[0]) || line.includes(names[1])) {95            const componentPath = entry[0]96            _components[componentPath] = {97              ..._components[componentPath],98              count: _components[componentPath].count + 1,99              occurrences: pushOccurrence(_components[componentPath].occurrences, path, lineNumber)100            }101          }102          if (index === numberOfComponents - 1) {103            resolve(_components)104          }105        })106    })107  })108}109getDirectoryFiles(componentsDirectory)110  .then((componentPaths) => {111    componentPaths.forEach((componentPath) => {112      const splitByDot = componentPath.split('.')113        .slice(0, -1)114      const splitBySlash = splitByDot[splitByDot.length - 1].split('/')115      const name = splitBySlash[splitBySlash.length - 1]116      components[componentPath] = {117        name,118        count: 0,119        occurrences: {}120      }121    })122    console.log('Number of components: ' + Object.keys(components).length)123    getDirectoryFiles(pagesDirectory)124      .then((pagePaths) => {125        const numberOfPages = pagePaths.length126        console.log('Number of pages: ' + numberOfPages)127        let i = 0128        pagePaths.forEach((pagePath) => {129          console.log('pagePath', pagePath)130          checkPath(components, pagePath)131            .then((_components) => {132              const tempComponents = {}133              Object.entries(_components)134                .forEach((entry) => {135                  const componentPath = entry[0]136                  const component = entry[1]137                  tempComponents[componentPath] = {138                    ...components[componentPath],139                    count: components[componentPath].count + component.count,140                    occurrences: mergeObjectsWithArrayProperties(components[componentPath].occurrences, component.occurrences)141                  }142                })143              components = tempComponents144              console.log('done for pagePath: ' + pagePath)145              if (i >= numberOfPages - 1) {146                console.log('done for all page paths')147                //148                //149                //150                const numberOfComponents = Object.keys(components).length151                console.log('Number of components: ' + numberOfComponents)152                let ii = 0153                componentPaths.forEach((componentPath) => {154                  console.log('componentPath', componentPath)155                  checkPath(components, componentPath)156                    .then((_components) => {157                      const tempComponents = {}158                      Object.entries(_components)159                        .forEach((entry) => {160                          const componentPath = entry[0]161                          const component = entry[1]162                          tempComponents[componentPath] = {163                            ...components[componentPath],164                            count: components[componentPath].count + component.count,165                            occurrences: mergeObjectsWithArrayProperties(components[componentPath].occurrences, component.occurrences)166                          }167                        })168                      components = tempComponents169                      console.log('done for componentPath: ' + componentPath)170                      if (ii >= numberOfComponents - 1) {171                        console.log('done for all component paths')172                        console.table(components)173                      }174                      ii++175                    })176                })177                //178                //179                //180              }181              i++182            })183        })184      })185  })...

create-component.js

Source:create-component.js

1require('colors')2const fs = require('fs')3const templates = require('./templates')4const componentArgument = process.argv[2]5const { components: componentsDirectory } = require('../package.json')6if (!componentArgument) {7  console.error('Please supply a valid component name'.red)8  process.exit(1)9}10const componentName =11  componentArgument[0].toUpperCase() + componentArgument.slice(1)12console.log('Creating Component Templates with name: ' + componentName)13!fs.existsSync(componentsDirectory) && fs.mkdirSync(componentsDirectory)14const componentDirectory = `${componentsDirectory}/${componentName}`15if (fs.existsSync(componentDirectory)) {16  console.error(`Component ${componentName} already exists.`.red)17  process.exit(1)18}19fs.mkdirSync(componentDirectory)20templates.forEach(template => {21  const { content, extension } = template(componentName)22  const filePath = extension.startsWith('.')23    ? `${componentDirectory}/${componentName}${extension}`24    : `${componentDirectory}/${extension}`25  fs.writeFileSync(filePath, content)26})...

styleguide.config.js

Source:styleguide.config.js

1const fs = require('fs');2const path = require('path');3module.exports = {4  components: getComponentsPaths('src/components'),5  require: [path.join(__dirname, 'src/index.scss')],6  serverPort: 3040,7  skipComponentsWithoutExample: true,8  styleguideComponents: {9    Wrapper: path.join(__dirname, 'src/styleguide/wrapper'),10  },11  theme: {12    fontFamily: {13      base: 'var(--dc-font-base)',14    },15  },16  title: 'FbTools Components',17};18/**19 * Returns array of paths to components.20 * @param {string} componentsDirectory - The path to a directory where components are located.21 * @returns {string[]}22 */23function getComponentsPaths(componentsDirectory) {24  return fs25    .readdirSync(componentsDirectory)26    .filter((filename) => {27      if (filename.startsWith('.')) {28        return false;29      }30      const stats = fs.statSync(path.join(componentsDirectory, filename));31      return stats.isDirectory();32    })33    .map((directoryName) =>34      path.join(componentsDirectory, directoryName, `${directoryName}.tsx`)35    );...

Using AI Code Generation

1import { configure } from '@storybook/react';2import { setComponentsDirectory } from 'storybook-root-decorator';3setComponentsDirectory('src/components');4configure(require.context('../src/components', true, /\.stories\.js$/), module);5import { configure } from '@storybook/react';6import { setComponentsDirectory } from 'storybook-root-decorator';7setComponentsDirectory('src/components');8configure(require.context('../src/components', true, /\.stories\.js$/), module);9import { addDecorator } from '@storybook/react';10import { setComponentsDirectory } from 'storybook-root-decorator';11setComponentsDirectory('src/components');12addDecorator(story => story());13import { configure } from '@storybook/react';14import { setComponentsDirectory } from 'storybook-root-decorator';15setComponentsDirectory('src/components');16configure(require.context('../src/components', true, /\.stories\.js$/), module);17import { configure } from '@storybook/react';18import { setComponentsDirectory } from 'storybook-root-decorator';19setComponentsDirectory('src/components');20configure(() => {21  const req = require.context('../src/components', true, /\.stories\.js$/);22  req.keys().forEach(filename => req(filename));23}, module);24import { configure } from '@storybook/react';25import { setComponentsDirectory } from 'storybook-root-decorator';26setComponentsDirectory('src/components');27configure(() => {28  const req = require.context('../src/components', true, /\.stories\.js$/);29  req.keys().forEach(filename => req(filename));30}, module);

Using AI Code Generation

1const path = require('path');2const rootAlias = require('storybook-root-alias');3const componentsDirectory = rootAlias.componentsDirectory;4module.exports = {5  stories: [`${componentsDirectory}/**/*.stories.js`],6};7{8  "scripts": {9  },10  "dependencies": {

Using AI Code Generation

1import storybookRootRequire from 'storybook-root-require';2storybookRootRequire.componentsDirectory();3import storybookRootRequire from 'storybook-root-require';4storybookRootRequire.componentsDirectory();5import storybookRootRequire from 'storybook-root-require';6storybookRootRequire.componentsDirectory();7import storybookRootRequire from 'storybook-root-require';8storybookRootRequire.componentsDirectory();9import storybookRootRequire from 'storybook-root-require';10storybookRootRequire.componentsDirectory();11import storybookRootRequire from 'storybook-root-require';12storybookRootRequire.componentsDirectory();13import storybookRootRequire from 'storybook-root-require';14storybookRootRequire.componentsDirectory();15import storybookRootRequire from 'storybook-root-require';16storybookRootRequire.componentsDirectory();17import storybookRootRequire from 'storybook-root-require';18storybookRootRequire.componentsDirectory();19import storybookRootRequire from 'storybook-root-require';20storybookRootRequire.componentsDirectory();21import storybookRootRequire from 'storybook-root-require';22storybookRootRequire.componentsDirectory();23import storybookRootRequire from 'storybook-root-require';24storybookRootRequire.componentsDirectory();25import storybookRootRequire from 'storybook-root-require';26storybookRootRequire.componentsDirectory();27import storybookRootRequire from 'storybook-root-require';28storybookRootRequire.componentsDirectory();29import storybookRootRequire from '

Using AI Code Generation

1import {componentsDirectory} from 'storybook-root';2const componentDir = componentsDirectory();3import {componentsDirectory} from 'storybook-root';4const componentDir = componentsDirectory();5import {componentsDirectory} from 'storybook-root';6const componentDir = componentsDirectory();7import {componentsDirectory} from 'storybook-root';8const componentDir = componentsDirectory();9import {componentsDirectory} from 'storybook-root';10const componentDir = componentsDirectory();11import {componentsDirectory} from 'storybook-root';12const componentDir = componentsDirectory();13import {componentsDirectory} from 'storybook-root';14const componentDir = componentsDirectory();15import {componentsDirectory} from 'storybook-root';16const componentDir = componentsDirectory();17import {componentsDirectory} from 'storybook-root';18const componentDir = componentsDirectory();19import {componentsDirectory} from 'storybook-root';20const componentDir = componentsDirectory();21import {componentsDirectory} from 'storybook-root';22const componentDir = componentsDirectory();23import {componentsDirectory} from 'storybook-root';24const componentDir = componentsDirectory();25import {componentsDirectory} from 'storybook-root';26const componentDir = componentsDirectory();27import {componentsDirectory} from 'storybook-root';28const componentDir = componentsDirectory();29import {componentsDirectory} from 'storybook-root

Using AI Code Generation

1import { componentsDirectory } from '@storybook/react/demo';2const stories = storiesOf('Welcome', module);3stories.add('to Storybook', () => (4  <Welcome showApp={linkTo('Button')} />5));6stories.add('to Components', () => (7  <Welcome showApp={linkTo(componentsDirectory)} />8));9import { Welcome } from '@storybook/react/demo';10import { linkTo } from '@storybook/addon-links';11const stories = storiesOf('Welcome', module);12stories.add('to Storybook', () => (13  <Welcome showApp={linkTo('Button')} />14));15stories.add('to Components', () => (16  <Welcome showApp={linkTo('Welcome', 'to Storybook')} />17));18import { linkTo } from '@storybook/addon-links';19import { Welcome } from '@storybook/react/demo';20storiesOf('Welcome', module).add('to Storybook', () => (21  <Welcome showApp={linkTo('Button')} />22));23storiesOf('Welcome', module).add('to Components', () => (24  <Welcome showApp={linkTo('Welcome', 'to Storybook')} />25));26import { linkTo } from '@storybook/addon-links';27import { Welcome } from '@storybook/react/demo';28storiesOf('Welcome', module).add('to Storybook', () => (29  <Welcome showApp={linkTo('Button')} />30));31storiesOf('Welcome', module).add('to Components', () => (32  <Welcome showApp={linkTo('Welcome', 'to Storybook')} />33));

Using AI Code Generation

1const { componentsDirectory } = require('storybook-root');2const path = require('path');3const componentsDirectoryPath = componentsDirectory();4console.log(componentsDirectoryPath);5console.log(path.join(componentsDirectoryPath, 'Button'));6const { getStorybookRootDirectory } = require('storybook-root');7const path = require('path');8const storybookRootDirectory = getStorybookRootDirectory();9console.log(storybookRootDirectory);10console.log(path.join(storybookRootDirectory, 'src'));11const { getStorybookRootDirectoryPath } = require('storybook-root');12const path = require('path');13const storybookRootDirectoryPath = getStorybookRootDirectoryPath();14console.log(storybookRootDirectoryPath);15console.log(path.join(storybookRootDirectoryPath, 'src'));16MIT © [Rajeshwar Patlolla](

Using AI Code Generation

1import { componentsDirectory } from 'storybook-root-configuration';2const components = componentsDirectory();3console.log(components);4{ 5}6import React from 'react';7import { Button } from 'storybook-root-configuration';8export default {9};10export const Text = () => <Button>Hello Button</Button>;11export const Emoji = () => (12);13Emoji.story = {14};15import React from 'react';16import { Button } from 'storybook-root-configuration';17import { storiesOf } from '@storybook/react';18import { action } from '@storybook/addon-actions';19import { linkTo } from '@storybook/addon-links';20storiesOf('Button', module)21  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)22  .add('with some emoji', () => (23    <Button onClick={action('clicked')}>24  .add('with some emoji and action', () => (25    <Button onClick={linkTo('Button', 'with some emoji')}> 26  ));

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.