@cryptlex/web-components 5.2.0 → 5.3.0-alpha01

package/lib/components/ui/tabs.tsx

@@ -1,82 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,89 +0,0 @@
-/// 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

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

package/lib/utils/form-hook.tsx

@@ -1,33 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,245 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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;
-}