Merge pull request #99 from Yelp/shawn_no_more_defaultprops

Modernize code + dependencies to prepare for React 19
Yelp · Apr 29, 2024 · c4e7199 · c4e7199
2 parents 35ef290 + 350f0a9
commit c4e7199
Show file tree

Hide file tree

Showing 16 changed files with 362 additions and 285 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,7 +1,7 @@
 module.exports = {
-    extends: ['airbnb', 'plugin:flowtype/recommended', 'prettier', 'prettier/flowtype', 'prettier/react'],
+    extends: ['airbnb', 'plugin:flowtype/recommended', 'prettier'],
 
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
 
     plugins: ['flowtype', 'prettier'],
 
@@ -11,6 +11,8 @@ module.exports = {
         // https://github.com/airbnb/javascript/pull/985#issuecomment-239145468
         'react/jsx-filename-extension': 'off',
 
+        'react/jsx-props-no-spreading': 'off',
+
         // We use Flow in most of our projects so we don't really need prop-type validation.
         // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
         'react/prop-types': 'off',

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,33 @@
+---
+name: Release new version
+on:
+    release:
+        types: [created]
+
+jobs:
+    test:
+        runs-on: ubuntu-20.04
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-python@v5
+              with:
+                  python-version: '3.10'
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '16.x'
+            - run: pip3 install --user virtualenv
+            - run: make test
+
+    publish-npm:
+        needs: test
+        runs-on: ubuntu-20.04
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '16.x'
+                  registry-url: https://registry.npmjs.org/
+            - run: yarn
+            - run: yarn publish
+              env:
+                  NODE_AUTH_TOKEN: ${{secrets.npm_token}}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,16 @@
+---
+name: Run Tests
+on: [push]
+jobs:
+    test:
+        runs-on: ubuntu-20.04
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-python@v5
+              with:
+                  python-version: '3.10'
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '16.x'
+            - run: pip3 install --user virtualenv
+            - run: make test
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -1,31 +1,31 @@
 repos:
--   repo: https://github.com/pre-commit/pre-commit-hooks
-    sha: v1.2.0
-    hooks:
-    -   id: trailing-whitespace
-    -   id: end-of-file-fixer
-    -   id: check-added-large-files
-    -   id: check-json
-    -   id: check-yaml
--   repo: https://github.com/prettier/prettier
-    sha: 1.10.2
-    hooks:
-    -   id: prettier
-        name: prettier
-        # Prettier runs on JavaScript as part of eslint
-        exclude_types: [javascript]
-        exclude: ^package\.json
--   repo: local
-    hooks:
-    -   id: eslint
-        name: eslint
-        entry: yarn eslint
-        language: system
-        files: \.js$
-        args: ['--fix', '--ignore-pattern=!.eslintrc.js']
--   repo: https://github.com/Yelp/detect-secrets
-    rev: 0.9.1
-    hooks:
-    -   id: detect-secrets
-        args: ['--baseline', '.secrets.baseline']
-        exclude: tests/.*
+    - repo: https://github.com/pre-commit/pre-commit-hooks
+      rev: v1.2.0
+      hooks:
+          - id: trailing-whitespace
+          - id: end-of-file-fixer
+          - id: check-added-large-files
+          - id: check-json
+          - id: check-yaml
+    - repo: https://github.com/pre-commit/mirrors-prettier
+      rev: v3.1.0
+      hooks:
+          - id: prettier
+            name: prettier
+            # Prettier runs on JavaScript as part of eslint
+            exclude_types: [javascript]
+            exclude: ^package\.json
+    - repo: local
+      hooks:
+          - id: eslint
+            name: eslint
+            entry: yarn eslint
+            language: system
+            files: \.js$
+            args: ['--fix', '--ignore-pattern=!.eslintrc.js']
+    - repo: https://github.com/Yelp/detect-secrets
+      rev: 0.9.1
+      hooks:
+          - id: detect-secrets
+            args: ['--baseline', '.secrets.baseline']
+            exclude: tests/.*
diff --git a/.travis.yml b/.travis.yml
diff --git a/.yarnrc b/.yarnrc
@@ -1,2 +1,3 @@
 --add.no-lockfile true
 --install.no-lockfile true
+--install.production false
diff --git a/Makefile b/Makefile
@@ -31,14 +31,14 @@ test: build venv node_modules
 
 venv: Makefile requirements-dev.txt
 	rm -rf venv
-	virtualenv venv --python=python3.6
+	virtualenv venv --python=python3.10
 	venv/bin/pip install -r requirements-dev.txt
 
 src/components/LemonReset/LemonReset.css: node_modules patch-meyer-reset.js
 	./patch-meyer-reset.js
 
 node_modules: package.json
-	yarn
+	yarn install
 
 .PHONY: clean
 clean:

diff --git a/PUBLISH.md b/PUBLISH.md
@@ -0,0 +1,10 @@
+# 📚 How to publish a new version
+
+After merging your PR to master, you may want to release a new version of **lemon-reset** to NPM registry. Here comes the instructions.
+
+## Steps
+
+1. Figure out what kind of release you want to make, `major`, `minor` or `patch`. We follow [Semantic Versioning](https://semver.org/#summary).
+2. Update version in [package.json](package.json) directly in <https://github.com/Yelp/lemon-reset/edit/master/package.json> and commit changes
+3. Draft a new release in <https://github.com/Yelp/lemon-reset/releases/new>. Remember to use tag `vX.Y.Z` instead of `X.Y.Z`
+4. That's it. **Github Actions** will start a release process in the Actions tab.
diff --git a/README.md b/README.md
@@ -1,8 +1,7 @@
 # 🍋 Lemon Reset
 
 [![npm](https://img.shields.io/npm/v/lemon-reset.svg)](https://yarn.pm/lemon-reset)
-[![Build Status](https://travis-ci.org/Yelp/lemon-reset.svg?branch=master)](https://travis-ci.org/Yelp/lemon-reset)
-[![gzip size](http://img.badgesize.io/https://unpkg.com/lemon-reset/dist/lemon-reset.js?compression=gzip)](https://unpkg.com/lemon-reset/dist/lemon-reset.js)
+[![gzip size](https://badges.herokuapp.com/size/npm/lemon-reset/dist/lemon-reset.js?gzip=true)](https://unpkg.com/lemon-reset/dist/lemon-reset.js)
 [![install size](https://packagephobia.now.sh/badge?p=lemon-reset)](https://packagephobia.now.sh/result?p=lemon-reset)
 
 A set of React components that provide [Meyer Reset](https://meyerweb.com/eric/tools/css/reset/) styles for use with [CSS Modules](https://github.com/css-modules/css-modules).
@@ -51,7 +50,7 @@ export default Container;
 Pass in any props! If you need to [pass in a ref](https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element), you'll need to pass it in as a tagRef:
 
 ```javascript
-<Span tagRef={span => console.log(span)}>This has a ref</Span>
+<Span tagRef={(span) => console.log(span)}>This has a ref</Span>
 ```
 
 ## Build

diff --git a/babel.config.js b/babel.config.js
@@ -4,9 +4,17 @@ module.exports = ({ env }) => ({
             '@babel/preset-env',
             {
                 modules: env() === 'module' ? false : 'auto',
+                targets: '> 0.25%, not dead',
             },
         ],
         '@babel/preset-flow',
-        '@babel/preset-react',
+        [
+            '@babel/preset-react',
+            {
+                runtime: 'automatic',
+                useBuiltIns: true,
+                useSpread: true,
+            },
+        ],
     ],
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lemon-reset",
-  "version": "1.3.2",
+  "version": "2.0.0",
   "license": "MIT",
   "repository": "https://github.com/Yelp/lemon-reset",
   "description": "Provides a React component with Meyer Reset styles for every element in Meyer Reset. For use with css-modules.",
@@ -12,45 +12,47 @@
     "typecheck": "flow check"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.3",
-    "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.5",
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.24.4",
+    "@babel/eslint-parser": "^7.24.1",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-flow": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.0.0",
     "css-loader": "^2.0.1",
     "empty": "^0.10.1",
     "enzyme": "^3.1.1",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-adapter-react-16": "^1.15.8",
     "enzyme-to-json": "^3.3.0",
-    "eslint": "^4.9.0",
-    "eslint-config-airbnb": "^17.0.0",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-plugin-flowtype": "^3.2.1",
+    "eslint": "^8.0.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.0.0",
+    "eslint-plugin-flowtype": "^8.0.0",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.4.0",
     "flow-copy-source": "^2.0.2",
-    "flow-bin": "^0.90.0",
+    "flow-bin": "^0.100.0",
     "flow-typed": "^2.5.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
+    "jest": "^29.7.0",
     "mini-css-extract-plugin": "^0.5.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "prettier": "^1.10.2",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "prettier": "^3.1.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "reset-css": "^4.0.0",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "webpack": "^4.27.1",
-    "webpack-cli": "^3.1.2"
+    "terser-webpack-plugin": "^5.0.0",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "15.x || 16.x"
+    "react": ">=16.14.0"
+  },
+  "engine": {
+    "node": ">=16.0.0"
   },
   "files": [
     "dist",

diff --git a/src/components/LemonReset/LemonReset.js b/src/components/LemonReset/LemonReset.js
@@ -93,13 +93,13 @@ type Props<T> = {
     tagRef?: ?React.Ref<T>,
 };
 
-export const LemonReset = <T: string & LemonResetType>({
+export function LemonReset<T: string & LemonResetType>({
     tag: Tag,
     children,
-    className,
+    className = '',
     tagRef,
     ...otherProps
-}: Props<T>) => {
+}: Props<T>) {
     let classes = styles[`lemon--${Tag}`];
     if (className != null && className !== '') {
         classes += ` ${className}`;
@@ -109,16 +109,10 @@ export const LemonReset = <T: string & LemonResetType>({
             {children}
         </Tag>
     );
-};
+}
 
 LemonReset.displayName = 'LemonReset';
 
-LemonReset.defaultProps = {
-    children: null,
-    className: '',
-    tagRef: null,
-};
-
 type TagProps = {
     children?: React.Node,
     className?: string,
@@ -129,20 +123,17 @@ type NoChildTagProps = {
 };
 
 function createTagComponent(tag: LemonResetType, displayName: string) {
-    const component = (props: TagProps) => <LemonReset tag={tag} {...props} />;
-    component.defaultProps = {
-        className: '',
-    };
+    const component = ({ className = '', ...otherProps }: TagProps) => (
+        <LemonReset tag={tag} className={className} {...otherProps} />
+    );
     component.displayName = displayName;
     return component;
 }
 
 function createNoChildTagComponent(tag: LemonResetType, displayName: string) {
-    const component = (props: NoChildTagProps) => <LemonReset tag={tag} {...props} />;
-    component.defaultProps = {
-        children: null,
-        className: '',
-    };
+    const component = ({ className = '', ...otherProps }: NoChildTagProps) => (
+        <LemonReset tag={tag} className={className} {...otherProps} />
+    );
     component.displayName = displayName;
     return component;
 }