@thesquad-components/sqd-module-template 0.1.8 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +132 -35
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,56 +1,153 @@
1
- # Untitled UI starter kit for Next.js
1
+ # SQD Module Template: Agent's Guide
2
2
 
3
- This is an official Untitled UI starter kit for Next.js. Kickstart your Untitled UI project with Next.js in seconds.
3
+ 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.
4
4
 
5
- ## Untitled UI React
5
+ NPM package: `https://www.npmjs.com/package/@thesquad-components/sqd-module-template`
6
6
 
7
- [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.
7
+ ## Rules (must follow)
8
8
 
9
- 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.
9
+ - **UI assets:** Only use Untitled UI icons from `https://www.untitledui.com/resources/icons`.
10
+ - **UI components:** Only use Untitled UI React components from `https://www.untitledui.com/react/components`.
11
+ - **API calls:** All API calls must go through your **own Next.js API routes** (no direct calls from components).
12
+ - **Module key header:** Every outbound API request must include `x-sqd-module-key`.
13
+ - **Env vars:** Use the **existing** Vercel env vars (do not create new keys).
14
+ - **Supabase:** Use the **`@supabase/supabase-js`** library for all Supabase access.
10
15
 
11
- [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)
16
+ ### Supabase example (API server route)
12
17
 
13
- ## Getting started
18
+ ```ts
19
+ import { createClient } from "@supabase/supabase-js";
14
20
 
15
- First, run the development server:
21
+ const supabase = createClient(
22
+ process.env.SUPABASE_URL!,
23
+ process.env.SUPABASE_SERVICE_ROLE_KEY!
24
+ );
25
+
26
+ // inside your route handler:
27
+ const { data, error } = await supabase.from("your_table").select("*");
28
+ ```
29
+
30
+ ---
31
+
32
+ ## Beginner Guide: Clone, Build, Publish, Use (with API + Supabase)
33
+
34
+ ### 1) Clone both repos
35
+
36
+ Single command (both at once):
37
+
38
+ ```bash
39
+ git clone https://github.com/sis-thesqd/sqd-module-template && git clone https://github.com/sis-thesqd/sqd-api-server
40
+ ```
41
+
42
+ Or two commands:
43
+
44
+ ```bash
45
+ git clone https://github.com/sis-thesqd/sqd-module-template
46
+ git clone https://github.com/sis-thesqd/sqd-api-server
47
+ ```
48
+
49
+ ### 2) Install dependencies (in the template repo)
50
+
51
+ ```bash
52
+ cd sqd-module-template
53
+ npm install
54
+ ```
55
+
56
+ ### 3) Rename the package
57
+
58
+ - Open `package.json`
59
+ - Set `name` to `@thesquad-components/your-app-name`
60
+ - Save
61
+
62
+ ### 4) Build your Untitled UI app
63
+
64
+ - Open `src`
65
+ - Replace starter components with your UI
66
+ - Keep exports consistent for imports later
67
+
68
+ ### 5) Create API routes for all API calls (module repo)
69
+
70
+ - Create files under `src/app/api/<your-route>/route.ts`
71
+ - Each route should call your backend (or any external API) and return JSON
72
+ - Always include `x-sqd-module-key` when calling outward
73
+
74
+ ### 6) Supabase setup for API server routes
75
+
76
+ Available env vars in `sqd-api-server`:
77
+
78
+ - `SUPABASE_URL`
79
+ - `SUPABASE_SERVICE_ROLE_KEY`
80
+ - `SQD_MODULE_KEY` (use this one; already set in Vercel)
81
+
82
+ In your API server route, create a Supabase client using those env vars, then run queries and return JSON.
83
+
84
+ ### 7) Test locally
16
85
 
17
86
  ```bash
18
87
  npm run dev
19
- # or
20
- yarn dev
21
- # or
22
- pnpm dev
23
- # or
24
- bun dev
88
+ npm run build
25
89
  ```
26
90
 
27
- Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
91
+ ### 8) Publish to npm under @thesquad-components
92
+
93
+ ```bash
94
+ npm login
95
+ npm publish --access public
96
+ ```
97
+
98
+ If the package should be private, use `--access restricted`.
99
+
100
+ #### Publish using an access token
28
101
 
29
- You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
102
+ 1) Create a token at `https://www.npmjs.com/settings` (Access Tokens)
103
+ 2) In terminal #1:
104
+
105
+ ```bash
106
+ export NPM_TOKEN=npm_...
107
+ ```
108
+
109
+ 3) In terminal #2 (same folder):
110
+
111
+ ```bash
112
+ npm publish --access public
113
+ ```
114
+
115
+ ### 9) Use it in another app
116
+
117
+ ```bash
118
+ npm install @thesquad-components/your-app-name
119
+ ```
120
+
121
+ ```ts
122
+ import { YourComponent } from "@thesquad-components/your-app-name";
123
+ ```
124
+
125
+ ### 10) Update later
126
+
127
+ - Make changes
128
+ - Bump version in `package.json`
129
+ - Publish again:
130
+
131
+ ```bash
132
+ npm publish
133
+ ```
30
134
 
31
- ## Resources
135
+ ---
32
136
 
33
- 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:
137
+ ## NPM account + org access (@thesquad-components)
34
138
 
35
- **[Untitled UI Figma:](https://www.untitledui.com/react/resources/figma-files)** The world's largest Figma UI kit and design system.
36
- <br/>
37
- **[Untitled UI Icons:](https://www.untitledui.com/react/resources/icons)** A clean, consistent, and neutral icon library crafted specifically for modern UI design.
38
- <br/>
39
- **[Untitled UI file icons:](https://www.untitledui.com/react/resources/file-icons)** Free file format icons, designed specifically for modern web and UI design.
40
- <br/>
41
- **[Untitled UI flag icons:](https://www.untitledui.com/react/resources/flag-icons)** Free country flag icons, designed specifically for modern web and UI design.
42
- <br/>
43
- **[Untitled UI avatars:](https://www.untitledui.com/react/resources/avatars)** Free placeholder user avatars and profile pictures to use in your projects.
44
- <br/>
45
- **[Untitled UI logos:](https://www.untitledui.com/react/resources/logos)** Free fictional company logos to use in your projects.
139
+ ### Create an npm account
46
140
 
47
- ## License
141
+ 1) Go to `https://www.npmjs.com/signup`
142
+ 2) Create an account and verify your email
143
+ 3) Enable 2FA (recommended)
48
144
 
49
- Untitled UI React open-source components are licensed under the MIT license, which means you can use them for free in unlimited commercial projects.
145
+ ### Request access to the org (owned by Jacob)
50
146
 
51
- > [!NOTE]
52
- > 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).
147
+ Send Jacob the following:
53
148
 
54
- [Untitled UI license agreement →](https://www.untitledui.com/license)
149
+ - Your npm username
150
+ - The email on your npm account
151
+ - Confirmation you enabled 2FA
55
152
 
56
- [Frequently asked questions →](https://www.untitledui.com/faqs)
153
+ Once added to `@thesquad-components`, you can publish under the scope.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thesquad-components/sqd-module-template",
3
- "version": "0.1.8",
3
+ "version": "0.2.0",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "next dev --turbopack",