@arkitektbedriftene/fe-lib 0.3.12 → 0.3.13

package/src/lib/ui/components/Badge.tsx

@@ -1,42 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Badge = styled("span", {
-  flex: "0 0 auto",
-  display: "inline-flex",
-  padding: "$1 $2",
-  fontSize: "$xs",
-  fontWeight: "$medium",
-  lineHeight: "1",
-  whiteSpace: "nowrap",
-  borderRadius: "$sm",
-  overflow: "hidden",
-
-  variants: {
-    color: {
-      success: {
-        backgroundColor: "$green200",
-        color: "$green800",
-      },
-      warning: {
-        backgroundColor: "$yellow100",
-        color: "$yellow700",
-      },
-      danger: {
-        backgroundColor: "$red200",
-        color: "$red800",
-      },
-      primary: {
-        backgroundColor: "$blue200",
-        color: "$blue800",
-      },
-      secondary: {
-        backgroundColor: "$gray200",
-        color: "$gray800",
-      },
-    }
-  },
-
-  defaultVariants: {
-    color: "primary",
-  },
-});

package/src/lib/ui/components/Box.tsx

@@ -1,3 +0,0 @@
-import { styled } from "../stitches.config";
-
-export const Box = styled("div");

package/src/lib/ui/components/Button.tsx

@@ -1,195 +0,0 @@
-import { styled } from "../stitches.config";
-import { forwardRef } from "react";
-import { Spinner } from "./Spinner";
-
-const ButtonStyled = styled("button", {
-  appearance: "none",
-  margin: 0,
-  padding: 0,
-  border: "none",
-  background: "none",
-  cursor: "pointer",
-  fontFamily: "inherit",
-  textAlign: "left",
-  textDecoration: "none",
-  textIndent: 0,
-  lineHeight: 1.25,
-  display: "inline-flex",
-  justifyContent: "center",
-  alignItems: "center",
-  gap: "$2",
-  position: "relative",
-  fontWeight: "$medium",
-  borderRadius: "$sm",
-  whiteSpace: "nowrap",
-
-  transition: "background 0.2s ease-in-out",
-
-  "&:focus, &:focus-visible": {
-    outline: "none",
-  },
-
-  "&:focus-visible": {
-    boxShadow: "0 0 0 2px white, 0 0 0 4px $colors$focusRing",
-  },
-
-  "&:disabled": {
-    cursor: "not-allowed",
-  },
-
-  variants: {
-    color: {
-      primary: {
-        $$solid: "$colors$blue600",
-        $$solidHover: "$colors$blue700",
-
-        $$outline: "$colors$blue600",
-        $$outlineHover: "$colors$blue100",
-        $$outlineText: "$colors$blue600",
-
-        $$disabled: "$colors$blue200",
-      },
-      secondary: {
-        $$solid: "$colors$gray600",
-        $$solidHover: "$colors$gray700",
-
-        $$outline: "$colors$gray400",
-        $$outlineHover: "$colors$gray100",
-        $$outlineText: "$colors$gray600",
-
-        $$disabled: "$colors$gray200",
-      },
-      success: {
-        $$solid: "$colors$green600",
-        $$solidHover: "$colors$green700",
-
-        $$outline: "$colors$green600",
-        $$outlineHover: "$colors$green100",
-        $$outlineText: "$colors$green600",
-
-        $$disabled: "$colors$green200",
-      },
-      danger: {
-        $$solid: "$colors$red600",
-        $$solidHover: "$colors$red700",
-
-        $$outline: "$colors$red600",
-        $$outlineHover: "$colors$red100",
-        $$outlineText: "$colors$red600",
-
-        $$disabled: "$colors$red200",
-      },
-      warning: {
-        $$solid: "$colors$yellow600",
-        $$solidHover: "$colors$yellow700",
-
-        $$outline: "$colors$yellow400",
-        $$outlineHover: "$colors$yellow50",
-        $$outlineText: "$colors$yellow600",
-
-        $$disabled: "$colors$yellow100",
-      },
-    },
-    size: {
-      md: {
-        fontSize: "$sm",
-        padding: "$2 $4",
-        height: "2.25rem",
-      },
-      lg: {
-        fontSize: "$md",
-        padding: "$3 $6",
-        height: "2.75rem",
-      },
-    },
-    variant: {
-      primary: {
-        background: "$$solid",
-        color: "white",
-        "&:hover:enabled": {
-          backgroundColor: "$$solidHover",
-        },
-        "&:disabled": {
-          backgroundColor: "$$disabled",
-        },
-      },
-      outline: {
-        boxShadow: "inset 0 0 0 1px $$outline",
-        color: "$$outlineText",
-        "&:hover:enabled": {
-          backgroundColor: "$$outlineHover",
-        },
-        "&:disabled": {
-          boxShadow: "inset 0 0 0 1px $$disabled",
-          color: "$$disabled",
-        },
-      },
-      transparent: {
-        backgroundColor: "transparent",
-        color: "$$outlineText",
-        "&:hover:enabled": {
-          backgroundColor: "$$outlineHover",
-        },
-        "&:disabled": {
-          color: "$$disabled",
-        },
-      },
-    },
-    icon: {
-      true: {}
-    }
-  },
-
-  compoundVariants: [
-    {
-      icon: true,
-      size: "md",
-      css: {
-        padding: "$2",
-        width: "2.25rem",
-      }
-    },
-    {
-      icon: true,
-      size: "lg",
-      css: {
-        padding: "$2",
-        width: "2.75rem",
-      }
-    },
-  ],
-
-  defaultVariants: {
-    variant: "outline",
-    color: "secondary",
-    size: "md",
-  },
-});
-
-type ButtonProps = React.ComponentProps<typeof ButtonStyled> & {
-  as?: React.ElementType;
-  isLoading?: boolean;
-};
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, disabled, isLoading, variant, color, ...props }, ref) => {
-
-    if (!color && variant === "primary") {
-      color = "primary";
-    }
-
-    return (
-      <ButtonStyled
-        ref={ref}
-        type="button"
-        disabled={disabled || isLoading}
-        variant={variant}
-        color={color}
-        {...props}
-      >
-        {children}
-        {isLoading && <Spinner color="inherit" />}
-      </ButtonStyled>
-    );
-  },
-);

