Merge pull request #23 from lumastic/development

Release to production

.gitignore

@@ -12,6 +12,8 @@ node_modules
 /prisma/data.db-journal
 /postgres-data
 
+tailwind.css
+
 .DS_Store
 coverage
 build

app/components/Dialog/Dialog.tsx

@@ -25,17 +25,17 @@ export const Dialog: React.FC<PropsWithChildren<Props>> = ({
       data-testid="dialog"
     >
       <div className="fixed inset-0 bg-neutral-900 bg-opacity-25" />
-      <div className="fixed inset-0 overflow-y-auto min-h-screen md:min-h-min">
-        <div className="flex h-full justify-center pt-4 md:pb-4 md:px-4 text-center ">
-          <HeadlessDialog.Panel className="w-full h-full md:h-auto md:max-w-md transform overflow-hidden rounded-2xl bg-white p-8 text-left align-middle shadow-xl transition-all relative">
+      <div className="fixed inset-0 min-h-screen overflow-y-auto md:min-h-min">
+        <div className="flex h-full justify-center pt-4 text-center md:px-4 md:pb-4 ">
+          <HeadlessDialog.Panel className="relative h-full w-full transform overflow-hidden rounded-2xl bg-white p-8 text-left align-middle shadow-xl transition-all md:h-auto md:max-w-md">
             <Button
-              className="rounded-full absolute top-2 right-2 w-8 h-8 px-0 py-0"
+              className="absolute top-2 right-2 h-8 w-8 rounded-full px-0 py-0"
               variant="secondary"
               size="lg"
               aria-label="Close dialog"
               onClick={onClose}
             >
-              <div className="relative w-8 h-8">
+              <div className="relative h-8 w-8">
                 <span className="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"

app/components/Input/Input.tsx

@@ -8,7 +8,7 @@ export const Input: React.FC<InputHTMLAttributes<HTMLInputElement>> =
         data-testid="input"
         className={[
           !props.hidden && "block",
-          "w-full bg-inherit focus:outline-none placeholder-neutral-400",
+          "w-full bg-inherit placeholder-neutral-400 focus:outline-none",
           className,
         ].join(" ")}
         {...props}

app/components/MarkingInput/MarkingInput.tsx

@@ -43,7 +43,7 @@ export const MarkingInput: React.FC<Props> = ({ marking, deleteMark }) => {
 
   return (
     <div
-      className="absolute z-10 group/marking font-mono"
+      className="group/marking absolute z-10 font-mono"
       style={{
         left: `${indent}ch`,
       }}
@@ -67,7 +67,7 @@ export const MarkingInput: React.FC<Props> = ({ marking, deleteMark }) => {
           style={{
             width: `${mark.length || 1}ch`,
           }}
-          className="font-mono rounded-sm !bg-neutral-200 w-auto"
+          className="w-auto rounded-sm !bg-neutral-200 font-mono"
         />
         <Button
           variant="text"

app/components/NavBar/NavBar.tsx

@@ -7,14 +7,14 @@ type Props = {};
 export const NavBar: React.FC<Props> = () => {
   return (
     <nav className="bg-neutral-200 py-4 px-2" data-testid="navbar">
-      <div className="flex container max-w-xl mx-auto bg-neutral-50 px-4 py-3 rounded-2xl items-center shadow-md">
+      <div className="container mx-auto flex max-w-xl items-center rounded-2xl bg-neutral-50 px-4 py-3 shadow-md">
         <div className="flex-1">
           <div className="flex items-center">
             <div>
               <img
                 src="/tune_binder_logo.svg"
                 alt="TuneBunder Logo"
-                className="object-contain w-7"
+                className="w-7 object-contain"
               />
             </div>
             {/* <div className="flex-1">TuneBinder</div> */}
@@ -26,9 +26,9 @@ export const NavBar: React.FC<Props> = () => {
             className={({ isActive }) =>
               `${
                 isActive
-                  ? "text-primary-600 border-primary-500 font-medium"
-                  : "text-neutral-500 hover:opacity-80 hover:text-primary-600"
-              } uppercase text-sm transition-all border-b-2 border-transparent`
+                  ? " border-primary-500 font-medium text-primary-600"
+                  : "border-transparent text-neutral-500 hover:text-primary-600 hover:opacity-80"
+              } border-b-2  text-sm uppercase transition-all`
             }
           >
             Songs
@@ -38,15 +38,15 @@ export const NavBar: React.FC<Props> = () => {
             className={({ isActive }) =>
               `${
                 isActive
-                  ? "text-primary-600 border-primary-500 font-medium"
-                  : "text-neutral-500 hover:opacity-80 hover:text-primary-600"
-              } uppercase text-sm transition-all border-b-2 border-transparent`
+                  ? " border-primary-500 font-medium text-primary-600"
+                  : "border-transparent text-neutral-500 hover:text-primary-600 hover:opacity-80"
+              } border-b-2 text-sm uppercase transition-all`
             }
           >
             Setlists
           </NavLink>
         </div>
-        <div className="flex-1 flex justify-end">
+        <div className="flex flex-1 justify-end">
           <LogoutButton />
         </div>
       </div>

app/components/Search/Search.tsx

@@ -8,17 +8,17 @@ interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
 export const Search: React.FC<Props> = ({ onSearch, ...props }) => {
   return (
     <div
-      className="border-neutral-400 border rounded-md px-3 py-2 flex items-center focus-within:border-neutral-800 flex-row-reverse transition-colors"
+      className="flex flex-row-reverse items-center rounded-md border border-neutral-400 px-3 py-2 transition-colors focus-within:border-neutral-800"
       data-testid="search"
     >
       <input
         type={"search"}
-        className="peer bg-inherit placeholder-neutral-500 w-full outline-none"
+        className="peer w-full bg-inherit placeholder-neutral-500 outline-none"
         placeholder="Search"
         onChange={onSearch}
         {...props}
       />
-      <div className="pr-3 text-neutral-500 peer-focus:text-neutral-700 transition-colors">
+      <div className="pr-3 text-neutral-500 transition-colors peer-focus:text-neutral-700">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"

app/components/Select/Select.tsx

@@ -75,7 +75,7 @@ export function Select({
               </>
             )}
           </Listbox.Button>
-          <Listbox.Options className="absolute z-30 bg-inherit mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-full">
+          <Listbox.Options className="absolute z-30 mt-1 max-h-60 w-full overflow-auto rounded-md bg-inherit bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
             {options.map((option) => (
               <Listbox.Option
                 key={option.value}
@@ -96,7 +96,7 @@ export function Select({
                       {option.name}
                     </span>
                     {selected ? (
-                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-600 text-sm">
+                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-sm text-neutral-600">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           fill="none"

app/components/Stanza/Stanza.tsx

@@ -8,19 +8,19 @@ type Props = {
 export const Stanza: React.FC<Props> = ({ stanza }) => {
   return (
     <div className="space-y-1" data-testid="stanza">
-      <p className="font-bold uppercase w-auto text-sm">{stanza.type}</p>
+      <p className="w-auto text-sm font-bold uppercase">{stanza.type}</p>
       <div className="space-y-3">
         {stanza.lines.map((line) => {
           return (
             <div key={line.id}>
-              <div className="font-mono relative">
-                <div className="opacity-0 cursor-default" aria-hidden>
+              <div className="relative font-mono">
+                <div className="cursor-default opacity-0" aria-hidden>
                   Hidden Spacer
                 </div>
                 {line.markings?.map((mark) => (
                   <div
                     key={mark.id}
-                    className="inline-block text-center bg-neutral-200 text-neutral-800 font-mono outline-none rounded-sm absolute top-0"
+                    className="absolute top-0 inline-block rounded-sm bg-neutral-200 text-center font-mono text-neutral-800 outline-none"
                     style={{ left: `${mark.indent}ch` }}
                   >
                     {mark.mark}

app/components/Textarea/Textarea.tsx

@@ -30,7 +30,7 @@ export const Textarea: React.FC<InputHTMLAttributes<HTMLTextAreaElement>> =
         wrap={"soft"}
         className={[
           !props.hidden && "block",
-          "w-full bg-inherit focus:outline-none resize-none overflow-hidden placeholder-neutral-400",
+          "w-full resize-none overflow-hidden bg-inherit placeholder-neutral-400 focus:outline-none",
           className,
         ].join(" ")}
       />

app/components/dialogs/AddSongs/AddSongs.tsx

@@ -46,7 +46,7 @@ export function AddSongs() {
           <div key={song.id} className="flex items-center">
             <div className="flex-1">
               <h3 className="text-xl">{song.title}</h3>
-              <p className="text-neutral-500 text-xs uppercase font-bold">
+              <p className="text-xs font-bold uppercase text-neutral-500">
                 {song.attribution}
               </p>
             </div>

app/components/forms/logout/index.tsx

@@ -4,7 +4,7 @@ import { Button } from "~/components/Button";
 export const LogoutButton = () => {
   return (
     <Form action="/logout" method="post">
-      <Button variant="text" size="sm" className="opacity-50 uppercase text-xs">
+      <Button variant="text" size="sm" className="text-xs uppercase opacity-50">
         Logout
       </Button>
     </Form>

app/components/forms/setlist/SetlistForm.tsx

@@ -19,30 +19,30 @@ const SetlistForm = forwardRef<
       className="space-y-3"
     >
       <div className="space-y-1">
-        <label className="uppercase text-xs font-medium text-neutral-400">
+        <label className="text-xs font-medium uppercase text-neutral-400">
           Name
         </label>
         <Input
           name="name"
           defaultValue={setlist?.name}
           placeholder="Rapunzels 10/9/23"
           autoFocus
-          className="border border-neutral-200 px-4 py-3 rounded-md focus:border-neutral-400"
+          className="rounded-md border border-neutral-200 px-4 py-3 focus:border-neutral-400"
         />
       </div>
       <div className="space-y-1">
-        <label className="uppercase text-xs font-medium text-neutral-400">
+        <label className="text-xs font-medium uppercase text-neutral-400">
           Description <span className="font-normal">(optional)</span>
         </label>
         <Textarea
           name="description"
           defaultValue={setlist?.description}
           placeholder="An all sea shanty show in honor of Lief Erickson Day."
-          className="border border-neutral-200 px-4 py-3 rounded-md focus:border-neutral-400"
+          className="rounded-md border border-neutral-200 px-4 py-3 focus:border-neutral-400"
         />
       </div>
       <div>
-        <div className="flex items-center mt-6">
+        <div className="mt-6 flex items-center">
           <div className="flex-1">
             <Button onClick={close} size="lg" variant="text">
               Cancel

app/components/forms/song/LineFields/LineFields.tsx

@@ -1,6 +1,6 @@
 import type { ILine, IMarking } from "@/types/song";
 import { Menu } from "@headlessui/react";
-import type { KeyboardEvent } from "react";
+import type { ClipboardEvent, KeyboardEvent } from "react";
 import { useState } from "react";
 import { usePopper } from "react-popper";
 import { Input } from "~/components/Input";
@@ -9,17 +9,20 @@ import { Fieldset, useNamespace } from "~/lib/fieldset";
 import { useArray } from "~/lib/useArray";
 import { useFocus } from "~/lib/useFocus";
 import uniqid from "uniqid";
+import { convertPlainTextToLines } from "~/helpers/convertPlainTextToLines";
 
 type Props = {
   line: ILine;
-  insertLine?: () => void;
+  insertLine?: (lyric?: string) => void;
+  updateLine?: (lyric: string) => void;
   deleteLine?: () => void;
 };
 
 export const LineFields: React.FC<Props> = ({
   line,
   insertLine,
   deleteLine,
+  updateLine,
 }) => {
   const {
     items: markingsFieldArray,
@@ -44,50 +47,77 @@ export const LineFields: React.FC<Props> = ({
     placement: "left",
   });
 
-  const insertMark = (index: number) => {
+  function insertMark(index: number) {
     return () => {
       const length = markingsFieldArray.length;
       push({ indent: index, id: uniqid(), mark: "" } as IMarking);
       focus(`input[name="${namespace}markings[${length}].mark"]`);
     };
-  };
+  }
 
-  const removeMark = (index: number) => {
+  function removeMark(index: number) {
     return () => {
       remove(index);
     };
-  };
+  }
 
-  const newLineOnEnterKey = (e: KeyboardEvent<HTMLInputElement>) => {
+  function newLineOnEnterKey(e: KeyboardEvent<HTMLInputElement>) {
     if (e.key === "Enter") {
       e.preventDefault();
-      if (insertLine) insertLine();
+      const target = e.target as HTMLInputElement;
+      // Get text after the current cursor position
+      const afterCursorText = target.value.slice(
+        target.selectionStart ?? undefined
+      );
+      // Remove the text after the cursor from current lyrics input
+      target.value = target.value.slice(0, target.selectionStart ?? undefined);
+      // Insert line with text after the cursor
+      if (insertLine) insertLine(afterCursorText);
     }
-  };
+  }
 
-  const confirmAndDelete = () => {
+  async function onPasteLyrics(e: ClipboardEvent<HTMLInputElement>) {
+    const pastedText = e.clipboardData.getData("text/plain");
+    const target = e.target as HTMLInputElement;
+    // If input is blank and pasted text includes an end return
+    if (!target.value && pastedText.includes("\n")) {
+      // Prevent default paste
+      e.preventDefault();
+      const linesToAdd = convertPlainTextToLines(pastedText);
+      // Reverse the array for adding it to the lyrics linearly
+      linesToAdd.reverse();
+      if (updateLine) updateLine(linesToAdd.pop()?.lyrics || "");
+      // Insert the new lyrics in reverse order
+      linesToAdd.forEach((line) => {
+        if (insertLine) insertLine(line.lyrics);
+      });
+    }
+
+    // Trigger handlePaste from StanzaContext
+  }
+
+  function confirmAndDelete() {
     if (
       confirm(
         "Are you sure you want to delete this line?\nYou can't undo this action."
       )
     ) {
       if (deleteLine) deleteLine();
     }
-  };
+  }
 
   return (
     <div className="w-full whitespace-nowrap" data-testid="line-fields">
       <Input name="id" hidden readOnly defaultValue={line.id} />
-
       <div className="group relative" ref={setReferenceElement}>
         <Menu>
           <div
-            className="opacity-0 h-full transition-opacity group-hover:opacity-100 z-20 flex items-center pr-5"
+            className="z-20 flex h-full items-center pr-5 opacity-0 transition-opacity group-hover:opacity-100"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <Menu.Button className="bg-neutral-200 h-full rounded-sm text-neutral-600 text-sm px-0.5">
+            <Menu.Button className="h-full rounded-sm bg-neutral-200 px-0.5 text-sm text-neutral-600">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -105,7 +135,7 @@ export const LineFields: React.FC<Props> = ({
               </svg>
             </Menu.Button>
           </div>
-          <Menu.Items className="absolute -translate-x-9 w-28 origin-top-left divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10 sm:text-sm">
+          <Menu.Items className="absolute z-20 w-28 origin-top-left -translate-x-9 divide-y divide-neutral-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
             <Menu.Item>
               {({ active }) => (
                 <button
@@ -153,7 +183,7 @@ export const LineFields: React.FC<Props> = ({
               <button
                 key={index}
                 onClick={insertMark(index)}
-                className="bg-neutral-200 text-neutral-500 opacity-0 transition-opacity active:opacity-60 hover:opacity-100 focus:opacity-100 font-mono rounded-sm"
+                className="rounded-sm bg-neutral-200 font-mono text-neutral-500 opacity-0 transition-opacity hover:opacity-100 focus:opacity-100 active:opacity-60"
               >
                 +
               </button>
@@ -166,11 +196,12 @@ export const LineFields: React.FC<Props> = ({
           className="font-mono"
           defaultValue={line.lyrics}
           onKeyDown={newLineOnEnterKey}
+          onPaste={onPasteLyrics}
         />
         <Input
           name="notes"
           placeholder="Stylistic notes"
-          className="opacity-75 text-sm"
+          className="text-sm opacity-75"
           hidden={!showNotes}
           defaultValue={line.notes}
           onKeyDown={newLineOnEnterKey}