@ludo.ninja/components 1.5.8 → 1.6.0

package/src/system/Forms/RadioInput/index.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-
-import { UseFormRegisterReturn } from 'react-hook-form';
-import styled from 'styled-components';
-
-import { BorderColorLight } from '@ludo.ninja/ui/build/styles/colors';
-
-import { AccentColor, BlackColor, WhiteColor } from '@/styles/colors';
-
-import { StyledInput } from '@/system/Forms/Input';
-
-const StyledLabel = styled.label`
-  position: relative;
-  padding: 8px 0 8px 27px;
-  cursor: pointer;
-  font-size: 1.4em;
-  color: ${BlackColor};
-  font-weight: 500;
-  user-select: none;
-
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  input[type='radio'] {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-  }
-
-  .checkmark {
-    position: absolute;
-    left: 0;
-    height: 18px;
-    width: 18px;
-    background-color: ${BorderColorLight};
-    border-radius: 50%;
-    transition: background-color 200ms;
-  }
-
-  .checkmark:after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: ${WhiteColor};
-    transition: width 200ms, height 200ms;
-  }
-
-  input:checked ~ .checkmark,
-  .checked {
-    background-color: ${AccentColor};
-  }
-
-  input:checked ~ .checkmark:after,
-  .checked:after {
-    width: 8px;
-    height: 8px;
-  }
-`;
-
-const BasicRadioInput = ({
-  radioLabel,
-  radioValue,
-  radioChecked,
-  handleChange,
-  className,
-  withInput,
-  innerTextInputRef,
-  setFocus,
-}: {
-  radioLabel: string;
-  radioValue: string | number;
-  radioChecked: boolean;
-  handleChange: (value: string) => void;
-  className?: string;
-  withInput?: boolean;
-  innerTextInputRef?: UseFormRegisterReturn;
-  setFocus?: (value: string) => void;
-}) => {
-  const handleChangeRadioInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (withInput) {
-      setTimeout(
-        () => setFocus && innerTextInputRef && setFocus(innerTextInputRef.name),
-        0
-      );
-    }
-    handleChange(e.target.value);
-  };
-
-  return (
-    <StyledLabel className={className}>
-      {radioLabel}
-      <input
-        type="radio"
-        checked={radioChecked}
-        value={radioValue}
-        id={`${radioValue}_${radioLabel}`}
-        onChange={(e) => handleChangeRadioInput(e)}
-      />
-      {withInput && (
-        <StyledInput
-          status={false}
-          {...innerTextInputRef}
-          disabled={!radioChecked}
-        />
-      )}
-      <span className={`checkmark`}></span>
-    </StyledLabel>
-  );
-};
-
-export default BasicRadioInput;

package/src/system/Forms/Selects/DesktopSelect/index.tsx

