Node update

.github/workflows/coverage.yml

@@ -2,9 +2,9 @@ name: Test Coverage
 
 on:
  push:
- branches: [ master, bootstrap5 ]
+ branches: [ master, bootstrap5, v10 ]
  pull_request:
- branches: [ master, bootstrap5 ]
+ branches: [ master, bootstrap5, v10 ]
 
 jobs:
 
@@ -14,10 +14,10 @@ jobs:
 
  - uses: actions/checkout@v2
 
- - name: Use Node.js 12.x
+ - name: Use Node.js 16.x
  uses: actions/setup-node@v1
  with:
- node-version: 12.x
+ node-version: 16.x
  cache: 'yarn'
 
  - run: rm -rf node_modules && yarn install --frozen-lockfile

.github/workflows/prerelease.yml

@@ -0,0 +1,32 @@
+on:
+ pull_request:
+ branches: [master]
+name: prerelease
+jobs:
+ prerelease:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - name: Use Node.js 16
+ uses: actions/setup-node@v2
+ with:
+ node-version: 16
+ registry-url: 'https://registry.npmjs.org'
+ - run: yarn install --frozen-lockfile
+ - run: npm version prerelease --preid=$GITHUB_HEAD_REF-`git rev-parse --short HEAD` --git-tag-version=false --commit-hooks=false
+ - run: npm publish --tag prerelease-$GITHUB_HEAD_REF
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+ - name: Extract NPM package name
+ run: echo "::set-output name=npm-name::`node -p -e "require('./package.json').name"`"
+ id: npm-name
+ - name: Extract npm package version
+ run: echo "::set-output name=npm-version::`node -p -e "require('./package.json').version"`"
+ id: npm-version
+ - name: Comment PR
+ uses: marocchino/sticky-pull-request-comment@v2
+ with:
+ recreate: true
+ message: |
+ Released prerelease version `${{ steps.npm-version.outputs.npm-version }}`.
+ You may now run `npm install ${{ steps.npm-name.outputs.npm-name }}@${{ github.head_ref }}`

.github/workflows/test.yml

@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
  push:
- branches: [ master, release-* ]
+ branches: [ master, release-*, v10 ]
  pull_request:
- branches: [ master ]
+ branches: [ master, v10 ]
 
 jobs:
  build:
@@ -16,7 +16,7 @@ jobs:
 
  strategy:
  matrix:
- node-version: [12.x, 14.x, 16.x]
+ node-version: [14.x, 16.x]
  # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
  steps:

.nvmrc

@@ -1 +1 @@
-12
+16

package.json

@@ -15,6 +15,9 @@
  "types": "types/index.d.ts",
  "esnext": "src/index.js",
  "sideEffects": false,
