@altinn/altinn-components 0.0.1

package/.github/workflows/ci-cd-main.yml

@@ -0,0 +1,44 @@
+on:
+    push:
+      branches:
+        - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+name: release-please
+
+jobs:
+    release-please:
+      runs-on: ubuntu-latest
+      steps:
+        - uses: googleapis/release-please-action@v4
+          id: release
+          env:
+            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          with:
+            release-type: node
+        # The logic below handles the npm publication:
+        - uses: actions/checkout@v4
+        # these if statements ensure that a publication only occurs when
+        # a new release is created:
+          if: ${{ steps.release.outputs.release_created }}
+        - uses: actions/setup-node@v4
+          with:
+            node-version-file: .node-version
+            registry-url: 'https://registry.npmjs.org'
+          if: ${{ steps.release.outputs.release_created }}
+        - name: Setup PNPM
+          uses: pnpm/action-setup@v2
+          if: ${{ steps.release.outputs.release_created }}
+          with:
+            version: '9.12.3'
+        - run: pnpm install --frozen-lockfile
+          if: ${{ steps.release.outputs.release_created }}
+        - run: pnpm build
+          if: ${{ steps.release.outputs.release_created }}
+        - run: pnpm publish
+          env:
+            NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+          if: ${{ steps.release.outputs.release_created }}

package/.github/workflows/ci-cd-pull-request.yml

@@ -0,0 +1,39 @@
+name: CI/CD Pull Request
+
+on:
+  pull_request:
+    branches: [ main ]
+    types: [opened, synchronize, reopened]
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .node-version
+          
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2
+        with:
+          version: '9.12.3'
+          
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+        
+      - name: Lint
+        run: pnpm biome check ./lib
+        
+      - name: Type check
+        run: pnpm typecheck
+        
+      - name: Build
+        run: pnpm build
+        
+      - name: Build Storybook
+        run: pnpm build-storybook

package/.node-version

@@ -0,0 +1 @@
+20.15.1

package/.storybook/main.ts

