From 5733a35459d1f9dee6e41b997105a43c2b2f3f96 Mon Sep 17 00:00:00 2001 From: maze Date: Mon, 9 Mar 2026 16:59:43 +0100 Subject: [PATCH] Make package --- .husky/pre-commit | 11 - README.md | 154 +++++++------ package-lock.json | 529 +++++++++++++++++++++++++++++--------------- package.json | 104 +++++++-- src/index.ts | 8 + tsconfig.build.json | 10 + vite.config.ts | 35 ++- 7 files changed, 578 insertions(+), 273 deletions(-) delete mode 100644 .husky/pre-commit create mode 100644 src/index.ts create mode 100644 tsconfig.build.json diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100644 index 64c2d63..0000000 --- a/.husky/pre-commit +++ /dev/null @@ -1,11 +0,0 @@ -#!/bin/sh -# Husky pre-commit hook: run lint-staged -# Generated by automation - -npx --no-install lint-staged -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - -npm test -npx lint-staged -npx lint-staged diff --git a/README.md b/README.md index d2e7761..e69679c 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,99 @@ -# React + TypeScript + Vite +# CyberDuck -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +CyberDuck is a small React component library and theme (Cyberpunk yellow) built on Bootstrap and MUI styles. -Currently, two official plugins are available: +## Installation -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +If you are developing locally you can install from the repository directory: -## 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](https://react.dev/learn/react-compiler/installation). - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: - -```js -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... - }, - }, -]) +```bash +npm pack +npm install /path/to/cyberduck-0.0.0.tgz ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: +Install directly from the repository -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' +If you don't want to publish to the npm registry you can install the package directly from the Git repository: -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... - }, - }, -]) +```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. + +## Including styles + +CyberDuck emits a single bundled stylesheet. Preferred import options: + +- Import the packaged CSS via the package export (recommended): + +```ts +import 'cyberduck/css' +``` + +- Import the compiled CSS file directly (older setups): + +```ts +import 'cyberduck/dist/cyberduck.css' +``` + +- If you want to include and compile the SCSS source in your app (allows customization), import the SCSS entry: + +```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 ( + + +
+

Hello from CyberDuck

+

Use the provided layout primitives and styles as building blocks.

+
+