@studiocubics/components 0.0.1 → 0.0.2

package/src/Display/List/List.tsx

@@ -1,298 +0,0 @@
-"use client";
-
-import {
-  type ComponentProps,
-  createContext,
-  type ElementType,
-  type ReactNode,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import styles from "./List.module.css";
-import { cn, mergeRefs } from "@studiocubics/utils";
-import {
-  eventWithRipple,
-  useRipple,
-  type UseRippleProps,
-} from "../../Misc/_index";
-import { useDisclosure } from "@studiocubics/hooks";
-import { GlassCard, type GlassCardProps } from "../../Cards/_index";
-import type { SetState } from "@studiocubics/types";
-
-interface ListContextProps {
-  activeListItem: HTMLLIElement | null;
-  setActiveListItem: SetState<HTMLLIElement | null>;
-}
-export type ListProps = {
-  ordered?: boolean;
-  className?: string;
-  secondary?: boolean;
-  renderMarker?: boolean;
-
-  slotProps?: {
-    marker?: GlassCardProps;
-  };
-} & (
-  | {
-      listData?: ListItemProps[];
-      children?: undefined;
-      listItemProps?: ListItemProps;
-    }
-  | {
-      children?: ReactNode;
-      listData?: undefined;
-      listItemProps?: undefined;
-    }
-);
-
-const ListContext = createContext<ListContextProps | null>(null);
-
-export function useList() {
-  const c = useContext(ListContext);
-  if (!c) throw new Error("Components must be wrapped in <List/>");
-  return c;
-}
-
-export function List(props: ListProps) {
-  const {
-    children,
-    ordered = false,
-    secondary = false,
-    listData = [],
-    slotProps = {},
-    className,
-    renderMarker = true,
-    listItemProps = {},
-  } = props;
-  const [activeListItem, setActiveListItem] =
-    useState<ListContextProps["activeListItem"]>(null);
-  const markerRef = useRef<HTMLDivElement>(null);
-  const rootRef = useRef<HTMLOListElement>(null);
-
-  const rootClass = cn(
-    styles.root,
-    className,
-    secondary ? styles.secondary : "",
-  );
-  const body = listData.length
-    ? listData.map((ld, i) => <ListItem key={i} {...listItemProps} {...ld} />)
-    : children;
-
-  const marker = renderMarker ? (
-    <GlassCard
-      {...slotProps.marker}
-      ref={markerRef}
-      className={cn(styles.marker, slotProps.marker?.className)}
-    />
-  ) : null;
-  const Component = ordered ? "ol" : "ul";
-
-  useEffect(() => {
-    if (!rootRef.current || !markerRef.current || !activeListItem) return;
-
-    const updateMarkerPosition = () => {
-      if (!rootRef.current || !markerRef.current || !activeListItem) return;
-
-      const marker = markerRef.current;
-      const tabRect = activeListItem.getBoundingClientRect();
-      const rootRect = rootRef.current.getBoundingClientRect();
-
-      // Account for scroll offset
-      const scrollLeft = rootRef.current.scrollLeft;
-      const scrollTop = rootRef.current.scrollTop;
-
-      marker.style.display = "block";
-      marker.style.width = `${tabRect.width}px`;
-      marker.style.height = `${tabRect.height}px`;
-      marker.style.left = `${tabRect.left - rootRect.left + scrollLeft}px`;
-      marker.style.top = `${tabRect.top - rootRect.top + scrollTop}px`;
-    };
-
-    updateMarkerPosition();
-
-    const container = rootRef.current;
-
-    // Update marker position when container resizes
-    const resizeObserver = new ResizeObserver(updateMarkerPosition);
-    resizeObserver.observe(container);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [activeListItem]);
-  return (
-    <ListContext.Provider value={{ activeListItem, setActiveListItem }}>
-      <Component ref={rootRef} className={rootClass}>
-        {body}
-        {marker}
-      </Component>
-    </ListContext.Provider>
-  );
-}
-
-export interface ListItemProps extends ComponentProps<"li"> {
-  startIcon?: ReactNode;
-  endIcon?: ReactNode;
-  dropDownIcon?: ReactNode;
-  selected?: boolean;
-  shortened?: boolean;
-  shortenedIcon?: "start" | "end";
-  href?: ComponentProps<"a">["href"];
-  disabled?: boolean;
-  color?: "primary" | "secondary" | "error";
-  slotProps?: {
-    ripple?: UseRippleProps;
-    content?: ComponentProps<"span">;
-    startIcon?: ComponentProps<"span">;
-    endIcon?: ComponentProps<"span">;
-    dropDownIcon?: ComponentProps<"span">;
-    linkComponent?: ComponentProps<"a">;
-  };
-  childNodes?: Array<ListItemProps>;
-  LinkComponent?: ElementType<ComponentProps<any>>;
-}
-function ChevronDown() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="lucide lucide-chevron-down-icon lucide-chevron-down"
-    >
-      <path d="m6 9 6 6 6-6" />
-    </svg>
-  );
-}
-// Create the base component with forwardRef
-export function ListItem(props: ListItemProps) {
-  const {
-    className,
-    children,
-    onTouchStart,
-    onClick,
-    shortened = false,
-    shortenedIcon = "start",
-    selected = false,
-    dropDownIcon = <ChevronDown />,
-    color,
-    startIcon,
-    endIcon,
-    disabled,
-    childNodes = [],
-    href,
-    LinkComponent = "a",
-    slotProps: _slotProps,
-    ref,
-    ...restProps
-  } = props;
-  const slotProps: NonNullable<ListItemProps["slotProps"]> = _slotProps ?? {};
-  const { setActiveListItem } = useList();
-  const listItemRef = useRef<HTMLLIElement>(null);
-
-  const { rippleElements, createRipple } = useRipple(slotProps.ripple);
-  const { open, handleToggle } = useDisclosure();
-
-  const clickable =
-    !disabled && (!!href || !!onClick || (!shortened && !!childNodes.length));
-
-  const componentProps = {
-    className: cn(
-      className,
-      styles.listItem,
-      shortened ? styles.shortened : "",
-      selected ? styles.selected : "",
-      clickable ? styles.clickable : "",
-      disabled ? styles.disabled : "",
-    ),
-    onTouchStart: disabled
-      ? undefined
-      : eventWithRipple(createRipple, onTouchStart, handleToggle),
-    onClick: disabled
-      ? undefined
-      : eventWithRipple(createRipple, onClick, handleToggle),
-    "data-color": color,
-    ref: mergeRefs(ref, listItemRef),
-    ...restProps,
-  };
-
-  const body = (
-    <>
-      {clickable && rippleElements}
-      {startIcon && (
-        <span
-          {...slotProps.startIcon}
-          className={cn(
-            styles.iconContainer,
-            shortenedIcon == "start" ? styles.primaryIcon : "",
-            slotProps.startIcon?.className,
-          )}
-        >
-          {startIcon}
-        </span>
-      )}
-      <span
-        {...slotProps.content}
-        className={cn(styles.content, slotProps.content?.className)}
-      >
-        {children}
-      </span>
-      {endIcon && (
-        <span
-          {...slotProps.endIcon}
-          className={cn(
-            styles.iconContainer,
-            shortenedIcon == "end" ? styles.primaryIcon : "",
-            slotProps.endIcon?.className,
-          )}
-        >
-          {endIcon}
-        </span>
-      )}
-      {!!childNodes.length && (
-        <span
-          {...slotProps.dropDownIcon}
-          className={cn(
-            styles.iconContainer,
-            styles.dropDownIcon,
-            slotProps.dropDownIcon?.className,
-            open ? styles.openSublist : "",
-          )}
-        >
-          {dropDownIcon}
-        </span>
-      )}
-    </>
-  );
-
-  useEffect(() => {
-    if (!listItemRef.current) return;
-    if (selected) setActiveListItem(listItemRef.current);
-  }, [selected]);
-
-  return (
-    <>
-      {href ? (
-        <LinkComponent href={href} disabled={disabled} {...componentProps}>
-          {body}
-        </LinkComponent>
-      ) : (
-        <li {...componentProps}>{body}</li>
-      )}
-      {!!childNodes.length && !shortened && open && (
-        <List secondary>
-          {childNodes.map((c, i) => (
-            <ListItem key={i} {...c} />
-          ))}
-        </List>
-      )}
-    </>
-  );
-}

