add prettier config (#34)

* add prettier without formatting

* add format check to tests workflow

* run prettier formatting

* fix: run prettier

.eslintrc.cjs

@@ -12,15 +12,17 @@ module.exports = {
   ignorePatterns: ["dist", ".eslintrc.cjs", "lib"],
   parser: "@typescript-eslint/parser",
   plugins: ["react-refresh", "testing-library"],
-  overrides: [ { 
-    files: ["./src/**/*.test.tsx"],
-    extends: ["plugin:testing-library/react"],
-    rules: {
-      "testing-library/prefer-implicit-assert": "error",
-      "testing-library/prefer-presence-queries": "error",
-      "testing-library/prefer-user-event": "error"
-    }
-  }],
+  overrides: [
+    {
+      files: ["./src/**/*.test.tsx"],
+      extends: ["plugin:testing-library/react"],
+      rules: {
+        "testing-library/prefer-implicit-assert": "error",
+        "testing-library/prefer-presence-queries": "error",
+        "testing-library/prefer-user-event": "error",
+      },
+    },
+  ],
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module",
@@ -38,4 +40,4 @@ module.exports = {
       version: "detect",
     },
   },
-};
+}

.github/workflows/release.yml

@@ -1,4 +1,3 @@
-
 name: Release
 on:
   push:
@@ -39,4 +38,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release
+        run: npx semantic-release

.github/workflows/tests.yaml

@@ -47,9 +47,11 @@ jobs:
         shell: bash
         run: pnpm pack
 
-
       - name: Run lint
         run: pnpm lint
 
+      - name: Run format
+        run: pnpm format:check
+
       - name: Run tests
         run: pnpm test

.prettierignore

@@ -0,0 +1,2 @@
+# Ignore artifacts:
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "semi": false
+}

.storybook/main.ts

@@ -1,11 +1,11 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from "@storybook/react-vite"
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",    
+    "@storybook/addon-onboarding",
   ],
   framework: {
     name: "@storybook/react-vite",
@@ -14,5 +14,5 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
-};
-export default config;
+}
+export default config

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/react"
 
 const preview: Preview = {
   parameters: {
@@ -10,6 +10,6 @@ const preview: Preview = {
       },
     },
   },
-};
+}
 
-export default preview;
+export default preview

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "editor.tabSize": 2,
-}
+  "editor.tabSize": 2
+}

README.md

@@ -9,17 +9,16 @@ $ npm install jsonforms-antd-renderers
 ```
 
 ```tsx
-import { JsonForms } from "@jsonforms/react";
+import { JsonForms } from "@jsonforms/react"
 import {
   rendererRegistryEntries,
   cellRegistryEntries,
-} from "jsonforms-antd-renderers";
-
-<JsonForms
+} from "jsonforms-antd-renderers"
+;<JsonForms
   schema={schema}
   renderers={rendererRegistryEntries}
   cells={cellRegistryEntries}
