Improve repository with various enhancements

CONTRIBUTING.md

@@ -0,0 +1,69 @@
+# Contributing to jqplay
+
+Thank you for considering contributing to jqplay! We welcome contributions from everyone. By participating in this project, you agree to abide by our code of conduct.
+
+## How to Contribute
+
+### Reporting Bugs
+
+If you find a bug, please report it by opening an issue on our [GitHub repository](https://github.com/owenthereal/jqplay/issues). Include as much detail as possible to help us understand and reproduce the issue.
+
+### Suggesting Features
+
+We welcome feature suggestions! If you have an idea for a new feature, please open an issue on our [GitHub repository](https://github.com/owenthereal/jqplay/issues) and describe your idea in detail.
+
+### Submitting Pull Requests
+
+1. **Fork the repository**: Click the "Fork" button at the top right corner of the repository page to create a copy of the repository in your GitHub account.
+
+2. **Clone your fork**: Clone your forked repository to your local machine using the following command:
+    ```sh
+    git clone https://github.com/<your-username>/jqplay.git
+    cd jqplay
+    ```
+
+3. **Create a new branch**: Create a new branch for your changes using the following command:
+    ```sh
+    git checkout -b my-feature-branch
+    ```
+
+4. **Make your changes**: Make your changes to the codebase. Ensure that your code follows the project's coding style and conventions.
+
+5. **Test your changes**: Run the tests to ensure that your changes do not break any existing functionality. You can run the tests using the following command:
+    ```sh
+    npm test
+    ```
+
+6. **Commit your changes**: Commit your changes with a descriptive commit message using the following command:
+    ```sh
+    git commit -m "Add feature XYZ"
+    ```
+
+7. **Push your changes**: Push your changes to your forked repository using the following command:
+    ```sh
+    git push origin my-feature-branch
+    ```
+
+8. **Create a pull request**: Go to the original repository on GitHub and click the "New pull request" button. Select your branch from the "compare" dropdown and click "Create pull request". Provide a detailed description of your changes in the pull request.
+
+## Code Style
+
+Please ensure that your code follows the project's coding style and conventions. We use [ESLint](https://eslint.org/) to enforce code quality and consistency. You can run the linter using the following command:
+```sh
+npm run lint
+```
+
+## Testing
+
+We use [Jest](https://jestjs.io/) for testing. Please ensure that your changes are covered by tests. You can run the tests using the following command:
+```sh
+npm test
+```
+
+## Code of Conduct
+
+By participating in this project, you agree to abide by our [code of conduct](CODE_OF_CONDUCT.md). Please read it to understand the expectations for behavior when interacting with the community.
+
+## Thank You!
+
+Thank you for your contributions! Your support and involvement help make jqplay better for everyone.

package.json

@@ -24,25 +24,25 @@
     "next": "15.1.3",
     "pg": "^8.13.0",
     "prisma": "^6.1.0",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "uuid": "^11.0.5",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@flydotio/dockerfile": "^0.5.7",
-    "@types/node": "^22",
+    "@types/node": "^22.0.0",
     "@types/pg": "^8.11.6",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/uuid": "^9.0.8",
     "comlink": "^4.4.1",
-    "eslint": "^9",
+    "eslint": "^9.0.0",
     "eslint-config-next": "15.1.3",
     "monaco-editor": "^0.50.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
-    "postcss": "^8",
+    "postcss": "^8.4.21",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5"
+    "typescript": "^5.1.6"
   }
 }

src/app/api/jq/route.ts

@@ -6,6 +6,6 @@ export async function GET(req: Request) {
         return new Response(result, { status: 200 });
     } catch (e: any) {
         const errorMessage = e?.message || 'An unknown error occurred';
-        return new Response(errorMessage, { status: 200 });
+        return new Response(JSON.stringify({ error: errorMessage }), { status: 500 });
     }
 }

src/app/api/snippets/route.ts

