@goodhood-web/ui 0.0.6-alpha.5 → 0.0.6

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "plugin:@nx/react",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/strict",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {},
+      "extends": ["../../eslintrc-custom-overrides.json"]
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/.storybook/main.ts

@@ -0,0 +1,31 @@
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+
+const config: StorybookConfig = {
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-actions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-designs',
+    'storybook-addon-pseudo-states',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  staticDirs: [{ from: '../images', to: '/assets' }],
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths(), svgr({ svgrOptions: { ref: true } })],
+    }),
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/packages/storybook/documents/custom-builder-configs

package/.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon" type="image/png" href="./assets/favicon.ico" />

package/.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/manager-api';
+
+import nebenanTheme from './nebenanTheme';
+
+addons.setConfig({
+  theme: nebenanTheme,
+});

package/.storybook/nebenanTheme.ts

@@ -0,0 +1,17 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  appBorderColor: '#D2D0DB',
+  barTextColor: '#201649',
+
+  base: 'light',
+  brandImage: './assets/logo.svg',
+  brandTarget: '_blank',
+  brandTitle: 'Nebenan.de',
+
+  brandUrl: 'https://nebenan.de',
+  colorPrimary: '#201649',
+
+  colorSecondary: '#b5d622',
+  fontBase: "'Inter', arial, sans-serif",
+});

package/.storybook/preview.ts

@@ -0,0 +1,9 @@
+import '../src/styles/reset.scss';
+
+const preview = {
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default preview;

package/.stylelintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": ["../../.stylelintrc.json"],
+  "ignoreFiles": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["**/*.css"],
+      "rules": {}
+    },
+    {
+      "files": ["**/*.scss"],
+      "rules": {}
+    }
+  ]
+}

package/README.md

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

package/__mocks__/svg.js

@@ -0,0 +1,2 @@
+export default 'svg';
+export const ReactComponent = 'svg';

