Make the project open-source and public

.dockerignore

@@ -0,0 +1,20 @@
+# Ignore node_modules (local dependencies)
+node_modules
+
+# Ignore build artifacts
+dist
+
+# Ignore configuration files that shouldn't be shared
+.env
+.vscode
+.idea
+
+# Ignore miscellaneous system files and logs
+.DS_Store
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# Ignore Git-specific files
+.git
+.gitignore

.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,45 @@
+name: 🐞 Bug Report
+description: Found something that doesn't work as expected?
+body:
+  - type: dropdown
+    id: Environment
+    attributes:
+      label: Environment
+      description: How are you using Ch-UI?
+      options:
+        - NPM build
+        - Docker
+    validations:
+      required: true
+  - type: textarea
+    id: repro
+    attributes:
+      label: How did you encounter the bug?
+      description: How can this bug be reproduced? Please provide steps to reproduce.
+      placeholder: |-
+        1. Run Docker container... 
+        2. npm run build...
+        3. Go to...
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: What did you expect?
+      description: What it supposed to happen? What did you expect to see?
+    validations:
+      required: true
+  - type: textarea
+    id: actual
+    attributes:
+      label: Actual Result
+      description: What was the accual result?
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: |-
+        ### Great, just submit the issue and I will do my best to take care of it!  🙏
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,27 @@
+name: 💡 Feature Request
+description: Tell us about something ch-UI doesn't do yet, but should!
+body:
+  - type: textarea
+    id: idea
+    attributes:
+      label: Idea Statement
+      description: Which is the feature you would like to see implemented?
+      placeholder: |-
+        I want to be able to do anything I want, whenever I want. Because my ideas are the best.
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Feature implementation brainstorm
+      description: All your ideas are welcome, let's brainstorm together.
+      placeholder: |-
+        Create the next big feature that will all our problems.
+    validations:
+      required: false
+  - type: markdown
+    attributes:
+      value: |-
+        ## Thanks 🙏
+    validations:
+      required: false

.github/workflows/docker-build.yml

