@thesquad-components/sqd-module-template 0.1.7 → 0.1.9

package/README.md

@@ -1,56 +1,138 @@
-# Untitled UI starter kit for Next.js
+# SQD Module Template: Agent's Guide
 
-This is an official Untitled UI starter kit for Next.js. Kickstart your Untitled UI project with Next.js in seconds.
+This guide shows how to clone the template, build any Untitled UI app, wire API routes, use Supabase in the API server, publish to npm, and consume the package elsewhere.
 
-## Untitled UI React
+NPM package: `https://www.npmjs.com/package/@thesquad-components/sqd-module-template`
 
-[Untitled UI React](https://www.untitledui.com/react) is the world’s largest collection of open-source React UI components. Everything you need to design and develop modern, beautiful interfaces—fast.
+## Rules (must follow)
 
-Built with React 19.1, Tailwind CSS v4.1, TypeScript 5.8, and React Aria, Untitled UI React components deliver modern performance, type safety, and maintainability.
+- **UI assets:** Only use Untitled UI icons from `https://www.untitledui.com/resources/icons`.
+- **UI components:** Only use Untitled UI React components from `https://www.untitledui.com/react/components`.
+- **API calls:** All API calls must go through your **own Next.js API routes** (no direct calls from components).
+- **Module key header:** Every outbound API request must include `x-sqd-module-key`.
+- **Env vars:** Use the **existing** Vercel env vars (do not create new keys).
+- **Supabase:** Use the **`@supabase/supabase-js`** library for all Supabase access.
 
-[Learn more](https://www.untitledui.com/react) • [Documentation](https://www.untitledui.com/react/docs/introduction) • [Figma](https://www.untitledui.com/figma) • [FAQs](https://www.untitledui.com/faqs)
+### Supabase example (API server route)
 
-## Getting started
+```ts
+import { createClient } from "@supabase/supabase-js";
 
-First, run the development server:
+const supabase = createClient(
+  process.env.SUPABASE_URL!,
+  process.env.SUPABASE_SERVICE_ROLE_KEY!
+);
+
+// inside your route handler:
+const { data, error } = await supabase.from("your_table").select("*");
+```
+
+---
+
+## Beginner Guide: Clone, Build, Publish, Use (with API + Supabase)
+
+### 1) Clone both repos
+
+Single command (both at once):
+
+```bash
+git clone https://github.com/sis-thesqd/sqd-module-template && git clone https://github.com/sis-thesqd/sqd-api-server
+```
+
+Or two commands:
+
+```bash
+git clone https://github.com/sis-thesqd/sqd-module-template
+git clone https://github.com/sis-thesqd/sqd-api-server
+```
+
+### 2) Install dependencies (in the template repo)
+
+```bash
+cd sqd-module-template
+npm install
+```
+
+### 3) Rename the package
+
+- Open `package.json`
+- Set `name` to `@thesquad-components/your-app-name`
+- Save
+
+### 4) Build your Untitled UI app
+
+- Open `src`
+- Replace starter components with your UI
+- Keep exports consistent for imports later
+
+### 5) Create API routes for all API calls (module repo)
+
+- Create files under `src/app/api/<your-route>/route.ts`
+- Each route should call your backend (or any external API) and return JSON
+- Always include `x-sqd-module-key` when calling outward
+
+### 6) Supabase setup for API server routes
+
+Available env vars in `sqd-api-server`:
+
+- `SUPABASE_URL`
+- `SUPABASE_SERVICE_ROLE_KEY`
+- `SQD_MODULE_KEY` (use this one; already set in Vercel)
+
+In your API server route, create a Supabase client using those env vars, then run queries and return JSON.
+
+### 7) Test locally
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+npm run build
+```
+
+### 8) Publish to npm under @thesquad-components
+
+```bash
+npm login
+npm publish --access public
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+If the package should be private, use `--access restricted`.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### 9) Use it in another app
+
+```bash
+npm install @thesquad-components/your-app-name
+```
+
+```ts
+import { YourComponent } from "@thesquad-components/your-app-name";
+```
+
+### 10) Update later
+
+- Make changes
+- Bump version in `package.json`
+- Publish again:
+
+```bash
+npm publish
+```
 
-## Resources
+---
 
-Untitled UI React is built on top of [Untitled UI Figma](https://www.untitledui.com/figma), the world's largest and most popular Figma UI kit and design system. Explore more:
+## NPM account + org access (@thesquad-components)
 
-**[Untitled UI Figma:](https://www.untitledui.com/react/resources/figma-files)** The world's largest Figma UI kit and design system.
-<br/>
-**[Untitled UI Icons:](https://www.untitledui.com/react/resources/icons)** A clean, consistent, and neutral icon library crafted specifically for modern UI design.
-<br/>
-**[Untitled UI file icons:](https://www.untitledui.com/react/resources/file-icons)** Free file format icons, designed specifically for modern web and UI design.
-<br/>
-**[Untitled UI flag icons:](https://www.untitledui.com/react/resources/flag-icons)** Free country flag icons, designed specifically for modern web and UI design.
-<br/>
-**[Untitled UI avatars:](https://www.untitledui.com/react/resources/avatars)** Free placeholder user avatars and profile pictures to use in your projects.
-<br/>
-**[Untitled UI logos:](https://www.untitledui.com/react/resources/logos)** Free fictional company logos to use in your projects.
+### Create an npm account
 
-## License
+1) Go to `https://www.npmjs.com/signup`
+2) Create an account and verify your email
+3) Enable 2FA (recommended)
 
-Untitled UI React open-source components are licensed under the MIT license, which means you can use them for free in unlimited commercial projects.
+### Request access to the org (owned by Jacob)
 
-> [!NOTE]
-> This license applies only to the starter kit and to the components included in this open-source repository. [Untitled UI React PRO](https://www.untitledui.com/react) includes hundreds more advanced UI components and page examples and is subject to a separate [license agreement](https://www.untitledui.com/license).
+Send Jacob the following:
 
-[Untitled UI license agreement →](https://www.untitledui.com/license)
+- Your npm username
+- The email on your npm account
+- Confirmation you enabled 2FA
 
-[Frequently asked questions →](https://www.untitledui.com/faqs)
+Once added to `@thesquad-components`, you can publish under the scope.

package/dist/index.css

@@ -805,9 +805,6 @@
   .right-3\.5 {
     right: calc(var(--spacing) * 3.5);
   }
-  .right-4 {
-    right: calc(var(--spacing) * 4);
-  }
   .-bottom-0\.5 {
     bottom: calc(var(--spacing) * -0.5);
   }
@@ -832,9 +829,6 @@
   .bottom-3 {
     bottom: calc(var(--spacing) * 3);
   }
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
-  }
   .bottom-5 {
     bottom: calc(var(--spacing) * 5);
   }