package/images/logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="102" height="28" viewBox="0 0 102 28" fill="none">
+  <g clip-path="url(#clip0_11694_2107)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M52.3154 11.8938C51.3978 11.8626 50.5297 12.3101 50.0229 13.0758H49.9924C50.0222 12.8717 50.0367 12.6656 50.0357 12.4593V9.79491C50.0573 9.62588 49.9987 9.45644 49.8772 9.33694C49.7557 9.21744 49.5853 9.16164 49.4167 9.18612H48.7824C48.6114 9.15888 48.4375 9.21296 48.3121 9.33235C48.1867 9.45175 48.1242 9.6228 48.1431 9.79491V18.8122C48.1242 18.9801 48.1839 19.1474 48.3049 19.2654C48.4259 19.3834 48.5946 19.4389 48.762 19.4159H49.2715C49.6816 19.4159 49.8879 19.2121 49.8879 18.9064V18.6772C49.8902 18.571 49.8799 18.465 49.8573 18.3613H49.8879C49.8879 18.3613 50.4942 19.5993 52.1804 19.5993C54.1265 19.5993 55.6116 18.0862 55.6116 15.7376C55.6167 13.4655 54.2946 11.8938 52.3052 11.8938H52.3154ZM51.8238 18.048C50.6019 18.0449 49.9745 16.9357 49.9745 15.7555C49.9745 14.1864 50.8992 13.4782 51.8748 13.4782C52.965 13.4782 53.7266 14.4029 53.7266 15.7707C53.7164 17.2254 52.8684 18.0453 51.8238 18.048ZM51.8238 18.048L51.8289 18.048H51.8187L51.8238 18.048ZM66.1292 13.4528C66.6514 12.4702 67.6837 11.8668 68.7961 11.8938C70.4595 11.8938 71.4172 12.737 71.4198 14.6907V18.8122C71.4408 18.9806 71.3817 19.1492 71.2602 19.2677C71.1387 19.3863 70.9687 19.4411 70.8008 19.4159H70.1665C69.9993 19.4391 69.8307 19.3835 69.7101 19.2654C69.5894 19.1472 69.5303 18.9799 69.5501 18.8122V15.0652C69.5501 14.1736 69.3107 13.5674 68.3707 13.5674C67.0436 13.5674 66.2056 14.6474 66.2056 15.9745V18.8122C66.2277 18.9781 66.1712 19.1448 66.0528 19.2631C65.9345 19.3815 65.7678 19.4379 65.6019 19.4159H64.9549C64.7886 19.4388 64.6211 19.3827 64.5021 19.2643C64.3831 19.1458 64.3264 18.9786 64.3486 18.8122V12.6733C64.3287 12.5072 64.3861 12.3411 64.5044 12.2228C64.6227 12.1045 64.7888 12.0471 64.9549 12.0671H65.5255C65.6914 12.0469 65.8573 12.1044 65.9753 12.2228C66.0932 12.3413 66.15 12.5075 66.1292 12.6733V13.1191C66.1275 13.2308 66.1181 13.3423 66.1011 13.4528H66.1292ZM81.9144 13.4528C82.4367 12.4702 83.469 11.8668 84.5814 11.8938C86.2447 11.8938 87.2025 12.737 87.2127 14.6907V18.8122C87.2346 18.9804 87.1762 19.1491 87.055 19.2677C86.9339 19.3864 86.764 19.4413 86.5963 19.4159H85.9594C85.7922 19.4391 85.6236 19.3835 85.503 19.2654C85.3823 19.1472 85.3233 18.9799 85.343 18.8122V15.0652C85.343 14.1736 85.1087 13.5674 84.1662 13.5674C82.8391 13.5674 81.9985 14.6474 81.9985 15.9745V18.8122C82.0206 18.9781 81.9641 19.1448 81.8458 19.2631C81.7274 19.3815 81.5607 19.4379 81.3948 19.4159H80.7478C80.5819 19.4379 80.4152 19.3815 80.2968 19.2631C80.1785 19.1448 80.122 18.9781 80.1441 18.8122V12.6733C80.1233 12.5075 80.18 12.3413 80.298 12.2228C80.4159 12.1044 80.5819 12.0469 80.7478 12.0671H81.3133C81.4788 12.0478 81.644 12.1056 81.7613 12.2239C81.8786 12.3423 81.9351 12.5079 81.9144 12.6733V13.1191C81.9128 13.2308 81.9034 13.3423 81.8864 13.4528H81.9144ZM95.4836 12.0467H95.0124C94.8931 12.0326 94.7739 12.0739 94.689 12.1589C94.604 12.2438 94.5627 12.363 94.5768 12.4822V14.4615C94.5769 14.5628 94.5837 14.6641 94.5971 14.7646H94.5768C94.5768 14.7646 94.1845 14.0004 92.9898 14.0004C91.5532 14.0004 90.5292 15.0983 90.5292 16.7845C90.5292 18.4301 91.4793 19.5636 92.9491 19.5636C93.6425 19.5945 94.297 19.2423 94.6532 18.6466H94.6736C94.6603 18.7085 94.6535 18.7717 94.6532 18.8351V19.044C94.6532 19.2987 94.8009 19.4388 95.0862 19.4388H95.4836C95.6033 19.455 95.7238 19.4143 95.8093 19.3289C95.8947 19.2434 95.9354 19.123 95.9192 19.0032V12.4822C95.9333 12.363 95.8919 12.2438 95.807 12.1589C95.722 12.0739 95.6029 12.0326 95.4836 12.0467ZM93.2471 18.4555C92.4473 18.4555 91.892 17.7984 91.892 16.7896C91.892 15.7376 92.5211 15.1441 93.2573 15.1441C94.1743 15.1441 94.6073 15.9542 94.6073 16.7795C94.6073 17.9563 93.9501 18.4555 93.2471 18.4555ZM101.821 16.5375C101.821 15.0779 100.958 14.0055 99.414 14.0055C97.7812 14.0055 96.6553 15.1543 96.6553 16.7896C96.6553 18.3002 97.771 19.5687 99.5745 19.5687C100.226 19.5675 100.864 19.384 101.416 19.0389C101.521 18.9885 101.598 18.8943 101.626 18.7817C101.655 18.6691 101.632 18.5497 101.564 18.4555L101.437 18.2492C101.299 17.9945 101.108 17.9767 100.84 18.1015C100.489 18.3211 100.083 18.4401 99.6687 18.4453C98.8158 18.4917 98.0864 17.8386 98.0385 16.9858H101.35C101.603 16.9887 101.811 16.7899 101.821 16.5375ZM98.069 16.1859C98.199 15.4753 98.688 15.0066 99.3809 15.0066C99.9973 15.0066 100.456 15.4447 100.476 16.1859H98.069ZM89.4823 18.1117H89.0161C88.7156 18.1117 88.5678 18.2594 88.5678 18.537V19.0083C88.5518 19.1304 88.5943 19.2528 88.6826 19.3386C88.7709 19.4244 88.8946 19.4634 89.0161 19.4439H89.4823C89.6034 19.4612 89.7257 19.4215 89.8134 19.3362C89.9012 19.251 89.9445 19.1298 89.9306 19.0083V18.537C89.9421 18.4169 89.8977 18.2982 89.8101 18.2151C89.7226 18.132 89.6017 18.0939 89.4823 18.1117ZM73.2054 12.5001C73.9661 12.1063 74.8094 11.8986 75.666 11.8938H75.6737C77.6172 11.8938 78.7788 12.9611 78.7711 14.8206V18.8223C78.7932 18.9911 78.7345 19.1603 78.6127 19.2791C78.4909 19.3979 78.3202 19.4524 78.1521 19.426H77.6554C77.4891 19.449 77.3216 19.3929 77.2027 19.2745C77.0837 19.156 77.0269 18.9888 77.0492 18.8223V18.5345C77.0472 18.4268 77.0566 18.3192 77.0772 18.2136H77.0492C76.5678 19.0621 75.671 19.59 74.6955 19.5993C73.3226 19.5993 72.2043 18.7332 72.2043 17.3933C72.2043 15.2486 74.9146 14.8894 76.5932 14.8894H76.9014V14.7162C76.9014 13.7508 76.2672 13.4196 75.503 13.4196C74.9567 13.4326 74.4214 13.5759 73.9415 13.8374C73.5747 13.9851 73.292 13.9291 73.1162 13.5827L72.971 13.3076C72.8745 13.1745 72.8448 13.0043 72.8906 12.8465C72.9364 12.6886 73.0526 12.5608 73.2054 12.5001ZM75.205 18.1906C76.2494 18.1906 76.9269 17.1565 76.9269 16.2598V15.9873H76.6187C75.6762 15.9873 74.0715 16.1299 74.0715 17.2278C74.0715 17.7168 74.4408 18.1906 75.205 18.1906ZM60.031 11.8938C62.1656 11.8938 63.3603 13.3789 63.3603 15.3988C63.3438 15.7472 63.0543 16.0198 62.7057 16.0153H58.1206C58.2403 17.3424 59.2414 18.0327 60.3749 18.0327C60.9491 18.0247 61.5102 17.86 61.9975 17.5564C62.3643 17.3831 62.6292 17.4265 62.8228 17.7601L62.9986 18.048C63.0919 18.1783 63.1228 18.3432 63.083 18.4985C63.0432 18.6538 62.9368 18.7835 62.7923 18.8529C62.0292 19.3326 61.1464 19.5878 60.245 19.5891C57.7589 19.5891 56.2102 17.8315 56.2102 15.7427C56.2102 13.4808 57.7767 11.8938 60.031 11.8938ZM59.9852 13.2795C59.03 13.2795 58.3499 13.9291 58.1741 14.9047H61.5135C61.4728 13.8832 60.8411 13.2795 59.9852 13.2795ZM43.8433 11.8938C45.9779 11.8938 47.1725 13.3789 47.1725 15.3988H47.1624C47.1463 15.7389 46.8685 16.0077 46.5281 16.0127H41.9431C42.0628 17.3398 43.0638 18.0301 44.1974 18.0301C44.7715 18.0218 45.3324 17.8571 45.82 17.5538C46.1868 17.3806 46.4517 17.4239 46.6453 17.7576L46.821 18.0454C46.9143 18.1758 46.9452 18.3407 46.9054 18.496C46.8656 18.6513 46.7592 18.781 46.6147 18.8504C45.8488 19.3324 44.9623 19.5885 44.0573 19.5891C41.5686 19.5891 40.0224 17.8315 40.0224 15.7427C40.0224 13.4808 41.5915 11.8938 43.8433 11.8938ZM43.8 13.2795C42.8422 13.2795 42.1647 13.9291 41.9864 14.9047H45.3283C45.2876 13.8832 44.6559 13.2795 43.8 13.2795ZM33.8224 13.4528C34.3443 12.4698 35.3769 11.8662 36.4894 11.8938C38.1528 11.8938 39.1105 12.737 39.1105 14.6907V18.8122C39.1315 18.9806 39.0725 19.1492 38.951 19.2677C38.8294 19.3863 38.6594 19.4411 38.4915 19.4159H37.8573C37.6898 19.4389 37.5211 19.3834 37.4001 19.2654C37.2792 19.1474 37.2194 18.9801 37.2383 18.8122V15.0652C37.2383 14.1736 37.004 13.5674 36.0615 13.5674C34.7344 13.5674 33.8963 14.6474 33.8963 15.9745V18.8122C33.9184 18.9781 33.8619 19.1448 33.7436 19.2631C33.6252 19.3815 33.4585 19.4379 33.2926 19.4159H32.6431C32.4772 19.4379 32.3104 19.3815 32.1921 19.2631C32.0737 19.1448 32.0173 18.9781 32.0394 18.8122V12.6733C32.0185 12.5075 32.0753 12.3413 32.1932 12.2228C32.3112 12.1044 32.4771 12.0469 32.6431 12.0671H33.2213C33.3868 12.0478 33.552 12.1056 33.6693 12.2239C33.7867 12.3423 33.8431 12.5079 33.8224 12.6733V13.1191C33.8208 13.2308 33.8114 13.3423 33.7944 13.4528H33.8224Z" fill="#201649"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.9696 6.12937L14.0506 0.372597C13.1954 -0.124199 12.1395 -0.124199 11.2843 0.372597L1.37042 6.12937C0.523765 6.62301 0.0022172 7.52845 0 8.5085V19.4948C0.00142842 20.4737 0.523427 21.378 1.37042 21.8688L5.50969 24.2734V17.8824L7.57551 19.0694C7.65817 19.1212 7.70899 19.2113 7.71051 19.3088V25.5521L11.2767 27.6307C12.1348 28.1231 13.1899 28.1231 14.0481 27.6307L17.6142 25.5521V19.3088C17.6163 19.2101 17.6693 19.1196 17.7543 19.0694L19.8176 17.8824V24.2734L23.9594 21.8688C24.8058 21.3777 25.3269 20.4733 25.3273 19.4948V8.5085C25.3282 7.53091 24.8117 6.62583 23.9696 6.12937ZM11.8421 26.0437L9.36367 24.6045V19.3088C9.36498 18.6216 8.99999 17.9858 8.40591 17.6404L5.311 15.8573C5.01284 15.6852 4.64545 15.6853 4.34744 15.8577C4.04942 16.0301 3.86613 16.3485 3.86672 16.6928V21.3976L2.19827 20.4449C1.86178 20.2464 1.65467 19.8854 1.65316 19.4948V8.83454L11.8421 14.7492V26.0437ZM2.47083 7.38771L11.8421 12.8414V1.95698L2.47083 7.38771ZM13.5004 1.95698L22.8692 7.38771L13.5004 12.8414V1.95698ZM23.1392 20.4449C23.4784 20.2484 23.6878 19.8867 23.6894 19.4948V8.83454L13.5004 14.7492V26.0437L15.9712 24.6045V19.3114C15.9741 18.6226 16.3427 17.9873 16.9392 17.6429L20.0392 15.8598C20.3372 15.689 20.7036 15.6899 21.0008 15.8621C21.298 16.0343 21.481 16.3518 21.4809 16.6953V21.3976L23.1392 20.4449Z" fill="#201649"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_11694_2107">
+      <rect width="102" height="28" fill="#201649"/>
+    </clipPath>
+  </defs>
+</svg>

