@arkitektbedriftene/fe-lib 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkitektbedriftene/fe-lib",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.es.js",
@@ -54,6 +54,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "@floating-ui/react": "^0.26.0",
     "lexical": "^0.12.0",
     "@lexical/headless": "^0.12.0",
     "@lexical/html": "^0.12.0",

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

@@ -9,15 +9,23 @@ const AlertStyled = styled("div", {
     color: {
       warning: {
         background: "$yellow200",
-        color: "#000",
+        border: "1px solid $yellow400",
+        color: "$yellow900",
       },
       danger: {
-        background: "$red600",
-        color: "#fff",
+        background: "$red200",
+        border: "1px solid $red400",
+        color: "$red900",
       },
       info: {
         background: "$blue200",
-        color: "#000",
+        border: "1px solid $blue400",
+        color: "$blue900",
+      },
+      success: {
+        background: "$green200",
+        border: "1px solid $green400",
+        color: "$green900",
       },
     },
     size: {

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

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

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

@@ -135,8 +135,30 @@ const ButtonStyled = styled("button", {
         },
       },
     },
+    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",

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

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

@@ -0,0 +1,164 @@
+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/Tooltip.tsx

@@ -0,0 +1,34 @@
+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>
+  )
+}

package/src/lib/ui/ui.ts

@@ -2,4 +2,8 @@ export * from './stitches.config';
 
 export * from './components/Button';
 export * from './components/Spinner';
-export * from './components/Alert';
+export * from './components/Alert';
+export * from './components/OverlayCard';
+export * from './components/Popover';
+export * from './components/Box';
+export * from './components/Tooltip';