refa: Update TypeScript and adjust <NumericFormat> props (#3967)

* update all the things

* fix types and break shit

* Create fifty-seals-divide.md

* add badge

* disabled style warnings from eslint

.changeset/fifty-seals-divide.md

@@ -0,0 +1,11 @@
+---
+"@marigold/eslint-config": patch
+"@marigold/jest-config": patch
+"@marigold/storybook-config": patch
+"@marigold/docs": patch
+"@marigold/components": major
+"@marigold/system": major
+"@marigold/types": patch
+---
+
+refa: Update TypeScript and adjust `<NumericFormat>` props

config/eslint/package.json

@@ -23,8 +23,8 @@
     "@babel/eslint-parser": "^7.22.10",
     "@babel/plugin-syntax-flow": "^7.16.7",
     "@babel/plugin-transform-react-jsx": "^7.17.3",
-    "@typescript-eslint/eslint-plugin": "7.13.1",
-    "@typescript-eslint/parser": "7.13.1",
+    "@typescript-eslint/eslint-plugin": "7.14.1",
+    "@typescript-eslint/parser": "7.14.1",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
@@ -44,6 +44,6 @@
   "devDependencies": {
     "eslint": "8.57.0",
     "eslint-plugin-tailwindcss": "3.17.3",
-    "typescript": "5.3.3"
+    "typescript": "5.5.2"
   }
 }

config/jest/package.json

@@ -40,6 +40,6 @@
     "jest": "29.7.0",
     "jest-transform-css": "6.0.1",
     "react": "18.3.1",
-    "typescript": "5.3.3"
+    "typescript": "5.5.2"
   }
 }

config/storybook/package.json

@@ -22,30 +22,30 @@
     "@marigold/theme-b2b": "workspace:*",
     "@marigold/theme-core": "workspace:*",
     "@mdx-js/react": "3.0.1",
-    "@storybook/addon-a11y": "^8.0.6",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/source-loader": "^8.0.6",
-    "@storybook/test": "^8.0.6",
+    "@storybook/addon-a11y": "^8.1.11",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/source-loader": "^8.1.11",
+    "@storybook/test": "^8.1.11",
     "@types/react": "18.3.3",
     "@vitejs/plugin-react": "4.3.1",
     "vite-tsconfig-paths": "4.3.2"
   },
   "devDependencies": {
-    "@storybook/addon-storysource": "^8.0.6",
-    "@storybook/addon-themes": "^8.0.6",
-    "@storybook/cli": "^8.0.6",
-    "@storybook/core-events": "^8.0.6",
-    "@storybook/preview-api": "^8.0.6",
-    "@storybook/react-vite": "^8.0.6",
+    "@storybook/addon-storysource": "^8.1.11",
+    "@storybook/addon-themes": "^8.1.11",
+    "@storybook/cli": "^8.1.11",
+    "@storybook/core-events": "^8.1.11",
+    "@storybook/preview-api": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
     "autoprefixer": "10.4.19",
     "postcss": "8.4.38",
     "postcss-loader": "8.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "storybook": "^8.0.6",
+    "storybook": "^8.1.11",
     "tailwindcss": "3.4.4",
-    "typescript": "5.3.3",
+    "typescript": "5.5.2",
     "vite": "5.3.1"
   },
   "peerDependencies": {

docs/content/components/formatters/numericformat/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react/style-prop-object": "off"
+  }
+}

docs/content/components/formatters/numericformat/currency-format.demo.tsx

@@ -29,11 +29,7 @@ export default () => {
           <Radio value="EUR">EUR</Radio>
           <Radio value="JPY">JPY</Radio>
         </Radio.Group>
-        <NumericFormat
-          styleFormat="currency"
-          value={233}
-          currency={currentFormat}
-        />
+        <NumericFormat style="currency" value={233} currency={currentFormat} />
       </Inline>
     </I18nProvider>
   );

docs/content/components/formatters/numericformat/numericFormat.mdx

@@ -1,6 +1,7 @@
 ---
 title: NumericFormat
 caption: Helper component for formatting numeric based on the current language and locale-specific conventions.
+badge: updated
 ---
 
 With `<NumericFormat>` helper, you can easily ensure that numeric values are displayed consistently and accurately, taking into account factors such as decimal separators, currency symbols, and grouping separators specific to each language.

docs/content/components/formatters/numericformat/percent-format.demo.tsx

@@ -1,9 +1,5 @@
 import { NumericFormat } from '@marigold/system';
 
 export default () => (
-  <NumericFormat
-    styleFormat="percent"
-    value={0.7333}
-    minimumFractionDigits={2}
-  />
+  <NumericFormat style="percent" value={0.7333} minimumFractionDigits={2} />
 );

docs/package.json