package/jest.config.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+export default {
+  displayName: 'ui',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  moduleNameMapper: {
+    '\\.svg(\\?react)?$': '<rootDir>/__mocks__/svg.js',
+  },
+  coverageDirectory: '../../coverage/libs/ui',
+  clearMocks: true,
+  setupFilesAfterEnv: ['@testing-library/jest-dom'],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodhood-web/ui",
-  "version": "0.0.6-alpha.5",
+  "version": "0.0.6",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -8,5 +8,9 @@
       "import": "./index.mjs",
       "require": "./index.js"
     }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
   }
 }

package/project.json

@@ -0,0 +1,95 @@
+{
+  "name": "ui",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/ui/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "typecheck": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["tsc -p tsconfig.json --noEmit"],
+        "cwd": "libs/ui",
+        "forwardAllArgs": false
+      }
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "updateBuildableProjectDepsInPackageJson": true,
+      "buildableProjectDepsInPackageJsonType": "dependencies",
+      "options": {
+        "outputPath": "dist/libs/ui"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "jestConfig": "libs/ui/jest.config.ts",
+        "codeCoverage": true,
+        "coverageReporters": ["lcov"]
+      },
+      "configurations": {
+        "ci": {
+          "ci": true
+        }
+      }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/ui",
+        "configDir": "libs/ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "stylelint": {
+      "executor": "nx-stylelint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/ui/**/*.css", "libs/ui/**/*.scss"]
+      }
+    },
+    "release": {
+      "executor": "nx:run-commands",
+      "outputs": [],
+      "options": {
+        "command": "npx semantic-release-plus --extends ./libs/ui/release.config.js"
+      }
+    }
+  }
+}

