@schandlergarcia/sf-web-components 1.0.0 → 1.0.1

package/.a4drules/skills/outer-app/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: outer-app
+description: >-
+  Routing, layout, and conventions for the outer app (everything outside
+  /command-center). Use when working with app routes, auth, navigation,
+  shadcn components, or outer app pages.
+---
+
+# Outer App (Non-Command-Center)
+
+The outer app handles navigation, global search, and standard pages. It uses an entirely different UI stack from the command center.
+
+## UI Stack
+
+- **Components:** shadcn/ui (`src/components/ui/`) — Radix UI primitives styled with CVA + Tailwind
+- **Icons:** Lucide React (`lucide-react`) — NOT Heroicons
+- **Utility:** `cn()` from `src/lib/utils.ts` (clsx + tailwind-merge)
+- **Styling:** Tailwind CSS 4 + shadcn theme variables (oklch-based in `global.css`)
+- **Language:** TypeScript (`.tsx`/`.ts`)
+
+## Routing
+
+Routes defined in `src/routes.tsx` as `RouteObject[]`, consumed by `createBrowserRouter` in `src/app.tsx`.
+
+Route tree:
+- `/` — `AppLayout` (wraps all routes)
+  - `/` (index) — `Home` (renders `CommandCenter` — command center world)
+  - `/search` — Search page (global search input)
+  - `/test-acc` — Test ACC page
+  - `/global-search/:query` — Search results (Suspense-wrapped)
+  - `/object/:objectApiName/:recordId` — Detail page (Suspense-wrapped)
+  - `*` — `NotFound`
+
+### Adding a New Outer App Route
+
+1. Create page component in `src/pages/` or `src/features/*/pages/`
+2. Add route object in `src/routes.tsx` under the appropriate layout
+3. Set `handle: { showInNavigation: true, label: "..." }` if it should appear in the nav bar
+
+### Navigation
+
+`AppLayout` (`src/appLayout.tsx`) auto-generates nav from routes with `handle.showInNavigation === true`. The nav uses React Router `<Link>` components.
+
+## shadcn/ui Components
+
+Available in `src/components/ui/`: `alert`, `button`, `card`, `dialog`, `field`, `input`, `label`, `pagination`, `select`, `separator`, `skeleton`, `spinner`, `table`, `tabs`.
+
+Add new ones via: `npx shadcn@latest add <component>`
+
+Configuration in `src/components.json` (New York style, neutral base color).
+
+## Salesforce Integration
+
+- SDK imports (`@salesforce/*`) are stubbed in standalone mode via Vite alias → `src/stubs/`
+- Stubs return sample data (accounts, filters, object metadata) for local dev
+- Real SDKs are linked via `file:` references when deployed to Salesforce
+
+## Do Not
+
+- Import command center library (`@/components/library`) in outer app code
+- Import Heroicons in outer app code (use Lucide)
+- Import HeroUI components in outer app code
+- Use `brand-*` Tailwind classes in outer app code (those are command center tokens)
+- Add `.heroui-scope` class outside of `CommandCenter.tsx`

package/README.md

@@ -1,11 +1,11 @@
-# @salesforce/sf-web-components
+# @schandlergarcia/sf-web-components
 
 Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui components.
 
 ## Installation
 
 ```bash
-npm install @salesforce/sf-web-components
+npm install @schandlergarcia/sf-web-components
 ```
 
 ## Peer Dependencies
@@ -20,8 +20,8 @@ This package requires:
 ### Import Components
 
 ```tsx
-import { Button, Card } from '@salesforce/sf-web-components';
-import { cn } from '@salesforce/sf-web-components/lib';
+import { Button, Card } from '@schandlergarcia/sf-web-components';
+import { cn } from '@schandlergarcia/sf-web-components/lib';
 
 function App() {
   return (
@@ -37,7 +37,7 @@ function App() {
 Add to your main CSS file:
 
 ```css
-@import '@salesforce/sf-web-components/styles';
+@import '@schandlergarcia/sf-web-components/styles';
 ```
 
 ### Tailwind Configuration
@@ -50,7 +50,7 @@ import type { Config } from 'tailwindcss';
 export default {
   content: [
     './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@salesforce/sf-web-components/dist/**/*.{js,jsx}'
+    './node_modules/@schandlergarcia/sf-web-components/dist/**/*.{js,jsx}'
   ],
   theme: {
     extend: {}
@@ -71,7 +71,7 @@ This library includes:
 ## Utilities
 
 ```tsx
-import { cn } from '@salesforce/sf-web-components/lib';
+import { cn } from '@schandlergarcia/sf-web-components/lib';
 
 // Merge Tailwind classes with conflict resolution
 const className = cn('px-2 py-1', 'px-4'); // Result: 'py-1 px-4'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",