Merge pull request #103 from codex-team/setup-prettier

Setup prettier

.github/workflows/build-check.yml

@@ -25,4 +25,4 @@ jobs:
         run: yarn install
 
       - name: Build app
-        run: yarn build
+        run: yarn build

.github/workflows/eslint-check.yml

@@ -21,5 +21,3 @@ jobs:
 
       - name: Run ESLint
         run: yarn lint
-
-

.github/workflows/send-test-results.yml

@@ -14,7 +14,7 @@ jobs:
       actions: write
     runs-on: ubuntu-22.04
     env:
-      API_URL: "https://api.github.com/repos/${{ github.repository }}/actions/runs"
+      API_URL: 'https://api.github.com/repos/${{ github.repository }}/actions/runs'
     steps:
       - name: Set commit_sha to pull request head sha
         if: ${{ github.event_name == 'pull_request' }}
@@ -58,6 +58,6 @@ jobs:
         uses: codex-team/action-codexbot-notify@v1
         with:
           webhook: ${{ secrets.CODEX_BOT_NOTIFY_NOTES_CHAT }}
-          message: "${{ env.ACTIONS_RESULTS }}"
+          message: '${{ env.ACTIONS_RESULTS }}'
           parse_mode: 'markdown'
-          disable_web_page_preview: true
+          disable_web_page_preview: true

.prettierignore

@@ -0,0 +1,2 @@
+dist
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true,
+  "singleAttributePerLine": true,
+  "bracketSameLine": false,
+  "printWidth": 120
+}

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "vue.volar",
     "vue.vscode-typescript-vue-plugin",
     "arcanis.vscode-zipfs",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
   ]
 }

README.md

@@ -3,24 +3,27 @@
 ### How to run the project
 
 Use node v20 (or at least v19)
+
 ```
 nvm use
 ```
 
 Install dependencies
+
 ```
 yarn install
 ```
 
 Copy .env.sample as .env
+
 ```
 cp .env.sample .env
 ```
 
 Run the project
+
 ```
 yarn dev
 ```
 
 The default project address is http://localhost:5173/
-

codex-ui/README.md

@@ -40,9 +40,7 @@ import { Button, Input, Heading } from 'codex-ui/vue';
 ```
 
 ```vue
-<Heading
-  :level="2"
->
+<Heading :level="2">
   CodeX UI showcase
 </Heading>
 <Button text="Button text" />
@@ -68,7 +66,3 @@ Add the following "path" to the "tsconfig.json"
 
 1. Import `codex-ui/styles` somewhere in App
 2. Use variable in CSS, e.g `var(--ui-color)`
-
-
-
-

codex-ui/postcss.config.js

@@ -11,11 +11,6 @@ import postcssHoverMediaFeature from 'postcss-hover-media-feature';
  */
 export default function () {
   return {
-    plugins: [
-      postcssNested(),
-      postcssPresetEnv(),
-      postcssApply(),
-      postcssHoverMediaFeature(),
-    ],
+    plugins: [postcssNested(), postcssPresetEnv(), postcssApply(), postcssHoverMediaFeature()],
   };
-};
+}

codex-ui/src/styles/mixins/typography.pcss

@@ -1,35 +1,35 @@
 :root {
   --text-heading-1 {
-      font-weight: 700;
-      font-size: 2.75rem;
-      line-height: 120%;
-      letter-spacing: 0.1px;
+    font-weight: 700;
+    font-size: 2.75rem;
+    line-height: 120%;
+    letter-spacing: 0.1px;
   }
 
   --text-heading-2 {
-      font-weight: 700;
-      line-height: 120%;
-      font-size: 1.75rem;
-      letter-spacing: 0.1px;
+    font-weight: 700;
+    line-height: 120%;
+    font-size: 1.75rem;
+    letter-spacing: 0.1px;
   }
 
   --text-heading-3 {
-      font-weight: 700;
-      font-size: 1.375rem;
-      line-height: 120%;
-      letter-spacing: 0.1px;
+    font-weight: 700;
+    font-size: 1.375rem;
+    line-height: 120%;
+    letter-spacing: 0.1px;
   }
 
   --text-body {
-      font-weight: 400;
-      line-height: 25px;
-      font-size: 1rem;
+    font-weight: 400;
+    line-height: 25px;
+    font-size: 1rem;
   }
 
   --text-small {
-      font-weight: 400;
-      font-size: 0.875rem;
-      line-height: 120%;
-      letter-spacing: 0.14px;
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 120%;
+    letter-spacing: 0.14px;
   }
 }

codex-ui/src/vue/button/Button.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script setup lang=ts>
+<script setup lang="ts">
 import { defineProps } from 'vue';
 
 const props = defineProps<{
@@ -15,7 +15,6 @@ const props = defineProps<{
    */
   text: string;
 }>();
-
 </script>
 
 <style lang="postcss" module>

codex-ui/src/vue/heading/Heading.vue

@@ -1,7 +1,7 @@
 <template>
   <component
-   :is="`h${props.level}`"
-   :class="$style.heading"
+    :is="`h${props.level}`"
+    :class="$style.heading"
   >
     <slot />
   </component>

codex-ui/src/vue/index.ts

@@ -2,8 +2,4 @@ import Button from './button/Button.vue';
 import Input from './input/Input.vue';
 import Heading from './heading/Heading.vue';
 
-export {
-  Button,
-  Input,
-  Heading
-}
+export { Button, Input, Heading };

codex-ui/src/vue/input/Input.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang=ts>
+<script setup lang="ts">
 import { defineProps } from 'vue';
 
 const props = defineProps<{
@@ -16,7 +16,6 @@ const props = defineProps<{
    */
   text: string;
 }>();
-
 </script>
 
 <style lang="postcss" module>

codex-ui/tsconfig.dts.json

@@ -5,7 +5,7 @@
     "declaration": true,
     "noEmit": false,
     "emitDeclarationOnly": true,
-    "outDir": "dist",
+    "outDir": "dist"
   },
   "include": ["src"]
 }