-/>;
+/>
 ```
 
 ## Contributing

package.json

@@ -40,6 +40,8 @@
     "test": "vitest",
     "tsc": "tsc",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format:write": "prettier . --write",
+    "format:check": "prettier . --check",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -85,6 +87,7 @@
     "jsdom": "^24.0.0",
     "json-schema-to-ts": "^3.0.0",
     "lodash.isempty": "^4.4.0",
+    "prettier": "3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "semantic-release": "^23.0.2",

src/antd/Checkbox.test.tsx

@@ -1,6 +1,6 @@
-import { test, expect} from "vitest";
-import { screen } from "@testing-library/react";
-import { render } from "../common/test-render";
+import { test, expect } from "vitest"
+import { screen } from "@testing-library/react"
+import { render } from "../common/test-render"
 
 test("renders Checkbox component with default label", async () => {
   render({
@@ -9,8 +9,8 @@ test("renders Checkbox component with default label", async () => {
       properties: { name: { type: "boolean", title: "Name" } },
     },
     data: { name: true },
-  });
+  })
 
-  const checkbox = await screen.findByLabelText("Name");
-  expect(checkbox).toBeChecked();
-});
+  const checkbox = await screen.findByLabelText("Name")
+  expect(checkbox).toBeChecked()
+})

src/antd/Checkbox.tsx

@@ -1,9 +1,9 @@
-import { CellProps, WithClassname, Helpers } from "@jsonforms/core";
-import { Checkbox as AntDCheckbox } from "antd";
-import { CheckboxChangeEvent } from "antd/es/checkbox";
+import { CellProps, WithClassname, Helpers } from "@jsonforms/core"
+import { Checkbox as AntDCheckbox } from "antd"
+import { CheckboxChangeEvent } from "antd/es/checkbox"
 
 interface CheckboxProps extends CellProps, WithClassname {
-  label?: string;
+  label?: string
 }
 
 export function Checkbox({
@@ -17,10 +17,10 @@ export function Checkbox({
   handleChange,
   label,
 }: CheckboxProps) {
-  const checked = !!data; // convert undefined to false
+  const checked = !!data // convert undefined to false
 
-  const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema);
-  const defaultLabel = labelDescription.show ? labelDescription.text : "";
+  const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema)
+  const defaultLabel = labelDescription.show ? labelDescription.text : ""
 
   return (
     <AntDCheckbox
@@ -34,5 +34,5 @@ export function Checkbox({
     >
       {label ?? defaultLabel}
     </AntDCheckbox>
-  );
+  )
 }

src/antd/InputNumber.tsx

@@ -2,7 +2,12 @@ import { ReactElement } from "react"
 import { ControlProps, RendererProps } from "@jsonforms/core"
 import { InputNumber as AntdInputNumber } from "antd"
 import { InputNumberOptions } from "../ui-schema"
-import { coerceToInteger, coerceToNumber, decimalToPercentage, percentageStringToDecimal } from "../controls/utils"
+import {
+  coerceToInteger,
+  coerceToNumber,
+  decimalToPercentage,
+  percentageStringToDecimal,
+} from "../controls/utils"
 
 type InputNumber = ReactElement<typeof AntdInputNumber>
 type AntdInputNumberProps = React.ComponentProps<typeof AntdInputNumber>
@@ -13,12 +18,24 @@ export const InputNumber = (props: InputNumberProps): InputNumber => {
   const ariaLabel = props.label || schema.description || "Value"
 
   const defaultValue = schema.default as number | undefined
-  const isDataNonNullObject = typeof props.data === "object" && props.data !== undefined && props.data !== null
-  const isDataEmptyObj = isDataNonNullObject ? Object.keys(props.data as object).length === 0 : false
-  const value = props.data === undefined || isDataEmptyObj ? defaultValue : props.data as number
+  const isDataNonNullObject =
+    typeof props.data === "object" &&
+    props.data !== undefined &&
+    props.data !== null
+  const isDataEmptyObj = isDataNonNullObject
+    ? Object.keys(props.data as object).length === 0
+    : false
+  const value =
+    props.data === undefined || isDataEmptyObj
+      ? defaultValue
+      : (props.data as number)
 
   const numberType = schema.type
-  const isInteger = (typeof numberType === "string" && numberType === "integer") || (Array.isArray(numberType) && numberType.length === 1 && numberType.includes("integer"))
+  const isInteger =
+    (typeof numberType === "string" && numberType === "integer") ||
+    (Array.isArray(numberType) &&
+      numberType.length === 1 &&
+      numberType.includes("integer"))
   const handleChange = (value: number | string | null) => {
     if (typeof value === "number") {
       if (isInteger) {
@@ -34,14 +51,17 @@ export const InputNumber = (props: InputNumberProps): InputNumber => {
   const options = props.uischema.options as InputNumberOptions
   const addonAfter = options?.addonAfter
   const addonBefore = options?.addonBefore
-  const isPercentage = addonAfter && typeof addonAfter === "string" ? addonAfter?.trim() === "%" : false
+  const isPercentage =
+    addonAfter && typeof addonAfter === "string"
+      ? addonAfter?.trim() === "%"
+      : false
 
   const min = schema.minimum
   const max = schema.maximum
   const marginLeft = min === undefined || max === undefined ? 0 : 16
   const style = { marginLeft: marginLeft, width: "100%" }
 
-  const formatter = ((value?: string | number): string => {
+  const formatter = (value?: string | number): string => {
     if (value !== "" && value !== undefined) {
       if (isPercentage) {
         const valueFloat = typeof value === "string" ? parseFloat(value) : value
@@ -51,8 +71,8 @@ export const InputNumber = (props: InputNumberProps): InputNumber => {
       }
     }
     return ""
-  })
-  const parser = ((value?: string): number | undefined => {
+  }
+  const parser = (value?: string): number | undefined => {
     const isNumeric = value ? !isNaN(Number(value)) : false
     if (isNumeric && value !== undefined) {
       if (isPercentage) {
@@ -64,20 +84,22 @@ export const InputNumber = (props: InputNumberProps): InputNumber => {
       }
     }
     return undefined
-  })
+  }
 
-  return <AntdInputNumber
-    aria-label={ariaLabel}
-    defaultValue={defaultValue}
-    value={value}
-    onChange={(value) => handleChange(value)}
-    min={min}
-    max={max}
-    addonBefore={addonBefore}
-    addonAfter={addonAfter}
-    style={style}
-    formatter={formatter}
-    parser={parser as AntdInputNumberProps["parser"]}
-    controls={false}
-  />
+  return (
+    <AntdInputNumber
+      aria-label={ariaLabel}
+      defaultValue={defaultValue}
+      value={value}
+      onChange={(value) => handleChange(value)}
+      min={min}
+      max={max}
+      addonBefore={addonBefore}
+      addonAfter={addonAfter}
+      style={style}
+      formatter={formatter}
+      parser={parser as AntdInputNumberProps["parser"]}
+      controls={false}
+    />
+  )
 }