358ecb05cb
- 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>
132 lines
3.4 KiB
Markdown
132 lines
3.4 KiB
Markdown
# @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)
|