* {
- display: inline-block;
- }
- & > * + * {
- margin-left: 15px;
- }
- `
- )}
- />
-));
-
-export const Portal = ({children}) => {
- return ReactDOM.createPortal(children, document.body);
-};
-
-export const Toolbar = React.forwardRef(({className, ...props}, ref) => (
-
-));
diff --git a/packages/content-editor/src/components.jsx b/packages/content-editor/src/components.jsx
new file mode 100644
index 00000000..359d6f6a
--- /dev/null
+++ b/packages/content-editor/src/components.jsx
@@ -0,0 +1,183 @@
+import { createPortal } from 'react-dom';
+import { css, cx } from '@emotion/css';
+
+export function Button({
+ className,
+ active,
+ reversed,
+ ref,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export function EditorValue({
+ className,
+ value,
+ ref,
+ ...props
+}) {
+ const textLines = value.document.nodes
+ .map((node) => node.text)
+ .toArray()
+ .join('\n');
+
+ return (
+
+ );
+}
+
+export function Icon({
+ className,
+ ref,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export function Instruction({
+ className,
+ ref,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export function Menu({
+ className,
+ ref,
+ ...props
+}) {
+ return (
+
* {
+ display: inline-block;
+ }
+
+ & > * + * {
+ margin-left: 15px;
+ }
+ `
+ )}
+ />
+ );
+}
+
+export function Portal({ children }) {
+ if (typeof document === 'undefined') {
+ return null;
+ }
+
+ return createPortal(children, document.body);
+}
+
+export function Toolbar({
+ className,
+ ref,
+ ...props
+}) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/packages/content-editor/src/editor.js b/packages/content-editor/src/editor.jsx
similarity index 97%
rename from packages/content-editor/src/editor.js
rename to packages/content-editor/src/editor.jsx
index b84e9dbf..65c6a396 100644
--- a/packages/content-editor/src/editor.js
+++ b/packages/content-editor/src/editor.jsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import {useCallback, useMemo, useState} from 'react';
import isUrl from 'is-url';
import isHotkey from 'is-hotkey';
@@ -28,7 +28,7 @@ export const PTEditor = (props) => {
);
return (
-
+ <>
{
Slate Doc
{JSON.stringify(value, null, 2)}
-
+
);
};
@@ -112,7 +112,10 @@ const LinkButton = () => {
active={isLinkActive(editor)}
onMouseDown={(event) => {
event.preventDefault();
- const url = window.prompt('Enter the URL of the link:');
+ const url =
+ typeof window === 'undefined'
+ ? null
+ : window.prompt('Enter the URL of the link:');
if (!url) return;
insertLink(editor, url);
}}
diff --git a/packages/content-editor/src/invert-utils.js b/packages/content-editor/src/invert-utils.js
index 4c841eab..4754ece1 100644
--- a/packages/content-editor/src/invert-utils.js
+++ b/packages/content-editor/src/invert-utils.js
@@ -26,9 +26,9 @@ export function toSlate(content) {
...(block.markDefs ? '' : ''),
children: block.children.map((item) => {
if (item.marks.some((r) => defsKey.includes(r))) {
- const customMarks = item.marks.filter(
+ /* const customMarks = item.marks.filter(
(item) => !standardMarks.has(item)
- );
+ ); */
const inherentMarks = item.marks.filter((item) =>
standardMarks.has(item)
);
diff --git a/packages/content-editor/src/portable-text.js b/packages/content-editor/src/portable-text.jsx
similarity index 82%
rename from packages/content-editor/src/portable-text.js
rename to packages/content-editor/src/portable-text.jsx
index b2794562..02bf3108 100644
--- a/packages/content-editor/src/portable-text.js
+++ b/packages/content-editor/src/portable-text.jsx
@@ -1,8 +1,6 @@
-/** @jsx jsx */
-/** @jsxFrag React.Fragment */
-import React from 'react';
+
import BlockContent from '@sanity/block-content-to-react';
-import {jsx, Styled} from 'theme-ui';
+
const serializers = {
types: {
block: (props) => {
@@ -30,13 +28,13 @@ const serializers = {
export const PortableText = (props) => {
return (
-
- PortableText to React
+ <>
+ PortableText to React
PortableText Doc
{JSON.stringify(props.blocks, null, 2)}
-
+
);
};
diff --git a/packages/footer/__fixtures__/footer.tsx b/packages/footer/__fixtures__/footer.tsx
index 7b0f1528..85dea9dd 100644
--- a/packages/footer/__fixtures__/footer.tsx
+++ b/packages/footer/__fixtures__/footer.tsx
@@ -1,11 +1,11 @@
-import React, {FC, Fragment} from 'react';
+import type {FC} from 'react';
import {Footer} from '../src/footer';
const FooterFixture: FC = () => {
return (
-
+ <>
-
+
);
};
diff --git a/packages/footer/__fixtures__/slimline-footer.tsx b/packages/footer/__fixtures__/slimline-footer.tsx
index f7109833..033b2320 100644
--- a/packages/footer/__fixtures__/slimline-footer.tsx
+++ b/packages/footer/__fixtures__/slimline-footer.tsx
@@ -1,11 +1,11 @@
-import React, {FC, Fragment} from 'react';
+import type {FC} from 'react';
import SlimlineFooter from '../src/slimline-footer';
const FooterFixture: FC = () => {
return (
-
+ <>
-
+
);
};
diff --git a/packages/footer/babel.config.js b/packages/footer/babel.config.js
deleted file mode 100644
index 4c05afbe..00000000
--- a/packages/footer/babel.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../../babel.config');
diff --git a/packages/footer/package.json b/packages/footer/package.json
index 20e21bf5..42f7d0b0 100644
--- a/packages/footer/package.json
+++ b/packages/footer/package.json
@@ -2,23 +2,32 @@
"name": "@newfrontdoor/footer",
"version": "1.1.1",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "dist/index.cjs",
"source": "index.ts",
"description": "Common footer for all NFD sites",
"scripts": {
- "prepare": "microbundle --no-compress",
- "watch": "microbundle watch --no-compress"
+ "build": "tsdown src/index.ts --format esm --format cjs --deps.skip-node-modules-bundle --clean",
+ "watch": "tsdown src/index.ts --format esm --format cjs --deps.skip-node-modules-bundle --watch"
},
"author": "Andrew Gibb",
"files": [
"dist"
],
"peerDependencies": {
- "react": "^16.8.6",
- "theme-ui": "^0.3.1"
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "react": "^19.2.0",
+ "theme-ui": "^0.17.4"
},
"dependencies": {
- "react-icons": "^3.10.0"
+ "react-icons": "^5.6.0"
},
- "xo": false
+
+ "exports": {
+ ".": {
+ "import": "./dist/index.mjs",
+ "require": "./dist/index.cjs"
+ }
+ },
+ "module": "dist/index.mjs"
}
diff --git a/packages/footer/src/footer.tsx b/packages/footer/src/footer.tsx
index a788c840..4a6cead1 100644
--- a/packages/footer/src/footer.tsx
+++ b/packages/footer/src/footer.tsx
@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import {jsx, Flex, Box, Link} from 'theme-ui';
-import {FC} from 'react';
+import {Flex, Box, Link} from 'theme-ui';
+import type {FC} from 'react';
import LogoSVG from './logo';
import Socials from './socials';
diff --git a/packages/footer/src/index.ts b/packages/footer/src/index.ts
new file mode 100644
index 00000000..5a53e68d
--- /dev/null
+++ b/packages/footer/src/index.ts
@@ -0,0 +1,4 @@
+export {Footer} from './footer';
+export {default as SlimlineFooter} from './slimline-footer';
+export {default as Logo} from './logo';
+export {default as Socials} from './socials';
diff --git a/packages/footer/src/logo.tsx b/packages/footer/src/logo.tsx
index d3c06ab3..62b99030 100644
--- a/packages/footer/src/logo.tsx
+++ b/packages/footer/src/logo.tsx
@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import {FC} from 'react';
-import {jsx} from 'theme-ui';
+import type {FC} from 'react';
+
const LogoSVG: FC = () => {
return (
diff --git a/packages/footer/src/slimline-footer.tsx b/packages/footer/src/slimline-footer.tsx
index 3ff92ef8..2dc20a05 100644
--- a/packages/footer/src/slimline-footer.tsx
+++ b/packages/footer/src/slimline-footer.tsx
@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import {jsx, Flex, Box, Link} from 'theme-ui';
-import {FC} from 'react';
+import {Flex, Box, Link} from 'theme-ui';
+import type {FC} from 'react';
import Socials from './socials';
import LogoSVG from './logo';
diff --git a/packages/footer/src/socials.tsx b/packages/footer/src/socials.tsx
index 9891ed4d..25c2019c 100644
--- a/packages/footer/src/socials.tsx
+++ b/packages/footer/src/socials.tsx
@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import {Fragment, FC} from 'react';
-import {jsx, Link} from 'theme-ui';
+import type { FC} from 'react';
+import {Link} from 'theme-ui';
import {
FaEnvelope,
FaPodcast,
@@ -12,7 +11,7 @@ import {
const Socials: FC = () => {
return (
-
+ <>
{
>
-
+
);
};
diff --git a/packages/form/__fixtures__/gridform.js b/packages/form/__fixtures__/gridform.jsx
similarity index 99%
rename from packages/form/__fixtures__/gridform.js
rename to packages/form/__fixtures__/gridform.jsx
index 671acae2..72c9faf0 100644
--- a/packages/form/__fixtures__/gridform.js
+++ b/packages/form/__fixtures__/gridform.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+
import {Form, validation} from '../src';
const Success = () => (
diff --git a/packages/form/__tests__/form.test.js b/packages/form/__tests__/form.test.js
index 07dea9a1..d17ede49 100644
--- a/packages/form/__tests__/form.test.js
+++ b/packages/form/__tests__/form.test.js
@@ -1,15 +1,16 @@
-import * as React from 'react';
-import {fireEvent, render, screen, within} from '@testing-library/react';
-import gridform from '../__fixtures__/gridform';
+import * as React from "react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { vi } from "vitest";
+import gridform from "../__fixtures__/gridform";
-test('it renders all the fields', () => {
+test("it renders all the fields", () => {
render(gridform);
- const textboxes = screen.getAllByRole('textbox');
- const options = screen.getAllByRole('option');
- const comboboxes = screen.getAllByRole('combobox');
- const checkboxes = screen.getAllByRole('checkbox');
- const buttons = screen.getAllByRole('button');
+ const textboxes = screen.getAllByRole("textbox");
+ const options = screen.getAllByRole("option");
+ const comboboxes = screen.getAllByRole("combobox");
+ const checkboxes = screen.getAllByRole("checkbox");
+ const buttons = screen.getAllByRole("button");
expect(textboxes).toHaveLength(3);
expect(options).toHaveLength(3);
@@ -18,100 +19,100 @@ test('it renders all the fields', () => {
expect(buttons).toHaveLength(5);
});
-test('it cannot submit form with required fields', () => {
- const submitForm = jest.fn();
- render(React.cloneElement(gridform, {submitForm}));
+test("it cannot submit form with required fields", () => {
+ const submitForm = vi.fn();
+ render(React.cloneElement(gridform, { submitForm }));
- expect(screen.getByText('Submit')).toHaveAttribute('disabled');
+ expect(screen.getByText("Submit")).toBeDisabled();
- fireEvent.change(screen.getByLabelText('Mobile'), {
+ fireEvent.change(screen.getByLabelText("Mobile"), {
target: {
- value: '0400000000'
+ value: "0400000000"
}
});
- expect(screen.getByText('Submit')).not.toHaveAttribute('disabled');
+ expect(screen.getByText("Submit")).toBeEnabled();
- fireEvent.click(screen.getByText('Submit'));
+ fireEvent.click(screen.getByText("Submit"));
- expect(submitForm).not.toBeCalled();
+ expect(submitForm).not.toHaveBeenCalled();
});
-test('it can submit form after completing required fields', () => {
- const submitForm = jest.fn();
- render(React.cloneElement(gridform, {submitForm}));
+test("it can submit form after completing required fields", () => {
+ const submitForm = vi.fn();
+ render(React.cloneElement(gridform, { submitForm }));
- expect(screen.getByText('Submit')).toHaveAttribute('disabled');
+ expect(screen.getByText("Submit")).toBeDisabled();
- fireEvent.change(screen.getByLabelText('Name*'), {
+ fireEvent.change(screen.getByLabelText("Name*"), {
target: {
- value: 'First name'
+ value: "First name"
}
});
- expect(screen.getByText('Submit')).not.toHaveAttribute('disabled');
+ expect(screen.getByText("Submit")).toBeEnabled();
- fireEvent.click(screen.getByText('Submit'));
+ fireEvent.click(screen.getByText("Submit"));
- expect(submitForm).toBeCalledWith(
+ expect(submitForm).toHaveBeenCalledWith(
{
- name: 'First name',
- 'opt-1': 'second'
+ name: "First name",
+ "opt-1": "second"
},
expect.any(Object),
expect.any(Function)
);
});
-test('it can add additional fields to the fieldarray', () => {
- const submitForm = jest.fn();
- render(React.cloneElement(gridform, {submitForm}));
+test("it can add additional fields to the fieldarray", () => {
+ const submitForm = vi.fn();
+ render(React.cloneElement(gridform, { submitForm }));
- fireEvent.click(screen.getByText('Add'));
- fireEvent.click(screen.getByText('Add'));
+ fireEvent.click(screen.getByText("Add"));
+ fireEvent.click(screen.getByText("Add"));
- const firstMember = screen.getByRole('group', {
- name: 'Family member 1'
+ const firstMember = screen.getByRole("group", {
+ name: "Family member 1"
});
- const secondMember = screen.getByRole('group', {
- name: 'Family member 2'
+ const secondMember = screen.getByRole("group", {
+ name: "Family member 2"
});
- fireEvent.change(screen.getByLabelText('Name*'), {
+ fireEvent.change(screen.getByLabelText("Name*"), {
target: {
- value: 'First name'
+ value: "First name"
}
});
- fireEvent.change(within(firstMember).getByLabelText('Name'), {
+ fireEvent.change(within(firstMember).getByLabelText("Name"), {
target: {
- value: 'Second name'
+ value: "Second name"
}
});
- fireEvent.change(within(secondMember).getByLabelText('Name'), {
+ fireEvent.change(within(secondMember).getByLabelText("Name"), {
target: {
- value: 'Third name'
+ value: "Third name"
}
});
- fireEvent.click(screen.getByText('Submit'));
+ fireEvent.click(screen.getByText("Submit"));
- expect(submitForm).toBeCalledWith(
+ expect(submitForm).toHaveBeenCalledWith(
{
- name: 'First name',
- 'opt-1': 'second',
+ name: "First name",
+ "opt-1": "second",
testing: [
{
- name: 'Second name'
+ name: "Second name"
},
{
- name: 'Third name'
+ name: "Third name"
}
]
},
expect.any(Object),
expect.any(Function)
);
-});
+});
\ No newline at end of file
diff --git a/packages/form/babel.config.js b/packages/form/babel.config.js
deleted file mode 100644
index 4c05afbe..00000000
--- a/packages/form/babel.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../../babel.config');
diff --git a/packages/form/package.json b/packages/form/package.json
index ab1e3a4d..8b8140db 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -3,30 +3,33 @@
"version": "0.8.0",
"license": "MIT",
"source": "src/index.js",
- "main": "dist/index.js",
- "module": "dist/index.module.js",
+ "main": "dist/index.cjs",
+ "module": "dist/index.mjs",
"scripts": {
- "prepare": "microbundle --no-compress && babel -d dist/schemas src/schemas",
- "watch": "microbundle watch --no-compress"
+ "build": "tsdown src/index.js --format esm --format cjs --deps.skip-node-modules-bundle --clean && tsdown \"src/schemas/**/*.js\" --format cjs --out-dir dist/schemas --unbundle",
+ "watch": "tsdown src/index.js --format esm --format cjs --deps.skip-node-modules-bundle --watch"
},
"files": [
"dist",
"sanity.json"
],
"peerDependencies": {
- "react": "^16.0",
- "theme-ui": "^0.3.1"
+ "@emotion/react": "^11.14.0",
+ "@emotion/styled": "^11.14.1",
+ "react": "^19.2.0",
+ "theme-ui": "^0.17.4"
},
"dependencies": {
- "@reach/auto-id": "^0.12.1",
- "final-form": "^4.18.7",
- "final-form-arrays": "^3.0.2",
- "prop-types": "^15.6.0",
- "react-final-form": "^6.3.5",
- "react-final-form-arrays": "^3.1.1"
+ "final-form": "^5.0.1",
+ "final-form-arrays": "^4.0.1",
+ "react-final-form": "^7.0.1",
+ "react-final-form-arrays": "^5.0.0"
},
- "devDependencies": {
- "@testing-library/react": "^11.2.3"
- },
- "xo": false
+
+ "exports": {
+ ".": {
+ "import": "./dist/index.mjs",
+ "require": "./dist/index.cjs"
+ }
+ }
}
diff --git a/packages/form/src/form.js b/packages/form/src/form.jsx
similarity index 91%
rename from packages/form/src/form.js
rename to packages/form/src/form.jsx
index 706eab7d..18cdb893 100644
--- a/packages/form/src/form.js
+++ b/packages/form/src/form.jsx
@@ -1,25 +1,8 @@
-/** @jsx jsx */
-/** @jsxFrag React.Fragment */
-import React from 'react';
-import PropTypes from 'prop-types';
+import {useId} from 'react';
import {Form, Field, useField} from 'react-final-form';
import arrayMutators from 'final-form-arrays';
import {FieldArray} from 'react-final-form-arrays';
-import {useId} from '@reach/auto-id';
-import {
- Label,
- Textarea,
- Input,
- Checkbox,
- Button,
- Radio,
- Select,
- Grid,
- Box,
- Styled,
- Text,
- jsx
-} from 'theme-ui';
+import {Label, Textarea, Input, Checkbox, Button, Radio, Select, Grid, Box, Text} from 'theme-ui';
const Error = ({name}) => {
const {
@@ -33,9 +16,9 @@ const Error = ({name}) => {
) : null;
};
-Error.propTypes = {
+/* Error.propTypes = {
name: PropTypes.string.isRequired
-};
+}; */
const handleReset = (event, form) => {
event.preventDefault();
@@ -56,9 +39,9 @@ const NestedForm = ({
- 
+