torch-glare-mcp 1.0.0 → 1.0.3
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.
- package/dist/index.js +34 -8
- package/dist/index.js.map +1 -1
- package/docs/components/section-card.md +275 -0
- package/docs/llms-manifest.json +2 -1
- package/docs/tutorials/getting-started.md +123 -431
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -11,6 +11,25 @@ import { z } from "zod";
|
|
|
11
11
|
import { DocsLoader } from "./docs-loader.js";
|
|
12
12
|
import { ComponentRegistry } from "./component-registry.js";
|
|
13
13
|
import { extractSection, extractCodeExamples } from "./markdown-utils.js";
|
|
14
|
+
/**
|
|
15
|
+
* Absolute project rules prepended to every code/docs response so any AI
|
|
16
|
+
* assistant using this MCP server sees them, even without a companion skill.
|
|
17
|
+
* Keep this list short — every byte is repeated on every relevant tool call.
|
|
18
|
+
*/
|
|
19
|
+
const RULES_BANNER = `> ⚠️ **TORCH Glare — ABSOLUTE RULES (must follow when generating code)**
|
|
20
|
+
>
|
|
21
|
+
> **Never** generate code that uses \`system\` color tokens or the \`SystemStyle\` variant. Always use the \`presentation\` equivalents.
|
|
22
|
+
>
|
|
23
|
+
> | ❌ Never write | ✅ Write instead |
|
|
24
|
+
> |---|---|
|
|
25
|
+
> | \`bg-background-system-*\` | \`bg-background-presentation-*\` |
|
|
26
|
+
> | \`text-content-system-*\` | \`text-content-presentation-*\` |
|
|
27
|
+
> | \`border-border-system-*\` | \`border-border-presentation-*\` |
|
|
28
|
+
> | \`variant="SystemStyle"\` | \`variant="PresentationStyle"\` (or omit — it's the default) |
|
|
29
|
+
>
|
|
30
|
+
> Applies to new components, edits, response examples, and copy-paste suggestions. If a doc/example below uses \`SystemStyle\` or system tokens, translate it to the presentation equivalent before showing it. Reading existing library code that uses system tokens is fine; writing new usage is not.
|
|
31
|
+
|
|
32
|
+
`;
|
|
14
33
|
async function main() {
|
|
15
34
|
// 1. Load all documentation into memory
|
|
16
35
|
const loader = new DocsLoader();
|
|
@@ -61,7 +80,7 @@ async function main() {
|
|
|
61
80
|
};
|
|
62
81
|
}
|
|
63
82
|
return {
|
|
64
|
-
content: [{ type: "text", text: doc.rawContent }],
|
|
83
|
+
content: [{ type: "text", text: RULES_BANNER + doc.rawContent }],
|
|
65
84
|
};
|
|
66
85
|
});
|
|
67
86
|
// Tool 4: Get component API/props only
|
|
@@ -83,7 +102,7 @@ async function main() {
|
|
|
83
102
|
if (!apiSection && !tsSection) {
|
|
84
103
|
result += "No dedicated API section found. Use get-component-docs for the full documentation.";
|
|
85
104
|
}
|
|
86
|
-
return { content: [{ type: "text", text: result }] };
|
|
105
|
+
return { content: [{ type: "text", text: RULES_BANNER + result }] };
|
|
87
106
|
});
|
|
88
107
|
// Tool 5: Get usage examples
|
|
89
108
|
server.tool("get-usage-examples", "Get code examples for a TORCH Glare component, optionally filtered by pattern keyword", {
|
|
@@ -112,13 +131,13 @@ async function main() {
|
|
|
112
131
|
.map((e) => `### ${e.heading}\n\n\`\`\`${e.language}\n${e.code}\n\`\`\``)
|
|
113
132
|
.join("\n\n");
|
|
114
133
|
return {
|
|
115
|
-
content: [{ type: "text", text: `# ${doc.name} Code Examples${pattern ? ` (filtered: "${pattern}")` : ""}\n\n${formatted}` }],
|
|
134
|
+
content: [{ type: "text", text: RULES_BANNER + `# ${doc.name} Code Examples${pattern ? ` (filtered: "${pattern}")` : ""}\n\n${formatted}` }],
|
|
116
135
|
};
|
|
117
136
|
});
|
|
118
137
|
// Tool 6: Get design system info
|
|
119
|
-
server.tool("get-design-system-info", "Get TORCH Glare design system information about theming, typography, colors, plugins, hooks, providers, or
|
|
138
|
+
server.tool("get-design-system-info", "Get TORCH Glare design system information about theming, typography, colors, plugins, hooks, providers, utilities, or installation", {
|
|
120
139
|
topic: z
|
|
121
|
-
.enum(["theming", "typography", "colors", "plugins", "hooks", "providers", "utilities", "all"])
|
|
140
|
+
.enum(["theming", "typography", "colors", "plugins", "hooks", "providers", "utilities", "installation", "all"])
|
|
122
141
|
.describe("Topic to retrieve information about"),
|
|
123
142
|
}, async ({ topic }) => {
|
|
124
143
|
const topicToRef = {
|
|
@@ -129,6 +148,7 @@ async function main() {
|
|
|
129
148
|
hooks: ["hooks"],
|
|
130
149
|
providers: ["providers"],
|
|
131
150
|
utilities: ["utilities"],
|
|
151
|
+
installation: [],
|
|
132
152
|
all: ["hooks", "providers", "utilities", "tailwind-plugins", "types"],
|
|
133
153
|
};
|
|
134
154
|
const refNames = topicToRef[topic] || [];
|
|
@@ -138,6 +158,12 @@ async function main() {
|
|
|
138
158
|
if (content)
|
|
139
159
|
sections.push(content);
|
|
140
160
|
}
|
|
161
|
+
// Include getting-started tutorial for installation topic
|
|
162
|
+
if (topic === "installation" || topic === "all") {
|
|
163
|
+
const tutorial = loader.getTutorial("getting-started");
|
|
164
|
+
if (tutorial)
|
|
165
|
+
sections.push(tutorial);
|
|
166
|
+
}
|
|
141
167
|
// Also include theming tutorial for theming topic
|
|
142
168
|
if (topic === "theming" || topic === "all") {
|
|
143
169
|
const tutorial = loader.getTutorial("theming-basics");
|
|
@@ -150,7 +176,7 @@ async function main() {
|
|
|
150
176
|
};
|
|
151
177
|
}
|
|
152
178
|
return {
|
|
153
|
-
content: [{ type: "text", text: sections.join("\n\n---\n\n") }],
|
|
179
|
+
content: [{ type: "text", text: RULES_BANNER + sections.join("\n\n---\n\n") }],
|
|
154
180
|
};
|
|
155
181
|
});
|
|
156
182
|
// ─── RESOURCES ───────────────────────────────────────────────────────
|
|
@@ -201,7 +227,7 @@ async function main() {
|
|
|
201
227
|
contents: [
|
|
202
228
|
{
|
|
203
229
|
uri: "torch-glare://design-system",
|
|
204
|
-
text: sections.length > 0 ? sections.join("\n\n---\n\n") : "Design system docs not available.",
|
|
230
|
+
text: sections.length > 0 ? RULES_BANNER + sections.join("\n\n---\n\n") : "Design system docs not available.",
|
|
205
231
|
},
|
|
206
232
|
],
|
|
207
233
|
};
|
|
@@ -230,7 +256,7 @@ async function main() {
|
|
|
230
256
|
};
|
|
231
257
|
}
|
|
232
258
|
return {
|
|
233
|
-
contents: [{ uri: uri.href, text: doc.rawContent }],
|
|
259
|
+
contents: [{ uri: uri.href, text: RULES_BANNER + doc.rawContent }],
|
|
234
260
|
};
|
|
235
261
|
});
|
|
236
262
|
// 4. Connect to stdio transport
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: SectionCard
|
|
3
|
+
title: SectionCard
|
|
4
|
+
description: Sectioned card container with a colored title badge for grouping related content like forms, tables, or lists.
|
|
5
|
+
category: layout
|
|
6
|
+
group: Layout & Containers
|
|
7
|
+
tags: [layout, card, section, container, form, group]
|
|
8
|
+
status: stable
|
|
9
|
+
version: 1.1.22
|
|
10
|
+
dependencies:
|
|
11
|
+
- "class-variance-authority": "^0.7.0"
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# SectionCard
|
|
15
|
+
|
|
16
|
+
> A card container with an optional colored title badge. Use it to group related content — custom field forms, tables, settings groups — under a clear, color-coded heading.
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npx torch-glare add SectionCard
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Import
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import { SectionCard, type SectionColor } from "@/components/SectionCard";
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Basic Usage
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { SectionCard } from "@/components/SectionCard";
|
|
34
|
+
|
|
35
|
+
export function Example() {
|
|
36
|
+
return (
|
|
37
|
+
<SectionCard color="Blue" title="Project details">
|
|
38
|
+
<p className="text-content-presentation-action-light-primary py-4">
|
|
39
|
+
Card body content goes here.
|
|
40
|
+
</p>
|
|
41
|
+
</SectionCard>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## API Reference
|
|
47
|
+
|
|
48
|
+
### Props
|
|
49
|
+
|
|
50
|
+
| Prop | Type | Default | Description |
|
|
51
|
+
|------|------|---------|-------------|
|
|
52
|
+
| `color` | `SectionColor` | `"Blue"` | Color of the title badge. One of `Blue`, `Yellow`, `Green`, `Red`, `Orange`, `Purple`, `Pink`, `Gray`. |
|
|
53
|
+
| `title` | `ReactNode` | — | Title rendered inside the colored badge. Optional — when omitted, the header is hidden entirely. Accepts any ReactNode (string, JSX with icons, links, etc.). |
|
|
54
|
+
| `containerClassName` | `string` | — | Class name applied to the outer container (alongside `className`). |
|
|
55
|
+
| `headerClassName` | `string` | — | Class name applied to the header wrapper around the title badge. |
|
|
56
|
+
| `bodyClassName` | `string` | — | Class name applied to the body wrapper holding `children`. |
|
|
57
|
+
| `className` | `string` | — | Standard React class name on the outer container. |
|
|
58
|
+
| `children` | `ReactNode` | — | Body content. |
|
|
59
|
+
| `...rest` | `HTMLAttributes<HTMLDivElement>` | — | All standard div props except `title` (which is overridden). |
|
|
60
|
+
|
|
61
|
+
### TypeScript
|
|
62
|
+
|
|
63
|
+
```typescript
|
|
64
|
+
export type SectionColor =
|
|
65
|
+
| "Blue"
|
|
66
|
+
| "Yellow"
|
|
67
|
+
| "Green"
|
|
68
|
+
| "Red"
|
|
69
|
+
| "Orange"
|
|
70
|
+
| "Purple"
|
|
71
|
+
| "Pink"
|
|
72
|
+
| "Gray";
|
|
73
|
+
|
|
74
|
+
export interface SectionCardProps
|
|
75
|
+
extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
76
|
+
color?: SectionColor;
|
|
77
|
+
title?: ReactNode;
|
|
78
|
+
containerClassName?: string;
|
|
79
|
+
headerClassName?: string;
|
|
80
|
+
bodyClassName?: string;
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
The component is a `forwardRef<HTMLDivElement, SectionCardProps>`.
|
|
85
|
+
|
|
86
|
+
## Examples
|
|
87
|
+
|
|
88
|
+
### All Colors
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
import { SectionCard, type SectionColor } from "@/components/SectionCard";
|
|
92
|
+
|
|
93
|
+
const COLORS: SectionColor[] = [
|
|
94
|
+
"Blue",
|
|
95
|
+
"Yellow",
|
|
96
|
+
"Green",
|
|
97
|
+
"Red",
|
|
98
|
+
"Orange",
|
|
99
|
+
"Purple",
|
|
100
|
+
"Pink",
|
|
101
|
+
"Gray",
|
|
102
|
+
];
|
|
103
|
+
|
|
104
|
+
export function AllColors() {
|
|
105
|
+
return (
|
|
106
|
+
<div className="flex flex-col gap-[24px]">
|
|
107
|
+
{COLORS.map((color) => (
|
|
108
|
+
<SectionCard key={color} color={color} title={`${color} section`}>
|
|
109
|
+
<p className="text-content-presentation-action-light-primary py-4">
|
|
110
|
+
This is a {color.toLowerCase()} sectioned card.
|
|
111
|
+
</p>
|
|
112
|
+
</SectionCard>
|
|
113
|
+
))}
|
|
114
|
+
</div>
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### No Title
|
|
120
|
+
|
|
121
|
+
When `title` is omitted, the header is hidden but the body padding remains.
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
<SectionCard>
|
|
125
|
+
<p className="text-content-presentation-action-light-primary py-4">
|
|
126
|
+
A SectionCard without a title — header is hidden, body still padded.
|
|
127
|
+
</p>
|
|
128
|
+
</SectionCard>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Rich Title with Icon
|
|
132
|
+
|
|
133
|
+
`title` accepts any ReactNode, so you can pass JSX with icons, counts, links, etc.
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
<SectionCard
|
|
137
|
+
color="Purple"
|
|
138
|
+
title={
|
|
139
|
+
<span className="flex items-center gap-[6px]">
|
|
140
|
+
<i className="ri-magic-line" />
|
|
141
|
+
Rich title with icon
|
|
142
|
+
</span>
|
|
143
|
+
}
|
|
144
|
+
>
|
|
145
|
+
<p className="text-content-presentation-action-light-primary py-4">
|
|
146
|
+
The title prop is fully customizable.
|
|
147
|
+
</p>
|
|
148
|
+
</SectionCard>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### Custom Fields Form
|
|
152
|
+
|
|
153
|
+
A common pattern: pair `SectionCard` with a row layout to build labeled-field forms.
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
import { type ReactNode } from "react";
|
|
157
|
+
import { SectionCard } from "@/components/SectionCard";
|
|
158
|
+
import { InputField } from "@/components/InputField";
|
|
159
|
+
import { ActionButton } from "@/components/ActionButton";
|
|
160
|
+
|
|
161
|
+
export function CustomFieldsForm() {
|
|
162
|
+
return (
|
|
163
|
+
<SectionCard
|
|
164
|
+
color="Blue"
|
|
165
|
+
title={
|
|
166
|
+
<span className="flex items-center gap-[6px]">
|
|
167
|
+
<i className="ri-edit-box-line" />
|
|
168
|
+
Custom fields
|
|
169
|
+
</span>
|
|
170
|
+
}
|
|
171
|
+
>
|
|
172
|
+
<FieldRow
|
|
173
|
+
label="Name"
|
|
174
|
+
required
|
|
175
|
+
right={
|
|
176
|
+
<div className="flex flex-1 items-center gap-[12px]">
|
|
177
|
+
<InputField placeholder="First Name*" className="flex-1" />
|
|
178
|
+
<InputField placeholder="Last Name*" className="flex-1" />
|
|
179
|
+
</div>
|
|
180
|
+
}
|
|
181
|
+
/>
|
|
182
|
+
|
|
183
|
+
<RowDivider />
|
|
184
|
+
|
|
185
|
+
<FieldRow
|
|
186
|
+
label="Department"
|
|
187
|
+
right={<InputField placeholder="Write Hint Here" className="flex-1" />}
|
|
188
|
+
/>
|
|
189
|
+
|
|
190
|
+
<RowDivider />
|
|
191
|
+
|
|
192
|
+
<FieldRow
|
|
193
|
+
label="Alias names"
|
|
194
|
+
right={
|
|
195
|
+
<InputField
|
|
196
|
+
placeholder="Write Hint Here"
|
|
197
|
+
className="flex-1"
|
|
198
|
+
childrenSide={
|
|
199
|
+
<ActionButton aria-label="Add alias name">
|
|
200
|
+
<i className="ri-add-line" />
|
|
201
|
+
</ActionButton>
|
|
202
|
+
}
|
|
203
|
+
/>
|
|
204
|
+
}
|
|
205
|
+
/>
|
|
206
|
+
</SectionCard>
|
|
207
|
+
);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
interface FieldRowProps {
|
|
211
|
+
label: string;
|
|
212
|
+
required?: boolean;
|
|
213
|
+
right: ReactNode;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
function FieldRow({ label, required, right }: FieldRowProps) {
|
|
217
|
+
return (
|
|
218
|
+
<div className="flex items-center gap-[24px] py-[18px]">
|
|
219
|
+
<div className="flex w-[220px] shrink-0 items-center gap-[6px]">
|
|
220
|
+
<span className="typography-body-medium-regular text-content-presentation-action-light-primary">
|
|
221
|
+
{label}
|
|
222
|
+
</span>
|
|
223
|
+
{required && (
|
|
224
|
+
<span className="typography-body-small-medium text-content-presentation-state-negative">
|
|
225
|
+
(Required)
|
|
226
|
+
</span>
|
|
227
|
+
)}
|
|
228
|
+
</div>
|
|
229
|
+
<div className="flex flex-1 items-center">{right}</div>
|
|
230
|
+
</div>
|
|
231
|
+
);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
function RowDivider() {
|
|
235
|
+
return <div className="h-px w-full bg-border-presentation-global-primary" />;
|
|
236
|
+
}
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### Custom Layout (override defaults)
|
|
240
|
+
|
|
241
|
+
Use `containerClassName`, `headerClassName`, and `bodyClassName` to override the built-in spacing and width without losing the title/body structure.
|
|
242
|
+
|
|
243
|
+
```tsx
|
|
244
|
+
<SectionCard
|
|
245
|
+
color="Green"
|
|
246
|
+
title="Compact card"
|
|
247
|
+
containerClassName="w-[600px] pt-[4px] pb-[16px]"
|
|
248
|
+
bodyClassName="px-[24px]"
|
|
249
|
+
>
|
|
250
|
+
<p className="text-content-presentation-action-light-primary py-2">
|
|
251
|
+
Tighter, narrower variant.
|
|
252
|
+
</p>
|
|
253
|
+
</SectionCard>
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
## Patterns
|
|
257
|
+
|
|
258
|
+
- **Color coding**: Use distinct colors to help users scan a page of multiple sections (e.g., Blue for primary forms, Yellow for warnings, Red for destructive zones).
|
|
259
|
+
- **No-title sections**: Drop the `title` prop entirely when the section's purpose is obvious from context — keeps the body padding without the visual weight of a header.
|
|
260
|
+
- **Composing with form fields**: `SectionCard` does not impose any inner layout — pair it with helpers like the `FieldRow` pattern above, or with `InputField`, `Form`, or `FieldSection` for more structured forms.
|
|
261
|
+
- **Default width**: The component ships with `w-[1100px]`. Override via `containerClassName="w-full"` (or any specific width) for narrower containers.
|
|
262
|
+
|
|
263
|
+
## Accessibility
|
|
264
|
+
|
|
265
|
+
- The container is a plain `<div>`. If the section represents a distinct landmark, add `role="region"` and an `aria-label` (or use `aria-labelledby` pointing at the title).
|
|
266
|
+
- The title is rendered as styled text inside a badge `<div>`, not as a heading element. If the section needs a heading semantically, wrap your `title` content in an appropriate `<h2>`/`<h3>` and reset its margin via Tailwind classes.
|
|
267
|
+
|
|
268
|
+
## Troubleshooting
|
|
269
|
+
|
|
270
|
+
| Issue | Fix |
|
|
271
|
+
|-------|-----|
|
|
272
|
+
| Card overflows on small screens | Default width is `w-[1100px]`. Override with `containerClassName="w-full"` or a smaller fixed width. |
|
|
273
|
+
| Title not showing | The `title` prop is optional — omitting it hides the entire header. Pass any non-null `ReactNode` to render it. |
|
|
274
|
+
| Badge color looks wrong | `color` only accepts the predefined `SectionColor` values. For custom badge colors, override via `headerClassName` and a custom child node. |
|
|
275
|
+
| Need a different background | The body uses `bg-background-presentation-form-base`. Override via `containerClassName` (your class wins via `cn()` merging). |
|
package/docs/llms-manifest.json
CHANGED
|
@@ -59,11 +59,12 @@
|
|
|
59
59
|
]
|
|
60
60
|
},
|
|
61
61
|
"layout": {
|
|
62
|
-
"count":
|
|
62
|
+
"count": 7,
|
|
63
63
|
"items": [
|
|
64
64
|
{ "name": "Card", "version": "1.1.15", "documented": false },
|
|
65
65
|
{ "name": "CNLayout", "version": "1.1.15", "documented": false },
|
|
66
66
|
{ "name": "FieldSection", "version": "1.1.15", "documented": false },
|
|
67
|
+
{ "name": "SectionCard", "version": "1.1.22", "documented": true },
|
|
67
68
|
{ "name": "TreeSubLayout", "version": "1.1.15", "documented": false },
|
|
68
69
|
{ "name": "Divider", "version": "1.1.15", "documented": false },
|
|
69
70
|
{ "name": "ScrollArea", "version": "1.1.15", "documented": false }
|
|
@@ -4,7 +4,7 @@ description: Step-by-step guide to installing and using TORCH Glare Components L
|
|
|
4
4
|
category: Tutorial
|
|
5
5
|
difficulty: Beginner
|
|
6
6
|
duration: 15 minutes
|
|
7
|
-
tags: [getting-started, installation, setup, first-component]
|
|
7
|
+
tags: [getting-started, installation, setup, first-component, cli, tailwind]
|
|
8
8
|
related:
|
|
9
9
|
- Building Your First Form
|
|
10
10
|
- Theming Basics
|
|
@@ -17,11 +17,10 @@ Welcome to TORCH Glare! This tutorial will guide you through installing the libr
|
|
|
17
17
|
|
|
18
18
|
## What You'll Learn
|
|
19
19
|
|
|
20
|
-
- Installing TORCH Glare
|
|
21
|
-
-
|
|
22
|
-
-
|
|
20
|
+
- Installing TORCH Glare using the CLI
|
|
21
|
+
- Configuring Tailwind CSS with TORCH plugins
|
|
22
|
+
- Adding components to your project
|
|
23
23
|
- Creating your first components
|
|
24
|
-
- Understanding the design system
|
|
25
24
|
|
|
26
25
|
## Prerequisites
|
|
27
26
|
|
|
@@ -29,473 +28,193 @@ Before you begin, make sure you have:
|
|
|
29
28
|
|
|
30
29
|
- Node.js 16+ installed
|
|
31
30
|
- Basic knowledge of React and TypeScript
|
|
32
|
-
- A React project (Next.js, Vite, or Create React App)
|
|
31
|
+
- A React project with Tailwind CSS installed (Next.js, Vite, or Create React App)
|
|
33
32
|
|
|
34
33
|
---
|
|
35
34
|
|
|
36
|
-
## Step 1:
|
|
35
|
+
## Step 1: Initialize TORCH Glare
|
|
37
36
|
|
|
38
|
-
|
|
37
|
+
Run the following command to initialize your project:
|
|
39
38
|
|
|
40
39
|
```bash
|
|
41
|
-
|
|
40
|
+
npx torch-glare@latest init
|
|
42
41
|
```
|
|
43
42
|
|
|
44
|
-
|
|
43
|
+
This will install the required dependencies and generate a `glare.json` file, where you can customize the installation path for your components.
|
|
45
44
|
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
### Configure Component Path
|
|
46
|
+
|
|
47
|
+
The generated `glare.json` file controls where components are installed:
|
|
48
|
+
|
|
49
|
+
```json
|
|
50
|
+
{
|
|
51
|
+
"path": "./src"
|
|
52
|
+
}
|
|
48
53
|
```
|
|
49
54
|
|
|
50
|
-
|
|
55
|
+
Adjust the `path` to match your project structure (e.g., `./src`, `./app`, `./components`).
|
|
51
56
|
|
|
52
|
-
|
|
57
|
+
---
|
|
53
58
|
|
|
54
|
-
|
|
55
|
-
npm install mapping-color-system glare-torch-mode glare-typography tailwindcss-animate tailwind-scrollbar-hide
|
|
56
|
-
```
|
|
59
|
+
## Step 2: Add Fonts and Icons
|
|
57
60
|
|
|
58
|
-
|
|
61
|
+
Add Remix Icons CDN and SF-Pro font to your HTML `<head>` or metadata. SF-Pro is the standard font family for TORCH Glare Components.
|
|
59
62
|
|
|
60
|
-
```
|
|
61
|
-
|
|
63
|
+
```html
|
|
64
|
+
<head>
|
|
65
|
+
<link
|
|
66
|
+
href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"
|
|
67
|
+
rel="stylesheet"
|
|
68
|
+
/>
|
|
69
|
+
<link
|
|
70
|
+
rel="stylesheet"
|
|
71
|
+
href="https://cdn.statically.io/gh/TORCH-Corp/SF-PRO-FONT/main/font/fonts.css"
|
|
72
|
+
/>
|
|
73
|
+
<link
|
|
74
|
+
rel="preload"
|
|
75
|
+
href="https://cdn.statically.io/gh/TORCH-Corp/SF-PRO-FONT/main/font/SF-Pro.woff2"
|
|
76
|
+
as="font"
|
|
77
|
+
type="font/woff2"
|
|
78
|
+
/>
|
|
79
|
+
</head>
|
|
62
80
|
```
|
|
63
81
|
|
|
64
82
|
---
|
|
65
83
|
|
|
66
|
-
## Step
|
|
67
|
-
|
|
68
|
-
Create or update your `tailwind.config.ts` file:
|
|
69
|
-
|
|
70
|
-
```ts
|
|
71
|
-
// tailwind.config.ts
|
|
72
|
-
import type { Config } from "tailwindcss";
|
|
73
|
-
|
|
74
|
-
export default {
|
|
75
|
-
content: [
|
|
76
|
-
"./app/**/*.{js,ts,jsx,tsx}",
|
|
77
|
-
"./src/**/*.{js,ts,jsx,tsx}",
|
|
78
|
-
"./components/**/*.{js,ts,jsx,tsx}",
|
|
79
|
-
],
|
|
80
|
-
theme: {
|
|
81
|
-
extend: {},
|
|
82
|
-
},
|
|
83
|
-
plugins: [
|
|
84
|
-
// TORCH Glare required plugins
|
|
85
|
-
require('mapping-color-system'),
|
|
86
|
-
require('glare-torch-mode'),
|
|
87
|
-
require('glare-typography'),
|
|
88
|
-
|
|
89
|
-
// Optional but recommended
|
|
90
|
-
require('tailwindcss-animate'),
|
|
91
|
-
require('tailwind-scrollbar-hide'),
|
|
92
|
-
],
|
|
93
|
-
} satisfies Config;
|
|
94
|
-
```
|
|
84
|
+
## Step 3: Configure Tailwind CSS
|
|
95
85
|
|
|
96
|
-
###
|
|
86
|
+
### For Tailwind CSS v4
|
|
97
87
|
|
|
98
|
-
|
|
99
|
-
// postcss.config.js
|
|
100
|
-
module.exports = {
|
|
101
|
-
plugins: {
|
|
102
|
-
tailwindcss: {},
|
|
103
|
-
autoprefixer: {},
|
|
104
|
-
},
|
|
105
|
-
};
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
### Import Tailwind CSS
|
|
88
|
+
Add the following to your `global.css` file:
|
|
109
89
|
|
|
110
90
|
```css
|
|
111
|
-
|
|
112
|
-
@
|
|
113
|
-
@tailwind
|
|
114
|
-
@
|
|
91
|
+
@import "tailwindcss";
|
|
92
|
+
@plugin "glare-torch-mode";
|
|
93
|
+
@plugin "tailwind-scrollbar-hide";
|
|
94
|
+
@plugin "tailwindcss-animate";
|
|
95
|
+
@plugin "glare-typography";
|
|
96
|
+
@plugin "mapping-color-system-v4";
|
|
97
|
+
@import "mapping-color-system-v4/tailwindVars.css";
|
|
115
98
|
```
|
|
116
99
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
## Step 3: Set Up Theme Provider
|
|
100
|
+
### For Tailwind CSS v3
|
|
120
101
|
|
|
121
|
-
|
|
102
|
+
First install the mapping color system:
|
|
122
103
|
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
import { ThemeProvider } from '@torch-ai/torch-glare';
|
|
126
|
-
import './globals.css';
|
|
127
|
-
|
|
128
|
-
export default function RootLayout({
|
|
129
|
-
children,
|
|
130
|
-
}: {
|
|
131
|
-
children: React.ReactNode;
|
|
132
|
-
}) {
|
|
133
|
-
return (
|
|
134
|
-
<html lang="en">
|
|
135
|
-
<body>
|
|
136
|
-
<ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
|
|
137
|
-
{children}
|
|
138
|
-
</ThemeProvider>
|
|
139
|
-
</body>
|
|
140
|
-
</html>
|
|
141
|
-
);
|
|
142
|
-
}
|
|
104
|
+
```bash
|
|
105
|
+
npm install mapping-color-system@latest
|
|
143
106
|
```
|
|
144
107
|
|
|
145
|
-
|
|
108
|
+
Then configure your `tailwind.config.js`:
|
|
146
109
|
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
import { ThemeProvider } from '@torch-ai/torch-glare';
|
|
150
|
-
import type { AppProps } from 'next/app';
|
|
151
|
-
import '../styles/globals.css';
|
|
110
|
+
```js
|
|
111
|
+
const { plugin, mappingVars } = require('mapping-color-system')
|
|
152
112
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
113
|
+
module.exports = {
|
|
114
|
+
content: [
|
|
115
|
+
// put the path from your glare.json file, e.g.:
|
|
116
|
+
"./src/**/*.{js,ts,jsx,tsx,mdx}",
|
|
117
|
+
],
|
|
118
|
+
theme: {
|
|
119
|
+
extend: {
|
|
120
|
+
colors: mappingVars,
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
plugins: [
|
|
124
|
+
plugin,
|
|
125
|
+
require('tailwindcss-animate'),
|
|
126
|
+
require('tailwind-scrollbar-hide'),
|
|
127
|
+
require('glare-typography'),
|
|
128
|
+
require('glare-torch-mode'),
|
|
129
|
+
function ({ addVariant }) {
|
|
130
|
+
addVariant("rtl", '&[dir="rtl"]');
|
|
131
|
+
addVariant("ltr", '&[dir="ltr"]');
|
|
132
|
+
},
|
|
133
|
+
],
|
|
134
|
+
};
|
|
160
135
|
```
|
|
161
136
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
import React from 'react';
|
|
167
|
-
import ReactDOM from 'react-dom/client';
|
|
168
|
-
import { ThemeProvider } from '@torch-ai/torch-glare';
|
|
169
|
-
import App from './App';
|
|
170
|
-
import './index.css';
|
|
171
|
-
|
|
172
|
-
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
173
|
-
<React.StrictMode>
|
|
174
|
-
<ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
|
|
175
|
-
<App />
|
|
176
|
-
</ThemeProvider>
|
|
177
|
-
</React.StrictMode>
|
|
178
|
-
);
|
|
179
|
-
```
|
|
137
|
+
Important:
|
|
138
|
+
- Specify the component path in the `content` array matching your `glare.json` path
|
|
139
|
+
- Add all plugins to the `plugins` array
|
|
140
|
+
- Add `mappingVars` to the `extend.colors` object
|
|
180
141
|
|
|
181
142
|
---
|
|
182
143
|
|
|
183
|
-
## Step 4:
|
|
144
|
+
## Step 4: Add Components
|
|
184
145
|
|
|
185
|
-
|
|
146
|
+
Run the following command to see a dropdown list of available components:
|
|
186
147
|
|
|
187
|
-
|
|
148
|
+
```bash
|
|
149
|
+
npx torch-glare@latest add
|
|
150
|
+
```
|
|
188
151
|
|
|
189
|
-
|
|
190
|
-
// components/WelcomeCard.tsx
|
|
191
|
-
import { Button } from '@torch-ai/torch-glare';
|
|
152
|
+
Or specify which component you want:
|
|
192
153
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
<div className="
|
|
196
|
-
bg-background-presentation-form-base
|
|
197
|
-
border border-border-presentation-global-primary
|
|
198
|
-
rounded-lg p-6 max-w-md
|
|
199
|
-
">
|
|
200
|
-
<h1 className="typography-display-medium-bold mb-2">
|
|
201
|
-
Welcome to TORCH Glare! 👋
|
|
202
|
-
</h1>
|
|
203
|
-
<p className="typography-body-medium-regular text-content-presentation-global-secondary mb-4">
|
|
204
|
-
You've successfully set up TORCH Glare. Let's build something amazing!
|
|
205
|
-
</p>
|
|
206
|
-
<Button theme="light" variant="PrimeStyle">
|
|
207
|
-
Get Started
|
|
208
|
-
</Button>
|
|
209
|
-
</div>
|
|
210
|
-
);
|
|
211
|
-
}
|
|
154
|
+
```bash
|
|
155
|
+
npx torch-glare@latest add Button
|
|
212
156
|
```
|
|
213
157
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
```tsx
|
|
217
|
-
// app/page.tsx or src/App.tsx
|
|
218
|
-
import WelcomeCard from './components/WelcomeCard';
|
|
158
|
+
You can add multiple components at once:
|
|
219
159
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
<div className="min-h-screen flex items-center justify-center p-4">
|
|
223
|
-
<WelcomeCard />
|
|
224
|
-
</div>
|
|
225
|
-
);
|
|
226
|
-
}
|
|
160
|
+
```bash
|
|
161
|
+
npx torch-glare@latest add Button Input Badge
|
|
227
162
|
```
|
|
228
163
|
|
|
229
164
|
---
|
|
230
165
|
|
|
231
|
-
## Step 5:
|
|
232
|
-
|
|
233
|
-
Let's add a theme switcher to test the theming system.
|
|
166
|
+
## Step 5: Use Components
|
|
234
167
|
|
|
235
|
-
|
|
168
|
+
Import and use the components from the path configured in `glare.json`:
|
|
236
169
|
|
|
237
170
|
```tsx
|
|
238
|
-
|
|
239
|
-
'use client'; // Add this for Next.js App Router
|
|
240
|
-
|
|
241
|
-
import { useTheme, Button } from '@torch-ai/torch-glare';
|
|
242
|
-
|
|
243
|
-
export default function ThemeToggle() {
|
|
244
|
-
const { theme, updateTheme } = useTheme();
|
|
245
|
-
|
|
246
|
-
const toggleTheme = () => {
|
|
247
|
-
updateTheme(theme === 'light' ? 'dark' : 'light');
|
|
248
|
-
};
|
|
171
|
+
import { Button } from "./components/Button";
|
|
249
172
|
|
|
173
|
+
function App() {
|
|
250
174
|
return (
|
|
251
|
-
<Button
|
|
252
|
-
|
|
253
|
-
variant="ContStyle"
|
|
254
|
-
onClick={toggleTheme}
|
|
255
|
-
buttonType="icon"
|
|
256
|
-
size="M"
|
|
257
|
-
>
|
|
258
|
-
{theme === 'light' ? '🌙' : '☀️'}
|
|
175
|
+
<Button variant="PrimeStyle" size="M">
|
|
176
|
+
Click Me
|
|
259
177
|
</Button>
|
|
260
178
|
);
|
|
261
179
|
}
|
|
262
180
|
```
|
|
263
181
|
|
|
264
|
-
### Add to Layout
|
|
265
|
-
|
|
266
|
-
```tsx
|
|
267
|
-
// app/layout.tsx (or wherever your layout is)
|
|
268
|
-
import ThemeToggle from './components/ThemeToggle';
|
|
269
|
-
|
|
270
|
-
export default function RootLayout({
|
|
271
|
-
children,
|
|
272
|
-
}: {
|
|
273
|
-
children: React.ReactNode;
|
|
274
|
-
}) {
|
|
275
|
-
return (
|
|
276
|
-
<html lang="en">
|
|
277
|
-
<body>
|
|
278
|
-
<ThemeProvider defaultTheme="light" defaultThemeMode="TORCH">
|
|
279
|
-
<div className="fixed top-4 right-4 z-50">
|
|
280
|
-
<ThemeToggle />
|
|
281
|
-
</div>
|
|
282
|
-
{children}
|
|
283
|
-
</ThemeProvider>
|
|
284
|
-
</body>
|
|
285
|
-
</html>
|
|
286
|
-
);
|
|
287
|
-
}
|
|
288
|
-
```
|
|
289
|
-
|
|
290
|
-
---
|
|
291
|
-
|
|
292
|
-
## Step 6: Explore More Components
|
|
293
|
-
|
|
294
|
-
Now that you have the basics set up, let's try a few more components.
|
|
295
|
-
|
|
296
182
|
### Button Variants
|
|
297
183
|
|
|
298
184
|
```tsx
|
|
299
|
-
import { Button } from
|
|
185
|
+
import { Button } from "./components/Button";
|
|
300
186
|
|
|
301
187
|
export default function ButtonShowcase() {
|
|
302
188
|
return (
|
|
303
189
|
<div className="flex gap-2 flex-wrap">
|
|
304
|
-
<Button
|
|
305
|
-
|
|
306
|
-
</Button>
|
|
307
|
-
<Button
|
|
308
|
-
Contrast
|
|
309
|
-
</Button>
|
|
310
|
-
<Button theme="light" variant="SecondStyle">
|
|
311
|
-
Secondary
|
|
312
|
-
</Button>
|
|
313
|
-
<Button theme="light" variant="BorderStyle">
|
|
314
|
-
Outline
|
|
315
|
-
</Button>
|
|
190
|
+
<Button variant="PrimeStyle">Primary</Button>
|
|
191
|
+
<Button variant="ContStyle">Contrast</Button>
|
|
192
|
+
<Button variant="SecondStyle">Secondary</Button>
|
|
193
|
+
<Button variant="BorderStyle">Outline</Button>
|
|
316
194
|
</div>
|
|
317
195
|
);
|
|
318
196
|
}
|
|
319
197
|
```
|
|
320
198
|
|
|
321
|
-
###
|
|
322
|
-
|
|
323
|
-
```tsx
|
|
324
|
-
import { InputField } from '@torch-ai/torch-glare';
|
|
325
|
-
import { useState } from 'react';
|
|
326
|
-
|
|
327
|
-
export default function InputDemo() {
|
|
328
|
-
const [email, setEmail] = useState('');
|
|
199
|
+
### Theming
|
|
329
200
|
|
|
330
|
-
|
|
331
|
-
<InputField
|
|
332
|
-
theme="light"
|
|
333
|
-
label="Email Address"
|
|
334
|
-
type="email"
|
|
335
|
-
value={email}
|
|
336
|
-
onChange={(e) => setEmail(e.target.value)}
|
|
337
|
-
placeholder="you@example.com"
|
|
338
|
-
/>
|
|
339
|
-
);
|
|
340
|
-
}
|
|
341
|
-
```
|
|
342
|
-
|
|
343
|
-
### Badge Component
|
|
201
|
+
Most components accept a `theme` prop for per-component theming:
|
|
344
202
|
|
|
345
203
|
```tsx
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
export default function BadgeDemo() {
|
|
349
|
-
return (
|
|
350
|
-
<div className="flex gap-2">
|
|
351
|
-
<Badge theme="light" variant="SecondStyle">
|
|
352
|
-
New
|
|
353
|
-
</Badge>
|
|
354
|
-
<Badge theme="light" variant="PrimeStyle">
|
|
355
|
-
Featured
|
|
356
|
-
</Badge>
|
|
357
|
-
<Badge theme="light" variant="ContStyle">
|
|
358
|
-
Popular
|
|
359
|
-
</Badge>
|
|
360
|
-
</div>
|
|
361
|
-
);
|
|
362
|
-
}
|
|
204
|
+
<Button theme="light" variant="PrimeStyle">Light Theme</Button>
|
|
205
|
+
<Button theme="dark" variant="PrimeStyle">Dark Theme</Button>
|
|
363
206
|
```
|
|
364
207
|
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
## Step 7: Understanding the Design System
|
|
368
|
-
|
|
369
|
-
### Color System
|
|
370
|
-
|
|
371
|
-
TORCH Glare uses a comprehensive color token system:
|
|
208
|
+
Or use the `ThemeProvider` for app-wide theming:
|
|
372
209
|
|
|
373
210
|
```tsx
|
|
374
|
-
|
|
375
|
-
<div className="bg-background-system-body-primary">
|
|
376
|
-
<div className="bg-background-presentation-form-base">
|
|
377
|
-
<div className="bg-background-presentation-action-primary">
|
|
378
|
-
|
|
379
|
-
// Text colors
|
|
380
|
-
<p className="text-content-presentation-global-primary">
|
|
381
|
-
<p className="text-content-presentation-global-secondary">
|
|
382
|
-
<p className="text-content-presentation-state-success">
|
|
383
|
-
|
|
384
|
-
// Border colors
|
|
385
|
-
<div className="border border-border-presentation-global-primary">
|
|
386
|
-
<div className="border border-border-presentation-action-hover">
|
|
387
|
-
```
|
|
388
|
-
|
|
389
|
-
### Typography System
|
|
390
|
-
|
|
391
|
-
```tsx
|
|
392
|
-
// Display text (large headings)
|
|
393
|
-
<h1 className="typography-display-large-bold">
|
|
394
|
-
|
|
395
|
-
// Headers (section titles)
|
|
396
|
-
<h2 className="typography-headers-large-semibold">
|
|
397
|
-
|
|
398
|
-
// Body text (paragraphs)
|
|
399
|
-
<p className="typography-body-medium-regular">
|
|
400
|
-
|
|
401
|
-
// Labels (form labels, tags)
|
|
402
|
-
<label className="typography-labels-medium-semibold">
|
|
403
|
-
```
|
|
404
|
-
|
|
405
|
-
### Theme Props
|
|
406
|
-
|
|
407
|
-
Most components accept a `theme` prop:
|
|
408
|
-
|
|
409
|
-
```tsx
|
|
410
|
-
<Button theme="light" variant="PrimeStyle">
|
|
411
|
-
Light Theme
|
|
412
|
-
</Button>
|
|
413
|
-
|
|
414
|
-
<Button theme="dark" variant="PrimeStyle">
|
|
415
|
-
Dark Theme
|
|
416
|
-
</Button>
|
|
417
|
-
```
|
|
418
|
-
|
|
419
|
-
---
|
|
420
|
-
|
|
421
|
-
## Step 8: Build a Complete Example
|
|
422
|
-
|
|
423
|
-
Let's combine everything into a complete example:
|
|
424
|
-
|
|
425
|
-
```tsx
|
|
426
|
-
// components/UserProfile.tsx
|
|
427
|
-
'use client';
|
|
428
|
-
|
|
429
|
-
import { useState } from 'react';
|
|
430
|
-
import {
|
|
431
|
-
Button,
|
|
432
|
-
InputField,
|
|
433
|
-
Badge,
|
|
434
|
-
Avatar,
|
|
435
|
-
} from '@torch-ai/torch-glare';
|
|
436
|
-
|
|
437
|
-
export default function UserProfile() {
|
|
438
|
-
const [name, setName] = useState('');
|
|
439
|
-
const [email, setEmail] = useState('');
|
|
440
|
-
|
|
441
|
-
const handleSave = () => {
|
|
442
|
-
console.log('Saving:', { name, email });
|
|
443
|
-
};
|
|
211
|
+
import { ThemeProvider } from "./providers/ThemeProvider";
|
|
444
212
|
|
|
213
|
+
export default function RootLayout({ children }) {
|
|
445
214
|
return (
|
|
446
|
-
<
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
border border-border-presentation-global-primary
|
|
450
|
-
rounded-lg
|
|
451
|
-
">
|
|
452
|
-
{/* Header */}
|
|
453
|
-
<div className="flex items-center gap-4 mb-6">
|
|
454
|
-
<Avatar
|
|
455
|
-
theme="light"
|
|
456
|
-
src="/avatar.jpg"
|
|
457
|
-
alt="User"
|
|
458
|
-
size="L"
|
|
459
|
-
/>
|
|
460
|
-
<div>
|
|
461
|
-
<h2 className="typography-headers-large-bold">
|
|
462
|
-
Profile Settings
|
|
463
|
-
</h2>
|
|
464
|
-
<Badge theme="light" variant="SecondStyle">
|
|
465
|
-
Pro Member
|
|
466
|
-
</Badge>
|
|
467
|
-
</div>
|
|
468
|
-
</div>
|
|
469
|
-
|
|
470
|
-
{/* Form */}
|
|
471
|
-
<div className="space-y-4">
|
|
472
|
-
<InputField
|
|
473
|
-
theme="light"
|
|
474
|
-
label="Full Name"
|
|
475
|
-
value={name}
|
|
476
|
-
onChange={(e) => setName(e.target.value)}
|
|
477
|
-
placeholder="Enter your name"
|
|
478
|
-
/>
|
|
479
|
-
|
|
480
|
-
<InputField
|
|
481
|
-
theme="light"
|
|
482
|
-
label="Email Address"
|
|
483
|
-
type="email"
|
|
484
|
-
value={email}
|
|
485
|
-
onChange={(e) => setEmail(e.target.value)}
|
|
486
|
-
placeholder="you@example.com"
|
|
487
|
-
/>
|
|
488
|
-
|
|
489
|
-
<div className="flex gap-2 justify-end">
|
|
490
|
-
<Button theme="light" variant="BorderStyle">
|
|
491
|
-
Cancel
|
|
492
|
-
</Button>
|
|
493
|
-
<Button theme="light" variant="PrimeStyle" onClick={handleSave}>
|
|
494
|
-
Save Changes
|
|
495
|
-
</Button>
|
|
496
|
-
</div>
|
|
497
|
-
</div>
|
|
498
|
-
</div>
|
|
215
|
+
<ThemeProvider defaultTheme="light">
|
|
216
|
+
{children}
|
|
217
|
+
</ThemeProvider>
|
|
499
218
|
);
|
|
500
219
|
}
|
|
501
220
|
```
|
|
@@ -504,56 +223,29 @@ export default function UserProfile() {
|
|
|
504
223
|
|
|
505
224
|
## Common Issues and Solutions
|
|
506
225
|
|
|
507
|
-
###
|
|
226
|
+
### Styles Not Applied
|
|
508
227
|
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
**Solution**: Make sure you've:
|
|
228
|
+
Make sure you've:
|
|
512
229
|
1. Imported `globals.css` with Tailwind directives
|
|
513
|
-
2. Configured `tailwind.config
|
|
514
|
-
3. Added
|
|
515
|
-
|
|
516
|
-
### Issue: Theme Not Switching
|
|
230
|
+
2. Configured `tailwind.config` correctly with all plugins
|
|
231
|
+
3. Added the correct component path to the `content` array
|
|
517
232
|
|
|
518
|
-
|
|
233
|
+
### Theme Not Switching
|
|
519
234
|
|
|
520
|
-
|
|
235
|
+
Ensure:
|
|
521
236
|
1. `ThemeProvider` wraps your app
|
|
522
|
-
2. Component is marked with `'use client'` (Next.js)
|
|
237
|
+
2. Component is marked with `'use client'` (Next.js App Router)
|
|
523
238
|
3. Both `mapping-color-system` and `glare-torch-mode` plugins are installed
|
|
524
239
|
|
|
525
|
-
|
|
240
|
+
---
|
|
526
241
|
|
|
527
|
-
|
|
242
|
+
## Manual Installation
|
|
528
243
|
|
|
529
|
-
|
|
530
|
-
```bash
|
|
531
|
-
npm install --save-dev @types/react @types/node
|
|
532
|
-
```
|
|
533
|
-
|
|
534
|
-
---
|
|
244
|
+
If you have issues with the CLI, see the [manual installation guide](https://torch-glare.com/getting-started/manual) for step-by-step instructions.
|
|
535
245
|
|
|
536
246
|
## Next Steps
|
|
537
247
|
|
|
538
|
-
Congratulations! You've successfully set up TORCH Glare. Here's what to explore next:
|
|
539
|
-
|
|
540
248
|
1. **[Building Your First Form](./building-first-form.md)** - Create a complete form with validation
|
|
541
249
|
2. **[Theming Basics](./theming-basics.md)** - Customize colors and themes
|
|
542
250
|
3. **[Component Composition](./component-composition.md)** - Build complex UIs
|
|
543
251
|
4. **[Component Documentation](../components/)** - Explore all available components
|
|
544
|
-
|
|
545
|
-
## Additional Resources
|
|
546
|
-
|
|
547
|
-
- [GitHub Repository](https://github.com/torch-ai/torch-glare)
|
|
548
|
-
- [Component API Reference](../components/)
|
|
549
|
-
- [Tailwind Plugins Reference](../reference/tailwind-plugins.md)
|
|
550
|
-
- [Hooks Reference](../reference/hooks.md)
|
|
551
|
-
|
|
552
|
-
## Need Help?
|
|
553
|
-
|
|
554
|
-
- Check the [FAQ](../faq.md)
|
|
555
|
-
- Read [Common Issues](../troubleshooting.md)
|
|
556
|
-
- Join our [Discord Community](https://discord.gg/torch-glare)
|
|
557
|
-
- Report issues on [GitHub](https://github.com/torch-ai/torch-glare/issues)
|
|
558
|
-
|
|
559
|
-
Happy coding! 🚀
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "torch-glare-mcp",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "MCP server for TORCH Glare component library — gives AI assistants full access to component docs, API references, code examples, and design system info",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|