# CyberDuck

CyberDuck is a small React component library and theme (Cyberpunk yellow) built on Bootstrap and MUI styles.

## Installation

If you are developing locally you can install from the repository directory:

```bash
npm pack
npm install /path/to/cyberduck-0.0.0.tgz
```

Install directly from the repository

If you don't want to publish to the npm registry you can install the package directly from the Git repository:

```bash
npm install git+https://git.maze.io/maze/cyberduck.git
# or a specific branch or tag
npm install git+https://git.maze.io/maze/cyberduck.git#main
```

Note: when installing from a git repository, npm will clone the source. For consumers to get built artifacts (the `dist` bundle and compiled types) the repository must either include the `dist` output or provide a `prepare`/build step that runs on install. If you prefer not to publish, using `npm pack` from the repo owner (tarball) ensures the built `dist` is included.

Git install prerequisites

When a consumer installs the package directly from the Git repository, npm (and yarn) will run the package `prepare` script to produce the built `dist` and type artifacts. That means the consumer environment must be able to run the build:

- Have Node.js and npm installed (recommended Node 16+).
- Have a working `npm install` that can fetch devDependencies so the build tools (`typescript`, `sass`, `vite`) are available.

If you don't want consumers to run the build during install, either include the `dist` output in the repository (not recommended) or distribute a tarball produced by `npm pack` from the author so consumers can install the built package without running `prepare`.

## Including styles (optional)

Styles are optional — CyberDuck does not automatically inject styles when you import components. Import styles only if you want the theme and utilities applied.

- Recommended (package export):

```ts
import 'cyberduck/css'
```

- Direct CSS file (older setups):

```ts
import 'cyberduck/dist/cyberduck.css'
```

- Compile and include SCSS in your app (for customization):

```scss
@use 'cyberduck/styles/cyberduck.scss' as *;
```

Or in a JS/TS entry that supports Sass imports:

```ts
import 'cyberduck/styles/cyberduck.scss'
```

## Using the `Layout` component

CyberDuck exports a small set of layout components. Example usage of the `Layout` component together with `Navbar` and `Footer`:

```tsx
import React from 'react'
import { Layout, Navbar, Footer } from 'cyberduck'
import 'cyberduck/css'

function App() {
	return (
		<Layout>
			<Navbar />
			<main className="container py-4">
				<h1>Hello from CyberDuck</h1>
				<p>Use the provided layout primitives and styles as building blocks.</p>
			</main>
			<Footer />
		</Layout>
	)
}

export default App
```

You can also import specific components via subpath imports if you prefer:

```ts
import { Navbar } from 'cyberduck'
// or
import { Navbar } from 'cyberduck/Navbar'
```

## Peer dependencies

- `react` and `react-dom` (install in your project)
- `bootstrap` (CSS utilities used by components)
- `react-router` / `react-router-dom` (if you use routing components)

## Publishing

The package repository is: `git+https://git.maze.io/maze/cyberduck.git`. The package exposes `main`, `module`, and TypeScript `types` fields and emits declaration files in `dist/types`.

## Contributing

See the repository for contributing guidelines and style rules.