React 18 update. Updated packages versions. Fixed bugs after update.

examples/Examples.md

@@ -60,6 +60,7 @@ With `firstLaunchOnly={true}` the placeholder will be rendered only the first ti
 
 ```js
 initialState = { ready: false }
+const [state, setState] = React.useState(initialState)
 
 function toggleReady() {
   setState({ ready: !state.ready })
@@ -79,6 +80,7 @@ You can delay the switch from "real component" to the placeholder with the prop
 
 ```js
 initialState = { ready: true }
+const [state, setState] = React.useState(initialState)
 
 function toggleReady() {
   setState({ ready: !state.ready })

package.json

@@ -1,16 +1,15 @@
 {
   "name": "react-placeholder",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "A React component to easily replicate your page with nice placeholders while the content is loading",
   "main": "lib",
   "scripts": {
     "test": "jest",
-    "build": "rm -rf lib && mkdir lib && node-sass src -o lib && tsc",
+    "build": "rm -rf lib && mkdir lib && sass src:lib && tsc",
     "preversion": "npm run typecheck && npm run test",
     "prepublishOnly": "npm run build",
     "start": "styleguidist server",
-    "typecheck": "tsc --noEmit",
-    "release-version": "smooth-release"
+    "typecheck": "tsc --noEmit"
   },
   "repository": {
     "type": "git",
@@ -34,45 +33,48 @@
   ],
   "homepage": "https://github.com/buildo/react-placeholder",
   "typings": "lib",
-  "dependencies": {},
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.20",
-    "@types/lodash": "^4.14.168",
-    "@types/node": "12.12.17",
-    "@types/react": "^16.9.56",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-preset-buildo": "^0.1.1",
-    "css-loader": "^0.28.11",
+    "@babel/core": "^7.22.17",
+    "@babel/preset-env": "^7.22.15",
+    "@cfaester/enzyme-adapter-react-18": "^0.7.1",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/enzyme": "^3.10.13",
+    "@types/jest": "^29.5.4",
+    "@types/jsdom": "^21.1.2",
+    "@types/lodash.flatten": "^4.4.7",
+    "@types/node": "18",
+    "@types/react": "^18.2.21",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.8.1",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "file-loader": "^1.1.11",
-    "jest": "^26.6.3",
-    "lodash": "^4.17.20",
-    "node-sass": "^4.14.1",
-    "progress-bar-webpack-plugin": "^1.12.1",
+    "file-loader": "^6.2.0",
+    "jest": "^29.7.0",
+    "jsdom": "^22.1.0",
+    "lodash.flatten": "^4.4.0",
+    "progress-bar-webpack-plugin": "^2.1.0",
     "raf": "^3.4.1",
     "raw-loader": "^0.5.1",
-    "react": "^16.8.0",
+    "react": "^18.2.0",
     "react-docgen-typescript": "^1.16.1",
-    "react-dom": "^16.8.0",
-    "react-styleguidist": "^6.0.33",
-    "react-test-renderer": "^16.8.0",
-    "sass-loader": "^6.0.7",
-    "smooth-release": "^8.0.9",
-    "ts-jest": "^26.5.0",
-    "ts-loader": "^3.5.0",
-    "typescript": "~3.9.7",
-    "webpack": "3.5.5"
+    "react-dom": "^18.2.0",
+    "react-styleguidist": "^13.1.1",
+    "react-test-renderer": "^18.2.0",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "ts-jest": "^29.1.1",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.2.2",
+    "webpack": "^5.88.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17"
+    "react": "^18"
   },
   "jest": {
-    "testURL": "http://localhost",
+    "testEnvironmentOptions": {
+      "url": "http://localhost"
+    },
     "setupFiles": [
       "raf/polyfill",
       "<rootDir>/tests/setup.js"

styleguide.config.js

@@ -13,16 +13,18 @@ module.exports = {
   // content
   title: 'react-placeholder',
   // assetsDir: 'styleguide/assets',
-  template: 'styleguide/index.html',
+  template: {
+    container: 'app',
+  },
   propsParser: require('react-docgen-typescript').parse, // detect docs using TS information
   sections: [{
     name: 'ReactPlaceholder',
     components: () => [
       path.resolve(__dirname, 'src/ReactPlaceholder.tsx')
     ]
   }],
-  showCode: true,
-  showUsage: false, // show props by default
+  exampleMode: 'collapse',
+  usageMode: 'collapse',
   getExampleFilename() {
     return path.resolve(__dirname, 'examples/Examples.md');
   }

tests/ReactPlaceholder.test.tsx

@@ -2,11 +2,17 @@ import * as React from 'react';
 import { execSync } from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
-import { flatten } from 'lodash';
 import ReactPlaceholder from '../src/ReactPlaceholder';
 import { shallow } from 'enzyme';
 import { act, render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import { JSDOM } from "jsdom"
+import '@testing-library/jest-dom';
+const flatten = require('lodash.flatten');
+
+const dom = new JSDOM()
+global.document = dom.window.document
+// @ts-ignore
+global.window = dom.window
 
 jest.useFakeTimers();
 

tests/__snapshots__/ReactPlaceholder.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ReactPlaceholder renders a custom placeholder when the content is not ready 1`] = `
-Array [
+[
   <div
     className=""
   >
@@ -58,15 +58,15 @@ exports[`ReactPlaceholder renders content when it's ready, then a placeholder wh
 `;
 
 exports[`ReactPlaceholder renders the content when it's ready 1`] = `
-Array [
+[
   <div>
     Some ready content
   </div>,
 ]
 `;
 
 exports[`ReactPlaceholder renders the media placeholder when the content is not ready 1`] = `
-Array [
+[
   <MediaBlock
     color="#CDCDCD"
     rows={2}
@@ -91,7 +91,7 @@ exports[`ReactPlaceholder renders the placeholder only after the specified delay
 `;
 
 exports[`ReactPlaceholder renders the rect placeholder when the content is not ready 1`] = `
-Array [
+[
   <RectShape
     color="#CDCDCD"
     rows={3}
@@ -100,7 +100,7 @@ Array [
 `;
 
 exports[`ReactPlaceholder renders the round placeholder when the content is not ready 1`] = `
-Array [
+[
   <RoundShape
     color="#CDCDCD"
     rows={3}
@@ -109,7 +109,7 @@ Array [
 `;
 
 exports[`ReactPlaceholder renders the round placeholder with animation when the content is not ready 1`] = `
-Array [
+[
   <RoundShape
     className="show-loading-animation"
     color="#CDCDCD"
@@ -119,7 +119,7 @@ Array [
 `;
 
 exports[`ReactPlaceholder renders the text placeholder when the content is not ready 1`] = `
-Array [
+[
   <TextBlock
     color="#CDCDCD"
     rows={2}
@@ -128,7 +128,7 @@ Array [
 `;
 
 exports[`ReactPlaceholder renders the text placeholder with 3 rows as the default placeholder 1`] = `
-Array [
+[
   <TextBlock
     color="#CDCDCD"
     rows={3}
@@ -137,7 +137,7 @@ Array [
 `;
 
 exports[`ReactPlaceholder renders the text placeholder with the lineSpacing set 1`] = `
-Array [
+[
   <TextBlock
     color="#CDCDCD"
     lineSpacing={3}
@@ -147,7 +147,7 @@ Array [
 `;
 
 exports[`ReactPlaceholder renders the textRow placeholder when the content is not ready 1`] = `
-Array [
+[
   <TextRow
     color="#CDCDCD"
     rows={3}
@@ -156,7 +156,7 @@ Array [
 `;
 
 exports[`build build script generates every needed file 1`] = `
-Array [
+[
   "ReactPlaceholder.d.ts",
   "ReactPlaceholder.js",
   "index.d.ts",
@@ -174,6 +174,7 @@ Array [
   "placeholders/index.d.ts",
   "placeholders/index.js",
   "reactPlaceholder.css",
+  "reactPlaceholder.css.map",
   "utils.d.ts",
   "utils.js",
 ]