@@ -1,236 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import Skeleton from 'react-loading-skeleton';
-import Select, {
-  DropdownIndicatorProps,
-  GroupBase,
-  components,
-} from 'react-select';
-import styled from 'styled-components';
-
-import {
-  ICollectionFilterInput,
-  ICreationFilterInput,
-} from '@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor, WhiteColor } from '@/styles/colors';
-import { MainText } from '@/styles/typography';
-
-import { ISelectInput } from '@/system/Forms/Selects/MobileSelect';
-
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-import { dmsansFontVarCss } from '@/fonts/vars';
-
-import ArrowDownIcon from '@/public/selects/arrow_down.svg';
-
-const SelectElement = styled(Select)<{
-  minHeight: number;
-  scale: { transform: string } | object;
-}>`
-  font-family: ${dmsansFontVarCss.css};
-
-  .react-select__value-container {
-    padding: 0 0 0 20px;
-  }
-
-  .react-select__control {
-    border: none;
-    background-color: white;
-    border-radius: 6px;
-    box-shadow: none;
-    min-height: ${(props) => `${props.minHeight}px`};
-    cursor: pointer;
-
-    &:hover,
-    &:focus,
-    &:active {
-      box-shadow: none;
-      border-color: transparent;
-    }
-  }
-
-  .react-select__indicator {
-    padding: 0;
-  }
-
-  .react-select__indicators {
-    padding-right: 12px;
-  }
-
-  .react-select__menu {
-    ${MainText};
-    color: ${TextGrayColor};
-    margin: 4px 0;
-    background: ${WhiteColor};
-    box-shadow: 0 8px 16px -16px rgba(33, 21, 95, 0.1);
-    border-radius: 6px;
-    z-index: 9999;
-  }
-
-  .react-select__single-value {
-    ${MainText};
-    margin: 0;
-    color: ${BlackColor};
-  }
-
-  .react-select__menu-list {
-    padding: 8px 0;
-  }
-
-  .react-select__option {
-    padding: 8.5px 20px;
-    font-weight: 400;
-  }
-
-  .react-select__option--is-selected {
-    background-color: transparent;
-    color: ${BlackColor};
-    font-weight: 500;
-  }
-
-  .react-select__option--is-focused {
-    background-color: transparent;
-    color: ${BlackColor};
-    font-weight: 500;
-    transition: font-weight 0.3s ease-in-out;
-    cursor: pointer;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    .react-select__value-container {
-      padding: 0 0 0 ${adaptiveValueCalc(20)};
-    }
-
-    .react-select__control {
-      border-radius: ${adaptiveValueCalc(6)};
-      min-height: ${(props) => adaptiveValueCalc(props.minHeight)};
-    }
-
-    .react-select__indicator {
-      transform: ${(props) =>
-        'transform' in props.scale && props.scale.transform};
-    }
-
-    .react-select__indicators {
-      padding-right: ${adaptiveValueCalc(12)};
-    }
-
-    .react-select__menu {
-      margin: ${adaptiveValueCalc(4)} 0;
-      box-shadow: 0 ${adaptiveValueCalc(8)} ${adaptiveValueCalc(16)}
-        ${adaptiveValueCalc(-16)} rgba(33, 21, 95, 0.1);
-      border-radius: ${adaptiveValueCalc(6)};
-    }
-
-    .react-select__menu-list {
-      padding: ${adaptiveValueCalc(8)} 0;
-      max-height: ${adaptiveValueCalc(300)};
-    }
-
-    .react-select__option {
-      padding: ${adaptiveValueCalc(8.5)} ${adaptiveValueCalc(20)};
-    }
-  }
-`;
-
-const minHeight = 40;
-
-const DropdownIndicator = (
-  props: JSX.IntrinsicAttributes &
-    DropdownIndicatorProps<unknown, boolean, GroupBase<unknown>>
-) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <ArrowDownIcon
-        style={{
-          transition: 'transform 200ms',
-          transform: props.selectProps.menuIsOpen
-            ? 'rotate(180deg)'
-            : 'rotate(0)',
-        }}
-      />
-    </components.DropdownIndicator>
-  );
-};
-
-// Interface
-interface Props {
-  options: ISelectInput[];
-  defaultOptionValue: string;
-  isLoading?: boolean;
-  onChangeHandler: (
-    fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput,
-    fieldValue: string
-  ) => Promise<void>;
-  name: string;
-}
-
-const DesktopSelect: React.FC<Props> = ({
-  options,
-  isLoading,
-  onChangeHandler,
-  defaultOptionValue,
-  name,
-  ...props
-}) => {
-  const [selectedOption, setSelectedOption] = useState<ISelectInput>(
-    options.find((option) => {
-      return defaultOptionValue === option.id;
-    }) || options[0]
-  );
-
-  useEffect(() => {
-    const findOption = options.find((option) => {
-      return defaultOptionValue === option.id;
-    });
-
-    setSelectedOption(findOption || options[0]);
-  }, [defaultOptionValue]);
-
-  const handleChangeOption = async (option: ISelectInput) => {
-    await onChangeHandler(
-      name as keyof ICreationFilterInput & keyof ICollectionFilterInput,
-      option.id
-    );
-    setSelectedOption(option);
-  };
-
-  const getOptionLabel = (option: ISelectInput) => {
-    return option.label as string;
-  };
-
-  const getOptionValue = (option: ISelectInput) => {
-    return option.id as string;
-  };
-  const { windowDimensions } = useWindowDimensionsWithServerInitial();
-
-  if (isLoading) return <Skeleton height={`${minHeight}px`} width="154px" />;
-
-  return (
-    <SelectElement
-      id={String(Math.random())}
-      minHeight={minHeight}
-      scale={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
-      classNamePrefix="react-select"
-      name={name}
-      getOptionLabel={(option) => getOptionLabel(option as ISelectInput)}
-      getOptionValue={(option) => getOptionValue(option as ISelectInput)}
-      options={options}
-      value={selectedOption}
-      defaultValue={selectedOption}
-      onChange={(option) => handleChangeOption(option as ISelectInput)}
-      isSearchable={false}
-      components={{
-        DropdownIndicator,
-        IndicatorSeparator: () => null,
-      }}
-      {...props}
-    />
-  );
-};
-
-export default DesktopSelect;

package/src/system/Forms/Selects/DesktopSelect/type.ts

@@ -1,5 +0,0 @@
-export type optionType = {
-  id: number;
-  value: string;
-  label: string;
-};

package/src/system/Forms/Selects/MobileSelect/index.tsx

@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { useRouter } from 'next/router';
-
-import {
-  ICollectionFilterInput,
-  ICreationFilterInput,
-} from '@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema';
-
-import DropDown from '@/system/DropDown';
-import BasicRadioInput from '@/system/Forms/RadioInput';
-
-export interface ISelectInput {
-  id: string;
-  label: string;
-}
-
-// Interface
-interface Props {
-  options: ISelectInput[];
-  defaultOptionValue: string;
-  onChangeHandler: (
-    fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput,
-    fieldValue: string
-  ) => void;
-  name: string;
-}
-
-// Component
-
-const MobileSelect: React.FC<Props> = ({
-  options,
-  onChangeHandler,
-  name,
-  defaultOptionValue,
-}) => {
-  const [selectedOption, setSelectedOption] = useState<ISelectInput>(
-    options[0]
-  );
-  const router = useRouter();
-
-  useEffect(() => {
-    const findOption = options.find((option) => {
-      return defaultOptionValue === option.id;
-    });
-
-    setSelectedOption(findOption || options[0]);
-  }, [defaultOptionValue]);
-
-  const handleChangeOption = (value: string) => {
-    const findOption = options.find((option) => {
-      return value === option.id;
-    });
-    setSelectedOption(findOption || options[0]);
-    onChangeHandler(
-      name as keyof ICreationFilterInput & keyof ICollectionFilterInput,
-      findOption?.id || options[0]?.id
-    );
-  };
-
-  return (
-    <DropDown
-      caption={name}
-      fallBackOnClose={() => null}
-      active={Boolean(router.query[name])}
-    >
-      {options.map((select) => (
-        <BasicRadioInput
-          key={`${select.id}_${select.label}`}
-          radioLabel={select.label as string}
-          radioValue={select.id}
-          handleChange={handleChangeOption}
-          radioChecked={selectedOption.id === select.id}
-        />
-      ))}
-    </DropDown>
-  );
-};
-// Export
-export default MobileSelect;

package/src/system/Forms/TextArea/index.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-
-import { UseFormRegisterReturn } from 'react-hook-form';
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BlackColor,
-  BorderColorLight,
-  ProgressColorMinimum,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
-import { MainText } from '@/styles/typography';
-
-import { dmsansFontVarCss } from '@/fonts/vars';
-
-import BasicErrorLabel from '../ErrorLabel';
-import { inputType } from '../Input/type';
-
-// Styles
-const StyledTextArea = styled.textarea<{ status: boolean }>`
-  font-family: ${dmsansFontVarCss.css};
-  ${MainText};
-  width: 100%;
-  min-height: 92px;
-  border-radius: 6px;
-  border: 1px solid
-    ${(props) => (props.status ? ProgressColorMinimum : BorderColorLight)};
-  background: ${WhiteColor};
-  color: ${BlackColor};
-  outline: none;
-  resize: none;
-  padding: 12px;
-
-  ::placeholder {
-    color: ${TextGrayColor};
-    opacity: 1;
-  }
-
-  :-ms-input-placeholder {
-    color: ${TextGrayColor};
-  }
-
-  ::-ms-input-placeholder {
-    color: ${TextGrayColor};
-  }
-
-  // :focus {
-  //   transition: border-color 0.3s ease-in-out;
-  //   border: 2px solid ${(props) => (props.status ? '#F4205F' : '#C1C8DE')};
-  // }
-  // :hover {
-  //   transition: border-color 0.3s ease-in-out;
-  //   border: 2px solid ${(props) => (props.status ? '#F4205F' : '#C1C8DE')};
-  // }
-
-  ${mediaQuery.minWidthFourK} {
-    min-height: ${adaptiveValueCalc(92)};
-    border-radius: ${adaptiveValueCalc(6)};
-    border: ${adaptiveValueCalc(1)} solid
-      ${(props) => (props.status ? ProgressColorMinimum : BorderColorLight)};
-    padding: ${adaptiveValueCalc(12)};
-  }
-`;
-
-// const StyledCharacterCounter = styled.div<{ status: boolean }>`
-//   position: absolute;
-//   right: 0;
-//   top: 0;
-//   color: ${(props) => (props.status ? '#F4205F' : '#C1C8DE')};
-//   font-size: 1em;
-// `;
-
-interface Props {
-  data: inputType;
-  register: UseFormRegisterReturn;
-  isNeedBiggerArea: boolean;
-  error: {
-    isNeedShowError: boolean;
-    message: string | undefined;
-  };
-  // counter: number;
-}
-
-// const maxCountLength = 400;
-
-const BasicTextArea: React.FC<Props> = ({
-  data,
-  register,
-  isNeedBiggerArea,
-  error,
-  // counter,
-}) => {
-  const renderError = () => {
-    if (error.isNeedShowError) {
-      return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
-    }
-  };
-
-  return (
-    <>
-      <StyledTextArea
-        {...register}
-        rows={isNeedBiggerArea ? 8 : 4}
-        status={error.isNeedShowError}
-        id={data.name}
-        name={data.name}
-        autoComplete={'off'}
-        placeholder={data.placeHolder}
-      />
-      {renderError()}
-    </>
-  );
-};
-
-export default BasicTextArea;

package/src/system/Forms/index.ts

@@ -1,8 +0,0 @@
-import CheckboxInput from './Checkbox';
-import BasicErrorLabel from './ErrorLabel';
-import Input from './Input';
-import BasicTextArea from './TextArea';
-import messages from './Messages';
-
-
-export { Input, BasicTextArea, BasicErrorLabel, CheckboxInput , messages };

package/src/system/Img/ExternalImage/index.tsx

@@ -1,36 +0,0 @@
-import React, { ComponentPropsWithRef, forwardRef } from 'react';
-
-import styled from 'styled-components';
-import {
-  BorderProps,
-  LayoutProps,
-  SpaceProps,
-  border,
-  layout,
-  space,
-} from 'styled-system';
-
-export interface ExternalImageRawProps
-  extends SpaceProps,
-    LayoutProps,
-    BorderProps {}
-
-const StyledImage = styled.img<ExternalImageRawProps>`
-  display: block;
-  max-width: 100%;
-  height: ${(props) => (props.height ? props.height : 'auto')};
-  ${space}
-  ${layout}
-  ${border}
-`;
-
-export type ExternalImageProps = ComponentPropsWithRef<'img'> &
-  ExternalImageRawProps;
-
-export const ExternalImage = forwardRef<HTMLImageElement, ExternalImageProps>(
-  (props, ref) => {
-    return <StyledImage ref={ref} {...props} />;
-  }
-);
-
-ExternalImage.displayName = 'ExternalImage';

package/src/system/Img/ImageInterceptor/ImageInterceptor.test.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-
-import { fireEvent, render, screen } from '@testing-library/react';
-import styled from 'styled-components';
-
-import { ImageInterceptor } from '../ImageInterceptor';
-
-jest.mock(
-  'react-loading-skeleton',
-  () =>
-    function TestSkeleton(props: any) {
-      return (
-        <div
-          data-testid="skeleton"
-          style={{
-            borderRadius: props.borderRadius,
-          }}
-        />
-      );
-    }
-);
-
-const TestImage = styled.img`
-  width: 100px;
-  height: 100px;
-`;
-
-const validSrc = '/tests/test_1.svg';
-
-describe('ImageInterceptor Component', () => {
-  test('renders the skeleton while the image is loading', () => {
-    render(
-      <ImageInterceptor>
-        <TestImage src={validSrc} />
-      </ImageInterceptor>
-    );
-
-    expect(screen.getByTestId('skeleton')).toBeInTheDocument();
-  });
-  test('renders the image after it has loaded', () => {
-    render(
-      <ImageInterceptor>
-        <TestImage src={validSrc} />
-      </ImageInterceptor>
-    );
-
-    const image = screen.getByRole('img');
-    fireEvent.load(image);
-
-    expect(screen.queryByTestId('skeleton')).not.toBeInTheDocument();
-    expect(image).toHaveAttribute('src', validSrc);
-  });
-  test('renders the fallback image if an error occurs', () => {
-    render(
-      <ImageInterceptor>
-        <TestImage src="invalid-image.jpg" />
-      </ImageInterceptor>
-    );
-
-    const image = screen.getByRole('img');
-    fireEvent.error(image);
-
-    expect(screen.queryByTestId('skeleton')).not.toBeInTheDocument();
-    expect(image).toHaveAttribute('src', '/noContent/noContent.svg');
-  });
-  test('applies the correct styles to the skeleton', () => {
-    render(
-      <ImageInterceptor borderRadiusSkeleton={10}>
-        <TestImage src={validSrc} />
-      </ImageInterceptor>
-    );
-
-    expect(screen.getByTestId('skeleton')).toHaveStyle({
-      borderRadius: '10px',
-    });
-  });
-});