feat: Create UI library & Revamp Visor App

.eslintrc.json

@@ -8,7 +8,8 @@
     "react/jsx-uses-react": "off",
     "simple-import-sort/imports": "error",
     "react/jsx-sort-props": "warn",
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "react/self-closing-comp": "warn"
   },
   "overrides": [
     {

README.md

@@ -15,6 +15,7 @@
 
 * shinkai-message-ts: Typescript library that implements the features and networking layer to enable systems to interact with shinkai-nodes.
 * shinkai-node-state: Typescript library which using @tanstack/react-query enables apps to interact with shinkai-node managing the state, caching and evictions.
+* shinkai-ui: React UI library to build shinkai apps.
 
 ## Getting started
 

apps/shinkai-app/postcss.config.js

@@ -1,10 +1,10 @@
-import { dirname,join } from 'path';
+import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 
 export default {
   plugins: {
-    "tailwindcss/nesting": {},
+    'tailwindcss/nesting': {},
     tailwindcss: {
       config: join(dirname(__filename), 'tailwind.config.js'),
     },

apps/shinkai-app/tsconfig.app.json

@@ -2,10 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": [
-      "node",
-      "vite/client"
-    ]
+    "types": ["node", "vite/client"]
   },
   "exclude": [
     "src/**/*.spec.ts",
@@ -17,5 +14,13 @@
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts", "vite.config.ts"]
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "@nx/react/typings/cssmodule.d.ts",
+    "@nx/react/typings/image.d.ts",
+    "vite.config.ts"
+  ]
 }

apps/shinkai-tray/src/pages/generate-code.tsx

@@ -128,7 +128,7 @@ const GenerateCodePage = () => {
         profile: auth?.profile ?? '',
         shinkai_identity: auth?.shinkai_identity ?? '',
         node_address: auth?.node_address ?? '',
-        //TODO: remove from network lib these unused params
+        //TODO: remove from network components these unused params
         registration_code: '',
         identity_type: '',
       },

apps/shinkai-tray/tailwind.config.js

@@ -1,53 +1,12 @@
-/** @type {import('tailwindcss').Config} */
+const sharedTailwindConfig = require('../../libs/shinkai-ui/src/shinkai-preset.js');
+
 module.exports = {
-  darkMode: ["class"],
+  presets: [sharedTailwindConfig],
+  darkMode: ['class'],
   content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
   ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      fontFamily: {
-        inter: ["Inter", "sans-serif"],
-        newake: ["Newake", "sans-serif"],
-      },
-      colors: {
-        primary: {
-          600: "#FF7E7F",
-          700: "#FF5E5F",
-          800: "#FF3E3F",
-        },
-        foreground: "#FFFFFF",
-        "muted-foreground": "#c7c7c7",
-      },
-      backgroundImage: {
-        "app-gradient":
-          "linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.20) 100%)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };

apps/shinkai-tray/tsconfig.app.json

@@ -2,10 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": [
-      "node",
-      "vite/client"
-    ]
+    "types": ["node", "vite/client"]
   },
   "exclude": [
     "src/**/*.spec.ts",
@@ -17,5 +14,13 @@
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts", "vite.config.ts"]
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "@nx/react/typings/cssmodule.d.ts",
+    "@nx/react/typings/image.d.ts",
+    "vite.config.ts"
+  ]
 }

apps/shinkai-tray/tsconfig.json

@@ -15,8 +15,8 @@
   "include": [],
   "references": [
     { "path": "./tsconfig.node.json" },
-    {      "path": "./tsconfig.app.json"    },
-    {      "path": "./tsconfig.spec.json"    }
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.spec.json" }
   ],
   "extends": "../../tsconfig.base.json"
 }

apps/shinkai-visor/postcss.config.js

@@ -1,4 +1,4 @@
-import { dirname,join } from 'path';
+import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 
@@ -10,4 +10,4 @@ export default {
     },
     autoprefixer: {},
   },
-}
+};