package/src/lib/ui/components/OverlayCard.tsx

@@ -1,50 +0,0 @@
-import { css, keyframes, styled } from "../stitches.config";
-
-// Animation
-const slideUpAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateY(0.5rem)" },
-  "100%": { opacity: 1, transform: "translateY(0)" },
-});
-
-const slideRightAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateX(-0.5rem)" },
-  "100%": { opacity: 1, transform: "translateX(0)" },
-});
-
-const slideDownAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateY(-0.5rem)" },
-  "100%": { opacity: 1, transform: "translateY(0)" },
-});
-
-const slideLeftAndFade = keyframes({
-  "0%": { opacity: 0, transform: "translateX(0.5rem)" },
-  "100%": { opacity: 1, transform: "translateX(0)" },
-});
-
-const overlayCardCss = css({
-  backgroundColor: "white",
-  boxShadow: "$overlayCard",
-  borderRadius: "$sm",
-  overflow: "hidden",
-  zIndex: "$overlayCard",
-});
-
-const overlayCardAnimationCss = css({
-  animationDuration: "400ms",
-  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
-  willChange: "transform, opacity",
-  '&[data-state="open"]': {
-    '&[data-side="top"]': { animationName: slideDownAndFade },
-    '&[data-side="right"]': { animationName: slideLeftAndFade },
-    '&[data-side="bottom"]': { animationName: slideUpAndFade },
-    '&[data-side="left"]': { animationName: slideRightAndFade },
-  },
-});
-
-export const OverlayCard = styled(
-  "div",
-  overlayCardCss,
-  overlayCardAnimationCss,
-);
-
-export type OverlayCardProps = React.ComponentProps<typeof OverlayCard>;

package/src/lib/ui/components/Popover.tsx

@@ -1,164 +0,0 @@
-import {
-  FloatingPortal,
-  type OffsetOptions,
-  type Placement,
-  autoUpdate,
-  flip,
-  offset,
-  safePolygon,
-  shift,
-  useClick,
-  useDismiss,
-  useFloating,
-  useHover,
-  useInteractions,
-  useRole,
-  useTransitionStyles,
-  type UseRoleProps,
-} from "@floating-ui/react";
-import {
-  cloneElement,
-  createContext,
-  isValidElement,
-  useContext,
-  useMemo,
-} from "react";
-import { OverlayCard, type OverlayCardProps } from "./OverlayCard";
-import { Box } from "./Box";
-
-type PopoverContextValue = {
-  getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
-  getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
-  floatingStyles: ReturnType<typeof useFloating>["floatingStyles"];
-  refs: ReturnType<typeof useFloating>["refs"];
-  isMounted: boolean;
-  transitionStyles: ReturnType<typeof useTransitionStyles>["styles"];
-};
-
-const PopoverContext = createContext<PopoverContextValue>(
-  {} as PopoverContextValue,
-);
-
-export const Popover = ({
-  children,
-  offset: offsetOptions,
-  open,
-  onOpenChange,
-  trigger = "click",
-  hoverDelay,
-  placement = "bottom",
-  role: popoverRole = "dialog",
-}: {
-  children: React.ReactNode;
-  offset?: OffsetOptions;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  trigger?: "click" | "hover";
-  hoverDelay?: number | { open: number; close: number };
-  placement?: Placement;
-  role?: UseRoleProps["role"];
-}) => {
-  const { refs, floatingStyles, context } = useFloating({
-    open,
-    onOpenChange,
-    placement,
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(offsetOptions), flip(), shift()],
-  });
-
-  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
-    initial: ({ side }) => ({
-      opacity: 0,
-      transform: {
-        top: "translateY(-0.5rem)",
-        right: "translateX(0.5rem)",
-        bottom: "translateY(0.5rem)",
-        left: "translateX(-0.5rem)",
-      }[side],
-    }),
-  });
-
-  const click = useClick(context, { enabled: trigger === "click" });
-  const hover = useHover(context, {
-    enabled: trigger === "hover",
-    delay: hoverDelay,
-    handleClose: safePolygon(),
-  });
-  const dismiss = useDismiss(context);
-  const role = useRole(context, { role: popoverRole });
-
-  const { getFloatingProps, getReferenceProps } = useInteractions([
-    click,
-    hover,
-    dismiss,
-    role,
-  ]);
-
-  const contextValue = useMemo(
-    () => ({
-      getFloatingProps,
-      getReferenceProps,
-      floatingStyles,
-      refs,
-      isMounted,
-      transitionStyles,
-    }),
-    [
-      getFloatingProps,
-      getReferenceProps,
-      isMounted,
-      refs,
-      floatingStyles,
-      transitionStyles,
-    ],
-  );
-
-  return (
-    <PopoverContext.Provider value={contextValue}>
-      {children}
-    </PopoverContext.Provider>
-  );
-};
-
-export const PopoverTrigger = ({ children }: { children: React.ReactNode }) => {
-  const { getReferenceProps, refs } = useContext(PopoverContext);
-
-  return (
-    <>
-      {isValidElement(children) &&
-        cloneElement(children as React.ReactElement, {
-          ref: refs.setReference,
-          ...getReferenceProps(),
-        })}
-    </>
-  );
-};
-
-export const PopoverContent = ({ children, overlayCardProps }: { children: React.ReactNode, overlayCardProps?: OverlayCardProps }) => {
-  const {
-    getFloatingProps,
-    isMounted,
-    refs,
-    floatingStyles,
-    transitionStyles,
-  } = useContext(PopoverContext);
-
-  if (!isMounted) {
-    return null;
-  }
-
-  return (
-    <FloatingPortal>
-      <Box
-        ref={refs.setFloating}
-        style={floatingStyles}
-        {...getFloatingProps()}
-        css={{
-          zIndex: "$overlayCard",
-        }}
-      >
-        <OverlayCard {...overlayCardProps} style={transitionStyles}>{children}</OverlayCard>
-      </Box>
-    </FloatingPortal>
-  );
-};

