3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-06-07 05:01:49 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Use cn util (#1589)

Browse source
This commit is contained in:
Luke Vella 2025-02-28 11:02:28 +00:00 • committed by GitHub
parent 05c6cd7735
commit b8a7e9746b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 23 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/web/src/components/date-card.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx"; import { cn } from "@rallly/ui";
import * as React from "react"; import * as React from "react";
export interface DateCardProps { export interface DateCardProps {
@ -15,7 +15,7 @@ const DateCard: React.FunctionComponent<DateCardProps> = ({
}) => { }) => {
return ( return (
<div <div
className={clsx( className={cn(
"relative inline-flex size-12 flex-col rounded-md border bg-gray-50 text-center text-slate-800", "relative inline-flex size-12 flex-col rounded-md border bg-gray-50 text-center text-slate-800",
className, className,
)} )}

4
apps/web/src/components/date-icon.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx"; import { cn } from "@rallly/ui";
import type { Dayjs } from "dayjs"; import type { Dayjs } from "dayjs";
import dayjs from "dayjs"; import dayjs from "dayjs";
@ -10,7 +10,7 @@ export const DateIconInner = (props: {
}) => { }) => {
return ( return (
<div <div
className={clsx( className={cn(
"inline-flex size-10 flex-col overflow-hidden rounded-md border bg-gray-50 text-center text-slate-800", "inline-flex size-10 flex-col overflow-hidden rounded-md border bg-gray-50 text-center text-slate-800",
props.className, props.className,
)} )}

7
apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
View file

@ -8,7 +8,6 @@ import {
} from "@rallly/ui/dropdown-menu"; } from "@rallly/ui/dropdown-menu";
import { Icon } from "@rallly/ui/icon"; import { Icon } from "@rallly/ui/icon";
import { Switch } from "@rallly/ui/switch"; import { Switch } from "@rallly/ui/switch";
import clsx from "clsx";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { import {
CalendarIcon, CalendarIcon,
@ -129,7 +128,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
return ( return (
<div <div
key={i} key={i}
className={clsx("h-11", { className={cn("h-11", {
"border-r": (i + 1) % 7 !== 0, "border-r": (i + 1) % 7 !== 0,
"border-b": i < datepicker.days.length - 7, "border-b": i < datepicker.days.length - 7,
})} })}
@ -174,7 +173,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
} }
} }
}} }}
className={clsx( className={cn(
"group relative flex h-full w-full items-start justify-end rounded-none px-2.5 py-1.5 text-sm font-medium tracking-tight focus:z-10 focus:rounded", "group relative flex h-full w-full items-start justify-end rounded-none px-2.5 py-1.5 text-sm font-medium tracking-tight focus:z-10 focus:rounded",
{ {
"bg-gray-100 text-gray-400": day.isPast, "bg-gray-100 text-gray-400": day.isPast,
@ -208,7 +207,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
</div> </div>
<div className="flex grow flex-col"> <div className="flex grow flex-col">
<div <div
className={clsx("border-b", { className={cn("border-b", {
hidden: datepicker.selection.length === 0, hidden: datepicker.selection.length === 0,
})} })}
> >

4
apps/web/src/components/new-participant-modal.tsx
View file

@ -1,12 +1,12 @@
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import type { VoteType } from "@rallly/database"; import type { VoteType } from "@rallly/database";
import { cn } from "@rallly/ui";
import { Badge } from "@rallly/ui/badge"; import { Badge } from "@rallly/ui/badge";
import { Button } from "@rallly/ui/button"; import { Button } from "@rallly/ui/button";
import { FormMessage } from "@rallly/ui/form"; import { FormMessage } from "@rallly/ui/form";
import { Input } from "@rallly/ui/input"; import { Input } from "@rallly/ui/input";
import * as Sentry from "@sentry/nextjs"; import * as Sentry from "@sentry/nextjs";
import { TRPCClientError } from "@trpc/client"; import { TRPCClientError } from "@trpc/client";
import clsx from "clsx";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import z from "zod"; import z from "zod";
@ -59,7 +59,7 @@ const VoteSummary = ({
return ( return (
<div <div
className={clsx("flex flex-wrap gap-1.5 rounded border p-1.5", className)} className={cn("flex flex-wrap gap-1.5 rounded border p-1.5", className)}
> >
{voteTypes.map((voteType) => { {voteTypes.map((voteType) => {
const votes = voteByType[voteType]; const votes = voteByType[voteType];

4
apps/web/src/components/poll/mobile-poll/grouped-options.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx"; import { cn } from "@rallly/ui";
import { groupBy } from "lodash"; import { groupBy } from "lodash";
import * as React from "react"; import * as React from "react";
@ -28,7 +28,7 @@ const GroupedOptions: React.FunctionComponent<GroupedOptionsProps> = ({
return ( return (
<div key={day}> <div key={day}>
<div <div
className={clsx( className={cn(
"flex border-b bg-gray-50 px-4 py-2 text-xs font-medium uppercase", "flex border-b bg-gray-50 px-4 py-2 text-xs font-medium uppercase",
groupClassName, groupClassName,
)} )}

10
apps/web/src/components/poll/vote-icon.tsx
View file

@ -1,6 +1,6 @@
import type { VoteType } from "@rallly/database"; import type { VoteType } from "@rallly/database";
import { IfNeedBeIcon, NoIcon, PendingIcon, YesIcon } from "@rallly/icons"; import { IfNeedBeIcon, NoIcon, PendingIcon, YesIcon } from "@rallly/icons";
import clsx from "clsx"; import { cn } from "@rallly/ui";
import * as React from "react"; import * as React from "react";
const VoteIcon: React.FunctionComponent<{ const VoteIcon: React.FunctionComponent<{
@ -12,7 +12,7 @@ const VoteIcon: React.FunctionComponent<{
case "yes": case "yes":
return ( return (
<YesIcon <YesIcon
className={clsx("text-green-500", className, { className={cn("text-green-500", className, {
"size-5": size === "md", "size-5": size === "md",
"h-3": size === "sm", "h-3": size === "sm",
})} })}
@ -22,7 +22,7 @@ const VoteIcon: React.FunctionComponent<{
case "ifNeedBe": case "ifNeedBe":
return ( return (
<IfNeedBeIcon <IfNeedBeIcon
className={clsx("text-amber-400", className, { className={cn("text-amber-400", className, {
"size-5": size === "md", "size-5": size === "md",
"h-3": size === "sm", "h-3": size === "sm",
})} })}
@ -32,7 +32,7 @@ const VoteIcon: React.FunctionComponent<{
case "no": case "no":
return ( return (
<NoIcon <NoIcon
className={clsx("text-gray-400", className, { className={cn("text-gray-400", className, {
"size-5": size === "md", "size-5": size === "md",
"h-3": size === "sm", "h-3": size === "sm",
})} })}
@ -42,7 +42,7 @@ const VoteIcon: React.FunctionComponent<{
default: default:
return ( return (
<PendingIcon <PendingIcon
className={clsx("text-gray-300", className, { className={cn("text-gray-300", className, {
"size-5": size === "md", "size-5": size === "md",
"h-3": size === "sm", "h-3": size === "sm",
})} })}

4
apps/web/src/components/spinner.tsx
View file

@ -1,10 +1,10 @@
import clsx from "clsx"; import { cn } from "@rallly/ui";
import { Loader2Icon } from "lucide-react"; import { Loader2Icon } from "lucide-react";
export const Spinner = (props: { className?: string }) => { export const Spinner = (props: { className?: string }) => {
return ( return (
<Loader2Icon <Loader2Icon
className={clsx( className={cn(
"text-muted-foreground inline-block h-5 animate-spin", "text-muted-foreground inline-block h-5 animate-spin",
props.className, props.className,
)} )}

6
apps/web/src/components/steps/steps.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx"; import { cn } from "@rallly/ui";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import React from "react"; import React from "react";
@ -16,7 +16,7 @@ const Steps: React.FunctionComponent<StepsProps> = ({
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className={clsx("inline-flex items-center gap-2.5", className)}> <div className={cn("inline-flex items-center gap-2.5", className)}>
<div className="text-sm font-medium tracking-tight"> <div className="text-sm font-medium tracking-tight">
{t("stepSummary", { {t("stepSummary", {
current: current + 1, current: current + 1,
@ -28,7 +28,7 @@ const Steps: React.FunctionComponent<StepsProps> = ({
return ( return (
<span <span
key={i} key={i}
className={clsx("h-2 w-2 rounded-full transition-all", { className={cn("h-2 w-2 rounded-full transition-all", {
"bg-primary-400": i <= current, "bg-primary-400": i <= current,
"bg-gray-300": i > current, "bg-gray-300": i > current,
"ring-primary-200 animate-pulse ring-4": i === current, "ring-primary-200 animate-pulse ring-4": i === current,

4
apps/web/src/components/sticky.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx"; import { cn } from "@rallly/ui";
import React from "react"; import React from "react";
export const useDetectSticky = <E extends HTMLElement>( export const useDetectSticky = <E extends HTMLElement>(
@ -35,7 +35,7 @@ export const Sticky: React.FunctionComponent<{
return ( return (
<div <div
ref={ref} ref={ref}
className={clsx( className={cn(
"sticky", "sticky",
typeof className === "function" ? className(isPinned) : className, typeof className === "function" ? className(isPinned) : className,
)} )}