package/release.config.js

@@ -0,0 +1,30 @@
+const name = 'ui';
+const srcRoot = `libs/${name}`;
+
+module.exports = {
+  commitPaths: [`${srcRoot}/*`],
+  extends: 'release.config.base.js',
+  pkgRoot: `dist/${srcRoot}`,
+
+  plugins: [
+    '@semantic-release/commit-analyzer',
+    '@semantic-release/release-notes-generator',
+    [
+      '@semantic-release/changelog',
+      {
+        changelogFile: `${srcRoot}/CHANGELOG.md`,
+      },
+    ],
+    '@semantic-release/npm',
+    [
+      '@semantic-release/git',
+      {
+        assets: [`${srcRoot}/package.json`, `${srcRoot}/CHANGELOG.md`],
+        message:
+          `release(version): Release ${name} ` +
+          '${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
+      },
+    ],
+  ],
+  tagFormat: name + '-v${version}',
+};

package/{index.d.ts → src/index.ts}

@@ -1,3 +1,5 @@
+/// <reference types="vite-plugin-svgr/client" />
+
 import BaseButton from './lib/BaseButton/BaseButton';
 import Card from './lib/Card/Card';
 import CardBody from './lib/Card/CardBody/CardBody';
@@ -17,4 +19,25 @@ import Thumbnail from './lib/Thumbnail/Thumbnail';
 import Toggle from './lib/Toggle/Toggle';
 import ToggleInput from './lib/ToggleInput/ToggleInput';
 import Typography from './lib/Typography/Typography';