package/src/lib/ui/components/Spinner.tsx

@@ -1,102 +0,0 @@
-import { forwardRef } from "react";
-import { keyframes, styled } from "../stitches.config";
-
-const spinnerKeyframes = keyframes({
-  "0%": {
-    transform: "rotate(0)",
-  },
-  "100%": {
-    transform: "rotate(360deg)",
-  },
-});
-
-const spinnerCircleKeyframes = keyframes({
-  "0%": {
-    strokeDashoffset: 600,
-  },
-  "100%": {
-    strokeDashoffset: 0,
-  },
-});
-
-const Svg = styled("svg", {
-  animation: `${spinnerKeyframes} 2s linear infinite`,
-});
-
-const Circle = styled("circle", {
-  animation: `${spinnerCircleKeyframes} 1.6s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite`,
-  fill: "transparent",
-  stroke: "currentColor",
-  strokeDasharray: 300,
-  strokeDashoffset: 600,
-  strokeLinecap: "round",
-  strokeMiterlimit: 10,
-  strokeWidth: 12,
-});
-
-const SpinnerStyled = styled("div", {
-  lineHeight: 0,
-  flexShrink: 0,
-
-  variants: {
-    size: {
-      xs: {
-        width: "1rem",
-        height: "1rem",
-      },
-      sm: {
-        width: "1.25rem",
-        height: "1.25rem",
-      },
-      md: {
-        width: "1.75rem",
-        height: "1.75rem",
-      },
-      lg: {
-        width: "2.25rem",
-        height: "2.25rem",
-      },
-    },
-    color: {
-      light: {
-        color: "$gray200",
-      },
-      dark: {
-        color: "$gray800",
-      },
-      inherit: {
-        color: "inherit",
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: "sm",
-    color: "dark",
-  },
-});
-
-type SpinnerProps = React.ComponentProps<typeof SpinnerStyled>;
-
-export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
-  (props, ref) => {
-    return (
-      <SpinnerStyled
-        ref={ref}
-        {...props}
-      >
-        <Svg
-          x="0px"
-          y="0px"
-          viewBox="0 0 150 150"
-        >
-          <Circle
-            cx="75"
-            cy="75"
-            r="60"
-          />
-        </Svg>
-      </SpinnerStyled>
-    );
-  },
-);

package/src/lib/ui/components/Tooltip.tsx

@@ -1,34 +0,0 @@
-import { useState } from "react";
-import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
-
-export const Tooltip = ({ children, content }: {
-  children: React.ReactNode;
-  content: React.ReactNode
-}) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={setOpen}
-      trigger="hover"
-      placement="top"
-      offset={{ mainAxis: 8 }}
-      role="tooltip"
-    >
-      <PopoverTrigger>
-        {children}
-      </PopoverTrigger>
-      <PopoverContent overlayCardProps={{
-        css: {
-          background: "rgba(0,0,0, 0.9)",
-          color: "#fff",
-          fontSize: "$sm",
-          padding: "$1 $2"
-        }
-      }}>
-        {content}
-      </PopoverContent>
-    </Popover>
-  )
-}