@arkitektbedriftene/fe-lib 0.3.11 → 0.3.13

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>
-  )
-}

package/src/lib/ui/stitches.config.ts

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

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

@@ -1,9 +0,0 @@
-export * from './stitches.config';
-
-export * from './components/Button';
-export * from './components/Spinner';
-export * from './components/Alert';
-export * from './components/OverlayCard';
-export * from './components/Popover';
-export * from './components/Box';
-export * from './components/Tooltip';

package/src/main.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
-
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,45 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import dts from "vite-plugin-dts";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  build: {
-    cssCodeSplit: true,
-    lib: {
-      entry: [
-        "src/lib/index.ts",
-        "src/lib/oidc/oidc.tsx",
-        "src/lib/hooks/hooks.ts",
-        "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"],
-      fileName: (format, entryname) => `${entryname}.${format}.js`,
-    },
-    rollupOptions: {
-      external: [
-        "react",
-        "react-dom",
-        "lexical",
-        /^@lexical\/.*/,
-      ],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-        },
-      },
-    },
-  },
-  plugins: [
-    react(),
-    dts({
-      insertTypesEntry: true,
-    }),
-  ],
-});