@timus-networks/theme 1.0.1

package/README.md

@@ -0,0 +1,90 @@
+## Installation:
+
+1. First install package `npm i @timus-networks/theme`
+2. Add package to `modules` property in `nuxt.config.js` file
+
+```json
+{
+  "modules": ["@nuxtjs/axios", ["@timus-networks/filter", { "client": false, "typescript": false }]]
+}
+```
+
+- You can manually set the `client` and `typescript` support properties.
+- If you render this component on the client side, set the value to `true`.
+- If you prefer to use `typescript` during development, set `typescript` to `true`.
+- You can also set the `namespace` to define the module path's position within the .nuxt folder.
+
+3. Add below configuration to your **nuxt.config.js** file.
+
+<sub>nuxt.config.js</sub>
+
+```js
+tailwindcss: {
+  // cssPath: '~/static/scss/main.scss',
+  configPath: '@/tailwind.config.js',
+  exposeConfig: false,
+  exposeLevel: 2,
+  config: {
+    darkMode: 'class',
+  },
+  injectPosition: 'first',
+  viewer: true,
+},
+```
+
+### Usage
+
+Default dark theme is `false`
+
+- Change the theme on button click:
+  `this.$theme.setDarkMode(!this.$theme.isDark);`
+
+- Register the theme change listener:
+  `this.$theme.$on('darkMode', (value) => { console.log('darkMode:', value); });`
+
+<sub>SamplePage.vue</sub>
+
+```ts
+<template>
+  <div class="text-black dark:text-white dark:bg-gray-800 p-4">
+    <h1>Dynamic Theming with Nuxt</h1>
+    <p>Experience the power of dynamic theming. Click the button below to toggle between light and dark modes.</p>
+    <button @click="toggleTheme" class="btn btn-sm btn-primary dark:btn-light mt-4">{{ buttonText }}</button>
+    <div class="indicator">
+      Current Theme: <strong>{{ $theme.isDark ? 'Dark' : 'Light' }}</strong>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  computed: {
+    buttonText(): string {
+      return this.$theme.isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode';
+    },
+  },
+  methods: {
+    toggleTheme() {
+      this.$theme.setDarkMode(!this.$theme.isDark);
+    },
+  },
+  mounted() {
+    console.log('Dark mode is:', this.$theme.isDark);
+    this.$theme.$on('darkMode', (value: boolean) => {
+      console.log('darkMode changed:', value);
+    });
+  },
+});
+</script>
+
+<style scoped>
+.toggle-button {
+  transition: background-color 0.3s ease;
+}
+
+.indicator {
+  margin-top: 20px;
+}
+</style>
+```

package/components-js/exporter.js

@@ -0,0 +1,19 @@
+const components = {};
+const requireComponent = require.context(
+  '.', // bu klasördeki bileşenleri oku
+  false, // alt klasörleri okuma
+  /[A-Z]\w+\.(vue)$/, // Vue bileşenlerini al
+  // EXPERIMENTAL: /[A-Z]\w+\.(vue|js)$/, // Vue bileşenlerini veya JS dosyalarını al
+);
+
+requireComponent.keys().forEach((fileName) => {
+  const componentConfig = requireComponent(fileName);
+  const componentName = fileName
+    .split('/')
+    .pop()
+    .replace(/\.\w+$/, ''); // Dosya adını bileşen adı olarak al
+
+  components[componentName] = componentConfig.default || componentConfig;
+});
+
+export default components;

package/components-js/interfaces.ts

@@ -0,0 +1,11 @@
+export interface ThemeProviderTheme extends Vue {
+  isDarkMode: boolean;
+  isDark: boolean;
+  setDarkMode(value: boolean): void;
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $theme: ThemeProviderTheme;
+  }
+}

package/components-js/utils.ts

@@ -0,0 +1,20 @@
+export class Utils {
+  private timeout: ReturnType<typeof setTimeout> | null = null;
+
+  debounce(func: Function, delay: number) {
+    return (...args: any[]) => {
+      if (this.timeout !== null) {
+        clearTimeout(this.timeout);
+      }
+      this.timeout = setTimeout(() => {
+        func(...args);
+      }, delay);
+    };
+  }
+
+  generateRandomId(): string {
+    return Date.now().toString(36) + Math.random().toString(36).slice(2, 9);
+  }
+}
+
+export const utils = new Utils();

package/components-ts/exporter.js

