chore(config): clean and unify build configs for sugarss + vite

Author: dotnil

.postcssrc.json

@@ -1,4 +1,4 @@
 {
   "extends": "stylelint-config-sugarss-recommended",
-  "customSyntax": "postcss-html"
+  "customSyntax": "postcss-sugarss"
 }

.stylelintrc.json

@@ -1,5 +1,5 @@
 {
-  "name": "todo",
+  "name": "hibi",
   "private": true,
   "version": "0.0.0",
   "scripts": {
@@ -9,17 +9,16 @@
     "lint-js": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
     "lint-css": "stylelint src",
     "lint": "npm run lint-js # npm run lint-css",
-    "test": "vitest run",
-    "coverage": "vitest run --coverage"
+    "test": "vitest run --passWithNoTests",
+    "coverage": "vitest run --coverage --passWithNoTests"
   },
   "dependencies": {
     "pinia": "^2.0.13",
-    "vue": "^3.2.25",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@peculiar/webcrypto": "^1.4.0",
-    "@vitejs/plugin-vue": "^3.0.0",
+    "@vitejs/plugin-vue": "^3.2.0",
     "@vue/test-utils": "^2.0.0-rc.18",
     "c8": "^7.11.0",
     "eslint": "^8.12.0",
@@ -31,7 +30,8 @@
     "stylelint": "^14.6.1",
     "stylelint-config-sugarss-recommended": "^3.0.0",
     "sugarss": "^4.0.1",
-    "vite": "^3.0.0",
-    "vitest": "^0.18.0"
+    "vite": "^3.2.11",
+    "vitest": "^0.18.0",
+    "vue": "^3.5.22"
   }
 }

docs/assets/index.3e63470d.js

@@ -1,24 +1,29 @@
-<template>
-  <router-view />
+<template lang='pug'>
+.app
+  router-view
 </template>
 
+<script setup>
+// Корневой компонент — просто "контейнер"
+// Здесь рендерится текущая страница
+</script>
+
 <style>
 @font-face
   font-family: "Montserrat"
-  src: url('assets/montserrat-regular.woff2') format("woff2")
+  src: url('@/assets/montserrat-regular.woff2') format("woff2")
 
 @font-face
   font-family: "Vensfolk"
-  src: url('assets/vensfolk.otf') format('opentype')
+  src: url('@/assets/vensfolk.otf') format('opentype')
 
 body
   margin: 0
-  background-image: linear-gradient(35deg, #fdfcfb 0%, #e2d1c3 100%)
+  background: linear-gradient(35deg, #fdfcfb 0%, #e2d1c3 100%)
+  font-family: "Montserrat"
 
 .app
-  font-family: "Montserrat"
   min-height: 100vh
-  color: #2c3e50
   box-sizing: border-box
-
+  color: #2c3e50
 </style>

package-lock.json

@@ -0,0 +1,30 @@
+<template lang='pug'>
+button.day-circle(
+  :class="{ done }"
+  @click="$emit('click')"
+)
+</template>
+
+<script setup>
+// Компонент "круг-день".
+// При клике эмитит событие наверх.
+
+const props = defineProps({
+  done: Boolean
+})
+</script>
+
+<style scoped>
+.day-circle
+  width: 28px
+  height: 28px
+  border-radius: 50%
+  border: 2px solid #bbb
+  background: none
+  cursor: pointer
+  transition: all 0.2s ease
+
+.day-circle.done
+  background: #8f0000
+  border-color: #8f0000
+</style>

package.json

@@ -0,0 +1,53 @@
+<template lang='pug'>
+.task-editor
+  input.task-editor__input(
+    v-model='name'
+    placeholder='Новая привычка...'
+    @keyup.enter='add'
+  )
+  select.task-editor__select(v-model='type')
+    option(value='habit') привычка
+    option(value='periodic') периодическая
+  button.task-editor__button(@click='add') +
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useTasksStore } from '@/stores/tasks'
+
+const name = ref('')
+const type = ref('habit')
+const store = useTasksStore()
+
+// Добавляем новую задачу
+function add() {
+  if (!name.value.trim()) return
+  store.addTask({ name: name.value, type: type.value })
+  name.value = ''
+}
+</script>
+
+<style scoped>
+.task-editor
+  display: flex
+  gap: 8px
+  margin-top: 24px
+
+.task-editor__input
+  flex: 1
+  border: none
+  border-bottom: 1px solid #aaa
+  background: none
+  font-family: 'Montserrat'
+  font-size: 1em
+
+.task-editor__button
+  all: unset
+  cursor: pointer
+  font-size: 1.5em
+  width: 32px
+  text-align: center
+
+.task-editor__button:hover
+  color: #8f0000
+</style>

src/App.vue

@@ -0,0 +1,50 @@
+<template lang='pug'>
+li.task-item
+  span.task-item__name {{ task.name }}
+  .task-item__days
+    DayCircle(
+      v-for='(day, index) in 7'
+      :key='index'
+      :done='isDone(index)'
+      @click='toggle(index)'
+    )
+</template>
+
+<script setup>
+// Один элемент списка — отдельная привычка или задача
+
+import DayCircle from './DayCircle.vue'
+import { useTasksStore } from '@/stores/tasks'
+import { getDateForIndex } from '@/composables/useDateHelpers'
+
+const props = defineProps({ task: Object })
+const store = useTasksStore()
+
+// Проверяем, выполнен ли день по индексу
+function isDone(index) {
+  const date = getDateForIndex(index)
+  return props.task.history.some(h => h.date === date)
+}
+
+// Кликаем — отмечаем или убираем выполнение
+function toggle(index) {
+  const date = getDateForIndex(index)
+  store.toggleDay(props.task.id, date)
+}
+</script>
+
+<style>
+.task-item
+  display: flex
+  justify-content: space-between
+  align-items: center
+  padding: 12px 0
+
+.task-item__name
+  font-family: "Montserrat"
+  font-size: 1em
+
+.task-item__days
+  display: flex
+  gap: 6px
+</style>