tera-system-ui 0.0.1

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "tera-system-ui",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "bin": {
+    "npm publisui": "./scripts/add-component-template.js"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.8",
+    "@storybook/addon-themes": "^8.3.6",
+    "@storybook/addon-viewport": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/svelte": "^8.3.6",
+    "@storybook/sveltekit": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "autoprefixer": "^10.4.20",
+    "publint": "^0.2.0",
+    "sass-embedded": "^1.80.4",
+    "storybook": "^8.3.6",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.11",
+    "npx": "^10.2.2"
+  },
+  "dependencies": {
+    "@tabler/icons-svelte": "^3.20.0",
+    "tailwind-variants": "^0.2.1",
+    "clsx": "^2.1.1"
+  }
+}

package/scripts/add-component-template.js

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+
+import path from "path";
+// Get the component name from the command line arguments
+const componentName = process.argv[3];
+const command = process.argv[2];
+
+if (!componentName) {
+    console.error("Please provide a component name: `npx tera-ui add component-name`");
+    process.exit(1);
+}
+
+if (command !== 'add') {
+    console.error(`Please provide a correct command: current command ${command}`);
+    process.exit(1);
+}
+
+
+const PASCAL_CASE = 'PASCAL_CASE';
+const KEBAB_CASE = 'KEBAB_CASE';
+
+
+function convertCase(text, convertTo) {
+    const isPascalCase = /^[A-Z][a-z0-9]+([A-Z][a-z0-9]*)*$/.test(text);
+    const isKebabCase = /^[a-z]+(-[a-z0-9]+)*$/.test(text);
+
+    if ((convertTo === PASCAL_CASE && isPascalCase) ||
+        (convertTo === KEBAB_CASE && isKebabCase)) {
+        return text;
+    }
+
+    if (convertTo === PASCAL_CASE) {
+        return text
+            .toLowerCase()
+            .replace(/(?:^|[-_])(.)/g, (_, char) => char.toUpperCase());
+    } else if (convertTo === KEBAB_CASE) {
+        return text
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .toLowerCase();
+    } else {
+        throw new Error("Invalid 'convertTo' parameter. Use 'PASCAL_CASE' or 'KEBAB_CASE'.");
+    }
+}
+
+
+function readFileContent(path) {
+    try {
+        const data = fs.readFileSync(path, 'utf8');
+        return data;
+    } catch (error) {
+        console.error("Error reading file:", error.message);
+        return null;
+    }
+}
+
+
+const componentTemplateFolder = path.join(process.cwd(), 'scripts/file-template/component');
+
+function getComponentSvelte(componentName) {
+    let template = readFileContent(componentTemplateFolder + '/Component.svelte')
+    let componentNameCase = convertCase(componentName, PASCAL_CASE);
+    return template.replaceAll('ComponentProps', componentNameCase + 'Props')
+        .replaceAll('"./Component"', `"./${componentNameCase}"`);
+}
+
+function getComponentTS(componentName) {
+    let template = readFileContent(componentTemplateFolder + '/Component.ts')
+    let componentNameCase = convertCase(componentName, PASCAL_CASE);
+    return template.replaceAll('Component', componentNameCase);
+}
+
+function getIndexTS(componentName) {
+    let template = readFileContent(componentTemplateFolder + '/index.ts')
+    let componentNameCase = convertCase(componentName, PASCAL_CASE);
+    return template.replaceAll('Component', componentNameCase);
+}
+
+
+function getComponentStoriesSvelte(componentName) {
+    let template = readFileContent(componentTemplateFolder + '/Component.stories.svelte')
+    let componentNameCase = convertCase(componentName, PASCAL_CASE);
+    return template.replaceAll('ComponentName', componentNameCase)
+        .replaceAll('component-path', convertCase(componentName, KEBAB_CASE));
+}
+
+
+// Define the component folder and files
+const componentDir = path.join(process.cwd(), 'src', 'lib', 'components', convertCase(componentName, KEBAB_CASE));
+const componentStoriesDir = path.join(process.cwd(), 'src', 'stories', convertCase(componentName, KEBAB_CASE));
+
+
+const files = {
+    [`${convertCase(componentName, PASCAL_CASE)}.svelte`]: getComponentSvelte(componentName),
+    [`${convertCase(componentName, PASCAL_CASE)}.ts`]: getComponentTS(componentName),
+    [`index.ts`]: getIndexTS(componentName),
+    [`${convertCase(componentName, PASCAL_CASE)}.stories.svelte`]: getComponentStoriesSvelte(componentName),
+};
+
+
+// Create the folder and files with template content
+if (!fs.existsSync(componentDir)) {
+    fs.mkdirSync(componentDir);
+}
+
+if (!fs.existsSync(componentStoriesDir)) {
+    fs.mkdirSync(componentStoriesDir);
+}
+
+
+for (const [filename, content] of Object.entries(files)) {
+    const filePath = filename.includes('.stories.')
+        ? path.join(componentStoriesDir, filename)
+        : path.join(componentDir, filename);
+
+
+    fs.writeFileSync(filePath, content, 'utf8');
+}
+
+console.log(`Component ${componentName} created successfully with 3 template files!`);