From 75e003347e6cfd4aeb23122e372ceb31ae76b12e Mon Sep 17 00:00:00 2001 From: caroluchoa Date: Mon, 5 Feb 2024 19:03:20 -0300 Subject: [PATCH 1/9] adapt form to new widgets --- loaders/icons.ts | 49 +++++++++++++++++++++++++ manifest.gen.ts | 2 + sections/Newsletter/Newsletter.tsx | 54 +++++++++++++++++++++------ sections/Theme/Theme.tsx | 40 ++++++++++---------- static/adminIcons.ts | 59 ++++++++++++++++++++++++++++++ 5 files changed, 172 insertions(+), 32 deletions(-) create mode 100644 loaders/icons.ts create mode 100644 static/adminIcons.ts diff --git a/loaders/icons.ts b/loaders/icons.ts new file mode 100644 index 00000000..76d69e6e --- /dev/null +++ b/loaders/icons.ts @@ -0,0 +1,49 @@ +import { allowCorsFor, FnContext } from "deco/mod.ts"; +import { + AlignCenter, + AlignLeft, + AlignRight, + Center, + Default, + Left, + Lettercase, + Lowercase, + Right, + Uppercase, +} from "../static/adminIcons.ts"; + +const icons = [ + { component: Left, label: "Left", prop: "alignment" }, + { component: Center, label: "Center", prop: "alignment" }, + { component: Right, label: "Right", prop: "alignment" }, + { component: AlignLeft, label: "Left", prop: "textAlignment" }, + { component: AlignCenter, label: "Center", prop: "textAlignment" }, + { component: AlignRight, label: "Right", prop: "textAlignment" }, + { component: Default, label: "Default", prop: "case" }, + { component: Lowercase, label: "Lowercase", prop: "case" }, + { component: Lettercase, label: "Titlecase", prop: "case" }, + { component: Uppercase, label: "Uppercase", prop: "case" }, + { component: "S", label: "Small", prop: "fontSize" }, + { component: "M", label: "Normal", prop: "fontSize" }, + { component: "L", label: "Large", prop: "fontSize" }, +]; + +export default function IconsLoader( + _props: unknown, + req: Request, + ctx: FnContext, +) { + // Allow Cors + Object.entries(allowCorsFor(req)).map(([name, value]) => { + ctx.response.headers.set(name, value); + }); + + // Mapping icons to { value, label } + const iconsMap = icons.map((icon) => ({ + value: icon.component, + label: icon.label, + prop: icon.prop, + })); + + return iconsMap; +} diff --git a/manifest.gen.ts b/manifest.gen.ts index cf879d88..7cba539d 100644 --- a/manifest.gen.ts +++ b/manifest.gen.ts @@ -4,6 +4,7 @@ import * as $$$0 from "./loaders/Layouts/ProductCard.tsx"; import * as $$$1 from "./loaders/List/Sections.tsx"; +import * as $$$2 from "./loaders/icons.ts"; import * as $$$$$$0 from "./sections/Gallery.tsx"; import * as $$$$$$1 from "./sections/Footer/Footer.tsx"; import * as $$$$$$2 from "./sections/Category/CategoryBanner.tsx"; @@ -54,6 +55,7 @@ import * as $$$$$$$$$$$1 from "./apps/site.ts"; const manifest = { "loaders": { + "deco-sites/storefront/loaders/icons.ts": $$$2, "deco-sites/storefront/loaders/Layouts/ProductCard.tsx": $$$0, "deco-sites/storefront/loaders/List/Sections.tsx": $$$1, }, diff --git a/sections/Newsletter/Newsletter.tsx b/sections/Newsletter/Newsletter.tsx index a08ad699..b6d78995 100644 --- a/sections/Newsletter/Newsletter.tsx +++ b/sections/Newsletter/Newsletter.tsx @@ -7,19 +7,45 @@ export interface Form { helpText?: string; } +interface Content { + border?: boolean; + /** + * @format icon-select + * @options deco-sites/storefront/loaders/icons.ts + */ + alignment?: "Left" | "Center" | "Right"; + bgColor?: "Normal" | "Reverse"; +} + +interface Header { + /** + * @format icon-select + * @options deco-sites/storefront/loaders/icons.ts + */ + fontSize?: "Small" | "Normal" | "Large"; + /** + * @format icon-select + * @options deco-sites/storefront/loaders/icons.ts + */ + textAlignment?: "Left" | "Center" | "Right"; + /** + * @format icon-select + * @options deco-sites/storefront/loaders/icons.ts + */ + case?: "Default" | "Titlecase" | "Uppercase" | "Lowercase"; +} + +interface Layout { + header?: Header; + content?: Content; +} + export interface Props { title?: string; /** @format textarea */ description?: string; form?: Form; - layout?: { - headerFontSize?: "Large" | "Normal"; - content?: { - border?: boolean; - alignment?: "Center" | "Left" | "Side to side"; - bgColor?: "Normal" | "Reverse"; - }; - }; + layout?: Layout; } const DEFAULT_PROPS: Props = { @@ -32,10 +58,14 @@ const DEFAULT_PROPS: Props = { 'Ao se inscrever, você concorda com nossa Política de privacidade.', }, layout: { - headerFontSize: "Large", + header: { + fontSize: "Large", + textAlignment: "Center", + case: "Default", + }, content: { border: false, - alignment: "Center", + alignment: "Left", }, }, }; @@ -51,7 +81,7 @@ export default function Newsletter(props: Props) { description={description} alignment={layout?.content?.alignment === "Left" ? "left" : "center"} colorReverse={isReverse} - fontSize={layout?.headerFontSize} + fontSize={layout?.header?.fontSize} /> ); @@ -112,7 +142,7 @@ export default function Newsletter(props: Props) { )} - {layout?.content?.alignment === "Side to side" && ( + {layout?.content?.alignment === "Right" && (
diff --git a/sections/Theme/Theme.tsx b/sections/Theme/Theme.tsx index 0b049675..17241025 100644 --- a/sections/Theme/Theme.tsx +++ b/sections/Theme/Theme.tsx @@ -9,54 +9,54 @@ import Color from "npm:colorjs.io"; export interface ThemeColors { /** - * @format color + * @format color-input * @title Base */ "base-100"?: string; - /** @format color */ + /** @format color-input */ "primary"?: string; - /** @format color */ + /** @format color-input */ "secondary"?: string; /** * @title Accent - * @format color */ + * @format color-input */ "tertiary"?: string; - /** @format color */ + /** @format color-input */ "neutral"?: string; - /** @format color */ + /** @format color-input */ "success"?: string; - /** @format color */ + /** @format color-input */ "warning"?: string; - /** @format color */ + /** @format color-input */ "error"?: string; - /** @format color */ + /** @format color-input */ "info"?: string; } export interface ComplementaryColors { - /** @format color */ + /** @format color-input */ "base-200"?: string; - /** @format color */ + /** @format color-input */ "base-300"?: string; - /** @format color */ + /** @format color-input */ "base-content"?: string; - /** @format color */ + /** @format color-input */ "primary-content"?: string; - /** @format color */ + /** @format color-input */ "secondary-content"?: string; /** * @title Accent Content - * @format color */ + * @format color-input */ "tertiary-content"?: string; - /** @format color */ + /** @format color-input */ "neutral-content"?: string; - /** @format color */ + /** @format color-input */ "success-content"?: string; - /** @format color */ + /** @format color-input */ "warning-content"?: string; - /** @format color */ + /** @format color-input */ "error-content"?: string; - /** @format color */ + /** @format color-input */ "info-content"?: string; } diff --git a/static/adminIcons.ts b/static/adminIcons.ts new file mode 100644 index 00000000..b2b16b21 --- /dev/null +++ b/static/adminIcons.ts @@ -0,0 +1,59 @@ + +export const Left = ` + + +` + + +export const Center = ` + + + + ` + +export const Right = ` + + + ` + +export const SideToSide = ` + + + + + + + + ` + +export const Default = ` + + ` + +export const AlignJustified = ` + + ` + +export const AlignLeft = ` + + ` + +export const AlignCenter = ` + + ` + +export const AlignRight = ` + + ` + +export const Uppercase = ` + + ` + +export const Lettercase = ` + + ` + +export const Lowercase = ` + + ` From fa55bc66d1414f47b90836f8620ba4020049bb59 Mon Sep 17 00:00:00 2001 From: caroluchoa Date: Mon, 5 Feb 2024 19:13:59 -0300 Subject: [PATCH 2/9] change widget name --- sections/Newsletter/Newsletter.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/sections/Newsletter/Newsletter.tsx b/sections/Newsletter/Newsletter.tsx index b6d78995..57f2dd5f 100644 --- a/sections/Newsletter/Newsletter.tsx +++ b/sections/Newsletter/Newsletter.tsx @@ -10,7 +10,7 @@ export interface Form { interface Content { border?: boolean; /** - * @format icon-select + * @format button-group * @options deco-sites/storefront/loaders/icons.ts */ alignment?: "Left" | "Center" | "Right"; @@ -19,17 +19,17 @@ interface Content { interface Header { /** - * @format icon-select + * @format button-group * @options deco-sites/storefront/loaders/icons.ts */ fontSize?: "Small" | "Normal" | "Large"; /** - * @format icon-select + * @format button-group * @options deco-sites/storefront/loaders/icons.ts */ textAlignment?: "Left" | "Center" | "Right"; /** - * @format icon-select + * @format button-group * @options deco-sites/storefront/loaders/icons.ts */ case?: "Default" | "Titlecase" | "Uppercase" | "Lowercase"; From 0be8cf6d1f3895debf868997d1cc401c64b8f1b8 Mon Sep 17 00:00:00 2001 From: caroluchoa Date: Mon, 5 Feb 2024 21:43:05 -0300 Subject: [PATCH 3/9] use icon select widget --- loaders/availableIcons.ts | 27 +++++ manifest.gen.ts | 14 +-- sections/Content/Benefits.tsx | 16 ++- static/adminIcons.ts | 193 +++++++++++++++++++++++++++++++--- 4 files changed, 226 insertions(+), 24 deletions(-) create mode 100644 loaders/availableIcons.ts diff --git a/loaders/availableIcons.ts b/loaders/availableIcons.ts new file mode 100644 index 00000000..8c2a33cf --- /dev/null +++ b/loaders/availableIcons.ts @@ -0,0 +1,27 @@ +import { allowCorsFor, FnContext } from "deco/mod.ts"; +import { AvailableIcons } from "../static/adminIcons.ts"; + +const icons = Object.keys(AvailableIcons).map((iconName) => ({ + component: AvailableIcons[iconName as keyof typeof AvailableIcons], + label: iconName, +})); + +export default function IconsLoader( + _props: unknown, + req: Request, + ctx: FnContext, +) { + // Allow Cors + Object.entries(allowCorsFor(req)).map(([name, value]) => { + ctx.response.headers.set(name, value); + }); + + // Mapping icons to { value, label, icon } + const iconsMap = icons.map((icon) => ({ + icon: icon.component, + label: icon.label, + value: icon.label, + })); + + return iconsMap; +} diff --git a/manifest.gen.ts b/manifest.gen.ts index 7cba539d..1afcdaff 100644 --- a/manifest.gen.ts +++ b/manifest.gen.ts @@ -2,9 +2,10 @@ // This file SHOULD be checked into source version control. // This file is automatically updated during development when running `dev.ts`. -import * as $$$0 from "./loaders/Layouts/ProductCard.tsx"; -import * as $$$1 from "./loaders/List/Sections.tsx"; -import * as $$$2 from "./loaders/icons.ts"; +import * as $$$0 from "./loaders/availableIcons.ts"; +import * as $$$1 from "./loaders/Layouts/ProductCard.tsx"; +import * as $$$2 from "./loaders/List/Sections.tsx"; +import * as $$$3 from "./loaders/icons.ts"; import * as $$$$$$0 from "./sections/Gallery.tsx"; import * as $$$$$$1 from "./sections/Footer/Footer.tsx"; import * as $$$$$$2 from "./sections/Category/CategoryBanner.tsx"; @@ -55,9 +56,10 @@ import * as $$$$$$$$$$$1 from "./apps/site.ts"; const manifest = { "loaders": { - "deco-sites/storefront/loaders/icons.ts": $$$2, - "deco-sites/storefront/loaders/Layouts/ProductCard.tsx": $$$0, - "deco-sites/storefront/loaders/List/Sections.tsx": $$$1, + "deco-sites/storefront/loaders/availableIcons.ts": $$$0, + "deco-sites/storefront/loaders/icons.ts": $$$3, + "deco-sites/storefront/loaders/Layouts/ProductCard.tsx": $$$1, + "deco-sites/storefront/loaders/List/Sections.tsx": $$$2, }, "sections": { "deco-sites/storefront/sections/Animation/Animation.tsx": $$$$$$13, diff --git a/sections/Content/Benefits.tsx b/sections/Content/Benefits.tsx index 7e524e0d..c061128c 100644 --- a/sections/Content/Benefits.tsx +++ b/sections/Content/Benefits.tsx @@ -1,14 +1,20 @@ import Icon, { AvailableIcons } from "$store/components/ui/Icon.tsx"; import Header from "$store/components/ui/SectionHeader.tsx"; +interface Benefit { + label: string; + /** + * @format icon-select + * @options deco-sites/storefront/loaders/availableIcons.ts + */ + icon: AvailableIcons; + description: string; +} + export interface Props { title?: string; description?: string; - benefits?: Array<{ - label: string; - icon: AvailableIcons; - description: string; - }>; + benefits?: Array; layout?: { variation?: "Simple" | "With border" | "Color reverse"; headerAlignment?: "center" | "left"; diff --git a/static/adminIcons.ts b/static/adminIcons.ts index b2b16b21..f9f76d92 100644 --- a/static/adminIcons.ts +++ b/static/adminIcons.ts @@ -1,20 +1,20 @@ +// Icons for button group widget export const Left = ` -` - +`; export const Center = ` - ` + `; export const Right = ` - ` + `; export const SideToSide = ` @@ -24,36 +24,203 @@ export const SideToSide = ` - ` + `; export const Default = ` - ` + `; export const AlignJustified = ` - ` + `; export const AlignLeft = ` - ` + `; export const AlignCenter = ` - ` + `; export const AlignRight = ` - ` + `; export const Uppercase = ` - ` + `; export const Lettercase = ` - ` + `; export const Lowercase = ` - ` + `; + + +// Available icons +export const ChevronLeft = ``; +export const ChevronRight = ``; +export const ChevronUp = ``; +export const ChevronDown = ``; +export const QuestionMarkCircle = ``; +export const User = ``; +export const ShoppingCart = ``; +export const Bars3 = ``; +export const Heart = ``; +export const MagnifyingGlass = ``; +export const XMark = ``; +export const Plus = ``; +export const Minus = ``; +export const MapPin = ``; +export const Phone = ``; +export const Elos = ``; +export const Mastercards = ``; +export const Visas = ``; +export const Pixs = ` `; +export const Instagram = ``; +export const Truck = ``; +export const Discount = ``; +export const Return = ``; +export const CreditCards = ``; +export const Deco = ``; +export const Discord = ``; +export const FilterList = ``; +export const Trash = ``; +export const WhatsApp = ``; +export const ArrowsPointingOut = ``; +export const Star = ``; +export const Ruler = ``; +export const Message = ``; +export const Close = ``; +export const Zoom = ``; +export const Twitter = ` + + `; +export const Facebook = ` + + `; +export const Linkedin = ` + + + + + + `; +export const Tiktok = ` + + `; + +export const Elo = ` + + + + + `; + +export const Diners = ` + + + + `; + +export const Mastercard = ` + + `; + +export const Pix = ` + + + + + + + + + `; + +export const Visa = ` + + + + + `; + +export const Alert = ` + + `; + +export const AlertInfo = ` + + `; + +export const AlertSuccess = ` + + `; + +export const AlertWarning = ` + + `; + +export const AlertError = ` + + `; + +export const share = ` + + + `; + +export const AvailableIcons = { + ChevronDown, + ChevronLeft, + ChevronRight, + ChevronUp, + QuestionMarkCircle, + User, + ShoppingCart, + Bars3, + Heart, + MagnifyingGlass, + XMark, + Plus, + Minus, + MapPin, + Phone, + Elos, + Mastercard, + Visas, + Pixs, + Instagram, + Truck, + Discord, + Return, + CreditCards, + Deco, + Discount, + FilterList, + Trash, + WhatsApp, + ArrowsPointingOut, + Star, + Ruler, + Message, + Close, + Zoom, + Twitter, + Facebook, + Linkedin, + Tiktok, + Elo, + Diners, + Mastercards, + Pix, + Visa, + AlertError, + AlertInfo, + AlertSuccess, + AlertWarning, + Alert, + share +} From 871beb246362f98a66ab7faf851e2cbb76163ddb Mon Sep 17 00:00:00 2001 From: caroluchoa Date: Tue, 6 Feb 2024 14:43:22 -0300 Subject: [PATCH 4/9] change svg fill properties --- static/adminIcons.ts | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/static/adminIcons.ts b/static/adminIcons.ts index f9f76d92..53d646f0 100644 --- a/static/adminIcons.ts +++ b/static/adminIcons.ts @@ -1,22 +1,22 @@ // Icons for button group widget -export const Left = ` +export const Left = ` `; -export const Center = ` +export const Center = ` `; -export const Right = ` +export const Right = ` `; -export const SideToSide = ` +export const SideToSide = ` @@ -26,35 +26,35 @@ export const SideToSide = ` `; -export const Default = ` +export const Default = ` `; -export const AlignJustified = ` +export const AlignJustified = ` `; -export const AlignLeft = ` +export const AlignLeft = ` `; -export const AlignCenter = ` +export const AlignCenter = ` `; -export const AlignRight = ` +export const AlignRight = ` `; -export const Uppercase = ` +export const Uppercase = ` `; -export const Lettercase = ` +export const Lettercase = ` `; -export const Lowercase = ` +export const Lowercase = ` `; From 4085c28f1a32ff3c285157bb18acf0ae0cc32cc5 Mon Sep 17 00:00:00 2001 From: caroluchoa Date: Wed, 28 Feb 2024 15:32:09 -0300 Subject: [PATCH 5/9] Update manifest.gen.ts --- manifest.gen.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/manifest.gen.ts b/manifest.gen.ts index b191c781..e82b0919 100644 --- a/manifest.gen.ts +++ b/manifest.gen.ts @@ -4,6 +4,8 @@ import * as $$$$$$$$$$$0 from "./apps/decohub.ts"; import * as $$$$$$$$$$$1 from "./apps/site.ts"; +import * as $$$2 from "./loaders/availableIcons.ts"; +import * as $$$3 from "./loaders/icons.ts"; import * as $$$0 from "./loaders/Layouts/ProductCard.tsx"; import * as $$$1 from "./loaders/List/Sections.tsx"; import * as $$$$$$0 from "./sections/Animation/Animation.tsx"; @@ -61,10 +63,10 @@ import * as $$$$$$51 from "./sections/Theme/Theme.tsx"; const manifest = { "loaders": { - "deco-sites/storefront/loaders/availableIcons.ts": $$$0, + "deco-sites/storefront/loaders/availableIcons.ts": $$$2, "deco-sites/storefront/loaders/icons.ts": $$$3, - "deco-sites/storefront/loaders/Layouts/ProductCard.tsx": $$$1, - "deco-sites/storefront/loaders/List/Sections.tsx": $$$2, + "deco-sites/storefront/loaders/Layouts/ProductCard.tsx": $$$0, + "deco-sites/storefront/loaders/List/Sections.tsx": $$$1, }, "sections": { "deco-sites/storefront/sections/Animation/Animation.tsx": $$$$$$0, From 65f78404ba516a380cf2a1f1ac18ebf0daa0b02c Mon Sep 17 00:00:00 2001 From: caroluchoa Date: Wed, 28 Feb 2024 16:52:07 -0300 Subject: [PATCH 6/9] update comments --- loaders/availableIcons.ts | 1 + loaders/icons.ts | 2 ++ static/adminIcons.ts | 2 +- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/loaders/availableIcons.ts b/loaders/availableIcons.ts index 8c2a33cf..629e7c4a 100644 --- a/loaders/availableIcons.ts +++ b/loaders/availableIcons.ts @@ -6,6 +6,7 @@ const icons = Object.keys(AvailableIcons).map((iconName) => ({ label: iconName, })); +// Used to load all available icons that will be used for IconSelect widgets. export default function IconsLoader( _props: unknown, req: Request, diff --git a/loaders/icons.ts b/loaders/icons.ts index 76d69e6e..77b5dbf9 100644 --- a/loaders/icons.ts +++ b/loaders/icons.ts @@ -28,6 +28,8 @@ const icons = [ { component: "L", label: "Large", prop: "fontSize" }, ]; +// Used to load icons that will be used for ButtonGroup widgets. +// The file adminIcons.ts contains all available icons in a string format, and this loader maps them to the format expected by the button-group widget. export default function IconsLoader( _props: unknown, req: Request, diff --git a/static/adminIcons.ts b/static/adminIcons.ts index 53d646f0..a8227b8f 100644 --- a/static/adminIcons.ts +++ b/static/adminIcons.ts @@ -1,4 +1,4 @@ -// Icons for button group widget +// Icons for ButtonGroup widget export const Left = ` From cece0916f816c9832a05916a0fed24d4bef326de Mon Sep 17 00:00:00 2001 From: caroluchoa Date: Wed, 28 Feb 2024 18:06:30 -0300 Subject: [PATCH 7/9] remove unused props --- sections/Newsletter/Newsletter.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/sections/Newsletter/Newsletter.tsx b/sections/Newsletter/Newsletter.tsx index 57f2dd5f..429434a9 100644 --- a/sections/Newsletter/Newsletter.tsx +++ b/sections/Newsletter/Newsletter.tsx @@ -23,16 +23,6 @@ interface Header { * @options deco-sites/storefront/loaders/icons.ts */ fontSize?: "Small" | "Normal" | "Large"; - /** - * @format button-group - * @options deco-sites/storefront/loaders/icons.ts - */ - textAlignment?: "Left" | "Center" | "Right"; - /** - * @format button-group - * @options deco-sites/storefront/loaders/icons.ts - */ - case?: "Default" | "Titlecase" | "Uppercase" | "Lowercase"; } interface Layout { @@ -60,8 +50,6 @@ const DEFAULT_PROPS: Props = { layout: { header: { fontSize: "Large", - textAlignment: "Center", - case: "Default", }, content: { border: false, From ddde57c72e41ff4777dda85bd0d8dfb9027e9d10 Mon Sep 17 00:00:00 2001 From: caroluchoa Date: Wed, 28 Feb 2024 18:08:03 -0300 Subject: [PATCH 8/9] create script to generate stringfied icons on server start --- deno.json | 5 +- static/adminIcons.ts | 219 ++++++++++++++------------------------- static/generate-icons.ts | 31 ++++++ 3 files changed, 112 insertions(+), 143 deletions(-) create mode 100644 static/generate-icons.ts diff --git a/deno.json b/deno.json index 9cb3a6d1..45a61d77 100644 --- a/deno.json +++ b/deno.json @@ -14,7 +14,7 @@ "daisyui": "npm:daisyui@4.6.0" }, "tasks": { - "start": "deno task bundle && deno run -A --unstable --env --watch=tailwind.css,sections/,functions/,loaders/,actions/,workflows/,accounts/,.env dev.ts", + "start": "deno task generate-icons && deno task bundle && deno run -A --unstable --env --watch=tailwind.css,sections/,functions/,loaders/,actions/,workflows/,accounts/,.env dev.ts", "gen": "deno run -A dev.ts --gen-only", "play": "USE_LOCAL_STORAGE_ONLY=true deno task start", "component": "deno eval 'import \"deco/scripts/component.ts\"'", @@ -26,7 +26,8 @@ "bundle": "deno eval 'import \"deco/scripts/apps/bundle.ts\"' deco-sites/storefront", "cache_clean": "rm deno.lock; deno cache -r main.ts", "build": "deno run -A dev.ts build", - "preview": "deno run -A main.ts" + "preview": "deno run -A main.ts", + "generate-icons": "deno run -A --unstable static/generate-icons.ts" }, "githooks": { "pre-commit": "check" diff --git a/static/adminIcons.ts b/static/adminIcons.ts index a8227b8f..70f23dc3 100644 --- a/static/adminIcons.ts +++ b/static/adminIcons.ts @@ -1,65 +1,3 @@ -// Icons for ButtonGroup widget - -export const Left = ` - - -`; - -export const Center = ` - - - - `; - -export const Right = ` - - - `; - -export const SideToSide = ` - - - - - - - `; - -export const Default = ` - - `; - -export const AlignJustified = ` - - `; - -export const AlignLeft = ` - - `; - -export const AlignCenter = ` - - `; - -export const AlignRight = ` - - `; - -export const Uppercase = ` - - `; - -export const Lettercase = ` - - `; - -export const Lowercase = ` - - `; - - -// Available icons export const ChevronLeft = ``; export const ChevronRight = ``; export const ChevronUp = ``; @@ -73,16 +11,16 @@ export const MagnifyingGlass = ``; export const Plus = ``; export const Minus = ``; -export const MapPin = ``; +export const MapPin = ``; export const Phone = ``; export const Elos = ``; export const Mastercards = ``; -export const Visas = ``; +export const Visas = ``; export const Pixs = ` `; export const Instagram = ``; export const Truck = ``; export const Discount = ``; -export const Return = ``; +export const Return = ``; export const CreditCards = ``; export const Deco = ``; export const Discord = ``; @@ -111,25 +49,21 @@ export const Linkedin = ` `; - -export const Elo = ` +export const Elo = ` `; - -export const Diners = ` +export const Diners = ` `; - -export const Mastercard = ` +export const Mastercard = ` `; - -export const Pix = ` +export const Pix = ` @@ -139,88 +73,91 @@ export const Pix = ` `; - -export const Visa = ` +export const Visa = ` `; +export const Alert = ` + + `; +export const AlertInfo = ` + + `; +export const AlertSuccess = ` + + `; +export const AlertWarning = ` + + `; +export const AlertError = ` + + `; +export const share = ` + + + `; + +export const AvailableIcons = { ChevronLeft, ChevronRight, ChevronUp, ChevronDown, QuestionMarkCircle, User, ShoppingCart, Bars3, Heart, MagnifyingGlass, XMark, Plus, Minus, MapPin, Phone, Elos, Mastercards, Visas, Pixs, Instagram, Truck, Discount, Return, CreditCards, Deco, Discord, FilterList, Trash, WhatsApp, ArrowsPointingOut, Star, Ruler, Message, Close, Zoom, Twitter, Facebook, Linkedin, Tiktok, Elo, Diners, Mastercard, Pix, Visa, Alert, AlertInfo, AlertSuccess, AlertWarning, AlertError, share }; + +// Icons for ButtonGroup widget + +export const Left = ` + + +`; -export const Alert = ` - +export const Center = ` + + + `; -export const AlertInfo = ` - +export const Right = ` + + `; -export const AlertSuccess = ` - +export const SideToSide = ` + + + + + + + `; + +export const Default = ` + + `; + +export const AlignJustified = ` + + `; + +export const AlignLeft = ` + + `; + +export const AlignCenter = ` + + `; + +export const AlignRight = ` + `; -export const AlertWarning = ` - +export const Uppercase = ` + `; -export const AlertError = ` - +export const Lettercase = ` + `; -export const share = ` - - - `; +export const Lowercase = ` + + `; -export const AvailableIcons = { - ChevronDown, - ChevronLeft, - ChevronRight, - ChevronUp, - QuestionMarkCircle, - User, - ShoppingCart, - Bars3, - Heart, - MagnifyingGlass, - XMark, - Plus, - Minus, - MapPin, - Phone, - Elos, - Mastercard, - Visas, - Pixs, - Instagram, - Truck, - Discord, - Return, - CreditCards, - Deco, - Discount, - FilterList, - Trash, - WhatsApp, - ArrowsPointingOut, - Star, - Ruler, - Message, - Close, - Zoom, - Twitter, - Facebook, - Linkedin, - Tiktok, - Elo, - Diners, - Mastercards, - Pix, - Visa, - AlertError, - AlertInfo, - AlertSuccess, - AlertWarning, - Alert, - share -} diff --git a/static/generate-icons.ts b/static/generate-icons.ts new file mode 100644 index 00000000..4f592734 --- /dev/null +++ b/static/generate-icons.ts @@ -0,0 +1,31 @@ +import { existsSync } from 'https://deno.land/std/fs/mod.ts'; + +const svgFilePath = "static/sprites.svg"; +const outputFilePath = "static/adminIcons.ts"; + +async function generateIconsFile() { + const svgContent = await Deno.readTextFile(svgFilePath); + + const regex = /(.+?)<\/symbol>/gs; + let match; + let svgStrings = ''; + let iconNames = []; + + while ((match = regex.exec(svgContent)) !== null) { + const [fullMatch, id, attributes, content] = match; + svgStrings += `export const ${id} = \`${content}\`;\n`; + iconNames.push(id); + } + + const outputFileContent = `${svgStrings}\nexport const AvailableIcons = { ${iconNames.join(', ')} };`; + + await Deno.writeTextFile(outputFilePath, outputFileContent); + + console.log('Icons as string file generated successfully.'); +} + +if (existsSync(outputFilePath)) { + console.log('Icons as string file already exists. Skipping generation.'); +} else { + generateIconsFile().catch(console.error); +} \ No newline at end of file From e0596b4ef6cee23bf293e72b53f24855ed8fad7a Mon Sep 17 00:00:00 2001 From: caroluchoa Date: Wed, 28 Feb 2024 18:25:29 -0300 Subject: [PATCH 9/9] update generate icons script to let user add new icons on sprites.svg and reflect on adminIcons.ts --- static/generate-icons.ts | 55 +++++++++++++++++++++++++++------------- 1 file changed, 37 insertions(+), 18 deletions(-) diff --git a/static/generate-icons.ts b/static/generate-icons.ts index 4f592734..edd353c8 100644 --- a/static/generate-icons.ts +++ b/static/generate-icons.ts @@ -5,27 +5,46 @@ const outputFilePath = "static/adminIcons.ts"; async function generateIconsFile() { const svgContent = await Deno.readTextFile(svgFilePath); + let existingContent = ''; + let existingIcons = new Set(); + let newIcons = []; + + // Verifies if adminIcons.ts already exists and reads the icons from there + if (existsSync(outputFilePath)) { + existingContent = await Deno.readTextFile(outputFilePath); + const regexExtract = /export const (\w+) =/g; + let matchExtract; + while ((matchExtract = regexExtract.exec(existingContent)) !== null) { + existingIcons.add(matchExtract[1]); + } + } const regex = /(.+?)<\/symbol>/gs; - let match; - let svgStrings = ''; - let iconNames = []; - - while ((match = regex.exec(svgContent)) !== null) { - const [fullMatch, id, attributes, content] = match; - svgStrings += `export const ${id} = \`${content}\`;\n`; - iconNames.push(id); + let matchSymbol; + while ((matchSymbol = regex.exec(svgContent)) !== null) { + const [_, id, attributes, content] = matchSymbol; + // Adds only new icons + if (!existingIcons.has(id)) { + newIcons.push(id); + const iconString = `export const ${id} = \`${content}\`;\n`; + existingContent += iconString; + } } - const outputFileContent = `${svgStrings}\nexport const AvailableIcons = { ${iconNames.join(', ')} };`; - - await Deno.writeTextFile(outputFilePath, outputFileContent); - - console.log('Icons as string file generated successfully.'); + // If there are new icons, update AvailableIcons and the file + if (newIcons.length > 0) { + // Remove the existing AvailableIcons constant from the content + existingContent = existingContent.replace(/export const AvailableIcons = { [^}]* };/g, ''); + // Adds all existing icons plus the new ones to the AvailableIcons constant + const allIcons = [...existingIcons, ...newIcons]; + const availableIconsString = `export const AvailableIcons = { ${allIcons.join(', ')} };`; + existingContent += `\n${availableIconsString}`; + + await Deno.writeTextFile(outputFilePath, existingContent, { create: true }); + console.log('adminIcons.ts updated successfully with new icons.'); + } else { + console.log('No new icons to add.'); + } } -if (existsSync(outputFilePath)) { - console.log('Icons as string file already exists. Skipping generation.'); -} else { - generateIconsFile().catch(console.error); -} \ No newline at end of file +generateIconsFile().catch(console.error); \ No newline at end of file