feat: add EmptyState component with styles and stories

apps/isa-app/stories/ui/empty-state/empty-state.stories.ts

@@ -0,0 +1,44 @@
+import { argsToTemplate, type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
+import { EmptyStateComponent } from '@isa/ui/empty-state';
+import { UiButtonComponent } from '@isa/ui/buttons';
+
+type EmptyStateComponentInputs = {
+  title: string;
+  description: string;
+};
+
+const meta: Meta<EmptyStateComponentInputs> = {
+  component: EmptyStateComponent,
+  title: 'ui/empty-state/EmptyState',
+  decorators: [
+    moduleMetadata({
+      imports: [UiButtonComponent],
+    }),
+  ],
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ui-empty-state ${argsToTemplate(args)}>
+      <ui-button color="secondary">Action A</ui-button>
+      <ui-button>Action B</ui-button>
+    </ui-empty-state>`,
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<EmptyStateComponent>;
+
+export const Default: Story = {
+  args: {
+    title: 'Keine Suchergebnisse',
+    description: 'Suchen Sie nach einer Rechnungsnummer oder Kundennamen.',
+  },
+};

libs/ui/empty-state/README.md

@@ -0,0 +1,7 @@
+# ui-empty-state
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-empty-state` to execute the unit tests.

libs/ui/empty-state/eslint.config.mjs

@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'ui',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'ui',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/ui/empty-state/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'ui-empty-state',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/ui/empty-state',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/ui/empty-state/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "ui-empty-state",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/empty-state/src",
+  "prefix": "lib",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/ui/empty-state/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/ui/empty-state/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/empty-state.component';

libs/ui/empty-state/src/lib/empty-state.component.html

@@ -0,0 +1,113 @@
+<div class="ui-empty-state-circle">
+  <svg
+    class="ui-empty-state-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    width="114"
+    height="102"
+    viewBox="0 0 114 102"
+    fill="none"
+  >
+    <path
+      d="M75.5 43.794V30.1846L61.9243 15H27.7699C23.2025 14.9998 19.5 18.5625 19.5 22.9574V82.0424C19.5 86.4373 23.2025 90 27.7699 90H67.2301C71.3894 90 74.4181 87.8467 75 84"
+      stroke="#CED4DA"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M33.5 49H59.5"
+      stroke="#CED4DA"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M33.5 59H53.5"
+      stroke="#CED4DA"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M33.5 41H63.5"
+      stroke="#CED4DA"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M33.5 32H50.5"
+      stroke="#CED4DA"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M61.5 16V30H74.5"
+      stroke="#CED4DA"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M53.8139 70H33.5V80H61.5"
+      stroke="#CED4DA"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M105.003 94.095C103.549 95.6424 101.19 95.6437 99.734 94.098L89.5 84.6013L94.7629 79L105 88.5C106.454 90.0444 106.455 92.5488 105.003 94.095Z"
+      stroke="#6C757D"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M88 78L91.5 81"
+      stroke="#6C757D"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M78.5 59L68.5 70"
+      stroke="#6C757D"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M78.5 70L68.5 59"
+      stroke="#6C757D"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M73 84C83.7696 84 92.5 75.2695 92.5 64.5C92.5 53.7304 83.7696 45 73 45C62.2304 45 53.5 53.7304 53.5 64.5C53.5 75.2695 62.2304 84 73 84Z"
+      stroke="#6C757D"
+      stroke-width="3"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</div>
+<div></div>
+<div class="ui-empty-state-title">{{ title() }}</div>
+<div class="ui-empty-state-description">{{ description() }}</div>
+<div class="ui-empty-state-actions">
+  <ng-content></ng-content>
+</div>

libs/ui/empty-state/src/lib/empty-state.component.scss

@@ -0,0 +1,45 @@
+.ui-empty-state {
+  display: flex;
+  width: 28.75rem;
+  height: 28.75rem;
+  flex-direction: column;
+  justify-content: center;
+  justify-items: center;
+  align-items: center;
+  gap: 0.75rem;
+  flex-shrink: 0;
+}
+
+.ui-empty-state-circle {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  width: 8rem;
+  height: 8rem;
+  flex-shrink: 0;
+  @apply rounded-full bg-isa-neutral-100;
+}
+
+.ui-empty-state-icon {
+  width: 7.0625rem;
+  height: 6.375rem;
+  flex-shrink: 0;
+}
+
+.ui-empty-state-spacer {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+}
+
+.ui-empty-state-title {
+  @apply text-isa-black isa-text-subtitle-1-regular text-center;
+}
+
+.ui-empty-state-description {
+  @apply text-isa-black isa-text-body-1-regular text-center;
+}
+
+.ui-empty-state-actions {
+  @apply flex flex-row gap-2;
+}

libs/ui/empty-state/src/lib/empty-state.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'ui-empty-state',
+  templateUrl: './empty-state.component.html',
+  styleUrls: ['./empty-state.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': '["ui-empty-state"]',
+  },
+})
+export class EmptyStateComponent {
+  title = input.required<string>();
+  description = input.required<string>();
+}

libs/ui/empty-state/src/test-setup.ts

@@ -0,0 +1,6 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

libs/ui/empty-state/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/ui/empty-state/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

libs/ui/empty-state/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

tsconfig.base.json

@@ -50,6 +50,7 @@
       "@isa/shared/filter": ["libs/shared/filter/src/index.ts"],
       "@isa/shared/product-image": ["libs/shared/product-image/src/index.ts"],
       "@isa/ui/buttons": ["libs/ui/buttons/src/index.ts"],
+      "@isa/ui/empty-state": ["libs/ui/empty-state/src/index.ts"],
       "@isa/ui/input-controls": ["libs/ui/input-controls/src/index.ts"],
       "@isa/ui/item-rows": ["libs/ui/item-rows/src/index.ts"],
       "@isa/ui/search-bar": ["libs/ui/search-bar/src/index.ts"],