🔥(front) remove unused UI components and utilities
Remove deprecated UI components (breadcrumbs, circular-progress, infinite-scroll, info, responsive) and unused hooks (useCopyToClipboard, useLayout, RhfInput) that are no longer needed. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Nathan Panchout
@@ -1,49 +0,0 @@
|
|||||||
import { Controller, useFormContext } from "react-hook-form";
|
|
||||||
import { Input, TextArea, TextAreaProps } from "@openfun/cunningham-react";
|
|
||||||
import { InputProps } from "@openfun/cunningham-react";
|
|
||||||
|
|
||||||
export const RhfInput = (props: InputProps & { name: string }) => {
|
|
||||||
const { control, setValue } = useFormContext();
|
|
||||||
return (
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name={props.name}
|
|
||||||
render={({ field, fieldState }) => {
|
|
||||||
return (
|
|
||||||
<Input
|
|
||||||
{...props}
|
|
||||||
aria-invalid={!!fieldState.error}
|
|
||||||
state={fieldState.error ? "error" : "default"}
|
|
||||||
text={fieldState.error?.message}
|
|
||||||
onBlur={field.onBlur}
|
|
||||||
onChange={(e) => setValue(field.name, e.target.value)}
|
|
||||||
value={field.value}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const RhfTextarea = (props: TextAreaProps & { name: string }) => {
|
|
||||||
const { control, setValue } = useFormContext();
|
|
||||||
return (
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name={props.name}
|
|
||||||
render={({ field, fieldState }) => {
|
|
||||||
return (
|
|
||||||
<TextArea
|
|
||||||
{...props}
|
|
||||||
aria-invalid={!!fieldState.error}
|
|
||||||
state={fieldState.error ? "error" : "default"}
|
|
||||||
text={fieldState.error?.message}
|
|
||||||
onBlur={field.onBlur}
|
|
||||||
onChange={(e) => setValue(field.name, e.target.value)}
|
|
||||||
value={field.value}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
import { Button } from "@openfun/cunningham-react";
|
|
||||||
import React, { ReactElement, ReactNode } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
export type BreadcrumbItem = {
|
|
||||||
content: ReactNode;
|
|
||||||
};
|
|
||||||
|
|
||||||
export interface BreadcrumbsProps {
|
|
||||||
items: BreadcrumbItem[];
|
|
||||||
onBack?: () => void;
|
|
||||||
displayBack?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Breadcrumbs = ({
|
|
||||||
items,
|
|
||||||
onBack,
|
|
||||||
displayBack = false,
|
|
||||||
}: BreadcrumbsProps) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
return (
|
|
||||||
<div className="c__breadcrumbs">
|
|
||||||
{displayBack && (
|
|
||||||
<Button
|
|
||||||
icon={<span className="material-icons">arrow_back</span>}
|
|
||||||
color="neutral"
|
|
||||||
variant="tertiary"
|
|
||||||
className="mr-t"
|
|
||||||
onClick={onBack}
|
|
||||||
disabled={items.length <= 1}
|
|
||||||
>
|
|
||||||
{t("Précédent")}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{items.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment key={index}>
|
|
||||||
{index > 0 && (
|
|
||||||
<span className="material-icons c__breadcrumbs__separator">
|
|
||||||
chevron_right
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{React.cloneElement(item.content as ReactElement<HTMLDivElement>, {
|
|
||||||
className: `${
|
|
||||||
(
|
|
||||||
(item.content as ReactElement<HTMLDivElement>).props as {
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
).className || ""
|
|
||||||
} ${index === items.length - 1 ? "active" : ""}`,
|
|
||||||
})}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
.c__breadcrumbs {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
&__separator {
|
|
||||||
color: var(--c--contextuals--content--semantic--neutral--tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.c__breadcrumbs__button {
|
|
||||||
height: 32px;
|
|
||||||
padding: 4px;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--c--contextuals--content--semantic--neutral--secondary);
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 400;
|
|
||||||
font-family: var(--c--globals--font--families--base);
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(
|
|
||||||
--c--contextuals--background--semantic--neutral--tertiary
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--c--contextuals--content--semantic--neutral--primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
import { CheckIcon } from "../icon/Icon";
|
|
||||||
|
|
||||||
interface CircularProgressProps {
|
|
||||||
progress: number;
|
|
||||||
size?: number;
|
|
||||||
strokeWidth?: number;
|
|
||||||
primaryColor?: string;
|
|
||||||
secondaryColor?: string;
|
|
||||||
transitionDuration?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const CircularProgress = ({
|
|
||||||
progress,
|
|
||||||
primaryColor = "#1a237e",
|
|
||||||
secondaryColor = "#f0f0f0",
|
|
||||||
transitionDuration = 0.3,
|
|
||||||
}: CircularProgressProps) => {
|
|
||||||
if (progress > 100) {
|
|
||||||
progress = 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
const strokeWidth = 2;
|
|
||||||
|
|
||||||
// Fixed size of 24px for the component
|
|
||||||
const fixedSize = 24;
|
|
||||||
// Fixed size of 20px for the circle
|
|
||||||
const circleSize = 20;
|
|
||||||
|
|
||||||
// Calculate the radius based on the circle size
|
|
||||||
const radius = circleSize / 2;
|
|
||||||
const circumference = 2 * Math.PI * radius;
|
|
||||||
|
|
||||||
// Calculate the dash offset based on progress
|
|
||||||
const dashOffset = circumference - (progress / 100) * circumference;
|
|
||||||
|
|
||||||
// Determine if we should show the check mark
|
|
||||||
const isComplete = progress >= 100;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: "relative",
|
|
||||||
width: `${fixedSize}px`,
|
|
||||||
height: `${fixedSize}px`,
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{!isComplete && (
|
|
||||||
<svg
|
|
||||||
width={fixedSize}
|
|
||||||
height={fixedSize}
|
|
||||||
viewBox={`0 0 ${fixedSize} ${fixedSize}`}
|
|
||||||
style={{ transform: isComplete ? "rotate(0deg)" : "rotate(-90deg)" }}
|
|
||||||
>
|
|
||||||
{/* Background circle - centered in the 24x24 container */}
|
|
||||||
<circle
|
|
||||||
cx={fixedSize / 2}
|
|
||||||
cy={fixedSize / 2}
|
|
||||||
r={radius}
|
|
||||||
fill="none"
|
|
||||||
stroke={secondaryColor}
|
|
||||||
strokeWidth={strokeWidth}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Progress circle - centered in the 24x24 container */}
|
|
||||||
{!isComplete && (
|
|
||||||
<circle
|
|
||||||
cx={fixedSize / 2}
|
|
||||||
cy={fixedSize / 2}
|
|
||||||
r={radius}
|
|
||||||
fill="none"
|
|
||||||
stroke={primaryColor}
|
|
||||||
strokeWidth={strokeWidth}
|
|
||||||
strokeDasharray={circumference}
|
|
||||||
strokeDashoffset={dashOffset}
|
|
||||||
strokeLinecap="round"
|
|
||||||
style={{
|
|
||||||
transition: `stroke-dashoffset ${transitionDuration}s ease-in-out`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
{/* Check mark when complete */}
|
|
||||||
{isComplete && <CheckIcon />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
.infinite-scroll {
|
|
||||||
&__loading-component {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__trigger {
|
|
||||||
min-height: 20px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
import { useEffect, useRef, useCallback, ReactNode } from "react";
|
|
||||||
import { Loader, useCunningham } from "@openfun/cunningham-react";
|
|
||||||
|
|
||||||
interface InfiniteScrollProps {
|
|
||||||
/** Whether there are more items to load */
|
|
||||||
hasNextPage: boolean;
|
|
||||||
/** Whether currently fetching the next page */
|
|
||||||
isFetchingNextPage: boolean;
|
|
||||||
/** Function to call when more items should be loaded */
|
|
||||||
fetchNextPage: () => void;
|
|
||||||
/** Children to render */
|
|
||||||
children: ReactNode;
|
|
||||||
/** Optional loading component to show at the bottom */
|
|
||||||
loadingComponent?: ReactNode;
|
|
||||||
/** Distance from bottom to trigger loading (in pixels) */
|
|
||||||
rootMargin?: string;
|
|
||||||
/** Intersection threshold (0-1) */
|
|
||||||
threshold?: number;
|
|
||||||
/** Additional CSS class for the container */
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* InfiniteScroll component that automatically loads more content when the user
|
|
||||||
* scrolls near the bottom of the container.
|
|
||||||
*
|
|
||||||
* Uses Intersection Observer API to detect when the trigger element comes into view
|
|
||||||
* and automatically calls fetchNextPage when more content is available.
|
|
||||||
*/
|
|
||||||
export const InfiniteScroll = ({
|
|
||||||
hasNextPage,
|
|
||||||
isFetchingNextPage,
|
|
||||||
fetchNextPage,
|
|
||||||
children,
|
|
||||||
loadingComponent,
|
|
||||||
rootMargin = "300px",
|
|
||||||
threshold = 1,
|
|
||||||
className,
|
|
||||||
}: InfiniteScrollProps) => {
|
|
||||||
const { t: tc } = useCunningham();
|
|
||||||
const loadMoreRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const handleIntersection = useCallback(
|
|
||||||
(entries: IntersectionObserverEntry[]) => {
|
|
||||||
const [entry] = entries;
|
|
||||||
|
|
||||||
if (entry.isIntersecting && hasNextPage && !isFetchingNextPage) {
|
|
||||||
fetchNextPage();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[hasNextPage, isFetchingNextPage, fetchNextPage]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const observer = new IntersectionObserver(handleIntersection, {
|
|
||||||
threshold,
|
|
||||||
rootMargin,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (loadMoreRef.current) {
|
|
||||||
observer.observe(loadMoreRef.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (loadMoreRef.current) {
|
|
||||||
observer.unobserve(loadMoreRef.current);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}, [handleIntersection, threshold, rootMargin]);
|
|
||||||
|
|
||||||
const defaultLoadingComponent = (
|
|
||||||
<div className="infinite-scroll__loading-component">
|
|
||||||
<Loader size="small" aria-label={tc("components.datagrid.loader_aria")} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={className}>
|
|
||||||
{children}
|
|
||||||
{/* Infinite scroll trigger and loading indicator */}
|
|
||||||
<div ref={loadMoreRef} className="infinite-scroll__trigger">
|
|
||||||
{isFetchingNextPage && (loadingComponent || defaultLoadingComponent)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { InfiniteScroll } from "./InfiniteScroll";
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
.info-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: var(--c--globals--spacings--3xs, 0.25rem) 0;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: var(--c--globals--font--sizes--sm);
|
|
||||||
color: var(--c--contextuals--content--semantic--neutral--primary);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__right-content {
|
|
||||||
&__string {
|
|
||||||
font-size: var(--c--globals--font--sizes--sm);
|
|
||||||
color: var(--c--contextuals--content--semantic--neutral--secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import clsx from "clsx";
|
|
||||||
|
|
||||||
type InfoRowProps = {
|
|
||||||
label: string;
|
|
||||||
rightContent: React.ReactNode | string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const InfoRow = ({ label, rightContent }: InfoRowProps) => {
|
|
||||||
return (
|
|
||||||
<div className="info-row">
|
|
||||||
<div className="info-row__label">{label}</div>
|
|
||||||
<div
|
|
||||||
className={clsx("info-row__right-content", {
|
|
||||||
"info-row__right-content__string": typeof rightContent === "string",
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{rightContent}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
export const ResponsiveDivs = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div id="responsive-tablet"></div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const isTablet = () => {
|
|
||||||
return (
|
|
||||||
getComputedStyle(
|
|
||||||
document.querySelector("#responsive-tablet")!
|
|
||||||
).getPropertyValue("display") === "block"
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
@use "sass:map";
|
|
||||||
@use "@/styles/cunningham-tokens-sass" as *;
|
|
||||||
|
|
||||||
$tablet: map.get($themes, "default", "globals", "breakpoints", "tablet");
|
|
||||||
|
|
||||||
#responsive-tablet {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
@media (max-width: $tablet) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
import {
|
|
||||||
addToast,
|
|
||||||
ToasterItem,
|
|
||||||
} from "@/features/ui/components/toaster/Toaster";
|
|
||||||
import { useCallback } from "react";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
|
|
||||||
export const useClipboard = () => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
return useCallback(
|
|
||||||
(text: string, successMessage?: string, errorMessage?: string) => {
|
|
||||||
navigator.clipboard
|
|
||||||
.writeText(text)
|
|
||||||
.then(() => {
|
|
||||||
addToast(
|
|
||||||
<ToasterItem>
|
|
||||||
<span className="material-icons">check</span>
|
|
||||||
<span>{successMessage ?? t("clipboard.success")}</span>
|
|
||||||
</ToasterItem>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
addToast(
|
|
||||||
<ToasterItem type="error">
|
|
||||||
<span className="material-icons">error</span>
|
|
||||||
<span>{errorMessage ?? t("clipboard.error")}</span>
|
|
||||||
</ToasterItem>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[t]
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import { useRouter } from "next/router";
|
|
||||||
|
|
||||||
export const useIsMinimalLayout = () => {
|
|
||||||
const router = useRouter();
|
|
||||||
return router.query.minimal === "true";
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user