Prepare all packages for npm publishing
- Add author, repository, homepage, keywords, and engines fields to all 6 publishable package.json files - Add README.md to react, tailwind-preset, and hex-background packages - Add "type": "module" to web and react-native for consistency - Rename web build script to .cjs for ESM package compatibility - Remove overly broad "./dist/*" export from web package Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
michael
84
packages/hex-background/README.md
Normal file
84
packages/hex-background/README.md
Normal file
@@ -0,0 +1,84 @@
|
||||
# @dangerousthings/hex-background
|
||||
|
||||
3D hexagon grid background for the Dangerous Things design system. Renders an animated, instanced WebGL hex grid using Three.js and React Three Fiber. Hexagons animate to random heights on a loop, with a slowly orbiting camera.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install @dangerousthings/hex-background
|
||||
```
|
||||
|
||||
### Peer Dependencies
|
||||
|
||||
```bash
|
||||
npm install react @react-three/fiber three
|
||||
```
|
||||
|
||||
For React Native, also install `expo-gl`.
|
||||
|
||||
## Web Usage
|
||||
|
||||
Drop-in full-viewport background that renders behind page content:
|
||||
|
||||
```tsx
|
||||
import { HexGridBackground } from "@dangerousthings/hex-background";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<HexGridBackground />
|
||||
<main>{/* your content */}</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
The component renders a fixed-position Canvas at `z-index: -1` with `pointer-events: none`, so it sits behind all other content. It automatically sizes the grid to the viewport and skips rendering in automated browsers (Selenium, Puppeteer).
|
||||
|
||||
### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `opacity` | `number` | `0.5` | Canvas opacity |
|
||||
| `hexRadius` | `number` | `0.5` | Hexagon radius |
|
||||
| `margin` | `number` | `0.05` | Spacing between hexagons |
|
||||
| `maxHeight` | `number` | `3` | Maximum animation height |
|
||||
| `animationInterval` | `number` | `1500` | Height target refresh interval in ms |
|
||||
| `cameraSpeed` | `number` | `0.02` | Camera orbital speed |
|
||||
| `cameraRadius` | `number` | `8` | Camera orbital radius |
|
||||
| `fov` | `number` | `40` | Camera field of view |
|
||||
|
||||
## React Native Usage
|
||||
|
||||
The full-viewport `HexGridBackground` wrapper uses web-specific APIs. For React Native, use the lower-level `HexGrid` and `HexCamera` components directly within a native Canvas:
|
||||
|
||||
```tsx
|
||||
import { Canvas } from "@react-three/fiber/native";
|
||||
import { HexGrid, HexCamera } from "@dangerousthings/hex-background/native";
|
||||
|
||||
function Background() {
|
||||
return (
|
||||
<Canvas camera={{ position: [5, 5, 5], fov: 40 }}>
|
||||
<HexCamera />
|
||||
<ambientLight intensity={20} />
|
||||
<directionalLight position={[20, 40, 20]} intensity={1.5} />
|
||||
<HexGrid rows={20} cols={20} />
|
||||
</Canvas>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Exports
|
||||
|
||||
| Path | Description |
|
||||
|------|-------------|
|
||||
| `@dangerousthings/hex-background` | `HexGridBackground`, `HexGrid`, `HexCamera` (web) |
|
||||
| `@dangerousthings/hex-background/native` | `HexGrid`, `HexCamera` (React Native) |
|
||||
|
||||
## Monorepo
|
||||
|
||||
Part of the [DT Design System](https://github.com/nicholasgriffintn/dt-design-system) monorepo.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](LICENSE)
|
||||
@@ -3,6 +3,28 @@
|
||||
"version": "0.1.0",
|
||||
"description": "3D hexagon grid background for the Dangerous Things design system",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Dangerous Things",
|
||||
"email": "info@dangerousthings.com"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/dangerous-tac0s/dt-design-system.git",
|
||||
"directory": "packages/hex-background"
|
||||
},
|
||||
"homepage": "https://github.com/dangerous-tac0s/dt-design-system#readme",
|
||||
"keywords": [
|
||||
"dangerousthings",
|
||||
"design-system",
|
||||
"three.js",
|
||||
"react-three-fiber",
|
||||
"3d",
|
||||
"hexagon",
|
||||
"background"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
|
||||
@@ -3,6 +3,27 @@
|
||||
"version": "0.2.1",
|
||||
"description": "React Native themed components for the Dangerous Things design system",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Dangerous Things",
|
||||
"email": "info@dangerousthings.com"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/dangerous-tac0s/dt-design-system.git",
|
||||
"directory": "packages/react-native"
|
||||
},
|
||||
"homepage": "https://github.com/dangerous-tac0s/dt-design-system#readme",
|
||||
"keywords": [
|
||||
"dangerousthings",
|
||||
"design-system",
|
||||
"react-native",
|
||||
"components",
|
||||
"theming"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
|
||||
131
packages/react/README.md
Normal file
131
packages/react/README.md
Normal file
@@ -0,0 +1,131 @@
|
||||
# @dangerousthings/react
|
||||
|
||||
React web components for the Dangerous Things design system — 20 themed components wrapping `@dangerousthings/web` CSS with React APIs matching `@dangerousthings/react-native` for cross-platform parity.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install @dangerousthings/react
|
||||
```
|
||||
|
||||
### Peer Dependencies
|
||||
|
||||
```bash
|
||||
npm install react react-dom @dangerousthings/tokens @dangerousthings/web
|
||||
```
|
||||
|
||||
## Setup
|
||||
|
||||
Wrap your app with `DTWebThemeProvider` and import the web CSS bundle:
|
||||
|
||||
```tsx
|
||||
import "@dangerousthings/web";
|
||||
import { DTWebThemeProvider } from "@dangerousthings/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<DTWebThemeProvider brand="dt" theme="dark">
|
||||
{/* your app */}
|
||||
</DTWebThemeProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
The provider sets `data-brand` and `data-theme` attributes on a wrapper div and exposes brand/theme via React context.
|
||||
|
||||
## Components
|
||||
|
||||
### Bevel & Layout
|
||||
|
||||
| Component | Description |
|
||||
|-----------|-------------|
|
||||
| `DTCard` | Beveled card with header, progress bar, and mode colors |
|
||||
| `DTButton` | Beveled button with variant colors |
|
||||
| `DTLabel` | Top-right beveled label with status colors |
|
||||
| `DTChip` | Compact labeled element |
|
||||
| `DTMediaFrame` | Diagonal beveled frame for images |
|
||||
| `DTModal` | Modal dialog with beveled corners |
|
||||
| `DTDrawer` | Side drawer with edge bevels |
|
||||
| `DTHexagon` | Decorative hexagon SVG shape |
|
||||
|
||||
### Forms
|
||||
|
||||
| Component | Description |
|
||||
|-----------|-------------|
|
||||
| `DTTextInput` | Sharp-cornered input with focus glow |
|
||||
| `DTCheckbox` | Beveled checkbox with opposing corner cuts |
|
||||
| `DTSwitch` | Angular toggle switch |
|
||||
| `DTRadioGroup` | Hexagonal radio buttons |
|
||||
| `DTQuantityStepper` | Beveled +/- increment buttons |
|
||||
| `DTSearchInput` | Search-styled text input |
|
||||
|
||||
### Layout & Animation
|
||||
|
||||
| Component | Description |
|
||||
|-----------|-------------|
|
||||
| `DTProgressBar` | Angular progress bar with optional label |
|
||||
| `DTAccordion` | Collapsible sections with accent border |
|
||||
| `DTStaggerContainer` | Staggered scale-in entrance animation for children |
|
||||
| `DTBadgeOverlay` | Absolute-positioned badge wrapper |
|
||||
|
||||
### Filter & Feature
|
||||
|
||||
| Component | Description |
|
||||
|-----------|-------------|
|
||||
| `DTMenu` | Dropdown menu with item variants |
|
||||
| `DTFeatureLegend` | Product feature grid with icons and rotated labels |
|
||||
| `DTMobileFilterOverlay` | Full-screen slide-up filter overlay with backdrop |
|
||||
| `DTGallery` | Image gallery |
|
||||
|
||||
### Animation Hooks
|
||||
|
||||
| Hook | Description |
|
||||
|------|-------------|
|
||||
| `useScaleIn` | Scale 0 to 1 entrance animation |
|
||||
| `usePulse` | Looping opacity pulse animation |
|
||||
|
||||
## Usage Examples
|
||||
|
||||
```tsx
|
||||
import { DTButton, DTCard, DTTextInput } from "@dangerousthings/react";
|
||||
|
||||
// Button with variant
|
||||
<DTButton variant="normal" onClick={handleClick}>
|
||||
Scan NFC
|
||||
</DTButton>
|
||||
|
||||
// Card with title and progress bar
|
||||
<DTCard title="PRODUCT" variant="emphasis" progress={60}>
|
||||
<p>60% progress</p>
|
||||
</DTCard>
|
||||
|
||||
// Text input
|
||||
<DTTextInput variant="normal" label="Username" />
|
||||
```
|
||||
|
||||
## Theme Utilities
|
||||
|
||||
```tsx
|
||||
import { useDTWebTheme } from "@dangerousthings/react";
|
||||
|
||||
const { brand, theme } = useDTWebTheme();
|
||||
// brand: "dt" | "classic"
|
||||
// theme: "dark" | "light"
|
||||
```
|
||||
|
||||
## Variant Utilities
|
||||
|
||||
```tsx
|
||||
import { getVariantClass, variantToClassName } from "@dangerousthings/react";
|
||||
|
||||
getVariantClass("emphasis"); // mode class name for CSS
|
||||
variantToClassName("warning"); // token-level variant mapping
|
||||
```
|
||||
|
||||
## Monorepo
|
||||
|
||||
Part of the [DT Design System](https://github.com/nicholasgriffintn/dt-design-system) monorepo.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](LICENSE)
|
||||
@@ -3,6 +3,26 @@
|
||||
"version": "0.1.0",
|
||||
"description": "React web components for the Dangerous Things design system",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Dangerous Things",
|
||||
"email": "info@dangerousthings.com"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/dangerous-tac0s/dt-design-system.git",
|
||||
"directory": "packages/react"
|
||||
},
|
||||
"homepage": "https://github.com/dangerous-tac0s/dt-design-system#readme",
|
||||
"keywords": [
|
||||
"dangerousthings",
|
||||
"design-system",
|
||||
"react",
|
||||
"components",
|
||||
"theming"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
|
||||
109
packages/tailwind-preset/README.md
Normal file
109
packages/tailwind-preset/README.md
Normal file
@@ -0,0 +1,109 @@
|
||||
# @dangerousthings/tailwind-preset
|
||||
|
||||
Tailwind CSS v3 preset that maps Dangerous Things design tokens to Tailwind theme values. Uses CSS custom property references so the same utility classes work across both DT and Classic brands at runtime.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install @dangerousthings/tailwind-preset
|
||||
```
|
||||
|
||||
### Peer Dependencies
|
||||
|
||||
```bash
|
||||
npm install tailwindcss@^3.4
|
||||
```
|
||||
|
||||
You also need a brand token CSS file loaded (from `@dangerousthings/web` or `@dangerousthings/tokens`).
|
||||
|
||||
## Setup
|
||||
|
||||
Add the preset to your `tailwind.config.js`:
|
||||
|
||||
```js
|
||||
import dtPreset from "@dangerousthings/tailwind-preset";
|
||||
|
||||
export default {
|
||||
presets: [dtPreset],
|
||||
content: ["./src/**/*.{tsx,ts,html}"],
|
||||
};
|
||||
```
|
||||
|
||||
## Available Utilities
|
||||
|
||||
### Colors
|
||||
|
||||
All DT design token colors are available under the `dt-` prefix. Colors with `-rgb` variants support Tailwind opacity modifiers.
|
||||
|
||||
```html
|
||||
<div class="bg-dt-bg text-dt-text-primary">
|
||||
<h1 class="text-dt-primary">Heading</h1>
|
||||
<p class="text-dt-text-secondary">Body text</p>
|
||||
<button class="bg-dt-primary/50 text-dt-bg">50% opacity</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
| Utility | Token |
|
||||
|---------|-------|
|
||||
| `bg-dt-bg`, `text-dt-bg` | `--color-bg` |
|
||||
| `bg-dt-surface` | `--color-surface` |
|
||||
| `bg-dt-primary`, `text-dt-primary` | `--color-primary` |
|
||||
| `bg-dt-secondary` | `--color-secondary` |
|
||||
| `bg-dt-accent` | `--color-accent` |
|
||||
| `bg-dt-error` | `--color-error` |
|
||||
| `text-dt-text-primary` | `--color-text-primary` |
|
||||
| `text-dt-text-secondary` | `--color-text-secondary` |
|
||||
| `text-dt-text-muted` | `--color-text-muted` |
|
||||
|
||||
### Mode Colors
|
||||
|
||||
Card mode colors are available under the `mode-` prefix:
|
||||
|
||||
```html
|
||||
<div class="border-mode-normal">Normal</div>
|
||||
<div class="text-mode-emphasis">Emphasis</div>
|
||||
<div class="bg-mode-warning">Warning</div>
|
||||
```
|
||||
|
||||
### Spacing
|
||||
|
||||
```html
|
||||
<div class="p-dt-4 gap-dt-2 m-dt-1">...</div>
|
||||
```
|
||||
|
||||
| Utility | Token |
|
||||
|---------|-------|
|
||||
| `*-dt-1` through `*-dt-8` | `--space-1` through `--space-8` |
|
||||
|
||||
### Border Radius
|
||||
|
||||
```html
|
||||
<div class="rounded-dt">Default</div>
|
||||
<div class="rounded-dt-sm">Small</div>
|
||||
<div class="rounded-dt-lg">Large</div>
|
||||
```
|
||||
|
||||
### Font Family
|
||||
|
||||
```html
|
||||
<h1 class="font-dt-heading">Tektur heading</h1>
|
||||
<p class="font-dt-body">Body text</p>
|
||||
<code class="font-dt-mono">Monospace</code>
|
||||
```
|
||||
|
||||
## Brand Switching
|
||||
|
||||
Because the preset uses `var()` references, switching brands at runtime requires only changing the CSS custom properties (e.g., via `data-brand` attribute). No Tailwind rebuild is needed.
|
||||
|
||||
```html
|
||||
<div data-brand="dt">Cyan neon theme</div>
|
||||
<div data-brand="classic">Navy magenta theme</div>
|
||||
```
|
||||
|
||||
## Monorepo
|
||||
|
||||
Part of the [DT Design System](https://github.com/nicholasgriffintn/dt-design-system) monorepo.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](LICENSE)
|
||||
@@ -3,6 +3,27 @@
|
||||
"version": "0.1.0",
|
||||
"description": "Tailwind CSS v3 preset mapping DT design tokens to Tailwind theme",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Dangerous Things",
|
||||
"email": "info@dangerousthings.com"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/dangerous-tac0s/dt-design-system.git",
|
||||
"directory": "packages/tailwind-preset"
|
||||
},
|
||||
"homepage": "https://github.com/dangerous-tac0s/dt-design-system#readme",
|
||||
"keywords": [
|
||||
"dangerousthings",
|
||||
"design-system",
|
||||
"tailwind",
|
||||
"tailwindcss",
|
||||
"preset",
|
||||
"design-tokens"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
|
||||
@@ -3,6 +3,26 @@
|
||||
"version": "0.2.1",
|
||||
"description": "Canonical design tokens for the Dangerous Things design system",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Dangerous Things",
|
||||
"email": "info@dangerousthings.com"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/dangerous-tac0s/dt-design-system.git",
|
||||
"directory": "packages/tokens"
|
||||
},
|
||||
"homepage": "https://github.com/dangerous-tac0s/dt-design-system#readme",
|
||||
"keywords": [
|
||||
"dangerousthings",
|
||||
"design-system",
|
||||
"design-tokens",
|
||||
"css-custom-properties",
|
||||
"theming"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
|
||||
@@ -3,6 +3,28 @@
|
||||
"version": "0.2.1",
|
||||
"description": "Web CSS theme for the Dangerous Things design system — bevels, glows, form styles",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "Dangerous Things",
|
||||
"email": "info@dangerousthings.com"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/dangerous-tac0s/dt-design-system.git",
|
||||
"directory": "packages/web"
|
||||
},
|
||||
"homepage": "https://github.com/dangerous-tac0s/dt-design-system#readme",
|
||||
"keywords": [
|
||||
"dangerousthings",
|
||||
"design-system",
|
||||
"css",
|
||||
"theming",
|
||||
"bevels",
|
||||
"cyberpunk"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"main": "dist/index.css",
|
||||
"exports": {
|
||||
".": "./dist/index.css",
|
||||
@@ -13,8 +35,7 @@
|
||||
"types": "./dist/theme-registry.d.ts",
|
||||
"import": "./dist/theme-registry.js",
|
||||
"default": "./dist/theme-registry.js"
|
||||
},
|
||||
"./dist/*": "./dist/*"
|
||||
}
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@@ -23,7 +44,7 @@
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "node scripts/build.js",
|
||||
"build": "node scripts/build.cjs",
|
||||
"clean": "rm -rf dist"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
Reference in New Issue
Block a user