@arkitektbedriftene/fe-lib 0.3.1 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkitektbedriftene/fe-lib",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.es.js",
@@ -28,6 +28,13 @@
     "./rich-text": {
       "import": "./dist/rich-text.es.js",
       "types": "./dist/rich-text.d.ts"
+    },
+    "./ui": {
+      "import": "./dist/ui.es.js",
+      "types": "./dist/ui.d.ts"
+    },
+    "./ui/ui.css": {
+      "import": "./dist/ui.css"
     }
   },
   "repository": {
@@ -51,17 +58,19 @@
     "@lexical/headless": "^0.12.0",
     "@lexical/html": "^0.12.0",
     "@lexical/link": "^0.12.0",
-    "@lexical/rich-text": "^0.12.0"
+    "@lexical/rich-text": "^0.12.0",
+    "@types/react": "*",
+    "@types/react-dom": "*"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@biomejs/biome": "^1.6.2",
     "@vitejs/plugin-react-swc": "^3.0.0",
     "typescript": "^4.9.3",
     "vite": "^4.2.0",
     "vite-plugin-dts": "^2.1.0"
   },
   "dependencies": {
+    "@stitches/react": "^1.2.8",
     "oidc-client-ts": "^2.2.2",
     "react-icons": "^4.8.0",
     "use-local-storage-state": "^18.2.1"

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

@@ -0,0 +1,55 @@
+import { styled } from "../stitches.config";
+import { forwardRef } from "react";
+
+const AlertStyled = styled("div", {
+  padding: "$3",
+  borderRadius: "$md",
+
+  variants: {
+    color: {
+      warning: {
+        background: "$yellow200",
+        color: "#000",
+      },
+      danger: {
+        background: "$red600",
+        color: "#fff",
+      },
+      info: {
+        background: "$blue200",
+        color: "#000",
+      },
+    },
+    size: {
+      sm: {
+        fontSize: "$sm",
+      },
+      md: {
+        fontSize: "$md",
+      },
+    },
+  },
+
+  defaultVariants: {
+    color: "info",
+    size: "md",
+  },
+});
+
+type AlertProps = React.ComponentProps<typeof AlertStyled> & {
+  as?: React.ElementType;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <AlertStyled
+        ref={ref}
+        role="alert"
+        {...props}
+      >
+        {children}
+      </AlertStyled>
+    );
+  },
+);

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

@@ -0,0 +1,173 @@
+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",
+        },
+      },
+    },
+  },
+
+  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/Spinner.tsx

@@ -0,0 +1,102 @@
+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/stitches.config.ts