package/src/Display/PasswordStrength/PasswordStrength.module.css

@@ -1,45 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-gap);
-  flex-wrap: wrap;
-  padding-inline: var(--spacing-gap);
-  scale: 1 0;
-  transition: scale var(--transition-time) var(--transition-tf);
-}
-.title {
-  font-size: 0.5rem;
-  flex: 0 0 auto;
-}
-.strengthBars {
-  flex: 1 1 50%;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-gap);
-}
-.bar {
-  transition: all var(--transition-time) var(--transition-tf);
-  background-color: currentColor;
-  scale: 0 0;
-  flex: 1 1 25%;
-  transform-origin: top left;
-  border-radius: 999px;
-}
-.weak {
-  height: 3px;
-  opacity: 0.3;
-}
-.medium {
-  height: 5px;
-  opacity: 0.5;
-}
-.good {
-  height: 7px;
-  opacity: 0.8;
-}
-.strong {
-  height: 9px;
-}
-.show {
-  scale: 1 1;
-}

package/src/Display/PasswordStrength/PasswordStrength.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import styles from "./PasswordStrength.module.css";
-import { cn, remap } from "@studiocubics/utils";
-import type { ComponentProps } from "react";
-
-export const STRENGTH_MESSAGES = ["", "Weak", "Medium", "Good", "Strong"];
-
-const Bar = ({ className, ...rest }: ComponentProps<"span">) => {
-  return <span className={cn(styles.bar, className)} {...rest} />;
-};
-
-export function PasswordStrength({ strength }: { strength?: number | null }) {
-  const remappedStrength = strength ? remap(strength, [1, 5], [1, 4]) : 0;
-  const strengthMsg = STRENGTH_MESSAGES[remappedStrength];
-  return (
-    <div className={cn(styles.root, !!strength ? styles.show : "")}>
-      <p className={cn(styles.title)}>{strengthMsg}</p>
-      <div className={cn(styles.strengthBars)}>
-        <Bar
-          className={cn(styles.weak, remappedStrength >= 1 ? styles.show : "")}
-        />
-        <Bar
-          className={cn(
-            styles.medium,
-            remappedStrength >= 2 ? styles.show : "",
-          )}
-        />
-        <Bar
-          className={cn(styles.good, remappedStrength >= 3 ? styles.show : "")}
-        />
-        <Bar
-          className={cn(
-            styles.strong,
-            remappedStrength == 4 ? styles.show : "",
-          )}
-        />
-      </div>
-    </div>
-  );
-}

