Merge pull request #22 from TheOmer77/dev

Release v2.0.0 🎉

.eslintrc.json

@@ -1,27 +1,12 @@
 {
-  "env": { "browser": true, "es2021": true },
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
     "plugin:react/jsx-runtime",
-    "plugin:react-hooks/recommended",
     "plugin:import/recommended",
     "plugin:import/typescript",
     "plugin:jsx-a11y/recommended",
+    "next/core-web-vitals",
     "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": { "jsx": true },
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react", "@typescript-eslint", "prettier"],
-  "settings": {
-    "import/parsers": { "@typescript-eslint/parser": [".ts", ".tsx"] },
-    "import/resolver": { "typescript": { "alwaysTryTypes": true } },
-    "react": { "version": "detect" }
-  },
-  "rules": {}
+  ]
 }

.gitignore

@@ -1,24 +1,21 @@
 # Logs
-logs
-*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
-node_modules
-dist
-dist-ssr
-*.local
+# Dependencies
+/node_modules
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
+# Production build
+/build
+/.next/
+/out/
+
+# Typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Misc
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+*.pem
+.vercel

.npmrc

@@ -0,0 +1 @@
+@theomer77:registry=https://npm.pkg.github.com

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Omer
+
+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.

README.md

@@ -0,0 +1,53 @@
+# Palette generator thing
+
+Palette generator thing is a simple app that allows you to generate color palettes for user interfaces.
+
+Check out the app at [palette-generator-thing.vercel.app](https://palette-generator-thing.vercel.app).
+
+## Features
+
+### Palette generation
+
+Each palette includes various shades from light to dark, and is generated based on a base hex color. The app always generates the following palettes, as they're good defaults for general UI use:
+
+- **Primary:** Generated based on the primary base color, which is required. While the exact hex color provided may not appear directly in the palette, its hue and saturation are used as the foundation for all generated palettes by default.
+- **Neutral:** A muted version of the primary color, useful for backgrounds or general text. It can be changed from the default to one of several muted suggestions, or use any custom hex color.
+- **Danger:** Used to indicate errors or destructive actions. By default, it will be some shade of red unless the primary color is already a shade of red - in which case, it will be some shade of orange. Like neutral, it can be changed to one of several suggestions or a custom hex color.
+
+In addition, extra colors can be added to generate palettes from. These can be chosen from suggestions based on the primary color - like complementary, split complementary, etc, or use a custom hex color. They can also be given custom names.
+
+The values of all chosen base colors are stored as search params in the page URL. You can copy and save a palette's URL to reopen it later or share it. ([Here's an example](https://palette-generator-thing.vercel.app/?primary=1740ea&neutral=neutral30))
+
+### Code export
+
+In the code page, the generated palettes can be exported as code in several languages and color formats.
+
+Supported languages include CSS, SCSS and JSON. Many CSS color formats are available, including Hex, RGB, HSL, LAB, LCH, OKLAB, and OKLCH. \
+All color formats (except hex) also have raw variants - these are similar to the original CSS formats, but include just the number values without the CSS function wrapping them. [This can be useful with Tailwind CSS.](https://tailwindcss.com/docs/customizing-colors#using-css-variables)
+
+In addition to the palette colors, the generated code also includes some tokens - variables that reference other variables:
+
+- **Main:** The closest shade to the original base color
+- **Foreground:** A contrast color suitable for text on top of the main color.
+
+> Note that in JSON format it's not possible to have variables that reference other variables in the same object, so the values are duplicated instead.
+
+## Usage
+
+- Choose a primary hex color from the sidebar (on desktop) or drawer (on mobile); The color can also be randomized.
+- Optionally, specify neutral & danger colors.
+- Add extra colors using the "Add extra color" button in the sidebar or drawer. Click on one to name it, choose its value or remove it.
+- Click on a shade of any of the generated palettes to copy its hex value to clipboard.
+- Access the code export page from the navigation bar.
+
+## Development
+
+This app is a [Next.js](https://nextjs.org) project, and uses [PNPM](https://pnpm.io/) as the preferred package manager.
+
+To run the development server:
+
+```bash
+pnpm dev
+```
+
+The server will run at [localhost:3000](http://localhost:3000). Pages will auto-update in the browser as you edit them.

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

next.config.mjs

@@ -0,0 +1,3 @@
+const config = { reactStrictMode: true };
+
+export default config;