feat(ci): build

.github/workflows/nextron.yml

@@ -11,8 +11,22 @@ jobs:
       - run: true
 
   build:
-    name: Nextron build
-    needs: authorize
+    name: Build
     runs-on: ubuntu-latest
     steps:
-      - run: true
+      - uses: actions/checkout@v3
+
+      - name: Set Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Run install
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install # will run `yarn install` command
+
+      - name: Build production bundle
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: build # will run `yarn build` command

desktop-app/.eslint.json

@@ -1,3 +1,7 @@
 {
-    "extends": "next/core-web-vitals"
+    "extends": [
+        "plugin:react/recommended",
+        "plugin:tailwindcss/recommended",
+        "next/core-web-vitals"
+    ]
 }

desktop-app/.eslintrc.json

@@ -1,19 +1,23 @@
 {
+    "$schema": "https://json.schemastore.org/eslintrc",
+    "root": true,
     "env": {
         "browser": true,
         "es2021": true
     },
     "extends": [
-        "standard-with-typescript",
-        "plugin:react/recommended"
+        // "standard-with-typescript",
+        "plugin:react/recommended",
+        "plugin:tailwindcss/recommended",
+        "next/core-web-vitals"
     ],
     "parserOptions": {
         "ecmaVersion": "latest",
-        "sourceType": "module",
-        "project": "./tsconfig.json"
+        "sourceType": "module"
     },
     "plugins": [
-        "react"
+        "react",
+        "tailwindcss"
     ],
     "rules": {
         "react/react-in-jsx-scope": "off",
@@ -28,6 +32,33 @@
         ],
         "@typescript-eslint/space-before-function-paren": "off",
         "@typescript-eslint/indent": "off",
-        "multiline-ternary": "off"
-    }
+        "multiline-ternary": "off",
+        //custom rules
+        "@next/next/no-html-link-for-pages": "off",
+        "tailwindcss/no-custom-classname": "off",
+        "tailwindcss/classnames-order": "error"
+    },
+    "settings": {
+        "tailwindcss": {
+            "callees": [
+                "cn",
+                "cva"
+            ],
+            "config": "tailwind.config.cjs"
+        },
+        "next": {
+            "rootDir": [
+                "apps/*/"
+            ]
+        }
+    },
+    "overrides": [
+        {
+            "files": [
+                "*.ts",
+                "*.tsx"
+            ],
+            "parser": "@typescript-eslint/parser"
+        }
+    ]
 }

desktop-app/.gitignore

@@ -4,3 +4,4 @@ node_modules
 /app
 dist
 next-env.d.ts
+out/

desktop-app/electron-builder.yml

@@ -9,4 +9,9 @@ files:
     filter:
       - package.json
       - app
+
+linux:
+  target: deb
+  icon: renderer/public/images/icon.svg
+
 publish: null

desktop-app/main/helpers/create-window.ts

@@ -5,10 +5,10 @@ import {
 } from 'electron'
 import Store from 'electron-store'
 
-export default (
+export default function Main(
   windowName: string,
   options: BrowserWindowConstructorOptions
-): BrowserWindow => {
+): BrowserWindow {
   const key = 'window-state'
   const name = `window-state-${windowName}`
   const store = new Store({ name })

desktop-app/package.json

@@ -1,9 +1,10 @@
 {
   "private": true,
-  "name": "my-nextron-app",
-  "description": "My application description",
+  "name": "napse",
+  "description": "Napse Desktop App",
+  "homepage": "https://napse.invest.com",
   "version": "1.0.0",
-  "author": "Yoshihide Shiono <shiono.yoshihide@gmail.com>",
+  "author": "Napse Invest <napse.invest@gmail.com>",
   "main": "app/background.js",
   "scripts": {
     "start": "nextron",
@@ -38,7 +39,6 @@
     "electron-store": "^8.1.0",
     "lucide-react": "^0.268.0",
     "next-themes": "^0.2.1",
-    "prop-types": "^15.8.1",
     "react-day-picker": "^8.8.1",
     "react-hook-form": "^7.45.4",
     "react-redux": "^8.1.2",
@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@types/node": "^18.11.18",
+    "@types/prop-types": "^15.7.8",
     "@types/react": "^18.0.26",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "autoprefixer": "^10.4.7",
@@ -70,10 +71,13 @@
     "nextron": "^8.5.0",
     "postcss": "^8.4.13",
     "prettier": "^3.0.2",
+    "eslint-plugin-tailwind": "^0.2.1",
+    "eslint-plugin-tailwindcss": "^3.13.0",
     "prettier-plugin-tailwindcss": "^0.5.3",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.1.8",
     "typescript": "5.2.2"
   }
-}
+}

desktop-app/renderer/components/custom/panel/minimalistPanelCard.tsx

@@ -1,5 +1,4 @@
 import PanelCard from '@/components/custom/panel/panelCard'
-import { string } from 'prop-types'
 import React from 'react'
 
 type MinimalistPanelCardProps = {

desktop-app/renderer/components/custom/panel/panelCard.tsx

@@ -61,6 +61,8 @@ function PanelCard({
     )
   })
 
+  CardComponent.displayName = 'Card'
+
   return tooltip ? (
     <TooltipProvider>
       <Tooltip>

desktop-app/renderer/components/custom/statCard.tsx

@@ -78,6 +78,8 @@ function StatCard({
     )
   })
 
+  StatCardComponent.displayName = 'StatCard'
+
   return tooltip ? (
     <TooltipProvider>
       <Tooltip>

desktop-app/renderer/components/ui/button.tsx

@@ -6,15 +6,15 @@ import { cn } from '@/lib/utils'
 import { Close } from '@radix-ui/react-popover'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          'border-input bg-background hover:bg-accent hover:text-accent-foreground border',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',

desktop-app/renderer/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

desktop-app/renderer/components/ui/popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
         className
       )}
       {...props}

desktop-app/renderer/components/ui/progress.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -12,13 +12,13 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      'bg-secondary relative h-4 w-full overflow-hidden rounded-full',
       className
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="bg-primary h-full w-full flex-1 transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

desktop-app/renderer/components/ui/select.tsx

@@ -1,10 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown } from "lucide-react"
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown } from 'lucide-react'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Select = SelectPrimitive.Root
 
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className
     )}
     {...props}
@@ -35,24 +35,24 @@ SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = 'popper', ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
       )}
       position={position}
       {...props}
     >
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
         )}
       >
         {children}
@@ -68,7 +68,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
     {...props}
   />
 ))
@@ -81,7 +81,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -103,7 +103,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
     {...props}
   />
 ))
@@ -117,5 +117,5 @@ export {
   SelectContent,
   SelectLabel,
   SelectItem,
-  SelectSeparator,
+  SelectSeparator
 }

desktop-app/renderer/components/ui/separator.tsx

@@ -18,7 +18,7 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'shrink-0 bg-border',
+        'bg-border shrink-0',
         orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
         className
       )}