From 068307da9e8ed72587cb8c58bf0dbd7c6c4dfa8f Mon Sep 17 00:00:00 2001 From: Jim Cummins Date: Thu, 13 Feb 2025 11:55:43 -0600 Subject: [PATCH 1/8] fix: remove unused react space --- pnpm-workspace.yaml | 2 +- react/.gitignore | 2 - react/.npmignore | 2 - react/README.md | 565 ------------------------- react/index.ts | 28 -- react/package.json | 45 -- react/rules/a11y.ts | 271 ------------ react/rules/base.ts | 142 ------- react/rules/classComponents.ts | 126 ------ react/rules/hooks.ts | 15 - react/rules/preferFunctionComponent.ts | 13 - react/rules/props.ts | 82 ---- react/tsconfig.json | 9 - 13 files changed, 1 insertion(+), 1301 deletions(-) delete mode 100644 react/.gitignore delete mode 100644 react/.npmignore delete mode 100644 react/README.md delete mode 100644 react/index.ts delete mode 100644 react/package.json delete mode 100644 react/rules/a11y.ts delete mode 100644 react/rules/base.ts delete mode 100644 react/rules/classComponents.ts delete mode 100644 react/rules/hooks.ts delete mode 100644 react/rules/preferFunctionComponent.ts delete mode 100644 react/rules/props.ts delete mode 100644 react/tsconfig.json diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 3aa345a064..06dc4c5de0 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,4 +1,4 @@ packages: # - css-in-js -# - react +- react - typescript diff --git a/react/.gitignore b/react/.gitignore deleted file mode 100644 index 491fc35975..0000000000 --- a/react/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -node_modules -lib diff --git a/react/.npmignore b/react/.npmignore deleted file mode 100644 index c314862cef..0000000000 --- a/react/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -rules -*.ts diff --git a/react/README.md b/react/README.md deleted file mode 100644 index 4b297fc92e..0000000000 --- a/react/README.md +++ /dev/null @@ -1,565 +0,0 @@ -# Airbnb React/JSX Style Guide - -*A mostly reasonable approach to React and JSX* - -This style guide is mostly based on the standards that are currently prevalent in JavaScript, although some conventions (i.e async/await or static class fields) may still be included or prohibited on a case-by-case basis. Currently, anything prior to stage 3 is not included nor recommended in this guide. - -## Table of Contents - - 1. [Class vs Function](#class-vs-function) - 1. [Naming](#naming) - 1. [Declaration](#declaration) - 1. [Alignment](#alignment) - 1. [Quotes](#quotes) - 1. [Spacing](#spacing) - 1. [Props](#props) - 1. [Refs](#refs) - 1. [Parentheses](#parentheses) - 1. [Tags](#tags) - 1. [Methods](#methods) - 1. [Ordering](#ordering) - 1. [`isMounted`](#ismounted) - -## Class vs Function - - -[**1.1**](#class-vs-function--functions-always) ‣ Always write function components with hooks, never class components. (Error Boundaries are the sole exception; see below) - - [`react-prefer-function-component/react-prefer-function-component`](https://github.com/tatethurston/eslint-plugin-react-prefer-function-component#readme) - -```tsx -// bad -const Clock = React.createClass({ - // I could write literally anything in here - - // Seriously do not use createClass - - // It is extremely deprecated -}); - -// bad -class Clock extends React.Component { - constructor(props) { - super(props); - this.state = { - date: props.startDate || new Date() - }; - } - - render() { - return ( -
-

Hello, world!

-

It is {this.state.date.toLocaleTimeString()}.

-
- ); - } -} - -// good -interface ClockProps { - startDate?: Date; -} -function Clock({ - startDate = new Date(), -}: ClockProps) { - const [date, setDate] = React.useState(startDate); - return ( -
-

Hello, world!

-

It is {date.toLocaleTimeString()}.

-
- ); -} -``` - ---- - - -[**1.2**](#class-vs-function--error-boundary) ‣ Error Boundaries are the exception to the rule of always writing function components because there is currently no way to implement them as functions. - -## Naming - - -[**2.1**](#naming--components) ‣ Components should be named using PascalCase. - - [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) - -```tsx -// bad -function fooBar({ /*...*/ }) { - // ... - return
{/*...*/}
; -} - -// good -function FooBar({ /*...*/ }) { - // ... - return
{/*...*/}
; -} -``` - - -[**2.2**](#naming--filenames) ‣ The filename should match the primary exported item, and use `.tsx` for components and `.ts` for other items such as hooks where the file contains no JSX. - - [`react/jsx-filename-extension`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md) - -```tsx -// bad -import useThing from "./UseThing"; - -// good -import useThing from "./useThing"; - -// bad -import FooComponent from "./foo-component"; - -// good -import FooComponent from "./FooComponent"; -``` - -## Declaration - - - Do not use `displayName` for naming components. Instead, name the component by reference. - - ```tsx - // bad - export default React.createClass({ - displayName: 'ReservationCard', - // stuff goes here - }); - - // good - export default class ReservationCard extends React.Component { - } - ``` - -## Alignment - - - Follow these alignment styles for JSX syntax. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) [`react/jsx-closing-tag-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md) - - ```tsx - // bad - - - // good - - - // if props fit in one line then keep it on the same line - - - // children get indented normally - - - - - // bad - {showButton && -