add app notes

README.md

@@ -4,3 +4,21 @@ This project is developing and not stable.
 
 - [large-file-upload](http://198.23.196.205:3000/)
 - [stackoverflow](http://198.23.196.205:3001/)
+
+## Development
+
+Requirements: Node.js >= 18
+
+Ensure you have `pnpm` and `turbo` installed globally.
+
+Develop libs:
+
+```bash
+turbo build:watch
+```
+
+Develop app:
+
+```bash
+turbo dev
+```

apps/notes/.env

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
+NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"
+

apps/notes/.env.local.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
+CLERK_SECRET_KEY=""

apps/notes/.storybook/main.ts

@@ -4,6 +4,7 @@ import sharedConfig from "@npc/storybook-config";
 
 const config: StorybookConfig = {
   ...sharedConfig,
+  stories: ["./stories/**/*.stories.tsx"],
   staticDirs: ["../public"],
 };
 

apps/notes/.storybook/manager.ts

@@ -4,6 +4,6 @@ import { themes } from "@storybook/theming";
 addons.setConfig({
   theme: {
     brandTitle: "Storybook for @npc/notes",
-    ...themes.normal,
+    ...themes.dark,
   },
 });

apps/notes/.storybook/preview.tsx

@@ -1,5 +1,10 @@
 import { nunito } from "@/font";
 import { ETheme, SyncElementClass, useTheme } from "@/theme";
+import { DARK, LIGHT } from "@/theme/variables";
+import {
+  INITIAL_VIEWPORTS,
+  MINIMAL_VIEWPORTS,
+} from "@storybook/addon-viewport";
 import type { Preview } from "@storybook/react";
 import { useEffect } from "react";
 import "../src/app/globals.css";
@@ -12,15 +17,36 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        ...INITIAL_VIEWPORTS,
+        ...MINIMAL_VIEWPORTS,
+      },
+      defaultViewport: "iphone14promax",
+    },
+    backgrounds: {
+      default: "dark",
+      values: [
+        {
+          name: "dark",
+          value: DARK.bgPrimary,
+        },
+        {
+          name: "light",
+          value: LIGHT.bgPrimary,
+        },
+      ],
+    },
   },
   decorators: [
     (Story, context) => {
       // enable background change to theme change
       const {
         globals: { backgrounds },
       } = context;
+
       const themeValue =
-        backgrounds?.value === "#333333" ? ETheme.Dark : ETheme.Light;
+        backgrounds?.value === LIGHT.bgPrimary ? ETheme.Light : ETheme.Dark;
 
       const theme = useTheme();
 

apps/notes/.storybook/stories/button/button.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta } from "@storybook/react";
+
+import { Button } from "@/button/button";
+
+export default {
+  component: Button,
+  args: {
+    children: "Button",
+  },
+} as Meta<typeof Button>;
+
+export const Success = {
+  args: {
+    variant: "success",
+  },
+};
+export const Danger = {
+  args: {
+    variant: "danger",
+  },
+};

apps/notes/.storybook/stories/button/float.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { IconPlus } from "@/assets/icon/plus";
+import { ButtonFixed } from "@/button/float";
+
+export default {
+  component: ButtonFixed,
+  args: {
+    children: <IconPlus size="xxl" alt="plus" />,
+  },
+} as Meta<typeof ButtonFixed>;
+
+export const Base: StoryFn<typeof ButtonFixed> = (args) => (
+  <ButtonFixed {...args} />
+);

apps/notes/.storybook/stories/button/icon.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { IconEdit } from "@/assets/icon/edit";
+import { ButtonIcon } from "@/button/icon";
+
+export default {
+  component: IconEdit,
+} as Meta<typeof IconEdit>;
+
+export const Base: StoryFn<typeof IconEdit> = (args) => (
+  <ButtonIcon {...args}>
+    <IconEdit alt="edit" />
+  </ButtonIcon>
+);

apps/notes/.storybook/stories/icon/icon.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { IconEdit } from "@/assets/icon/edit";
+
+export default {
+  component: IconEdit,
+  args: {
+    size: "default",
+    alt: "edit",
+  },
+} as Meta<typeof IconEdit>;
+
+export const Base: StoryFn<typeof IconEdit> = (args) => <IconEdit {...args} />;

apps/notes/.storybook/stories/input/content.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { InputContent } from "@/input/content";
+
+export default {
+  component: InputContent,
+  args: {
+    readOnly: false,
+  },
+} as Meta<typeof InputContent>;
+
+export const Base: StoryFn<typeof InputContent> = (args) => (
+  <InputContent {...args} />
+);

apps/notes/.storybook/stories/input/search.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { InputSearch } from "@/input/search";
+
+export default {
+  component: InputSearch,
+  args: {
+    placeholder: "Food Recipe",
+  },
+} as Meta<typeof InputSearch>;
+
+export const Base: StoryFn<typeof InputSearch> = (args) => (
+  <InputSearch {...args} />
+);

apps/notes/.storybook/stories/input/title.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { InputTitle } from "@/input/title";
+
+export default {
+  component: InputTitle,
+  args: {
+    readOnly: false,
+  },
+} as Meta<typeof InputTitle>;
+
+export const Base: StoryFn<typeof InputTitle> = (args) => (
+  <InputTitle {...args} />
+);

apps/notes/.storybook/stories/note/edit.stories.tsx

@@ -0,0 +1,11 @@
+import { Meta, StoryFn } from "@storybook/react";
+import React from "react";
+
+import { NoteEdit } from "@/note/edit";
+
+export default {
+  component: NoteEdit,
+  args: {},
+} as Meta<typeof NoteEdit>;
+
+export const Base: StoryFn<typeof NoteEdit> = (args) => <NoteEdit {...args} />;

apps/notes/.storybook/stories/search/input.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { SearchInput } from "@/search/input";
+
+export default {
+  component: SearchInput,
+  args: {
+    placeholder: "Food Recipe",
+  },
+} as Meta<typeof SearchInput>;
+
+export const Base: StoryFn<typeof SearchInput> = (args) => (
+  <SearchInput {...args} />
+);

apps/notes/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": " dotenv -e .env.development bash ./dev.startup.sh",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "storybook": "storybook dev -p 6006",
@@ -13,33 +13,43 @@
     "test": "vitest --run",
     "test:watch": "vitest watch",
     "test:changed": "vitest run --changed",
-    "check-types": "tsc --noEmit"
+    "prisma:studio": "dotenv -e .env.development -- prisma studio -b false",
+    "check-types": "tsc --noEmit",
+    "postinstall": "npc generate-components --templatesDir ./templates --outDir ./src/libs/assets --publicDir ./public"
   },
   "dependencies": {
+    "@clerk/nextjs": "^5.2.3",
+    "@clerk/themes": "^2.1.12",
+    "@faker-js/faker": "^8.4.1",
     "@npc/playwright-config": "workspace:^",
     "@npc/shared": "workspace:^",
     "@npc/tailwind-config": "workspace:^",
     "@npc/theme": "workspace:^",
     "@prisma/client": "^5.16.2",
     "ahooks": "^3.8.0",
+    "class-variance-authority": "^0.7.0",
+    "lodash-es": "^4.17.21",
     "next": "14.2.5",
     "prisma": "^5.16.2",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@npc/cli": "workspace:^",
     "@npc/eslint-config": "workspace:*",
     "@npc/storybook-config": "workspace:^",
     "@npc/typescript-config": "workspace:*",
     "@npc/vitest-config": "workspace:^",
     "@playwright/test": "^1.45.2",
-    "@storybook/manager-api": "^8.2.4",
-    "@storybook/nextjs": "^8.2.4",
-    "@storybook/react": "^8.2.4",
-    "@storybook/test": "^8.2.4",
-    "@storybook/theming": "^8.2.4",
+    "@storybook/addon-viewport": "8.2.4",
+    "@storybook/manager-api": "8.2.4",
+    "@storybook/nextjs": "8.2.4",
+    "@storybook/react": "8.2.4",
+    "@storybook/test": "8.2.4",
+    "@storybook/theming": "8.2.4",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

apps/notes/prisma/schema.prisma

@@ -8,10 +8,9 @@ datasource db {
 }
 
 model User {
-  id       String @id @default(uuid())
-  username String
-  password String
-  notes    Note[]
+  id      String @id @default(uuid())
+  clerkId String @unique
+  notes   Note[]
 }
 
 model Note {
@@ -22,4 +21,5 @@ model Note {
   updatedAt DateTime @updatedAt
   author    User     @relation(fields: [authorId], references: [id])
   authorId  String
+  color     String
 }