Fix #4080 by moving base64 encoder/decoder from @rjsf/utils to pl…

…ayground (#4093)

CHANGELOG.md

@@ -22,6 +22,16 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Added support for `UiSchema` `"ui:rows"` option for `textarea` elements, fixing [#4070](https://github.com/rjsf-team/react-jsonschema-form/issues/4070).
 
+# @rjsf/utils
+
+- [#4080](https://github.com/rjsf-team/react-jsonschema-form/issues/4080) - BREAKING CHANGE: Removed the `base64` object from the `@rjsf/utils` package. Note that this is a breaking change if you relied on the `base64` object exported by `@rjsf/utils`. Since this change caused [#4080](https://github.com/rjsf-team/react-jsonschema-form/issues/4080), and was only internally used by playground code, we are shipping this change in a patch release.
+
+## Dev / docs / playground
+
+- [#4080](https://github.com/rjsf-team/react-jsonschema-form/issues/4080) - Moved the `base64` encoder/decoder object to the Playground package. 
+- Added test configuration and script to the Playground. 
+
+
 # 5.17.0
 
 ## @rjsf/core

packages/docs/docs/api-reference/utility-functions.md

@@ -1181,34 +1181,3 @@ For more information about how to specify the path see the [eslint lodash plugin
 #### Returns
 
 - ErrorSchemaBuilder<T> - The instance of the `ErrorSchemaBuilder` class
-
-## utility object
-
-### base64
-
-An object providing base64 encoding and decoding functions using the UTF-8 charset.
-By default, the `btoa()` and `atob()` built-in functions are only support the Latin-1 character range that means that non Latin-1 characters are not supported(for example, Chinese characters).
-
-#### encode()
-
-Encodes the given `input` string into a base64 encoded string
-
-##### Parameters
-
-- input: string - The string to encode
-
-##### Returns
-
-- string: The base64 encoded string
-
-#### decode()
-
-Decodes the given `input` string from a base64 encoded string
-
-##### Parameters
-
-- input: string - The string to decode
-
-##### Returns
-
-- string: The decoded string

packages/playground/babel.config.js

@@ -0,0 +1,3 @@
+const defaultConfig = require('../../babel.config');
+
+module.exports = defaultConfig;

packages/playground/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  verbose: true,
+  testEnvironment: 'jsdom',
+  testMatch: ['**/test/**/*.test.[jt]s?(x)'],
+  transformIgnorePatterns: [`/node_modules/(?!nanoid)`],
+};

packages/playground/package.json

@@ -3,7 +3,7 @@
   "version": "5.17.0",
   "description": "rjsf playground",
   "private": true,
-  "type": "module",
+  "type": "commonjs",
   "scripts": {
     "cs-check": "prettier -l \"src/**/*.ts?(x)\"",
     "cs-format": "prettier \"src/**/*.ts?(x)\" --write",
@@ -13,7 +13,8 @@
     "publish-to-gh-pages": "npm run build && gh-pages --dist build/",
     "publish-to-npm": "npm run build && npm publish",
     "start": "vite --force",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest"
   },
   "lint-staged": {
     "src/**/*.ts?(x)": [
@@ -92,6 +93,8 @@
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "5.15.2",
     "@types/lodash": "^4.14.202",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^18.19.14",
     "@types/react-frame-component": "^4.1.6",
     "@vitejs/plugin-react": "^4.2.1",
     "cross-env": "^7.0.3",
@@ -100,6 +103,8 @@
     "gh-pages": "^3.2.3",
     "html": "^1.0.0",
     "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "loader-utils": "^3.2.1",
     "mini-css-extract-plugin": "^2.8.0",
     "prettier": "^2.8.8",

packages/playground/src/components/Header.tsx

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
 import Form, { IChangeEvent } from '@rjsf/core';
-import { base64, RJSFSchema, UiSchema, ValidatorType } from '@rjsf/utils';
+import { RJSFSchema, UiSchema, ValidatorType } from '@rjsf/utils';
 import localValidator from '@rjsf/validator-ajv8';
+import base64 from '../utils/base64';
 
 import CopyLink from './CopyLink';
 import ThemeSelector, { ThemesType } from './ThemeSelector';

packages/playground/src/components/Playground.tsx

@@ -1,6 +1,7 @@
 import { ComponentType, FormEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { FormProps, IChangeEvent, withTheme } from '@rjsf/core';
-import { base64, ErrorSchema, RJSFSchema, RJSFValidationError, UiSchema, ValidatorType } from '@rjsf/utils';
+import { ErrorSchema, RJSFSchema, RJSFValidationError, UiSchema, ValidatorType } from '@rjsf/utils';
+import base64 from '../utils/base64';
 
 import { samples } from '../samples';
 import Header, { LiveSettings } from './Header';

packages/utils/test/base64.test.ts → packages/playground/test/utils/base64.test.ts

@@ -1,4 +1,4 @@
-import { base64 } from '../src';
+import base64 from '../../src/utils/base64';
 
 describe('base64', () => {
   it('should successfully encode a ascii character', () => {

packages/playground/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
+  "include": ["./"],
   "compilerOptions": {
-    "rootDir": "./src",
+    "rootDir": "./",
     "baseUrl": "./",
     "target": "ESNext",
     "useDefineForClassFields": true,
@@ -18,9 +19,9 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vite/client"]
+    "types": ["vite/client", "jest", "node"]
   },
-  "include": ["src"],
+  "include": ["src", "test"],
   "references": [
     { "path": "../antd" },
     { "path": "../bootstrap-4" },

packages/utils/src/index.ts

@@ -51,7 +51,6 @@ import utcToLocal from './utcToLocal';
 import validationDataMerge from './validationDataMerge';
 import withIdRefPrefix from './withIdRefPrefix';
 import getOptionMatchingSimpleDiscriminator from './getOptionMatchingSimpleDiscriminator';
-import base64 from './base64';
 
 export * from './types';
 export * from './enums';
@@ -121,5 +120,4 @@ export {
   utcToLocal,
   validationDataMerge,
   withIdRefPrefix,
-  base64,
 };