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

Add policies signature history

Browse Source 
Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Jonathan
2025-05-27 12:32:04 +02:00
committed by Sacha Al Himdani
parent 2e6741942b
commit 61b1a24149
45 changed files with 1154 additions and 946 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/ui/src/Atoms/Icons/IconCircleCheck.tsx
View File

@@ -2,7 +2,6 @@ import type {IconProps} from "./type.ts";
export function IconCircleCheck({size = 24, className}: IconProps) {
return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="6" width="12" height="12" fill="currentColor"/>
<path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z" fill="currentColor"/>
</svg>

3
packages/ui/src/Atoms/Icons/circle-check.svg
View File

@@ -1,4 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="6" width="12" height="12" fill="#FFFFFB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z" fill="#141E12"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z" fill="currentColor"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 703 B

After

Width:  |  Height:  |  Size: 650 B

58
packages/ui/src/Atoms/Toasts/Toasts.tsx
View File

@@ -9,15 +9,23 @@ type Toast = {
id: string;
};
const duration = 3000;
const useToasts = create(
combine({ toasts: [] as Toast[] }, (set) => ({
add: (toast: Pick<Toast, "title" | "description" | "variant">) =>
add: (toast: Pick<Toast, "title" | "description" | "variant">) => {
const id = Date.now().toString();
set((state) => ({
toasts: [
{ ...toast, id: Date.now().toString() },
...state.toasts,
],
})),
toasts: [{ ...toast, id }, ...state.toasts],
}));
setTimeout(() => {
set((state) => ({
toasts: [
...state.toasts.filter((toast) => toast.id !== id),
],
}));
}, duration);
},
remove: (id: string) =>
set((state) => ({
toasts: state.toasts.filter((toast) => toast.id !== id),
@@ -51,15 +59,32 @@ export function Toasts() {
}
const toast = tv({
base: "p-2 border rounded relative animate-in slide-in-from-right w-full cursor-pointer",
slots: {
wrapper:
"p-2 border rounded relative animate-in slide-in-from-right w-full cursor-pointer ",
timer: "absolute bottom-0 left-0 w-full h-1 starting:scale-x-0 scale-x-100 origin-left transition-all ease-linear",
},
variants: {
variant: {
success:
"bg-success text-invert text-txt-success border-border-success",
error: "bg-danger text-invert text-txt-danger border-border-danger",
warning:
"bg-warning text-invert text-txt-warning border-border-warning",
info: "bg-info text-invert text-txt-info border-border-info",
success: {
wrapper:
"bg-success text-invert text-txt-success border-border-success",
timer: "bg-border-success",
},
error: {
wrapper:
"bg-danger text-invert text-txt-danger border-border-danger",
timer: "bg-border-danger",
},
warning: {
wrapper:
"bg-warning text-invert text-txt-warning border-border-warning",
timer: "bg-border-warning",
},
info: {
wrapper: "bg-info text-invert text-txt-info border-border-info",
timer: "bg-border-info",
},
},
},
defaultVariants: {
@@ -68,10 +93,15 @@ const toast = tv({
});
export function Toast({ onClose, ...props }: Toast & { onClose: () => void }) {
const { wrapper, timer } = toast(props);
return (
<div className={toast(props)} onClick={onClose}>
<div className={wrapper()} onClick={onClose}>
<div className="font-semibold">{props.title}</div>
<div className="text-sm opacity-80">{props.description}</div>
<div
className={timer()}
style={{ transitionDuration: `${duration}ms` }}
/>
</div>
);
}

21
packages/ui/src/Molecules/Badge/PolicyVersionBadge.stories.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { PolicyVersionBadge } from "./PolicyVersionBadge";
import type { Meta, StoryObj } from "@storybook/react";
export default {
title: "Molecules/Badges/PolicyVersionBadge",
component: PolicyVersionBadge,
argTypes: {},
} satisfies Meta<typeof PolicyVersionBadge>;
type Story = StoryObj<typeof PolicyVersionBadge>;
export const Default: Story = {
render() {
return (
<div className="flex gap-2">
<PolicyVersionBadge state="DRAFT" />
<PolicyVersionBadge state="PUBLISHED" />
</div>
);
},
};

15
packages/ui/src/Molecules/Badge/PolicyVersionBadge.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { useTranslate } from "@probo/i18n";
import { Badge } from "../../Atoms/Badge/Badge.tsx";
type Props = {
state: "DRAFT" | "PUBLISHED";
};
export function PolicyVersionBadge(props: Props) {
const { __ } = useTranslate();
return (
<Badge variant={props.state === "DRAFT" ? "neutral" : "success"}>
{props.state === "DRAFT" ? __("Draft") : __("Published")}
</Badge>
);
}

19
packages/ui/src/Molecules/Dialog/Dialog.tsx
View File

@@ -17,7 +17,6 @@ import {
type ComponentProps,
type CSSProperties,
type HTMLAttributes,
type ReactElement,
type ReactNode,
type RefObject,
} from "react";
@@ -128,14 +127,16 @@ export function DialogFooter({
);
}
export function DialogContent(
props: HTMLAttributes<HTMLDivElement> & {
padded?: boolean;
scrollableChildren?: boolean;
},
) {
export function DialogContent({
padded,
scrollableChildren,
...props
}: HTMLAttributes<HTMLDivElement> & {
padded?: boolean;
scrollableChildren?: boolean;
}) {
let children = props.children;
if (props.scrollableChildren) {
if (scrollableChildren) {
children = Children.map(props.children, (c) => {
if (
isValidElement<{
@@ -162,7 +163,7 @@ export function DialogContent(
className={clsx(
"overflow-y-auto",
props.className,
props.padded && "p-6",
padded && "p-6",
)}
style={
{

1
packages/ui/src/index.ts
View File

@@ -49,6 +49,7 @@ export {
} from "./Molecules/Dialog/Dialog";
export { RiskBadge } from "./Molecules/Badge/RiskBadge";
export { SeverityBadge } from "./Molecules/Badge/SeverityBadge.tsx";
export { PolicyVersionBadge } from "./Molecules/Badge/PolicyVersionBadge.tsx";
export {
ConfirmDialog,
useConfirmDialogRef,

2
packages/ui/src/theme.css
View File

@@ -206,7 +206,7 @@
--color-dialog: #151715;
/* Borders */
--color-border-solid: #2b2f2a;
--color-border-solid: rgba(239, 254, 226, 0.08);
--color-border-low: rgba(239, 254, 226, 0.08);
--color-border-mid: rgba(233, 254, 223, 0.1);
--color-border-strong: rgba(241, 255, 237, 0.25);