codex-ui/tsconfig.json

@@ -3,7 +3,7 @@
     "strict": true,
     "types": ["vite/client"],
     "target": "ES2020",
-    "baseUrl": "src" ,
+    "baseUrl": "src",
     "useDefineForClassFields": true,
     "module": "NodeNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
@@ -16,8 +16,7 @@
     "allowJs": true,
     "declaration": true,
     "declarationDir": "./dist/types",
-    "paths": {
-    },
+    "paths": {}
   },
-  "include": ["src", "vite.config.ts"],
+  "include": ["src", "vite.config.ts"]
 }

codex-ui/vite.config.ts

@@ -37,7 +37,7 @@ export default defineConfig({
           vue: 'Vue',
         },
       },
-       // make sure to externalize deps that shouldn't be bundled
+      // make sure to externalize deps that shouldn't be bundled
       // into your library
       external: ['vue'],
     },
@@ -47,4 +47,4 @@ export default defineConfig({
       '@/': '/src/',
     },
   },
-})
+});

docker-compose.yml

@@ -1,9 +1,9 @@
-version: "3.2"
+version: '3.2'
 services:
   web:
     build:
       dockerfile: Dockerfile
       context: .
     ports:
-      - "127.0.0.1:3000:80"
+      - '127.0.0.1:3000:80'
     restart: unless-stopped

index.html

@@ -1,13 +1,23 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      href="/favicon.png"
+    />
     <title>Notes</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/index.ts"></script>
+    <script
+      type="module"
+      src="/src/index.ts"
+    ></script>
   </body>
 </html>

package.json

@@ -10,7 +10,9 @@
     "preview": "vite preview",
     "lint": "eslint . --ext .ts,.vue",
     "lint:fix": "yarn lint --fix",
-    "watch-ts": "vue-tsc --noEmit --watch"
+    "watch-ts": "vue-tsc --noEmit --watch",
+    "format": "prettier --write --cache .",
+    "format:check": "prettier --check --cache ."
   },
   "workspaces": [
     "codex-ui"
@@ -53,6 +55,7 @@
     "postcss-hover-media-feature": "^1.0.2",
     "postcss-nested": "^6.0.1",
     "postcss-preset-env": "^9.0.0",
+    "prettier": "3.2.5",
     "typescript": "^5.0.2",
     "vite": "^4.4.9",
     "vue-tsc": "^1.8.8"

postcss.config.js

@@ -11,11 +11,6 @@ import postcssHoverMediaFeature from 'postcss-hover-media-feature';
  */
 export default function () {
   return {
-    plugins: [
-      postcssNested(),
-      postcssPresetEnv(),
-      postcssApply(),
-      postcssHoverMediaFeature(),
-    ],
+    plugins: [postcssNested(), postcssPresetEnv(), postcssApply(), postcssHoverMediaFeature()],
   };
-};
+}

src/application/router/routes.ts

@@ -28,7 +28,7 @@ const routes: RouteRecordRaw[] = [
     name: 'note',
     path: '/note/:id',
     component: Note,
-    props: route => ({
+    props: (route) => ({
       id: String(route.params.id),
     }),
   },
@@ -52,7 +52,7 @@ const routes: RouteRecordRaw[] = [
     name: 'note_settings',
     path: '/note/:id/settings',
     component: NoteSettings,
-    props: route => ({
+    props: (route) => ({
       id: String(route.params.id),
     }),
   },

src/application/services/useAppState.ts

@@ -16,7 +16,7 @@ interface UseAppStateComposable {
   /**
    * User editor tools that are used in notes creation
    */
-  userEditorTools: Ref<EditorTool[]>
+  userEditorTools: Ref<EditorTool[]>;
 }
 
 /**

src/application/services/useAuth.ts

@@ -40,11 +40,7 @@ export default function useAuth(): UseOAuthComposableState {
     const left = (window.screen.width - popupWidth) / 2;
     const top = (window.screen.height - popupHeight) / 2;
 
-    window.open(
-      loginUrl,
-      'oauth',
-      `popup=true, width=600, height=400, left=${left}, top=${top}`
-    );
+    window.open(loginUrl, 'oauth', `popup=true, width=600, height=400, left=${left}, top=${top}`);
 
     if (callbackId !== null) {
       off(callbackId);
@@ -70,4 +66,3 @@ export default function useAuth(): UseOAuthComposableState {
     logout,
   };
 }
-

src/application/services/useEditor.ts

@@ -38,7 +38,6 @@ interface UseEditorParams {
   onChange?: (api: API) => void;
 }
 
-
 /**
  * Handles Editor.js instance creation
  *