-export { BaseButton, Card, CardBody, CardHeader, ContentCreatorButton, Divider, Fieldset, Form, Icon, IconButton, Image, LabelPill, Legend, NotificationBubble, Thumbnail, Toggle, ToggleInput, Typography, MenuItem, };
+
+export {
+  BaseButton,
+  Card,
+  CardBody,
+  CardHeader,
+  ContentCreatorButton,
+  Divider,
+  Fieldset,
+  Form,
+  Icon,
+  IconButton,
+  Image,
+  LabelPill,
+  Legend,
+  NotificationBubble,
+  Thumbnail,
+  Toggle,
+  ToggleInput,
+  MenuItem,
+  Typography,
+};

package/src/lib/BaseButton/BaseButton.module.scss

@@ -0,0 +1,11 @@
+.baseBtn {
+  min-width: 2rem;
+  min-height: 2rem;
+  border: none;
+  border-radius: 0;
+  cursor: pointer;
+
+  &--active {
+    background: #b1b1b1;
+  }
+}

package/src/lib/BaseButton/BaseButton.spec.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+
+import BaseButton from './BaseButton';
+
+describe('BaseButton', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <BaseButton onClick={() => {}}>Render successfully</BaseButton>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+});

package/src/lib/BaseButton/BaseButton.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import BaseButton from './BaseButton';
+
+const meta: Meta<typeof BaseButton> = {
+  argTypes: {
+    onClick: { action: 'clicked', description: 'On click event callback' },
+  },
+  component: BaseButton,
+  title: 'BaseButton',
+};
+export default meta;
+type Story = StoryObj<typeof BaseButton>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Welcome to BaseButton!',
+    disabled: false,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PBPtYOEh3AvPce2CsnzcgL/Design-System-(Legacy)?node-id=892%3A214&mode=dev',
+    },
+  },
+};

