diff --git a/packages/registry/src/schemas.ts b/packages/registry/src/schemas.ts index 2fa9f30222..afc561fa4c 100644 --- a/packages/registry/src/schemas.ts +++ b/packages/registry/src/schemas.ts @@ -210,3 +210,59 @@ export const registrySchema = z.object({ .array() .describe("Defines a custom component registry."), }); + +/** Schema for a project's `components.json` config file. */ +export const componentsJsonSchema = z.object({ + $schema: z.string().optional(), + style: z + .string() + .optional() + .describe( + "DEPRECATED IN TAILWIND v4! The style for your components. This cannot be changed after initialization." + ), + tailwind: z.object({ + css: z + .string() + .describe("Path to the CSS file that imports Tailwind CSS into your project."), + baseColor: z + .string() + .describe( + "Used to generate the default color palette for your components. This cannot be changed after initialization." + ), + // cssVariables: z.boolean().default(true) + }), + aliases: z + .object({ + components: z.string().describe("Import alias for your components."), + utils: z.string().describe("Import alias for your utility functions."), + ui: z + .string() + .optional() + .describe("Import alias for your UI components. Defaults to `$lib/components/ui`."), + hooks: z + .string() + .optional() + .describe("Import alias for your hooks. Defaults to `$lib/hooks`."), + lib: z + .string() + .optional() + .describe( + "Import alias for your library, which is typically where you store your components, utils, hooks, etc. Defaults to `$lib`." + ), + }) + .describe( + "The CLI uses these values and the `alias` config from your `svelte.config.js` file to place generated components in the correct location." + ), + registry: z + .string() + .optional() + .describe( + "The registry URL tells the CLI where to fetch the shadcn-svelte components/registry from. You can pin this to a specific preview release or your own fork of the registry." + ), + typescript: z + .boolean() + .optional() + .describe( + "Used to determine if Typescript is used for this project. When set to `false`, `.js` files will be installed instead. Defaults to `true`. " + ), +}); diff --git a/sites/docs/scripts/build-registry.ts b/sites/docs/scripts/build-registry.ts index 0bb1e9740f..7f7ad72fb0 100644 --- a/sites/docs/scripts/build-registry.ts +++ b/sites/docs/scripts/build-registry.ts @@ -207,9 +207,10 @@ export const Index = {`; // ---------------------------------------------------------------------------- writeFileWithDirs(path.join(THEMES_CSS_PATH, `themes.css`), themeCSS.join("\n\n"), "utf-8"); - writeFileWithDirs( - path.resolve("src", "styles", "old-themes.css"), - themeCSS.join("\n\n"), - "utf-8" - ); + const oldThemesPath = path.resolve("src", "styles", "old-themes.css"); + const oldThemes = await prettier.format(themeCSS.join("\n\n"), { + ...prettierConfig, + filepath: oldThemesPath, + }); + writeFileWithDirs(oldThemesPath, oldThemes, "utf-8"); } diff --git a/sites/docs/src/content/components-json.md b/sites/docs/src/content/components-json.md index 7d4f7dbc02..4ac716b95b 100644 --- a/sites/docs/src/content/components-json.md +++ b/sites/docs/src/content/components-json.md @@ -106,7 +106,7 @@ Import alias for your utility functions. ```json title="components.json" { "aliases": { - "utils": "$lib/utils.js" + "utils": "$lib/utils" } } ``` diff --git a/sites/docs/static/schema.json b/sites/docs/static/schema.json index 962045dff8..6dcb936118 100644 --- a/sites/docs/static/schema.json +++ b/sites/docs/static/schema.json @@ -1,43 +1,71 @@ { - "$schema": "http://json-schema.org/draft-07/schema#", "type": "object", "properties": { + "$schema": { + "type": "string" + }, + "style": { + "description": "DEPRECATED IN TAILWIND v4! The style for your components. This cannot be changed after initialization.", + "type": "string" + }, "tailwind": { "type": "object", "properties": { "css": { + "description": "Path to the CSS file that imports Tailwind CSS into your project.", "type": "string" }, "baseColor": { + "description": "Used to generate the default color palette for your components. This cannot be changed after initialization.", "type": "string" } }, - "required": ["css", "baseColor"] + "required": [ + "css", + "baseColor" + ] }, "aliases": { + "description": "The CLI uses these values and the `alias` config from your `svelte.config.js` file to place generated components in the correct location.", "type": "object", "properties": { - "utils": { + "components": { + "description": "Import alias for your components.", "type": "string" }, - "components": { + "utils": { + "description": "Import alias for your utility functions.", "type": "string" }, "ui": { + "description": "Import alias for your UI components. Defaults to `$lib/components/ui`.", "type": "string" }, "hooks": { + "description": "Import alias for your hooks. Defaults to `$lib/hooks`.", + "type": "string" + }, + "lib": { + "description": "Import alias for your library, which is typically where you store your components, utils, hooks, etc. Defaults to `$lib`.", "type": "string" } }, - "required": ["utils", "components"] - }, - "typescript": { - "type": "boolean" + "required": [ + "components", + "utils" + ] }, "registry": { + "description": "The registry URL tells the CLI where to fetch the shadcn-svelte components/registry from. You can pin this to a specific preview release or your own fork of the registry.", "type": "string" + }, + "typescript": { + "description": "Used to determine if Typescript is used for this project. When set to `false`, `.js` files will be installed instead. Defaults to `true`. ", + "type": "boolean" } }, - "required": ["tailwind", "aliases"] -} + "required": [ + "tailwind", + "aliases" + ] +} \ No newline at end of file diff --git a/sites/docs/vite.config.ts b/sites/docs/vite.config.ts index 6cc1a4e10f..3fccd6edc2 100644 --- a/sites/docs/vite.config.ts +++ b/sites/docs/vite.config.ts @@ -7,7 +7,7 @@ import { minimatch } from "minimatch"; import { defineConfig } from "vite"; import tailwindcss from "@tailwindcss/vite"; import { sveltekit } from "@sveltejs/kit/vite"; -import { registrySchema, registryItemSchema } from "@shadcn-svelte/registry"; +import { registrySchema, registryItemSchema, componentsJsonSchema } from "@shadcn-svelte/registry"; import { build } from "./scripts/build-registry.js"; // don't build when we're running `vite preview` @@ -51,16 +51,24 @@ export default defineConfig({ }); function writeJsonSchemas() { - const registry = toJSONSchema(registrySchema); - const registryItem = toJSONSchema(registryItemSchema); const schemaDir = path.resolve("static", "schema"); if (!fs.existsSync(schemaDir)) { fs.mkdirSync(schemaDir, { recursive: true }); } + + const componentsJSON = toJSONSchema(componentsJsonSchema); + fs.writeFileSync( + path.resolve("static", "schema.json"), + JSON.stringify(componentsJSON, null, "\t") + ); + + const registry = toJSONSchema(registrySchema); fs.writeFileSync( path.resolve(schemaDir, "registry.json"), JSON.stringify(registry, null, "\t") ); + + const registryItem = toJSONSchema(registryItemSchema); fs.writeFileSync( path.resolve(schemaDir, "registry-item.json"), JSON.stringify(registryItem, null, "\t")