+ "engines": {
+ "node": ">=14"
+ },
  "scripts": {
  "test": "jest --watch",
  "test:ci": "jest",
@@ -311,7 +314,7 @@
  "eslint-plugin-react": "^7.30.0",
  "eslint-plugin-storybook": "^0.6.1",
  "holderjs": "^2.9.3",
- "jest": "28.1.3",
+ "jest": "^29.4.1",
  "jest-environment-jsdom": "28.1.3",
  "jsdom": "^19.0.0",
  "json-loader": "^0.5.7",

src/Accordion.js

@@ -29,15 +29,15 @@ const defaultProps = {
  tag: 'div',
 };
 
-function Accordion(props) {
+const Accordion = React.forwardRef((props, ref) => {
  const {
  flush,
  open,
  toggle,
  className,
  cssModule,
  tag: Tag,
- innerRef,
+ innerRef = ref,
  ...attributes
  } = props;
  const classes = mapToCssModules(
@@ -57,7 +57,7 @@ function Accordion(props) {
  <Tag {...attributes} className={classes} ref={innerRef} />
  </AccordionContext.Provider>
  );
-}
+})
 
 Accordion.propTypes = propTypes;
 Accordion.defaultProps = defaultProps;

src/AccordionBody.js

@@ -27,12 +27,12 @@ const defaultProps = {
  tag: 'div',
 };
 
-function AccordionBody(props) {
+const AccordionBody = React.forwardRef((props, ref) => {
  const {
  className,
  cssModule,
  tag: Tag,
- innerRef,
+ innerRef = ref,
  children,
  accordionId,
  ...attributes
@@ -57,7 +57,7 @@ function AccordionBody(props) {
  <Tag className="accordion-body">{children}</Tag>
  </Collapse>
  );
-}
+})
 
 AccordionBody.propTypes = propTypes;
 AccordionBody.defaultProps = defaultProps;

src/AccordionHeader.js

@@ -25,12 +25,12 @@ const defaultProps = {
  tag: 'h2',
 };
 
-function AccordionHeader(props) {
+const AccordionHeader = React.forwardRef((props, ref) => {
  const {
  className,
  cssModule,
  tag: Tag,
- innerRef,
+ innerRef = ref,
  children,
  targetId,
  ...attributes
@@ -62,7 +62,7 @@ function AccordionHeader(props) {
  </button>
  </Tag>
  );
-}
+})
 
 AccordionHeader.propTypes = propTypes;
 AccordionHeader.defaultProps = defaultProps;

src/AccordionItem.js

@@ -22,15 +22,15 @@ const defaultProps = {
  tag: 'div',
 };
 
-function AccordionItem(props) {
- const { className, cssModule, tag: Tag, innerRef, ...attributes } = props;
+const AccordionItem = React.forwardRef((props, ref) => {
+ const { className, cssModule, tag: Tag, innerRef = ref, ...attributes } = props;
  const classes = mapToCssModules(
  classNames(className, 'accordion-item'),
  cssModule,
  );
 
  return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+})
 
 AccordionItem.propTypes = propTypes;
 AccordionItem.defaultProps = defaultProps;

src/Alert.js

@@ -46,7 +46,7 @@ const defaultProps = {
  },
 };
 
-function Alert(props) {
+const Alert = React.forwardRef((props, ref) => {
  const {
  className,
  closeClassName,
@@ -59,7 +59,7 @@ function Alert(props) {
  children,
  transition,
  fade,
- innerRef,
+ innerRef = ref,
  ...attributes
  } = props;
 
@@ -103,7 +103,7 @@ function Alert(props) {
  {children}
  </Fade>
  );
-}
+});
 
 Alert.propTypes = propTypes;
 Alert.defaultProps = defaultProps;

src/Badge.js

@@ -29,12 +29,12 @@ const defaultProps = {
  tag: 'span',
 };
 
-function Badge(props) {
+const Badge = React.forwardRef((props, ref) => {
  let {
  className,
  cssModule,
  color,
- innerRef,
+ innerRef = ref,
  pill,
  tag: Tag,
  ...attributes
@@ -55,7 +55,7 @@ function Badge(props) {
  }
 
  return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+});
 
 Badge.propTypes = propTypes;
 Badge.defaultProps = defaultProps;

src/Button.js

@@ -42,7 +42,7 @@ const defaultProps = {
  tag: 'button',
 };
 
-function Button(props) {
+const Button = React.forwardRef((props, ref) => {
  const onClick = useCallback(
  (e) => {
  if (props.disabled) {
@@ -68,7 +68,7 @@ function Button(props) {
  outline,
  size,
  tag: Tag,
- innerRef,
+ innerRef = ref,
  ...attributes
  } = props;
 
@@ -104,7 +104,7 @@ function Button(props) {
  aria-label={ariaLabel}
  />
  );
-}
+});
 
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;

src/Card.js

@@ -58,4 +58,4 @@ function Card(props) {
 Card.propTypes = propTypes;
 Card.defaultProps = defaultProps;
 
-export default Card;
+export default React.forwardRef((props, ref) => <Card innerRef={ref} {...props} />);

src/CardBody.js

@@ -21,15 +21,15 @@ const defaultProps = {
  tag: 'div',
 };
 
-function CardBody(props) {
- const { className, cssModule, innerRef, tag: Tag, ...attributes } = props;
+const CardBody = React.forwardRef((props, ref) => {
+ const { className, cssModule, innerRef = ref, tag: Tag, ...attributes } = props;
  const classes = mapToCssModules(
  classNames(className, 'card-body'),
  cssModule,
  );
 
  return <Tag {...attributes} className={classes} ref={innerRef} />;
-}
+});
 
 CardBody.propTypes = propTypes;
 CardBody.defaultProps = defaultProps;

src/CardLink.js

@@ -18,15 +18,15 @@ const defaultProps = {
  tag: 'a',
 };
 
-function CardLink(props) {
- const { className, cssModule, tag: Tag, innerRef, ...attributes } = props;
+const CardLink = React.forwardRef((props, ref) => {
+ const { className, cssModule, tag: Tag, innerRef = ref, ...attributes } = props;
  const classes = mapToCssModules(
  classNames(className, 'card-link'),
  cssModule,
  );
 
  return <Tag {...attributes} ref={innerRef} className={classes} />;
-}
+})
 
 CardLink.propTypes = propTypes;
 CardLink.defaultProps = defaultProps;

src/CloseButton.js

@@ -25,8 +25,8 @@ const defaultProps = {
  'aria-label': 'close',
 };
 
-function CloseButton(props) {
- const { className, cssModule, variant, innerRef, ...attributes } = props;
+const CloseButton = React.forwardRef((props, ref) => {
+ const { className, cssModule, variant, innerRef = ref, ...attributes } = props;
 
  const classes = mapToCssModules(
  classNames(className, 'btn-close', variant && `btn-close-${variant}`),
@@ -35,7 +35,7 @@ function CloseButton(props) {
  return (
  <button ref={innerRef} type="button" className={classes} {...attributes} />
  );
-}
+});
 
 CloseButton.propTypes = propTypes;
 CloseButton.defaultProps = defaultProps;

src/Collapse.js

@@ -172,4 +172,4 @@ class Collapse extends Component {
 
 Collapse.propTypes = propTypes;
 Collapse.defaultProps = defaultProps;
-export default Collapse;
+export default React.forwardRef((props, ref) => <Collapse innerRef={ref} {...props} />);

src/Dropdown.js

@@ -371,4 +371,4 @@ Dropdown.propTypes = propTypes;
 Dropdown.defaultProps = defaultProps;
 Dropdown.contextType = InputGroupContext;
 
-export default Dropdown;
+export default React.forwardRef((props, ref) => <Dropdown innerRef={ref} {...props} />);

src/DropdownToggle.js

@@ -143,4 +143,4 @@ DropdownToggle.propTypes = propTypes;
 DropdownToggle.defaultProps = defaultProps;
 DropdownToggle.contextType = DropdownContext;
 
-export default DropdownToggle;
+export default React.forwardRef((props, ref) => <DropdownToggle innerRef={ref} {...props} />);

src/Fade.js

@@ -41,15 +41,15 @@ const defaultProps = {
  in: true,
 };
 
-function Fade(props) {
+const Fade = React.forwardRef((props, ref) => {
  const {
  tag: Tag,
  baseClass,
  baseClassActive,
  className,
  cssModule,
  children,
- innerRef,
+ innerRef = ref,
  ...otherProps
  } = props;
 
@@ -72,7 +72,7 @@ function Fade(props) {
  }}
  </Transition>
  );
-}
+});
 
 Fade.propTypes = propTypes;
 Fade.defaultProps = defaultProps;

src/Form.js

@@ -17,6 +17,8 @@ const propTypes = {
 const defaultProps = {
  tag: 'form',
 };
+
+// TODO: Simple conversion of functional component "good-first-task"
 class Form extends Component {
  constructor(props) {
  super(props);
@@ -54,4 +56,4 @@ class Form extends Component {
 Form.propTypes = propTypes;
 Form.defaultProps = defaultProps;
 
-export default Form;
+export default React.forwardRef((props, ref) => <Form innerRef={ref} {...props} />);