@@ -0,0 +1,19 @@
+const components = {};
+const requireComponent = require.context(
+  '.', // bu klasördeki bileşenleri oku
+  false, // alt klasörleri okuma
+  /[A-Z]\w+\.(vue)$/, // Vue bileşenlerini al
+  // EXPERIMENTAL: /[A-Z]\w+\.(vue|js)$/, // Vue bileşenlerini veya JS dosyalarını al
+);
+
+requireComponent.keys().forEach((fileName) => {
+  const componentConfig = requireComponent(fileName);
+  const componentName = fileName
+    .split('/')
+    .pop()
+    .replace(/\.\w+$/, ''); // Dosya adını bileşen adı olarak al
+
+  components[componentName] = componentConfig.default || componentConfig;
+});
+
+export default components;

package/components-ts/interfaces.ts

@@ -0,0 +1,11 @@
+export interface ThemeProviderTheme extends Vue {
+  isDarkMode: boolean;
+  isDark: boolean;
+  setDarkMode(value: boolean): void;
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $theme: ThemeProviderTheme;
+  }
+}

package/components-ts/utils.ts

@@ -0,0 +1,20 @@
+export class Utils {
+  private timeout: ReturnType<typeof setTimeout> | null = null;
+
+  debounce(func: Function, delay: number) {
+    return (...args: any[]) => {
+      if (this.timeout !== null) {
+        clearTimeout(this.timeout);
+      }
+      this.timeout = setTimeout(() => {
+        func(...args);
+      }, delay);
+    };
+  }
+
+  generateRandomId(): string {
+    return Date.now().toString(36) + Math.random().toString(36).slice(2, 9);
+  }
+}
+
+export const utils = new Utils();

package/convert.js

@@ -0,0 +1,98 @@
+const fs = require('fs');
+const path = require('path');
+const execSync = require('child_process').execSync;
+const glob = require('glob');
+
+// Eğer 'components-js' klasörü varsa sil
+if (fs.existsSync('components-js')) {
+  fs.rmSync('components-js', { recursive: true, force: true });
+}
+
+// Yeni bir 'components-js' klasörü oluştur
+fs.mkdirSync('components-js');
+
+// components'in içerisindeki her şeyi output'a kopyala
+const copyRecursiveSync = function (src, dest) {
+  const exists = fs.existsSync(src);
+  const stats = exists && fs.statSync(src);
+  const isDirectory = exists && stats.isDirectory();
+  if (exists && isDirectory) {
+    if (!fs.existsSync(dest)) fs.mkdirSync(dest);
+    fs.readdirSync(src).forEach((childItemName) => {
+      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName));
+    });
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+};
+
+copyRecursiveSync('./components-ts', './components-js');
+
+// output klasöründeki .vue dosyalarını bul
+const vueFiles = glob.sync('./components-js/**/*.{vue,ts}');
+
+vueFiles.forEach((file) => {
+  const content = fs.readFileSync(file, 'utf-8');
+  const scriptMatch = content.match(/<script lang="ts">(.*?)<\/script>/s);
+  let tsFilePath;
+
+  if (content) {
+    if (scriptMatch) {
+      console.log('###', scriptMatch);
+      let tsCode = scriptMatch[1];
+      tsCode = tsCode.replace(/import .*?from '.*?.vue';/g, (match) => `// ${match}`);
+
+       tsFilePath = file.replace('.vue', '.temp.ts');
+      fs.writeFileSync(tsFilePath, tsCode, 'utf-8');
+    }
+
+    let hasError = false;
+    const tscPath = path.resolve(__dirname, '../../../node_modules/.bin/tsc');
+
+    try {
+      execSync(`${tscPath} ${scriptMatch ? tsFilePath : file} --allowJs false --module esnext --target esnext --declaration true`, {
+        encoding: 'utf8',
+      });
+    } catch (e) {
+      // console.error("### Derleme hatası:", tsFilePath, e);
+      // console.error('DERLEME HATASI: ', e.stdout.toString());
+      hasError = true;
+    }
+
+    if (tsFilePath && hasError ) {
+      // temp.d.ts dosyasını yeniden oluştur ve adını
+      const tsOutputFilePath = tsFilePath.replace('.temp.ts', '.temp.d.ts');
+      const desiredOutputFilePath = tsFilePath.replace('.temp.ts', '.d.ts');
+      if (fs.existsSync(tsOutputFilePath)) {
+        fs.renameSync(tsOutputFilePath, desiredOutputFilePath);
+      }
+      const jsCode = fs.readFileSync(tsFilePath.replace('.ts', '.js'), 'utf-8');
+      const finalJsCode = jsCode.replace(/\/\/ import/g, 'import');
+      const newContent = content.replace(/<script lang="ts">(.*?)<\/script>/s, `<script>${finalJsCode}</script>`);
+      fs.writeFileSync(file, newContent, 'utf-8');
+    }
+
+    if (scriptMatch) {
+      // Dosyaları sil
+      if (fs.existsSync(tsFilePath)) fs.unlinkSync(tsFilePath);
+      if (fs.existsSync(tsFilePath.replace('.ts', '.js'))) fs.unlinkSync(tsFilePath.replace('.ts', '.js'));
+    }
+  }
+});
+
+// vueFiles.forEach döngüsünden sonra
+const declarationFiles = glob.sync('./components-js/**/*.d.ts');
+
+// Bu dosyaları import eden bir index.d.ts oluştur
+let imports = declarationFiles
+  .map((file) => {
+    // Dosya yolundan modül adını elde etmek için gereken işlemler
+    let modulePath = path.relative('.', file);
+    modulePath = modulePath.replace('.d.ts', '');
+    modulePath = modulePath.replace(/\\/g, '/'); // Windows için ters eğik çizgileri düzelt
+    return `export * from './${modulePath}';`;
+  })
+  .join('\n');
+
+fs.writeFileSync('./index.d.ts', imports);
+console.log('### index.d.ts dosyası oluşturuldu.');

