1198/refactor to align with documentation

next/backend/ginis/server/api-data.dto.ts

@@ -1,4 +1,4 @@
-export interface RequestGinisBodyDocumentsList {
+export type RequestGinisBodyDocumentsList = {
   state: RequestGinisBodyDocumentsListStates // Stav
   tableId: string // Id-uredni-desky
   // It is possible to have more parameters, for check them go to https://robot.gordic.cz/xrg/Default.html#
@@ -9,7 +9,7 @@ export enum RequestGinisBodyDocumentsListStates {
   DELETED = 'sejmuto',
 }
 
-export interface ResponseGinisDocumentsList {
+export type ResponseGinisDocumentsList = {
   'Id-zaznamu': string // id of post of document - use for ID
   Stav: RequestGinisBodyDocumentsListStates
   Kategorie: string // category
@@ -51,17 +51,17 @@ export interface ResponseGinisDocumentsList {
   'Mena-sml': string
 }
 
-export interface RequestGinisBodyDocumentDetail {
+export type RequestGinisBodyDocumentDetail = {
   documentId: string
   // It is possible to have more parameters, for check them go to https://robot.gordic.cz/xrg/Default.html#
 }
 
-export interface ResponseGinisBodyDocumentDetail {
+export type ResponseGinisBodyDocumentDetail = {
   'Detail-dokumentu': ResponseGinisBodyDocumentDetailDetail
   'Soubory-dokumentu': ResponseGinisBodyDocumentDetailFile[]
 }
 
-export interface ResponseGinisBodyDocumentDetailDetail {
+export type ResponseGinisBodyDocumentDetailDetail = {
   'Id-zaznamu': string
   Stav: RequestGinisBodyDocumentsListStates
   Kategorie: string
@@ -83,7 +83,7 @@ export interface ResponseGinisBodyDocumentDetailDetail {
   'Odbor-sml': string
 }
 
-export interface ResponseGinisBodyDocumentDetailFile {
+export type ResponseGinisBodyDocumentDetailFile = {
   'Id-souboru': string // file id - use for download file - fileId param
   Nazev: string
   Velikost: string
@@ -92,11 +92,11 @@ export interface ResponseGinisBodyDocumentDetailFile {
   'Priznak-podpis': string
 }
 
-export interface RequestGinisBodyLoadFile {
+export type RequestGinisBodyLoadFile = {
   fileId: string
 }
 
-export interface ResponseGinisBodyLoadFile {
+export type ResponseGinisBodyLoadFile = {
   'Jmeno-souboru': string // file name
   Data: string // base64 string
 }

next/backend/tootoot/homepageTootootEvents.fetcher.tsx

@@ -7,7 +7,7 @@ import sortBy from 'lodash/sortBy'
 const eventsCountToFetch = 24
 const eventsCountToShow = 12
 
-interface TootootEventResponse {
+type TootootEventResponse = {
   ProfileName: string
   ProfilePicture: string
   ShareImage: string
@@ -77,7 +77,7 @@ interface TootootEventResponse {
   EntityType: string
 }
 
-interface Profile {
+type Profile = {
   ProfileName: string
   ProfilePicture: null | string
   IsOrganizer: boolean
@@ -86,7 +86,7 @@ interface Profile {
   Confirmed?: boolean
 }
 
-interface Venue {
+type Venue = {
   Name: string
   _id: string
   EntityType: string

next/components/atoms/AnimateHeight.tsx

@@ -1,7 +1,7 @@
-import cx from 'classnames'
 import { motion, useReducedMotion, Variant } from 'framer-motion'
 import { ReactNode, useMemo, useRef } from 'react'
 import { useResizeDetector } from 'react-resize-detector'
+import { twMerge } from 'tailwind-merge'
 
 type AnimateHeightProps = {
   isVisible: boolean
@@ -13,7 +13,7 @@ type AnimateHeightProps = {
   className?: string
 }
 
-export const AnimateHeight = ({
+const AnimateHeight = ({
   duration,
   ease = 'easeInOut',
   openedVariant = { opacity: 1, visibility: 'visible' },
@@ -35,7 +35,7 @@ export const AnimateHeight = ({
 
   return (
     <motion.div
-      className={cx('overflow-hidden', className)}
+      className={twMerge('overflow-hidden', className)}
       aria-hidden={!isVisible}
       initial={initialIsVisible.current ? 'opened' : 'closed'}
       animate={isVisible ? 'opened' : 'closed'}
@@ -53,3 +53,5 @@ export const AnimateHeight = ({
     </motion.div>
   )
 }
+
+export default AnimateHeight

next/components/atoms/Markdown.tsx

@@ -9,7 +9,7 @@ import remarkUnwrapImages from 'remark-unwrap-images'
 
 import styles from './Markdown.module.scss'
 
-export interface MarkdownProps {
+export type MarkdownProps = {
   content: string | null | undefined
   variant?: 'default' | 'small' | 'small-no-respo' | 'accordion'
 }

next/components/atoms/icon/Icon.tsx

@@ -2,12 +2,12 @@ import { FC, useMemo } from 'react'
 
 import { getIcon, MenuIcon } from './IconService'
 
-interface Props {
+type Props = {
   iconName: MenuIcon | undefined
   className?: string
 }
 
-export const Icon: FC<Props> = ({ iconName, className }) => {
+const Icon: FC<Props> = ({ iconName, className }) => {
   const iconCollection = useMemo(() => getIcon(iconName), [iconName])
 
   if (!iconCollection?.size_48) {
@@ -16,3 +16,5 @@ export const Icon: FC<Props> = ({ iconName, className }) => {
 
   return <iconCollection.size_48 className={className} />
 }
+
+export default Icon

next/components/atoms/icon/IconService.ts

@@ -122,12 +122,12 @@ export type MenuIcon = string
 // The type of any icon is fine.
 type IconComponent = typeof Accommodation48pxIcon
 
-interface IconUrlMap {
+type IconUrlMap = {
   size_48: { [key: MenuIcon]: IconComponent }
   size_64: { [key: MenuIcon]: IconComponent }
 }
 
-interface IconCollection {
+type IconCollection = {
   size_64: IconComponent
   size_48: IconComponent
 }

next/components/forms/icon-components/CheckboxIcon.tsx

@@ -1,7 +1,7 @@
 import SelectedIcon from '@assets/images/forms/selected.svg'
 import cx from 'classnames'
 
-interface SelectCheckboxProps {
+type SelectCheckboxProps = {
   checked?: boolean
   className?: string
 }

next/components/forms/icon-components/RadioButtonIcon.tsx

@@ -1,12 +1,12 @@
-import cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 
-interface RadioButtonIconProps {
+type RadioButtonIconProps = {
   selected?: boolean
   className?: string
 }
 
 const RadioButtonIcon = ({ selected, className }: RadioButtonIconProps) => {
-  const radioButtonClassName = cx(
+  const radioButtonClassName = twMerge(
     'justify-align flex h-6 w-6 flex-col rounded-full border-2 border-gray-800',
     className,
   )

next/components/forms/info-components/FieldErrorMessage.tsx

@@ -1,6 +1,6 @@
 import React, { DOMAttributes, FC } from 'react'
 
-interface FieldErrorMessageProps {
+type FieldErrorMessageProps = {
   errorMessage?: string[]
   errorMessageProps?: DOMAttributes<never>
 }

next/components/forms/info-components/FieldHeader.tsx

@@ -4,7 +4,7 @@ import { DOMAttributes } from 'react'
 
 import { ExplicitOptionalType } from '../types/ExplicitOptional'
 
-interface FieldHeaderProps {
+type FieldHeaderProps = {
   label: string
   htmlFor?: string
   required?: boolean

next/components/forms/simple-components/Chip.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import { Tag, TagProps } from 'react-aria-components'
 
-interface ChipProps extends TagProps {
+type ChipProps = TagProps & {
   variant?: 'large' | 'small'
 }
 

next/components/forms/simple-components/ProgressBar.tsx

@@ -47,7 +47,7 @@ const ProgressBar = ({
             })}
           />
         </div>
-        <div className={cx('text-default')}>{value}%</div>
+        <div className="text-default">{value}%</div>
       </div>
     </div>
   )

next/components/forms/simple-components/ServiceCard.tsx

@@ -1,7 +1,7 @@
 import CircleArrowRight from '@assets/images/circle-arrow-right.svg'
 import Button from '@components/forms/simple-components/Button'
-import cx from 'classnames'
 import { ReactNode } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 type ServiceCardBase = {
   title: string
@@ -22,7 +22,7 @@ const ServiceCard = ({
   href,
   onPress,
 }: ServiceCardBase) => {
-  const style = cx(
+  const style = twMerge(
     'group flex min-w-[280px] max-w-[280px] cursor-pointer flex-col items-start gap-5 rounded-lg border-2 border-solid border-gray-200 bg-gray-0 p-4',
     className,
   )

next/components/forms/types/TransformedFormData.ts

@@ -1,4 +1,4 @@
-export interface StepData {
+export type StepData = {
   title: string
   stepKey?: string
   isFilled?: boolean

next/components/forms/widget-components/Checkbox/CheckboxGroup.tsx

@@ -1,10 +1,10 @@
-import cx from 'classnames'
 import FieldHeader from 'components/forms/info-components/FieldHeader'
 import * as React from 'react'
 import { useCheckboxGroup } from 'react-aria'
 import { CheckboxGroupState, useCheckboxGroupState } from 'react-stately'
 
 import FieldErrorMessage from '../../info-components/FieldErrorMessage'
+import { twMerge } from 'tailwind-merge'
 
 export const CheckboxGroupContext = React.createContext({} as CheckboxGroupState)
 
@@ -32,7 +32,7 @@ const CheckboxGroup = (props: CheckBoxGroupBase) => {
           htmlFor={groupProps.id}
           required={required}
         />
-        <div className={cx('flex flex-col gap-3', className)}>
+        <div className={twMerge('flex flex-col gap-3', className)}>
           <CheckboxGroupContext.Provider value={state}>{children}</CheckboxGroupContext.Provider>
         </div>
       </div>

next/components/forms/widget-components/SearchField/SearchField.tsx

@@ -8,7 +8,7 @@ import FieldErrorMessage from '../../info-components/FieldErrorMessage'
 import FieldHeader from '../../info-components/FieldHeader'
 import { ExplicitOptionalType } from '../../types/ExplicitOptional'
 
-interface InputBase {
+type InputBase = {
   label: string
   placeholder: string
   errorMessage?: string[]

next/components/forms/widget-components/SelectField/Dropdown.tsx

@@ -6,7 +6,7 @@ import DropdownRow from './DropdownRow'
 import SelectAllDropdownRow from './SelectAllDropdownRow'
 import { SelectOption } from './SelectField'
 
-interface DropdownProps {
+type DropdownProps = {
   enumOptions: SelectOption[]
   value: SelectOption[]
   selectAllOption?: boolean

next/components/forms/widget-components/SelectField/DropdownRow.tsx

@@ -7,7 +7,7 @@ import CheckboxIcon from '../../icon-components/CheckboxIcon'
 import RadioButtonIcon from '../../icon-components/RadioButtonIcon'
 import { SelectOption } from './SelectField'
 
-interface DropdownRowProps {
+type DropdownRowProps = {
   option: SelectOption
   isBold?: boolean
   selected?: boolean

next/components/forms/widget-components/SelectField/SelectAllDropdownRow.tsx

@@ -1,6 +1,6 @@
 import { useTranslations } from 'next-intl'
 
-interface SelectAllDropdownRowProps {
+type SelectAllDropdownRowProps = {
   divider?: boolean
   isEverythingSelected: boolean
   onSelectAll: (isEverythingSelect: boolean) => void

next/components/forms/widget-components/SelectField/SelectField.tsx

@@ -10,20 +10,21 @@ import React, {
   useId,
   useState,
 } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 import FieldErrorMessage from '../../info-components/FieldErrorMessage'
 import FieldHeader from '../../info-components/FieldHeader'
 import { ExplicitOptionalType } from '../../types/ExplicitOptional'
 import Dropdown from './Dropdown'
 import SelectFieldBox from './SelectFieldBox'
 
-export interface SelectOption {
+export type SelectOption = {
   const: string | number
   title?: string
   description?: string
 }
 
-interface SelectFieldProps {
+type SelectFieldProps = {
   label: string
   type?: 'one' | 'multiple' | 'arrow' | 'radio'
   value?: SelectOption[]
@@ -179,8 +180,8 @@ const SelectFieldComponent: ForwardRefRenderFunction<HTMLDivElement, SelectField
   // RENDER
   return (
     <section
-      className={cx(
-        'relative flex w-full max-w-[200px] flex-col transition-all xs:max-w-[320px]',
+      className={twMerge(
+        'xs:max-w-[320px] relative flex w-full max-w-[200px] flex-col transition-all',
         className,
       )}
     >

next/components/forms/widget-components/SelectField/SelectFieldBox.tsx

@@ -3,7 +3,7 @@ import React, { ForwardedRef, forwardRef, ForwardRefRenderFunction } from 'react
 import Tag from '../../simple-components/Tag'
 import { SelectOption } from './SelectField'
 
-interface SelectFieldBoxProps {
+type SelectFieldBoxProps = {
   value?: SelectOption[]
   multiple?: boolean
   placeholder?: string
@@ -87,7 +87,7 @@ const SelectFieldBoxComponent: ForwardRefRenderFunction<HTMLDivElement, SelectFi
       }
       <input
         ref={filterRef}
-        className="text-default max-w-[80px] border-0 outline-none xs:max-w-none"
+        className="text-default xs:max-w-none max-w-[80px] border-0 outline-none"
         type="text"
         size={getInputSize()}
         value={filter}

next/components/forms/widget-components/TextAreaField/TextAreaField.tsx

@@ -6,7 +6,7 @@ import FieldErrorMessage from '../../info-components/FieldErrorMessage'
 import FieldHeader from '../../info-components/FieldHeader'
 import { ExplicitOptionalType } from '../../types/ExplicitOptional'
 
-interface TextAreaBase {
+type TextAreaBase = {
   label: string
   placeholder?: string
   errorMessage?: string[]

next/components/molecules/HomePageSearch.tsx

@@ -10,11 +10,11 @@ import { twMerge } from 'tailwind-merge'
 import { useDebounce, useOnClickOutside } from 'usehooks-ts'
 
 import useGetSwrExtras from '../../utils/useGetSwrExtras'
-import { AnimateHeight } from '../atoms/AnimateHeight'
+import AnimateHeight from '../atoms/AnimateHeight'
 import HomePageSearchField from './HomePageSearchField'
 import HomePageSearchResults from './HomePageSearchResults'
 
-interface HomePageSearchProps {
+type HomePageSearchProps = {
   isOpen: boolean
   setOpen: Dispatch<SetStateAction<boolean>>
 }

next/components/molecules/HomePageSearchResults.tsx

@@ -1,6 +1,6 @@
 import { ChevronRightIcon } from '@assets/ui-icons'
 import { HomepageSearchData } from '@backend/meili/fetchers/homepageSearchFetcher'
-import { LoadingSpinner } from '@bratislava/ui-bratislava/LoadingSpinner/LoadingSpinner'
+import LoadingSpinner from '@bratislava/ui-bratislava/LoadingSpinner/LoadingSpinner'
 import Link from 'next/link'
 import { useTranslations } from 'next-intl'
 import { useRef } from 'react'