reinit repo with sources from zipped dir

packages/ui/.babelrc

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

packages/ui/README.md

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

packages/ui/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin'
+import baseConfig from '../../eslint.config.mjs'
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+]

packages/ui/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@klx/ui",
+  "version": "0.0.1",
+  "main": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  }
+}

packages/ui/src/index.ts

@@ -0,0 +1,4 @@
+export {Avatar} from './lib/components/Avatar/Avatar'
+export {Main} from './lib/components/Main/Main'
+export {Header} from './lib/components/Header/Header'
+export {Footer} from './lib/components/Footer/Footer'

packages/ui/src/lib/components/Avatar/Avatar.tsx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import {css} from '@emotion/react'
+
+const avatarStyles = css`
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    cursor: pointer;
+    border: 1px solid #e5e7eb;
+`
+
+export const Avatar = ({src}: {src: string}) => {
+    return <img css={avatarStyles} src={src} alt="Profile" />
+}

packages/ui/src/lib/components/Footer/Footer.tsx

@@ -0,0 +1,7 @@
+export const Footer = () => {
+    return (
+        <footer className="h-10 bg-gray-100 border-t flex items-center justify-center">
+            <span className="text-sm text-gray-600">© Klaxoon</span>
+        </footer>
+    )
+}

packages/ui/src/lib/components/Header/Header.tsx

@@ -0,0 +1,31 @@
+import {Avatar} from '../Avatar/Avatar'
+import {faker} from '@faker-js/faker'
+import {useState} from 'react'
+
+type User = {
+    uuid: string
+    name: string
+    email: string
+    job: string
+}
+
+export const Header = ({title}: {title: string}) => {
+    const [user] = useState<User>(() => {
+        return {
+            uuid: faker.string.uuid(),
+            name: faker.person.fullName(),
+            email: faker.internet.email(),
+            job: faker.person.jobTitle(),
+        }
+    })
+
+    return (
+        <header className="flex justify-between items-center px-8 py-4 bg-white border-b border-gray-200 shadow-sm">
+            <div className="text-2xl font-bold text-gray-800">{title}</div>
+            <div className="flex items-center gap-3">
+                <span className="text-sm text-gray-500">{user.name}</span>
+                <Avatar src={`https://i.pravatar.cc/150?u=${user.uuid}`} />
+            </div>
+        </header>
+    )
+}

packages/ui/src/lib/components/Main/Main.tsx

@@ -0,0 +1,3 @@
+export const Main = ({children}: {children: React.ReactNode}) => {
+    return <main className="flex-1 p-4 h-full">{children}</main>
+}

packages/ui/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

packages/ui/tsconfig.lib.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx",
+    "eslint.config.js",
+    "eslint.config.cjs",
+    "eslint.config.mjs"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}