package/js-converter.js

@@ -0,0 +1,90 @@
+const fs = require('fs');
+const path = require('path');
+const execSync = require('child_process').execSync;
+const glob = require('glob');
+
+// Eğer 'components-js' klasörü varsa sil
+if (fs.existsSync('components-js')) {
+  fs.rmSync('components-js', { recursive: true, force: true });
+}
+
+// Yeni bir 'components-js' klasörü oluştur
+fs.mkdirSync('components-js');
+
+// components'in içerisindeki her şeyi output'a kopyala
+const copyRecursiveSync = function (src, dest) {
+  const exists = fs.existsSync(src);
+  const stats = exists && fs.statSync(src);
+  const isDirectory = exists && stats.isDirectory();
+  if (exists && isDirectory) {
+    if (!fs.existsSync(dest)) fs.mkdirSync(dest);
+    fs.readdirSync(src).forEach((childItemName) => {
+      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName));
+    });
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+};
+
+copyRecursiveSync('./components-ts', './components-js');
+
+// output klasöründeki .vue dosyalarını bul
+const vueFiles = glob.sync('./components-js/**/*.vue');
+
+vueFiles.forEach((file) => {
+  const content = fs.readFileSync(file, 'utf-8');
+  const scriptMatch = content.match(/<script lang="ts">(.*?)<\/script>/s);
+
+  if (scriptMatch) {
+    let tsCode = scriptMatch[1];
+    tsCode = tsCode.replace(/import .*?from '.*?.vue';/g, (match) => `// ${match}`);
+
+    const tsFilePath = file.replace('.vue', '.temp.ts');
+    fs.writeFileSync(tsFilePath, tsCode, 'utf-8');
+
+    let hasError = false;
+    const tscPath = path.resolve(__dirname, '../../../node_modules/.bin/tsc');
+
+    try {
+      execSync(`${tscPath} ${tsFilePath} --allowJs false --module esnext --target esnext --declaration true`, { encoding: 'utf8' });
+    } catch (e) {
+      // console.error("### Derleme hatası:", tsFilePath, e);
+      // console.error('DERLEME HATASI: ', e.stdout.toString());
+      hasError = true;
+    }
+
+    if (hasError) {
+      // temp.d.ts dosyasını yeniden oluştur ve adını
+      const tsOutputFilePath = tsFilePath.replace('.temp.ts', '.temp.d.ts');
+      const desiredOutputFilePath = tsFilePath.replace('.temp.ts', '.d.ts');
+      if (fs.existsSync(tsOutputFilePath)) {
+        fs.renameSync(tsOutputFilePath, desiredOutputFilePath);
+      }
+      const jsCode = fs.readFileSync(tsFilePath.replace('.ts', '.js'), 'utf-8');
+      const finalJsCode = jsCode.replace(/\/\/ import/g, 'import');
+      const newContent = content.replace(/<script lang="ts">(.*?)<\/script>/s, `<script>${finalJsCode}</script>`);
+      fs.writeFileSync(file, newContent, 'utf-8');
+    }
+
+    // Dosyaları sil
+    if (fs.existsSync(tsFilePath)) fs.unlinkSync(tsFilePath);
+    if (fs.existsSync(tsFilePath.replace('.ts', '.js'))) fs.unlinkSync(tsFilePath.replace('.ts', '.js'));
+  }
+});
+
+// vueFiles.forEach döngüsünden sonra
+const declarationFiles = glob.sync('./components-js/**/*.d.ts');
+
+// Bu dosyaları import eden bir index.d.ts oluştur
+let imports = declarationFiles
+  .map((file) => {
+    // Dosya yolundan modül adını elde etmek için gereken işlemler
+    let modulePath = path.relative('.', file);
+    modulePath = modulePath.replace('.d.ts', '');
+    modulePath = modulePath.replace(/\\/g, '/'); // Windows için ters eğik çizgileri düzelt
+    return `export * from './${modulePath}';`;
+  })
+  .join('\n');
+
+fs.writeFileSync('./index.d.ts', imports);
+console.log("### index.d.ts dosyası oluşturuldu.");

