refactor: Adapt the library to be used with legacy Flamingo

package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "@babel/core": "7.12.13",
     "@babel/preset-typescript": "7.12.13",
-    "@heetch/flamingo-react": "^5.2.0",
+    "@heetch/flamingo-react": "^4.1.3",
     "@nrwl/cli": "15.2.1",
     "@nrwl/eslint-plugin-nx": "15.2.1",
     "@nrwl/jest": "15.2.1",
@@ -38,9 +38,9 @@
     "@svgr/webpack": "^6.4.0",
     "@testing-library/react": "13.4.0",
     "@types/jest": "28.1.1",
-    "@types/node": "18.7.18",
-    "@types/react": "18.0.20",
-    "@types/react-dom": "18.0.6",
+    "@types/node": "16.11.68",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.17",
     "@types/react-is": "17.0.3",
     "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "5.40.0",
@@ -60,7 +60,7 @@
     "jest-environment-jsdom": "28.1.1",
     "nx": "15.2.1",
     "prettier": "^2.6.2",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "17.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "styled-components": "^5.1.0",
     "ts-jest": "28.0.5",
@@ -81,9 +81,9 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "core-js": "^3.6.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-is": "18.2.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-is": "17.0.2",
     "regenerator-runtime": "0.13.7",
     "tslib": "^2.3.0"
   }

packages/react-forms/package.json

@@ -1,17 +1,17 @@
 {
-  "name": "@heetch/react-forms",
-  "version": "1.2.1",
+  "name": "@heetch/react-forms-legacy",
+  "version": "1.2.3",
   "license": "MIT",
   "author": "Heetch",
   "devDependencies": {
     "@react-hook/window-size": "^3.1.1",
-    "react-hook-form": "^7.35.0"
+    "react-hook-form": "~7.44.3"
   },
   "peerDependencies": {
-    "@heetch/flamingo-react": "^5.2.0",
+    "@heetch/flamingo-react": "^4.1.3",
     "@react-hook/window-size": "^3.1.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-hook-form": "^7.35.0"
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-hook-form": "~7.44.3"
   }
 }

packages/react-forms/src/lib/form-field-date-renderer/form-field-date-renderer.stories.tsx

@@ -71,7 +71,7 @@ Helper.args = {
 export const IconColor = Template.bind({});
 IconColor.args = {
   field: base,
-  options: { iconColor: flamingo.color_v3.brand.pink.shade1 },
+  options: { iconColor: flamingo.color.brand.primary },
 };
 
 export const DateTime = Template.bind({});

packages/react-forms/src/lib/form-field-date-renderer/form-field-date-renderer.tsx

@@ -59,7 +59,7 @@ export function FormFieldDateRenderer({
         const errorHelper = fieldState?.error?.message;
 
         const iconColor = props.invalid
-          ? flamingo.color_v3.feedback.error
+          ? flamingo.color.element.error
           : options?.iconColor;
 
         type MinMaxValidator = Exclude<

packages/react-forms/src/lib/form-field-file-renderer/form-field-file-renderer.module.scss

@@ -8,7 +8,7 @@
     margin: 0;
     padding-left: 0;
     padding-right: 0;
-    color: var(--f-color-type-light);
+    color: var(--f-color-element--secondary);
 
     > span {
       font-weight: 500;

packages/react-forms/src/lib/form-field-file-renderer/form-field-file-renderer.tsx

@@ -70,7 +70,7 @@ export function FormFieldFileRenderer({
                 <UiText
                   key={file.name}
                   variant="subContent"
-                  textColor={flamingo.color_v3.type.default}
+                  textColor={flamingo.color.text.primary}
                   className={[
                     styles['FileItem'],
                     classNames.field.file.item,
@@ -101,12 +101,14 @@ export function FormFieldFileRenderer({
                 />
                 {showAddButton && (
                   <Button
-                    variant="text"
+                    variant="minimal"
                     onClick={() => fileInputRef.current?.click()}
                     className={classNames.field.file.add_button}
                   >
+                    &nbsp;
                     <Icon icon="IconPlus" size="s" />
-                    {placeholder}
+                    {placeholder ? <>{placeholder}&nbsp;</> : ''}
+                    &nbsp;
                   </Button>
                 )}
               </div>

packages/react-forms/src/lib/form-field-number-renderer/form-field-number-renderer.stories.tsx

@@ -103,7 +103,7 @@ _tests.play = async () => {
     selector: 'input',
   });
   await userEvent.type(input, '1.5', { delay: 50 });
-  expect(input).not.toHaveStyle({ color: '#cd2703' });
+  expect(input).not.toHaveStyle({ color: '#e4566f' });
   await userEvent.clear(input);
-  expect(input).not.toHaveStyle({ color: '#cd2703' });
+  expect(input).not.toHaveStyle({ color: '#e4566f' });
 };

packages/react-forms/src/lib/form-field-number-renderer/form-field-number-renderer.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useState } from 'react';
 import { Controller, FieldValues } from 'react-hook-form';
-import { InputField } from '@heetch/flamingo-react';
+import { InputField, theme as flamingo } from '@heetch/flamingo-react';
 import { FormFieldRendererProps } from '../../types/renderer';
 import { FormFieldNumber } from '../../types/fields';
 import { buildValidationRules, classNames, isRequired } from '../../utils';
@@ -98,6 +98,8 @@ function NumberFieldRenderer({
       | undefined
   )?.parameter;
 
+  const invalid = !!fieldState?.error;
+
   const props = {
     ...fieldProps,
     onChange,
@@ -106,7 +108,8 @@ function NumberFieldRenderer({
     label,
     placeholder,
     helper: fieldState?.error ? fieldState.error.message : field.helper,
-    invalid: !!fieldState?.error,
+    invalid,
+    textColor: invalid ? flamingo.color.element.error : undefined,
     type: 'number',
     min,
     max,

packages/react-forms/src/lib/form-field-string-renderer/form-field-string-renderer.tsx

@@ -1,7 +1,12 @@
 import { FormFieldRendererProps } from '../../types/renderer';
 import { FormFieldString } from '../../types/fields';
 import { Controller } from 'react-hook-form';
-import { InputField, SelectField, TextareaField } from '@heetch/flamingo-react';
+import {
+  InputField,
+  SelectField,
+  TextareaField,
+  theme as flamingo,
+} from '@heetch/flamingo-react';
 import { buildValidationRules, classNames, isRequired } from '../../utils';
 
 export function FormFieldStringRenderer({
@@ -29,14 +34,17 @@ export function FormFieldStringRenderer({
           label = undefined;
         }
 
+        const invalid = !!fieldState?.error;
+
         const props = {
           ...fieldProps,
           id: fieldProps.name,
           value: fieldProps.value !== undefined ? fieldProps.value : '',
           label,
           placeholder,
           helper: fieldState?.error ? fieldState.error.message : field.helper,
-          invalid: !!fieldState?.error,
+          invalid,
+          textColor: invalid ? flamingo.color.element.error : undefined,
           disabled: field.disabled,
         };