Feature/prisma

contributors.yml

@@ -2,3 +2,4 @@
 - kamilkedzierski
 - mmmm
 - test
+- mskwierczynski

elements.json

@@ -8,6 +8,26 @@
         "id": "4494f6cd-d586-4685-8647-1e7d5c713669",
         "description": "lorem"
       }
+    ],
+    "forms": [
+      {
+        "author": "mskwio",
+        "category": "default",
+        "type": "forms",
+        "id": "bb64273b-786f-4d82-b6ae-a63d95f1e85f",
+        "description": "Lorem ipsum dolores"
+      }
+    ]
+  },
+  "business": {
+    "components": [
+      {
+        "author": "mskwierczynski",
+        "category": "business",
+        "type": "components",
+        "id": "a286d73b-0d83-4f41-ac01-701ad0522dd1",
+        "description": "Business component"
+      }
     ]
   }
 }

lib/default/forms/formLayouts/586b4ad0-9949-4000-b6bf-202db8fea36f/element.stories.js → lib/business/components/a286d73b-0d83-4f41-ac01-701ad0522dd1/element.stories.js

@@ -1,7 +1,8 @@
+import '../../../../src/styles/globals.css';
 import Element from './';
 
 export default {
-  title: 'default/forms/formLayouts/586b4ad0-9949-4000-b6bf-202db8fea36f',
+  title: 'business/components/a286d73b-0d83-4f41-ac01-701ad0522dd1',
   component: Element,
 };
 

lib/business/components/a286d73b-0d83-4f41-ac01-701ad0522dd1/index.js

@@ -0,0 +1,3 @@
+export default function () {
+  return <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Button</button>;
+}

lib/default/forms/92daef9d-18d8-4716-9146-8b840cbe7cd1/element.stories.js → lib/default/forms/bb64273b-786f-4d82-b6ae-a63d95f1e85f/element.stories.js

@@ -1,7 +1,8 @@
+import '../../../../src/styles/globals.css';
 import Element from './';
 
 export default {
-  title: 'default/forms/92daef9d-18d8-4716-9146-8b840cbe7cd1',
+  title: 'default/forms/bb64273b-786f-4d82-b6ae-a63d95f1e85f',
   component: Element,
 };
 

lib/default/forms/bb64273b-786f-4d82-b6ae-a63d95f1e85f/index.js

@@ -0,0 +1,3 @@
+export default function () {
+  return <button className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4">Danger</button>;
+}

lib/default/lists/4494f6cd-d586-4685-8647-1e7d5c713669/index.js

@@ -1,3 +1,3 @@
 export default function () {
-  return <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Button</button>;
+  return <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Button</button>;
 }

package.json

@@ -15,10 +15,12 @@
   "dependencies": {
     "@headlessui/react": "^1.4.2",
     "@heroicons/react": "^1.0.5",
-    "clsx": "^1.1.1",
-    "fuse.js": "^6.4.6",
     "axios": "^0.24.0",
+    "clsx": "^1.1.1",
+    "copy-to-clipboard": "^3.3.1",
+    "@supabase/supabase-js": "^1.28.5",
     "date-fns": "^2.27.0",
+    "fuse.js": "^6.4.6",
     "next": "12.0.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -43,9 +45,9 @@
     "lodash": "^4.17.21",
     "postcss": "^8.4.4",
     "ramda": "^0.27.1",
+    "react-query": "^3.34.0",
     "tailwindcss": "^2.2.19",
     "uuid": "^8.3.2",
-    "yaml": "^1.10.2",
-    "react-query": "^3.34.0"
+    "yaml": "^1.10.2"
   }
 }

src/components/element/elementBox/elementBox.component.js

