imperijal-components 0.0.0

package/INSTALL_AND_USAGE.md

@@ -0,0 +1,288 @@
+# Install & usage — `@imperijal/date-time-picker`
+
+Guide for **installing** the package in an app (e.g. restoranico) and **using** the DateTimePicker component.
+
+For **publishing** to npm, see [PUBLISHING.md](./PUBLISHING.md).
+
+---
+
+## What this package is
+
+`@imperijal/date-time-picker` is a React date & time picker with:
+
+- Quick date chips (Today, Tomorrow, Sat, Sun)
+- Expandable calendar
+- Scrollable time grid (default **05:00–23:30**, every 30 min)
+- Confirm button before applying
+
+**Value format** (same as HTML `datetime-local`):
+
+```
+YYYY-MM-DDTHH:mm
+```
+
+Example: `2026-06-21T14:30`
+
+---
+
+## Install
+
+### From npm (after you publish)
+
+```bash
+pnpm add @imperijal/date-time-picker
+```
+
+### Peer dependencies
+
+Your app must already have (or install):
+
+```bash
+pnpm add react react-dom date-fns lucide-react react-day-picker \
+  @radix-ui/react-popover @radix-ui/react-collapsible @radix-ui/react-slot \
+  class-variance-authority clsx tailwind-merge
+```
+
+Most of these are already in **restoranico**.
+
+### Local development (before npm publish)
+
+Link from the monorepo:
+
+```bash
+# Terminal 1 — build the package
+cd /home/marko-og/Documents/wappa/imperijal-components
+pnpm build
+
+# Terminal 2 — link globally
+cd packages/date-time-picker
+pnpm link --global
+
+# Terminal 3 — link in your app
+cd /home/marko-og/Documents/wappa/restoranico
+pnpm link --global @imperijal/date-time-picker
+```
+
+Or use a workspace/file dependency in `restoranico/package.json`:
+
+```json
+"@imperijal/date-time-picker": "file:../imperijal-components/packages/date-time-picker"
+```
+
+Then run `pnpm install` in restoranico.
+
+---
+
+## Tailwind setup
+
+The picker uses Tailwind classes (`bg-primary`, `border-border`, etc.). Your app must:
+
+### 1. Scan the package in Tailwind content
+
+**Tailwind v3** (`tailwind.config.ts`):
+
+```ts
+content: [
+  './src/**/*.{js,ts,jsx,tsx}',
+  './node_modules/@imperijal/date-time-picker/dist/**/*.js',
+],
+```
+
+**Tailwind v4** (`globals.css`):
+
+```css
+@source "../node_modules/@imperijal/date-time-picker/dist/**/*.js";
+```
+
+### 2. CSS variables (shadcn-style)
+
+If your app already uses shadcn/ui theme variables (`--primary`, `--border`, …), nothing else is needed.
+
+Otherwise import optional tokens:
+
+```css
+@import '@imperijal/date-time-picker/styles.css';
+```
+
+### 3. react-day-picker styles
+
+If the calendar looks unstyled, add in your global CSS:
+
+```css
+@import 'react-day-picker/style.css';
+```
+
+---
+
+## Basic usage
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import {
+  DateTimePicker,
+  toLocalInputValue,
+} from '@imperijal/date-time-picker';
+
+export function Example() {
+  const [value, setValue] = useState(() => toLocalInputValue(new Date()));
+
+  return (
+    <DateTimePicker
+      value={value}
+      onChange={setValue}
+    />
+  );
+}
+```
+
+---
+
+## Usage in restoranico (traffic page)
+
+Replace local imports:
+
+```tsx
+// Before
+import { DateTimePicker } from '@/components/ui/date-time-picker';
+import { toLocalInputValue } from '@/lib/datetime/local-input-value';
+
+// After
+import {
+  DateTimePicker,
+  toLocalInputValue,
+} from '@imperijal/date-time-picker';
+```
+
+Example fields:
+
+```tsx
+<DateTimePicker
+  value={defaultDeadline}
+  onChange={handleDefaultDeadlineChange}
+  className="mt-0.5 border-slate-200 focus-visible:ring-indigo-400"
+/>
+
+<DateTimePicker
+  value={departureTime}
+  onChange={setDepartureTime}
+  className="mt-0.5 border-slate-200 focus-visible:ring-indigo-400"
+/>
+
+<DateTimePicker
+  value={d.deadline}
+  onChange={(deadline) => updateDelivery(d.id, { deadline })}
+  size="sm"
+  className="mt-0.5 border-slate-200 focus-visible:ring-indigo-400"
+/>
+```
+
+Convert to ISO when sending to API (unchanged):
+
+```tsx
+deadline: new Date(d.deadline).toISOString()
+departureTime: new Date(departureTime).toISOString()
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | required | `YYYY-MM-DDTHH:mm` |
+| `onChange` | `(value: string) => void` | required | Called on Confirm |
+| `placeholder` | `string` | `'Select date & time'` | Empty state label |
+| `size` | `'default' \| 'sm'` | `'default'` | Trigger size |
+| `disabled` | `boolean` | `false` | Disable trigger |
+| `className` | `string` | — | Extra classes on trigger |
+| `id` | `string` | — | HTML id on trigger |
+| `align` | `'start' \| 'center' \| 'end'` | `'start'` | Popover alignment |
+| `timeSlots` | `TimeSlotConfig` | see below | Time range config |
+
+### `timeSlots` config
+
+```tsx
+<DateTimePicker
+  value={value}
+  onChange={setValue}
+  timeSlots={{
+    startHour: 5,      // first slot hour (24h)
+    endHour: 24,       // exclusive end (24 = include 23:30)
+    intervalMinutes: 30,
+  }}
+/>
+```
+
+---
+
+## Exported helpers
+
+```tsx
+import {
+  toLocalInputValue,       // Date → "2026-06-21T14:30"
+  parseLocalInputValue,    // string → Date | null
+  formatLocalInputDisplay, // string → "Jun 21, 2026, 14:30"
+  combineLocalDateTime,      // date + hours + minutes → string
+  generateTimeSlots,
+  getQuickDateOptions,
+  useDateTimeSelection,    // headless hook
+  DateTimePickerContent,   // panel without popover
+} from '@imperijal/date-time-picker';
+```
+
+---
+
+## Monorepo layout
+
+```
+imperijal-components/          ← NOT published (private root)
+├── packages/
+│   └── date-time-picker/      ← @imperijal/date-time-picker (published)
+└── INSTALL_AND_USAGE.md       ← this file
+```
+
+**Never run `npm publish` from the repo root.** Only publish packages inside `packages/`.
+
+---
+
+## Common errors
+
+### `E403` — Two-factor authentication required
+
+npm blocks publish until 2FA is enabled. See [PUBLISHING.md — Fix E403](./PUBLISHING.md#fix-e403-two-factor-authentication-required).
+
+### Published wrong package name `imperijal-components`
+
+You ran publish from the **monorepo root**. Root must stay `"private": true`. Publish only:
+
+```bash
+cd packages/date-time-picker
+pnpm publish --access public
+```
+
+Or from root:
+
+```bash
+pnpm publish:date-time-picker
+```
+
+### Styles look broken
+
+- Add Tailwind content path for `node_modules/@imperijal/date-time-picker/dist/**/*.js`
+- Ensure CSS variables (`--primary`, etc.) exist in your app
+
+### `Module not found: @imperijal/date-time-picker`
+
+Package not installed or not built. Run `pnpm build` in monorepo, then `pnpm install` in app.
+
+---
+
+## Uninstall / unlink local package
+
+```bash
+cd restoranico
+pnpm unlink --global @imperijal/date-time-picker
+pnpm remove @imperijal/date-time-picker
+```

package/PUBLISHING.md

@@ -0,0 +1,306 @@
+# Publishing `@imperijal/*` packages to npm
+
+Follow these steps in order. You only need to do **Step 1–3 once**; repeat **Step 4–8** for each release.
+
+---
+
+## Step 1 — Create the GitHub repo
+
+1. Go to [github.com/new](https://github.com/new)
+2. Name: `imperijal-components`
+3. Visibility: Public (required for free scoped public packages) or Private
+4. **Do not** initialize with README (you already have files locally)
+
+Then link your local folder:
+
+```bash
+cd /home/marko-og/Documents/wappa/imperijal-components
+git init
+git add .
+git commit -m "chore: initial monorepo with date-time-picker"
+git branch -M main
+git remote add origin git@github.com:YOUR_USERNAME/imperijal-components.git
+git push -u origin main
+```
+
+Replace `YOUR_USERNAME` with your GitHub username or org.
+
+---
+
+## Step 2 — Create an npm account & org (optional)
+
+1. Sign up at [npmjs.com](https://www.npmjs.com/signup)
+2. Verify your email
+3. **Optional but recommended:** create org `imperijal` at [npmjs.com/org/create](https://www.npmjs.com/org/create)
+   - Lets you publish `@imperijal/date-time-picker` under a team name
+   - If you skip this, use `@YOUR_NPM_USERNAME/date-time-picker` instead and update `name` in `packages/date-time-picker/package.json`
+
+---
+
+## Step 3 — Log in to npm locally
+
+```bash
+npm login
+```
+
+Enter username, password, and OTP if 2FA is enabled.
+
+Verify:
+
+```bash
+npm whoami
+```
+
+---
+
+## Step 4 — Install dependencies & build
+
+From the monorepo root:
+
+```bash
+cd /home/marko-og/Documents/wappa/imperijal-components
+pnpm install
+pnpm build
+```
+
+You should see `packages/date-time-picker/dist/` with `index.js`, `index.cjs`, and `index.d.ts`.
+
+Dry-run typecheck:
+
+```bash
+pnpm --filter @imperijal/date-time-picker typecheck
+```
+
+---
+
+## Step 5 — Test locally in restoranico (before publishing)
+
+Link the package without publishing:
+
+```bash
+cd /home/marko-og/Documents/wappa/imperijal-components/packages/date-time-picker
+pnpm link --global
+
+cd /home/marko-og/Documents/wappa/restoranico
+pnpm link --global @imperijal/date-time-picker
+```
+
+In `restoranico`, change imports:
+
+```tsx
+import { DateTimePicker, toLocalInputValue } from '@imperijal/date-time-picker';
+```
+
+Install peer deps in restoranico if missing (most are already there).
+
+When done testing, unlink:
+
+```bash
+cd /home/marko-og/Documents/wappa/restoranico
+pnpm unlink --global @imperijal/date-time-picker
+```
+
+---
+
+## Step 6 — Publish to npm
+
+**Important:** Do **not** run `npm publish` from the monorepo root (`imperijal-components/`).  
+The root is private and not a publishable package. You must publish **`@imperijal/date-time-picker`** only.
+
+### Option A — from package folder (recommended)
+
+```bash
+cd /home/marko-og/Documents/wappa/imperijal-components/packages/date-time-picker
+pnpm publish --access public
+```
+
+### Option B — from monorepo root
+
+```bash
+cd /home/marko-og/Documents/wappa/imperijal-components
+pnpm publish:date-time-picker
+```
+
+When prompted for **OTP**, enter the 6-digit code from your authenticator app (required if 2FA is enabled).
+
+> Scoped packages default to private. `--access public` is required for free public scoped packages.
+
+First publish creates `@imperijal/date-time-picker@0.1.0` on npm.
+
+---
+
+## Fix E403 — Two-factor authentication required
+
+If you see:
+
+```text
+error code E403
+error 403 Forbidden - PUT https://registry.npmjs.org/...
+Two-factor authentication or granular access token with bypass 2fa enabled is required to publish packages.
+```
+
+### What it means
+
+npm **requires 2FA on your account** before you can publish any package. This is a security policy — not a bug in your code.
+
+Your log also showed:
+
+```text
+verbose pkgid imperijal-components@0.0.0
+```
+
+That means publish was attempted for the **wrong package** (monorepo root name). Fix both issues below.
+
+### Fix 1 — Enable 2FA on npm
+
+1. Log in at [npmjs.com](https://www.npmjs.com/)
+2. Click your avatar → **Account**
+3. Open **Enable 2FA** (or **Authentication**)
+4. Choose mode: **Authorization and publishing** (required for `npm publish`)
+   - "Authorization only" is **not** enough to publish
+5. Scan QR code with Google Authenticator / Authy / 1Password
+6. Save recovery codes
+
+Then log in again locally:
+
+```bash
+npm logout
+npm login
+# Enter username, password, then OTP when asked
+npm whoami
+```
+
+When you run `pnpm publish`, npm will ask for a **one-time password (OTP)** — enter the 6-digit code from your app.
+
+### Fix 2 — Publish the correct package
+
+Root `package.json` must have `"private": true` (already fixed). Never publish:
+
+| Wrong | Right |
+|-------|-------|
+| `imperijal-components@0.0.0` | `@imperijal/date-time-picker@0.1.0` |
+| from repo root | from `packages/date-time-picker/` |
+
+Verify before publish:
+
+```bash
+cd packages/date-time-picker
+node -p "require('./package.json').name"
+# must print: @imperijal/date-time-picker
+```
+
+### Fix 3 — Own the `@imperijal` scope (if 403 persists)
+
+If error says you don't have access to scope `@imperijal`:
+
+1. Create org at [npmjs.com/org/create](https://www.npmjs.com/org/create) named `imperijal`, **or**
+2. Rename package in `packages/date-time-picker/package.json`:
+
+```json
+"name": "@YOUR_NPM_USERNAME/date-time-picker"
+```
+
+### Alternative — Granular access token (CI / automation)
+
+For GitHub Actions instead of interactive OTP:
+
+1. [npmjs.com/settings/tokens](https://www.npmjs.com/settings/tokens) → **Generate New Token** → **Granular Access Token**
+2. Permissions: **Read and write** for packages
+3. Enable **Bypass 2FA** (only if your org policy allows)
+4. Use token:
+
+```bash
+npm config set //registry.npmjs.org/:_authToken YOUR_TOKEN
+```
+
+---
+
+## Step 7 — Install in restoranico from npm
+
+After publishing:
+
+```bash
+cd /home/marko-og/Documents/wappa/restoranico
+pnpm add @imperijal/date-time-picker
+```
+
+Usage:
+
+```tsx
+import { DateTimePicker, toLocalInputValue } from '@imperijal/date-time-picker';
+import '@imperijal/date-time-picker/styles.css'; // optional theme tokens
+```
+
+### Tailwind setup (required)
+
+Add the package to Tailwind content scanning in your app:
+
+```js
+// tailwind.config or @source in globals.css (Tailwind v4)
+content: [
+  './src/**/*.{js,ts,jsx,tsx}',
+  './node_modules/@imperijal/date-time-picker/dist/**/*.js',
+]
+```
+
+---
+
+## Step 8 — Release updates
+
+1. Make changes in `packages/date-time-picker`
+2. Bump version:
+
+```bash
+cd packages/date-time-picker
+npm version patch   # 0.1.0 → 0.1.1
+# or: minor / major
+```
+
+3. Rebuild & publish:
+
+```bash
+pnpm build
+pnpm publish --access public
+```
+
+4. Update in restoranico:
+
+```bash
+pnpm update @imperijal/date-time-picker
+```
+
+---
+
+## Checklist before first publish
+
+- [ ] `repository.url` in `package.json` points to your real GitHub repo
+- [ ] `pnpm build` succeeds
+- [ ] `files` in package.json includes `dist` (already set)
+- [ ] README describes peer dependencies
+- [ ] npm login works (`npm whoami`)
+- [ ] Package name `@imperijal/date-time-picker` is available (or rename)
+
+---
+
+## Troubleshooting
+
+| Error | Fix |
+|-------|-----|
+| `E403` + 2FA message | Enable 2FA (Authorization **and publishing**) on npmjs.com — see [Fix E403](#fix-e403--two-factor-authentication-required) |
+| `E403` wrong scope | Create `@imperijal` org or rename package to `@your-user/...` |
+| Published `imperijal-components` by mistake | Root must be `"private": true`; publish from `packages/date-time-picker` |
+| `402 Payment Required` on scoped package | Add `--access public` |
+| Styles missing | Add Tailwind content path + shadcn CSS variables in app |
+| `ERESOLVE` peer deps | Install listed peerDependencies in consumer app |
+
+---
+
+## Monorepo: adding package #2 later
+
+```bash
+cp -r packages/date-time-picker packages/my-new-component
+# edit package.json name → @imperijal/my-new-component
+pnpm install
+pnpm build
+cd packages/my-new-component && pnpm publish --access public
+```

package/README.md

@@ -0,0 +1,35 @@
+# imperijal-components
+
+Monorepo of reusable React UI packages published under the `@imperijal/*` scope.
+
+## Documentation
+
+| Guide | Purpose |
+|-------|---------|
+| [**INSTALL_AND_USAGE.md**](./INSTALL_AND_USAGE.md) | Install in an app + component usage |
+| [**PUBLISHING.md**](./PUBLISHING.md) | Publish to npm + fix E403 / 2FA errors |
+
+## Packages
+
+| Package | Description |
+|---------|-------------|
+| [`@imperijal/date-time-picker`](./packages/date-time-picker) | Date & time picker (`YYYY-MM-DDTHH:mm`) |
+
+## Development
+
+```bash
+pnpm install
+pnpm build
+```
+
+## Adding a new component
+
+```bash
+mkdir -p packages/my-component/src
+# add package.json, tsconfig, tsup.config.ts
+# register in pnpm-workspace.yaml (already uses packages/*)
+```
+
+## Publishing
+
+See [PUBLISHING.md](./PUBLISHING.md). **Never** run `npm publish` from this root folder.

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "imperijal-components",
+  "private": false,
+  "version": "0.0.0",
+  "description": "Imperijal reusable React component packages (monorepo root — not published to npm)",
+  "keywords": [
+    "react",
+    "components",
+    "ui"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "pnpm -r build",
+    "dev": "pnpm -r dev",
+    "lint": "pnpm -r lint",
+    "typecheck": "pnpm -r typecheck",
+    "publish:date-time-picker": "pnpm --filter @imperijal/date-time-picker publish --access public --no-git-checks"
+  }
+}