@@ -50,10 +50,10 @@
   },
   "devDependencies": {
     "@internationalized/date": "3.5.4",
-    "@types/node": "20.12.7",
+    "@types/node": "20.14.9",
     "@types/react": "18.3.3",
-    "@types/react-dom": "18.2.23",
-    "typescript": "5.3.3",
+    "@types/react-dom": "18.3.0",
+    "typescript": "5.5.2",
     "unist-builder": "4.0.0",
     "unist-util-visit": "5.0.0"
   }

package.json

@@ -21,7 +21,7 @@
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.12.7",
+    "@types/node": "20.14.9",
     "all-contributors-cli": "6.26.1",
     "eslint": "8.57.0",
     "husky": "9.0.11",
@@ -30,7 +30,7 @@
     "prettier": "3.3.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "typescript": "5.3.3",
+    "typescript": "5.5.2",
     "zx": "7.2.3"
   },
   "scripts": {

packages/components/src/FieldBase/FieldBase.stories.tsx

@@ -6,6 +6,7 @@ import { RadioGroup } from '../Radio/RadioGroup';
 import { Select } from '../Select';
 import { TextField } from '../TextField';
 import { FieldBase } from './FieldBase';
+import type { FieldBaseProps } from './FieldBase';
 import { FieldGroup } from './FieldGroup';
 
 const meta = {
@@ -62,13 +63,23 @@ const meta = {
         defaultValue: { summary: false },
       },
     },
+    isRequired: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Wheter if the field is required',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
   },
   args: {
     errorMessage: 'Something went wrong',
     description: 'This is a help text description',
     label: 'This is the label',
   },
-} satisfies Meta<typeof FieldBase>;
+} satisfies Meta<FieldBaseProps<any>>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

packages/components/src/FieldBase/FieldBase.tsx

@@ -26,6 +26,12 @@ export interface FieldBaseProps<T extends ElementType>
   variant?: string;
   size?: string;
   children?: ReactNode;
+
+  /**
+   * Use RAC prop names here so we can directly pass the components via "as"
+   */
+  isInvalid?: boolean;
+  isRequired?: boolean;
 }
 
 // Component

packages/system/src/components/Formatters/NumericFormat.test.tsx

@@ -1,3 +1,4 @@
+/* eslint react/style-prop-object: 0 */
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
@@ -8,7 +9,7 @@ import { NumericFormat } from './NumericFormat';
 test('renders Currency', () => {
   render(
     <I18nProvider locale="en-US">
-      <NumericFormat styleFormat="currency" currency="USD" value={20} />
+      <NumericFormat style="currency" currency="USD" value={20} />
     </I18nProvider>
   );
   const currency = screen.getByText('$20.00');
@@ -18,7 +19,7 @@ test('renders Currency', () => {
 test('supports formatting currency in different language', () => {
   render(
     <I18nProvider locale="de-DE">
-      <NumericFormat styleFormat="currency" currency="EUR" value={30} />
+      <NumericFormat style="currency" currency="EUR" value={30} />
     </I18nProvider>
   );
   const currency = screen.getByText('30,00 €');
@@ -38,15 +39,13 @@ test('supports the notation style for formatting numbers', () => {
 });
 
 test('supports the unit of measurement to display alongside the number', () => {
-  render(
-    <NumericFormat value={10} styleFormat={'unit'} unit="mile-per-hour" />
-  );
+  render(<NumericFormat value={10} style="unit" unit="mile-per-hour" />);
   const number = screen.getByText('10 mph');
   expect(number).toBeInTheDocument();
 });
 
 test('renders value in percentage', () => {
-  render(<NumericFormat styleFormat="percent" value={0.2} />);
+  render(<NumericFormat style="percent" value={0.2} />);
   const percentage = screen.getByText('20%');
   expect(percentage).toBeInTheDocument();
 });

packages/system/src/components/Formatters/NumericFormat.tsx

@@ -2,25 +2,22 @@ import React from 'react';
 
 import { useNumberFormatter } from '@react-aria/i18n';
 
-interface NumericFormatProps extends Omit<Intl.NumberFormatOptions, 'style'> {
+interface NumericFormatProps extends Intl.NumberFormatOptions {
   value: number | bigint;
   numberingSystem?: string;
   tabular?: boolean;
-  styleFormat?: string;
 }
 
 export const NumericFormat = ({
   value,
-  styleFormat,
   tabular = true,
   ...props
 }: NumericFormatProps) => {
   const numberFormatter = useNumberFormatter({
-    style: styleFormat,
     ...props,
   });
   return (
-    <span className={tabular ? 'tabular-nums' : ''}>
+    <span className={tabular ? 'tabular-nums' : undefined}>
       {numberFormatter.format(value)}
     </span>
   );

packages/types/package.json

@@ -18,7 +18,7 @@
     "directory": "packages/types"
   },
   "dependencies": {
-    "type-fest": "4.14.0"
+    "type-fest": "4.20.1"
   },
   "peerDependencies": {
     "@types/react": "18.x"