update na knihovnu nahravajici kompoennty do projektu

@sykoramaros/marosh-components/ ├── src/ │ ├── components/ │ │ ├── CustomButton.tsx │ │ ├── MainNav.tsx │ │ └── Footer.tsx │ ├── lib/ │ │ └── utils.ts │ └── index.ts ├── cli/ │ └── index.ts # Nový CLI nástroj ├── scripts/ │ └── templates/ # Šablony komponent ├── package.json └── tsconfig.json

✅ Instalovat knihovnu klasicky: bun add @sykoramaros/marosh-components

✅ Importovat přímo: import { CustomButton } from '@sykoramaros/marosh-components'

✅ NEBO zkopírovat komponenty: bunx marosh add

✅ Upravovat lokálně zkopírované komponenty

✅ Aktualizovat z knihovny: bun update @sykoramaros/marosh-components a bunx marosh update

Zkontroluj že package.json má správnou verzi

Zvyš verzi pokud už jsi publikoval 0.1.0

nebo minor/major

git add . git commit

Zvyš verzi

npm version patch

Publikuj

bunx npm login npm publish --access public

Build

bun run build

V novém projektu

cd /cesta/k/jinemu/projektu

Instalace

bun add @sykoramaros/marosh-components

Test CLI

bunx marosh list

Přidání komponent

bunx marosh add

// Můžeš importovat buď z knihovny import { CustomButton } from '@sykoramaros/marosh-components'

// NEBO z lokálních zkopírovaných souborů (upravitelné!) import { CustomButton } from '@/components/basicComponents/CustomButton'

React + TypeScript + Vite

Build

bun run build

Otestuj že dist/ obsahuje správné soubory

ls -la dist/

Publikuj (Bun podporuje npm příkazy)

bunx npm login

npm publish --access public

Po publikaci můžeš instalovat v jiných projektech:

bun add @sykoramaros/marosh-components

S npm

npm install @sykoramaros/marosh-components

src/ ├── index.ts ← HLAVNÍ export (jediný potřebný!) ├── main.tsx ← Jen pro dev ├── App.tsx ← Jen pro dev
├── components/ │ ├── ui/ │ │ ├── button.tsx │ │ ├── input.tsx │ │ └── card.tsx │ ├── CustomButton.tsx │ └── CustomInput.tsx └── lib/ └── utils.ts

### 📦 **Alternativa: Index v každé složce (pokročilé)**

Tohle má smysl jen u **velkých knihoven** s mnoha kategoriemi:

src/ ├── index.ts ← Re-exportuje vše ├── components/ │ ├── index.ts ← Export všech komponent │ ├── ui/ │ │ ├── index.ts ← Export všech ui komponent │ │ ├── button.tsx │ │ └── input.tsx │ └── custom/ │ ├── index.ts ← Export custom komponent │ ├── CustomButton.tsx │ └── CustomInput.tsx └── lib/ ├── index.ts └── utils.ts

aktualizace knihovny: bun run build npm publish

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x"
import reactDom from "eslint-plugin-react-dom"

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs["recommended-typescript"],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])