+
{icon}
);
};
-State.displayName = 'State';
+State.displayName = "State";
diff --git a/src/components/state/__tests__/State.test.tsx b/src/components/state/__tests__/State.test.tsx
index 7f0bbd25..7d8ecfca 100644
--- a/src/components/state/__tests__/State.test.tsx
+++ b/src/components/state/__tests__/State.test.tsx
@@ -1,27 +1,26 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen } from "@testing-library/react";
-import { State } from '../State';
+import { State } from "../State";
-describe('State tests', () => {
- it('should render without errors', () => {
+describe("State tests", () => {
+ it("should render without errors", () => {
expect(() => {
render(
Hello);
}).not.toThrow();
});
- it('should render the label', () => {
+ it("should render the label", () => {
render(
Hello);
- expect(screen.getByText('Hello')).not.toBeNull();
+ expect(screen.getByText("Hello")).not.toBeNull();
});
- it('should add colors', () => {
+ it("should add colors", () => {
render(
Danger!
-
+ ,
);
- expect(screen.getByTestId('test').className.includes('danger')).toBe(true);
+ expect(screen.getByTestId("test").className.includes("danger")).toBe(true);
});
});
diff --git a/src/components/switch/Switch.tsx b/src/components/switch/Switch.tsx
index 0da8b10b..e2d622ee 100644
--- a/src/components/switch/Switch.tsx
+++ b/src/components/switch/Switch.tsx
@@ -1,26 +1,27 @@
-import * as React from 'react';
-import clsx from 'clsx';
+import * as React from "react";
+import mergeRefs from "react-merge-refs";
-import { useClassNames } from '../../hooks/utility/useClassNames';
-import { useControlled } from '../../hooks/utility/useControlled';
-import { UseRadioState } from '../..';
-import { useLocked } from '../../hooks/utility/useLocked';
-import { State } from '../state/State';
+import clsx from "clsx";
-import { PCRSwitchProps } from '../../typings/PCRSwitchProps';
-import { useCommonProps } from '../../hooks/utility/useCommonProps';
-import { UseCheckboxState } from '../checkbox/Checkbox';
-import mergeRefs from 'react-merge-refs';
-import { useAriaChecked } from './useAriaChecked';
+import { useAriaChecked } from "./useAriaChecked";
+import type { UseRadioState } from "../..";
+import { useClassNames } from "../../hooks/utility/useClassNames";
+import { useCommonProps } from "../../hooks/utility/useCommonProps";
+import { useControlled } from "../../hooks/utility/useControlled";
+import { useLocked } from "../../hooks/utility/useLocked";
+import type { PCRSwitchProps } from "../../typings/PCRSwitchProps";
+import type { UseCheckboxState } from "../checkbox/Checkbox";
+import { State } from "../state/State";
export type SwitchProps<
- S = UseRadioState['state'] | UseCheckboxState['state']
+ S = UseRadioState["state"] | UseCheckboxState["state"],
> = PCRSwitchProps
;
export const Switch = React.forwardRef(
(props, ref) => {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { checked, value, state, ...rest } = useControlled<
- UseRadioState['state'] | UseCheckboxState['state'],
+ UseRadioState["state"] | UseCheckboxState["state"],
SwitchProps
>(props);
@@ -34,12 +35,11 @@ export const Switch = React.forwardRef(
+ className,
+ )}>
(
);
- }
+ },
);
-Switch.displayName = 'Switch';
+Switch.displayName = "Switch";
diff --git a/src/components/switch/__tests__/Switch.test.tsx b/src/components/switch/__tests__/Switch.test.tsx
index 09a9056f..a9c16862 100644
--- a/src/components/switch/__tests__/Switch.test.tsx
+++ b/src/components/switch/__tests__/Switch.test.tsx
@@ -1,8 +1,7 @@
-import { Switch } from '../Switch';
-import { createSmokeTests } from '../../../tests/testingUtils';
+import { createSmokeTests } from "../../../tests/testingUtils";
+import { useCheckboxState } from "../../checkbox/Checkbox";
+import { Switch } from "../Switch";
-import { useCheckboxState } from '../../checkbox/Checkbox';
-
-describe('Switch tests', () => {
+describe("Switch tests", () => {
createSmokeTests(Switch, useCheckboxState);
});
diff --git a/src/components/switch/__tests__/useAriaChecked.test.ts b/src/components/switch/__tests__/useAriaChecked.test.ts
index c5667f10..89c5cc82 100644
--- a/src/components/switch/__tests__/useAriaChecked.test.ts
+++ b/src/components/switch/__tests__/useAriaChecked.test.ts
@@ -1,8 +1,9 @@
-import { renderHook, act } from '@testing-library/react-hooks';
-import { useAriaChecked } from '../useAriaChecked';
+import { renderHook, act } from "@testing-library/react";
-describe('useAriaChecked tests', () => {
- it('should set the correct aria checked status for uncontrolled components', () => {
+import { useAriaChecked } from "../useAriaChecked";
+
+describe("useAriaChecked tests", () => {
+ it("should set the correct aria checked status for uncontrolled components", () => {
const setAttribute = jest.fn();
const addEventListener = jest.fn();
@@ -23,10 +24,10 @@ describe('useAriaChecked tests', () => {
rerender({ checked: false });
- expect(setAttribute).toHaveBeenCalledWith('aria-checked', 'true');
+ expect(setAttribute).toHaveBeenCalledWith("aria-checked", "true");
expect(addEventListener).toHaveBeenCalledWith(
- 'change',
- expect.any(Function)
+ "change",
+ expect.any(Function),
);
act(() => {
diff --git a/src/components/switch/useAriaChecked.ts b/src/components/switch/useAriaChecked.ts
index bc3c62bc..b32302c9 100644
--- a/src/components/switch/useAriaChecked.ts
+++ b/src/components/switch/useAriaChecked.ts
@@ -1,13 +1,14 @@
-import * as React from 'react';
-import { PCRSwitchProps } from '../../typings/PCRSwitchProps';
+import * as React from "react";
+
+import type { PCRSwitchProps } from "../../typings/PCRSwitchProps";
export type UseAriaCheckedOptions = {
- setState?: PCRSwitchProps['setState'];
- checked?: PCRSwitchProps['checked'];
+ setState?: PCRSwitchProps["setState"];
+ checked?: PCRSwitchProps["checked"];
};
const handler = (e: any) => {
- e.currentTarget.setAttribute('aria-checked', e.currentTarget.checked + '');
+ e.currentTarget.setAttribute("aria-checked", e.currentTarget.checked + "");
};
/**
@@ -26,14 +27,14 @@ export const useAriaChecked = ({
let bound = false;
if (!setState && !checked && elem) {
- elem.setAttribute('aria-checked', elem.checked + '');
- elem.addEventListener('change', handler);
+ elem.setAttribute("aria-checked", elem.checked + "");
+ elem.addEventListener("change", handler);
bound = true;
}
return () => {
if (bound && elem) {
- elem.removeEventListener('change', handler);
+ elem.removeEventListener("change", handler);
}
};
}, [setState, checked]);
diff --git a/src/hooks/__tests__/useIcon.test.tsx b/src/hooks/__tests__/useIcon.test.tsx
index bb6d9368..6e2b7c7c 100644
--- a/src/hooks/__tests__/useIcon.test.tsx
+++ b/src/hooks/__tests__/useIcon.test.tsx
@@ -1,50 +1,51 @@
-import * as React from 'react';
+import * as React from "react";
-import { renderHook } from '@testing-library/react-hooks';
-import { useIcon } from '../useIcon';
+import { renderHook } from "@testing-library/react";
-describe('useIcon hook tests', () => {
- it('should return an object when icon is not defined', () => {
+import { useIcon } from "../useIcon";
+
+describe("useIcon hook tests", () => {
+ it("should return an object when icon is not defined", () => {
const { result } = renderHook(() => useIcon(undefined));
expect(result.current).toMatchObject({});
});
- it('should return an icon with a custom classname and type', () => {
+ it("should return an icon with a custom classname and type", () => {
const { result } = renderHook(() =>
useIcon(
- React.createElement('i', {
- className: 'far far-star',
- }) as React.ReactElement
- )
+ React.createElement("i", {
+ className: "far far-star",
+ }) as React.ReactElement,
+ ),
);
- expect(result.current).toMatchObject({ iconType: 'icon' });
- expect(result.current.icon?.props.className).toContain('icon');
+ expect(result.current).toMatchObject({ iconType: "icon" });
+ expect(result.current.icon?.props.className).toContain("icon");
});
- it('should work with svg elements', () => {
+ it("should work with svg elements", () => {
const { result } = renderHook(() =>
useIcon(
- React.createElement('svg', {
- className: 'far far-star',
- }) as React.ReactElement
- )
+ React.createElement("svg", {
+ className: "far far-star",
+ }) as React.ReactElement,
+ ),
);
- expect(result.current).toMatchObject({ iconType: 'svg' });
+ expect(result.current).toMatchObject({ iconType: "svg" });
});
- it('should work with img elements', () => {
+ it("should work with img elements", () => {
const { result } = renderHook(() =>
useIcon(
- React.createElement('img', {
- className: 'far far-star',
- }) as React.ReactElement
- )
+ React.createElement("img", {
+ className: "far far-star",
+ }) as React.ReactElement,
+ ),
);
- expect(result.current).toMatchObject({ iconType: 'image' });
+ expect(result.current).toMatchObject({ iconType: "image" });
});
it("should work when components don't define a class name", () => {
@@ -57,22 +58,22 @@ describe('useIcon hook tests', () => {
const instance = React.createElement(Rectangle);
const { result } = renderHook(() =>
- useIcon(instance as React.ReactElement)
+ useIcon(instance as React.ReactElement),
);
expect(result.current.icon).toEqual(instance);
});
- it('should work when icon contain the type as a substring', () => {
+ it("should work when icon contain the type as a substring", () => {
const { result } = renderHook(() =>
useIcon(
- React.createElement('i', {
- className: 'myicon myicon-star',
- }) as React.ReactElement
- )
+ React.createElement("i", {
+ className: "myicon myicon-star",
+ }) as React.ReactElement,
+ ),
);
- expect(result.current).toMatchObject({ iconType: 'icon' });
- expect(result.current.icon?.props.className).toContain('icon');
+ expect(result.current).toMatchObject({ iconType: "icon" });
+ expect(result.current.icon?.props.className).toContain("icon");
});
});
diff --git a/src/hooks/__tests__/useUUID.test.ts b/src/hooks/__tests__/useUUID.test.ts
index 5985fe5c..e14af44e 100644
--- a/src/hooks/__tests__/useUUID.test.ts
+++ b/src/hooks/__tests__/useUUID.test.ts
@@ -1,17 +1,18 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { nanoid } from 'nanoid/non-secure';
-import { useUUID } from '../useUUID';
+import { renderHook } from "@testing-library/react";
+import { nanoid } from "nanoid/non-secure";
-jest.mock('nanoid/non-secure');
-(nanoid as any).mockImplementation(() => '1234');
+import { useUUID } from "../useUUID";
+
+jest.mock("nanoid/non-secure");
+(nanoid as any).mockImplementation(() => "1234");
afterAll(() => {
(nanoid as any).mockRestore();
});
-describe('useUUID tests', () => {
- it('should generate a UUID', () => {
+describe("useUUID tests", () => {
+ it("should generate a UUID", () => {
const { result } = renderHook(() => useUUID());
- expect(result.current).toEqual('pcr_1234');
+ expect(result.current).toEqual("pcr_1234");
});
});
diff --git a/src/hooks/useIcon.ts b/src/hooks/useIcon.ts
index f59854f8..728fd59e 100644
--- a/src/hooks/useIcon.ts
+++ b/src/hooks/useIcon.ts
@@ -1,17 +1,18 @@
-import * as React from 'react';
-import clsx from 'clsx';
+import * as React from "react";
-import { PCRCheckboxRadioProps } from '../typings/PCRCheckboxRadioProps';
+import clsx from "clsx";
-export const useIcon = (icon: PCRCheckboxRadioProps['icon']) => {
+import type { PCRCheckboxRadioProps } from "../typings/PCRCheckboxRadioProps";
+
+export const useIcon = (icon: PCRCheckboxRadioProps["icon"]) => {
return React.useMemo(() => {
if (icon) {
- let type: 'icon' | 'svg' | 'image' = 'icon';
+ let type: "icon" | "svg" | "image" = "icon";
- if (icon.type === 'img') {
- type = 'image';
- } else if (icon.type === 'svg') {
- type = 'svg';
+ if (icon.type === "img") {
+ type = "image";
+ } else if (icon.type === "svg") {
+ type = "svg";
}
// icons that contain `type` substring
@@ -19,7 +20,7 @@ export const useIcon = (icon: PCRCheckboxRadioProps['icon']) => {
const re = new RegExp(`\\b${type}\\b`);
return {
- iconType: icon.props['data-type'] || type,
+ iconType: icon.props["data-type"] || type,
icon:
icon.props.className && !re.test(icon.props.className)
? React.cloneElement(icon, {
diff --git a/src/hooks/useUUID.ts b/src/hooks/useUUID.ts
index 0139f67c..adf7d0df 100644
--- a/src/hooks/useUUID.ts
+++ b/src/hooks/useUUID.ts
@@ -1,5 +1,6 @@
-import * as React from 'react';
-import { nanoid } from 'nanoid/non-secure';
+import * as React from "react";
-const PREFIX = 'pcr_';
+import { nanoid } from "nanoid/non-secure";
+
+const PREFIX = "pcr_";
export const useUUID = () => React.useRef(PREFIX + nanoid(8)).current;
diff --git a/src/hooks/utility/__tests__/__snapshots__/useClassNames.test.ts.snap b/src/hooks/utility/__tests__/__snapshots__/useClassNames.test.ts.snap
new file mode 100644
index 00000000..194c1091
--- /dev/null
+++ b/src/hooks/utility/__tests__/__snapshots__/useClassNames.test.ts.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useClassNames tests should return an expected object 1`] = `
+{
+ "p-bigger": undefined,
+ "p-default": true,
+ "p-has-focus": undefined,
+ "p-locked": undefined,
+ "p-plain": undefined,
+ "p-pulse": "pulse",
+ "p-round": "round",
+ "p-thick": "thick",
+ "p-undefined": undefined,
+}
+`;
diff --git a/src/hooks/utility/__tests__/useCheckboxRadioProps.test.ts b/src/hooks/utility/__tests__/useCheckboxRadioProps.test.ts
index 21cc8ec2..674c00af 100644
--- a/src/hooks/utility/__tests__/useCheckboxRadioProps.test.ts
+++ b/src/hooks/utility/__tests__/useCheckboxRadioProps.test.ts
@@ -1,16 +1,17 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { useCheckboxRadioProps } from '../useCheckboxRadioProps';
+import { renderHook } from "@testing-library/react";
-describe('useCheckboxRadioProps tests', () => {
- it('should remove checkbox and radio props and filter out common props', () => {
+import { useCheckboxRadioProps } from "../useCheckboxRadioProps";
+
+describe("useCheckboxRadioProps tests", () => {
+ it("should remove checkbox and radio props and filter out common props", () => {
const { result } = renderHook(() =>
useCheckboxRadioProps({
- shape: 'curve',
- })
+ shape: "curve",
+ }),
);
expect(result.current).toMatchObject({
- shape: 'curve',
+ shape: "curve",
htmlProps: expect.any(Object),
});
});
diff --git a/src/hooks/utility/__tests__/useClassNames.test.ts b/src/hooks/utility/__tests__/useClassNames.test.ts
index f370ed7b..e2c5b0a1 100644
--- a/src/hooks/utility/__tests__/useClassNames.test.ts
+++ b/src/hooks/utility/__tests__/useClassNames.test.ts
@@ -1,61 +1,49 @@
-import { useClassNames } from '../useClassNames';
+import { useClassNames } from "../useClassNames";
-describe('useClassNames tests', () => {
- it('should return default styles', () => {
+describe("useClassNames tests", () => {
+ it("should return default styles", () => {
expect(useClassNames({})).toMatchObject({
- 'p-default': true,
- 'p-bigger': undefined,
+ "p-default": true,
+ "p-bigger": undefined,
});
});
- it('should not be a default when animation tada, rotate, or jelly', () => {
+ it("should not be a default when animation tada, rotate, or jelly", () => {
const trials = {
tada: false,
rotate: false,
jelly: false,
pulse: true,
smooth: true,
- '': true,
+ "": true,
};
Object.keys(trials).forEach((key) => {
expect(useClassNames({ animation: key } as any)).toMatchObject({
- 'p-default': (trials as any)[key],
+ "p-default": (trials as any)[key],
});
});
});
- it('should not be default when switch is defined', () => {
+ it("should not be default when switch is defined", () => {
expect(useClassNames({}, true)).toMatchObject({
- 'p-default': false,
+ "p-default": false,
});
});
- it('should not be default when an icon is used', () => {
- expect(useClassNames({ iconType: 'svg' })).toMatchObject({
- 'p-default': false,
+ it("should not be default when an icon is used", () => {
+ expect(useClassNames({ iconType: "svg" })).toMatchObject({
+ "p-default": false,
});
});
- it('should return an expected object', () => {
+ it("should return an expected object", () => {
expect(
useClassNames({
- animation: 'pulse',
- shape: 'round',
- variant: 'thick',
- })
- ).toMatchInlineSnapshot(`
- Object {
- "p-bigger": undefined,
- "p-default": true,
- "p-has-focus": undefined,
- "p-locked": undefined,
- "p-plain": undefined,
- "p-pulse": "pulse",
- "p-round": "round",
- "p-thick": "thick",
- "p-undefined": undefined,
- }
- `);
+ animation: "pulse",
+ shape: "round",
+ variant: "thick",
+ }),
+ ).toMatchSnapshot();
});
});
diff --git a/src/hooks/utility/__tests__/useCommonProps.test.ts b/src/hooks/utility/__tests__/useCommonProps.test.ts
index be630dec..3f852f4b 100644
--- a/src/hooks/utility/__tests__/useCommonProps.test.ts
+++ b/src/hooks/utility/__tests__/useCommonProps.test.ts
@@ -1,38 +1,39 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { useCommonProps } from '../useCommonProps';
+import { renderHook } from "@testing-library/react";
-describe('useCommonProps', () => {
- it('should filter out non-html props', () => {
+import { useCommonProps } from "../useCommonProps";
+
+describe("useCommonProps", () => {
+ it("should filter out non-html props", () => {
const { result } = renderHook(() =>
useCommonProps({
locked: true,
- color: 'success',
- variant: 'thick',
- type: 'radio',
+ color: "success",
+ variant: "thick",
+ type: "radio",
readOnly: true,
- })
+ }),
);
expect(result.current).toMatchObject({
locked: true,
- color: 'success',
- variant: 'thick',
+ color: "success",
+ variant: "thick",
htmlProps: {
- type: 'radio',
+ type: "radio",
readOnly: true,
},
});
});
- it('should use a provided id prop instead of the generated one', () => {
+ it("should use a provided id prop instead of the generated one", () => {
const { result } = renderHook(() =>
useCommonProps({
- id: 'hello',
- })
+ id: "hello",
+ }),
);
expect(result.current).toMatchObject({
- id: 'hello',
+ id: "hello",
htmlProps: {},
});
});
diff --git a/src/hooks/utility/__tests__/useControlled.test.ts b/src/hooks/utility/__tests__/useControlled.test.ts
index c5c56773..d4735c92 100644
--- a/src/hooks/utility/__tests__/useControlled.test.ts
+++ b/src/hooks/utility/__tests__/useControlled.test.ts
@@ -1,58 +1,58 @@
-import { useControlled } from '../useControlled';
+import { useControlled } from "../useControlled";
-describe('useControlled tests', () => {
- it('should preset value when undefined', () => {
+describe("useControlled tests", () => {
+ it("should preset value when undefined", () => {
expect(useControlled({ setState: () => null })).toMatchObject({
- value: '',
+ value: "",
});
});
- it('should use defaultValue when defined', () => {
+ it("should use defaultValue when defined", () => {
expect(
- useControlled({ setState: () => null, defaultValue: 'hello' })
+ useControlled({ setState: () => null, defaultValue: "hello" }),
).toMatchObject({
- value: 'hello',
+ value: "hello",
});
});
- it('should use value when defined', () => {
+ it("should use value when defined", () => {
expect(
- useControlled({ setState: () => null, value: 'hello' })
+ useControlled({ setState: () => null, value: "hello" }),
).toMatchObject({
- value: 'hello',
+ value: "hello",
});
});
- it('should synchronize checked to state when state is an array', () => {
- const opts = { setState: () => null, value: 'a', state: ['a', 'b', 'c'] };
+ it("should synchronize checked to state when state is an array", () => {
+ const opts = { setState: () => null, value: "a", state: ["a", "b", "c"] };
expect(useControlled(opts)).toMatchObject({ checked: true });
expect(
useControlled({
...opts,
- value: 'abc',
- })
+ value: "abc",
+ }),
).toMatchObject({ checked: false });
});
- it('should synchronized checked to state when state is a boolean primitive', () => {
- const opts = { setState: () => null, value: 'a', state: true };
+ it("should synchronized checked to state when state is a boolean primitive", () => {
+ const opts = { setState: () => null, value: "a", state: true };
expect(useControlled(opts)).toMatchObject({ checked: true });
expect(
useControlled({
...opts,
state: false,
- })
+ }),
).toMatchObject({ checked: false });
});
- it('should bypass synchronization when checked is defined', () => {
+ it("should bypass synchronization when checked is defined", () => {
const opts = { setState: () => null, checked: false, state: true };
expect(useControlled(opts)).toMatchObject({ checked: false });
});
- it('should return checked and value', () => {
+ it("should return checked and value", () => {
expect(useControlled({})).toMatchObject({
checked: undefined,
value: undefined,
diff --git a/src/hooks/utility/__tests__/useLocked.test.ts b/src/hooks/utility/__tests__/useLocked.test.ts
index b7f605e1..7b605b2b 100644
--- a/src/hooks/utility/__tests__/useLocked.test.ts
+++ b/src/hooks/utility/__tests__/useLocked.test.ts
@@ -1,28 +1,31 @@
-import { useLocked } from '../useLocked';
+import { useLocked } from "../useLocked";
-describe('useLocked tests', () => {
- it('should disable pointer events when locked', () => {
+describe("useLocked tests", () => {
+ it("should disable pointer events when locked", () => {
expect(useLocked({ locked: true })).toMatchObject({
- pointerEvents: 'none',
+ pointerEvents: "none",
});
});
- it('should merge pre-existing styles', () => {
+ it("should merge pre-existing styles", () => {
expect(
- useLocked({ locked: true, style: { display: 'flex', flex: '1 0 100%' } })
+ useLocked({ locked: true, style: { display: "flex", flex: "1 0 100%" } }),
).toMatchObject({
- pointerEvents: 'none',
- display: 'flex',
- flex: '1 0 100%',
+ pointerEvents: "none",
+ display: "flex",
+ flex: "1 0 100%",
});
});
- it('should return pre-existing styles when not locked', () => {
+ it("should return pre-existing styles when not locked", () => {
expect(
- useLocked({ locked: false, style: { display: 'flex', flex: '1 0 100%' } })
+ useLocked({
+ locked: false,
+ style: { display: "flex", flex: "1 0 100%" },
+ }),
).toMatchObject({
- display: 'flex',
- flex: '1 0 100%',
+ display: "flex",
+ flex: "1 0 100%",
});
});
});
diff --git a/src/hooks/utility/useCheckboxRadioProps.ts b/src/hooks/utility/useCheckboxRadioProps.ts
index e8ca9d86..a7673108 100644
--- a/src/hooks/utility/useCheckboxRadioProps.ts
+++ b/src/hooks/utility/useCheckboxRadioProps.ts
@@ -1,13 +1,14 @@
-import { useCommonProps } from './useCommonProps';
-import { PCRCheckboxRadioProps } from '../../typings/PCRCheckboxRadioProps';
+import { useCommonProps } from "./useCommonProps";
+import type { PCRCheckboxRadioProps } from "../../typings/PCRCheckboxRadioProps";
/**
* Responsible for extracting common props for radio and checkbox
* controls.
*/
export const useCheckboxRadioProps = >(
- props: P
+ props: P,
) => {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const { shape, plain, icon, indeterminate, hasFocus, ...rest } = props;
return { shape, plain, icon, indeterminate, ...useCommonProps(rest) };
diff --git a/src/hooks/utility/useClassNames.ts b/src/hooks/utility/useClassNames.ts
index 772c25ba..4eae6378 100644
--- a/src/hooks/utility/useClassNames.ts
+++ b/src/hooks/utility/useClassNames.ts
@@ -1,20 +1,20 @@
-import { PCRCheckboxRadioProps } from '../../typings/PCRCheckboxRadioProps';
-import { PCRSwitchProps } from '../../typings/PCRSwitchProps';
+import type { PCRCheckboxRadioProps } from "../../typings/PCRCheckboxRadioProps";
+import type { PCRSwitchProps } from "../../typings/PCRSwitchProps";
-type Props = Omit & {
- shape?: PCRCheckboxRadioProps['shape'] | PCRSwitchProps['shape'];
+type Props = Omit & {
+ shape?: PCRCheckboxRadioProps["shape"] | PCRSwitchProps["shape"];
variant?: string;
};
const isDefault = (
- animation: PCRCheckboxRadioProps['animation'],
- type: PCRCheckboxRadioProps['iconType']
+ animation: PCRCheckboxRadioProps["animation"],
+ type: PCRCheckboxRadioProps["iconType"],
) => {
if (type) {
return false;
}
- return !animation || animation === 'smooth' || animation === 'pulse';
+ return !animation || animation === "smooth" || animation === "pulse";
};
/**
@@ -34,11 +34,11 @@ export const useClassNames = (props: Props, isSwitch?: boolean) => {
} = props;
return {
- 'p-default': !isSwitch && isDefault(animation, iconType),
- 'p-bigger': bigger,
- 'p-locked': locked,
- 'p-plain': plain,
- 'p-has-focus': hasFocus,
+ "p-default": !isSwitch && isDefault(animation, iconType),
+ "p-bigger": bigger,
+ "p-locked": locked,
+ "p-plain": plain,
+ "p-has-focus": hasFocus,
[`p-${animation}`]: animation,
[`p-${shape}`]: shape,
[`p-${variant}`]: variant,
diff --git a/src/hooks/utility/useCommonProps.ts b/src/hooks/utility/useCommonProps.ts
index 92f33225..a84a4747 100644
--- a/src/hooks/utility/useCommonProps.ts
+++ b/src/hooks/utility/useCommonProps.ts
@@ -1,5 +1,5 @@
-import { useUUID } from '../useUUID';
-import { CommonProps } from '../../typings/PCRCommonProps';
+import type { CommonProps } from "../../typings/PCRCommonProps";
+import { useUUID } from "../useUUID";
/**
* Filters out the noise of prop mayhem with PCR. This separates
diff --git a/src/hooks/utility/useControlled.ts b/src/hooks/utility/useControlled.ts
index 2f85a298..cc752d0d 100644
--- a/src/hooks/utility/useControlled.ts
+++ b/src/hooks/utility/useControlled.ts
@@ -1,8 +1,8 @@
-import { CommonProps } from '../../typings/PCRCommonProps';
+import type { CommonProps } from "../../typings/PCRCommonProps";
-const isBoolean = (e: unknown) => typeof e === 'boolean';
+const isBoolean = (e: unknown) => typeof e === "boolean";
const isNullish = (e: unknown) => e === null || e === undefined;
-const isIndeterminate = (e: unknown) => e === 'indeterminate';
+const isIndeterminate = (e: unknown) => e === "indeterminate";
/**
* A generic way to setup controlled components by
@@ -41,7 +41,7 @@ export const useControlled = >(props: P) => {
// string to prevent 'on' values. Use the defaultValue
// if provided
if (isNullish(value)) {
- value = defaultValue || '';
+ value = defaultValue ?? "";
}
}
diff --git a/src/hooks/utility/useLocked.ts b/src/hooks/utility/useLocked.ts
index e71a083f..f8f4064c 100644
--- a/src/hooks/utility/useLocked.ts
+++ b/src/hooks/utility/useLocked.ts
@@ -1,12 +1,13 @@
-import * as React from 'react';
-import { CommonProps } from '../../typings/PCRCommonProps';
+import type * as React from "react";
+
+import type { CommonProps } from "../../typings/PCRCommonProps";
export type UseLockedArgs = {
- locked: CommonProps['locked'];
+ locked: CommonProps["locked"];
style?: React.CSSProperties;
};
-const lockedStyles: React.CSSProperties = { pointerEvents: 'none' };
+const lockedStyles: React.CSSProperties = { pointerEvents: "none" };
/**
* A simplier way to prevent checking when PCR is in locked mode.
diff --git a/src/index.ts b/src/index.ts
index 602a0b94..b8525e11 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,3 @@
-export * from './components/checkbox/Checkbox';
-export * from './components/radio/Radio';
-export * from './components/switch/Switch';
+export * from "./components/checkbox/Checkbox";
+export * from "./components/radio/Radio";
+export * from "./components/switch/Switch";
diff --git a/src/tests/testingUtils.tsx b/src/tests/testingUtils.tsx
index 014d6cea..e84282ad 100644
--- a/src/tests/testingUtils.tsx
+++ b/src/tests/testingUtils.tsx
@@ -1,6 +1,7 @@
/* eslint-disable jest/no-export */
-import * as React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import * as React from "react";
+
+import { fireEvent, render, screen } from "@testing-library/react";
export const getByValue = (container: HTMLElement, value: string) => {
// eslint-disable-next-line testing-library/no-node-access
@@ -22,7 +23,7 @@ const createComponent =
return React.createElement(component, {
...p,
...props,
- 'data-testid': 'pretty',
+ "data-testid": "pretty",
});
};
@@ -34,33 +35,33 @@ const createComponent =
* 4. It connects with state hooks as expected
*/
export const createSmokeTests = (component: any, hook?: (args: any) => any) => {
- it('should render without errors', () => {
+ it("should render without errors", () => {
expect(() => {
render(React.createElement(component));
}).not.toThrow();
});
- it('should forward refs', () => {
+ it("should forward refs", () => {
const ref = React.createRef();
render(React.createElement(component, { ref }));
expect(ref.current).toBeInstanceOf(HTMLInputElement);
});
- it('should work as a controlled component', () => {
+ it("should work as a controlled component", () => {
const onChange = jest.fn();
render(
- React.createElement(component, { onChange, 'data-testid': 'pretty' })
+ React.createElement(component, { onChange, "data-testid": "pretty" }),
);
- fireEvent.click(screen.getByTestId('pretty'), {
- currentTarget: { value: '' },
+ fireEvent.click(screen.getByTestId("pretty"), {
+ currentTarget: { value: "" },
});
expect(onChange).toHaveBeenCalledTimes(1);
});
- it('should integrate with state hooks', () => {
+ it("should integrate with state hooks", () => {
expect(hook).toBeInstanceOf(Function);
// if to make tsc happy
@@ -70,7 +71,7 @@ export const createSmokeTests = (component: any, hook?: (args: any) => any) => {
const Wrapper = createComponent(component, hook, { onChange });
render();
- fireEvent.click(screen.getByTestId('pretty'));
+ fireEvent.click(screen.getByTestId("pretty"));
// eslint-disable-next-line jest/no-conditional-expect
expect(onChange).toHaveBeenCalledTimes(1);
diff --git a/src/typings/PCRCheckboxRadioProps.ts b/src/typings/PCRCheckboxRadioProps.ts
index 3795ed6f..fee85dc7 100644
--- a/src/typings/PCRCheckboxRadioProps.ts
+++ b/src/typings/PCRCheckboxRadioProps.ts
@@ -1,10 +1,10 @@
-import { CommonProps } from './PCRCommonProps';
+import type { CommonProps } from "./PCRCommonProps";
-type Shape = 'curve' | 'round';
-type Fill = 'thick' | 'fill';
-type Animation = 'smooth' | 'jelly' | 'tada' | 'rotate' | 'pulse';
+type Shape = "curve" | "round";
+type Fill = "thick" | "fill";
+type Animation = "smooth" | "jelly" | "tada" | "rotate" | "pulse";
-export type PCRCheckboxRadioProps = Omit, 'type'> & {
+export type PCRCheckboxRadioProps = Omit, "type"> & {
/**
* The shape of the checkbox or radio.
*/
@@ -34,10 +34,10 @@ export type PCRCheckboxRadioProps = Omit, 'type'> & {
/**
* The icon to pass (as JSX) to the checkbox or radio.
*/
- icon?: React.ReactElement;
+ icon?: React.ReactElement;
/**
* @private
*/
- iconType?: 'svg' | 'icon' | 'image';
+ iconType?: "svg" | "icon" | "image";
};
diff --git a/src/typings/PCRCommonProps.ts b/src/typings/PCRCommonProps.ts
index 4b20e359..1ea0cbeb 100644
--- a/src/typings/PCRCommonProps.ts
+++ b/src/typings/PCRCommonProps.ts
@@ -1,16 +1,16 @@
-import * as React from 'react';
+import type * as React from "react";
-export type Colors = 'primary' | 'success' | 'info' | 'warning' | 'danger';
+export type Colors = "primary" | "success" | "info" | "warning" | "danger";
type ColorsOutline =
- | 'primary-o'
- | 'success-o'
- | 'info-o'
- | 'warning-o'
- | 'danger-o';
+ | "primary-o"
+ | "success-o"
+ | "info-o"
+ | "warning-o"
+ | "danger-o";
export type CommonProps = Omit<
React.InputHTMLAttributes,
- 'color'
+ "color"
> & {
/**
* Set true to enable locked mode.
diff --git a/src/typings/PCRSwitchProps.ts b/src/typings/PCRSwitchProps.ts
index 3c5984f1..7ae40b3c 100644
--- a/src/typings/PCRSwitchProps.ts
+++ b/src/typings/PCRSwitchProps.ts
@@ -1,10 +1,10 @@
-import { CommonProps, Colors } from './PCRCommonProps';
+import type { CommonProps, Colors } from "./PCRCommonProps";
-type Shape = 'fill' | 'slim';
+type Shape = "fill" | "slim";
export type PCRSwitchProps = Omit<
CommonProps,
- 'variation' | 'animation' | 'color' | 'type'
+ "variation" | "animation" | "color" | "type"
> & {
/**
* The shape of the Switch.
@@ -25,7 +25,7 @@ export type PCRSwitchProps = Omit<
/**
* Override the kind of switch. Defaults to checkbox.
*/
- type?: 'checkbox' | 'radio';
+ type?: "checkbox" | "radio";
/**
* @private
diff --git a/tsconfig.json b/tsconfig.json
index c97ab4cc..58af4760 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,8 @@
{
"compilerOptions": {
- "target": "ES2020",
+ "target": "ES2022",
"module": "ESNext",
- "jsx": "react",
+ "jsx": "react-jsx",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
@@ -12,12 +12,12 @@
"alwaysStrict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
- "moduleResolution": "node",
+ "skipLibCheck": true,
+ "moduleResolution": "Bundler",
"esModuleInterop": true,
- "downlevelIteration": true,
- "lib": ["dom", "es2020"]
+ "lib": ["DOM", "ES2022"]
},
- "include": ["src/"],
+ "include": ["src/", "*.ts"],
"ts-node": {
"transpileOnly": true,
"compilerOptions": {
@@ -25,8 +25,9 @@
"noUnusedParameters": false,
"noImplicitAny": false,
"module": "CommonJS",
- "lib": ["ES2019", "DOM"],
- "target": "ES2019"
+ "moduleResolution": "Node",
+ "lib": ["ES2022", "DOM"],
+ "target": "ES2022"
}
}
}
diff --git a/tsup.config.ts b/tsup.config.ts
new file mode 100644
index 00000000..78a270be
--- /dev/null
+++ b/tsup.config.ts
@@ -0,0 +1,35 @@
+import { glob } from "glob";
+import { defineConfig } from "tsup";
+import type { Options } from "tsup";
+
+const entry = glob.sync("src/**/*.{ts,tsx}", {
+ ignore: ["**/__tests__/**", "**/tests/**"],
+});
+
+const shared = {
+ entry,
+ sourcemap: true,
+ clean: true,
+ dts: true,
+} satisfies Options;
+
+export default defineConfig([
+ {
+ ...shared,
+ format: "cjs",
+ outDir: "dist/cjs",
+ },
+ {
+ ...shared,
+ format: "esm",
+ outDir: "dist/esm",
+ },
+ {
+ ...shared,
+ entry: ["src/index.ts"],
+ bundle: true,
+ minify: true,
+ format: "iife",
+ outDir: "dist/umd",
+ },
+]);