package/src/lib/BaseButton/BaseButton.tsx

@@ -0,0 +1,39 @@
+'use client';
+import { ButtonOwnProps, useButton } from '@mui/base';
+import clsx from 'clsx';
+
+import styles from './BaseButton.module.scss';
+
+export interface BaseButtonProps extends ButtonOwnProps {
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  className?: string;
+  onClick: () => void;
+  ref?: React.ForwardedRef<null>;
+}
+
+const BaseButton = (props: BaseButtonProps) => {
+  const { ariaLabel, ariaLabelledBy, children, className } = props;
+  const { active, focusVisible, getRootProps } = useButton({
+    ...props,
+    rootRef: props.ref,
+  });
+
+  const classes = {
+    [styles['baseBtn--active']]: active,
+    [styles['baseBtn--focusVisible']]: focusVisible,
+  };
+
+  return (
+    <button
+      {...getRootProps()}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      className={clsx(styles.baseBtn, classes, className)}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default BaseButton;

package/src/lib/Card/Card.module.scss

@@ -0,0 +1,15 @@
+.root {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  flex-direction: column;
+  padding: getSpacing('lg');
+  background: getSemanticColor('primitive', 'White');
+  background-color: getSemanticColor('surface', 'surface');
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+  color: getSemanticColor('surface', 'onSurface');
+
+  &--border-radius {
+    border-radius: getBorderRadius(('sm'));
+  }
+}

package/src/lib/Card/Card.spec.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+
+import Card from './Card';
+import CardBody from './CardBody/CardBody';
+
+describe('Card', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <Card>
+        <CardBody>valid Child</CardBody>
+      </Card>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+});

package/src/lib/Card/Card.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Icon from '../Icon/Icon';
+
+import Card from './Card';
+import { CardProps } from './Card.types';
+import CardBody from './CardBody/CardBody';
+import CardHeader from './CardHeader/CardHeader';
+
+const meta: Meta<typeof Card> = {
+  component: Card,
+  title: 'Components/Card',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+const CardComponent = (args: CardProps) => {
+  return (
+    <div style={{ width: '560px' }}>
+      <Card
+        as={args.as}
+        borderRadius={args.borderRadius}
+        ariaLabel={args.ariaLabel}
+        role={args.role}
+      >
+        <CardHeader
+          headline="Einstellungen"
+          leftElement={<Icon name="chevron_left" size="24" />}
+        />
+        <CardBody>
+          <p
+            style={{
+              color: '#201649',
+              fontFamily: 'sans-serif',
+              fontSize: '14px',
+              marginBottom: '16px',
+            }}
+          >
+            Warum hältst du den Inhalt für problematisch?
+          </p>
+          <div
+            style={{
+              border: 'solid 1px #A6A2B6',
+              borderRadius: '16px',
+              fontFamily: 'sans-serif',
+              padding: '16px',
+            }}
+          >
+            <p
+              style={{
+                color: '#201649',
+                fontFamily: 'sans-serif',
+                fontSize: '16px',
+                fontWeight: 500,
+              }}
+            >
+              Haustiere & Zubehör
+            </p>
+          </div>
+        </CardBody>
+        <CardBody>
+          <p
+            style={{
+              color: '#635C80',
+              fontFamily: 'sans-serif',
+              fontSize: '12px',
+              fontWeight: 500,
+              lineHeight: '16px',
+            }}
+          >
+            Mit Klick auf &quot;Absenden&quot; bestätigst du, in gutem Glauben davon
+            überzeugt zu sein, dass die in der Meldung enthaltenen Angaben und Anführungen
+            richtig und vollständig sind.
+          </p>
+          <p
+            style={{
+              color: '#635C80',
+              fontFamily: 'sans-serif',
+              fontSize: '12px',
+              fontWeight: 500,
+              lineHeight: '16px',
+            }}
+          >
+            Weitere Informationen zum Meldeprozess und Beschwerdegründen in den{' '}
+            <span
+              style={{
+                color: '#01819C',
+                fontFamily: 'sans-serif',
+                fontWeight: 700,
+              }}
+            >
+              Beitragsrichtlinien
+            </span>{' '}
+            und zur Verarbeitung personenbezogener Daten in den{' '}
+            <span
+              style={{
+                color: '#01819C',
+                fontFamily: 'sans-serif',
+                fontWeight: 700,
+              }}
+            >
+              Datenschutzbestimmungen
+            </span>
+            .
+          </p>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+export const Primary: Story = {
+  args: {
+    ariaLabel: 'ariaLabel',
+    as: 'section',
+    borderRadius: false,
+    role: 'section',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/hN7xJ3rRAemUJT9T0uEfUS/Product-Design-System?node-id=6105%3A12944&mode=dev',
+    },
+  },
+  render: (args) => CardComponent(args),
+};
+
+const argTypes = {
+  ariaLabel: {
+    description:
+      "The aria-label attribute in web development is used to provide a text label that describes the purpose or meaning of an HTML element, especially for elements like icons or interactive components that don't have visible text. It's used to improve accessibility by ensuring that screen readers and assistive technologies can convey the element's purpose to users with disabilities.",
+  },
+  as: {
+    control: {
+      type: 'select',
+    },
+    defaultValue: { summary: '"section"' },
+    description: `Dynamically Setting the HTML Element: The as property allows you to specify an HTML element as a string. The component will then render as that HTML element. For example, if you set as to 'div', the component will render as a 'div' element.`,
+  },
+
+  borderRadius: {
+    description:
+      'The borderRadius prop allows you to control the appearance of the card by adding border-radius',
+  },
+
+  children: {
+    control: { readonly: true, type: 'string' },
+    description:
+      'In the Card component, the children prop is designed to accept CardBody and CardFooter components, allowing you to structure and customize the content of the card with these specific components.',
+  },
+
+  role: {
+    description:
+      'The role attribute is used to define the purpose or function of an HTML element for accessibility.',
+  },
+};
+
+Primary.argTypes = argTypes;