chore(eslint): add lint rule to disable access modifiers (#1458)

* chore(eslint): add lint rule to disable access modifiers

* fix files

* fixes for master, final cleanup

* apply only for .tsx files

* fix review comment

Author: layershifter

build/gulp/tasks/test-projects.tsx

@@ -46,6 +46,7 @@ const packStardustPackages = async (logger: Function): Promise<PackedPackages> =
   const stardustPackages = lernaAliases({ sourceDirectory: false })
 
   // We don't want to pack a package with our dev tools
+  delete stardustPackages['@stardust-ui/eslint-plugin']
   delete stardustPackages['@stardust-ui/internal-tooling']
 
   await Promise.all(

build/gulp/tasks/test-projects/cra/App.tsx

@@ -16,7 +16,7 @@ import {
 import * as React from 'react'
 
 class App extends React.Component {
-  public render() {
+  render() {
     return (
       <Provider theme={themes.teams}>
         <div>

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

@@ -3,24 +3,24 @@ import ComponentButton from './ComponentButton'
 import * as _ from 'lodash'
 
 export default class ComponentControlsCopyLink extends React.Component<any, any> {
-  private mounted: boolean
-  private readonly btnLabel = 'Permalink'
+  mounted: boolean
+  readonly btnLabel = 'Permalink'
 
-  public state: any = {}
+  state: any = {}
 
-  public shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState) {
     return this.state.active !== nextState.active
   }
 
-  public componentDidMount() {
+  componentDidMount() {
     this.mounted = true
   }
 
-  public componentWillUnmount() {
+  componentWillUnmount() {
     this.mounted = false
   }
 
-  public render() {
+  render() {
     const { active } = this.state
 
     return (
@@ -32,13 +32,13 @@ export default class ComponentControlsCopyLink extends React.Component<any, any>
     )
   }
 
-  private handleClick = e => {
+  handleClick = e => {
     e.preventDefault()
     _.invoke(this.props, 'onClick', e, this.props)
 
     this.setState({ active: true })
     setTimeout(this.resetActive, 3000)
   }
 
-  private resetActive = () => this.mounted && this.setState({ active: false })
+  resetActive = () => this.mounted && this.setState({ active: false })
 }

docs/src/components/ComponentDoc/ComponentExamples.tsx

@@ -13,11 +13,11 @@ interface ComponentExamplesProps {
 }
 
 export default class ComponentExamples extends React.Component<ComponentExamplesProps, any> {
-  public static propTypes = {
+  static propTypes = {
     displayName: PropTypes.string.isRequired,
   }
 
-  public render() {
+  render() {
     return this.renderExamples() || this.renderMissingExamples()
   }
 
@@ -29,7 +29,7 @@ export default class ComponentExamples extends React.Component<ComponentExamples
    * 2. for every ./docs/src/components/{...}/{...}MyComponent{...}Example{...}.tsx there needs to be a shorthand version of it:
    *              ./docs/src/components/{...}/{...}MyComponent{...}Example{...}.shorthand.tsx
    */
-  private renderExamples = (): JSX.Element | null => {
+  renderExamples = (): JSX.Element | null => {
     const { displayName } = this.props
 
     // rule #1
@@ -56,7 +56,7 @@ export default class ComponentExamples extends React.Component<ComponentExamples
     )
   }
 
-  private renderMissingExamples = () => {
+  renderMissingExamples = () => {
     const { displayName } = this.props
 
     return this.renderElementWrappedInGrid(
@@ -66,7 +66,7 @@ export default class ComponentExamples extends React.Component<ComponentExamples
     )
   }
 
-  private renderMissingShorthandExamples = (missingPaths: string[]) => {
+  renderMissingShorthandExamples = (missingPaths: string[]) => {
     return this.renderElementWrappedInGrid(
       <ContributionPrompt>
         <div>Looks like we're missing examples at following paths:</div>
@@ -75,9 +75,9 @@ export default class ComponentExamples extends React.Component<ComponentExamples
     )
   }
 
-  private renderElementWrappedInGrid = (Element: JSX.Element) => <Segment content={Element} />
+  renderElementWrappedInGrid = (Element: JSX.Element) => <Segment content={Element} />
 
-  private getMissingExamplePaths(displayName: string, allPaths: string[]): string[] {
+  getMissingExamplePaths(displayName: string, allPaths: string[]): string[] {
     const examplesPattern = `\./${displayName}/[\\w/]+Example`
     const [normalExtension, shorthandExtension] = [
       componentAPIs.children.fileSuffix,

docs/src/components/CopyToClipboard.tsx

@@ -16,7 +16,7 @@ class CopyToClipboard extends React.Component<CopyToClipboardProps, CopyToClipbo
     active: false,
   }
 
-  private timeoutId
+  timeoutId
 
   static defaultProps = {
     timeout: 3000,

docs/src/components/Sidebar/Sidebar.tsx

@@ -52,7 +52,7 @@ class Sidebar extends React.Component<any, any> {
     this._searchInput = (findDOMNode(this) as any).querySelector('.ui.input input')
   }
 
-  private handleDocumentKeyDown = e => {
+  handleDocumentKeyDown = e => {
     const code = keyboardKey.getCode(e)
     const isAZ = code >= 65 && code <= 90
     const hasModifier = e.altKey || e.ctrlKey || e.metaKey
@@ -61,7 +61,7 @@ class Sidebar extends React.Component<any, any> {
     if (!hasModifier && isAZ && bodyHasFocus) this._searchInput.focus()
   }
 
-  private handleItemClick = () => {
+  handleItemClick = () => {
     const { query } = this.state
 
     if (query) this.setState({ query: '' })

docs/src/prototypes/IconViewer/index.tsx

@@ -33,7 +33,7 @@ const renderStardustIconName = (icon, isOutline = false) => {
 }
 
 class IconViewerExample extends React.Component<any, {}> {
-  private readonly iconFilters = {
+  readonly iconFilters = {
     All: () => true,
     Exported: (icon: TeamsProcessedSvgIconSpec) => icon.exportedAs,
     'Not Exported': (icon: TeamsProcessedSvgIconSpec) => !icon.exportedAs,

docs/src/prototypes/chatPane/chatPaneContent.tsx

@@ -9,7 +9,7 @@ import chatProtoStyle from './chatProtoStyle'
 export type ChatPaneContainerProps = Props<{ chat: ChatData }>
 
 class ChatPaneContainer extends React.PureComponent<ChatPaneContainerProps> {
-  public render() {
+  render() {
     const { chat } = this.props
     const items = this.generateChatItems(chat)
 
@@ -35,7 +35,7 @@ class ChatPaneContainer extends React.PureComponent<ChatPaneContainerProps> {
     )
   }
 
-  private generateChatItems(chat: ChatData): JSX.Element[] {
+  generateChatItems(chat: ChatData): JSX.Element[] {
     return generateChatProps(chat).map(
       ({ mine, gutter, message: { itemType, ...props } }, index) => {
         const ElementType = this.getElementType(itemType)
@@ -73,7 +73,7 @@ class ChatPaneContainer extends React.PureComponent<ChatPaneContainerProps> {
     )
   }
 
-  private getElementType = (itemType: ChatItemTypes): React.ElementType => {
+  getElementType = (itemType: ChatItemTypes): React.ElementType => {
     switch (itemType) {
       case ChatItemTypes.message:
         return Chat.Message
@@ -82,13 +82,13 @@ class ChatPaneContainer extends React.PureComponent<ChatPaneContainerProps> {
     }
   }
 
-  private handleScrollRef(scrollRef: Scrollbars) {
+  handleScrollRef(scrollRef: Scrollbars) {
     if (scrollRef) {
       scrollRef.scrollToBottom()
     }
   }
 
-  private getMessagePreviewForScreenReader(props) {
+  getMessagePreviewForScreenReader(props) {
     /*  Show the first 44 characters from the message, reasons:
           - as NVDA splits it into 2 lines if more is shown
           - for announcements feature, messaging team went with 44 characters but that was not based on loc issues but some UI real estate issue.  */

docs/src/prototypes/chatPane/chatPaneHeader.tsx

@@ -9,7 +9,7 @@ export interface ChatPaneHeaderProps {
 }
 
 class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
-  public render() {
+  render() {
     return (
       <Flex column>
         <Flex.Item>{this.renderBanner()}</Flex.Item>
@@ -19,7 +19,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
     )
   }
 
-  private renderBanner(): React.ReactElement {
+  renderBanner(): React.ReactElement {
     return (
       <Segment
         content={
@@ -41,7 +41,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
     )
   }
 
-  private renderMainArea(): React.ReactElement {
+  renderMainArea(): React.ReactElement {
     const { chat } = this.props
 
     return (
@@ -74,7 +74,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
     )
   }
 
-  private renderHeaderButtons(): React.ReactElement {
+  renderHeaderButtons(): React.ReactElement {
     return (
       <div style={{ display: 'inline-flex' }}>
         <Button.Group

docs/src/prototypes/mentions/PortalAtCursorPosition.ts

@@ -8,17 +8,17 @@ export interface PortalAtCursorPositionProps {
 }
 
 export class PortalAtCursorPosition extends React.Component<PortalAtCursorPositionProps> {
-  private mountNodeInstance: HTMLElement = null
+  mountNodeInstance: HTMLElement = null
 
   static defaultProps = {
     mountNodeId: 'portal-at-cursor-position',
   }
 
-  public componentWillUnmount() {
+  componentWillUnmount() {
     this.removeMountNode()
   }
 
-  public render() {
+  render() {
     const { children, open } = this.props
 
     this.setupMountNode()
@@ -27,7 +27,7 @@ export class PortalAtCursorPosition extends React.Component<PortalAtCursorPositi
       : null
   }
 
-  private setupMountNode = () => {
+  setupMountNode = () => {
     const { mountNodeId, open } = this.props
 
     if (open) {
@@ -37,7 +37,7 @@ export class PortalAtCursorPosition extends React.Component<PortalAtCursorPositi
     }
   }
 
-  private removeMountNode = () => {
+  removeMountNode = () => {
     if (this.mountNodeInstance) {
       removeElement(this.mountNodeInstance)
       this.mountNodeInstance = null