done v1.1

tecklens · Oct 23, 2024 · bb8406f · bb8406f
1 parent 83b14f4
commit bb8406f
Show file tree

Hide file tree

Showing 9 changed files with 380 additions and 286 deletions.
diff --git a/README.md b/README.md
@@ -33,105 +33,115 @@ You can find the source code [here](#)
 ### Desktop (max-w-screen-md)
 ![desktop](/public/desktop.png)
 
+### Desktop editing (max-w-screen-md)
+![desktop - edit](/public/desktop2.png)
+
 ---
 
 ## Usage
 
 Following is a basic example to start testing the library in your project. This library works on a user basis system and here are a few important points to remember:
 
-| Props       | Data Types                    | Default |
-|-------------|-------------------------------|---------|
-| theme       | 'light' \| 'dark' \| 'system' | light   |
-| currentUser | [User](#types)                | default |
-| value       | [Comment\[\]](#types)         | []      |
-| onChange    | (comments: Comment[]) => void |         |
-| className   | string                        |         |
+| Props        | Data Types                    | Default |
+|--------------|-------------------------------|---------|
+| theme        | 'light' \| 'dark' \| 'system' | light   |
+| currentUser  | [User](#types)                | default |
+| value        | [Comment\[\]](#types)         | []      |
+| onChange     | (comments: Comment[]) => void |         |
+| className    | string                        |         |
+| allowUpVote  | boolean                       | false   |
+| onVoteChange | (checked: boolean) => void    | false   |
 
 ```typescript
-import {useState} from "react";
+iimport {useState} from "react";
 import {Terminal} from "lucide-react";
 import {useTheme} from "./theme-provider.tsx";
-import {Alert, AlertDescription, AlertTitle, Button, CommentSection} from 'shadcn-comments'
+import {Alert, AlertDescription, AlertTitle, Button, CommentSection, ACTIONS_TYPE} from 'shadcn-comments'
 
 export default function DemoComment() {
-  const {theme, setTheme} = useTheme()
-  const [value, setValue] = useState<any[]>([
-    {
-      user: {
-        id: '1',
-        userProfile: '',
-        fullName: 'victorcesae',
-        avatarUrl: ''
-      },
-      id: '2',
-      text: 'Another utility is to add text adornments, doing some simple typechecking so if a string is passed you can style a background, else render the react node.',
-      replies: [],
-      createdAt: new Date('2024-06-01')
-    },
-    {
-      user: {
-        id: '4',
-        userProfile: '',
-        fullName: 'UltimateGG',
-        avatarUrl: ''
-      },
-      id: '3',
-      text: 'Another utility is to add text adornments, doing some simple typechecking so if a string is passed you can style a background, else render the react node.',
-      replies: [{
-        user: {
-          id: '4',
-          userProfile: '',
-          fullName: 'UltimateGG',
-          avatarUrl: ''
+    const {theme, setTheme} = useTheme()
+    const [value, setValue] = useState<any[]>([
+        {
+            user: {
+                id: '1',
+                userProfile: '',
+                fullName: 'victorcesae',
+                avatarUrl: ''
+            },
+            id: '2',
+            text: 'Another utility is to add text adornments, doing some simple typechecking so if a string is passed you can style a background, else render the react node.',
+            replies: [],
+            createdAt: new Date('2024-06-01'),
+            selectedActions: [ACTIONS_TYPE.UPVOTE],
+            actions: {
+                [ACTIONS_TYPE.UPVOTE]: 1
+            }
         },
-        id: '8',
-        text: 'Another utility is to add text adornments',
-        replies: [],
-        createdAt: new Date('2024-09-02')
-      }],
-      createdAt: new Date('2024-09-01')
-    }
-  ])
-
-  const toggleDarkMode = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light');
-  };
-
-  return (
-    <div className={`flex align-center justify-start flex-col min-h-[100vh] p-3 md:p-4`}>
-      <div className={'flex flex-col w-full items-center'}>
-        <h1 className="text-xl md:text-3xl font-bold underline">
-          Built using shadcn-comments
-        </h1>
-        <div className='py-4'>
-          <Button onClick={toggleDarkMode}>Toggle Dark Mode</Button>
-        </div>
-        <div className='py-4'>
-          <Alert>
-            <Terminal className="h-4 w-4"/>
-            <AlertTitle>Heads up!</AlertTitle>
-            <AlertDescription>
-              You can add components and dependencies to your app using the cli.
-            </AlertDescription>
-          </Alert>
-        </div>
-      </div>
-      <CommentSection
-        theme={theme}
-        currentUser={{
-          id: '1',
-          userProfile: '',
-          fullName: 'Me',
-          avatarUrl: 'https://github.com/shadcn.png'
-        }}
-        value={value}
-        onChange={(val) => {
-          setValue(val)
-        }}
-        className={''}
-      />
+        {
+            user: {
+                id: '4',
+                userProfile: '',
+                fullName: 'UltimateGG',
+                avatarUrl: ''
+            },
+            id: '3',
+            text: 'Another utility is to add text adornments, doing some simple typechecking so if a string is passed you can style a background, else render the react node.',
+            replies: [{
+                user: {
+                    id: '4',
+                    userProfile: '',
+                    fullName: 'UltimateGG',
+                    avatarUrl: ''
+                },
+                id: '8',
+                text: 'Another utility is to add text adornments',
+                replies: [],
+                createdAt: new Date('2024-09-02')
+            }],
+            createdAt: new Date('2024-09-01')
+        }
+    ])
+
+    const toggleDarkMode = () => {
+        setTheme(theme === 'light' ? 'dark' : 'light');
+    };
+
+    return (
+        <div className={`flex align-center justify-start flex-col min-h-[100vh] p-3 md:p-4`}>
+    <div className={'flex flex-col w-full items-center'}>
+    <h1 className="text-xl md:text-3xl font-bold underline">
+        Built using shadcn-comments
+    </h1>
+    <div className='py-4'>
+    <Button onClick={toggleDarkMode}>Toggle Dark Mode</Button>
+    </div>
+    <div className='py-4'>
+    <Alert>
+        <Terminal className="h-4 w-4"/>
+        <AlertTitle>Heads up!</AlertTitle>
+    <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+    </AlertDescription>
+    </Alert>
+    </div>
+    </div>
+    <CommentSection
+    theme={theme}
+    currentUser={{
+        id: '1',
+            userProfile: '',
+            fullName: 'Me',
+            avatarUrl: 'https://github.com/shadcn.png'
+    }}
+    value={value}
+    onChange={(val) => {
+        setValue(val)
+    }}
+    className={''}
+    allowUpVote={true}
+    />
     </div>
-  )
+)
 }
 ```
 ---

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
     "date-fns": "^3.6.0",
-    "lucide-react": "^0.221.0",
+    "lucide-react": "^0.453.0",
     "tailwind-merge": "^1.12.0",
     "tailwindcss-animate": "^1.0.5"
   },

diff --git a/public/desktop.png b/public/desktop.png