@@ -1,57 +1,108 @@
-import { useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
+
 import clsx from 'clsx';
+import copy from 'copy-to-clipboard';
+import { Tab } from '@headlessui/react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+const TABS = ['Preview', 'Source'];
 
 import { ELEMENT_BOX_MODE } from './elementBox.const';
+import { supabase } from '../../../utils/supabaseClient';
+import { useElement } from '../../../modules/element/element.hook';
+import { useElementDetails } from '../../../hooks/useElementDetails';
+import { isEmpty } from 'ramda';
+
+const HEIGHT = 60;
 
-export function ElementBoxComponent({ author, description, Component, source }) {
+export function ElementBoxComponent({ author, description, Component, source, id }) {
   const [mode, setMode] = useState(ELEMENT_BOX_MODE.PREVIEW);
-  const handlePreview = () => setMode(ELEMENT_BOX_MODE.PREVIEW);
-  const handleSource = () => setMode(ELEMENT_BOX_MODE.SOURCE);
+  const [copied, setCopied] = useState(false);
+  const { likes, isFetching, insertLikesById, updateLikesById } = useElementDetails(id);
+
+  const handleCopySuccess = () => {
+    setCopied(true);
+  };
+  useEffect(() => {
+    if (copied) {
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    }
+  }, [copied]);
+  const handleCopy = () => copy(source, { onCopy: handleCopySuccess });
+
+  const handleLike = async () => {
+    console.log('likes', likes);
+    if (likes) {
+      console.log('INSIDE');
+      updateLikesById.mutate({ id, likes });
+    } else {
+      insertLikesById.mutate({ id, likes });
+    }
+  };
   return (
-    <div className="bg-blue-100 p-4 rounded">
-      <div className="flex justify-between">
+    <div>
+      <div className="mb-2">
         <p>{description}</p>
-        <p>by {author}</p>
       </div>
-      <div className="flex justify-center">
+      <Tab.Group
+        as="div"
+        className={`w-full relative rounded-lg h-${HEIGHT} bg-gradient-to-tr from-blue-100 to-blue-500`}
+      >
+        <Tab.List as="div" className="absolute right-2 top-2">
+          {TABS.map((tab) => (
+            <Tab key={tab} as={Fragment}>
+              {({ selected }) => (
+                <button
+                  className={clsx(
+                    {
+                      'bg-black bg-opacity-50 text-white': selected,
+                      'bg-transparent text-white': !selected,
+                    },
+                    'text-white, px-2 py-1 rounded text-xs'
+                  )}
+                >
+                  {tab}
+                </button>
+              )}
+            </Tab>
+          ))}
+          <button onClick={handleCopy} className="bg-transparent text-white text-white, px-2 py-1 rounded text-xs">
+            {copied && 'Copied!'}
+            {!copied && 'Copy'}
+          </button>
+        </Tab.List>
+        <Tab.Panels as="div" className="h-full">
+          <Tab.Panel as="div" className="h-full flex justify-center items-center">
+            {Component.default()}
+          </Tab.Panel>
+          <Tab.Panel as="div" className="h-full">
+            <SyntaxHighlighter
+              showLineNumbers
+              className={`max-h-${HEIGHT} h-full`}
+              language="javascript"
+              style={dracula}
+            >
+              {source}
+            </SyntaxHighlighter>
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+      <div className="mt-2 flex justify-between items-end">
         <button
-          onClick={handlePreview}
-          className={clsx(
-            {
-              'border-blue-500 text-gray-900': mode === ELEMENT_BOX_MODE.PREVIEW,
-              'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700':
-                mode !== ELEMENT_BOX_MODE.PREVIEW,
-            },
-            'inline-flex items-center px-1 pt-1 border-b-2 text-m font-medium'
-          )}
+          onClick={handleLike}
+          disabled={isFetching}
+          className="rounded p-2 flex items-end font-bold hover:bg-gray-100"
         >
-          Preview
+          🔥 <span className="ml-2">{likes}</span>
         </button>
-        <button
-          onClick={handleSource}
-          className={clsx(
-            {
-              'border-blue-500 text-gray-900': mode === ELEMENT_BOX_MODE.SOURCE,
-              'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700':
-                mode !== ELEMENT_BOX_MODE.SOURCE,
-            },
-            'inline-flex items-center px-1 pt-1 border-b-2 text-m font-medium'
-          )}
-        >
-          Source
-        </button>
-      </div>
-      <div className="bg-white">
-        {mode === ELEMENT_BOX_MODE.PREVIEW && (
-          <div className="h-32 flex justify-center items-center">{Component.default()}</div>
-        )}
-        {mode === ELEMENT_BOX_MODE.SOURCE && (
-          <SyntaxHighlighter showLineNumbers language="javascript" style={dracula}>
-            {source}
-          </SyntaxHighlighter>
-        )}
+        <p>
+          Author:{' '}
+          <a className="text-blue-500" target="_blank" rel="noopener noreferrer" href={`https://github.com/${author}`}>
+            {author}
+          </a>
+        </p>
       </div>
     </div>
   );

src/components/element/elementList/elementList.component.js

@@ -5,7 +5,7 @@ export function ElementListComponent() {
   const { elements } = useElement();
 
   return (
-    <div className="mt-10 max-w-7xl mx-auto">
+    <div className="mt-10 max-w-7xl mx-auto min-h-full">
       {elements.map((data) => (
         <ElementBox key={data.id} {...data} />
       ))}

src/components/footer/footer.component.js

@@ -1,6 +1,6 @@
 export function FooterComponent() {
   return (
-    <footer className="w-full h-16 flex justify-center items-center bg-blue-500 mt-8">
+    <footer className="w-full h-16 flex justify-center items-center bg-blue-500">
       <p className="text-white">Made with ❤️ by Apptension</p>
     </footer>
   );

src/components/home/homeAll/homeAll.component.js

@@ -1,6 +1,6 @@
 export function HomeAllComponent({ children }) {
   return (
-    <div className="mt-10 max-w-7xl mx-auto">
+    <div className="mt-10 max-w-7xl mx-auto pb-8">
       <h2 className="text-3xl">All components</h2>
       {children}
     </div>

src/components/kanban/kanban.component.js

@@ -8,12 +8,15 @@ export const KanbanComponent = () => {
   const [backlogIssues, inProgressIssues, reviewIssues, doneIssues] = useIssueType(issues);
 
   return (
-    <div className="flex flex-col w-screen h-screen overflow-auto text-gray-700 mt-16">
-      <div className="px-10 mt-6">
+    <div
+      style={{ maxHeight: 'calc(100vh - 128px)' }}
+      className="flex flex-col max-w-7xl mx-auto flex-1 overflow-auto text-gray-700 pb-8"
+    >
+      <div className=" mt-6">
         <h1 className="text-2xl font-bold">Components Board</h1>
       </div>
       {!isLoading ? (
-        <div className="flex flex-grow px-10 mt-4 space-x-6 overflow-auto">
+        <div className="flex flex-grow  mt-4 space-x-6 overflow-auto">
           <KanbanColumn title={'Backlog'} count={backlogIssues ? backlogIssues.length : 0}>
             {backlogIssues && backlogIssues.map((item) => <KanbanItem item={item} key={item.key} />)}
           </KanbanColumn>

src/components/kanban/kanban.hook.js

@@ -4,12 +4,15 @@ export const useIssueType = (issues) => {
   const backlogIssues = issues?.filter((item) =>
     both(includes('todo'), includes('element'))(item.labels.map((e) => e.name))
   );
+
+  backlogIssues?.sort((a, b) => b.reactions.total_count - a.reactions.total_count);
   const inProgressIssues = issues?.filter((item) =>
     both(includes('in progress'), includes('element'))(item.labels.map((e) => e.name))
   );
   const reviewIssues = issues?.filter((item) =>
     both(includes('review'), includes('element'))(item.labels.map((e) => e.name))
   );
+
   const doneIssues = issues?.filter((item) =>
     both(includes('done'), includes('element'))(item.labels.map((e) => e.name))
   );

src/components/kanban/kanbanColumn/kanbanColumn.component.js

@@ -1,6 +1,6 @@
 export const KanbanColumnComponent = ({ title, count, children }) => {
   return (
-    <div className="flex flex-col flex-shrink-0 w-72">
+    <div className="flex flex-col flex-shrink-0 w-72 overflow-y-scroll">
       <div className="flex items-center flex-shrink-0 h-10">
         <span className="block text-sm font-semibold">{title}</span>
         <span className="flex items-center justify-center w-5 h-5 ml-2 text-sm font-semibold text-indigo-500 bg-white rounded bg-opacity-30">

src/components/kanban/kanbanItem/kanbanItem.component.js

@@ -2,10 +2,11 @@ import { format } from 'date-fns';
 import Image from 'next/image';
 import { Label } from './label';
 import { isEmpty } from 'ramda';
+import { ThumbUpIcon, ChatAltIcon, CalendarIcon } from '@heroicons/react/solid';
 
 export const KanbanItemComponent = ({ item }) => {
   return (
-    <a href={item.url}>
+    <a href={item.html_url} target="_blank" rel="noreferrer">
       <div className="relative flex flex-col items-start p-4 mt-3 bg-white rounded-lg cursor-pointer bg-opacity-90 group hover:bg-opacity-100 border-2">
         <div className="flex">
           {item.labels.map((label) => (
@@ -14,51 +15,35 @@ export const KanbanItemComponent = ({ item }) => {
         </div>
         <h4 className="mt-3 text-sm font-bold">{item.title}</h4>
         <div className="flex items-center w-full mt-3 text-xs font-medium text-gray-400">
-          <div className="flex items-center">
-            <svg
-              className="w-4 h-4 text-gray-300 fill-current"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fillRule="evenodd"
-                d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-                clipRule="evenodd"
-              />
-            </svg>
+          <div className="relative flex items-end">
+            <CalendarIcon className="h-4 w-4 text-gray-300" aria-hidden="true" />
             <span className="ml-1 leading-none">{format(new Date(item.created_at), 'dd.MM.yy')}</span>
           </div>
-          <div className="relative flex items-center ml-4">
-            <svg
-              className="relative w-4 h-4 text-gray-300 fill-current"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fillRule="evenodd"
-                d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
-                clipRule="evenodd"
-              />
-            </svg>
+          <div className="relative flex items-end ml-4">
+            <ChatAltIcon className="h-4 w-4 text-gray-300" aria-hidden="true" />
             <span className="ml-1 leading-none">{item.comments}</span>
           </div>
-          {console.log(item.assignees)}
+          <div className="relative flex items-end ml-4 fill-current">
+            <ThumbUpIcon className="h-4 w-4 text-gray-300" aria-hidden="true" />
+            <span className="ml-1 leading-none">{item.reactions.total_count}</span>
+          </div>
+
           <div className="ml-auto flex">
             {isEmpty(item.assignees) ? (
-              <Image width={24} height={24} alt="User's avatar" className="rounded-full" src={item.user.avatar_url} />
+              <a href={item.user.html_url} target="_blank" rel="noreferrer">
+                <Image width={24} height={24} alt="User's avatar" className="rounded-full" src={item.user.avatar_url} />
+              </a>
             ) : (
               item.assignees.map((assignee) => (
-                <div key={assignee.id} className="ml-1">
+                <a href={assignee.html_url} target="_blank" rel="noreferrer" key={assignee.id} className="ml-1">
                   <Image
                     width={24}
                     height={24}
                     alt="User's avatar"
                     className="rounded-full"
                     src={assignee.avatar_url}
                   />
-                </div>
+                </a>
               ))
             )}
           </div>