Form input component

ui/src/assets/styles/abstracts/_functions.scss

@@ -0,0 +1,3 @@
+@function px-to-rem-converter($px-value, $base: 16px) {
+  @return calc(($px-value * 1px) / $base * 1rem);
+}

ui/src/assets/styles/abstracts/_index.scss

@@ -1 +1,2 @@
 @forward 'variables';
+@forward 'mixins';

ui/src/assets/styles/abstracts/_mixins.scss

@@ -0,0 +1,92 @@
+@use 'functions' as utils;
+@use 'variables' as vars;
+
+@mixin flex-position(
+  $flex-dir: row,
+  $justify: flex-start,
+  $align-items: flex-start,
+  $wrap: nowrap
+) {
+  display: flex;
+  flex-direction: $flex-dir;
+  justify-content: $justify;
+  align-items: $align-items;
+  flex-wrap: wrap;
+}
+
+@mixin font-size-config(
+  $font_size,
+  $line_height: normal,
+  $font_weight: 500,
+  $font_style: normal
+) {
+  font-size: utils.px-to-rem-converter($font_size);
+  font-weight: $font_weight;
+  font-style: $font_style;
+  line-height: $line_height;
+}
+
+@mixin border-config(
+  $border_width: vars.$border-width-md,
+  $border_style: solid,
+  $border_color,
+  $border_radius: 0.3rem
+) {
+  border-width: utils.px-to-rem-converter($border_width);
+  border-style: $border_style;
+  border-color: $border_color;
+  border-radius: $border_radius;
+  -webkit-border-radius: $border_radius;
+  -moz-border-radius: $border_radius;
+  -ms-border-radius: $border_radius;
+  -o-border-radius: $border_radius;
+}
+
+@mixin custom-outline(
+  $outline_width: 2,
+  $outline_style: dashed,
+  $outline_color: vars.$alternative-a100,
+  $outline_offset: 5
+) {
+  outline-style: $outline_style;
+  outline-width: utils.px-to-rem-converter($outline_width);
+  outline-offset: utils.px-to-rem-converter($outline_offset);
+  outline-color: $outline_color;
+}
+
+@mixin custom-range-input-thumb {
+  width: 20%;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+
+  &::-webkit-slider-runnable-track {
+    width: inherit;
+    cursor: pointer;
+    background: vars.$alternative-a100;
+    border-radius: utils.px-to-rem-converter(10);
+  }
+
+  &::-webkit-slider-thumb {
+    width: utils.px-to-rem-converter(15);
+    height: utils.px-to-rem-converter(15);
+    border-radius: 50%;
+  }
+
+  &:focus::-webkit-slider-runnable-track {
+    background-color: vars.$alternative-a700;
+  }
+
+  &::-moz-range-track {
+    width: inherit;
+    cursor: pointer;
+    background: vars.$alternative-a100;
+    border-radius: utils.px-to-rem-converter(10);
+  }
+
+  &::-moz-range-thumb {
+    width: utils.px-to-rem-converter(15);
+    height: utils.px-to-rem-converter(15);
+    border-radius: 50%;
+  }
+}

ui/src/assets/styles/abstracts/_variables.scss

@@ -1,10 +1,12 @@
-
 // Do not edit directly
 // Generated on Sun, 16 Jul 2023 21:46:53 GMT
 
+// border
 $border-radius-sm: 2px 2px 2px 2px;
 $border-radius-md: 5px 5px 5px 5px;
 $border-radius-round: 50% 50% 50% 50%;
+
+// colors
 $primary-p100: #ffd5d4;
 $primary-p300: #fbb2b0;
 $primary-p500: #fb817e;
@@ -23,11 +25,15 @@ $alternative-a900: #002a6b;
 $communicates-success: #17d87f;
 $communicates-warning: #f88f0a;
 $communicates-error: #f04438;
+
+// gray-scale
 $grayscale-g100: #ccc;
 $grayscale-g300: #999;
 $grayscale-g500: #666;
 $grayscale-g700: #333;
 $grayscale-g900: #171717;
+
+// fonts
 $font-size-button-sm: 12;
 $font-size-button-md: 18;
 $font-size-button-lg: 22;
@@ -37,13 +43,20 @@ $font-size-h3: 36;
 $font-size-h2: 48;
 $font-size-h1: 64;
 $font-size-base: 16;
+
+// color base
 $base-black: #141414;
 $base-white: #fcfcfc;
+
+// borders
 $border-width-md: 5;
+
+// font ligatures
 $line-height-h1: 76.16;
 $line-height-h2: 57.008;
 $line-height-h3: 43.008;
 $line-height-h4: 28;
 $line-height-base: 16;
 $line-height-p: 24;
+
 $token-set-order-0: global;

ui/src/assets/styles/base/_globals.scss