@@ -16,8 +16,11 @@ export async function POST(req: Request) {
         Sentry.captureException(error, { extra: { body: req.body } });
 
         if (error instanceof ZodError) {
-            return NextResponse.json({ errors: error.errors }, { status: 422 });
+            const errorMessages = error.errors.map(e => `${e.path.join(', ')} ${e.message}`.toLowerCase());
+            return NextResponse.json({ errors: errorMessages }, { status: 422 });
         }
-        return NextResponse.json({ error: 'Failed to save snippet' }, { status: 500 });
+
+        const errorMessage = error?.message || 'An unknown error occurred';
+        return NextResponse.json({ error: errorMessage }, { status: 500 });
     }
 }

src/components/Editor.tsx

@@ -19,7 +19,7 @@ interface EditorProps {
 const Editor: React.FC<EditorProps> = ({ handleChange, value, language, readOnly }) => {
     const { darkMode } = useDarkMode();
     const theme = useTheme();
-    const [monacoConfigured, setMonacoConfigured] = useState(false);
+    const [monacoConfigured, setMonacoConfigured] = useState<boolean>(false);
 
     useEffect(() => {
         const configureMonaco = async () => {

src/components/Header.tsx

@@ -15,17 +15,17 @@ interface HeaderProps {
 
 const Header: React.FC<HeaderProps> = ({ onShare, onExampleClick, onCopyClick, enableCopyButton }) => {
     const { darkMode, toggleDarkMode } = useDarkMode();
-    const [cheatsheetOpen, setCheatSheetOpen] = useState(false);
+    const [cheatsheetOpen, setCheatSheetOpen] = useState<boolean>(false);
 
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
-    const toolbarStyle = {
+    const toolbarStyle: React.CSSProperties = {
         backgroundColor: darkMode ? '#333333' : '#f5f5f5',
         color: darkMode ? '#ffffff' : '#333333',
     };
 
-    const subtitleStyle = {
+    const subtitleStyle: React.CSSProperties = {
         color: darkMode ? '#cccccc' : '#666666',
     };
 

src/lib/prisma.ts

@@ -8,7 +8,7 @@ declare global {
 }
 
 // Use a single PrismaClient instance in development and production environments.
-const prisma = global.prisma || new PrismaClient({
+const prisma: PrismaClient = global.prisma || new PrismaClient({
     log: process.env.NODE_ENV === 'development' ? ['query', 'info', 'warn', 'error'] : ['warn', 'error'],
 });
 
@@ -18,7 +18,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 export default prisma;
 
-export async function GetSnippet(slug: string) {
+export async function GetSnippet(slug: string): Promise<SnippetType | null> {
     const whereClause = uuidValidateV4(slug)
         ? { id: slug } // If valid UUID v4, search by ID
         : { slug: slug }; // Otherwise, search by slug
@@ -28,7 +28,7 @@ export async function GetSnippet(slug: string) {
     });
 }
 
-export async function UpsertSnippet(snippet: SnippetType) {
+export async function UpsertSnippet(snippet: SnippetType): Promise<SnippetType> {
     const slug = generateSlug(snippet);
     return prisma.snippets.upsert({
         where: { slug },
@@ -75,6 +75,6 @@ function generateSlug(snippet: SnippetType, hashLen: number = 15): string {
     return base64Encoded.substring(0, hashLen);
 }
 
-function uuidValidateV4(uuid: string) {
+function uuidValidateV4(uuid: string): boolean {
     return uuidValidate(uuid) && uuidVersion(uuid) === 4;
 }

src/lib/utils.ts

@@ -1,17 +1,17 @@
 import { ZodError } from "zod";
 
-export const currentUnixTimestamp = () => Math.floor(new Date().getTime() / 1000);
+export const currentUnixTimestamp = (): number => Math.floor(new Date().getTime() / 1000);
 
-export const generateMessageId = () => Math.random().toString(36).substring(2, 9);
+export const generateMessageId = (): string => Math.random().toString(36).substring(2, 9);
 
-export function normalizeLineBreaks(text: string | undefined | null) {
+export function normalizeLineBreaks(text: string | undefined | null): string {
     if (!text) {
         return '';
     }
 
     return text.replace(/\r\n|\r/g, '\n');
 }
 
-export function prettifyZodError(error: ZodError) {
+export function prettifyZodError(error: ZodError): string {
     return error.errors.map(e => `${e.path.join(', ')} ${e.message}`.toLowerCase()).join(', ');
 }