package/loader.js

@@ -0,0 +1,41 @@
+import { readdirSync } from 'fs';
+import { join, resolve } from 'path';
+
+export function LoadComponent(options) {
+
+  const foldersToSync = [options.typescript ? 'components-ts' : 'components-js'];
+
+  // const tsIndexFile = resolve(__dirname, './'); // bu index.ts dosyasını .nuxt/timus-networks/table adresine kopyalar
+  // this.addTemplate({
+  //   src: resolve(tsIndexFile, 'index.ts'),
+  //   fileName: join(options.namespace, './', 'index.ts'),
+  //   options,
+  // });
+
+  for (const pathString of foldersToSync) {
+    const path = resolve(__dirname, pathString);
+    for (const file of readdirSync(path)) {
+      // console.log('#### loading:', `.nuxt/${ options.namespace }/${ pathString }/${ file}` );
+      this.addTemplate({
+        src: resolve(path, file),
+        fileName: join(options.namespace, pathString, file),
+        options,
+      });
+    }
+  }
+}
+
+export function LoadPlugins(options, all) {
+  const pluginsToSync = ['plugins/theme-provider.ts', options.typescript ? 'plugins/ts-components-installer.js' : 'plugins/js-components-installer.js'];
+
+  for (const pathString of pluginsToSync) {
+    const str = pathString.replace(/(\.[^\.]+)$/, `.${options.server}$1`);
+
+    this.addPlugin({
+      src: resolve(__dirname, pathString),
+      fileName: join(options.namespace, pathString),
+      options,
+      ...(options.client && {mode: 'client'})
+    });
+  }
+}

package/module.js

@@ -0,0 +1,62 @@
+import { resolve, join } from 'path';
+import { promises as fs } from 'fs';
+import { LoadComponent, LoadPlugins } from './loader';
+import PackageJson from './package.json';
+
+async function copyDirectory(src, dest) {
+  await fs.mkdir(dest, { recursive: true });
+  const entries = await fs.readdir(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      await copyDirectory(srcPath, destPath);
+    } else {
+      await fs.copyFile(srcPath, destPath);
+    }
+  }
+}
+
+export default function (moduleOptions) {
+  this.nuxt.hook('ready', (_nuxt) => {
+    this.options.tailwindcss.config.darkMode = 'class';
+    console.log(`#### ${PackageJson.name} has been prepared with version: ${PackageJson.version}`);
+    console.log(this.options.tailwindcss)
+  });
+
+  this.nuxt.hook('build:before', async () => {
+    const sourceDir = resolve(__dirname, './scss/');
+    const destDir = resolve(this.options.srcDir, 'static/scss/');
+    await copyDirectory(sourceDir, destDir);
+  });
+
+  // Assest'si, static fonts altına iconsax olarak gönderiyorum ve nuxt.config'in css'ine ekliyorum
+  // this.options.css.push('@/static/scss/_element-ui.scss');
+  this.options.css.push('@/static/scss/main.scss');
+
+  // get all options for the module
+  const options = {
+    ...moduleOptions,
+    ...this.options[PackageJson.name], // bu external olarak nuxt.config içerisinde tanımlanan değer '@timus-networks/table' olarak direk json'daki
+    version: PackageJson.version,
+  };
+
+  options.namespace = !options.namespace ? 'timus-networks/' + PackageJson.name.split('/')[1] : options.namespace;
+  options.typescript = !!options.typescript;
+  options.client = options.client === true;
+
+  LoadPlugins.bind(this)(options, this.options);
+  LoadComponent.bind(this)(options);
+
+  // Componenti global olarak ekleyin
+  // this.addTemplate({
+  //   src: path.resolve(__dirname, 'components/TableCreate.vue'),
+  //   fileName: 'components/TableCreate.vue'
+  // });
+}
+
+// REQUIRED if publishing the module as npm package
+module.exports.meta = require('./package.json');
+

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@timus-networks/theme",
+  "version": "1.0.1",
+  "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
+  "main": "module.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "convert": "node js-converter.js",
+    "pub": "npm run convert && npm publish --access public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/serkon/ts-nuxt.git"
+  },
+  "keywords": [
+    "nuxt",
+    "module",
+    "component",
+    "vuejs",
+    "theme",
+    "tailwind"
+  ],
+  "peerDependencies": {
+    "vue": "^2.x"
+  },
+  "author": "Serkan Konakcı<serkan.konakci@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "sass": "*",
+    "sass-loader": "*",
+    "tailwindcss": "*"
+  },
+  "devDependencies": {
+    "glob": "*"
+  },
+  "typings": "./index.d.ts"
+}