package/src/Display/PasswordStrength/usePasswordStrength.tsx

@@ -1,77 +0,0 @@
-import { useEffect, useState } from "react";
-
-export const PASSWORD_REGEX = {
-  ASCII_NO_SPACE: { ex: /^[!-~]+$/, score: 0.5 },
-  LOWERCASE: { ex: /[a-z]/, score: 0.5 },
-  UPPERCASE: { ex: /[A-Z]/, score: 1 },
-  DIGIT: { ex: /\d/, score: 1 },
-  SPECIAL: { ex: /[!@#$%^&*()_\-+=\[\]{};:'",.<>/?\\|`~]/, score: 1 },
-  NO_TRIPLE_REPEAT: { ex: /^(?!.*(.)\1\1).*$/, score: 1 },
-} as const;
-
-export type PasswordTest = keyof typeof PASSWORD_REGEX;
-
-export const ALL_PASSWORD_TESTS: PasswordTest[] = [
-  "ASCII_NO_SPACE",
-  "DIGIT",
-  "LOWERCASE",
-  "NO_TRIPLE_REPEAT",
-  "SPECIAL",
-  "UPPERCASE",
-];
-export interface PasswordStrengthProps {
-  password?: string;
-  requiredTests?: PasswordTest[];
-  disableStrengthMeter?: boolean;
-  /**
-   * Minimum length of the password when it should start checking,
-   * before reaching the minimum length the strength will always be 1
-   */
-  minLength?: number;
-}
-
-export function usePasswordStrength({
-  password,
-  requiredTests = [],
-  disableStrengthMeter = true,
-  minLength = 8,
-}: PasswordStrengthProps) {
-  const [strength, setStrength] = useState<number | null>(null);
-  const [testsPassed, setPassed] = useState<PasswordTest[]>([]);
-
-  useEffect(() => {
-    if (!password) {
-      setStrength(null);
-      setPassed([]);
-      return;
-    }
-
-    const results: PasswordTest[] = [];
-
-    for (const [key, regex] of Object.entries(PASSWORD_REGEX)) {
-      if (regex.ex.test(password)) results.push(key as PasswordTest);
-    }
-
-    setPassed(results);
-
-    // REQUIRED TESTS GATE
-    const allRequiredPassed = results.every((test) =>
-      requiredTests.includes(test),
-    );
-
-    if (!allRequiredPassed || password.length < minLength) {
-      setStrength(1); // Weak
-      return;
-    }
-
-    // Otherwise score by total passed tests
-    const totalScore = Object.entries(PASSWORD_REGEX).reduce(
-      (acc, [key, value]) =>
-        results.includes(key as PasswordTest) ? acc + value.score : acc,
-      0,
-    );
-    setStrength(totalScore);
-  }, [password, requiredTests]);
-
-  if (!disableStrengthMeter) return { strength, testsPassed };
-}

package/src/Display/Skeleton/Skeleton.module.css

@@ -1,54 +0,0 @@
-.root {
-  --skeleton-color-main: var(--color-surface);
-  --skeleton-color-wave: color-mix(
-    in srgb,
-    var(--color-surface) 80%,
-    var(--color-primary) 10%
-  );
-
-  background-image: linear-gradient(
-    to right,
-    var(--skeleton-color-main) 0%,
-    var(--skeleton-color-wave) 50%,
-    var(--skeleton-color-main) 100%
-  );
-  background-size: 1000px 1000px;
-  background-repeat: repeat-x;
-  animation: throb 2s var(--transition-tf) infinite;
-  /* animation: wave 0.8s linear infinite forwards; */
-  border-radius: var(--shape-br-md);
-}
-.large {
-  font-size: 2rem;
-}
-.medium {
-  font-size: 1.2rem;
-}
-.small {
-  font-size: 0.75rem;
-}
-
-@keyframes wave {
-  0% {
-    background-position: 0% 0%;
-  }
-
-  100% {
-    background-position: -200% 0%;
-  }
-}
-@keyframes throb {
-  0% {
-    background: var(--color-surface);
-  }
-  50% {
-    background: color-mix(
-      in srgb,
-      var(--color-primary) 10%,
-      var(--color-surface) 100%
-    );
-  }
-  100% {
-    background: var(--color-surface);
-  }
-}

package/src/Display/Skeleton/Skeleton.tsx

@@ -1,28 +0,0 @@
-import type { ComponentProps, CSSProperties } from "react";
-import styles from "./Skeleton.module.css";
-import { cn } from "@studiocubics/utils";
-export interface SkeletonProps extends ComponentProps<"span"> {
-  type?: "text" | "card";
-  size?: "small" | "medium" | "large";
-  width?: CSSProperties["width"];
-  height?: CSSProperties["height"];
-}
-
-export function Skeleton(props: SkeletonProps) {
-  const {
-    className,
-    style,
-    type = "text",
-    size = "medium",
-    width = "100%",
-    height = "1.5em",
-    ...rest
-  } = props;
-  return (
-    <span
-      className={cn(className, styles.root, styles[size], styles[type])}
-      style={{ width, height, ...style }}
-      {...rest}
-    ></span>
-  );
-}

package/src/Display/Toast/Toaster.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { subscribe, dismiss, type Toast } from "./toast";
-
-export function Toaster() {
-  const [toasts, setToasts] = useState<Toast[]>([]);
-
-  useEffect(() => {
-    return () => {
-      subscribe(setToasts);
-    };
-  }, []);
-
-  if (toasts.length === 0) return null;
-
-  return (
-    <div style={containerStyle}>
-      {toasts.map((t) => (
-        <div key={t.id} style={toastStyle}>
-          <span>{t.message}</span>
-          <button onClick={() => dismiss(t.id)} style={closeStyle}>
-            ×
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-const containerStyle: React.CSSProperties = {
-  position: "fixed",
-  top: 16,
-  right: 16,
-  display: "flex",
-  flexDirection: "column",
-  gap: 8,
-  zIndex: 1000,
-};
-
-const toastStyle: React.CSSProperties = {
-  background: "#111",
-  color: "#fff",
-  padding: "12px 16px",
-  borderRadius: 6,
-  minWidth: 200,
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-};
-
-const closeStyle: React.CSSProperties = {
-  background: "transparent",
-  border: "none",
-  color: "#fff",
-  fontSize: 16,
-  cursor: "pointer",
-};

package/src/Display/Toast/toast.ts

@@ -1,44 +0,0 @@
-export type Toast = {
-  id: string;
-  message: string;
-  duration?: number;
-};
-
-type Listener = (toasts: Toast[]) => void;
-
-let toasts: Toast[] = [];
-const listeners = new Set<Listener>();
-
-function emit() {
-  listeners.forEach((l) => l(toasts));
-}
-
-export function subscribe(listener: Listener) {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
-}
-
-export function toast(message: string, options?: { duration?: number }) {
-  const id = crypto.randomUUID();
-
-  const t: Required<Toast> = {
-    id,
-    message,
-    duration: options?.duration ?? 3000,
-  };
-
-  toasts = [...toasts, t];
-  emit();
-
-  // Its a toast not a lecture!
-  if (t.duration <= 20000) {
-    setTimeout(() => {
-      dismiss(id);
-    }, t.duration);
-  }
-}
-
-export function dismiss(id: string) {
-  toasts = toasts.filter((t) => t.id !== id);
-  emit();
-}