@cryptlex/web-components 5.1.0 → 5.2.0

package/lib/components/ui/tabs.tsx

@@ -0,0 +1,82 @@
+import {
+  Tab as AriaTab,
+  TabList as AriaTabList,
+  TabListProps as AriaTabListProps,
+  TabPanel as AriaTabPanel,
+  TabPanelProps as AriaTabPanelProps,
+  TabProps as AriaTabProps,
+  Tabs as AriaTabs,
+  TabsProps as AriaTabsProps,
+  composeRenderProps,
+} from "react-aria-components"
+
+import { cn } from "lib/utils/primitives"
+
+export function Tabs({ className, ...props }: AriaTabsProps) {
+  return (
+    <AriaTabs
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "group flex flex-col gap-2",
+          /* Orientation */
+          "data-[orientation=vertical]:flex-row",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+export function TabList<T extends object>({
+  className,
+  ...props
+}: AriaTabListProps<T>) {
+  return (
+    <AriaTabList
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "inline-flex items-center border-b text-muted-foreground",
+          /* Orientation */
+          "data-[orientation=vertical]:h-auto data-[orientation=vertical]:flex-col",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+export function Tab({ className, ...props }: AriaTabProps) {
+  return (
+    <AriaTab
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "btn btn-ghost leading-none text-accent h-input truncate inline-flex items-center px-3 body font-medium transition-all",
+          /* Selected */
+          "data-[selected]:bg-primary/20 data-[selected]:text-primary",
+          /* Orientation */
+          "group-data-[orientation=vertical]:w-full",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}
+
+export function TabPanel({ className, ...props }: AriaTabPanelProps) {
+  return (
+    <AriaTabPanel
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "ring-offset-background",
+          /* Focus Visible */
+          "focus-ring",
+          className
+        )
+      )}
+      {...props}
+    />
+  )
+}

package/lib/components/ui/timeline.tsx

@@ -0,0 +1,52 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "lib/utils/primitives";
+import type { LucideIcon } from "lucide-react";
+
+export function Timeline({ className, ...props }: React.ComponentProps<'ol'>) {
+    return <ol className={cn("grid grid-col-1 gap-icon", className)} {...props} />
+}
+
+export function TimelineItem({ className, ...props }: React.ComponentProps<'li'> & {}) {
+    return (
+        <li className={cn("grid grid-cols-[4rem_2rem_1fr] grid-rows-subgrid list-none gap-icon", className)} {...props} />
+    )
+}
+
+export const timelineIconVariants = cva(
+    `p-1 rounded-full`,
+    {
+        variants: {
+            variant: {
+                destructive: "text-destructive-foreground bg-destructive",
+                success: "text-success-foreground bg-success",
+                muted: "text-muted-foreground bg-muted",
+            },
+        },
+        defaultVariants: {
+            variant: "muted",
+        },
+    },
+);
+
+export function TimelineIcon({ icon: Icon, className, variant, ...props }: Omit<React.ComponentProps<'div'>, 'children'> & VariantProps<typeof timelineIconVariants> & {
+    icon: LucideIcon
+}) {
+    return <div {...props} className="flex flex-col items-center gap-2">
+        <div className={cn(timelineIconVariants({ variant, className }))}>
+            <Icon className="size-icon " />
+        </div>
+        <div className="h-full w-[1px]" />
+    </div>
+}
+
+export function TimelineDate({ className, date, dateFormatter, ...props }: Omit<React.ComponentProps<'time'>, 'dateTime' | 'children'> & {
+    date: Date
+    dateFormatter?: (d: Date) => string;
+}) {
+    const defaultDateDisplay = `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getFullYear()}`;
+    return <time {...props} dateTime={date.toISOString()} className={cn("font-mono leading-none text-muted", className)}>{dateFormatter ? dateFormatter(date) : defaultDateDisplay}</time>
+}
+
+export function TimelineContent({ className, ...props }: React.ComponentProps<'section'>) {
+    return <section className={cn("", className)} {...props} />;
+}

package/lib/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+import {
+	Tooltip as AriaTooltip,
+	TooltipTrigger as AriaTooltipTrigger,
+	composeRenderProps,
+	type TooltipProps as AriaTooltipProps,
+} from "react-aria-components"
+
+import { cn } from "lib/utils/primitives"
+
+const TooltipTrigger = AriaTooltipTrigger
+const Tooltip = ({ className, offset = 4, ...props }: AriaTooltipProps) => (
+	<AriaTooltip
+		offset={offset}
+		className={composeRenderProps(className, (className) =>
+			cn(
+				"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0",
+				/* Entering */
+				"data-[entering]:zoom-in-95",
+				/* Exiting */
+				"data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95",
+				/* Placement */
+				"data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",
+				className
+			)
+		)}
+		{...props}
+	/>
+)
+
+export { Tooltip, TooltipTrigger }

package/lib/tokens.scss

@@ -0,0 +1,89 @@
+/// This file is used to generate the tokens.css file in this project.
+/// Since a single variable is used to determine most swatches and the ramps formulae are repetitive, we use Sass to generate these tokens.
+@mixin generate-variables-for-hue($name, $value) {
+  --#{$name}-hue: #{$value};
+
+  --x#{$name}-1: oklch(0.99 0.01 var(--#{$name}-hue));
+  --x#{$name}-2: oklch(0.97 0.03 var(--#{$name}-hue));
+  --x#{$name}-3: oklch(0.9 0.04 var(--#{$name}-hue));
+  --x#{$name}-4: oklch(0.72 0.13 var(--#{$name}-hue));
+  --x#{$name}-5: oklch(0.67 0.13 var(--#{$name}-hue));
+  --x#{$name}-6: oklch(0.5 0.13 var(--#{$name}-hue));
+  --x#{$name}-7: oklch(0.35 0.13 var(--#{$name}-hue));
+  --x#{$name}-8: oklch(0.25 0.13 var(--#{$name}-hue));
+  --x#{$name}-9: oklch(0.2 0.09 var(--#{$name}-hue));
+  --x#{$name}-10: oklch(0.1 0.03 var(--#{$name}-hue));
+
+  --#{$name}-1: var(--x#{$name}-1);
+  --#{$name}-2: var(--x#{$name}-2);
+  --#{$name}-3: var(--x#{$name}-3);
+  --#{$name}-4: var(--x#{$name}-4);
+  --#{$name}-5: var(--x#{$name}-5);
+  --#{$name}-6: var(--x#{$name}-6);
+  --#{$name}-7: var(--x#{$name}-7);
+  --#{$name}-8: var(--x#{$name}-8);
+  --#{$name}-9: var(--x#{$name}-9);
+  --#{$name}-10: var(--x#{$name}-10);
+}
+
+/// Generates CSS variables using OKLCH for a Neutral palette.
+@mixin generate-variables-for-neutral() {
+  --neutral-hue: var(--primary-hue);
+  --neutral-s: 0.0005;
+
+  --xneutral-1: oklch(0.985 var(--neutral-s) var(--neutral-hue));
+  --xneutral-2: oklch(0.97 var(--neutral-s) var(--neutral-hue));
+  --xneutral-3: oklch(0.95 var(--neutral-s) var(--neutral-hue));
+  --xneutral-4: oklch(0.87 var(--neutral-s) var(--neutral-hue));
+  --xneutral-5: oklch(0.708 var(--neutral-s) var(--neutral-hue));
+  --xneutral-6: oklch(0.556 var(--neutral-s) var(--neutral-hue));
+  --xneutral-7: oklch(0.439 var(--neutral-s) var(--neutral-hue));
+  --xneutral-8: oklch(0.29 var(--neutral-s) var(--neutral-hue));
+  --xneutral-9: oklch(0.269 var(--neutral-s) var(--neutral-hue));
+  --xneutral-10: oklch(0.205 var(--neutral-s) var(--neutral-hue));
+
+  --neutral-1: var(--xneutral-1);
+  --neutral-2: var(--xneutral-2);
+  --neutral-3: var(--xneutral-3);
+  --neutral-4: var(--xneutral-4);
+  --neutral-5: var(--xneutral-5);
+  --neutral-6: var(--xneutral-6);
+  --neutral-7: var(--xneutral-7);
+  --neutral-8: var(--xneutral-8);
+  --neutral-9: var(--xneutral-9);
+  --neutral-10: var(--xneutral-10);
+}
+
+/// Swap Swatch 1 & Swatch 10, Swatch 2 and Swatch 9, and so on.
+@mixin generate-dark-mode($name) {
+  --#{$name}-1: var(--x#{$name}-10);
+  --#{$name}-2: var(--x#{$name}-9);
+  --#{$name}-3: var(--x#{$name}-8);
+  --#{$name}-4: var(--x#{$name}-7);
+  --#{$name}-5: var(--x#{$name}-6);
+  --#{$name}-6: var(--x#{$name}-5);
+  --#{$name}-7: var(--x#{$name}-4);
+  --#{$name}-8: var(--x#{$name}-3);
+  --#{$name}-9: var(--x#{$name}-2);
+  --#{$name}-10: var(--x#{$name}-1);
+}
+
+/*! 
+    This CSS is generated by tokens.scss, do not modify directly.
+    Instead, compile the SCSS file again to create modifications.
+*/
+:root {
+  @include generate-variables-for-hue(primary, 240);
+  @include generate-variables-for-hue(secondary, calc(var(--primary-hue) + 30));
+  @include generate-variables-for-hue(destructive, calc(var(--primary-hue) - 230));
+  @include generate-variables-for-hue(success, calc(var(--primary-hue) - 90));
+  @include generate-variables-for-neutral();
+
+  @media (prefers-color-scheme: dark) {
+    @include generate-dark-mode(primary);
+    @include generate-dark-mode(secondary);
+    @include generate-dark-mode(destructive);
+    @include generate-dark-mode(success);
+    @include generate-dark-mode(neutral);
+  }
+}

package/lib/utils/form-context.tsx

@@ -0,0 +1,7 @@
+import { createFormHookContexts } from "@tanstack/react-form";
+
+/**
+ * useFieldContext is used in custom components
+ */
+export const { fieldContext, formContext, useFieldContext } =
+	createFormHookContexts();

package/lib/utils/form-hook.tsx

@@ -0,0 +1,33 @@
+import { createFormHook, type FieldApi } from "@tanstack/react-form";
+import { TfCheckbox } from "lib/components/inputs/checkbox";
+import { TfMultiSelect } from "lib/components/inputs/multi-select";
+import { TfNumberField } from "lib/components/inputs/numberfield";
+import { TfSingleSelect } from "lib/components/inputs/select";
+import { TfTextField } from "lib/components/inputs/textfield";
+import { Button } from "lib/components/ui/button";
+import { fieldContext, formContext } from "lib/utils/form-context";
+
+export function getFieldErrorMessage(field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>): string {
+	return field?.state.meta.errors.map((e) => e?.message).join(",")
+}
+
+/** Don't put this in the same file as form-context.tsx, this causes circular dependencies. */
+
+/** TODO, lazy loading when fieldComponents are large */
+/**
+ * Builder for form logic and user interfaces
+ */
+export const { useAppForm } = createFormHook({
+	fieldComponents: {
+		TfTextField,
+		TfNumberField,
+		TfMultiSelect,
+		TfSingleSelect,
+		TfCheckbox,
+	},
+	formComponents: {
+		Button,
+	},
+	fieldContext,
+	formContext,
+});

package/lib/utils/primitives.ts

@@ -0,0 +1,68 @@
+import { clsx, type ClassValue } from "clsx";
+
+/** Classnames */
+export function cn(...inputs: ClassValue[]) {
+    return clsx(inputs);
+}
+
+/**
+ * This is the variable name representing the primary hue.
+ * Referenced in tokens.scss -> token.css
+ */
+const PRIMARY_HUE_PROPERTY = "--primary-hue";
+
+/**
+ *
+ * @returns
+ */
+export function getThemeHue() {
+    return document.documentElement.style.getPropertyValue(PRIMARY_HUE_PROPERTY);
+}
+
+/**
+ * @param hue the hue value to set in the document style
+ */
+export function setThemeHue(hue: number) {
+    document.documentElement.style.setProperty(
+        PRIMARY_HUE_PROPERTY,
+        // In this case, it must be a number.
+        hue as unknown as string,
+    );
+}
+
+const ACCESS_TOKEN = "AT";
+const REFRESH_TOKEN = "RT";
+export function logout() {
+    if (typeof window !== "undefined" && window.localStorage) {
+        try {
+            localStorage.removeItem(REFRESH_TOKEN);
+            localStorage.removeItem(ACCESS_TOKEN);
+            window.location.replace("/auth/login");
+        } catch (error) {
+            console.error("Logout failed:", error);
+        }
+    }
+}
+
+export type JwtDecode = {
+    aud: string;
+    email: string;
+    exp: number;
+    iat: number;
+    jti: string;
+    region: string;
+    role: string;
+    role_type: string;
+    scope: string[];
+    sub: string;
+    teat: number;
+    tenantid: string;
+    token_usage: string;
+    sadmin?: string;
+};
+
+export type CtxPortals =
+    | "customer-portal"
+    | "system-portal"
+    | "reseller-portal"
+    | "admin-portal";

package/lib/utils/resource-names.tsx

@@ -0,0 +1,245 @@
+import type { CtxPortals } from "lib/utils/primitives";
+import { createContext, use } from "react";
+
+/**
+ *
+ * @param input camelCase
+ * @returns title case for the camelCase string
+ */
+export function convertToTitleCase(input: string): string {
+    return input
+        .replace(/([A-Z])/g, " $1") // Insert space before capital letters
+        .trim() // Remove any leading/trailing spaces
+        .split(" ") // Split into words
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize each word
+        .join(" "); // Join back into a single string
+}
+
+export function pluralizeTimes(resourceName: string, count: number) {
+    if (count > 1) {
+        if (/y$/.test(resourceName)) {
+            if (resourceName === "Day") return "Days";
+            return resourceName.replace(/y$/, "ies");
+        }
+        return resourceName.concat("s");
+    }
+    return resourceName;
+}
+
+/**
+ * Converts a string from 'camelCase' to 'Title Case'
+ * @param input String to convert to `Title Case`
+ */
+export function convertCamelCaseToTitleCase(input: string) {
+    if (input) {
+        const spacedString = input.replace(/([A-Z])/g, " $1");
+        return spacedString
+            .charAt(0)
+            .toUpperCase()
+            .concat(spacedString.slice(1))
+            .replace(/\.[a-z]/, (substr: string) => {
+                return substr.replace(".", " ").toUpperCase();
+            });
+    }
+    return input;
+}
+
+// Display names specific to customer and reseller portal
+const OTHER_PORTALS_DISPLAY_NAME: Record<string, string> = {
+    "product.displayName": "Product",
+};
+
+/** Resource Name should ALWAYS be in singular form */
+export const RESOURCE_NAMES = [
+    "access-token",
+    "account",
+    "activation",
+    "activation-log",
+    "admin-role",
+    "audit-log",
+    "automated-email",
+    "automated-email-event-log",
+    "card",
+    "feature-flag",
+    "invoice",
+    "license",
+    "license-template",
+    "maintenance-policy",
+    "organization",
+    "plan",
+    "product",
+    "product-version",
+    "profile",
+    "release",
+    "release-channel",
+    "release-file",
+    "release-platform",
+    "report",
+    "role",
+    "role-claim",
+    "saml-configuration",
+    "segment",
+    "sending-domain",
+    "setting",
+    "tag",
+    "team-member",
+    "trial",
+    "trial-policy",
+    "user",
+    "user-group",
+    "webhook",
+    "webhook-event-log",
+    "webhook-trigger",
+    "reseller",
+    "oidc-configuration",
+    "organization-claim",
+    "reseller-claim",
+] as const;
+export type ResourceName = (typeof RESOURCE_NAMES)[number];
+export const RESOURCE_DEFINITIONS: Record<ResourceName, string> = {
+    account: "Your organization account.",
+    product: "Products are the software products you want to license",
+    license:
+        "Licenses represent a purchase of your software. These can be linked to customers, and the license key is required to use the product.",
+    "access-token": "Access Tokens are used to authenticate your API requests.",
+    activation:
+        "Activations, also known as devices/machines/seats are the devices consuming licenses.",
+    "activation-log":
+        "Activation Log is a log entry of activation/deactivation of a particular license.",
+    trial:
+        "Trial/Trial Activation is a device that has activated a trial of your product.",
+    "audit-log": "Audit logs contain all the changes made to your account.",
+    "automated-email":
+        "Automated Email allow you to send marketing emails based on events on the linked product.",
+    "automated-email-event-log":
+        "Automated email event log is the log of all the automated email events for your product.",
+    card: "The payment card for your account.",
+    "feature-flag":
+        "Feature flags define features that make up tiers for your products.",
+    invoice: "",
+    "license-template":
+        "License templates are a blueprint for the licenses you create for your customers and prevent repetition when creating licenses.",
+    "maintenance-policy":
+        "Maintenance policies represent support contracts and can be linked to licenses.",
+    plan: "",
+    "product-version":
+        "Product Versions are sets of Feature Flags that define the tiers of your products.",
+    "release-channel": "Release channel is the release channel for your product.",
+    "release-file": "Release files are files within your created releases.",
+    "release-platform":
+        'Release Platforms differentiate the target platform for your release. Common platforms include "Windows", "macOS", and "Linux".',
+    release:
+        "Releases help you to manage different versions of your app, and secure distribute it to licensed users.",
+    report: "Analytics data for your account",
+    "role-claim": "",
+    role: "Roles define permissions for your team.",
+    "saml-configuration": "",
+    segment: "Sets of filters that can be saved to filter resources.",
+    "trial-policy":
+        "Trial policies are templates for creating trials for your products.",
+    "webhook-event-log":
+        "Webhook Event Logs are logs of events that have occured on webhooks.",
+    "webhook-trigger": "",
+    webhook:
+        "Webhooks are HTTP callbacks which are triggered by specific events.",
+    organization: "",
+    profile: "",
+    setting: "",
+    tag: "Tags allow you to manage your licenses and customers on the dashboard.",
+    "team-member": "Team members can access the account based on their roles.",
+    user: "A user refers to your customer whom you want to license your product.",
+    "sending-domain":
+        "Allows Cryptlex to send emails on your behalf using your From Email address",
+    "admin-role": "Roles that have type admin",
+    "user-group": "Groups of users that you can assign licenses to.",
+    reseller:
+        "Resellers allow you to delegate user management to third parties or partners",
+    "oidc-configuration": "",
+    "organization-claim": "",
+    "reseller-claim": "",
+};
+
+const RESOURCE_DISPLAY_NAMES: Record<string, string> = {
+    id: "ID",
+    createdAt: "Creation Date",
+    scopes: "Permissions",
+    updatedAt: "Last Updated",
+    expiresAt: "Expiration Date",
+    lastSeenAt: "Last Seen",
+    os: "OS",
+    osVersion: "OS Version",
+    key: "License Key",
+    vmName: "VM Name",
+    container: "Container",
+    allowedIpRange: "Allowed IP Range",
+    allowedIpRanges: "Allowed IP Ranges",
+    allowedIpAddresses: "Allowed IP Addresses",
+    disallowedIpAddresses: "Disallowed IP Addresses",
+    allowVmActivation: "Allow VM Activation",
+    disableGeoLocation: "Disable Geolocation",
+    "user.id": "User ID",
+    userId: "User",
+    productId: "Product",
+    downloads: "Total Downloads",
+    claims: "Permissions",
+    googleSsoEnabled: "Google Login Enabled",
+    lastAttemptedAt: "Last Attempt Date",
+    url: "URL",
+    "trialPolicy.name": "Trial Policy Name",
+    "licensePolicy.name": "License Template Name",
+    licensePolicy: "License Template",
+    eventLog: "Audit Log",
+    cc: "CC Recepients",
+    bcc: "BCC Recepients",
+    ipAddress: "IP Address",
+    resellerId: "Reseller",
+    productVersionId: "Product Version",
+    releaseId: "Release",
+    maintenancePolicyId: "Maintenance Policy",
+    webhookId: "Webhook",
+    automatedEmailId: "Automated Email",
+    "location.countryName": "Country",
+    "location.ipAddress": "IP Address",
+    "location.countryCode": "Country",
+    organizationId: "Organization",
+    "address.country": "Country",
+    "address.addressLine1": "Address Line 1",
+    "address.addressLine2": "Address Line 2",
+    responseStatusCode: "HTTP Status Code",
+    resourceId: "Resource ID",
+    Sso: "SAML SSO 2.0",
+    "reseller.name": "Reseller",
+    sendingDomain: "Email Sending Domain",
+};
+
+function getResourceDisplayName(
+    resourceName: string,
+    portal: CtxPortals,
+) {
+    if (portal !== "admin-portal" && resourceName in OTHER_PORTALS_DISPLAY_NAME) {
+        return OTHER_PORTALS_DISPLAY_NAME[resourceName];
+    } else if (resourceName in RESOURCE_DISPLAY_NAMES) {
+        return RESOURCE_DISPLAY_NAMES[resourceName];
+    } else {
+        return convertCamelCaseToTitleCase(resourceName);
+    }
+}
+
+const ProjectContext = createContext<CtxPortals>('admin-portal');
+
+export function ProjectProvider({ projectName, children }: { projectName: CtxPortals; children: React.ReactNode; }) {
+    return (
+        <ProjectContext.Provider value={projectName}>
+            {children}
+        </ProjectContext.Provider>
+    );
+}
+
+export function useProjectName(): CtxPortals {
+    return use(ProjectContext);
+}
+
+export function useResourceFormatter(): (resourceName: string) => string {
+    const portal = useProjectName();
+    return (resourceName: string) => getResourceDisplayName(resourceName, portal);
+}

package/lib/utils/use-mobile.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = useState<boolean | undefined>(
+		undefined,
+	);
+
+	useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+
+	return !!isMobile;
+}