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)
 }
 
 // ----------------------------------------
@@ -227,7 +227,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)
@@ -244,7 +244,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'),
   }))
 }
 

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}`)
   }
 }
 

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/ComponentPropsTable/ComponentPropsRow.tsx

@@ -43,13 +43,13 @@ export default class ComponentPropsRow 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/ExternalExampleLayout.tsx

@@ -47,10 +47,10 @@ class ExternalExampleLayout extends React.Component<
     const { exampleName } = this.props.match.params
     const exampleFilename = exampleKebabNameToSourceFilename(exampleName)
 
-    const examplePath = _.find(examplePaths, path => {
-      const { exampleName } = parseExamplePath(path)
-      return exampleFilename === exampleName
-    })
+    const examplePath = _.find(
+      examplePaths,
+      path => exampleFilename === parseExamplePath(path).exampleName,
+    )
 
     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/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()
   }
 

packages/internal-tooling/eslint/index.js

@@ -9,14 +9,16 @@ module.exports = {
   rules: {
     // False positive on arg types:
     // https://github.com/typescript-eslint/typescript-eslint/issues/46
-    // '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }],
+    '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }],
+
     'import/no-unresolved': 'off',
     'prettier/prettier': 'error',
     'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }],
+    'no-shadow': 'off', // https://github.com/stardust-ui/react/pull/1261#pullrequestreview-231005092
+    'no-unused-vars': 'off', // we use @typescript-eslint/no-unused-vars instead
     semi: ['error', 'never'],
 
     // Temporary disabled rules
-    '@typescript-eslint/no-unused-vars': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
     'jsx-a11y/no-static-element-interactions': 'off',
     'jsx-a11y/alt-text': 'off',
@@ -83,20 +85,17 @@ module.exports = {
     'no-restricted-syntax': 'off',
     'no-throw-literal': 'off',
     'no-sparse-arrays': 'off',
-    'no-shadow': 'off',
     'no-undef': 'off',
     'no-undef-init': 'off',
     'no-underscore-dangle': 'off',
     'no-unused-expressions': 'off',
     'no-useless-return': 'off',
-    'no-unused-vars': 'off',
     'no-empty-function': 'off',
     'no-useless-constructor': 'off',
     'no-useless-escape': 'off',
     'no-use-before-define': 'off',
     'operator-assignment': 'off',
     'prefer-destructuring': 'off',
-    'spaced-comment': 'off',
   },
   overrides: [
     {

packages/react/src/components/Avatar/Avatar.tsx

@@ -80,7 +80,7 @@ class Avatar extends UIComponent<ReactProps<AvatarProps>, any> {
       const initials = reducedName
         .split(' ')
         .filter(item => item !== '')
-        .map(name => name.charAt(0))
+        .map(item => item.charAt(0))
         .reduce((accumulator, currentValue) => accumulator + currentValue)
 
       if (initials.length > 2) {

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -978,7 +978,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     e: React.SyntheticEvent,
     item: ShorthandValue,
     predefinedProps: DropdownSelectedItemProps,
-    DropdownSelectedItemProps: DropdownSelectedItemProps,
+    dropdownSelectedItemProps: DropdownSelectedItemProps,
     rtl: boolean,
   ) {
     const { activeSelectedIndex, value } = this.state as {
@@ -991,7 +991,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     switch (keyboardKey.getCode(e)) {
       case keyboardKey.Delete:
       case keyboardKey.Backspace:
-        this.handleSelectedItemRemove(e, item, predefinedProps, DropdownSelectedItemProps)
+        this.handleSelectedItemRemove(e, item, predefinedProps, dropdownSelectedItemProps)
         break
       case previousKey:
         if (value.length > 0 && !_.isNil(activeSelectedIndex) && activeSelectedIndex > 0) {
@@ -1016,7 +1016,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
       default:
         break
     }
-    _.invoke(predefinedProps, 'onKeyDown', e, DropdownSelectedItemProps)
+    _.invoke(predefinedProps, 'onKeyDown', e, dropdownSelectedItemProps)
   }
 
   private handleTriggerButtonOrListFocus = () => {
@@ -1039,13 +1039,13 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     e: React.SyntheticEvent,
     item: ShorthandValue,
     predefinedProps: DropdownSelectedItemProps,
-    DropdownSelectedItemProps: DropdownSelectedItemProps,
+    dropdownSelectedItemProps: DropdownSelectedItemProps,
   ) {
     this.trySetState({ activeSelectedIndex: null })
     this.removeItemFromValue(item)
     this.tryFocusSearchInput()
     this.tryFocusTriggerButton()
-    _.invoke(predefinedProps, 'onRemove', e, DropdownSelectedItemProps)
+    _.invoke(predefinedProps, 'onRemove', e, dropdownSelectedItemProps)
   }
 
   private removeItemFromValue(item?: ShorthandValue) {