package/plugins/js-components-installer.js

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+
+// get options passed from module.js
+const options = JSON.parse(`<%= JSON.stringify(options) %>`);
+
+import components from '../components-js/exporter';
+
+// loop through components and register them
+for (const name in components) {
+  Vue.component(name, {
+    // extend the original component
+    extends: components[name],
+    // add a _customCounterOptions prop to gain access to the options in the component
+    props: {
+      timus: {
+        type: Object,
+        default: () => ({ ...options }),
+      },
+    },
+  });
+}

package/plugins/theme-provider.ts

@@ -0,0 +1,75 @@
+import { Context } from '@nuxt/types';
+import Vue from 'vue';
+
+/**
+ * Helper functions to handle localStorage safely
+ */
+function getDarkModeFromLocalStorage(): boolean {
+  return process.client && localStorage.getItem('darkMode') === 'true';
+}
+
+function setDarkModeToLocalStorage(value: boolean): void {
+  if (process.client) {
+    localStorage.setItem('darkMode', value.toString());
+  }
+}
+
+function setHtmlDarkClass(isDark: boolean): void {
+  if (process.client) {
+    const htmlElement = document.documentElement;
+    if (isDark) {
+      htmlElement.classList.add('dark');
+    } else {
+      htmlElement.classList.remove('dark');
+    }
+  }
+}
+
+/**
+ * ThemeProvider: A Vue instance to provide theme related functionalities.
+ *
+ * Usage:
+ * - Change the theme on button click:
+ *   this.$theme.setDarkMode(!this.$theme.isDark);
+ *
+ * - Register the theme change listener:
+ *   this.$theme.$on('darkMode', (value) => { console.log('darkMode:', value); });
+ */
+export const ThemeProvider = new Vue({
+  data() {
+    return {
+      isDarkMode: getDarkModeFromLocalStorage(),
+    };
+  },
+  computed: {
+    isDark: {
+      get(): boolean {
+        return this.isDarkMode;
+      },
+      set(value: boolean) {
+        this.isDarkMode = value;
+        setDarkModeToLocalStorage(value);
+        this.$emit('darkMode', value);
+      },
+    },
+  },
+  watch: {
+    isDark(newVal: boolean) {
+      setHtmlDarkClass(newVal);
+    },
+  },
+  methods: {
+    setDarkMode(value: boolean) {
+      this.isDark = value; // This will trigger the setter of isDark.
+    },
+  },
+  created() {
+    setHtmlDarkClass(this.isDark); // Sayfa yüklendiğinde fonksiyonu manuel olarak tetikle
+  },
+});
+
+type InjectFunction = (key: string, value: any) => void;
+
+export default (context: Context, inject: InjectFunction) => {
+  inject('theme', ThemeProvider);
+};

package/plugins/ts-components-installer.js

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+
+// get options passed from module.js
+const options = JSON.parse(`<%= JSON.stringify(options) %>`);
+
+import components from '../components-ts/exporter';
+
+// loop through components and register them
+for (const name in components) {
+  Vue.component(name, {
+    // extend the original component
+    extends: components[name],
+    // add a _customCounterOptions prop to gain access to the options in the component
+    props: {
+      timus: {
+        type: Object,
+        default: () => ({ ...options }),
+      },
+    },
+  });
+}