Merge pull request #463 from bluewave-labs/458-formik-and-yup-validations-for-link-fe

458 formik and yup validations for link fe

Author: erenfn

frontend/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "ecmaVersion": 2015,
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:storybook/recommended",
+    "prettier"
+  ],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

frontend/package-lock.json

@@ -41,6 +41,7 @@
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",

frontend/package.json

@@ -0,0 +1,9 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "arrowParens":"always",
+  "htmlWhitespaceSensitivity": "strict"
+}

frontend/src/.prettierrc

@@ -0,0 +1,74 @@
+$appearance-width: 194px;
+$circle-size: 24px;
+$input-height: 1.4rem;
+$box-shadow-color: rgba(16, 24, 40, 0.05);
+
+.appearance {
+  width: 50%;
+  padding: 20px 0;
+  margin-right: 2rem;
+
+  &__label {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 1rem;
+    width: fit-content;
+    font-size: 0.813rem;
+    font-weight: 400;
+    line-height: 1.54;
+  }
+
+  &__input {
+    width: $appearance-width;
+    padding: 0.313rem;
+    border: 1px solid var(--light-border-color);
+    box-shadow: 0px 1px 2px 0px $box-shadow-color;
+    height: $input-height;
+    border-radius: 0.5rem;
+    display: inline-block;
+    font-size: var(--font-regular);
+    color: var(--main-text-color);
+    font-family: Inter;
+
+    &:first-of-type {
+      margin-top: 5px;
+    }
+  }
+
+  &__color {
+    margin: 5px 0 0;
+    width: 100%;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+  }
+
+  &__circle {
+    width: $circle-size;
+    height: $circle-size;
+    border-radius: 50%;
+    padding: 0;
+    background-color: transparent;
+    position: relative;
+    margin-left: 9px;
+
+    & input {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+    }
+
+    &--mask {
+      display: block;
+      position: relative;
+      z-index: 2;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      border: 1.5px solid #000;
+    }
+  }
+}

frontend/src/components/Links/ColorInput/ColorInput.module.scss

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import styles from './ColorInput.module.scss';
+
+const ColorInput = ({ id, name, value, onChange, onBlur, error, title, className }) => (
+  <label htmlFor="header-bg" className={styles.appearance__label}>
+    {title}{' '}
+    <div className={styles.appearance__color}>
+      <span
+        className={`${styles.appearance__input} ${styles[className]} ${
+          error && styles.error
+        }`}
+      >
+        {value}
+      </span>
+      <div className={styles.appearance__circle}>
+        <input
+          type="color"
+          id={id}
+          name={name}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+        />
+        <span
+          className={styles['appearance__circle--mask']}
+          style={{ backgroundColor: value }}
+        />
+      </div>
+    </div>
+  </label>
+);
+
+export default ColorInput;
+
+ColorInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired,
+  error: PropTypes.string,
+  title: PropTypes.string,
+};