From 2d3ce8a49c952accb4f1ceb0e6ea608df539f179 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Tue, 28 Nov 2023 11:13:49 +0100 Subject: [PATCH] feat(frontend): Added tailwind classes auto-complete (#2712) * feat(frontend): Added tailwind classes auto-complete * feat(frontend): handle tailwindcss as a language --- frontend/filterTailwindClasses.js | 24 + frontend/package.json | 2 +- frontend/scripts/delete-orphan-components.sh | 72 - .../src/lib/components/SimpleEditor.svelte | 87 +- .../editor/componentsPanel/CssProperty.svelte | 15 +- .../apps/editor/componentsPanel/cssUtils.ts | 30 - .../editor/componentsPanel/tailwindUtils.ts | 4474 ++++++++ frontend/tailwindClasses.js | 8977 +++++++++++++++++ 8 files changed, 13538 insertions(+), 143 deletions(-) create mode 100644 frontend/filterTailwindClasses.js delete mode 100644 frontend/scripts/delete-orphan-components.sh create mode 100644 frontend/src/lib/components/apps/editor/componentsPanel/tailwindUtils.ts create mode 100644 frontend/tailwindClasses.js diff --git a/frontend/filterTailwindClasses.js b/frontend/filterTailwindClasses.js new file mode 100644 index 0000000000..c9534cdeeb --- /dev/null +++ b/frontend/filterTailwindClasses.js @@ -0,0 +1,24 @@ +import fs from 'fs' +import tailwindClasses from './tailwindClasses.js' + +function filterTailwindClasses(classes) { + const filters = [ + { pattern: /^m(\w?)-.*$/ }, + { pattern: /^p(\w?)-.*$/ }, + { pattern: /^rounded-.*$/ }, + { pattern: /^shadow-.*$/ }, + { pattern: /^text-[^/]*$/ }, + { pattern: /^bg-[^/]*$/ }, + { pattern: /^border-[^/]*$/ }, + { pattern: /^ring-[^/]*$/ } + ] + + return classes.filter((className) => { + return filters.some((filter) => filter.pattern.test(className)) + }) +} + +const filteredClasses = filterTailwindClasses(tailwindClasses) + +const output = `export const filteredTailwindClasses = ${JSON.stringify(filteredClasses, null, 2)};` +fs.writeFileSync('filteredTailwindClasses.ts', output) diff --git a/frontend/package.json b/frontend/package.json index c4eaa4d6ef..0864a6feae 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,7 +14,7 @@ "generate-backend-client-mac": "openapi --input ../backend/windmill-api/openapi.yaml --output ./src/lib/gen --useOptions", "pretest": "tsc --incremental -p tests/tsconfig.json", "test": "playwright test --config=tests-out/playwright.config.js", - "delele-orphan-components": "sh scripts/delete-orphan-components.sh" + "filter-classes": "node filterTailwindClasses.js" }, "devDependencies": { "@floating-ui/core": "^1.3.1", diff --git a/frontend/scripts/delete-orphan-components.sh b/frontend/scripts/delete-orphan-components.sh deleted file mode 100644 index 0af63fedd3..0000000000 --- a/frontend/scripts/delete-orphan-components.sh +++ /dev/null @@ -1,72 +0,0 @@ -#!/bin/bash - -# ANSI color codes -RED='\033[0;31m' -GREEN='\033[0;32m' -NC='\033[0m' # No Color - -# get the list of all .svelte files -svelte_files=$(find src -type f -name "*.svelte") - -# Array to hold unused files -declare -a unused_files - -echo -e "${NC}Scanning src folder to find all .svelte files" -echo -e " ${GREEN}.${NC} means the .svelte is imported in another file" -echo -e " ${RED}x${NC} means the .svelte is not imported and should likely be removed" - -# loop over each svelte file -for svelte_file in $svelte_files -do - # extract the filename - filename=$(basename -- "$svelte_file") - - # skip files starting with '+' - if [[ "$filename" == +* ]] - then - echo -n -e "${GREEN}.${NC}" - continue - fi - - # search for the filename in all files - found=$(grep -rl "$filename" src) - - # if nothing was found, then the file is unused - if [[ -z $found ]] - then - echo -n -e "${RED}x${NC}" - unused_files+=("$svelte_file") - else - echo -n -e "${GREEN}.${NC}" - fi -done - -# Print a newline after progress dots -echo -echo - -# Print unused files -for file in "${unused_files[@]}" -do - echo -e "${RED}Unused Svelte file: $file${NC}" -done - -# If no unused components found, print the message and exit -if [ ${#unused_files[@]} -eq 0 ]; then - echo -e "${GREEN}No unused components found.${NC}" - exit 0 -fi - -# Delete files if user confirms -if [ ${#unused_files[@]} -gt 0 ]; then - echo -e -n "${GREEN}Do you want to delete these ${#unused_files[@]} files? (y/n) ${NC}" - read answer - - if [ "$answer" != "${answer#[Yy]}" ] ;then - for file in "${unused_files[@]}" - do - rm "$file" - echo -e "${RED}Deleted $file${NC}" - done - fi -fi \ No newline at end of file diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte index 1ffbc9a8b4..7e339bdbf4 100644 --- a/frontend/src/lib/components/SimpleEditor.svelte +++ b/frontend/src/lib/components/SimpleEditor.svelte @@ -1,3 +1,8 @@ + +