feat(frontend): merge config for stylelint, eslint and prettier

.eslintrc.cjs

@@ -10,6 +10,7 @@ module.exports = {
     'plugin:astro/recommended',
     'plugin:astro/jsx-a11y-recommended',
     'plugin:vue/vue3-recommended',
+    'prettier',
   ],
   parserOptions: {
     ecmaVersion: 'latest',

.stylelintignore

@@ -0,0 +1,2 @@
+**/build/*
+**/node_modules/*

apps/frontend/packages/css-config/stylelint.config.mjs

@@ -0,0 +1,17 @@
+export default {
+	overrides: [
+		{
+			files: ['**/*.scss'],
+			customSyntax: 'postcss-scss',
+		},
+	],
+	extends: ['stylelint-config-standard'],
+	rules: {
+		'at-rule-no-unknown': [
+			true,
+			{
+				ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen'],
+			},
+		],
+	},
+};

apps/frontend/packages/ui-vue/src/components/BaseDataTable.vue

@@ -1,109 +1,106 @@
 <template>
-  <div
-    class="block items-center justify-between border-b border-gray-200 bg-white p-4 sm:flex lg:mt-1.5 dark:border-gray-700 dark:bg-gray-800"
-  >
-    <div class="mb-1 w-full">
-      <slot name="top" />
-    </div>
-  </div>
-  <div class="flex flex-col">
-    <div class="overflow-x-auto">
-      <div class="inline-block min-w-full align-middle">
-        <div class="relative items-center block overflow-hidden shadow-md">
-          <table
-            v-if="items && items.length > 0"
-            class="w-full min-w-full table-fixed divide-y divide-gray-200 dark:divide-gray-600"
-          >
-            <thead class="bg-gray-100 dark:bg-gray-700">
-              <tr>
-                <th
-                  v-for="column in columns"
-                  :key="column.key"
-                  scope="col"
-                  class="p-4 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"
-                >
-                  <div class="flex items-center">
-                    {{ column.label }}
-                    <svg
-                      v-if="column.sortable"
-                      xmlns="http://www.w3.org/2000/svg"
-                      :class="{
-                        'border-primary-500 text-primary-500 rounded border':
-                          sortKey === column.key,
-                      }"
-                      class="ml-1 h-6 w-6 cursor-pointer p-0.5"
-                      fill="currentColor"
-                      viewBox="0 0 256 256"
-                      @click="onColumnHeaderClick(column)"
-                    >
-                      <path
-                        v-if="sortDesc"
-                        fill="currentColor"
-                        d="M42 128a6 6 0 0 1 6-6h72a6 6 0 0 1 0 12H48a6 6 0 0 1-6-6m6-58h56a6 6 0 0 0 0-12H48a6 6 0 0 0 0 12m136 116H48a6 6 0 0 0 0 12h136a6 6 0 0 0 0-12m44.24-102.24l-40-40a6 6 0 0 0-8.48 0l-40 40a6 6 0 0 0 8.48 8.48L178 62.49V144a6 6 0 0 0 12 0V62.49l29.76 29.75a6 6 0 0 0 8.48-8.48"
-                      />
-                      <path
-                        v-else
-                        fill="currentColor"
-                        d="M126 128a6 6 0 0 1-6 6H48a6 6 0 0 1 0-12h72a6 6 0 0 1 6 6M48 70h136a6 6 0 0 0 0-12H48a6 6 0 0 0 0 12m56 116H48a6 6 0 0 0 0 12h56a6 6 0 0 0 0-12m124.24-22.24a6 6 0 0 0-8.48 0L190 193.51V112a6 6 0 0 0-12 0v81.51l-29.76-29.75a6 6 0 0 0-8.48 8.48l40 40a6 6 0 0 0 8.48 0l40-40a6 6 0 0 0 0-8.48"
-                      />
-                    </svg>
-                  </div>
-                </th>
-              </tr>
-            </thead>
+	<div
+		class="block items-center justify-between border-b border-gray-200 bg-white p-4 sm:flex lg:mt-1.5 dark:border-gray-700 dark:bg-gray-800"
+	>
+		<div class="mb-1 w-full">
+			<slot name="top" />
+		</div>
+	</div>
+	<div class="flex flex-col">
+		<div class="overflow-x-auto">
+			<div class="inline-block min-w-full align-middle">
+				<div class="relative block items-center overflow-hidden shadow-md">
+					<table
+						v-if="items && items.length > 0"
+						class="w-full min-w-full table-fixed divide-y divide-gray-200 dark:divide-gray-600"
+					>
+						<thead class="bg-gray-100 dark:bg-gray-700">
+							<tr>
+								<th
+									v-for="column in columns"
+									:key="column.key"
+									scope="col"
+									class="p-4 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400"
+								>
+									<div class="flex items-center">
+										{{ column.label }}
+										<svg
+											v-if="column.sortable"
+											xmlns="http://www.w3.org/2000/svg"
+											:class="{
+												'border-primary-500 text-primary-500 rounded border':
+													sortKey === column.key,
+											}"
+											class="ml-1 h-6 w-6 cursor-pointer p-0.5"
+											fill="currentColor"
+											viewBox="0 0 256 256"
+											@click="onColumnHeaderClick(column)"
+										>
+											<path
+												v-if="sortDesc"
+												fill="currentColor"
+												d="M42 128a6 6 0 0 1 6-6h72a6 6 0 0 1 0 12H48a6 6 0 0 1-6-6m6-58h56a6 6 0 0 0 0-12H48a6 6 0 0 0 0 12m136 116H48a6 6 0 0 0 0 12h136a6 6 0 0 0 0-12m44.24-102.24l-40-40a6 6 0 0 0-8.48 0l-40 40a6 6 0 0 0 8.48 8.48L178 62.49V144a6 6 0 0 0 12 0V62.49l29.76 29.75a6 6 0 0 0 8.48-8.48"
+											/>
+											<path
+												v-else
+												fill="currentColor"
+												d="M126 128a6 6 0 0 1-6 6H48a6 6 0 0 1 0-12h72a6 6 0 0 1 6 6M48 70h136a6 6 0 0 0 0-12H48a6 6 0 0 0 0 12m56 116H48a6 6 0 0 0 0 12h56a6 6 0 0 0 0-12m124.24-22.24a6 6 0 0 0-8.48 0L190 193.51V112a6 6 0 0 0-12 0v81.51l-29.76-29.75a6 6 0 0 0-8.48 8.48l40 40a6 6 0 0 0 8.48 0l40-40a6 6 0 0 0 0-8.48"
+											/>
+										</svg>
+									</div>
+								</th>
+							</tr>
+						</thead>
 
