pixel-react 1.0.0

package/src/components/Input/Input.scss

@@ -0,0 +1,150 @@
+@use '../../assets/styles/fonts';
+
+.ff-input-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .ff-input {
+    padding: 6px 8px;
+    border: 1px solid var(--input-default-border-color);
+    border-radius: 4px;
+    outline: none;
+    line-height: 18px;
+    @extend .fontSm;
+    &:disabled {
+      cursor: not-allowed;
+    }
+    &::placeholder {
+      opacity: 0;
+      line-height: 18px;
+    }
+    &--disabled {
+      background: transparent;
+      border-color: var(--input-default-border-color);
+    }
+    &--danger {
+      border-color: var(--input-error-text-color);
+    }
+    &--transparentBackground {
+      background: transparent;
+    }
+    &--no-border {
+      border: none;
+    }
+  }
+
+  .ff-input-label-container {
+    @extend .ff-input;
+    display: flex;
+    gap: 2px;
+    position: absolute;
+    border: none;
+    outline: none;
+    line-height: 18px;
+    margin-top: 1px;
+    transition: all 0.3s ease-in-out;
+
+    .ff-input-label {
+      color: var(--input-default-label-color);
+      &--danger {
+        color: var(--input-error-text-color);
+      }
+      &--disabled {
+        color: var(--input-default-border-color);
+        background-color: var(--input-label-bg-color);
+      }
+    }
+
+    .required-asterisk {
+      color: var(--input-error-text-color);
+    }
+  }
+  &:hover {
+    .ff-input-label {
+      color: var(--input-hover-border-color);
+      &--no-hover {
+        color: var(--input-default-label-color);
+      }
+      &--disabled {
+        color: var(--input-default-border-color);
+      }
+      &--danger {
+        color: var(--input-error-text-color);
+      }
+    }
+    .ff-input {
+      border-color: var(--input-hover-border-color);
+      &--no-hover {
+        border-color: var(--input-default-border-color);
+      }
+      &--disabled {
+        background: transparent;
+        border-color: var(--input-default-border-color);
+      }
+      &--danger {
+        border-color: var(--input-error-text-color);
+      }
+    }
+  }
+  &:focus-within {
+    .ff-input-label-container {
+      top: -6px;
+      @extend .font-size-8;
+      background-color: var(--input-label-bg-color);
+      line-height: 12px;
+      padding: 0px 2px;
+      margin-left: 10px;
+    }
+    .ff-input-label {
+      &--primary {
+        color: var(--brand-color);
+      }
+      &--danger {
+        color: var(--input-error-text-color);
+      }
+    }
+    .ff-input {
+      &--primary {
+        border-color: var(--brand-color);
+      }
+      &--danger {
+        border-color: var(--input-error-text-color);
+      }
+
+      &::placeholder {
+        opacity: 1;
+        margin-bottom: 1px;
+        @extend .font-size-8;
+      }
+    }
+  }
+
+  .ff-input-message {
+    @extend .font-size-8;
+    padding: 0px 4px;
+    margin-left: 8px;
+    line-height: 12px;
+    &--danger {
+      color: var(--input-error-text-color);
+    }
+  }
+
+  &--float {
+    .ff-input-label-container {
+      //re-written label container code to place it at on border
+      top: -6px;
+      @extend .font-size-8;
+      background-color: var(--input-label-bg-color);
+      line-height: 12px;
+      padding: 0px 2px;
+      margin-left: 10px;
+    }
+    &--disabled {
+      cursor: not-allowed;
+      .ff-input-label-container {
+        cursor: not-allowed;
+      }
+    }
+  }
+}

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Input from './Input';
+import { ChangeEvent, useState } from 'react';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Input>;
+
+const defaultArgs = {
+  name: 'input',
+  label: '',
+  disabled: false,
+  placeholder: 'Enter your name',
+  value: '',
+  type: 'text',
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Name',
+    variant: 'default',
+    type: 'text',
+  },
+};
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Name',
+    variant: 'primary',
+    type: 'text',
+  },
+};
+export const DisabledWithValue: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Name',
+    variant: 'primary',
+    type: 'text',
+    value: 'Disabled',
+    disabled: true,
+    required: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>('');
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>();
+
+    const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      if (event.target.required) {
+        if (value.length <= 0) {
+          setError(true);
+          setHelperText(`${event?.target?.name} is required`);
+        } else if (value.length >= 10) {
+          setError(true);
+          setHelperText(`Name should be within 10 characters`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+      setValue(value);
+    };
+    return (
+      <>
+        <Input
+          {...defaultArgs}
+          type="text"
+          onChange={onChangeHandler}
+          disabled={false}
+          value={value}
+          name="Name"
+          label="Name"
+          placeholder="Enter name here"
+          variant="primary"
+          required={true}
+          error={error}
+          helperText={helperText}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/Input/Input.tsx

@@ -0,0 +1,93 @@
+import classNames from 'classnames';
+import './Input.scss';
+import { InputProps } from './types';
+
+const Input = ({
+  type = 'text',
+  variant = 'primary',
+  name = '',
+  label,
+  disabled = false,
+  required = false,
+  placeholder = 'Enter input',
+  value = '',
+  helperText = '',
+  error,
+  noBorder,
+  className = '',
+  onChange,
+  onBlur,
+  onFocus,
+  autoComplete = 'off',
+  minValue = -Infinity,
+  maxValue = Infinity,
+  transparentBackground = false,
+  ...props
+}: InputProps) => {
+  return (
+    <div
+      className={classNames('ff-input-container', {
+        'ff-input-container--float': !!value,
+        'ff-input-container--disabled': !!disabled,
+      })}
+    >
+      <label
+        htmlFor={name}
+        className={classNames('ff-input-label-container', {
+          'ff-input-label-container--danger': !!error,
+        })}
+      >
+        {required && <span className="required-asterisk">*</span>}
+        <span
+          className={classNames(`ff-input-label ff-input-label--${variant}`, {
+            'ff-input-label--no-hover': !!value,
+            'ff-input-label--disabled': !!disabled,
+            'ff-input-label--danger': !!error,
+          })}
+        >
+          {label}
+        </span>
+      </label>
+      <input
+        name={name}
+        value={value}
+        type={type}
+        spellCheck={false}
+        id={name}
+        className={classNames(
+          `ff-input ff-input--${variant} default-input `,
+          {
+            ['ff-input--transparentBackground']: !!transparentBackground,
+            'ff-input--no-hover': !!value,
+            'ff-input--disabled': !!disabled,
+            'ff-input--danger': !!error,
+            'ff-input--no-border': !!noBorder,
+          },
+          `${className}`
+        )}
+        placeholder={placeholder}
+        disabled={disabled}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        required={required}
+        autoComplete={autoComplete}
+        min={minValue}
+        max={maxValue}
+        {...props}
+      />
+
+      {helperText && error && (
+        <span
+          className={classNames('ff-input-message', {
+            'ff-input-message--danger': !!error,
+          })}
+        >
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Input;

package/src/components/Input/index.ts

@@ -0,0 +1 @@
+export {default} from './Input'

package/src/components/Input/types.ts

@@ -0,0 +1,77 @@
+export interface InputProps {
+  /**
+   * Name | name of the input field
+   */
+  name: string;
+  /**
+   * Label | field label to be displayed
+   */
+  label: string;
+  /**
+   * value | input field value
+   */
+  value: string | number;
+  /**
+   * variants to set color/style of the input field
+   */
+  variant?: 'default' | 'primary';
+  /**
+   * type to set color/style of the input field
+   */
+  type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+  /**
+   * error | If true, error message will be displayed
+   */
+  error?: boolean;
+  /**
+   * helperText | error, success, warning message to be shown
+   */
+  helperText?: string;
+  /**
+   * to disable the input field
+   */
+  disabled?: boolean;
+  /**
+   * if true, input field will be mandatory
+   */
+  required?: boolean;
+  /**
+   * placeholder for the input field
+   */
+  placeholder?: string;
+  /**
+   * classnames to style the input field
+   */
+  className?: string;
+  /**
+   * noBorder prop 'true' removes border of input
+   */
+  noBorder?: boolean;
+  /**
+   * onChange, onKeyDown, onBlur, onFocus actions
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  /**
+   * id to select the input field uniquely
+   */
+  id?: string;
+  /**
+   * if on, suggestion popup will be displayed
+   */
+  autoComplete?: 'on' | 'off';
+  /**
+   *  minimum and maximum values for the number type input field and their functions
+   */
+  minValue?: number;
+  maxValue?: number;
+  /**
+   * background of the input field prop
+   */
+  transparentBackground?: boolean;
+}

package/src/components/InputWithDropdown/InputWithDropdown.scss

@@ -0,0 +1,185 @@
+@use '../../assets/styles/fonts';
+
+.ff-input-with-dropdown-container {
+  display: flex;
+  flex-direction: column;
+
+  .ff-input-with-dropdown {
+    display: flex;
+    border: 1px solid var(--input-default-border-color);
+    border-radius: 4px;
+    padding: 0;
+    position: relative;
+
+    .ff-floating-label-input-container {
+      .ff-floating-label {
+        position: absolute;
+        z-index: 99;
+        color: var(--input-default-border-color);
+        top: 7px;
+        left: 7px;
+        @extend .fontSm;
+        transition: all 0.3s ease-in-out;
+
+        .ff-required-asterisk {
+          color: var(--input-error-text-color);
+        }
+        &--filled {
+          color: var(--input-active-text-color);
+        }
+        &--no-hover {
+          color: var(--input-default-border-color);
+        }
+        &--error {
+          color: var(--input-error-text-color);
+        }
+      }
+
+      .ff-floating-input {
+        position: relative;
+        padding: 6px 7px;
+        line-height: 18px;
+        border: none;
+        outline: none;
+        border-right: 1px solid var(--input-default-border-color);
+        border-radius: 4px 0 0 4px;
+        @extend .fontSm;
+        top: 1px;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+        &::placeholder {
+          opacity: 0;
+        }
+        &:disabled {
+          cursor: not-allowed;
+          background: transparent;
+        }
+        &--error {
+          border-color: var(--input-error-text-color);
+        }
+      }
+    }
+
+    &--no-hover {
+      border-color: var(--input-default-border-color);
+    }
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    &--error {
+      border-color: var(--input-error-text-color);
+    }
+
+    .ff-floating-dropdown {
+      min-width: 120px;
+      border: none;
+      outline: none;
+      margin: 0;
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+  }
+  &:hover {
+    .ff-input-with-dropdown {
+      border-color: var(--input-hover-border-color);
+
+      &--filled {
+        border-color: var(--input-default-border-color);
+      }
+      &--disabled {
+        border-color: var(--input-default-border-color);
+      }
+      &--error {
+        border-color: var(--input-error-text-color);
+      }
+      .ff-floating-label {
+        color: var(--input-hover-border-color);
+        &--filled {
+          color: var(--input-default-border-color);
+        }
+        &--disabled {
+          color: var(--input-default-border-color);
+        }
+        &--error {
+          color: var(--input-error-text-color);
+        }
+      }
+      .ff-floating-input {
+        border-color: var(--input-hover-border-color);
+        &--filled {
+          border-color: var(--input-default-border-color);
+        }
+        &--disabled {
+          border-color: var(--input-default-border-color);
+        }
+        &--error {
+          border-color: var(--input-error-text-color);
+        }
+      }
+    }
+  }
+
+  &:focus-within {
+    .ff-input-with-dropdown {
+      border-color: var(--input-active-text-color);
+      &--error {
+        border-color: var(--input-error-text-color);
+      }
+
+      .ff-floating-label {
+        top: -6.5px;
+        background-color: var(--input-label-bg-color);
+        padding: 0px 2px;
+        color: var(--input-active-text-color);
+        line-height: 12px;
+        font-size: 8px !important;
+
+        &--error {
+          color: var(--input-error-text-color);
+        }
+      }
+      .ff-floating-input {
+        border-color: var(--input-active-text-color);
+        &--error {
+          border-color: var(--input-error-text-color);
+        }
+        &::placeholder {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  &--filled {
+    .ff-input-with-dropdown {
+      .ff-floating-label-input-container {
+        border-color: var(--input-active-text-color);
+        .ff-floating-label {
+          //re-written label container code to place it at on border
+          top: -6px;
+          background-color: var(--input-label-bg-color);
+          padding: 0px 2px;
+          line-height: 12px;
+          font-size: 8px !important;
+        }
+      }
+    }
+    span {
+      font-size: 8px;
+    }
+    .required-asterisk {
+      color: var(--input-error-text-color);
+    }
+  }
+
+  .ff-helper-text {
+    color: var(--input-error-text-color);
+    @extend .font-size-8;
+    padding: 0 11px;
+  }
+}

package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InputWithDropdown from './InputWithDropdown';
+import { ChangeEvent, useState } from 'react';
+import { Option } from './types';
+
+const meta: Meta<typeof InputWithDropdown> = {
+  title: 'Components/InputWithDropdown',
+  component: InputWithDropdown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof InputWithDropdown>;
+
+let optionsList = [
+  { label: 'option 1', value: 'option 1' },
+  { label: 'option 2', value: 'option 2' },
+  { label: 'option 3', value: 'option 3' },
+  { label: 'option 4', value: 'option 4' },
+];
+let selectedOption = { label: 'option 2', value: 'option 2' };
+
+const defaultArgs = {
+  label: 'Field-Name',
+  disabled: false,
+  placeholder: 'Enter your name',
+  optionsList: optionsList,
+  selectedOption: selectedOption,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    disabled: false,
+    required: false,
+  },
+};
+
+export const DisabledWithValue: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'primary',
+    type: 'text',
+    value: 'Disabled',
+    disabled: true,
+    required: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>('');
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>('');
+
+    const optionsListToPass = [
+      { label: 'milliseconds', value: 'milliseconds' },
+      { label: 'seconds', value: 'seconds' },
+      { label: 'minutes', value: 'minutes' },
+      { label: 'hours', value: 'hours' },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'milliseconds',
+      value: 'milliseconds',
+    });
+
+    const onDropdownChangeHandler = (option: Option) => {
+      setSelectedOption(option);
+      setValue('0');
+    };
+
+    const onInputChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+      const inputValue = event.target.value;
+      setValue(inputValue);
+
+      // Validation logic
+      if (event.target) {
+        if (inputValue.length <= 0) {
+          setError(true);
+          setHelperText(`${event.target.name} is required`);
+        } else if (inputValue.length > 4) {
+          setError(true);
+          setHelperText(`${event.target.name} should be upto 999`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+    };
+
+    return (
+      <InputWithDropdown
+        {...defaultArgs}
+        name="ImplicitTime"
+        label="ImplicitTime"
+        placeholder={`Enter ImplicitTime here`}
+        value={value}
+        type="number"
+        required={true}
+        error={error}
+        helperText={helperText}
+        optionsList={optionsListToPass}
+        selectedOption={selectedOption}
+        onInputChangeHandler={onInputChangeHandler}
+        onDropdownChangeHandler={onDropdownChangeHandler}
+      />
+    );
+  },
+};
+
+export default meta;