rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move DurationInput to @probo/ui and scope pattern merge by category

Browse Source 
Move the DurationInput component from the console app into @probo/ui
for reuse, add duration formatting helpers to @probo/helpers, and
update pattern merge to group by both category ID and prefix.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-30 10:48:49 +04:00
parent 2fe77d9ddc
commit 427bbbaf5c
8 changed files with 58 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/AddCookieRow.tsx
View File

@@ -12,12 +12,12 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { toMaxAgeSeconds } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Button, Input, Td, Tr } from "@probo/ui";
import { Button, DurationInput, Input, Td, Tr } from "@probo/ui";
import { useState } from "react";
import type { CookieEntry } from "./CategorySection";
import { DurationInput, toMaxAgeSeconds } from "./DurationInput";
interface AddCookieRowProps {
isUpdating: boolean;

74
apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/DurationInput.tsx
View File

@@ -1,74 +0,0 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { Input } from "@probo/ui";
const UNITS: { value: string; label: string; seconds: number }[] = [
{ value: "seconds", label: "seconds", seconds: 1 },
{ value: "minutes", label: "minutes", seconds: 60 },
{ value: "hours", label: "hours", seconds: 3600 },
{ value: "days", label: "days", seconds: 86400 },
{ value: "weeks", label: "weeks", seconds: 604800 },
{ value: "months", label: "months", seconds: 2592000 },
{ value: "years", label: "years", seconds: 31536000 },
];
export function toMaxAgeSeconds(value: string, unit: string): number | null {
const num = parseFloat(value);
if (isNaN(num) || num <= 0) return null;
const u = UNITS.find(u => u.value === unit);
if (!u) return null;
return Math.round(num * u.seconds);
}
export function fromMaxAgeSeconds(seconds: number | null): { value: string; unit: string } {
if (seconds === null || seconds <= 0) return { value: "", unit: "days" };
for (const u of [...UNITS].reverse()) {
if (seconds >= u.seconds && seconds % u.seconds === 0) {
return { value: String(seconds / u.seconds), unit: u.value };
}
}
return { value: String(seconds), unit: "seconds" };
}
interface DurationInputProps {
value: string;
unit: string;
onValueChange: (value: string) => void;
onUnitChange: (unit: string) => void;
}
export function DurationInput({ value, unit, onValueChange, onUnitChange }: DurationInputProps) {
return (
<div className="flex gap-1">
<Input
type="number"
min={0}
value={value}
onChange={e => onValueChange(e.target.value)}
placeholder="—"
className="w-20"
/>
<select
value={unit}
onChange={e => onUnitChange(e.target.value)}
className="rounded border border-border bg-background px-2 py-1 text-sm"
>
{UNITS.map(u => (
<option key={u.value} value={u.value}>{u.label}</option>
))}
</select>
</div>
);
}

4
apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCookieRow.tsx
View File

@@ -12,8 +12,9 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { fromMaxAgeSeconds, toMaxAgeSeconds } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Button, Input, Td, Tr } from "@probo/ui";
import { Button, DurationInput, Input, Td, Tr } from "@probo/ui";
import { useState } from "react";
import { useFragment } from "react-relay";
import { graphql } from "relay-runtime";
@@ -21,7 +22,6 @@ import { graphql } from "relay-runtime";
import type { EditCookieRowFragment$key } from "#/__generated__/core/EditCookieRowFragment.graphql";
import type { CookieEntry } from "./CategorySection";
import { DurationInput, fromMaxAgeSeconds, toMaxAgeSeconds } from "./DurationInput";
export const editCookieRowFragment = graphql`
fragment EditCookieRowFragment on CookiePattern {