-            <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-800">
-              <tr
-                v-for="item in sortItems"
-                :key="item.id"
-                class="hover:bg-gray-100 dark:hover:bg-gray-700"
-              >
-                <td
-                  v-for="column in columns"
-                  :key="column.key"
-                  class="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
-                >
-                  <div class="text-base font-semibold text-gray-900 dark:text-white">
-                    <slot
-                      :name="column.key"
-                      :item="item"
-                    >
-                      {{ item[column.key] }}
-                    </slot>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <template v-else>
-            <slot name="no-data">
-              <div class="flex flex-col items-center justify-center py-12">
-                <svg
-                  class="h-12 w-12"
-                  fill="currentColor"
-                  viewBox="0 0 256 256"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M128 26c-52.71 0-94 23.72-94 54v96c0 30.28 41.29 54 94 54s94-23.72 94-54V80c0-30.28-41.29-54-94-54m0 12c44.45 0 82 19.23 82 42s-37.55 42-82 42s-82-19.23-82-42s37.55-42 82-42m82 138c0 22.77-37.55 42-82 42s-82-19.23-82-42v-21.21C62 171.16 92.37 182 128 182s66-10.84 82-27.21Zm0-48c0 22.77-37.55 42-82 42s-82-19.23-82-42v-21.21C62 123.16 92.37 134 128 134s66-10.84 82-27.21Z"
-                  />
-                </svg>
+						<tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-800">
+							<tr
+								v-for="item in sortItems"
+								:key="item.id"
+								class="hover:bg-gray-100 dark:hover:bg-gray-700"
+							>
+								<td
+									v-for="column in columns"
+									:key="column.key"
+									class="whitespace-nowrap p-4 text-sm font-normal text-gray-500 dark:text-gray-400"
+								>
+									<div class="text-base font-semibold text-gray-900 dark:text-white">
+										<slot :name="column.key" :item="item">
+											{{ item[column.key] }}
+										</slot>
+									</div>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+					<template v-else>
+						<slot name="no-data">
+							<div class="flex flex-col items-center justify-center py-12">
+								<svg
+									class="h-12 w-12"
+									fill="currentColor"
+									viewBox="0 0 256 256"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										fill="currentColor"
+										d="M128 26c-52.71 0-94 23.72-94 54v96c0 30.28 41.29 54 94 54s94-23.72 94-54V80c0-30.28-41.29-54-94-54m0 12c44.45 0 82 19.23 82 42s-37.55 42-82 42s-82-19.23-82-42s37.55-42 82-42m82 138c0 22.77-37.55 42-82 42s-82-19.23-82-42v-21.21C62 171.16 92.37 182 128 182s66-10.84 82-27.21Zm0-48c0 22.77-37.55 42-82 42s-82-19.23-82-42v-21.21C62 123.16 92.37 134 128 134s66-10.84 82-27.21Z"
+									/>
+								</svg>
 