@@ -1,26 +1,31 @@
-@use '../abstracts/' as *;
-@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
-
-body {
-  font-family: Poppins, sans-serif;
-}
-
-h1 {
-  font-size: $font-size-h1;
-}
-
-h2 {
-  font-size: $font-size-h2
-}
-
-h3 {
-  font-size: $font-size-h3;
-}
-
-h4 {
-  font-size: $font-size-h4;
-}
-
-p {
-  font-size: $font-size-p;
-}
+@use '../abstracts/' as *;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;700&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Poppins, sans-serif;
+}
+
+h1 {
+  font-size: $font-size-h1;
+}
+
+h2 {
+  font-size: $font-size-h2;
+}
+
+h3 {
+  font-size: $font-size-h3;
+}
+
+h4 {
+  font-size: $font-size-h4;
+}
+
+p {
+  font-size: $font-size-p;
+}

ui/src/assets/styles/index.scss

@@ -1,2 +1,2 @@
-@use 'abstracts';
-@use 'base';
+@forward 'abstracts/_index';
+@forward 'base';

ui/src/components/FormInput/FormInput.jsx

@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+import styles from './FormInput.module.scss'
+import classNames from 'classnames'
+
+/**
+ * ### example: <br/>
+ * ```
+ * import FormInput from './components/FormInput/FormInput'
+ *
+ *<FormInput
+ *  id="email"
+ *  labelName="E-mail"
+ *  inputType="email"
+ *  placeholder="[email protected]"
+ *  required
+ *  className
+ *  />
+ *
+ *
+ *
+ *
+ * ```
+ * ### props: <br/>
+ * - id - identificator of input element - it will connect with label to improve **a11y**<br/> isRequired: true<br/>default value: "basicInput"
+ * - labelName - value for label to improve readable input<br/> isRequired: true<br/>default value: "Label"
+ * - input type - type of your input: email, password, text and range etc.<br/> isRequired: true<br/>default value: "text"
+ * - placeholder for input (recommend for text inputs)<br/> isRequired: true<br/>default value: "placholder"
+ * - required - set if user must fill this input or it's optional<br/> isRequired: true<br/>default value: true
+ * - darkTheme - additional modificatior for class to change some rules for dark theme - local implementation<br/> isRequired: true<br/>default value: false
+ */
+
+const FormInput = ({
+  id,
+  labelName,
+  inputType,
+  placeholder,
+  required,
+  className,
+  darkTheme
+}) => {
+  const themePicker = darkTheme ? 'input-fragment--dark' : 'input-fragment'
+
+  const placeholderText = inputType !== 'password' ? placeholder : null
+
+  return (
+    <div className={classNames(styles[themePicker], className)}>
+      <label htmlFor={id} className={styles['input-fragment__label']}>
+        {labelName}
+      </label>
+      <input
+        className={styles['input-fragment__input-field']}
+        id={id}
+        type={inputType}
+        placeholder={placeholderText}
+        required={required}
+      />
+    </div>
+  )
+}
+
+export const formInputVariants = ['text', 'email', 'password']
+
+FormInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  labelName: PropTypes.string.isRequired,
+  inputType: PropTypes.oneOf(formInputVariants),
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  className: PropTypes.string,
+  darkTheme: PropTypes.bool
+}
+
+FormInput.defaultProps = {
+  id: 'basicInput',
+  labelName: 'Label',
+  inputType: 'text',
+  placeholder: 'placeholder',
+  required: true,
+  className: '',
+  darkTheme: false
+}
+
+export default FormInput

ui/src/components/FormInput/FormInput.module.scss

@@ -0,0 +1,78 @@
+@use '../../assets/styles/index.scss' as abstract;
+@use '../../assets/styles/abstracts/functions.scss' as utils;
+
+.input-fragment,
+.input-fragment--dark {
+  @include abstract.flex-position(column, space-around, flex-start);
+
+  position: relative;
+  gap: 0.5rem;
+  outline: none;
+
+  &__label {
+    @include abstract.font-size-config(
+      $font_size: abstract.$font-size-p,
+      $font_weight: 600
+    );
+
+    color: abstract.$base-white;
+    margin-left: utils.px-to-rem-converter(5);
+  }
+
+  &__input-field {
+    @include abstract.border-config(
+      $border_width: abstract.$border-width-md,
+      $border_color: abstract.$alternative-a300
+    );
+
+    display: inline-block;
+    width: 100%;
+    padding: 1rem;
+    transition: outline 0.1s linear;
+    font-size: utils.px-to-rem-converter(abstract.$font-size-h4);
+  }
+
+  &__label,
+  &__input-field {
+    &::placeholder {
+      @include abstract.font-size-config(
+        $font_size: abstract.$font-size-p,
+        $font_weight: 400
+      );
+
+      color: abstract.$grayscale-g300;
+    }
+
+    &:focus-visible {
+      @include abstract.custom-outline(
+        $outline_color: abstract.$alternative-a100
+      );
+    }
+  }
+}
+
+// dark theme for input
+.input-fragment--dark {
+  .input-fragment__label {
+    color: abstract.$base-black;
+  }
+
+  .input-fragment__input-field {
+    @include abstract.border-config($border_color: abstract.$alternative-a700);
+
+    &::placeholder {
+      @include abstract.font-size-config(
+        $font_size: abstract.$font-size-p,
+        $font_weight: 400
+      );
+
+      color: abstract.$grayscale-g500;
+    }
+
+    &:focus-visible {
+      @include abstract.custom-outline(
+        $outline_color: abstract.$alternative-a300
+      );
+    }
+  }
+}