@@ -0,0 +1,22 @@
+import {StorybookConfig} from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../lib/components/**/*.stories.@(ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import "../lib/css/global.css";
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## 0.0.1 (2024-10-31)
+
+
+### Features
+
+* setup project with components: Layout, Header, Toolbar, Menu and Avatar ([f789c56](https://github.com/Altinn/altinn-components/commit/f789c5600c76339b9d1d58b92405a1a202d9b702))
+
+
+### Miscellaneous Chores
+
+* release 0.0.1 ([#8](https://github.com/Altinn/altinn-components/issues/8)) ([4a38885](https://github.com/Altinn/altinn-components/commit/4a3888565d53763307882f9fcc2cca503289c2c5))

package/README.md

@@ -0,0 +1,2 @@
+# altinn-components
+Reusable react components

package/biome.jsonc

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "defaultBranch": "main"
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "formatWithErrors": true,
+    "enabled": true,
+    "lineWidth": 120,
+    "lineEnding": "lf",
+    "ignore": [],
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "arrowParentheses": "always",
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "double",
+      "semicolons": "always",
+      "trailingCommas": "all",
+      "quoteProperties": "asNeeded",
+      "bracketSpacing": true,
+      "bracketSameLine": false
+    }
+  },
+  "css": {
+    "parser": {
+      "cssModules": true
+    },
+    "formatter": {
+      "enabled": true,
+      "indentStyle": "space",
+      "indentWidth": 2
+    },
+    "linter": {
+      "enabled": true
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "suspicious": {
+        "noArrayIndexKey": "off"
+      },
+      "recommended": true,
+      "style": {
+        "noUnusedTemplateLiteral": "off",
+        "noNonNullAssertion": "off",
+        "useTemplate": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "warn"
+      }
+    }
+  },
+  "files": {
+    "ignore": [".github", "node_modules", "dist", "build", ".storybook"]
+  }
+}

package/lib/components/Avatar/Avatar.tsx

@@ -0,0 +1,91 @@
+'use client';
+import cx from 'classnames';
+import { useState } from 'react';
+import styles from './avatar.module.css';
+import { fromStringToColor } from './color';
+
+export type AvatarType = 'company' | 'person' | 'custom';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarVariant = 'square' | 'circle';
+export type AvatarColor = 'dark' | 'light';
+
+/**
+ * Props for the Avatar component.
+ */
+export interface AvatarProps {
+  /** The name to display in the avatar. */
+  name: string;
+  /** The type of avatar. */
+  type?: AvatarType;
+  /** The size of the avatar. */
+  size?: AvatarSize;
+  /** The variant of the avatar shape. */
+  variant?: AvatarVariant;
+  /** The color theme of the avatar. */
+  color?: AvatarColor;
+  /** Additional class names to apply to the avatar. */
+  className?: string;
+  /** URL of the image to display in the avatar. */
+  imageUrl?: string;
+  /** Alt text for the image. */
+  imageUrlAlt?: string;
+  /** Whether to display an outline around the avatar. */
+  outline?: boolean;
+  /** Custom label to display inside the avatar. */
+  customLabel?: string;
+}
+
+/**
+ * Avatar component to display user or company avatars with various customization options.
+ */
+export const Avatar = ({
+  type,
+  size = 'sm',
+  variant,
+  color,
+  name = 'Avatar',
+  outline = false,
+  imageUrl,
+  imageUrlAlt,
+  customLabel,
+  className,
+}: AvatarProps): JSX.Element => {
+  const [hasImageError, setHasImageError] = useState<boolean>(false);
+
+  const defaultVariant = type === 'person' ? 'circle' : 'square';
+  const defaultColor = type === 'person' ? 'light' : 'dark';
+  const appliedVariant = variant || defaultVariant;
+  const appliedColor = color || defaultColor;
+
+  const { backgroundColor, foregroundColor } = fromStringToColor(name, appliedColor);
+  const initials = (name[0] ?? '').toUpperCase();
+  const usingImageUrl = imageUrl && !hasImageError;
+
+  const inlineStyles = !usingImageUrl
+    ? {
+        backgroundColor,
+        color: foregroundColor,
+      }
+    : undefined;
+
+  return (
+    <div
+      className={cx(styles.avatar, styles[appliedVariant], styles[size], { [styles.outline]: outline }, className)}
+      style={inlineStyles}
+      aria-hidden
+    >
+      {usingImageUrl ? (
+        <img
+          src={imageUrl}
+          className={styles.image}
+          alt={imageUrlAlt || imageUrl}
+          onError={() => {
+            setHasImageError(true);
+          }}
+        />
+      ) : (
+        <span>{customLabel || initials}</span>
+      )}
+    </div>
+  );
+};

package/lib/components/Avatar/AvatarGroup.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { AvatarGroup } from './AvatarGroup';
+
+const meta = {
+  title: 'Avatar/AvatarGroup',
+  component: AvatarGroup,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    //    layout: 'fullscreen',
+  },
+  args: {},
+} satisfies Meta<typeof AvatarGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const People: Story = {
+  args: {
+    type: 'person',
+    items: [
+      {
+        name: 'Albert Åberg',
+      },
+      {
+        name: 'Birger Meling',
+      },
+      {
+        name: 'Celine Dion',
+      },
+    ],
+  },
+};
+
+export const Companies: Story = {
+  args: {
+    type: 'company',
+    items: [
+      {
+        name: 'Albert Åberg',
+      },
+      {
+        name: 'Birger Meling',
+      },
+      {
+        name: 'Celine Dion',
+      },
+    ],
+  },
+};
+
+export const CompanyAndPerson: Story = {
+  args: {
+    items: [
+      {
+        type: 'company',
+        name: 'Albert Åberg',
+      },
+      {
+        type: 'person',
+        name: 'Birger Meling',
+      },
+    ],
+  },
+};

package/lib/components/Avatar/AvatarGroup.tsx

@@ -0,0 +1,42 @@
+import cx from 'classnames';
+import { useMemo } from 'react';
+import { Avatar, type AvatarProps, type AvatarSize, type AvatarType } from '.';
+import styles from './avatarGroup.module.css';
+
+export interface AvatarGroupProps {
+  items?: AvatarProps[];
+  maxItemsCount?: number;
+  type?: AvatarType;
+  size?: AvatarSize;
+  className?: string;
+}
+
+export const AvatarGroup = ({ items = [], maxItemsCount = 4, type, size = 'sm', className }: AvatarGroupProps) => {
+  const maxItems = useMemo(() => items.slice(0, maxItemsCount), [items, maxItemsCount]);
+
+  if (items?.length === 0) {
+    return <div className={styles.avatarGroup} />;
+  }
+
+  return (
+    <ul className={cx(styles.reset, styles.group, styles[size], className)} data-count={maxItems?.length}>
+      {maxItems.map((avatar, index) => {
+        const lastLegalAvatarReached = index === maxItemsCount - 1;
+        const customLabel = avatar.customLabel || lastLegalAvatarReached ? items.length.toString() : undefined;
+        return (
+          <li className={cx(styles.reset, styles.item)} key={avatar.name}>
+            <Avatar
+              name={avatar.name}
+              customLabel={customLabel}
+              imageUrl={avatar.imageUrl}
+              imageUrlAlt={avatar.imageUrlAlt}
+              type={avatar?.type || type}
+              size={size}
+              outline
+            />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

package/lib/components/Avatar/avatar.module.css

@@ -0,0 +1,59 @@
+.avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  --avatar-font-size-xs: 0.75rem;
+  --avatar-font-size-sm: 0.875rem;
+  --avatar-font-size-md: 1.125rem;
+  --avatar-font-size-lg: 1.25rem;
+  --avatar-font-size-xl: 1.5rem;
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.square {
+  border-radius: 5%;
+}
+
+.outline {
+  outline: 1px solid #ffffff;
+  box-sizing: border-box;
+}
+
+.xs {
+  font-size: var(--avatar-font-size-xs);
+  width: 20px;
+  height: 20px;
+}
+
+.sm {
+  font-size: var(--avatar-font-size-sm);
+  width: 24px;
+  height: 24px;
+}
+
+.md {
+  font-size: var(--avatar-font-size-md);
+  width: 30px;
+  height: 30px;
+}
+
+.lg {
+  font-size: var(--avatar-font-size-lg);
+  width: 36px;
+  height: 36px;
+}
+
+.xl {
+  font-size: var(--avatar-font-size-xl);
+  width: 44px;
+  height: 44px;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+}

package/lib/components/Avatar/avatar.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './';
+
+const meta = {
+  title: 'Avatar/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    name: 'Jane Doe',
+    type: 'person',
+    variant: 'circle',
+    color: 'light',
+    size: 'xl',
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Person: Story = {
+  args: {
+    type: 'person',
+    name: 'Jane Doe',
+    size: 'xl',
+  },
+};
+
+export const Company: Story = {
+  args: {
+    type: 'company',
+    name: 'Boligeksperten',
+    variant: 'square',
+  },
+};
+
+export const Logo: Story = {
+  args: {
+    variant: 'square',
+    imageUrl: 'https://avatars.githubusercontent.com/u/1536293?s=200&v=4',
+    size: 'xl',
+    color: 'dark',
+  },
+};

package/lib/components/Avatar/avatarGroup.module.css

@@ -0,0 +1,78 @@
+.group {
+  display: flex;
+}
+
+.reset {
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+  list-style-type: none;
+}
+
+.item {
+  position: relative;
+}
+
+.xs {
+  width: 32px;
+}
+
+.xs[data-count="2"] * + * {
+  margin-left: -8px;
+}
+
+.xs[data-count="3"] * + * {
+  margin-left: -14px;
+}
+
+.xs[data-count="4"] * + * {
+  margin-left: -16px;
+}
+
+.sm {
+  width: 42px;
+}
+
+.sm[data-count="2"] * + * {
+  margin-left: -6px;
+}
+
+.sm[data-count="3"] * + * {
+  margin-left: -15px;
+}
+
+.sm[data-count="4"] * + * {
+  margin-left: -18px;
+}
+
+.md {
+  width: 54px;
+}
+
+.md[data-count="2"] * + * {
+  margin-left: -6px;
+}
+
+.md[data-count="3"] * + * {
+  margin-left: -18px;
+}
+
+.md[data-count="4"] * + * {
+  margin-left: -22px;
+}
+
+.lg {
+  width: 66px;
+}
+
+.lg[data-count="2"] * + * {
+  margin-left: -6px;
+}
+
+.lg[data-count="3"] * + * {
+  margin-left: -21px;
+}
+
+.lg[data-count="4"] * + * {
+  margin-left: -26px;
+}

package/lib/components/Avatar/color.ts

@@ -0,0 +1,71 @@
+type RGB = { r: number; g: number; b: number };
+
+function generateHashCode(str: string): number {
+  return str.split('').reduce((hash, char) => {
+    return char.charCodeAt(0) + ((hash << 5) - hash);
+  }, 0);
+}
+
+function hashCodeToHexColor(hash: number): string {
+  return (hash & 0x00ffffff).toString(16).toUpperCase().padStart(6, '0');
+}
+
+function luminance(hexCode: string): number {
+  const { r, g, b } = hexToRgb(hexCode);
+  const [lR, lG, lB] = [r, g, b].map((v) => {
+    const normalized = v / 255;
+    return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  });
+  return lR * 0.2126 + lG * 0.7152 + lB * 0.0722;
+}
+
+function hexToRgb(hex: string): RGB {
+  const bigint = Number.parseInt(hex, 16);
+  return {
+    r: (bigint >> 16) & 255,
+    g: (bigint >> 8) & 255,
+    b: bigint & 255,
+  };
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
+}
+
+function adjustToDarkerColor(hexCode: string): string {
+  const { r, g, b } = hexToRgb(hexCode);
+  const rNew = Math.floor(r * 0.5);
+  const gNew = Math.floor(g * 0.5);
+  const bNew = Math.floor(b * 0.5);
+  return rgbToHex(rNew, gNew, bNew);
+}
+
+function adjustToLighterColor(hexCode: string): string {
+  const { r, g, b } = hexToRgb(hexCode);
+  const rNew = Math.min(255, Math.floor(r + (255 - r) * 0.5));
+  const gNew = Math.min(255, Math.floor(g + (255 - g) * 0.5));
+  const bNew = Math.min(255, Math.floor(b + (255 - b) * 0.5));
+  return rgbToHex(rNew, gNew, bNew);
+}
+
+export function fromStringToColor(
+  name: string,
+  profile: 'light' | 'dark',
+): { backgroundColor: string; foregroundColor: string } {
+  const hash = generateHashCode(name);
+  let hexColor = hashCodeToHexColor(hash);
+  const bgLuminance = luminance(hexColor);
+
+  if (profile === 'light' && bgLuminance <= 0.7) {
+    hexColor = adjustToLighterColor(hexColor);
+  }
+
+  if (profile === 'dark' && bgLuminance > 0.1) {
+    hexColor = adjustToDarkerColor(hexColor);
+  }
+
+  return {
+    backgroundColor: `#${hexColor}`,
+    foregroundColor: profile === 'light' ? '#000000' : '#ffffff',
+  };
+}

package/lib/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export * from './Avatar';
+export * from './AvatarGroup';

package/lib/components/Badge/Badge.tsx

@@ -0,0 +1,19 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './badge.module.css';
+
+interface BadgeProps {
+  label?: string | number;
+  variant?: 'neutral' | 'strong';
+  size?: 'medium' | 'small';
+  children?: ReactNode;
+}
+
+// TODO: add aria-label to the badge
+export const Badge = ({ label, variant = 'neutral', size = 'medium', children }: BadgeProps) => {
+  const classNames = cx(styles.badge, {
+    [styles.strong]: variant === 'strong',
+    [styles.small]: size === 'small',
+  });
+  return <span className={classNames}>{label || children}</span>;
+};