@@ -0,0 +1,144 @@
+import { createStitches } from "@stitches/react";
+
+let zIndex = 9999;
+const createLayerBelow = () => {
+  zIndex--;
+  return zIndex;
+};
+
+// Colors from palette: https://accessiblepalette.com/?lightness=98.2,93.9,85,76.2,67,57.8,48,39,31.8,21&A52422=0,0&d6751d=0,0&E4B420=0,0&2e7641=0,0&228997=0,0&6D597A=0,0&6c8184=0,0
+
+// 900 has enough contrast on 300
+// 700 has enough contrast on 200
+// 500+ has enough contrast with white
+// 300- has enough contrast with black (or gray900)
+
+export const { styled, css, keyframes, globalCss } = createStitches({
+  theme: {
+    colors: {
+      gray50: "#F9FAFA",
+      gray100: "#EBEEEE",
+      gray200: "#CFD6D7",
+      gray300: "#B3BEC0",
+      gray400: "#97A6A8",
+      gray500: "#7C8E91",
+      gray600: "#627578",
+      gray700: "#4F5F61",
+      gray800: "#414D4F",
+      gray900: "#2C3435",
+
+      blue50: "#F7FBFB",
+      blue100: "#E3F0F2",
+      blue200: "#BADADF",
+      blue300: "#92C5CC",
+      blue400: "#67AEB8",
+      blue500: "#3C97A3",
+      blue600: "#1F7D8A",
+      blue700: "#19656F",
+      blue800: "#14525B",
+      blue900: "#0E383E",
+
+      yellow50: "#FDFAEF",
+      yellow100: "#F9EDCA",
+      yellow200: "#EFD27A",
+      yellow300: "#E5B626",
+      yellow400: "#C89E1C",
+      yellow500: "#AA8618",
+      yellow600: "#8C6E14",
+      yellow700: "#715910",
+      yellow800: "#5C490D",
+      yellow900: "#3E3109",
+
+      orange500: "#D1721C",
+
+      red50: "#FDF9F9",
+      red100: "#F7EBEB",
+      red200: "#EBCECD",
+      red300: "#DFB1B0",
+      red400: "#D39392",
+      red500: "#C67473",
+      red600: "#B85250",
+      red700: "#A92F2D",
+      red800: "#901F1E",
+      red900: "#631614",
+
+      green50: "#F8FAF9",
+      green100: "#E7F0EA",
+      green200: "#C5D9CB",
+      green300: "#A4C4AD",
+      green400: "#82AD8D",
+      green500: "#60976F",
+      green600: "#3C7F4E",
+      green700: "#296839",
+      green800: "#21552F",
+      green900: "#163920",
+
+      // Primary
+      primaryTextOnLightBg: "#194b58",
+      primaryBg: "$blue600",
+      primaryBgHover: "$blue700",
+      primaryTextOnWhite: "$blue600",
+
+      bodyGray: "$gray100",
+      hoverDarker: "hsla(214deg, 25%, 21%, 0.06)",
+      borderDarker: "hsla(214deg, 25%, 21%, 0.1)",
+      selectedDarker: "hsla(214deg, 25%, 21%, 0.06)",
+      selectedOnBodyGray: "hsl(214deg, 35%, 80%)",
+      darkGrayBg: "#1f2937",
+      border: "hsl(214deg, 25%, 80%)",
+      text: "#1f2937",
+      secondaryText: "$gray500",
+      focusRing: "hsla(214deg, 15%, 10%, 0.6)",
+    },
+    fontSizes: {
+      xs: "0.75rem", // 12px
+      sm: "0.875rem", // 14px
+      md: "1rem", // 16px
+      lg: "1.125rem", // 18px
+      xl: "1.25rem", // 20px
+      "2xl": "1.5rem", // 24px
+      "3xl": "1.875rem", // 30px
+    },
+    fontWeights: {
+      normal: "var(--ui-font-weight-normal)",
+      medium: "var(--ui-font-weight-semibold)",
+      bold: "var(--ui-font-weight-bold)",
+    },
+    space: {
+      1: "0.25rem",
+      2: "0.5rem",
+      3: "0.75rem",
+      4: "1rem",
+      6: "1.5rem",
+      8: "2rem",
+    },
+    shadows: {
+      xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+      md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+      lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+      overlayCard:
+        "0 5px 50px 0px rgb(0 0 0 / 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    },
+    radii: {
+      xs: "0.125rem",
+      sm: "0.25rem",
+      md: "0.5rem",
+      mdmd: "calc(0.5rem - 0.125rem)",
+      full: "9999px",
+    },
+    zIndices: {
+      /**
+       * By using createLayerBelow() we can order the list of layers.
+       * Layers higher up will be on top of layers lower down.
+       */
+      toast: createLayerBelow(),
+      overlayCard: createLayerBelow(),
+      modal: createLayerBelow(),
+    },
+  },
+  media: {
+    lg: "(min-width: 1200px)",
+    print: "print",
+  },
+});

package/src/lib/ui/ui.css

@@ -0,0 +1,11 @@
+:root {
+  --ui-font-family: system-ui, sans-serif;
+  --ui-font-weight-normal: 400;
+  --ui-font-weight-semibold: 500;
+  --ui-font-weight-bold: 700;
+}
+
+body {
+  font-family: var(--ui-font-family);
+  font-weight: var(--ui-font-weight-normal);
+}

package/src/lib/ui/ui.ts

@@ -0,0 +1,5 @@
+export * from './stitches.config';
+
+export * from './components/Button';
+export * from './components/Spinner';
+export * from './components/Alert';

package/vite.config.ts

@@ -5,6 +5,7 @@ import dts from "vite-plugin-dts";
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
+    cssCodeSplit: true,
     lib: {
       entry: [
         "src/lib/index.ts",
@@ -13,6 +14,8 @@ export default defineConfig({
         "src/lib/icons/icons.tsx",
         "src/lib/colors/colors.ts",
         "src/lib/rich-text/rich-text.ts",
+        "src/lib/ui/ui.ts",
+        "src/lib/ui/ui.css",
       ],
       name: "fe-lib",
       formats: ["es"],