-                <p class="mt-2 text-sm font-medium text-gray-500 dark:text-gray-400">
-                  No data available
-                </p>
-              </div>
-            </slot>
-          </template>
-          <slot name="loader">
-            <span class="sr-only">Loading...</span>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-  <slot name="footer" />
+								<p class="mt-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+									No data available
+								</p>
+							</div>
+						</slot>
+					</template>
+					<slot name="loader">
+						<span class="sr-only">Loading...</span>
+					</slot>
+				</div>
+			</div>
+		</div>
+	</div>
+	<slot name="footer" />
 </template>
 
 <script setup lang="ts">

apps/frontend/packages/ui-vue/src/components/BaseSelectInput.vue

@@ -1,35 +1,33 @@
 <template>
-  <div class="flex flex-col">
-    <label
-      v-if="label"
-      :for="label"
-      class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-    >{{ label }}</label>
-    <select
-      :id="label"
-      v-model="model"
-      :class="{
-        'p-1 text-sm': size === 'small',
-        'p-2.5 text-sm': size === 'medium',
-        'px-4 py-3 text-base': size === 'large',
-      }"
-      class="block w-full rounded-lg border border-gray-300 bg-gray-50 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-    >
-      <option
-        v-for="option in options"
-        :key="keyProp ? option[keyProp] : option"
-        :value="keyProp ? option[keyProp] : option"
-        :selected="isOptionSelected(option)"
-      >
-        <slot
-          name="option"
-          :option="option"
-        >
-          {{ option }}
-        </slot>
-      </option>
-    </select>
-  </div>
+	<div class="flex flex-col">
+		<label
+			v-if="label"
+			:for="label"
+			class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
+			>{{ label }}</label
+		>
+		<select
+			:id="label"
+			v-model="model"
+			:class="{
+				'p-1 text-sm': size === 'small',
+				'p-2.5 text-sm': size === 'medium',
+				'px-4 py-3 text-base': size === 'large',
+			}"
+			class="block w-full rounded-lg border border-gray-300 bg-gray-50 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+		>
+			<option
+				v-for="option in options"
+				:key="keyProp ? option[keyProp] : option"
+				:value="keyProp ? option[keyProp] : option"
+				:selected="isOptionSelected(option)"
+			>
+				<slot name="option" :option="option">
+					{{ option }}
+				</slot>
+			</option>
+		</select>
+	</div>
 </template>
 
 <script setup lang="ts">

apps/frontend/packages/ui-vue/src/components/BasicCounter.vue

@@ -1,7 +1,5 @@
 <template>
-  <button @click="count++">
-    Clicked {{ count }} times
-  </button>
+	<button @click="count++">Clicked {{ count }} times</button>
 </template>
 
 <script setup lang="ts">

apps/frontend/packages/ui-vue/stylelint.config.mts

@@ -1,2 +1,2 @@
-import stylelintConfig from '@lyra/css-config/stylelint.config.mts';
+import stylelintConfig from '../css-config/stylelint.config.mjs';
 export default stylelintConfig;

apps/frontend/packages/ui/stylelint.config.mts

@@ -1,2 +1,2 @@
-import stylelintConfig from '@lyra/css-config/stylelint.config.mts';
+import stylelintConfig from '../css-config/stylelint.config.mjs';
 export default stylelintConfig;

apps/frontend/web/src/components/AllSubscribers.astro

@@ -1,41 +1,23 @@
 ---
 import { Breadcrumb } from '@lyra/ui';
 import CrudSubscriberDataTable from './CrudSubscriberDataTable.vue';
-import { BreadcrumbItem } from '@lyra/vm-core';
+import { type BreadcrumbItem } from '@lyra/vm-core';
 
-const columns = [
-	{
-		key: 'id',
-		label: 'ID',
-	},
-	{
-		key: 'email',
-		label: 'Email',
-	},
-	{
-		key: 'name',
-		label: 'Name',
-	},
-	{
-		key: 'status',
-		label: 'Status',
-	},
-];
 const breadcrumbItems: BreadcrumbItem[] = [
-	{
-		label: 'Home',
-		href: '/app',
-	},
-	{
-		label: 'Audience',
-		href: '/app/audience',
-		icon: 'ph:users-duotone',
-	},
-	{
-		label: 'Subscribers',
-		href: '/app/audience/subscribers',
-		icon: 'ph:users-three-duotone',
-	},
+ {
+  label: 'Home',
+  href: '/app',
+ } as BreadcrumbItem,
+ {
+  label: 'Audience',
+  href: '/app/audience',
+  icon: 'ph:users-duotone',
+ } as BreadcrumbItem,
+ {
+  label: 'Subscribers',
+  href: '/app/audience/subscribers',
+  icon: 'ph:users-three-duotone',
+ } as BreadcrumbItem,
 ];
 ---