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:

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:

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):

import 'cyberduck/css'

Direct CSS file (older setups):

import 'cyberduck/dist/cyberduck.css'

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

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

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

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:

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:

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.

3.3 KiB Raw Permalink Blame History