From ecc326dd805174564ab637c9fbb3a099466e23eb Mon Sep 17 00:00:00 2001 From: Shawn Walton Date: Thu, 25 Apr 2024 16:33:56 -0700 Subject: [PATCH 1/7] modernize code + dependencies --- .eslintrc.js | 6 +- .pre-commit-config.yaml | 60 ++-- .travis.yml | 14 +- Makefile | 2 +- babel.config.js | 10 +- package.json | 50 ++-- src/components/LemonReset/LemonReset.js | 35 +-- tests/components/LemonReset/LemonReset.js | 281 +++++++++--------- .../LemonReset.browser.test.js.snap | 52 +++- .../LemonReset.node.test.js.snap | 52 +++- webpack.config.js | 16 +- 11 files changed, 309 insertions(+), 269 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 26791ce..5220911 100644 --- 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/.pre-commit-config.yaml b/.pre-commit-config.yaml index 2ae4899..9605472 100644 --- 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 index ceafeed..e93a7a3 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,18 +3,18 @@ language: node_js dist: trusty node_js: - - "8" + - '8' before_install: - - curl -L https://yarnpkg.com/install.sh | bash -s -- --version 1.3.2 - - export PATH="$HOME/.yarn/bin:$PATH" - - pyenv global 3.6 + - curl -L https://yarnpkg.com/install.sh | bash -s -- --version 1.3.2 + - export PATH="$HOME/.yarn/bin:$PATH" + - pyenv global 3.10 cache: - yarn: true + yarn: true install: - - yarn + - yarn script: - - make test + - make test diff --git a/Makefile b/Makefile index 446ca82..204558a 100644 --- a/Makefile +++ b/Makefile @@ -31,7 +31,7 @@ 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 diff --git a/babel.config.js b/babel.config.js index a05f076..ad38eed 100644 --- 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 index 8f3a793..150ad27 100644 --- a/package.json +++ b/package.json @@ -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 index dddad62..9890de8 100644 --- a/src/components/LemonReset/LemonReset.js +++ b/src/components/LemonReset/LemonReset.js @@ -93,13 +93,13 @@ type Props = { tagRef?: ?React.Ref, }; -export const LemonReset = ({ +export function LemonReset({ tag: Tag, - children, - className, - tagRef, + children = null, + className = '', + tagRef = null, ...otherProps -}: Props) => { +}: Props) { let classes = styles[`lemon--${Tag}`]; if (className != null && className !== '') { classes += ` ${className}`; @@ -109,16 +109,10 @@ export const LemonReset = ({ {children} ); -}; +} LemonReset.displayName = 'LemonReset'; -LemonReset.defaultProps = { - children: null, - className: '', - tagRef: null, -}; - type TagProps = { children?: React.Node, className?: string, @@ -129,20 +123,19 @@ type NoChildTagProps = { }; function createTagComponent(tag: LemonResetType, displayName: string) { - const component = (props: TagProps) => ; - component.defaultProps = { - className: '', - }; + const component = ({ className = '', ...otherProps }: TagProps) => ( + + ); component.displayName = displayName; return component; } function createNoChildTagComponent(tag: LemonResetType, displayName: string) { - const component = (props: NoChildTagProps) => ; - component.defaultProps = { - children: null, - className: '', - }; + const component = ({ children = null, className = '', ...otherProps }: NoChildTagProps) => ( + + {children} + + ); component.displayName = displayName; return component; } diff --git a/tests/components/LemonReset/LemonReset.js b/tests/components/LemonReset/LemonReset.js index ea0206c..51e7e52 100644 --- a/tests/components/LemonReset/LemonReset.js +++ b/tests/components/LemonReset/LemonReset.js @@ -8,151 +8,158 @@ import * as LemonUMD from '../../../dist/lemon-reset'; function hasClass(wrapper, pattern) { const classes = wrapper.attr('class').split(/\s+/); - const matching = classes.filter(cls => pattern.test(cls)); + const matching = classes.filter((cls) => pattern.test(cls)); return matching.length > 0; } -describe.each([['umd', LemonUMD], ['commonjs', LemonCommonJS], ['es', LemonES], ['src', LemonSrc]])( - 'lemon-reset %s', - (distribution, Lemon) => { - it('renders the tag with correct styles', () => { - const wrapper = render(ohai); - expect(hasClass(wrapper, /^lemon--div/)).toBe(true); - expect(hasClass(wrapper, /^test$/)).toBe(true); - }); +describe.each([ + ['umd', LemonUMD], + ['commonjs', LemonCommonJS], + ['es', LemonES], + ['src', LemonSrc], +])('lemon-reset %s', (distribution, Lemon) => { + it('renders the tag with correct styles', () => { + const wrapper = render(ohai); + expect(hasClass(wrapper, /^lemon--div/)).toBe(true); + expect(hasClass(wrapper, /^test$/)).toBe(true); + }); - it('renders all tags with correct styles', () => { - const allTags = [ - ['a', Lemon.A], - ['abbr', Lemon.Abbr], - ['acronym', Lemon.Acronym], - ['address', Lemon.Address], - ['applet', Lemon.Applet], - ['article', Lemon.Article], - ['aside', Lemon.Aside], - ['audio', Lemon.Audio], - ['b', Lemon.B], - ['big', Lemon.Big], - ['blockquote', Lemon.Blockquote], - ['canvas', Lemon.Canvas], - ['caption', Lemon.Caption], - ['center', Lemon.Center], - ['cite', Lemon.Cite], - ['code', Lemon.Code], - ['dd', Lemon.Dd], - ['del', Lemon.Del], - ['details', Lemon.Details], - ['dfn', Lemon.Dfn], - ['div', Lemon.Div], - ['dl', Lemon.Dl], - ['dt', Lemon.Dt], - ['em', Lemon.Em], - ['fieldset', Lemon.Fieldset], - ['figcaption', Lemon.Figcaption], - ['figure', Lemon.Figure], - ['footer', Lemon.Footer], - ['form', Lemon.Form], - ['h1', Lemon.H1], - ['h2', Lemon.H2], - ['h3', Lemon.H3], - ['h4', Lemon.H4], - ['h5', Lemon.H5], - ['h6', Lemon.H6], - ['header', Lemon.Header], - ['hgroup', Lemon.Hgroup], - ['i', Lemon.I], - ['iframe', Lemon.Iframe], - ['ins', Lemon.Ins], - ['kbd', Lemon.Kbd], - ['label', Lemon.Label], - ['legend', Lemon.Legend], - ['li', Lemon.Li], - ['mark', Lemon.Mark], - ['menu', Lemon.Menu], - ['nav', Lemon.Nav], - ['object', Lemon.DomObject], - ['ol', Lemon.Ol], - ['output', Lemon.Output], - ['p', Lemon.P], - ['pre', Lemon.Pre], - ['q', Lemon.Q], - ['ruby', Lemon.Ruby], - ['s', Lemon.S], - ['samp', Lemon.Samp], - ['section', Lemon.Section], - ['small', Lemon.Small], - ['span', Lemon.Span], - ['strike', Lemon.Strike], - ['strong', Lemon.Strong], - ['sub', Lemon.Sub], - ['summary', Lemon.Summary], - ['sup', Lemon.Sup], - ['td', Lemon.Td], - ['th', Lemon.Th], - ['time', Lemon.Time], - ['tt', Lemon.Tt], - ['u', Lemon.U], - ['ul', Lemon.Ul], - ['var', Lemon.Var], - ['video', Lemon.Video], - ]; + it('renders all tags with correct styles', () => { + const allTags = [ + ['a', Lemon.A], + ['abbr', Lemon.Abbr], + ['acronym', Lemon.Acronym], + ['address', Lemon.Address], + ['applet', Lemon.Applet], + ['article', Lemon.Article], + ['aside', Lemon.Aside], + ['audio', Lemon.Audio], + ['b', Lemon.B], + ['big', Lemon.Big], + ['blockquote', Lemon.Blockquote], + ['canvas', Lemon.Canvas], + ['caption', Lemon.Caption], + ['center', Lemon.Center], + ['cite', Lemon.Cite], + ['code', Lemon.Code], + ['dd', Lemon.Dd], + ['del', Lemon.Del], + ['details', Lemon.Details], + ['dfn', Lemon.Dfn], + ['div', Lemon.Div], + ['dl', Lemon.Dl], + ['dt', Lemon.Dt], + ['em', Lemon.Em], + ['fieldset', Lemon.Fieldset], + ['figcaption', Lemon.Figcaption], + ['figure', Lemon.Figure], + ['footer', Lemon.Footer], + ['form', Lemon.Form], + ['h1', Lemon.H1], + ['h2', Lemon.H2], + ['h3', Lemon.H3], + ['h4', Lemon.H4], + ['h5', Lemon.H5], + ['h6', Lemon.H6], + ['header', Lemon.Header], + ['hgroup', Lemon.Hgroup], + ['i', Lemon.I], + ['iframe', Lemon.Iframe], + ['ins', Lemon.Ins], + ['kbd', Lemon.Kbd], + ['label', Lemon.Label], + ['legend', Lemon.Legend], + ['li', Lemon.Li], + ['mark', Lemon.Mark], + ['menu', Lemon.Menu], + ['nav', Lemon.Nav], + ['object', Lemon.DomObject], + ['ol', Lemon.Ol], + ['output', Lemon.Output], + ['p', Lemon.P], + ['pre', Lemon.Pre], + ['q', Lemon.Q], + ['ruby', Lemon.Ruby], + ['s', Lemon.S], + ['samp', Lemon.Samp], + ['section', Lemon.Section], + ['small', Lemon.Small], + ['span', Lemon.Span], + ['strike', Lemon.Strike], + ['strong', Lemon.Strong], + ['sub', Lemon.Sub], + ['summary', Lemon.Summary], + ['sup', Lemon.Sup], + ['td', Lemon.Td], + ['th', Lemon.Th], + ['time', Lemon.Time], + ['tt', Lemon.Tt], + ['u', Lemon.U], + ['ul', Lemon.Ul], + ['var', Lemon.Var], + ['video', Lemon.Video], + ]; - allTags.forEach(([tag, Component]) => { - const wrapper = render(ohai); - expect(hasClass(wrapper, new RegExp(`^lemon--${tag}`))).toBe(true); - expect(hasClass(wrapper, /^test$/)).toBe(true); - }); + allTags.forEach(([tag, Component]) => { + const wrapper = render(ohai); + expect(hasClass(wrapper, new RegExp(`^lemon--${tag}`))).toBe(true); + expect(hasClass(wrapper, /^test$/)).toBe(true); }); + }); - it('renders elements without children', () => { - let wrapper = render(); - expect(hasClass(wrapper, /^lemon--embed/)).toBe(true); - wrapper = render(); - expect(hasClass(wrapper, /^lemon--img/)).toBe(true); - wrapper = render(); - expect(hasClass(wrapper, /^lemon--iframe/)).toBe(true); - }); + it('renders elements without children', () => { + let wrapper = render(); + expect(hasClass(wrapper, /^lemon--embed/)).toBe(true); + wrapper = render(); + expect(hasClass(wrapper, /^lemon--img/)).toBe(true); + wrapper = render(); + expect(hasClass(wrapper, /^lemon--iframe/)).toBe(true); + }); - it('renders a table properly', () => { - const wrapper = render( - - - - wow - - - - - wow - - - - - wow - - - , - ); - expect(hasClass(wrapper, /^lemon--table/)).toBe(true); - }); + it('renders a table properly', () => { + const wrapper = render( + + + + wow + + + + + wow + + + + + wow + + + , + ); + expect(hasClass(wrapper, /^lemon--table/)).toBe(true); + }); - it('renders the tag with additional props', () => { - const wrapper = render(ohai); - expect(hasClass(wrapper, /^lemon--a/)).toBe(true); - }); + it('renders the tag with additional props', () => { + const wrapper = render(ohai); + expect(hasClass(wrapper, /^lemon--a/)).toBe(true); + }); - it('passes a snapshot test', () => { - const wrapper = shallow(ohai); - expect(wrapper).toMatchSnapshot(); - }); + it('passes a snapshot test', () => { + const wrapper = shallow(ohai); + expect(wrapper).toMatchSnapshot(); + }); - it('uses displayName in shallow render', () => { - const wrapper = shallow( -
- ohai -
, - ); - expect(wrapper).toMatchSnapshot(); - }); - }, -); + it('uses displayName in shallow render', () => { + const wrapper = shallow( +
+ ohai +
, + ); + expect(wrapper).toMatchSnapshot(); + }); + + it('has an empty default classname when used directly', () => { + const wrapper = shallow(ohai); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/tests/components/LemonReset/__snapshots__/LemonReset.browser.test.js.snap b/tests/components/LemonReset/__snapshots__/LemonReset.browser.test.js.snap index fc10364..8dc0768 100644 --- a/tests/components/LemonReset/__snapshots__/LemonReset.browser.test.js.snap +++ b/tests/components/LemonReset/__snapshots__/LemonReset.browser.test.js.snap @@ -1,10 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`lemon-reset commonjs has an empty default classname when used directly 1`] = ` +
+ ohai +
+`; + exports[`lemon-reset commonjs passes a snapshot test 1`] = ` ohai @@ -12,19 +19,24 @@ exports[`lemon-reset commonjs passes a snapshot test 1`] = ` exports[`lemon-reset commonjs uses displayName in shallow render 1`] = `
-
+
ohai
`; +exports[`lemon-reset es has an empty default classname when used directly 1`] = ` +
+ ohai +
+`; + exports[`lemon-reset es passes a snapshot test 1`] = ` ohai @@ -32,19 +44,24 @@ exports[`lemon-reset es passes a snapshot test 1`] = ` exports[`lemon-reset es uses displayName in shallow render 1`] = `
-
+
ohai
`; +exports[`lemon-reset src has an empty default classname when used directly 1`] = ` +
+ ohai +
+`; + exports[`lemon-reset src passes a snapshot test 1`] = ` ohai @@ -52,19 +69,24 @@ exports[`lemon-reset src passes a snapshot test 1`] = ` exports[`lemon-reset src uses displayName in shallow render 1`] = `
-
+
ohai
`; +exports[`lemon-reset umd has an empty default classname when used directly 1`] = ` +
+ ohai +
+`; + exports[`lemon-reset umd passes a snapshot test 1`] = ` ohai @@ -72,9 +94,7 @@ exports[`lemon-reset umd passes a snapshot test 1`] = ` exports[`lemon-reset umd uses displayName in shallow render 1`] = `
-
+
ohai
diff --git a/tests/components/LemonReset/__snapshots__/LemonReset.node.test.js.snap b/tests/components/LemonReset/__snapshots__/LemonReset.node.test.js.snap index fc10364..8dc0768 100644 --- a/tests/components/LemonReset/__snapshots__/LemonReset.node.test.js.snap +++ b/tests/components/LemonReset/__snapshots__/LemonReset.node.test.js.snap @@ -1,10 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`lemon-reset commonjs has an empty default classname when used directly 1`] = ` +
+ ohai +
+`; + exports[`lemon-reset commonjs passes a snapshot test 1`] = ` ohai @@ -12,19 +19,24 @@ exports[`lemon-reset commonjs passes a snapshot test 1`] = ` exports[`lemon-reset commonjs uses displayName in shallow render 1`] = `
-
+
ohai
`; +exports[`lemon-reset es has an empty default classname when used directly 1`] = ` +
+ ohai +
+`; + exports[`lemon-reset es passes a snapshot test 1`] = ` ohai @@ -32,19 +44,24 @@ exports[`lemon-reset es passes a snapshot test 1`] = ` exports[`lemon-reset es uses displayName in shallow render 1`] = `
-
+
ohai
`; +exports[`lemon-reset src has an empty default classname when used directly 1`] = ` +
+ ohai +
+`; + exports[`lemon-reset src passes a snapshot test 1`] = ` ohai @@ -52,19 +69,24 @@ exports[`lemon-reset src passes a snapshot test 1`] = ` exports[`lemon-reset src uses displayName in shallow render 1`] = `
-
+
ohai
`; +exports[`lemon-reset umd has an empty default classname when used directly 1`] = ` +
+ ohai +
+`; + exports[`lemon-reset umd passes a snapshot test 1`] = ` ohai @@ -72,9 +94,7 @@ exports[`lemon-reset umd passes a snapshot test 1`] = ` exports[`lemon-reset umd uses displayName in shallow render 1`] = `
-
+
ohai
diff --git a/webpack.config.js b/webpack.config.js index c1afe11..3a688a9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,4 @@ -const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); +const TerserPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); @@ -52,19 +52,7 @@ module.exports = { ], }, optimization: { - minimizer: [ - new UglifyJsPlugin({ - cache: true, - parallel: true, - sourceMap: true, - uglifyOptions: { - output: { - comments: false, - }, - }, - }), - new OptimizeCSSAssetsPlugin({}), - ], + minimizer: [new TerserPlugin(), new OptimizeCSSAssetsPlugin({})], }, plugins: [ new MiniCssExtractPlugin({ From 011309164a5f96f47926e7fe3b59b09a484d60d9 Mon Sep 17 00:00:00 2001 From: Shawn Walton Date: Mon, 29 Apr 2024 11:58:43 -0700 Subject: [PATCH 2/7] replace travis-ci with github actions --- .github/workflows/test.yml | 0 .travis.yml | 20 -------------------- .yarnrc | 1 + Makefile | 2 +- README.md | 3 +-- 5 files changed, 3 insertions(+), 23 deletions(-) create mode 100644 .github/workflows/test.yml delete mode 100644 .travis.yml diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..e69de29 diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index e93a7a3..0000000 --- a/.travis.yml +++ /dev/null @@ -1,20 +0,0 @@ -language: node_js - -dist: trusty - -node_js: - - '8' - -before_install: - - curl -L https://yarnpkg.com/install.sh | bash -s -- --version 1.3.2 - - export PATH="$HOME/.yarn/bin:$PATH" - - pyenv global 3.10 - -cache: - yarn: true - -install: - - yarn - -script: - - make test diff --git a/.yarnrc b/.yarnrc index b869187..5533f87 100644 --- 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 index 204558a..d65e0bc 100644 --- a/Makefile +++ b/Makefile @@ -38,7 +38,7 @@ 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/README.md b/README.md index 1bc79e3..9eae9eb 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,6 @@ # 🍋 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) [![install size](https://packagephobia.now.sh/badge?p=lemon-reset)](https://packagephobia.now.sh/result?p=lemon-reset) @@ -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 - console.log(span)}>This has a ref + console.log(span)}>This has a ref ``` ## Build From e91e256efb66103c06cb1ed0cdca603dfa15a9d2 Mon Sep 17 00:00:00 2001 From: Shawn Walton Date: Mon, 29 Apr 2024 12:00:07 -0700 Subject: [PATCH 3/7] actually include contents of test action --- .github/workflows/test.yml | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index e69de29..95f660a 100644 --- 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 From 8ca94eb8a23e1b270c4cadf13e1dc7f906c30e05 Mon Sep 17 00:00:00 2001 From: Shawn Walton Date: Mon, 29 Apr 2024 12:05:48 -0700 Subject: [PATCH 4/7] fix flow --- src/components/LemonReset/LemonReset.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/LemonReset/LemonReset.js b/src/components/LemonReset/LemonReset.js index 9890de8..f344582 100644 --- a/src/components/LemonReset/LemonReset.js +++ b/src/components/LemonReset/LemonReset.js @@ -95,9 +95,9 @@ type Props = { export function LemonReset({ tag: Tag, - children = null, + children, className = '', - tagRef = null, + tagRef, ...otherProps }: Props) { let classes = styles[`lemon--${Tag}`]; @@ -131,10 +131,8 @@ function createTagComponent(tag: LemonResetType, displayName: string) { } function createNoChildTagComponent(tag: LemonResetType, displayName: string) { - const component = ({ children = null, className = '', ...otherProps }: NoChildTagProps) => ( - - {children} - + const component = ({ className = '', ...otherProps }: NoChildTagProps) => ( + ); component.displayName = displayName; return component; From 0bc0bec6d467ca3089017d8a84310bb27046a92b Mon Sep 17 00:00:00 2001 From: Shawn Walton Date: Mon, 29 Apr 2024 12:08:52 -0700 Subject: [PATCH 5/7] bump version in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 150ad27..432d986 100644 --- 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.", From 0f8153265121cc942a4f2e338b6dd045ec680bb5 Mon Sep 17 00:00:00 2001 From: Shawn Walton Date: Mon, 29 Apr 2024 12:14:14 -0700 Subject: [PATCH 6/7] add release action, adapt PUBLISH.md from dataloader-codegen --- .github/workflows/release.yml | 33 +++++++++++++++++++++++++++++++++ PUBLISH.md | 10 ++++++++++ 2 files changed, 43 insertions(+) create mode 100644 .github/workflows/release.yml create mode 100644 PUBLISH.md diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 0000000..3f38a35 --- /dev/null +++ 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/PUBLISH.md b/PUBLISH.md new file mode 100644 index 0000000..643485c --- /dev/null +++ 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 and commit changes +3. Draft a new release in . 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. From 350f0a9b611769645c2f77eb4500c627e0df5301 Mon Sep 17 00:00:00 2001 From: Shawn Walton Date: Mon, 29 Apr 2024 12:20:18 -0700 Subject: [PATCH 7/7] fix gzip size badge --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9eae9eb..be01b20 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # 🍋 Lemon Reset [![npm](https://img.shields.io/npm/v/lemon-reset.svg)](https://yarn.pm/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).