@@ -0,0 +1,47 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GHCR_PAT }}
+
+      - name: Extract metadata (tags, labels)
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: ghcr.io/${{ github.repository }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: true
+          tags: ghcr.io/${{ github.repository }}:latest
+          labels: |
+            org.opencontainers.image.source=https://github.com/${{ github.repository }}
+            org.opencontainers.image.description=A simple UI for using ClickHouse self-hosted
+            org.opencontainers.image.licenses=MIT
+
+      - name: Log out from GitHub Container Registry
+        run: docker logout ghcr.io

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
+!.env.example

Dockerfile

@@ -0,0 +1,35 @@
+# Use an official Node runtime as a parent image
+FROM node:20-alpine as build
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json (or yarn.lock)
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Bundle app source inside Docker image
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Use a second stage to reduce image size
+FROM node:20-alpine
+
+# Set the working directory for the second stage
+WORKDIR /app
+
+# Install 'serve' to serve the app on port 5521
+RUN npm install -g serve
+
+# Copy the build directory from the first stage to the second stage
+COPY --from=build /app/dist /app
+
+# Expose port 5521 to have it mapped by the Docker daemon
+EXPOSE 5521
+
+# Define the command to run the app using a static server
+CMD ["serve", "-s", "-l", "5521"]

LICENSE.md

@@ -0,0 +1,75 @@
+MIT License
+
+Copyright (c) 2024 Caio Ricciuti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+## Acknowledgments
+
+This project makes use of several open-source packages, greatly simplifying its development. We acknowledge and are grateful to these developers for their contributions:
+
+## Core Dependencies and main tool
+
+- **Click House**: An open-source column-oriented database management system. It is capable of real-time generation of analytical data reports using SQL queries.
+  - `@clickhouse` 
+
+### UI Components & Styles
+
+- **Radix UI**: A comprehensive suite of UI primitives for building high-quality, accessible design systems and web apps.
+  - React AlertDialog, Collapsible, Context Menu, Dialog, Label, Popover, Scroll Area, Select, Separator, Slot, Tabs, Toast, Tooltip components (`@radix-ui/react-*`)
+- **ag-Grid**: Highly performant and feature-rich grid library.
+  - `ag-grid-community`, `ag-grid-react`
+- **Monaco Editor**: Browser-based code editor that powers VS Code.
+  - `monaco-editor`, `@monaco-editor/react`
+- **Echarts**: A powerful charting and visualization library.
+  - `echarts`, `echarts-for-react`
+- **Framer Motion**: A library for React to create powerful animations.
+  - `framer-motion`
+- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.
+  - `tailwindcss-animate`, `tailwind-merge`
+- **Lucide React**: Beautifully designed icon library in React.
+  - `lucide-react`
+- **CMDK**: Command menu toolkit for building command-driven interfaces.
+  - `cmdk`
+- **React Tabs**: Accessible and easy-to-use tab components for React apps.
+  - `react-tabs`
+  - **shadcn/ui**: Without a doubt, the most beautiful and accessible UI components for React.
+  - `@shadcn/ui`
+
+### Utilities
+
+- **Class Variance Authority & clsx**: Utilities for conditionally joining classNames together.
+  - `class-variance-authority`, `clsx`
+- **React Resizable Panels**: React component for resizable panel group layouts.
+  - `react-resizable-panels`
+- **SQL Formatter**: A library for pretty-printing SQL queries.
+  - `sql-formatter`
+- **Sonner**: Toast notifications library to provide feedback.
+  - `sonner`
+- **Vaul**: Lightweight library to manage local state in React.
+  - `vaul`
+
+### React Ecosystem
+
+- **React**: A JavaScript library for building user interfaces.
+  - `react`, `react-dom`
+- **React Router**: Declarative routing for React.
+  - `react-router-dom`
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details.

README.md

@@ -0,0 +1,72 @@
+# CH - UI
+
+This project aims to create a nice and updated UI for ClickHouse databases. It provides a modern interface for managing ClickHouse databases, executing queries, and visualizing data. The application is built with React and ClickHouse client for web.
+
+## Features
+
+- **ClickHouse Integration**: Interact with ClickHouse databases, manage connections, and execute queries.
+- **Dynamic UI Components**: Utilize advanced UI components for data interaction.
+- **Responsive Tab Management**: Create, manage, and dynamically interact with various tabs like query tabs and table tabs.
+- **Performance Optimizations**: Efficient state management and optimized database interactions - Uses indexedDB for caching.
+
+### Screenshots
+
+<img src="./public/screen-shots/settings.png" alt="Screenshot of the application" width="300">
+<img src="./public/screen-shots/main-page.png" alt="Screenshot of the application" width="300">
+<img src="./public/screen-shots/instance-metrics.png" alt="Screenshot of the application" width="200">
+
+## Getting Started
+
+### Using npm and building from scratch
+
+```bash
+git https://github.com/caioricciuti/ch-ui.git
+cd ch-ui
+cp .env.example .env (and fill the variables)
+npm install
+npm start
+
+** debug **
+npm run dev
+```
+
+### Using using Docker
+
+```bash
+docker run -p 5521:5521 ghcr.io/caioricciuti/ch-ui:latest
+```
+
+### Prerequisites
+
+What things you need to install the software and how to install them:
+
+```bash
+nodejs >= 20.x
+npm >= 10.x
+```
+
+## Security
+
+This project is not intended for production use and should not be exposed to the public internet. It is recommended to run this application on a local machine or a secure network. The application does not provide any authentication or authorization mechanisms and does not encrypt data in transit or at rest. It is recommended to use a VPN or secure network to access ClickHouse databases.
+
+## Limitations
+
+I don't quite know what happens if there are more than 6 tabs open, since it caches on indexedDB (browser), all the times it will be limited by the browser's capacity. Also if something happens you can go manually to the indexedDB and delete the databases.
+
+## Authors
+
+Caio Ricciuti (caioricciuti) - hoping to get some help from the community! :)
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE.md file for details
+
+## Disclaimer
+
+This project is a work in progress and is not yet ready for production use. It is intended for educational purposes and as a starting point for building a more robust application. My motivation for creating this project is to learn and experiment with ClickHouse databases and learn more about building web applications. I didn't find any modern UI for ClickHouse databases, so I decided to create one. It was made for me to use on my personal projects, so I didn't followed any design guidelines or best practices. Feel free to use it, modify it, and contribute to it. I'm open sourcing it in the hope that it will be useful to others, and I welcome any feedback or contributions. Keep in mind that this project is not affiliated with ClickHouse or Yandex or any other company, there is no official support or guarantee, and it is provided as-is (see the license for more details).
+
+### Support
+
+If you find this project useful, please consider supporting it by starring the repository, sharing it with others, or contributing to it. Your support is greatly appreciated! Also if you can and are willing to help me with the project, I would be very grateful, I develop this project in my spare time and I am not a software engineer. I'm a data engineer and I'm learning to develop web applications. I'm open to any suggestions, criticisms, and contributions. Thank you very much for your support! :D Some day hopefully I will be able to have more time to dedicate on this and other projects. Any financial support is also welcome, I have a buymeacoffee account, you can donate there, it will help me to keep this project alive. Thank you very much! :D
+
+<a href="https://www.buymeacoffee.com/caioricciuti"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee : )&emoji=&slug=caioricciuti&button_colour=FFDD00&font_colour=000000&font_family=Poppins&outline_colour=000000&coffee_colour=ffffff" /></a>

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}