style(eslint): enable spaced-comment, @typescript-eslint/no-unused-vars

build/gulp/plugins/gulp-component-menu-behaviors.ts

@@ -20,8 +20,8 @@ type BehaviorMenuItem = {
 }
 
 const getTextFromCommentToken = (commentTokens, tokenTitle): string => {
-  const token = commentTokens.find(token => token.title === tokenTitle)
-  return token ? token.description : ''
+  const resultToken = commentTokens.find(token => token.title === tokenTitle)
+  return resultToken ? resultToken.description : ''
 }
 
 export default () => {

build/gulp/tasks/docs.ts

@@ -25,10 +25,10 @@ const { paths } = config
 const g = require('gulp-load-plugins')()
 const { colors, log } = g.util
 
-const handleWatchChange = path => log(`File ${path} was changed, running tasks...`)
-const handleWatchUnlink = (group, path) => {
-  log(`File ${path} was deleted, running tasks...`)
-  remember.forget(group, path)
+const handleWatchChange = changedPath => log(`File ${changedPath} was changed, running tasks...`)
+const handleWatchUnlink = (group, changedPath) => {
+  log(`File ${changedPath} was deleted, running tasks...`)
+  remember.forget(group, changedPath)
 }
 
 // ----------------------------------------
@@ -224,7 +224,7 @@ task('watch:docs', cb => {
   // rebuild example menus
   watch(examplesIndexSrc, series('build:docs:example-menu'))
     .on('change', handleWatchChange)
-    .on('unlink', path => handleWatchUnlink('example-menu', path))
+    .on('unlink', changedPath => handleWatchUnlink('example-menu', changedPath))
 
   watch(examplesSrc, series('build:docs:example-sources'))
     .on('change', handleWatchChange)
@@ -241,7 +241,7 @@ task('watch:docs', cb => {
 
   watch(behaviorSrc, series('build:docs:component-menu-behaviors'))
     .on('change', handleWatchChange)
-    .on('unlink', path => handleWatchUnlink('component-menu-behaviors', path))
+    .on('unlink', changedPath => handleWatchUnlink('component-menu-behaviors', changedPath))
 
   // rebuild images
   watch(`${config.paths.docsSrc()}/**/*.{png,jpg,gif}`, series('build:docs:images')).on(

build/gulp/tasks/perf.ts

@@ -72,9 +72,9 @@ const normalizeMeasures = (measures: ProfilerMeasureCycle[]): NormalizedMeasures
     {},
   )
 
-  return _.mapValues(perExampleMeasures, (measures: ProfilerMeasure[]) => ({
-    actualTime: reduceMeasures(measures, 'actualTime'),
-    baseTime: reduceMeasures(measures, 'baseTime'),
+  return _.mapValues(perExampleMeasures, (profilerMeasures: ProfilerMeasure[]) => ({
+    actualTime: reduceMeasures(profilerMeasures, 'actualTime'),
+    baseTime: reduceMeasures(profilerMeasures, 'baseTime'),
   }))
 }
 
@@ -139,7 +139,7 @@ task('perf:build', cb => {
 task('perf:run', async () => {
   const measures: ProfilerMeasureCycle[] = []
   const times = (argv.times as string) || DEFAULT_RUN_TIMES
-  const filter = argv.filter
+  const pathFilter = argv.filter
 
   const bar = process.env.CI
     ? { tick: _.noop }
@@ -159,7 +159,7 @@ task('perf:run', async () => {
       const page = await browser.newPage()
       await page.goto(`http://${config.server_host}:${config.perf_port}`)
 
-      const measuresFromStep = await page.evaluate(filter => window.runMeasures(filter), filter)
+      const measuresFromStep = await page.evaluate(filter => window.runMeasures(filter), pathFilter)
       measures.push(measuresFromStep)
       bar.tick()
 

build/gulp/tasks/stats.ts

@@ -46,9 +46,9 @@ const semverCmp = (a, b) => {
   return 0
 }
 
-function webpackAsync(config): Promise<any> {
+function webpackAsync(webpackConfig): Promise<any> {
   return new Promise((resolve, reject) => {
-    const compiler = webpack(config)
+    const compiler = webpack(webpackConfig)
     compiler.run((err, stats) => {
       const statsJson = stats.toJson()
       const { errors, warnings } = statsJson
@@ -73,14 +73,14 @@ function webpackAsync(config): Promise<any> {
 
 async function compileOneByOne(allConfigs) {
   let assets = []
-  for (const config of allConfigs) {
-    log('Compiling', config.output.filename)
+  for (const webpackConfig of allConfigs) {
+    log('Compiling', webpackConfig.output.filename)
     try {
-      const result = await webpackAsync(config)
+      const result = await webpackAsync(webpackConfig)
       assets = [...assets, ...result.assets]
       log('Done', result.assets[0].name) // All builds should produce just single asset
     } catch (err) {
-      log('Error', config.output.filename)
+      log('Error', webpackConfig.output.filename)
       throw err
     }
   }

build/gulp/tasks/test-projects.tsx

@@ -23,7 +23,7 @@ const log = (context: string) => (message: string) => {
   console.log('='.repeat(80))
 }
 
-export const runIn = path => cmd => sh(`cd ${path} && ${cmd}`)
+export const runIn = targetPath => cmd => sh(`cd ${targetPath} && ${cmd}`)
 
 const addResolutionPathsForStardustPackages = async (
   testProjectDir: string,
@@ -136,7 +136,6 @@ task('test:projects:cra-ts', async () => {
   const logger = log('test:projects:cra-ts')
   const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/cra')
 
-  //////// CREATE TEST REACT APP ///////
   logger('STEP 1. Create test React project with TSX scripts..')
 
   const testAppPath = paths.withRootAt(
@@ -146,19 +145,16 @@ task('test:projects:cra-ts', async () => {
   const runInTestApp = runIn(testAppPath())
   logger(`Test React project is successfully created: ${testAppPath()}`)
 
-  //////// ADD STARDUST AS A DEPENDENCY ///////
   logger('STEP 2. Add Stardust dependency to test project..')
 
   const packedPackages = await packStardustPackages(logger)
   await addResolutionPathsForStardustPackages(testAppPath(), packedPackages)
   await runInTestApp(`yarn add ${packedPackages['@stardust-ui/react']}`)
   logger(`✔️Stardust UI packages were added to dependencies`)
 
-  //////// REFERENCE STARDUST COMPONENTS IN TEST APP's MAIN FILE ///////
   logger("STEP 3. Reference Stardust components in test project's App.tsx")
   fs.copyFileSync(scaffoldPath('App.tsx'), testAppPath('src', 'App.tsx'))
 
-  //////// BUILD TEST PROJECT ///////
   logger('STEP 4. Build test project..')
   await runInTestApp(`yarn build`)
 

build/gulp/tasks/test-vulns.ts

@@ -14,9 +14,9 @@ const SCAN_RESULTS_DIR_PATH = paths.base(SCAN_RESULTS_DIR_NAME)
 const log = message => debug.log(message)
 log.success = message => debug.log(`✔ ${message}`)
 
-const ensureDirExists = path => {
-  if (!fs.existsSync(path)) {
-    sh(`mkdir -p ${path}`)
+const ensureDirExists = directoryPath => {
+  if (!fs.existsSync(directoryPath)) {
+    sh(`mkdir -p ${directoryPath}`)
   }
 }
 

config.ts

@@ -36,10 +36,10 @@ const paths = {
   dll: base.bind(null, envConfig.dir_dll),
   docsDist: base.bind(null, envConfig.dir_docs_dist),
   docsSrc: base.bind(null, envConfig.dir_docs_src),
-  packageDist: (packageName: string, ...paths: string[]) =>
-    base(envConfig.dir_packages, packageName, 'dist', ...paths),
-  packageSrc: (packageName: string, ...paths: string[]) =>
-    base(envConfig.dir_packages, packageName, 'src', ...paths),
+  packageDist: (packageName: string, ...passedPaths: string[]) =>
+    base(envConfig.dir_packages, packageName, 'dist', ...passedPaths),
+  packageSrc: (packageName: string, ...passedPaths: string[]) =>
+    base(envConfig.dir_packages, packageName, 'src', ...passedPaths),
   packages: base.bind(null, envConfig.dir_packages),
   perfDist: base.bind(null, envConfig.dir_perf_dist),
   perfSrc: base.bind(null, envConfig.dir_perf_src),

docs/src/app.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as _ from 'lodash'
 import { Provider, themes } from '@stardust-ui/react'
 
 import { mergeThemes } from 'src/lib'

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/ComponentControlsCodeSandbox.tsx

@@ -86,13 +86,13 @@ class ComponentControlsShowCode extends React.Component<
         skipRedirect
         template={template}
       >
-        {({ isLoading, isDeploying, active }) => {
+        {({ isLoading, isDeploying, active: isActive }) => {
           const loading = isLoading || isDeploying
           return (
             <LabelledButton
               iconName={loading ? 'spinner' : 'connectdevelop'}
               label={loading ? 'Exporting...' : 'CodeSandbox'}
-              active={active}
+              active={isActive}
             />
           )
         }}

docs/src/components/ComponentDoc/ComponentTable/ComponentTableRow.tsx

@@ -43,13 +43,13 @@ export default class ComponentTableRow extends React.Component<any, any> {
         <td>
           <ComponentPropDescription description={description} />
           {/* TODO change these according to the react-docgen-typescript generated json */}
-          {/*<ComponentPropFunctionSignature name={name} tags={tags} />*/}
-          {/*<ComponentPropEnum*/}
-          {/*showAll={showEnums}*/}
-          {/*toggle={this.toggleEnums}*/}
-          {/*type={type}*/}
-          {/*values={value}*/}
-          {/*/>*/}
+          {/* <ComponentPropFunctionSignature name={name} tags={tags} /> */}
+          {/* <ComponentPropEnum */}
+          {/* showAll={showEnums} */}
+          {/* toggle={this.toggleEnums} */}
+          {/* type={type} */}
+          {/* values={value} */}
+          {/* /> */}
         </td>
       </tr>
     )

docs/src/components/ComponentDoc/PerfChart/PerfDataProvider.tsx

@@ -27,8 +27,8 @@ const PerfDataProvider: React.FC = ({ children }) => {
           setData(responseJson)
           setLoading(false)
         })
-        .catch(error => {
-          setError(error)
+        .catch(e => {
+          setError(e)
           setLoading(false)
         })
     }

docs/src/components/ComponentPlayground.tsx

@@ -13,12 +13,12 @@ type ComponentPlaygroundProps = {
 }
 
 const ComponentPlayground: React.FunctionComponent<ComponentPlaygroundProps> = props => {
-  const playgroundPath = _.find(playgroundPaths, playgroundPath =>
+  const resultPath = _.find(playgroundPaths, playgroundPath =>
     _.includes(playgroundPath, `/${props.componentName}/`),
   )
 
-  if (playgroundPath) {
-    const PlaygroundComponent: React.FunctionComponent = examplePlaygroundContext(playgroundPath)
+  if (resultPath) {
+    const PlaygroundComponent: React.FunctionComponent = examplePlaygroundContext(resultPath)
       .default
 
     return (

docs/src/components/DocsBehaviorRoot.tsx

@@ -61,8 +61,8 @@ class DocsBehaviorRoot extends React.Component<any, any> {
                     <>
                       <strong>Description:</strong>
                       <br />
-                      {variation.description.split('\n').map((splittedText, keyValue) => (
-                        <span key={keyValue}>
+                      {variation.description.split('\n').map((splittedText, key) => (
+                        <span key={key}>
                           {splittedText}
                           <br />
                         </span>
@@ -74,8 +74,8 @@ class DocsBehaviorRoot extends React.Component<any, any> {
                       {variation.description && <br />}
                       <strong>Specification:</strong>
                       <br />
-                      {variation.specification.split('\n').map((splittedText, keyValue) => (
-                        <span key={keyValue}>
+                      {variation.specification.split('\n').map((splittedText, key) => (
+                        <span key={key}>
                           {splittedText}
                           <br />
                         </span>

docs/src/components/ExampleSnippet/renderElementToJSX.ts

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import reactElementToJSXString from 'react-element-to-jsx-string'
 
-const renderElementToJSX = (element: React.ReactNode, triggerErrorOnRenderFn: boolean = false) => {
+const renderElementToJSX = (target: React.ReactNode, triggerErrorOnRenderFn: boolean = false) => {
   let renderHasFunction
 
-  const jsxMarkup = reactElementToJSXString(element, {
+  const jsxMarkup = reactElementToJSXString(target, {
     displayName: (element: React.ReactElement<any>): string =>
       // @ts-ignore
       element.type.displayName ||

docs/src/components/ExternalExampleLayout.tsx

@@ -48,8 +48,8 @@ class ExternalExampleLayout extends React.Component<
     const exampleFilename = exampleKebabNameToSourceFilename(exampleName)
 
     const examplePath = _.find(examplePaths, path => {
-      const { exampleName } = parseExamplePath(path)
-      return exampleFilename === exampleName
+      const { exampleName: parsedExampleName } = parseExamplePath(path)
+      return exampleFilename === parsedExampleName
     })
 
     if (!examplePath) return <PageNotFound />

docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as _ from 'lodash'
 import { Avatar, Chat } from '@stardust-ui/react'
 
 const reactions = [

docs/src/examples/components/Provider/Types/ProviderExample.shorthand.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { Provider } from '@stardust-ui/react'
 
-const theme = { siteVariables: { brand: 'cornflowerblue' } }
+const customTheme = { siteVariables: { brand: 'cornflowerblue' } }
 
 const ProviderExampleShorthand = () => (
-  <Provider theme={theme}>
+  <Provider theme={customTheme}>
     <div>
       <p>
         Use the <code>Provider.Consumer</code> to access the <code>theme</code>:

docs/src/prototypes/MenuButton/MenuButton.tsx

@@ -47,7 +47,7 @@ class MenuButton extends React.Component<MenuButtonProps, MenuButtonState> {
   buttonNode: HTMLButtonElement
   menuNode: HTMLUListElement
 
-  componentDidUpdate(_, prevState: MenuButtonState) {
+  componentDidUpdate(prevProps, prevState: MenuButtonState) {
     if (!prevState.menuOpen && this.state.menuOpen) {
       document.addEventListener('click', this.handleDocumentClick)
 
@@ -176,7 +176,7 @@ class MenuButton extends React.Component<MenuButtonProps, MenuButtonState> {
             )}
           </PopperReference>
           <Popper placement={placement}>
-            {({ placement, ref, style }) =>
+            {({ placement: actualPlacement, ref, style }) =>
               menuOpen && (
                 <Ref
                   innerRef={(menuNode: HTMLUListElement) => {
@@ -187,7 +187,7 @@ class MenuButton extends React.Component<MenuButtonProps, MenuButtonState> {
                   {Menu.create(menu, {
                     defaultProps: {
                       ...accessibilityBehavior.attributes.menu,
-                      'data-placement': placement,
+                      'data-placement': actualPlacement,
                       styles: { background: '#fff', zIndex: 1 },
                       vertical: true,
                     },

docs/src/prototypes/chatPane/services/dateUtils.ts

@@ -22,8 +22,8 @@ export const getRandomDates = (count, daysAgo: number): Date[] => {
   ].slice(0, count)
 }
 
-export const getTimestamp = (date: Date): { short: string; long: string } => {
-  const dateMoment = moment(date)
+export const getTimestamp = (inputDate: Date): { short: string; long: string } => {
+  const dateMoment = moment(inputDate)
   const timeString = dateMoment.format('LT')
 
   return {
@@ -32,17 +32,17 @@ export const getTimestamp = (date: Date): { short: string; long: string } => {
   }
 }
 
-export const getFriendlyDateString = (date: Date): string => {
+export const getFriendlyDateString = (inputDate: Date): string => {
   const momentNow = moment()
-  if (areMomentsSameDay(momentNow, date)) {
+  if (areMomentsSameDay(momentNow, inputDate)) {
     return 'Today'
   }
 
-  if (areMomentsSameDay(momentNow.subtract(1, 'd'), date)) {
+  if (areMomentsSameDay(momentNow.subtract(1, 'd'), inputDate)) {
     return 'Yesterday'
   }
 
-  return moment(date).format('LL')
+  return moment(inputDate).format('LL')
 }
 
 export const areSameDay = (d1: Date, d2: Date): boolean => areMomentsSameDay(moment(d1), d2)

docs/src/prototypes/chatPane/services/messageFactoryMock.tsx

@@ -87,8 +87,8 @@ function createMessageContent(message: MessageData): ShorthandValue {
 }
 
 function createMessageContentWithAttachments(content: string, messageId: string): JSX.Element {
-  const menuClickHandler = content => e => {
-    alert(`${content} clicked`)
+  const menuClickHandler = message => e => {
+    alert(`${message} clicked`)
     e.stopPropagation()
   }