From 57126f9e434a40c25ecf547cdc8efd9b5204ef54 Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Wed, 20 Aug 2025 13:39:58 +0800 Subject: [PATCH 1/3] feat: single and multi select tags (#27) * chore: import new color tokens * chore: use expanded color set for select option --- scripts/system-token/primitive.json | 80 +-- scripts/system-token/semantic.dark.json | 634 ++++++++++++------ scripts/system-token/semantic.light.json | 634 ++++++++++++------ src/@types/translations/en.json | 12 +- src/application/database-yjs/context.ts | 2 + .../database-yjs/fields/checklist/parse.ts | 16 +- .../select-option/select_option.type.ts | 29 +- .../fields/select-option/utils.ts | 2 +- .../_shared/color-picker/ColorTile.tsx | 4 +- src/components/_shared/tag/Tag.tsx | 25 +- .../board/column/useRenderColumn.tsx | 6 +- .../database/components/cell/cell.const.ts | 60 +- .../cell/select-option/SelectOptionCell.tsx | 8 +- .../cell/select-option/TagsInput.tsx | 310 ++++----- .../filters/filter-menu/SelectOptionList.tsx | 15 +- .../components/property/select/Option.tsx | 88 ++- .../components/property/select/OptionMenu.tsx | 352 ++++++---- src/styles/variables/semantic.dark.css | 148 ++-- src/styles/variables/semantic.light.css | 148 ++-- tailwind/new-colors.cjs | 154 +++-- 20 files changed, 1722 insertions(+), 1005 deletions(-) diff --git a/scripts/system-token/primitive.json b/scripts/system-token/primitive.json index aafd147c..f8dea536 100644 --- a/scripts/system-token/primitive.json +++ b/scripts/system-token/primitive.json @@ -134,6 +134,10 @@ "$type": "color", "$value": "#003c77" }, + "alpha-blue-500-10": { + "$type": "color", + "$value": "#00b5ff1a" + }, "alpha-blue-500-15": { "$type": "color", "$value": "#00b5ff26" @@ -406,6 +410,34 @@ "1000": { "$type": "color", "$value": "#7f6200" + }, + "alpha-yellow-500-15": { + "$type": "color", + "$value": "#ffce0026" + }, + "alpha-yellow-500-25": { + "$type": "color", + "$value": "#ffce0040" + }, + "alpha-yellow-500-30": { + "$type": "color", + "$value": "#ffce004d" + }, + "alpha-yellow-500-35": { + "$type": "color", + "$value": "#ffce0059" + }, + "alpha-yellow-500-45": { + "$type": "color", + "$value": "#ffce0073" + }, + "alpha-yellow-500-60": { + "$type": "color", + "$value": "#ffce0099" + }, + "alpha-yellow-500-90": { + "$type": "color", + "$value": "#ffce00e5" } }, "Subtle_Color": { @@ -433,10 +465,6 @@ "600": { "$type": "color", "$value": "#9e3b3b" - }, - "700": { - "$type": "color", - "$value": "#100505" } }, "Papaya": { @@ -463,10 +491,6 @@ "600": { "$type": "color", "$value": "#a54b24" - }, - "700": { - "$type": "color", - "$value": "#33221b" } }, "Tangerine": { @@ -493,10 +517,6 @@ "600": { "$type": "color", "$value": "#9a570c" - }, - "700": { - "$type": "color", - "$value": "#44341e" } }, "Mango": { @@ -523,10 +543,6 @@ "600": { "$type": "color", "$value": "#906000" - }, - "700": { - "$type": "color", - "$value": "#4f4020" } }, "Lemon": { @@ -553,10 +569,6 @@ "600": { "$type": "color", "$value": "#866800" - }, - "700": { - "$type": "color", - "$value": "#574d1c" } }, "Olive": { @@ -583,10 +595,6 @@ "600": { "$type": "color", "$value": "#627300" - }, - "700": { - "$type": "color", - "$value": "#404207" } }, "Lime": { @@ -613,10 +621,6 @@ "600": { "$type": "color", "$value": "#637000" - }, - "700": { - "$type": "color", - "$value": "#313908" } }, "Grass": { @@ -643,10 +647,6 @@ "600": { "$type": "color", "$value": "#456514" - }, - "700": { - "$type": "color", - "$value": "#273611" } }, "Forest": { @@ -673,10 +673,6 @@ "600": { "$type": "color", "$value": "#2b6c20" - }, - "700": { - "$type": "color", - "$value": "#1a2e17" } }, "Jade": { @@ -703,10 +699,6 @@ "600": { "$type": "color", "$value": "#127b47" - }, - "700": { - "$type": "color", - "$value": "#0f231a" } }, "Aqua": { @@ -733,10 +725,6 @@ "600": { "$type": "color", "$value": "#00727e" - }, - "700": { - "$type": "color", - "$value": "#0d1a1c" } }, "Azure": { @@ -763,6 +751,10 @@ "600": { "$type": "color", "$value": "#0c5b9e" + }, + "alpha-azure-500-10": { + "$type": "color", + "$value": "#0877cc1a" } }, "Denim": { diff --git a/scripts/system-token/semantic.dark.json b/scripts/system-token/semantic.dark.json index 439abbf5..d2b9c9f4 100644 --- a/scripts/system-token/semantic.dark.json +++ b/scripts/system-token/semantic.dark.json @@ -300,6 +300,10 @@ "$type": "color", "$value": "{Blue.alpha-blue-500-20}" }, + "button-active": { + "$type": "color", + "$value": "{Blue.alpha-blue-500-10}" + }, "info-light": { "$type": "color", "$value": "{Blue.900}" @@ -457,6 +461,172 @@ "$value": "{Neutral.1000}" } }, + "Palette": { + "text": { + "color-1": { + "$type": "color", + "$value": "{Subtle_Color.Rose.400}" + }, + "color-2": { + "$type": "color", + "$value": "{Subtle_Color.Papaya.400}" + }, + "color-3": { + "$type": "color", + "$value": "{Subtle_Color.Tangerine.400}" + }, + "color-4": { + "$type": "color", + "$value": "{Subtle_Color.Mango.400}" + }, + "color-5": { + "$type": "color", + "$value": "{Subtle_Color.Lemon.500}" + }, + "color-6": { + "$type": "color", + "$value": "{Subtle_Color.Olive.500}" + }, + "color-7": { + "$type": "color", + "$value": "{Subtle_Color.Lime.400}" + }, + "color-8": { + "$type": "color", + "$value": "{Subtle_Color.Grass.400}" + }, + "color-9": { + "$type": "color", + "$value": "{Subtle_Color.Forest.400}" + }, + "color-10": { + "$type": "color", + "$value": "{Subtle_Color.Jade.400}" + }, + "color-11": { + "$type": "color", + "$value": "{Subtle_Color.Aqua.400}" + }, + "color-12": { + "$type": "color", + "$value": "{Subtle_Color.Azure.400}" + }, + "color-13": { + "$type": "color", + "$value": "{Subtle_Color.Denim.400}" + }, + "color-14": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.400}" + }, + "color-15": { + "$type": "color", + "$value": "{Subtle_Color.Lavender.400}" + }, + "color-16": { + "$type": "color", + "$value": "{Subtle_Color.Lilac.400}" + }, + "color-17": { + "$type": "color", + "$value": "{Subtle_Color.Mallow.400}" + }, + "color-18": { + "$type": "color", + "$value": "{Subtle_Color.Camellia.400}" + }, + "color-19": { + "$type": "color", + "$value": "{Subtle_Color.Smoke.400}" + }, + "color-20": { + "$type": "color", + "$value": "{Subtle_Color.Iron.400}" + } + }, + "bg": { + "color-1": { + "$type": "color", + "$value": "{Subtle_Color.Rose.600}" + }, + "color-2": { + "$type": "color", + "$value": "{Subtle_Color.Papaya.600}" + }, + "color-3": { + "$type": "color", + "$value": "{Subtle_Color.Tangerine.600}" + }, + "color-4": { + "$type": "color", + "$value": "{Subtle_Color.Mango.600}" + }, + "color-5": { + "$type": "color", + "$value": "{Subtle_Color.Lemon.600}" + }, + "color-6": { + "$type": "color", + "$value": "{Subtle_Color.Olive.600}" + }, + "color-7": { + "$type": "color", + "$value": "{Subtle_Color.Lime.600}" + }, + "color-8": { + "$type": "color", + "$value": "{Subtle_Color.Grass.600}" + }, + "color-9": { + "$type": "color", + "$value": "{Subtle_Color.Forest.600}" + }, + "color-10": { + "$type": "color", + "$value": "{Subtle_Color.Jade.600}" + }, + "color-11": { + "$type": "color", + "$value": "{Subtle_Color.Aqua.600}" + }, + "color-12": { + "$type": "color", + "$value": "{Subtle_Color.Azure.600}" + }, + "color-13": { + "$type": "color", + "$value": "{Subtle_Color.Denim.600}" + }, + "color-14": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.600}" + }, + "color-15": { + "$type": "color", + "$value": "{Subtle_Color.Lavender.600}" + }, + "color-16": { + "$type": "color", + "$value": "{Subtle_Color.Lilac.600}" + }, + "color-17": { + "$type": "color", + "$value": "{Subtle_Color.Mallow.600}" + }, + "color-18": { + "$type": "color", + "$value": "{Subtle_Color.Camellia.600}" + }, + "color-19": { + "$type": "color", + "$value": "{Subtle_Color.Smoke.600}" + }, + "color-20": { + "$type": "color", + "$value": "{Subtle_Color.Iron.600}" + } + } + }, "Badge": { "color-1": { "light-1": { @@ -482,10 +652,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Rose.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Rose.600}" } }, "color-2": { @@ -512,10 +678,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Papaya.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Papaya.600}" } }, "color-3": { @@ -542,10 +704,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Tangerine.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Tangerine.600}" } }, "color-4": { @@ -572,10 +730,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Mango.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Mango.600}" } }, "color-5": { @@ -602,10 +756,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Lemon.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Lemon.600}" } }, "color-6": { @@ -632,10 +782,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Olive.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Olive.600}" } }, "color-7": { @@ -662,10 +808,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Lime.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Lime.600}" } }, "color-8": { @@ -692,10 +834,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Grass.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Grass.600}" } }, "color-9": { @@ -722,10 +860,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Forest.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Forest.600}" } }, "color-10": { @@ -752,10 +886,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Jade.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Jade.600}" } }, "color-11": { @@ -782,10 +912,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Aqua.300}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Aqua.600}" } }, "color-12": { @@ -1023,170 +1149,264 @@ } } }, - "Palette": { - "text": { - "color-1": { - "$type": "color", - "$value": "{Subtle_Color.Rose.400}" - }, - "color-2": { - "$type": "color", - "$value": "{Subtle_Color.Papaya.400}" - }, - "color-3": { - "$type": "color", - "$value": "{Subtle_Color.Tangerine.400}" - }, - "color-4": { - "$type": "color", - "$value": "{Subtle_Color.Mango.400}" - }, - "color-5": { - "$type": "color", - "$value": "{Subtle_Color.Lemon.500}" - }, - "color-6": { - "$type": "color", - "$value": "{Subtle_Color.Olive.500}" - }, - "color-7": { - "$type": "color", - "$value": "{Subtle_Color.Lime.400}" - }, - "color-8": { - "$type": "color", - "$value": "{Subtle_Color.Grass.400}" - }, - "color-9": { - "$type": "color", - "$value": "{Subtle_Color.Forest.400}" - }, - "color-10": { - "$type": "color", - "$value": "{Subtle_Color.Jade.400}" - }, - "color-11": { - "$type": "color", - "$value": "{Subtle_Color.Aqua.400}" - }, - "color-12": { - "$type": "color", - "$value": "{Subtle_Color.Azure.400}" - }, - "color-13": { - "$type": "color", - "$value": "{Subtle_Color.Denim.400}" - }, - "color-14": { - "$type": "color", - "$value": "{Subtle_Color.Mauve.400}" - }, - "color-15": { - "$type": "color", - "$value": "{Subtle_Color.Lavender.400}" - }, - "color-16": { - "$type": "color", - "$value": "{Subtle_Color.Lilac.400}" - }, - "color-17": { - "$type": "color", - "$value": "{Subtle_Color.Mallow.400}" - }, - "color-18": { - "$type": "color", - "$value": "{Subtle_Color.Camellia.400}" - }, - "color-19": { - "$type": "color", - "$value": "{Subtle_Color.Smoke.400}" - }, - "color-20": { - "$type": "color", - "$value": "{Subtle_Color.Iron.400}" - } + "Tag": { + "fill-01-light": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.600}", + "$description": "Pearl" }, - "bg": { - "color-1": { - "$type": "color", - "$value": "{Subtle_Color.Rose.600}" - }, - "color-2": { - "$type": "color", - "$value": "{Subtle_Color.Papaya.600}" - }, - "color-3": { - "$type": "color", - "$value": "{Subtle_Color.Tangerine.600}" - }, - "color-4": { - "$type": "color", - "$value": "{Subtle_Color.Mango.600}" - }, - "color-5": { - "$type": "color", - "$value": "{Subtle_Color.Lemon.600}" - }, - "color-6": { - "$type": "color", - "$value": "{Subtle_Color.Olive.600}" - }, - "color-7": { - "$type": "color", - "$value": "{Subtle_Color.Lime.600}" - }, - "color-8": { - "$type": "color", - "$value": "{Subtle_Color.Grass.600}" - }, - "color-9": { - "$type": "color", - "$value": "{Subtle_Color.Forest.600}" - }, - "color-10": { - "$type": "color", - "$value": "{Subtle_Color.Jade.600}" - }, - "color-11": { - "$type": "color", - "$value": "{Subtle_Color.Aqua.600}" - }, - "color-12": { - "$type": "color", - "$value": "{Subtle_Color.Azure.600}" - }, - "color-13": { - "$type": "color", - "$value": "{Subtle_Color.Denim.600}" - }, - "color-14": { - "$type": "color", - "$value": "{Subtle_Color.Mauve.600}" - }, - "color-15": { - "$type": "color", - "$value": "{Subtle_Color.Lavender.600}" - }, - "color-16": { - "$type": "color", - "$value": "{Subtle_Color.Lilac.600}" - }, - "color-17": { - "$type": "color", - "$value": "{Subtle_Color.Mallow.600}" - }, - "color-18": { - "$type": "color", - "$value": "{Subtle_Color.Camellia.600}" - }, - "color-19": { - "$type": "color", - "$value": "{Subtle_Color.Smoke.600}" - }, - "color-20": { - "$type": "color", - "$value": "{Subtle_Color.Iron.600}" - } + "fill-01-thick": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.200}", + "$description": "Pearl" + }, + "text-01-light": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Sky" + }, + "text-01-thick": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.600}", + "$description": "Sky" + }, + "fill-02-light": { + "$type": "color", + "$value": "{Subtle_Color.Lilac.600}", + "$description": "Pearl" + }, + "fill-02-thick": { + "$type": "color", + "$value": "{Subtle_Color.Lilac.200}", + "$description": "Pearl" + }, + "text-02-light": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Sky" + }, + "text-02-thick": { + "$type": "color", + "$value": "{Subtle_Color.Lilac.600}", + "$description": "Sky" + }, + "fill-03-light": { + "$type": "color", + "$value": "{Subtle_Color.Camellia.600}", + "$description": "Pearl" + }, + "fill-03-thick": { + "$type": "color", + "$value": "{Subtle_Color.Camellia.200}", + "$description": "Pearl" + }, + "text-03-light": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Sky" + }, + "text-03-thick": { + "$type": "color", + "$value": "{Subtle_Color.Camellia.600}", + "$description": "Sky" + }, + "fill-04-light": { + "$type": "color", + "$value": "{Subtle_Color.Papaya.600}", + "$description": "Blush" + }, + "fill-04-thick": { + "$type": "color", + "$value": "{Subtle_Color.Papaya.200}", + "$description": "Blush" + }, + "text-04-light": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Blush" + }, + "text-04-thick": { + "$type": "color", + "$value": "{Subtle_Color.Papaya.600}", + "$description": "Blush" + }, + "fill-05-light": { + "$type": "color", + "$value": "{Subtle_Color.Mango.600}", + "$description": "Peach" + }, + "fill-05-thick": { + "$type": "color", + "$value": "{Subtle_Color.Mango.200}", + "$description": "Peach" + }, + "text-05-light": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Peach" + }, + "text-05-thick": { + "$type": "color", + "$value": "{Subtle_Color.Mango.600}", + "$description": "Peach" + }, + "fill-06-light": { + "$type": "color", + "$value": "{Subtle_Color.Olive.600}", + "$description": "Cream" + }, + "fill-06-thick": { + "$type": "color", + "$value": "{Subtle_Color.Olive.200}", + "$description": "Cream" + }, + "text-06-light": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Cream" + }, + "text-06-thick": { + "$type": "color", + "$value": "{Subtle_Color.Olive.600}", + "$description": "Cream" + }, + "fill-07-light": { + "$type": "color", + "$value": "{Subtle_Color.Grass.600}", + "$description": "Mint" + }, + "fill-07-thick": { + "$type": "color", + "$value": "{Subtle_Color.Grass.200}", + "$description": "Mint" + }, + "text-07-light": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Mint" + }, + "text-07-thick": { + "$type": "color", + "$value": "{Subtle_Color.Grass.600}", + "$description": "Mint" + }, + "fill-08-light": { + "$type": "color", + "$value": "{Subtle_Color.Jade.600}", + "$description": "Sky" + }, + "fill-08-thick": { + "$type": "color", + "$value": "{Subtle_Color.Jade.200}", + "$description": "Sky" + }, + "text-08-light": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Sky" + }, + "text-08-thick": { + "$type": "color", + "$value": "{Subtle_Color.Jade.600}", + "$description": "Sky" + }, + "fill-09-light": { + "$type": "color", + "$value": "{Subtle_Color.Azure.600}", + "$description": "Lilac" + }, + "fill-09-thick": { + "$type": "color", + "$value": "{Subtle_Color.Azure.200}", + "$description": "Lilac" + }, + "text-09-light": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Lilac" + }, + "text-09-thick": { + "$type": "color", + "$value": "{Subtle_Color.Azure.600}", + "$description": "Lilac" + }, + "fill-10-light": { + "$type": "color", + "$value": "{Subtle_Color.Iron.600}", + "$description": "Pearl" + }, + "fill-10-thick": { + "$type": "color", + "$value": "{Subtle_Color.Iron.200}", + "$description": "Pearl" + }, + "text-10-light": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Sky" + }, + "text-10-thick": { + "$type": "color", + "$value": "{Subtle_Color.Iron.600}", + "$description": "Sky" + } + }, + "Comment": { + "fill-01": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-15}" + }, + "fill-01-select": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-25}" + }, + "fill-02": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-25}" + }, + "fill-02-select": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-35}" + }, + "fill-03": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-35}" + }, + "fill-03-select": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-45}" + }, + "border-01": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-30}" + }, + "border-01-select": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-60}" + }, + "border-02": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-60}" + }, + "border-02-select": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-90}" + }, + "border-03": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-90}" + }, + "border-03-select": { + "$type": "color", + "$value": "{Yellow.500}" + }, + "icon": { + "$type": "color", + "$value": "{Yellow.300}" + }, + "highlight": { + "$type": "color", + "$value": "{Subtle_Color.Azure.alpha-azure-500-10}" } }, "Brand": { diff --git a/scripts/system-token/semantic.light.json b/scripts/system-token/semantic.light.json index d5d2bc82..26aebf1b 100644 --- a/scripts/system-token/semantic.light.json +++ b/scripts/system-token/semantic.light.json @@ -300,6 +300,10 @@ "$type": "color", "$value": "{Blue.alpha-blue-500-20}" }, + "button-active": { + "$type": "color", + "$value": "{Blue.alpha-blue-500-10}" + }, "info-light": { "$type": "color", "$value": "{Blue.100}" @@ -457,6 +461,172 @@ "$value": "{Neutral.white}" } }, + "Palette": { + "text": { + "color-1": { + "$type": "color", + "$value": "{Subtle_Color.Rose.500}" + }, + "color-2": { + "$type": "color", + "$value": "{Subtle_Color.Papaya.500}" + }, + "color-3": { + "$type": "color", + "$value": "{Subtle_Color.Tangerine.500}" + }, + "color-4": { + "$type": "color", + "$value": "{Subtle_Color.Mango.500}" + }, + "color-5": { + "$type": "color", + "$value": "{Subtle_Color.Lemon.500}" + }, + "color-6": { + "$type": "color", + "$value": "{Subtle_Color.Olive.500}" + }, + "color-7": { + "$type": "color", + "$value": "{Subtle_Color.Lime.500}" + }, + "color-8": { + "$type": "color", + "$value": "{Subtle_Color.Grass.500}" + }, + "color-9": { + "$type": "color", + "$value": "{Subtle_Color.Forest.500}" + }, + "color-10": { + "$type": "color", + "$value": "{Subtle_Color.Jade.500}" + }, + "color-11": { + "$type": "color", + "$value": "{Subtle_Color.Aqua.500}" + }, + "color-12": { + "$type": "color", + "$value": "{Subtle_Color.Azure.500}" + }, + "color-13": { + "$type": "color", + "$value": "{Subtle_Color.Denim.500}" + }, + "color-14": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.500}" + }, + "color-15": { + "$type": "color", + "$value": "{Subtle_Color.Lavender.500}" + }, + "color-16": { + "$type": "color", + "$value": "{Subtle_Color.Lilac.500}" + }, + "color-17": { + "$type": "color", + "$value": "{Subtle_Color.Mallow.500}" + }, + "color-18": { + "$type": "color", + "$value": "{Subtle_Color.Camellia.500}" + }, + "color-19": { + "$type": "color", + "$value": "{Subtle_Color.Smoke.500}" + }, + "color-20": { + "$type": "color", + "$value": "{Subtle_Color.Iron.500}" + } + }, + "bg": { + "color-1": { + "$type": "color", + "$value": "{Subtle_Color.Rose.300}" + }, + "color-2": { + "$type": "color", + "$value": "{Subtle_Color.Papaya.300}" + }, + "color-3": { + "$type": "color", + "$value": "{Subtle_Color.Tangerine.300}" + }, + "color-4": { + "$type": "color", + "$value": "{Subtle_Color.Mango.300}" + }, + "color-5": { + "$type": "color", + "$value": "{Subtle_Color.Lemon.300}" + }, + "color-6": { + "$type": "color", + "$value": "{Subtle_Color.Olive.300}" + }, + "color-7": { + "$type": "color", + "$value": "{Subtle_Color.Lime.300}" + }, + "color-8": { + "$type": "color", + "$value": "{Subtle_Color.Grass.300}" + }, + "color-9": { + "$type": "color", + "$value": "{Subtle_Color.Forest.300}" + }, + "color-10": { + "$type": "color", + "$value": "{Subtle_Color.Jade.300}" + }, + "color-11": { + "$type": "color", + "$value": "{Subtle_Color.Aqua.300}" + }, + "color-12": { + "$type": "color", + "$value": "{Subtle_Color.Azure.300}" + }, + "color-13": { + "$type": "color", + "$value": "{Subtle_Color.Denim.300}" + }, + "color-14": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.300}" + }, + "color-15": { + "$type": "color", + "$value": "{Subtle_Color.Lavender.300}" + }, + "color-16": { + "$type": "color", + "$value": "{Subtle_Color.Lilac.300}" + }, + "color-17": { + "$type": "color", + "$value": "{Subtle_Color.Mallow.300}" + }, + "color-18": { + "$type": "color", + "$value": "{Subtle_Color.Camellia.300}" + }, + "color-19": { + "$type": "color", + "$value": "{Subtle_Color.Smoke.300}" + }, + "color-20": { + "$type": "color", + "$value": "{Subtle_Color.Iron.300}" + } + } + }, "Badge": { "color-1": { "light-1": { @@ -482,10 +652,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Rose.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Rose.700}" } }, "color-2": { @@ -512,10 +678,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Papaya.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Papaya.700}" } }, "color-3": { @@ -542,10 +704,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Tangerine.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Tangerine.700}" } }, "color-4": { @@ -572,10 +730,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Mango.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Mango.700}" } }, "color-5": { @@ -602,10 +756,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Lemon.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Lemon.700}" } }, "color-6": { @@ -632,10 +782,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Olive.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Olive.700}" } }, "color-7": { @@ -662,10 +808,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Lime.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Lime.700}" } }, "color-8": { @@ -692,10 +834,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Grass.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Grass.700}" } }, "color-9": { @@ -722,10 +860,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Forest.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Forest.700}" } }, "color-10": { @@ -752,10 +886,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Jade.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Jade.700}" } }, "color-11": { @@ -782,10 +912,6 @@ "thick-3": { "$type": "color", "$value": "{Subtle_Color.Aqua.600}" - }, - "thick-4": { - "$type": "color", - "$value": "{Subtle_Color.Aqua.700}" } }, "color-12": { @@ -1023,170 +1149,264 @@ } } }, - "Palette": { - "text": { - "color-1": { - "$type": "color", - "$value": "{Subtle_Color.Rose.500}" - }, - "color-2": { - "$type": "color", - "$value": "{Subtle_Color.Papaya.500}" - }, - "color-3": { - "$type": "color", - "$value": "{Subtle_Color.Tangerine.500}" - }, - "color-4": { - "$type": "color", - "$value": "{Subtle_Color.Mango.500}" - }, - "color-5": { - "$type": "color", - "$value": "{Subtle_Color.Lemon.500}" - }, - "color-6": { - "$type": "color", - "$value": "{Subtle_Color.Olive.500}" - }, - "color-7": { - "$type": "color", - "$value": "{Subtle_Color.Lime.500}" - }, - "color-8": { - "$type": "color", - "$value": "{Subtle_Color.Grass.500}" - }, - "color-9": { - "$type": "color", - "$value": "{Subtle_Color.Forest.500}" - }, - "color-10": { - "$type": "color", - "$value": "{Subtle_Color.Jade.500}" - }, - "color-11": { - "$type": "color", - "$value": "{Subtle_Color.Aqua.500}" - }, - "color-12": { - "$type": "color", - "$value": "{Subtle_Color.Azure.500}" - }, - "color-13": { - "$type": "color", - "$value": "{Subtle_Color.Denim.500}" - }, - "color-14": { - "$type": "color", - "$value": "{Subtle_Color.Mauve.500}" - }, - "color-15": { - "$type": "color", - "$value": "{Subtle_Color.Lavender.500}" - }, - "color-16": { - "$type": "color", - "$value": "{Subtle_Color.Lilac.500}" - }, - "color-17": { - "$type": "color", - "$value": "{Subtle_Color.Mallow.500}" - }, - "color-18": { - "$type": "color", - "$value": "{Subtle_Color.Camellia.500}" - }, - "color-19": { - "$type": "color", - "$value": "{Subtle_Color.Smoke.500}" - }, - "color-20": { - "$type": "color", - "$value": "{Subtle_Color.Iron.500}" - } + "Tag": { + "fill-01-light": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.200}", + "$description": "Pearl" }, - "bg": { - "color-1": { - "$type": "color", - "$value": "{Subtle_Color.Rose.300}" - }, - "color-2": { - "$type": "color", - "$value": "{Subtle_Color.Papaya.300}" - }, - "color-3": { - "$type": "color", - "$value": "{Subtle_Color.Tangerine.300}" - }, - "color-4": { - "$type": "color", - "$value": "{Subtle_Color.Mango.300}" - }, - "color-5": { - "$type": "color", - "$value": "{Subtle_Color.Lemon.300}" - }, - "color-6": { - "$type": "color", - "$value": "{Subtle_Color.Olive.300}" - }, - "color-7": { - "$type": "color", - "$value": "{Subtle_Color.Lime.300}" - }, - "color-8": { - "$type": "color", - "$value": "{Subtle_Color.Grass.300}" - }, - "color-9": { - "$type": "color", - "$value": "{Subtle_Color.Forest.300}" - }, - "color-10": { - "$type": "color", - "$value": "{Subtle_Color.Jade.300}" - }, - "color-11": { - "$type": "color", - "$value": "{Subtle_Color.Aqua.300}" - }, - "color-12": { - "$type": "color", - "$value": "{Subtle_Color.Azure.300}" - }, - "color-13": { - "$type": "color", - "$value": "{Subtle_Color.Denim.300}" - }, - "color-14": { - "$type": "color", - "$value": "{Subtle_Color.Mauve.300}" - }, - "color-15": { - "$type": "color", - "$value": "{Subtle_Color.Lavender.300}" - }, - "color-16": { - "$type": "color", - "$value": "{Subtle_Color.Lilac.300}" - }, - "color-17": { - "$type": "color", - "$value": "{Subtle_Color.Mallow.300}" - }, - "color-18": { - "$type": "color", - "$value": "{Subtle_Color.Camellia.300}" - }, - "color-19": { - "$type": "color", - "$value": "{Subtle_Color.Smoke.300}" - }, - "color-20": { - "$type": "color", - "$value": "{Subtle_Color.Iron.300}" - } + "fill-01-thick": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.600}", + "$description": "Pearl" + }, + "text-01-light": { + "$type": "color", + "$value": "{Subtle_Color.Mauve.600}", + "$description": "Sky" + }, + "text-01-thick": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Sky" + }, + "fill-02-light": { + "$type": "color", + "$value": "{Subtle_Color.Lilac.200}", + "$description": "Pearl" + }, + "fill-02-thick": { + "$type": "color", + "$value": "{Subtle_Color.Lilac.600}", + "$description": "Pearl" + }, + "text-02-light": { + "$type": "color", + "$value": "{Subtle_Color.Lilac.600}", + "$description": "Sky" + }, + "text-02-thick": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Sky" + }, + "fill-03-light": { + "$type": "color", + "$value": "{Subtle_Color.Camellia.200}", + "$description": "Pearl" + }, + "fill-03-thick": { + "$type": "color", + "$value": "{Subtle_Color.Camellia.600}", + "$description": "Pearl" + }, + "text-03-light": { + "$type": "color", + "$value": "{Subtle_Color.Camellia.600}", + "$description": "Sky" + }, + "text-03-thick": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Sky" + }, + "fill-04-light": { + "$type": "color", + "$value": "{Subtle_Color.Papaya.200}", + "$description": "Blush" + }, + "fill-04-thick": { + "$type": "color", + "$value": "{Subtle_Color.Papaya.600}", + "$description": "Blush" + }, + "text-04-light": { + "$type": "color", + "$value": "{Subtle_Color.Papaya.600}", + "$description": "Blush" + }, + "text-04-thick": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Blush" + }, + "fill-05-light": { + "$type": "color", + "$value": "{Subtle_Color.Mango.200}", + "$description": "Peach" + }, + "fill-05-thick": { + "$type": "color", + "$value": "{Subtle_Color.Mango.600}", + "$description": "Peach" + }, + "text-05-light": { + "$type": "color", + "$value": "{Subtle_Color.Mango.600}", + "$description": "Peach" + }, + "text-05-thick": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Peach" + }, + "fill-06-light": { + "$type": "color", + "$value": "{Subtle_Color.Olive.200}", + "$description": "Cream" + }, + "fill-06-thick": { + "$type": "color", + "$value": "{Subtle_Color.Olive.600}", + "$description": "Cream" + }, + "text-06-light": { + "$type": "color", + "$value": "{Subtle_Color.Olive.600}", + "$description": "Cream" + }, + "text-06-thick": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Cream" + }, + "fill-07-light": { + "$type": "color", + "$value": "{Subtle_Color.Grass.200}", + "$description": "Mint" + }, + "fill-07-thick": { + "$type": "color", + "$value": "{Subtle_Color.Grass.600}", + "$description": "Mint" + }, + "text-07-light": { + "$type": "color", + "$value": "{Subtle_Color.Grass.600}", + "$description": "Mint" + }, + "text-07-thick": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Mint" + }, + "fill-08-light": { + "$type": "color", + "$value": "{Subtle_Color.Jade.200}", + "$description": "Sky" + }, + "fill-08-thick": { + "$type": "color", + "$value": "{Subtle_Color.Jade.600}", + "$description": "Sky" + }, + "text-08-light": { + "$type": "color", + "$value": "{Subtle_Color.Jade.600}", + "$description": "Sky" + }, + "text-08-thick": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Sky" + }, + "fill-09-light": { + "$type": "color", + "$value": "{Subtle_Color.Azure.200}", + "$description": "Lilac" + }, + "fill-09-thick": { + "$type": "color", + "$value": "{Subtle_Color.Azure.600}", + "$description": "Lilac" + }, + "text-09-light": { + "$type": "color", + "$value": "{Subtle_Color.Azure.600}", + "$description": "Lilac" + }, + "text-09-thick": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Lilac" + }, + "fill-10-light": { + "$type": "color", + "$value": "{Subtle_Color.Iron.200}", + "$description": "Pearl" + }, + "fill-10-thick": { + "$type": "color", + "$value": "{Subtle_Color.Iron.600}", + "$description": "Pearl" + }, + "text-10-light": { + "$type": "color", + "$value": "{Subtle_Color.Iron.600}", + "$description": "Sky" + }, + "text-10-thick": { + "$type": "color", + "$value": "{Neutral.white}", + "$description": "Sky" + } + }, + "Comment": { + "fill-01": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-15}" + }, + "fill-01-select": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-25}" + }, + "fill-02": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-25}" + }, + "fill-02-select": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-35}" + }, + "fill-03": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-35}" + }, + "fill-03-select": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-45}" + }, + "border-01": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-30}" + }, + "border-01-select": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-60}" + }, + "border-02": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-60}" + }, + "border-02-select": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-90}" + }, + "border-03": { + "$type": "color", + "$value": "{Yellow.alpha-yellow-500-90}" + }, + "border-03-select": { + "$type": "color", + "$value": "{Yellow.500}" + }, + "icon": { + "$type": "color", + "$value": "{Yellow.800}" + }, + "highlight": { + "$type": "color", + "$value": "{Subtle_Color.Azure.alpha-azure-500-10}" } }, "Brand": { diff --git a/src/@types/translations/en.json b/src/@types/translations/en.json index ad4b8cee..7ec2e2c8 100644 --- a/src/@types/translations/en.json +++ b/src/@types/translations/en.json @@ -2284,7 +2284,17 @@ "mallow": "Mallow", "camellia": "Camellia", "smoke": "Smoke", - "iron": "Iron" + "iron": "Iron", + "mauveEmphasized": "Mauve Emphasized", + "lavenderEmphasized": "Lavender Emphasized", + "camelliaEmphasized": "Camellia Emphasized", + "papayaEmphasized": "Papaya Emphasized", + "mangoEmphasized": "Mango Emphasized", + "oliveEmphasized": "Olive Emphasized", + "grassEmphasized": "Grass Emphasized", + "jadeEmphasized": "Jade Emphasized", + "azureEmphasized": "Azure Emphasized", + "ironEmphasized": "Iron Emphasized" }, "emoji": { "emojiTab": "Emoji", diff --git a/src/application/database-yjs/context.ts b/src/application/database-yjs/context.ts index 99d5689f..24bdc915 100644 --- a/src/application/database-yjs/context.ts +++ b/src/application/database-yjs/context.ts @@ -11,6 +11,7 @@ import { LoadView, LoadViewMeta, RowId, + Subscription, TestDatabasePromptConfig, UpdatePagePayload, View, @@ -56,6 +57,7 @@ export interface DatabaseContextState { requestInstance?: AxiosInstance | null; checkIfRowDocumentExists?: (documentId: string) => Promise; eventEmitter?: EventEmitter; + getSubscriptions?: (() => Promise) | undefined; } export const DatabaseContext = createContext(null); diff --git a/src/application/database-yjs/fields/checklist/parse.ts b/src/application/database-yjs/fields/checklist/parse.ts index c5c4df3a..c1857b69 100644 --- a/src/application/database-yjs/fields/checklist/parse.ts +++ b/src/application/database-yjs/fields/checklist/parse.ts @@ -7,7 +7,7 @@ export interface ChecklistCellData { percentage: number; } -export function parseChecklistData (data: string): ChecklistCellData | null { +export function parseChecklistData(data: string): ChecklistCellData | null { try { const { options, selected_option_ids } = JSON.parse(data); const percentage = selected_option_ids.length / options.length; @@ -22,13 +22,13 @@ export function parseChecklistData (data: string): ChecklistCellData | null { } } -export function addTask (data: string, taskName: string): string { +export function addTask(data: string, taskName: string): string { const parsedData = parseChecklistData(data); const task: SelectOption = { id: generateUUID(), name: taskName, - color: SelectOptionColor.Purple, + color: SelectOptionColor.OptionColor1, }; if (!parsedData) { @@ -50,7 +50,7 @@ export function addTask (data: string, taskName: string): string { }); } -export function toggleSelectedTask (data: string, taskId: string): string { +export function toggleSelectedTask(data: string, taskId: string): string { const parsedData = parseChecklistData(data); if (!parsedData) { @@ -70,7 +70,7 @@ export function toggleSelectedTask (data: string, taskId: string): string { }); } -export function updateTask (data: string, taskId: string, taskName: string): string { +export function updateTask(data: string, taskId: string, taskName: string): string { const parsedData = parseChecklistData(data); if (!parsedData) { @@ -96,7 +96,7 @@ export function updateTask (data: string, taskId: string, taskName: string): str }); } -export function removeTask (data: string, taskId: string): string { +export function removeTask(data: string, taskId: string): string { const parsedData = parseChecklistData(data); if (!parsedData) { @@ -114,7 +114,7 @@ export function removeTask (data: string, taskId: string): string { }); } -export function reorderTasks (data: string, { beforeId, taskId }: { beforeId?: string, taskId: string }): string { +export function reorderTasks(data: string, { beforeId, taskId }: { beforeId?: string, taskId: string }): string { const parsedData = parseChecklistData(data); if (!parsedData) { @@ -151,4 +151,4 @@ export function reorderTasks (data: string, { beforeId, taskId }: { beforeId?: s options: newOptions, selected_option_ids: selectedOptionIds, }); -} \ No newline at end of file +} diff --git a/src/application/database-yjs/fields/select-option/select_option.type.ts b/src/application/database-yjs/fields/select-option/select_option.type.ts index 343941d5..7303fab5 100644 --- a/src/application/database-yjs/fields/select-option/select_option.type.ts +++ b/src/application/database-yjs/fields/select-option/select_option.type.ts @@ -1,15 +1,26 @@ import { Filter } from '@/application/database-yjs'; export enum SelectOptionColor { - Purple = 'Purple', - Pink = 'Pink', - LightPink = 'LightPink', - Orange = 'Orange', - Yellow = 'Yellow', - Lime = 'Lime', - Green = 'Green', - Aqua = 'Aqua', - Blue = 'Blue', + OptionColor1 = 'Purple', + OptionColor2 = 'Pink', + OptionColor3 = 'LightPink', + OptionColor4 = 'Orange', + OptionColor5 = 'Yellow', + OptionColor6 = 'Lime', + OptionColor7 = 'Green', + OptionColor8 = 'Aqua', + OptionColor9 = 'Blue', + OptionColor10 = 'Cream', + OptionColor11 = 'Mint', + OptionColor12 = 'Sky', + OptionColor13 = 'Lilac', + OptionColor14 = 'Pearl', + OptionColor15 = 'Sunset', + OptionColor16 = 'Coral', + OptionColor17 = 'Sapphire', + OptionColor18 = 'Moss', + OptionColor19 = 'Sand', + OptionColor20 = 'Charcoal', } export enum SelectOptionFilterCondition { diff --git a/src/application/database-yjs/fields/select-option/utils.ts b/src/application/database-yjs/fields/select-option/utils.ts index 8569f2af..274c8fce 100644 --- a/src/application/database-yjs/fields/select-option/utils.ts +++ b/src/application/database-yjs/fields/select-option/utils.ts @@ -36,7 +36,7 @@ export function getColorByOption (text: string): SelectOptionColor { hash = Math.abs(hash); const colors = Object.values(SelectOptionColor); - const colorIndex = hash % colors.length; + const colorIndex = hash % 10; return colors[colorIndex]; } \ No newline at end of file diff --git a/src/components/_shared/color-picker/ColorTile.tsx b/src/components/_shared/color-picker/ColorTile.tsx index fb7fd786..ee131e44 100644 --- a/src/components/_shared/color-picker/ColorTile.tsx +++ b/src/components/_shared/color-picker/ColorTile.tsx @@ -1,4 +1,4 @@ -import { forwardRef, useMemo } from 'react'; +import { forwardRef, MouseEventHandler, useMemo } from 'react'; import { cn } from '@/lib/utils'; @@ -7,7 +7,7 @@ export const ColorTile = forwardRef< { value: string; isText?: boolean; - onClick: () => void; + onClick: MouseEventHandler | undefined; active?: boolean; } >(({ value, onClick, isText = false, active = false, ...props }, forwardedRef) => { diff --git a/src/components/_shared/tag/Tag.tsx b/src/components/_shared/tag/Tag.tsx index 5d21a517..85f46284 100644 --- a/src/components/_shared/tag/Tag.tsx +++ b/src/components/_shared/tag/Tag.tsx @@ -1,30 +1,29 @@ import { FC, useMemo } from 'react'; import { ReactComponent as CircleIcon } from '@/assets/icons/circle.svg'; +import { cn } from '@/lib/utils'; export interface TagProps { - color?: string; + bgColor?: string; + textColor?: string; label?: string; badge?: string; } -export const Tag: FC = ({ color, label, badge }) => { +export const Tag: FC = ({ bgColor, textColor, label, badge }) => { const className = useMemo(() => { - const classList = [ - 'rounded-[6px]', - 'font-medium min-w-[22px]', - 'w-fit flex items-center gap-0.5 truncate leading-[20px] py-[1px] px-1 max-w-full justify-center', - ]; - - if (color) classList.push(`text-text-primary`); - if (badge) classList.push('px-2 gap-1'); - return classList.join(' '); - }, [color, badge]); + return cn( + 'text-[0.75rem] leading-[1.5] truncate', + 'min-w-[22px] w-fit flex items-center gap-0.5 py-[1px] px-2 max-w-full justify-center, rounded-[6px]', + badge && 'px-2 gap-1' + ); + }, [badge]); return (
diff --git a/src/components/database/components/board/column/useRenderColumn.tsx b/src/components/database/components/board/column/useRenderColumn.tsx index 555219ed..942aa267 100644 --- a/src/components/database/components/board/column/useRenderColumn.tsx +++ b/src/components/database/components/board/column/useRenderColumn.tsx @@ -7,7 +7,7 @@ import { getChecked } from '@/application/database-yjs/fields/checkbox/utils'; import { YjsDatabaseKey } from '@/application/types'; import { ReactComponent as CheckboxCheckSvg } from '@/assets/icons/check_filled.svg'; import { ReactComponent as CheckboxUncheckSvg } from '@/assets/icons/uncheck.svg'; -import { SelectOptionBadgeColorMap, SelectOptionColorMap } from '@/components/database/components/cell/cell.const'; +import { SelectOptionColorMap, SelectOptionFgColorMap } from '@/components/database/components/cell/cell.const'; import { Tag } from '@/components/_shared/tag'; export function useRenderColumn(id: string, fieldId: string) { @@ -44,8 +44,8 @@ export function useRenderColumn(id: string, fieldId: string) { diff --git a/src/components/database/components/cell/cell.const.ts b/src/components/database/components/cell/cell.const.ts index 6c96e57c..8d379528 100644 --- a/src/components/database/components/cell/cell.const.ts +++ b/src/components/database/components/cell/cell.const.ts @@ -1,25 +1,47 @@ import { SelectOptionColor } from '@/application/database-yjs'; export const SelectOptionColorMap = { - [SelectOptionColor.Purple]: '--tint-purple', - [SelectOptionColor.Pink]: '--tint-pink', - [SelectOptionColor.LightPink]: '--tint-red', - [SelectOptionColor.Orange]: '--tint-orange', - [SelectOptionColor.Yellow]: '--tint-yellow', - [SelectOptionColor.Lime]: '--tint-lime', - [SelectOptionColor.Green]: '--tint-green', - [SelectOptionColor.Aqua]: '--tint-aqua', - [SelectOptionColor.Blue]: '--tint-blue', + [SelectOptionColor.OptionColor1]: '--tag-fill-01-light', + [SelectOptionColor.OptionColor2]: '--tag-fill-02-light', + [SelectOptionColor.OptionColor3]: '--tag-fill-03-light', + [SelectOptionColor.OptionColor4]: '--tag-fill-04-light', + [SelectOptionColor.OptionColor5]: '--tag-fill-05-light', + [SelectOptionColor.OptionColor6]: '--tag-fill-06-light', + [SelectOptionColor.OptionColor7]: '--tag-fill-07-light', + [SelectOptionColor.OptionColor8]: '--tag-fill-08-light', + [SelectOptionColor.OptionColor9]: '--tag-fill-09-light', + [SelectOptionColor.OptionColor10]: '--tag-fill-10-light', + [SelectOptionColor.OptionColor11]: '--tag-fill-01-thick', + [SelectOptionColor.OptionColor12]: '--tag-fill-02-thick', + [SelectOptionColor.OptionColor13]: '--tag-fill-03-thick', + [SelectOptionColor.OptionColor14]: '--tag-fill-04-thick', + [SelectOptionColor.OptionColor15]: '--tag-fill-05-thick', + [SelectOptionColor.OptionColor16]: '--tag-fill-06-thick', + [SelectOptionColor.OptionColor17]: '--tag-fill-07-thick', + [SelectOptionColor.OptionColor18]: '--tag-fill-08-thick', + [SelectOptionColor.OptionColor19]: '--tag-fill-09-thick', + [SelectOptionColor.OptionColor20]: '--tag-fill-10-thick', }; -export const SelectOptionBadgeColorMap = { - [SelectOptionColor.Purple]: '--badge-purple', - [SelectOptionColor.Pink]: '--badge-pink', - [SelectOptionColor.LightPink]: '--badge-red', - [SelectOptionColor.Orange]: '--badge-orange', - [SelectOptionColor.Yellow]: '--badge-yellow', - [SelectOptionColor.Lime]: '--badge-lime', - [SelectOptionColor.Green]: '--badge-green', - [SelectOptionColor.Aqua]: '--badge-aqua', - [SelectOptionColor.Blue]: '--badge-blue', +export const SelectOptionFgColorMap = { + [SelectOptionColor.OptionColor1]: '--tag-text-01-light', + [SelectOptionColor.OptionColor2]: '--tag-text-02-light', + [SelectOptionColor.OptionColor3]: '--tag-text-03-light', + [SelectOptionColor.OptionColor4]: '--tag-text-04-light', + [SelectOptionColor.OptionColor5]: '--tag-text-05-light', + [SelectOptionColor.OptionColor6]: '--tag-text-06-light', + [SelectOptionColor.OptionColor7]: '--tag-text-07-light', + [SelectOptionColor.OptionColor8]: '--tag-text-08-light', + [SelectOptionColor.OptionColor9]: '--tag-text-09-light', + [SelectOptionColor.OptionColor10]: '--tag-text-10-light', + [SelectOptionColor.OptionColor11]: '--tag-text-01-thick', + [SelectOptionColor.OptionColor12]: '--tag-text-02-thick', + [SelectOptionColor.OptionColor13]: '--tag-text-03-thick', + [SelectOptionColor.OptionColor14]: '--tag-text-04-thick', + [SelectOptionColor.OptionColor15]: '--tag-text-05-thick', + [SelectOptionColor.OptionColor16]: '--tag-text-06-thick', + [SelectOptionColor.OptionColor17]: '--tag-text-07-thick', + [SelectOptionColor.OptionColor18]: '--tag-text-08-thick', + [SelectOptionColor.OptionColor19]: '--tag-text-09-thick', + [SelectOptionColor.OptionColor20]: '--tag-text-10-thick', }; diff --git a/src/components/database/components/cell/select-option/SelectOptionCell.tsx b/src/components/database/components/cell/select-option/SelectOptionCell.tsx index 009fa2e6..8c9babef 100644 --- a/src/components/database/components/cell/select-option/SelectOptionCell.tsx +++ b/src/components/database/components/cell/select-option/SelectOptionCell.tsx @@ -1,6 +1,6 @@ import { FieldType, parseSelectOptionTypeOptions, useFieldSelector } from '@/application/database-yjs'; import { CellProps, SelectOptionCell as SelectOptionCellType } from '@/application/database-yjs/cell.type'; -import { SelectOptionColorMap } from '@/components/database/components/cell/cell.const'; +import { SelectOptionColorMap, SelectOptionFgColorMap } from '@/components/database/components/cell/cell.const'; import SelectOptionCellMenu from '@/components/database/components/cell/select-option/SelectOptionCellMenu'; import { Tag } from '@/components/_shared/tag'; import { cn } from '@/lib/utils'; @@ -41,7 +41,11 @@ export function SelectOptionCell({ if (!option) return null; return (
- +
); }), diff --git a/src/components/database/components/cell/select-option/TagsInput.tsx b/src/components/database/components/cell/select-option/TagsInput.tsx index aa9f0c14..6ad67c0b 100644 --- a/src/components/database/components/cell/select-option/TagsInput.tsx +++ b/src/components/database/components/cell/select-option/TagsInput.tsx @@ -7,15 +7,26 @@ import { ReactComponent as CloseIcon } from '@/assets/icons/close.svg'; import { cn } from '@/lib/utils'; const tagColorClasses = { - [SelectOptionColor.Purple]: `bg-tint-purple`, - [SelectOptionColor.Pink]: `bg-tint-pink`, - [SelectOptionColor.LightPink]: `bg-tint-red`, - [SelectOptionColor.Orange]: `bg-tint-orange`, - [SelectOptionColor.Yellow]: `bg-tint-yellow`, - [SelectOptionColor.Lime]: `bg-tint-lime`, - [SelectOptionColor.Green]: `bg-tint-green`, - [SelectOptionColor.Aqua]: `bg-tint-aqua`, - [SelectOptionColor.Blue]: `bg-tint-blue`, + [SelectOptionColor.OptionColor1]: 'bg-tag-fill-01-light text-tag-text-01-light', + [SelectOptionColor.OptionColor2]: 'bg-tag-fill-02-light text-tag-text-02-light', + [SelectOptionColor.OptionColor3]: 'bg-tag-fill-03-light text-tag-text-03-light', + [SelectOptionColor.OptionColor4]: 'bg-tag-fill-04-light text-tag-text-04-light', + [SelectOptionColor.OptionColor5]: 'bg-tag-fill-05-light text-tag-text-05-light', + [SelectOptionColor.OptionColor6]: 'bg-tag-fill-06-light text-tag-text-06-light', + [SelectOptionColor.OptionColor7]: 'bg-tag-fill-07-light text-tag-text-07-light', + [SelectOptionColor.OptionColor8]: 'bg-tag-fill-08-light text-tag-text-08-light', + [SelectOptionColor.OptionColor9]: 'bg-tag-fill-09-light text-tag-text-09-light', + [SelectOptionColor.OptionColor10]: 'bg-tag-fill-10-light text-tag-text-10-light', + [SelectOptionColor.OptionColor11]: 'bg-tag-fill-01-thick text-tag-text-01-thick', + [SelectOptionColor.OptionColor12]: 'bg-tag-fill-02-thick text-tag-text-02-thick', + [SelectOptionColor.OptionColor13]: 'bg-tag-fill-03-thick text-tag-text-03-thick', + [SelectOptionColor.OptionColor14]: 'bg-tag-fill-04-thick text-tag-text-04-thick', + [SelectOptionColor.OptionColor15]: 'bg-tag-fill-05-thick text-tag-text-05-thick', + [SelectOptionColor.OptionColor16]: 'bg-tag-fill-06-thick text-tag-text-06-thick', + [SelectOptionColor.OptionColor17]: 'bg-tag-fill-07-thick text-tag-text-07-thick', + [SelectOptionColor.OptionColor18]: 'bg-tag-fill-08-thick text-tag-text-08-thick', + [SelectOptionColor.OptionColor19]: 'bg-tag-fill-09-thick text-tag-text-09-thick', + [SelectOptionColor.OptionColor20]: 'bg-tag-fill-10-thick text-tag-text-10-thick', }; export interface Tag { @@ -47,31 +58,29 @@ const baseInputStyles = cn( 'file:inline-flex file:border-0 file:bg-fill-content file:text-sm file:font-medium', // Disabled state - 'disabled:pointer-events-none disabled:cursor-not-allowed', + 'disabled:pointer-events-none disabled:cursor-not-allowed' ); -const tagInputVariants = cva( - 'flex items-center gap-1 overflow-x-auto scrollbar-hide', - { - variants: { - variant: { - // Default variant with focus styles - default: 'border-border-primary border data-[focused=true]:border-border-theme-thick data-[focused=true]:ring-border-theme-thick data-[focused=true]:ring-[0.5px] disabled:border-border-primary disabled:bg-fill-primary-hover disabled:text-text-tertiary hover:border-border-primary-hover', - }, - size: { - // Small size input - sm: 'h-8 px-2 rounded-300', - - // Medium size input (default) - md: 'h-10 px-2 rounded-400', - }, +const tagInputVariants = cva('flex items-center gap-1 overflow-x-auto scrollbar-hide', { + variants: { + variant: { + // Default variant with focus styles + default: + 'border-border-primary border data-[focused=true]:border-border-theme-thick data-[focused=true]:ring-border-theme-thick data-[focused=true]:ring-[0.5px] disabled:border-border-primary disabled:bg-fill-primary-hover disabled:text-text-tertiary hover:border-border-primary-hover', }, - defaultVariants: { - variant: 'default', - size: 'sm', + size: { + // Small size input + sm: 'h-8 px-2 rounded-300', + + // Medium size input (default) + md: 'h-10 px-2 rounded-400', }, }, -); + defaultVariants: { + variant: 'default', + size: 'sm', + }, +}); // Tag component styles const tagStyles = cva( @@ -81,9 +90,9 @@ const tagStyles = cva( color: tagColorClasses, }, defaultVariants: { - color: SelectOptionColor.Purple, + color: SelectOptionColor.OptionColor1, }, - }, + } ); // Tag component @@ -94,15 +103,15 @@ interface TagComponentProps { const TagComponent = ({ tag, onRemove }: TagComponentProps) => { return ( -
- {tag.text} +
+ {tag.text}
); @@ -120,139 +129,134 @@ export interface TagInputProps inputValue?: string; } -const TagsInput = forwardRef(({ - className, - variant, - size, - multiple = false, - tags, - onTagsChange, - inputProps, - inputRef, - onInputChange, - inputValue = '', - ...props -}, ref) => { - const [focused, setFocused] = useState(false); - const [internalInputValue, setInternalInputValue] = useState(inputValue); - const containerRef = useRef(null); - const inputElementRef = useRef(null); +const TagsInput = forwardRef( + ( + { + className, + variant, + size, + multiple = false, + tags, + onTagsChange, + inputProps, + inputRef, + onInputChange, + inputValue = '', + ...props + }, + ref + ) => { + const [focused, setFocused] = useState(false); + const [internalInputValue, setInternalInputValue] = useState(inputValue); + const containerRef = useRef(null); + const inputElementRef = useRef(null); - // Handle the forwarded ref - const resolvedInputRef = (inputRef as React.RefObject) || inputElementRef; + // Handle the forwarded ref + const resolvedInputRef = (inputRef as React.RefObject) || inputElementRef; - useEffect(() => { - setInternalInputValue(inputValue); - }, [inputValue]); + useEffect(() => { + setInternalInputValue(inputValue); + }, [inputValue]); - const handleInputChange = (e: React.ChangeEvent) => { - const value = e.target.value; + const handleInputChange = (e: React.ChangeEvent) => { + const value = e.target.value; - setInternalInputValue(value); - onInputChange?.(value); - }; + setInternalInputValue(value); + onInputChange?.(value); + }; - const handleRemoveTag = (id: string) => { - const newTags = tags.filter(tag => tag.id !== id); + const handleRemoveTag = (id: string) => { + const newTags = tags.filter((tag) => tag.id !== id); - onTagsChange(newTags); - }; - - const handleKeyDown = (e: KeyboardEvent) => { - // Handle a backspace key when input is empty to remove the last tag - if (e.key === 'Backspace' && internalInputValue === '' && tags.length > 0) { - const newTags = [...tags]; - - newTags.pop(); onTagsChange(newTags); - } + }; - // Handle Enter key to add a new tag - if (e.key === 'Enter' && internalInputValue.trim() !== '') { - e.preventDefault(); + const handleKeyDown = (e: KeyboardEvent) => { + // Handle a backspace key when input is empty to remove the last tag + if (e.key === 'Backspace' && internalInputValue === '' && tags.length > 0) { + const newTags = [...tags]; - // For single tag mode, replace the existing tag - if (!multiple) { - onTagsChange([{ - id: Date.now().toString(), - text: internalInputValue.trim(), - }]); - } else { - // For multiple tags, add to the existing ones - onTagsChange([ - ...tags, - { - id: Date.now().toString(), - text: internalInputValue.trim(), - }, - ]); + newTags.pop(); + onTagsChange(newTags); } - setInternalInputValue(''); - onInputChange?.(''); - } - }; + // Handle Enter key to add a new tag + if (e.key === 'Enter' && internalInputValue.trim() !== '') { + e.preventDefault(); - const focusInput = () => { - resolvedInputRef.current?.focus(); - }; + // For single tag mode, replace the existing tag + if (!multiple) { + onTagsChange([ + { + id: Date.now().toString(), + text: internalInputValue.trim(), + }, + ]); + } else { + // For multiple tags, add to the existing ones + onTagsChange([ + ...tags, + { + id: Date.now().toString(), + text: internalInputValue.trim(), + }, + ]); + } - return ( -
+ setInternalInputValue(''); + onInputChange?.(''); + } + }; + + const focusInput = () => { + resolvedInputRef.current?.focus(); + }; + + return (
-
- {/* Render tags */} - {tags.map(tag => ( - +
+ {/* Render tags */} + {tags.map((tag) => ( + + ))} + + {/* Input field */} + { + setFocused(true); + props?.onFocus?.(e); + }} + onKeyDown={handleKeyDown} + onBlur={(e) => { + setFocused(false); + props?.onBlur?.(e); + }} + value={internalInputValue} + onChange={handleInputChange} + {...props} + {...inputProps} /> - ))} - - {/* Input field */} - { - setFocused(true); - props?.onFocus?.(e); - }} - onKeyDown={handleKeyDown} - onBlur={(e) => { - setFocused(false); - props?.onBlur?.(e); - }} - value={internalInputValue} - onChange={handleInputChange} - {...props} - {...inputProps} - /> +
-
-
- ); -}); + ); + } +); -export { TagsInput }; \ No newline at end of file +export { TagsInput }; diff --git a/src/components/database/components/filters/filter-menu/SelectOptionList.tsx b/src/components/database/components/filters/filter-menu/SelectOptionList.tsx index 5ea6f161..61db66cc 100644 --- a/src/components/database/components/filters/filter-menu/SelectOptionList.tsx +++ b/src/components/database/components/filters/filter-menu/SelectOptionList.tsx @@ -1,11 +1,15 @@ import { parseSelectOptionTypeOptions, SelectOption, useFieldSelector } from '@/application/database-yjs'; import { Tag } from '@/components/_shared/tag'; -import { SelectOptionColorMap } from '@/components/database/components/cell/cell.const'; +import { SelectOptionColorMap, SelectOptionFgColorMap } from '@/components/database/components/cell/cell.const'; import { DropdownMenuItemTick, dropdownMenuItemVariants } from '@/components/ui/dropdown-menu'; import { cn } from '@/lib/utils'; import { useCallback, useMemo } from 'react'; -export function SelectOptionList ({ fieldId, selectedIds, onSelect }: { +export function SelectOptionList({ + fieldId, + selectedIds, + onSelect, +}: { fieldId: string; selectedIds: string[]; onSelect: (optionId: string) => void; @@ -26,20 +30,21 @@ export function SelectOptionList ({ fieldId, selectedIds, onSelect }: { data-testid={'select-option-list'} data-checked={isSelected} className={cn(dropdownMenuItemVariants({ variant: 'default' }))} - onClick={e => { + onClick={(e) => { e.stopPropagation(); onSelect(option.id); }} > {isSelected && }
); }, - [onSelect, selectedIds], + [onSelect, selectedIds] ); if (!field || !typeOption) return null; diff --git a/src/components/database/components/property/select/Option.tsx b/src/components/database/components/property/select/Option.tsx index b27c50c1..ddb32b3c 100644 --- a/src/components/database/components/property/select/Option.tsx +++ b/src/components/database/components/property/select/Option.tsx @@ -1,6 +1,6 @@ import { SelectOption, useReadOnly } from '@/application/database-yjs'; import { Tag } from '@/components/_shared/tag'; -import { SelectOptionColorMap } from '@/components/database/components/cell/cell.const'; +import { SelectOptionColorMap, SelectOptionFgColorMap } from '@/components/database/components/cell/cell.const'; import OptionMenu from '@/components/database/components/property/select/OptionMenu'; import { useOptionDragContext } from '@/components/database/components/property/select/useOptionDragContext'; import { Button } from '@/components/ui/button'; @@ -31,7 +31,14 @@ export type ItemState = const idleState: ItemState = { type: DragState.IDLE }; const draggingState: ItemState = { type: DragState.DRAGGING }; -function Option ({ option, fieldId, isSelected = false, onSelect, isHovered, onHover }: { +function Option({ + option, + fieldId, + isSelected = false, + onSelect, + isHovered, + onHover, +}: { option: SelectOption; fieldId: string; isSelected?: boolean; @@ -42,10 +49,7 @@ function Option ({ option, fieldId, isSelected = false, onSelect, isHovered, onH const id = option.id; const dragHandleRef = useRef(null); const innerRef = useRef(null); - const { - registerOption, - instanceId, - } = useOptionDragContext(); + const { registerOption, instanceId } = useOptionDragContext(); const readOnly = useReadOnly(); const [state, setState] = useState(idleState); @@ -66,31 +70,28 @@ function Option ({ option, fieldId, isSelected = false, onSelect, isHovered, onH element, dragHandle, getInitialData: () => data, - onGenerateDragPreview () { + onGenerateDragPreview() { setState({ type: DragState.PREVIEW }); }, - onDragStart () { + onDragStart() { setState(draggingState); }, - onDrop () { + onDrop() { setState(idleState); }, }), dropTargetForElements({ element, - canDrop: ({ source }) => - source.data && - source.data.instanceId === instanceId && - source.data.id !== id, + canDrop: ({ source }) => source.data && source.data.instanceId === instanceId && source.data.id !== id, getIsSticky: () => true, - getData ({ input }) { + getData({ input }) { return attachClosestEdge(data, { element, input, allowedEdges: ['top', 'bottom'], }); }, - onDrag ({ self }) { + onDrag({ self }) { const closestEdge = extractClosestEdge(self.data); setState((current) => { @@ -101,13 +102,13 @@ function Option ({ option, fieldId, isSelected = false, onSelect, isHovered, onH return { type: DragState.IS_OVER, closestEdge }; }); }, - onDragLeave () { + onDragLeave() { setState(idleState); }, - onDrop () { + onDrop() { setState(idleState); }, - }), + }) ); }, [readOnly, instanceId, registerOption, id]); @@ -118,7 +119,7 @@ function Option ({ option, fieldId, isSelected = false, onSelect, isHovered, onH
{ + onClick={(e) => { e.preventDefault(); if (onSelect) { onSelect(option.id); @@ -135,66 +136,53 @@ function Option ({ option, fieldId, isSelected = false, onSelect, isHovered, onH 'relative', state.type === DragState.DRAGGING && 'opacity-40', open && 'bg-fill-content-hover', - 'relative flex cursor-pointer items-center gap-[10px] rounded-300 px-2 py-1 min-h-[32px]', - 'text-sm text-text-primary outline-hidden select-none', + 'relative flex min-h-[32px] cursor-pointer items-center gap-[10px] rounded-300 px-2 py-1', + 'outline-hidden select-none text-sm text-text-primary', 'hover:bg-fill-content-hover hover:text-text-primary', - isHovered && 'bg-fill-content-hover text-text-primary', + isHovered && 'bg-fill-content-hover text-text-primary' )} >
{ + onMouseDown={(e) => { e.stopPropagation(); }} ref={dragHandleRef} > - +
-
- {isSelected && - - - - } +
+ {isSelected && ( + + + + )}
- {state.type === DragState.IS_OVER && state.closestEdge && ( - - )} - {open && } - + {state.type === DragState.IS_OVER && state.closestEdge && } + {}
- ); } -export default Option; \ No newline at end of file +export default Option; diff --git a/src/components/database/components/property/select/OptionMenu.tsx b/src/components/database/components/property/select/OptionMenu.tsx index f59f3ccf..5f99df46 100644 --- a/src/components/database/components/property/select/OptionMenu.tsx +++ b/src/components/database/components/property/select/OptionMenu.tsx @@ -1,69 +1,180 @@ -import React, { useMemo } from 'react'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { SelectOption, SelectOptionColor } from '@/application/database-yjs'; +import { SelectOption, SelectOptionColor, useDatabaseContext } from '@/application/database-yjs'; import { useDeleteSelectOption, useUpdateSelectOption } from '@/application/database-yjs/dispatch'; +import { SubscriptionPlan } from '@/application/types'; import { ReactComponent as DeleteIcon } from '@/assets/icons/delete.svg'; +import { ColorTile } from '@/components/_shared/color-picker'; import { SelectOptionColorMap } from '@/components/database/components/cell/cell.const'; import { - DropdownMenu, DropdownMenuGroup, DropdownMenuItem, - DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItemTick, + DropdownMenu, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, + DropdownMenuContent, } from '@/components/ui/dropdown-menu'; import { Input } from '@/components/ui/input'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; -function OptionMenu ({ open, onOpenChange, option, fieldId }: { +function OptionMenu({ + open, + onOpenChange, + option, + fieldId, +}: { open: boolean; onOpenChange: (open: boolean) => void; option: SelectOption; - fieldId: string + fieldId: string; }) { + const { getSubscriptions } = useDatabaseContext(); const { t } = useTranslation(); const onDelete = useDeleteSelectOption(fieldId); const onUpdate = useUpdateSelectOption(fieldId); - const colors = useMemo(() => { - return [{ - label: t('grid.selectOption.purpleColor'), - value: SelectOptionColor.Purple, - color: SelectOptionColorMap[SelectOptionColor.Purple], - }, { - label: t('grid.selectOption.pinkColor'), - value: SelectOptionColor.Pink, - color: SelectOptionColorMap[SelectOptionColor.Pink], - }, { - label: t('grid.selectOption.lightPinkColor'), - value: SelectOptionColor.LightPink, - color: SelectOptionColorMap[SelectOptionColor.LightPink], - }, { - label: t('grid.selectOption.orangeColor'), - value: SelectOptionColor.Orange, - color: SelectOptionColorMap[SelectOptionColor.Orange], - }, { - label: t('grid.selectOption.yellowColor'), - value: SelectOptionColor.Yellow, - color: SelectOptionColorMap[SelectOptionColor.Yellow], - }, { - label: t('grid.selectOption.limeColor'), - value: SelectOptionColor.Lime, - color: SelectOptionColorMap[SelectOptionColor.Lime], - }, { - label: t('grid.selectOption.greenColor'), - value: SelectOptionColor.Green, - color: SelectOptionColorMap[SelectOptionColor.Green], - }, { - label: t('grid.selectOption.aquaColor'), - value: SelectOptionColor.Aqua, - color: SelectOptionColorMap[SelectOptionColor.Aqua], - }, { - label: t('grid.selectOption.blueColor'), - value: SelectOptionColor.Blue, - color: SelectOptionColorMap[SelectOptionColor.Blue], - }]; - }, [t]); + const [activeSubscriptionPlan, setActiveSubscriptionPlan] = useState(null); + const isPro = activeSubscriptionPlan === SubscriptionPlan.Pro; - const [value, setValue] = React.useState(option.name); - const [editing, setEditing] = React.useState(false); + const loadSubscription = useCallback(async () => { + try { + const subscriptions = await getSubscriptions?.(); + + if (!subscriptions || subscriptions.length === 0) { + setActiveSubscriptionPlan(SubscriptionPlan.Free); + return; + } + + const subscription = subscriptions[0]; + + setActiveSubscriptionPlan(subscription?.plan || SubscriptionPlan.Free); + } catch (e) { + setActiveSubscriptionPlan(SubscriptionPlan.Free); + console.error(e); + } + }, [getSubscriptions]); + + useEffect(() => { + void loadSubscription(); + }, [loadSubscription]); + + const colors = useMemo(() => { + const baseColors = [ + { + label: t('colors.mauve'), + value: SelectOptionColor.OptionColor1, + color: SelectOptionColorMap[SelectOptionColor.OptionColor1], + }, + { + label: t('colors.lilac'), + value: SelectOptionColor.OptionColor2, + color: SelectOptionColorMap[SelectOptionColor.OptionColor2], + }, + { + label: t('colors.camellia'), + value: SelectOptionColor.OptionColor3, + color: SelectOptionColorMap[SelectOptionColor.OptionColor3], + }, + { + label: t('colors.papaya'), + value: SelectOptionColor.OptionColor4, + color: SelectOptionColorMap[SelectOptionColor.OptionColor4], + }, + { + label: t('colors.mango'), + value: SelectOptionColor.OptionColor5, + color: SelectOptionColorMap[SelectOptionColor.OptionColor5], + }, + { + label: t('colors.olive'), + value: SelectOptionColor.OptionColor6, + color: SelectOptionColorMap[SelectOptionColor.OptionColor6], + }, + { + label: t('colors.grass'), + value: SelectOptionColor.OptionColor7, + color: SelectOptionColorMap[SelectOptionColor.OptionColor7], + }, + { + label: t('colors.jade'), + value: SelectOptionColor.OptionColor8, + color: SelectOptionColorMap[SelectOptionColor.OptionColor8], + }, + { + label: t('colors.azure'), + value: SelectOptionColor.OptionColor9, + color: SelectOptionColorMap[SelectOptionColor.OptionColor9], + }, + { + label: t('colors.iron'), + value: SelectOptionColor.OptionColor10, + color: SelectOptionColorMap[SelectOptionColor.OptionColor10], + }, + ]; + + if (isPro) { + baseColors.push( + { + label: t('colors.mauveEmphasized'), + value: SelectOptionColor.OptionColor11, + color: SelectOptionColorMap[SelectOptionColor.OptionColor11], + }, + { + label: t('colors.lavenderEmphasized'), + value: SelectOptionColor.OptionColor12, + color: SelectOptionColorMap[SelectOptionColor.OptionColor12], + }, + { + label: t('colors.camelliaEmphasized'), + value: SelectOptionColor.OptionColor13, + color: SelectOptionColorMap[SelectOptionColor.OptionColor13], + }, + { + label: t('colors.papayaEmphasized'), + value: SelectOptionColor.OptionColor14, + color: SelectOptionColorMap[SelectOptionColor.OptionColor14], + }, + { + label: t('colors.mangoEmphasized'), + value: SelectOptionColor.OptionColor15, + color: SelectOptionColorMap[SelectOptionColor.OptionColor15], + }, + { + label: t('colors.oliveEmphasized'), + value: SelectOptionColor.OptionColor16, + color: SelectOptionColorMap[SelectOptionColor.OptionColor16], + }, + { + label: t('colors.grassEmphasized'), + value: SelectOptionColor.OptionColor17, + color: SelectOptionColorMap[SelectOptionColor.OptionColor17], + }, + { + label: t('colors.jadeEmphasized'), + value: SelectOptionColor.OptionColor18, + color: SelectOptionColorMap[SelectOptionColor.OptionColor18], + }, + { + label: t('colors.azureEmphasized'), + value: SelectOptionColor.OptionColor19, + color: SelectOptionColorMap[SelectOptionColor.OptionColor19], + }, + { + label: t('colors.ironEmphasized'), + value: SelectOptionColor.OptionColor20, + color: SelectOptionColorMap[SelectOptionColor.OptionColor20], + } + ); + } + + return baseColors; + }, [isPro, t]); + + const [value, setValue] = useState(option.name); + const [editing, setEditing] = useState(false); const updateName = () => { if (value === option.name) { @@ -76,42 +187,43 @@ function OptionMenu ({ open, onOpenChange, option, fieldId }: { }); }; - const inputRef = React.useRef(null); + const inputRef = useRef(null); + + useEffect(() => { + if (open) { + setTimeout(() => { + const el = inputRef.current; + + if (el) { + el.focus(); + el.setSelectionRange(0, el.value.length); + } + }, 100); + } + }, [open]); return ( - + -
+
{ + onClick={(e) => { e.stopPropagation(); }} - side={'bottom'} + side={'right'} align={'start'} + className='!min-w-[200px] max-w-[200px] p-0' > - + { + onMouseDown={(e) => { e.stopPropagation(); }} - ref={el => { - if (el) { - setTimeout(() => { - el.focus(); - if (!inputRef.current) { - el.setSelectionRange(0, el.value.length); - inputRef.current = el; - } - }, 100); - } - - }} + className='w-full' + ref={inputRef} value={value} - onKeyDown={e => { + onKeyDown={(e) => { e.stopPropagation(); if (e.key === 'Enter') { updateName(); @@ -126,68 +238,60 @@ function OptionMenu ({ open, onOpenChange, option, fieldId }: { onFocus={() => { setEditing(true); }} - className={'w-full mb-2'} - onChange={e => setValue(e.target.value)} + onChange={(e) => setValue(e.target.value)} /> - { - onDelete(option.id); - }} - {...(editing ? { - onPointerMove: e => e.preventDefault(), - onPointerEnter: e => e.preventDefault(), - onPointerLeave: e => e.preventDefault(), - } : undefined)} - > - - {t('grid.selectOption.deleteTag')} - - - - {t('grid.selectOption.colorPanelTitle')} - - {colors.map((color) => ( - e.preventDefault(), - onPointerEnter: e => e.preventDefault(), - onPointerLeave: e => e.preventDefault(), - } : undefined)} - key={color.value} - onSelect={(e) => { - if (color.value === option.color) { - e.preventDefault(); - return; - } + {t('grid.selectOption.colorPanelTitle')} +
+ {colors.map((color) => ( + + {color.label} + + { + if (color.value === option.color) { + e.preventDefault(); + return; + } - onUpdate(option.id, { - ...option, - color: color.value, - }); - }} - > -
- -
- {color.label} - {option.color === color.value && } - - ))} + onUpdate(option.id, { + ...option, + color: color.value, + }); + }} + /> + + + ))} +
+ + + + { + onDelete(option.id); + }} + className='mx-1.5 mb-1.5' + {...(editing + ? { + onPointerMove: (e) => e.preventDefault(), + onPointerEnter: (e) => e.preventDefault(), + onPointerLeave: (e) => e.preventDefault(), + } + : undefined)} + > + + {t('grid.selectOption.deleteTag')} + ); } -export default OptionMenu; \ No newline at end of file +export default OptionMenu; diff --git a/src/styles/variables/semantic.dark.css b/src/styles/variables/semantic.dark.css index 083fa30e..90ba4315 100644 --- a/src/styles/variables/semantic.dark.css +++ b/src/styles/variables/semantic.dark.css @@ -3,7 +3,7 @@ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * * Generated from: semantic.dark.json - * Generated time: 2025-07-30T06:18:37.482Z + * Generated time: 2025-08-19T02:49:46.811Z * * To modify these values, edit the source JSON files and run the token conversion script: * node scripts/system-token/convert-tokens.cjs @@ -81,6 +81,7 @@ --fill-theme-thick-hover: #0092d6; --fill-theme-select: #00b5ff26; --fill-text-select: #00b5ff33; + --fill-button-active: #00b5ff1a; --fill-info-light: #00508f; --fill-info-light-hover: #0065a9; --fill-info-thick: #00b5ff; @@ -117,83 +118,112 @@ --surface-container-layer-02: #3d404f; --surface-container-layer-03: #54596e; --background-primary: #21232a; + --palette-text-color-1: #edadad; + --palette-text-color-2: #f0bda3; + --palette-text-color-3: #f2cb99; + --palette-text-color-4: #f5d68e; + --palette-text-color-5: #e0bb00; + --palette-text-color-6: #adb204; + --palette-text-color-7: #cfdb91; + --palette-text-color-8: #bfd998; + --palette-text-color-9: #a8d6a1; + --palette-text-color-10: #90d1b5; + --palette-text-color-11: #83ccd4; + --palette-text-color-12: #88c0eb; + --palette-text-color-13: #9ab6ed; + --palette-text-color-14: #aeaef5; + --palette-text-color-15: #c1aaf0; + --palette-text-color-16: #d3a9e8; + --palette-text-color-17: #dea4dc; + --palette-text-color-18: #e5a3c0; + --palette-text-color-19: #b8b8b8; + --palette-text-color-20: #b0b5bf; + --palette-bg-color-1: #9e3b3b; + --palette-bg-color-2: #a54b24; + --palette-bg-color-3: #9a570c; + --palette-bg-color-4: #906000; + --palette-bg-color-5: #866800; + --palette-bg-color-6: #627300; + --palette-bg-color-7: #637000; + --palette-bg-color-8: #456514; + --palette-bg-color-9: #2b6c20; + --palette-bg-color-10: #127b47; + --palette-bg-color-11: #00727e; + --palette-bg-color-12: #0c5b9e; + --palette-bg-color-13: #2a51a0; + --palette-bg-color-14: #4545a6; + --palette-bg-color-15: #6435a8; + --palette-bg-color-16: #772f96; + --palette-bg-color-17: #8a3485; + --palette-bg-color-18: #6e2343; + --palette-bg-color-19: #585858; + --palette-bg-color-20: #4c5966; --badge-color-1-light-1: #edadad; --badge-color-1-light-2: #cc4e4e; --badge-color-1-light-3: #9e3b3b; --badge-color-1-thick-1: #fcf2f2; --badge-color-1-thick-2: #fae3e3; --badge-color-1-thick-3: #fad9d9; - --badge-color-1-thick-4: #9e3b3b; --badge-color-2-light-1: #f0bda3; --badge-color-2-light-2: #d67240; --badge-color-2-light-3: #a54b24; --badge-color-2-thick-1: #fcf4f0; --badge-color-2-thick-2: #fae8de; --badge-color-2-thick-3: #fadfd2; - --badge-color-2-thick-4: #a54b24; --badge-color-3-light-1: #f2cb99; --badge-color-3-light-2: #db8f2c; --badge-color-3-light-3: #9a570c; --badge-color-3-thick-1: #fff7ed; --badge-color-3-thick-2: #fcedd9; --badge-color-3-thick-3: #fae5ca; - --badge-color-3-thick-4: #9a570c; --badge-color-4-light-1: #f5d68e; --badge-color-4-light-2: #e0a416; --badge-color-4-light-3: #906000; --badge-color-4-thick-1: #fff9ec; --badge-color-4-thick-2: #fcf1d7; --badge-color-4-thick-3: #fae9c3; - --badge-color-4-thick-4: #906000; --badge-color-5-light-1: #f5e282; --badge-color-5-light-2: #e0bb00; --badge-color-5-light-3: #866800; --badge-color-5-thick-1: #fffbe8; --badge-color-5-thick-2: #fcf5cf; --badge-color-5-thick-3: #faefb9; - --badge-color-5-thick-4: #866800; --badge-color-6-light-1: #dbde83; --badge-color-6-light-2: #adb204; --badge-color-6-light-3: #627300; --badge-color-6-thick-1: #f9fae6; --badge-color-6-thick-2: #f6f7d0; --badge-color-6-thick-3: #f0f2b3; - --badge-color-6-thick-4: #627300; --badge-color-7-light-1: #cfdb91; --badge-color-7-light-2: #92a822; --badge-color-7-light-3: #637000; --badge-color-7-thick-1: #f6f9e6; --badge-color-7-thick-2: #eef5ce; --badge-color-7-thick-3: #e7f0bb; - --badge-color-7-thick-4: #637000; --badge-color-8-light-1: #bfd998; --badge-color-8-light-2: #75a828; --badge-color-8-light-3: #456514; --badge-color-8-thick-1: #f4faeb; --badge-color-8-thick-2: #e9f5d7; --badge-color-8-thick-3: #def0c5; - --badge-color-8-thick-4: #456514; --badge-color-9-light-1: #a8d6a1; --badge-color-9-light-2: #49a33b; --badge-color-9-light-3: #2b6c20; --badge-color-9-thick-1: #f1faf0; --badge-color-9-thick-2: #e2f5df; --badge-color-9-thick-3: #d7f0d3; - --badge-color-9-thick-4: #2b6c20; --badge-color-10-light-1: #90d1b5; --badge-color-10-light-2: #1c9963; --badge-color-10-light-3: #127b47; --badge-color-10-thick-1: #f0faf6; --badge-color-10-thick-2: #dff5eb; --badge-color-10-thick-3: #cef0e1; - --badge-color-10-thick-4: #127b47; --badge-color-11-light-1: #83ccd4; --badge-color-11-light-2: #008e9e; --badge-color-11-light-3: #00727e; --badge-color-11-thick-1: #f0f9fa; --badge-color-11-thick-2: #dff3f5; --badge-color-11-thick-3: #ccecf0; - --badge-color-11-thick-4: #00727e; --badge-color-12-light-1: #88c0eb; --badge-color-12-light-2: #0877cc; --badge-color-12-light-3: #0c5b9e; @@ -248,46 +278,60 @@ --badge-color-20-thick-1: #f2f4f7; --badge-color-20-thick-2: #e6e9f0; --badge-color-20-thick-3: #dadee5; - --palette-text-color-1: #edadad; - --palette-text-color-2: #f0bda3; - --palette-text-color-3: #f2cb99; - --palette-text-color-4: #f5d68e; - --palette-text-color-5: #e0bb00; - --palette-text-color-6: #adb204; - --palette-text-color-7: #cfdb91; - --palette-text-color-8: #bfd998; - --palette-text-color-9: #a8d6a1; - --palette-text-color-10: #90d1b5; - --palette-text-color-11: #83ccd4; - --palette-text-color-12: #88c0eb; - --palette-text-color-13: #9ab6ed; - --palette-text-color-14: #aeaef5; - --palette-text-color-15: #c1aaf0; - --palette-text-color-16: #d3a9e8; - --palette-text-color-17: #dea4dc; - --palette-text-color-18: #e5a3c0; - --palette-text-color-19: #b8b8b8; - --palette-text-color-20: #b0b5bf; - --palette-bg-color-1: #9e3b3b; - --palette-bg-color-2: #a54b24; - --palette-bg-color-3: #9a570c; - --palette-bg-color-4: #906000; - --palette-bg-color-5: #866800; - --palette-bg-color-6: #627300; - --palette-bg-color-7: #637000; - --palette-bg-color-8: #456514; - --palette-bg-color-9: #2b6c20; - --palette-bg-color-10: #127b47; - --palette-bg-color-11: #00727e; - --palette-bg-color-12: #0c5b9e; - --palette-bg-color-13: #2a51a0; - --palette-bg-color-14: #4545a6; - --palette-bg-color-15: #6435a8; - --palette-bg-color-16: #772f96; - --palette-bg-color-17: #8a3485; - --palette-bg-color-18: #6e2343; - --palette-bg-color-19: #585858; - --palette-bg-color-20: #4c5966; + --tag-fill-01-light: #4545a6; + --tag-fill-01-thick: #e6e6fa; + --tag-text-01-light: #ffffff; + --tag-text-01-thick: #4545a6; + --tag-fill-02-light: #772f96; + --tag-fill-02-thick: #f0e1f7; + --tag-text-02-light: #ffffff; + --tag-text-02-thick: #772f96; + --tag-fill-03-light: #6e2343; + --tag-fill-03-thick: #f7e1eb; + --tag-text-03-light: #ffffff; + --tag-text-03-thick: #6e2343; + --tag-fill-04-light: #a54b24; + --tag-fill-04-thick: #fae8de; + --tag-text-04-light: #ffffff; + --tag-text-04-thick: #a54b24; + --tag-fill-05-light: #906000; + --tag-fill-05-thick: #fcf1d7; + --tag-text-05-light: #ffffff; + --tag-text-05-thick: #906000; + --tag-fill-06-light: #627300; + --tag-fill-06-thick: #f6f7d0; + --tag-text-06-light: #ffffff; + --tag-text-06-thick: #627300; + --tag-fill-07-light: #456514; + --tag-fill-07-thick: #e9f5d7; + --tag-text-07-light: #ffffff; + --tag-text-07-thick: #456514; + --tag-fill-08-light: #127b47; + --tag-fill-08-thick: #dff5eb; + --tag-text-08-light: #ffffff; + --tag-text-08-thick: #127b47; + --tag-fill-09-light: #0c5b9e; + --tag-fill-09-thick: #e1eef7; + --tag-text-09-light: #ffffff; + --tag-text-09-thick: #0c5b9e; + --tag-fill-10-light: #4c5966; + --tag-fill-10-thick: #e6e9f0; + --tag-text-10-light: #ffffff; + --tag-text-10-thick: #4c5966; + --comment-fill-01: #ffce0026; + --comment-fill-01-select: #ffce0040; + --comment-fill-02: #ffce0040; + --comment-fill-02-select: #ffce0059; + --comment-fill-03: #ffce0059; + --comment-fill-03-select: #ffce0073; + --comment-border-01: #ffce004d; + --comment-border-01-select: #ffce0099; + --comment-border-02: #ffce0099; + --comment-border-02-select: #ffce00e5; + --comment-border-03: #ffce00e5; + --comment-border-03-select: #ffce00; + --comment-icon: #ffdf1a; + --comment-highlight: #0877cc1a; --brand-skyline: #00b5ff; --brand-aqua: #00c8ff; --brand-violet: #9327ff; diff --git a/src/styles/variables/semantic.light.css b/src/styles/variables/semantic.light.css index 935ebf34..b0abaf96 100644 --- a/src/styles/variables/semantic.light.css +++ b/src/styles/variables/semantic.light.css @@ -3,7 +3,7 @@ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * * Generated from: semantic.light.json - * Generated time: 2025-07-30T06:18:37.480Z + * Generated time: 2025-08-19T02:49:46.804Z * * To modify these values, edit the source JSON files and run the token conversion script: * node scripts/system-token/convert-tokens.cjs @@ -81,6 +81,7 @@ --fill-theme-thick-hover: #0092d6; --fill-theme-select: #00b5ff26; --fill-text-select: #00b5ff33; + --fill-button-active: #00b5ff1a; --fill-info-light: #e3f6ff; --fill-info-light-hover: #a9e2ff; --fill-info-thick: #00b5ff; @@ -117,83 +118,112 @@ --surface-container-layer-02: #e4e8f5; --surface-container-layer-03: #ced3e6; --background-primary: #ffffff; + --palette-text-color-1: #cc4e4e; + --palette-text-color-2: #d67240; + --palette-text-color-3: #db8f2c; + --palette-text-color-4: #e0a416; + --palette-text-color-5: #e0bb00; + --palette-text-color-6: #adb204; + --palette-text-color-7: #92a822; + --palette-text-color-8: #75a828; + --palette-text-color-9: #49a33b; + --palette-text-color-10: #1c9963; + --palette-text-color-11: #008e9e; + --palette-text-color-12: #0877cc; + --palette-text-color-13: #3267d1; + --palette-text-color-14: #5555e0; + --palette-text-color-15: #8153db; + --palette-text-color-16: #9e4cc7; + --palette-text-color-17: #b240af; + --palette-text-color-18: #c24279; + --palette-text-color-19: #6e6e6e; + --palette-text-color-20: #666f80; + --palette-bg-color-1: #fad9d9; + --palette-bg-color-2: #fadfd2; + --palette-bg-color-3: #fae5ca; + --palette-bg-color-4: #fae9c3; + --palette-bg-color-5: #faefb9; + --palette-bg-color-6: #f0f2b3; + --palette-bg-color-7: #e7f0bb; + --palette-bg-color-8: #def0c5; + --palette-bg-color-9: #d7f0d3; + --palette-bg-color-10: #cef0e1; + --palette-bg-color-11: #ccecf0; + --palette-bg-color-12: #d3e6f5; + --palette-bg-color-13: #d7e2f7; + --palette-bg-color-14: #dcdcf7; + --palette-bg-color-15: #e4daf7; + --palette-bg-color-16: #edd7f7; + --palette-bg-color-17: #f5d7f4; + --palette-bg-color-18: #f7d7e5; + --palette-bg-color-19: #dedede; + --palette-bg-color-20: #dadee5; --badge-color-1-light-1: #fcf2f2; --badge-color-1-light-2: #fae3e3; --badge-color-1-light-3: #fad9d9; --badge-color-1-thick-1: #edadad; --badge-color-1-thick-2: #cc4e4e; --badge-color-1-thick-3: #9e3b3b; - --badge-color-1-thick-4: #100505; --badge-color-2-light-1: #fcf4f0; --badge-color-2-light-2: #fae8de; --badge-color-2-light-3: #fadfd2; --badge-color-2-thick-1: #f0bda3; --badge-color-2-thick-2: #d67240; --badge-color-2-thick-3: #a54b24; - --badge-color-2-thick-4: #33221b; --badge-color-3-light-1: #fff7ed; --badge-color-3-light-2: #fcedd9; --badge-color-3-light-3: #fae5ca; --badge-color-3-thick-1: #f2cb99; --badge-color-3-thick-2: #db8f2c; --badge-color-3-thick-3: #9a570c; - --badge-color-3-thick-4: #44341e; --badge-color-4-light-1: #fff9ec; --badge-color-4-light-2: #fcf1d7; --badge-color-4-light-3: #fae9c3; --badge-color-4-thick-1: #f5d68e; --badge-color-4-thick-2: #e0a416; --badge-color-4-thick-3: #906000; - --badge-color-4-thick-4: #4f4020; --badge-color-5-light-1: #fffbe8; --badge-color-5-light-2: #fcf5cf; --badge-color-5-light-3: #faefb9; --badge-color-5-thick-1: #f5e282; --badge-color-5-thick-2: #e0bb00; --badge-color-5-thick-3: #866800; - --badge-color-5-thick-4: #574d1c; --badge-color-6-light-1: #f9fae6; --badge-color-6-light-2: #f6f7d0; --badge-color-6-light-3: #f0f2b3; --badge-color-6-thick-1: #dbde83; --badge-color-6-thick-2: #adb204; --badge-color-6-thick-3: #627300; - --badge-color-6-thick-4: #404207; --badge-color-7-light-1: #f6f9e6; --badge-color-7-light-2: #eef5ce; --badge-color-7-light-3: #e7f0bb; --badge-color-7-thick-1: #cfdb91; --badge-color-7-thick-2: #92a822; --badge-color-7-thick-3: #637000; - --badge-color-7-thick-4: #313908; --badge-color-8-light-1: #f4faeb; --badge-color-8-light-2: #e9f5d7; --badge-color-8-light-3: #def0c5; --badge-color-8-thick-1: #bfd998; --badge-color-8-thick-2: #75a828; --badge-color-8-thick-3: #456514; - --badge-color-8-thick-4: #273611; --badge-color-9-light-1: #f1faf0; --badge-color-9-light-2: #e2f5df; --badge-color-9-light-3: #d7f0d3; --badge-color-9-thick-1: #a8d6a1; --badge-color-9-thick-2: #49a33b; --badge-color-9-thick-3: #2b6c20; - --badge-color-9-thick-4: #1a2e17; --badge-color-10-light-1: #f0faf6; --badge-color-10-light-2: #dff5eb; --badge-color-10-light-3: #cef0e1; --badge-color-10-thick-1: #90d1b5; --badge-color-10-thick-2: #1c9963; --badge-color-10-thick-3: #127b47; - --badge-color-10-thick-4: #0f231a; --badge-color-11-light-1: #f0f9fa; --badge-color-11-light-2: #dff3f5; --badge-color-11-light-3: #ccecf0; --badge-color-11-thick-1: #83ccd4; --badge-color-11-thick-2: #008e9e; --badge-color-11-thick-3: #00727e; - --badge-color-11-thick-4: #0d1a1c; --badge-color-12-light-1: #f0f6fa; --badge-color-12-light-2: #e1eef7; --badge-color-12-light-3: #d3e6f5; @@ -248,46 +278,60 @@ --badge-color-20-thick-1: #b0b5bf; --badge-color-20-thick-2: #666f80; --badge-color-20-thick-3: #4c5966; - --palette-text-color-1: #cc4e4e; - --palette-text-color-2: #d67240; - --palette-text-color-3: #db8f2c; - --palette-text-color-4: #e0a416; - --palette-text-color-5: #e0bb00; - --palette-text-color-6: #adb204; - --palette-text-color-7: #92a822; - --palette-text-color-8: #75a828; - --palette-text-color-9: #49a33b; - --palette-text-color-10: #1c9963; - --palette-text-color-11: #008e9e; - --palette-text-color-12: #0877cc; - --palette-text-color-13: #3267d1; - --palette-text-color-14: #5555e0; - --palette-text-color-15: #8153db; - --palette-text-color-16: #9e4cc7; - --palette-text-color-17: #b240af; - --palette-text-color-18: #c24279; - --palette-text-color-19: #6e6e6e; - --palette-text-color-20: #666f80; - --palette-bg-color-1: #fad9d9; - --palette-bg-color-2: #fadfd2; - --palette-bg-color-3: #fae5ca; - --palette-bg-color-4: #fae9c3; - --palette-bg-color-5: #faefb9; - --palette-bg-color-6: #f0f2b3; - --palette-bg-color-7: #e7f0bb; - --palette-bg-color-8: #def0c5; - --palette-bg-color-9: #d7f0d3; - --palette-bg-color-10: #cef0e1; - --palette-bg-color-11: #ccecf0; - --palette-bg-color-12: #d3e6f5; - --palette-bg-color-13: #d7e2f7; - --palette-bg-color-14: #dcdcf7; - --palette-bg-color-15: #e4daf7; - --palette-bg-color-16: #edd7f7; - --palette-bg-color-17: #f5d7f4; - --palette-bg-color-18: #f7d7e5; - --palette-bg-color-19: #dedede; - --palette-bg-color-20: #dadee5; + --tag-fill-01-light: #e6e6fa; + --tag-fill-01-thick: #4545a6; + --tag-text-01-light: #4545a6; + --tag-text-01-thick: #ffffff; + --tag-fill-02-light: #f0e1f7; + --tag-fill-02-thick: #772f96; + --tag-text-02-light: #772f96; + --tag-text-02-thick: #ffffff; + --tag-fill-03-light: #f7e1eb; + --tag-fill-03-thick: #6e2343; + --tag-text-03-light: #6e2343; + --tag-text-03-thick: #ffffff; + --tag-fill-04-light: #fae8de; + --tag-fill-04-thick: #a54b24; + --tag-text-04-light: #a54b24; + --tag-text-04-thick: #ffffff; + --tag-fill-05-light: #fcf1d7; + --tag-fill-05-thick: #906000; + --tag-text-05-light: #906000; + --tag-text-05-thick: #ffffff; + --tag-fill-06-light: #f6f7d0; + --tag-fill-06-thick: #627300; + --tag-text-06-light: #627300; + --tag-text-06-thick: #ffffff; + --tag-fill-07-light: #e9f5d7; + --tag-fill-07-thick: #456514; + --tag-text-07-light: #456514; + --tag-text-07-thick: #ffffff; + --tag-fill-08-light: #dff5eb; + --tag-fill-08-thick: #127b47; + --tag-text-08-light: #127b47; + --tag-text-08-thick: #ffffff; + --tag-fill-09-light: #e1eef7; + --tag-fill-09-thick: #0c5b9e; + --tag-text-09-light: #0c5b9e; + --tag-text-09-thick: #ffffff; + --tag-fill-10-light: #e6e9f0; + --tag-fill-10-thick: #4c5966; + --tag-text-10-light: #4c5966; + --tag-text-10-thick: #ffffff; + --comment-fill-01: #ffce0026; + --comment-fill-01-select: #ffce0040; + --comment-fill-02: #ffce0040; + --comment-fill-02-select: #ffce0059; + --comment-fill-03: #ffce0059; + --comment-fill-03-select: #ffce0073; + --comment-border-01: #ffce004d; + --comment-border-01-select: #ffce0099; + --comment-border-02: #ffce0099; + --comment-border-02-select: #ffce00e5; + --comment-border-03: #ffce00e5; + --comment-border-03-select: #ffce00; + --comment-icon: #b38a00; + --comment-highlight: #0877cc1a; --brand-skyline: #00b5ff; --brand-aqua: #00c8ff; --brand-violet: #9327ff; diff --git a/tailwind/new-colors.cjs b/tailwind/new-colors.cjs index d08c1d2f..0ebcf647 100644 --- a/tailwind/new-colors.cjs +++ b/tailwind/new-colors.cjs @@ -3,7 +3,7 @@ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * * This file is auto-generated by convert-tokens.cjs script - * Generation time: 2025-07-30T06:18:37.483Z + * Generation time: 2025-08-19T02:49:46.812Z * * To modify these colors, edit the source JSON files and run the token conversion script: * node scripts/system-token/convert-tokens.cjs @@ -98,6 +98,7 @@ module.exports = { "theme-thick-hover": "var(--fill-theme-thick-hover)", "theme-select": "var(--fill-theme-select)", "text-select": "var(--fill-text-select)", + "button-active": "var(--fill-button-active)", "info-light": "var(--fill-info-light)", "info-light-hover": "var(--fill-info-light-hover)", "info-thick": "var(--fill-info-thick)", @@ -139,6 +140,48 @@ module.exports = { "background": { "primary": "var(--background-primary)" }, + "palette": { + "text-color-1": "var(--palette-text-color-1)", + "text-color-2": "var(--palette-text-color-2)", + "text-color-3": "var(--palette-text-color-3)", + "text-color-4": "var(--palette-text-color-4)", + "text-color-5": "var(--palette-text-color-5)", + "text-color-6": "var(--palette-text-color-6)", + "text-color-7": "var(--palette-text-color-7)", + "text-color-8": "var(--palette-text-color-8)", + "text-color-9": "var(--palette-text-color-9)", + "text-color-10": "var(--palette-text-color-10)", + "text-color-11": "var(--palette-text-color-11)", + "text-color-12": "var(--palette-text-color-12)", + "text-color-13": "var(--palette-text-color-13)", + "text-color-14": "var(--palette-text-color-14)", + "text-color-15": "var(--palette-text-color-15)", + "text-color-16": "var(--palette-text-color-16)", + "text-color-17": "var(--palette-text-color-17)", + "text-color-18": "var(--palette-text-color-18)", + "text-color-19": "var(--palette-text-color-19)", + "text-color-20": "var(--palette-text-color-20)", + "bg-color-1": "var(--palette-bg-color-1)", + "bg-color-2": "var(--palette-bg-color-2)", + "bg-color-3": "var(--palette-bg-color-3)", + "bg-color-4": "var(--palette-bg-color-4)", + "bg-color-5": "var(--palette-bg-color-5)", + "bg-color-6": "var(--palette-bg-color-6)", + "bg-color-7": "var(--palette-bg-color-7)", + "bg-color-8": "var(--palette-bg-color-8)", + "bg-color-9": "var(--palette-bg-color-9)", + "bg-color-10": "var(--palette-bg-color-10)", + "bg-color-11": "var(--palette-bg-color-11)", + "bg-color-12": "var(--palette-bg-color-12)", + "bg-color-13": "var(--palette-bg-color-13)", + "bg-color-14": "var(--palette-bg-color-14)", + "bg-color-15": "var(--palette-bg-color-15)", + "bg-color-16": "var(--palette-bg-color-16)", + "bg-color-17": "var(--palette-bg-color-17)", + "bg-color-18": "var(--palette-bg-color-18)", + "bg-color-19": "var(--palette-bg-color-19)", + "bg-color-20": "var(--palette-bg-color-20)" + }, "badge": { "color-1-light-1": "var(--badge-color-1-light-1)", "color-1-light-2": "var(--badge-color-1-light-2)", @@ -146,77 +189,66 @@ module.exports = { "color-1-thick-1": "var(--badge-color-1-thick-1)", "color-1-thick-2": "var(--badge-color-1-thick-2)", "color-1-thick-3": "var(--badge-color-1-thick-3)", - "color-1-thick-4": "var(--badge-color-1-thick-4)", "color-2-light-1": "var(--badge-color-2-light-1)", "color-2-light-2": "var(--badge-color-2-light-2)", "color-2-light-3": "var(--badge-color-2-light-3)", "color-2-thick-1": "var(--badge-color-2-thick-1)", "color-2-thick-2": "var(--badge-color-2-thick-2)", "color-2-thick-3": "var(--badge-color-2-thick-3)", - "color-2-thick-4": "var(--badge-color-2-thick-4)", "color-3-light-1": "var(--badge-color-3-light-1)", "color-3-light-2": "var(--badge-color-3-light-2)", "color-3-light-3": "var(--badge-color-3-light-3)", "color-3-thick-1": "var(--badge-color-3-thick-1)", "color-3-thick-2": "var(--badge-color-3-thick-2)", "color-3-thick-3": "var(--badge-color-3-thick-3)", - "color-3-thick-4": "var(--badge-color-3-thick-4)", "color-4-light-1": "var(--badge-color-4-light-1)", "color-4-light-2": "var(--badge-color-4-light-2)", "color-4-light-3": "var(--badge-color-4-light-3)", "color-4-thick-1": "var(--badge-color-4-thick-1)", "color-4-thick-2": "var(--badge-color-4-thick-2)", "color-4-thick-3": "var(--badge-color-4-thick-3)", - "color-4-thick-4": "var(--badge-color-4-thick-4)", "color-5-light-1": "var(--badge-color-5-light-1)", "color-5-light-2": "var(--badge-color-5-light-2)", "color-5-light-3": "var(--badge-color-5-light-3)", "color-5-thick-1": "var(--badge-color-5-thick-1)", "color-5-thick-2": "var(--badge-color-5-thick-2)", "color-5-thick-3": "var(--badge-color-5-thick-3)", - "color-5-thick-4": "var(--badge-color-5-thick-4)", "color-6-light-1": "var(--badge-color-6-light-1)", "color-6-light-2": "var(--badge-color-6-light-2)", "color-6-light-3": "var(--badge-color-6-light-3)", "color-6-thick-1": "var(--badge-color-6-thick-1)", "color-6-thick-2": "var(--badge-color-6-thick-2)", "color-6-thick-3": "var(--badge-color-6-thick-3)", - "color-6-thick-4": "var(--badge-color-6-thick-4)", "color-7-light-1": "var(--badge-color-7-light-1)", "color-7-light-2": "var(--badge-color-7-light-2)", "color-7-light-3": "var(--badge-color-7-light-3)", "color-7-thick-1": "var(--badge-color-7-thick-1)", "color-7-thick-2": "var(--badge-color-7-thick-2)", "color-7-thick-3": "var(--badge-color-7-thick-3)", - "color-7-thick-4": "var(--badge-color-7-thick-4)", "color-8-light-1": "var(--badge-color-8-light-1)", "color-8-light-2": "var(--badge-color-8-light-2)", "color-8-light-3": "var(--badge-color-8-light-3)", "color-8-thick-1": "var(--badge-color-8-thick-1)", "color-8-thick-2": "var(--badge-color-8-thick-2)", "color-8-thick-3": "var(--badge-color-8-thick-3)", - "color-8-thick-4": "var(--badge-color-8-thick-4)", "color-9-light-1": "var(--badge-color-9-light-1)", "color-9-light-2": "var(--badge-color-9-light-2)", "color-9-light-3": "var(--badge-color-9-light-3)", "color-9-thick-1": "var(--badge-color-9-thick-1)", "color-9-thick-2": "var(--badge-color-9-thick-2)", "color-9-thick-3": "var(--badge-color-9-thick-3)", - "color-9-thick-4": "var(--badge-color-9-thick-4)", "color-10-light-1": "var(--badge-color-10-light-1)", "color-10-light-2": "var(--badge-color-10-light-2)", "color-10-light-3": "var(--badge-color-10-light-3)", "color-10-thick-1": "var(--badge-color-10-thick-1)", "color-10-thick-2": "var(--badge-color-10-thick-2)", "color-10-thick-3": "var(--badge-color-10-thick-3)", - "color-10-thick-4": "var(--badge-color-10-thick-4)", "color-11-light-1": "var(--badge-color-11-light-1)", "color-11-light-2": "var(--badge-color-11-light-2)", "color-11-light-3": "var(--badge-color-11-light-3)", "color-11-thick-1": "var(--badge-color-11-thick-1)", "color-11-thick-2": "var(--badge-color-11-thick-2)", "color-11-thick-3": "var(--badge-color-11-thick-3)", - "color-11-thick-4": "var(--badge-color-11-thick-4)", "color-12-light-1": "var(--badge-color-12-light-1)", "color-12-light-2": "var(--badge-color-12-light-2)", "color-12-light-3": "var(--badge-color-12-light-3)", @@ -272,47 +304,63 @@ module.exports = { "color-20-thick-2": "var(--badge-color-20-thick-2)", "color-20-thick-3": "var(--badge-color-20-thick-3)" }, - "palette": { - "text-color-1": "var(--palette-text-color-1)", - "text-color-2": "var(--palette-text-color-2)", - "text-color-3": "var(--palette-text-color-3)", - "text-color-4": "var(--palette-text-color-4)", - "text-color-5": "var(--palette-text-color-5)", - "text-color-6": "var(--palette-text-color-6)", - "text-color-7": "var(--palette-text-color-7)", - "text-color-8": "var(--palette-text-color-8)", - "text-color-9": "var(--palette-text-color-9)", - "text-color-10": "var(--palette-text-color-10)", - "text-color-11": "var(--palette-text-color-11)", - "text-color-12": "var(--palette-text-color-12)", - "text-color-13": "var(--palette-text-color-13)", - "text-color-14": "var(--palette-text-color-14)", - "text-color-15": "var(--palette-text-color-15)", - "text-color-16": "var(--palette-text-color-16)", - "text-color-17": "var(--palette-text-color-17)", - "text-color-18": "var(--palette-text-color-18)", - "text-color-19": "var(--palette-text-color-19)", - "text-color-20": "var(--palette-text-color-20)", - "bg-color-1": "var(--palette-bg-color-1)", - "bg-color-2": "var(--palette-bg-color-2)", - "bg-color-3": "var(--palette-bg-color-3)", - "bg-color-4": "var(--palette-bg-color-4)", - "bg-color-5": "var(--palette-bg-color-5)", - "bg-color-6": "var(--palette-bg-color-6)", - "bg-color-7": "var(--palette-bg-color-7)", - "bg-color-8": "var(--palette-bg-color-8)", - "bg-color-9": "var(--palette-bg-color-9)", - "bg-color-10": "var(--palette-bg-color-10)", - "bg-color-11": "var(--palette-bg-color-11)", - "bg-color-12": "var(--palette-bg-color-12)", - "bg-color-13": "var(--palette-bg-color-13)", - "bg-color-14": "var(--palette-bg-color-14)", - "bg-color-15": "var(--palette-bg-color-15)", - "bg-color-16": "var(--palette-bg-color-16)", - "bg-color-17": "var(--palette-bg-color-17)", - "bg-color-18": "var(--palette-bg-color-18)", - "bg-color-19": "var(--palette-bg-color-19)", - "bg-color-20": "var(--palette-bg-color-20)" + "tag": { + "fill-01-light": "var(--tag-fill-01-light)", + "fill-01-thick": "var(--tag-fill-01-thick)", + "text-01-light": "var(--tag-text-01-light)", + "text-01-thick": "var(--tag-text-01-thick)", + "fill-02-light": "var(--tag-fill-02-light)", + "fill-02-thick": "var(--tag-fill-02-thick)", + "text-02-light": "var(--tag-text-02-light)", + "text-02-thick": "var(--tag-text-02-thick)", + "fill-03-light": "var(--tag-fill-03-light)", + "fill-03-thick": "var(--tag-fill-03-thick)", + "text-03-light": "var(--tag-text-03-light)", + "text-03-thick": "var(--tag-text-03-thick)", + "fill-04-light": "var(--tag-fill-04-light)", + "fill-04-thick": "var(--tag-fill-04-thick)", + "text-04-light": "var(--tag-text-04-light)", + "text-04-thick": "var(--tag-text-04-thick)", + "fill-05-light": "var(--tag-fill-05-light)", + "fill-05-thick": "var(--tag-fill-05-thick)", + "text-05-light": "var(--tag-text-05-light)", + "text-05-thick": "var(--tag-text-05-thick)", + "fill-06-light": "var(--tag-fill-06-light)", + "fill-06-thick": "var(--tag-fill-06-thick)", + "text-06-light": "var(--tag-text-06-light)", + "text-06-thick": "var(--tag-text-06-thick)", + "fill-07-light": "var(--tag-fill-07-light)", + "fill-07-thick": "var(--tag-fill-07-thick)", + "text-07-light": "var(--tag-text-07-light)", + "text-07-thick": "var(--tag-text-07-thick)", + "fill-08-light": "var(--tag-fill-08-light)", + "fill-08-thick": "var(--tag-fill-08-thick)", + "text-08-light": "var(--tag-text-08-light)", + "text-08-thick": "var(--tag-text-08-thick)", + "fill-09-light": "var(--tag-fill-09-light)", + "fill-09-thick": "var(--tag-fill-09-thick)", + "text-09-light": "var(--tag-text-09-light)", + "text-09-thick": "var(--tag-text-09-thick)", + "fill-10-light": "var(--tag-fill-10-light)", + "fill-10-thick": "var(--tag-fill-10-thick)", + "text-10-light": "var(--tag-text-10-light)", + "text-10-thick": "var(--tag-text-10-thick)" + }, + "comment": { + "fill-01": "var(--comment-fill-01)", + "fill-01-select": "var(--comment-fill-01-select)", + "fill-02": "var(--comment-fill-02)", + "fill-02-select": "var(--comment-fill-02-select)", + "fill-03": "var(--comment-fill-03)", + "fill-03-select": "var(--comment-fill-03-select)", + "border-01": "var(--comment-border-01)", + "border-01-select": "var(--comment-border-01-select)", + "border-02": "var(--comment-border-02)", + "border-02-select": "var(--comment-border-02-select)", + "border-03": "var(--comment-border-03)", + "border-03-select": "var(--comment-border-03-select)", + "icon": "var(--comment-icon)", + "highlight": "var(--comment-highlight)" }, "brand": { "skyline": "var(--brand-skyline)", From fef941f508f78275a087deeec46e815695938014 Mon Sep 17 00:00:00 2001 From: Nathan Date: Fri, 22 Aug 2025 11:49:47 +0800 Subject: [PATCH 2/3] chore: rename env --- .github/workflows/web_ci.yaml | 24 ++++++++--------- deploy.env | 6 ++--- dev.env | 6 ++--- docker/docker-compose.example.yml | 6 ++--- docker/entrypoint.sh | 26 +++++++++---------- .../gallery-preview/GalleryPreview.tsx | 2 +- .../cell/file-media/PreviewImage.tsx | 2 +- .../cell/file-media/UnPreviewFile.tsx | 2 +- .../database-row/file-media/FileMediaItem.tsx | 4 +-- .../components/blocks/file/FileBlock.tsx | 2 +- .../blocks/gallery/GalleryBlock.tsx | 2 +- .../components/blocks/image/ImageBlock.tsx | 2 +- src/components/main/app.hooks.ts | 4 +-- src/components/ws/useAppflowyWebSocket.ts | 2 +- src/utils/runtime-config.ts | 6 ++--- vite.config.ts | 2 +- 16 files changed, 49 insertions(+), 49 deletions(-) diff --git a/.github/workflows/web_ci.yaml b/.github/workflows/web_ci.yaml index a4427d1f..c656e760 100644 --- a/.github/workflows/web_ci.yaml +++ b/.github/workflows/web_ci.yaml @@ -82,15 +82,15 @@ jobs: set -e echo "Testing container fails without environment variables..." OUTPUT=$(docker run --rm appflowy-web-test:ci 2>&1 || true) - echo "$OUTPUT" | grep -q "ERROR: AF_BASE_URL environment variable is required" || (echo "ERROR: Container should fail without env vars" && exit 1) + echo "$OUTPUT" | grep -q "ERROR: APPFLOWY_BASE_URL environment variable is required" || (echo "ERROR: Container should fail without env vars" && exit 1) echo "✓ Container correctly fails without required env vars" - name: Run container with injected env vars run: | docker run -d --rm --name appflowy-web-test -p 8080:80 \ - -e AF_BASE_URL=https://ci-backend.example.com \ - -e AF_GOTRUE_URL=https://ci-backend.example.com/gotrue \ - -e AF_WS_V2_URL=wss://ci-backend.example.com/ws/v2 \ + -e APPFLOWY_BASE_URL=https://ci-backend.example.com \ + -e APPFLOWY_GOTRUE_BASE_URL=https://ci-backend.example.com/gotrue \ + -e APPFLOWY_WS_BASE_URL=wss://ci-backend.example.com/ws/v2 \ appflowy-web-test:ci - name: Wait for server to be ready @@ -111,15 +111,15 @@ jobs: echo "✓ Found window.__APP_CONFIG__" echo "Verifying injected values..." - # Note: The config is injected as a single line with format: {AF_BASE_URL:'value',AF_GOTRUE_URL:'value',AF_WS_V2_URL:'value'} - echo "$HTML" | grep -q "AF_BASE_URL:'https://ci-backend.example.com'" || (echo "ERROR: AF_BASE_URL not correctly injected" && exit 1) - echo "✓ AF_BASE_URL correctly injected" + # Note: The config is injected as a single line with format: {APPFLOWY_BASE_URL:'value',APPFLOWY_GOTRUE_BASE_URL:'value',APPFLOWY_WS_BASE_URL:'value'} + echo "$HTML" | grep -q "APPFLOWY_BASE_URL:'https://ci-backend.example.com'" || (echo "ERROR: APPFLOWY_BASE_URL not correctly injected" && exit 1) + echo "✓ APPFLOWY_BASE_URL correctly injected" - echo "$HTML" | grep -q "AF_GOTRUE_URL:'https://ci-backend.example.com/gotrue'" || (echo "ERROR: AF_GOTRUE_URL not correctly injected" && exit 1) - echo "✓ AF_GOTRUE_URL correctly injected" + echo "$HTML" | grep -q "APPFLOWY_GOTRUE_BASE_URL:'https://ci-backend.example.com/gotrue'" || (echo "ERROR: APPFLOWY_GOTRUE_BASE_URL not correctly injected" && exit 1) + echo "✓ APPFLOWY_GOTRUE_BASE_URL correctly injected" - echo "$HTML" | grep -q "AF_WS_V2_URL:'wss://ci-backend.example.com/ws/v2'" || (echo "ERROR: AF_WS_V2_URL not correctly injected" && exit 1) - echo "✓ AF_WS_V2_URL correctly injected" + echo "$HTML" | grep -q "APPFLOWY_WS_BASE_URL:'wss://ci-backend.example.com/ws/v2'" || (echo "ERROR: APPFLOWY_WS_BASE_URL not correctly injected" && exit 1) + echo "✓ APPFLOWY_WS_BASE_URL correctly injected" echo "All runtime configuration values verified successfully!" @@ -133,7 +133,7 @@ jobs: echo "Extracted config: $CONFIG" # Verify it's a valid JavaScript object format - echo "$CONFIG" | grep -q "window.__APP_CONFIG__={AF_BASE_URL:'[^']*',AF_GOTRUE_URL:'[^']*',AF_WS_V2_URL:'[^']*'}" || \ + echo "$CONFIG" | grep -q "window.__APP_CONFIG__={APPFLOWY_BASE_URL:'[^']*',APPFLOWY_GOTRUE_BASE_URL:'[^']*',APPFLOWY_WS_BASE_URL:'[^']*'}" || \ (echo "ERROR: Config format is invalid" && exit 1) echo "✓ Configuration format and structure verified" diff --git a/deploy.env b/deploy.env index d2044de7..5ac8ed1f 100644 --- a/deploy.env +++ b/deploy.env @@ -1,3 +1,3 @@ -AF_BASE_URL=http://localhost -AF_GOTRUE_URL=http://localhost/gotrue -AF_WS_V2_URL=ws://localhost/ws/v2 \ No newline at end of file +APPFLOWY_BASE_URL=http://localhost +APPFLOWY_GOTRUE_BASE_URL=http://localhost/gotrue +APPFLOWY_WS_BASE_URL=ws://localhost/ws/v2 \ No newline at end of file diff --git a/dev.env b/dev.env index d1323d60..24e6a243 100644 --- a/dev.env +++ b/dev.env @@ -1,3 +1,3 @@ -AF_BASE_URL=http://localhost:8000 -AF_GOTRUE_URL=http://localhost:9999 -AF_WS_V2_URL=ws://localhost:8000/ws/v2 \ No newline at end of file +APPFLOWY_BASE_URL=http://localhost:8000 +APPFLOWY_GOTRUE_BASE_URL=http://localhost:9999 +APPFLOWY_WS_BASE_URL=ws://localhost:8000/ws/v2 \ No newline at end of file diff --git a/docker/docker-compose.example.yml b/docker/docker-compose.example.yml index 90a7791a..c5b004c5 100644 --- a/docker/docker-compose.example.yml +++ b/docker/docker-compose.example.yml @@ -8,7 +8,7 @@ services: environment: # REQUIRED: Configure these to match your AppFlowy backend URLs # The container will fail to start if these are not set - - AF_BASE_URL=https://your-backend.example.com - - AF_GOTRUE_URL=https://your-backend.example.com/gotrue - - AF_WS_V2_URL=wss://your-backend.example.com/ws/v2 + - APPFLOWY_BASE_URL=https://your-backend.example.com + - APPFLOWY_GOTRUE_BASE_URL=https://your-backend.example.com/gotrue + - APPFLOWY_WS_BASE_URL=wss://your-backend.example.com/ws/v2 restart: unless-stopped \ No newline at end of file diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh index 510b1696..ae584998 100755 --- a/docker/entrypoint.sh +++ b/docker/entrypoint.sh @@ -2,34 +2,34 @@ set -e # Check required environment variables -if [ -z "${AF_BASE_URL}" ]; then - echo "ERROR: AF_BASE_URL environment variable is required but not set" - echo "Please set AF_BASE_URL to your AppFlowy backend URL (e.g., https://your-backend.example.com)" +if [ -z "${APPFLOWY_BASE_URL}" ]; then + echo "ERROR: APPFLOWY_BASE_URL environment variable is required but not set" + echo "Please set APPFLOWY_BASE_URL to your AppFlowy backend URL (e.g., https://your-backend.example.com)" exit 1 fi -if [ -z "${AF_GOTRUE_URL}" ]; then - echo "ERROR: AF_GOTRUE_URL environment variable is required but not set" - echo "Please set AF_GOTRUE_URL to your GoTrue authentication service URL (e.g., https://your-backend.example.com/gotrue)" +if [ -z "${APPFLOWY_GOTRUE_BASE_URL}" ]; then + echo "ERROR: APPFLOWY_GOTRUE_BASE_URL environment variable is required but not set" + echo "Please set APPFLOWY_GOTRUE_BASE_URL to your GoTrue authentication service URL (e.g., https://your-backend.example.com/gotrue)" exit 1 fi -if [ -z "${AF_WS_V2_URL}" ]; then - echo "ERROR: AF_WS_V2_URL environment variable is required but not set" - echo "Please set AF_WS_V2_URL to your WebSocket v2 URL (e.g., wss://your-backend.example.com/ws/v2)" +if [ -z "${APPFLOWY_WS_BASE_URL}" ]; then + echo "ERROR: APPFLOWY_WS_BASE_URL environment variable is required but not set" + echo "Please set APPFLOWY_WS_BASE_URL to your WebSocket URL (e.g., wss://your-backend.example.com/ws/v2)" exit 1 fi # Create inline config script -CONFIG_SCRIPT="" +CONFIG_SCRIPT="" # Inject the config script into index.html right before sed -i "s||${CONFIG_SCRIPT}|g" /usr/share/nginx/html/index.html echo "Runtime configuration injected:" -echo " AF_BASE_URL: ${AF_BASE_URL}" -echo " AF_GOTRUE_URL: ${AF_GOTRUE_URL}" -echo " AF_WS_V2_URL: ${AF_WS_V2_URL}" +echo " APPFLOWY_BASE_URL: ${APPFLOWY_BASE_URL}" +echo " APPFLOWY_GOTRUE_BASE_URL: ${APPFLOWY_GOTRUE_BASE_URL}" +echo " APPFLOWY_WS_BASE_URL: ${APPFLOWY_WS_BASE_URL}" # Start nginx exec nginx -g 'daemon off;' \ No newline at end of file diff --git a/src/components/_shared/gallery-preview/GalleryPreview.tsx b/src/components/_shared/gallery-preview/GalleryPreview.tsx index f7fdd27c..b74cdf01 100644 --- a/src/components/_shared/gallery-preview/GalleryPreview.tsx +++ b/src/components/_shared/gallery-preview/GalleryPreview.tsx @@ -102,7 +102,7 @@ function GalleryPreview({ images, open, onClose, previewIndex, workspaceId }: Ga const fileId = images[index].src; - return getConfigValue('AF_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; + return getConfigValue('APPFLOWY_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; }, [images, index, workspaceId]); if (!open) { diff --git a/src/components/database/components/cell/file-media/PreviewImage.tsx b/src/components/database/components/cell/file-media/PreviewImage.tsx index 80a9201b..6515c5f8 100644 --- a/src/components/database/components/cell/file-media/PreviewImage.tsx +++ b/src/components/database/components/cell/file-media/PreviewImage.tsx @@ -12,7 +12,7 @@ function PreviewImage({ file, onClick }: { file: FileMediaCellDataItem; onClick: let fileUrl = file.url; if (!isURL(file.url)) { - fileUrl = getConfigValue('AF_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + file.url; + fileUrl = getConfigValue('APPFLOWY_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + file.url; } const url = new URL(fileUrl); diff --git a/src/components/database/components/cell/file-media/UnPreviewFile.tsx b/src/components/database/components/cell/file-media/UnPreviewFile.tsx index a40cb012..52339cc9 100644 --- a/src/components/database/components/cell/file-media/UnPreviewFile.tsx +++ b/src/components/database/components/cell/file-media/UnPreviewFile.tsx @@ -26,7 +26,7 @@ function UnPreviewFile({ file }: { file: FileMediaCellDataItem }) { } const fileId = file.url; - const newUrl = getConfigValue('AF_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; + const newUrl = getConfigValue('APPFLOWY_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; void openUrl(newUrl, '_blank'); }} diff --git a/src/components/database/components/database-row/file-media/FileMediaItem.tsx b/src/components/database/components/database-row/file-media/FileMediaItem.tsx index f2cc8e81..772ed481 100644 --- a/src/components/database/components/database-row/file-media/FileMediaItem.tsx +++ b/src/components/database/components/database-row/file-media/FileMediaItem.tsx @@ -54,7 +54,7 @@ function FileMediaItem({ const fileId = file.url; - return getConfigValue('AF_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; + return getConfigValue('APPFLOWY_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; }, [file.url, workspaceId]); const [hover, setHover] = useState(false); @@ -71,7 +71,7 @@ function FileMediaItem({ } const fileId = file.url; - const newUrl = getConfigValue('AF_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; + const newUrl = getConfigValue('APPFLOWY_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; void openUrl(newUrl, '_blank'); } diff --git a/src/components/editor/components/blocks/file/FileBlock.tsx b/src/components/editor/components/blocks/file/FileBlock.tsx index a667ca2f..b34d8c15 100644 --- a/src/components/editor/components/blocks/file/FileBlock.tsx +++ b/src/components/editor/components/blocks/file/FileBlock.tsx @@ -42,7 +42,7 @@ export const FileBlock = memo( const fileId = dataUrl; - return getConfigValue('AF_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; + return getConfigValue('APPFLOWY_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; }, [dataUrl, workspaceId]); const className = useMemo(() => { diff --git a/src/components/editor/components/blocks/gallery/GalleryBlock.tsx b/src/components/editor/components/blocks/gallery/GalleryBlock.tsx index f0252fbc..cf61dee1 100644 --- a/src/components/editor/components/blocks/gallery/GalleryBlock.tsx +++ b/src/components/editor/components/blocks/gallery/GalleryBlock.tsx @@ -35,7 +35,7 @@ const GalleryBlock = memo( let imageUrl = image.url; if (!isURL(image.url)) { - imageUrl = getConfigValue('AF_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + image.url; + imageUrl = getConfigValue('APPFLOWY_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + image.url; } const url = new URL(imageUrl); diff --git a/src/components/editor/components/blocks/image/ImageBlock.tsx b/src/components/editor/components/blocks/image/ImageBlock.tsx index 8df293ea..68b6021c 100644 --- a/src/components/editor/components/blocks/image/ImageBlock.tsx +++ b/src/components/editor/components/blocks/image/ImageBlock.tsx @@ -44,7 +44,7 @@ export const ImageBlock = memo( const fileId = dataUrl; - return getConfigValue('AF_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; + return getConfigValue('APPFLOWY_BASE_URL', '') + '/api/file_storage/' + workspaceId + '/v1/blob/' + fileId; }, [dataUrl, workspaceId]); const containerRef = useRef(null); diff --git a/src/components/main/app.hooks.ts b/src/components/main/app.hooks.ts index a9a697a7..fd64c967 100644 --- a/src/components/main/app.hooks.ts +++ b/src/components/main/app.hooks.ts @@ -3,8 +3,8 @@ import { User } from '@/application/types'; import { getConfigValue } from '@/utils/runtime-config'; import { createContext, useContext } from 'react'; -const baseURL = getConfigValue('AF_BASE_URL', 'https://test.appflowy.cloud'); -const gotrueURL = getConfigValue('AF_GOTRUE_URL', 'https://test.appflowy.cloud/gotrue'); +const baseURL = getConfigValue('APPFLOWY_BASE_URL', 'https://test.appflowy.cloud'); +const gotrueURL = getConfigValue('APPFLOWY_GOTRUE_BASE_URL', 'https://test.appflowy.cloud/gotrue'); export const defaultConfig: AFServiceConfig = { cloudConfig: { diff --git a/src/components/ws/useAppflowyWebSocket.ts b/src/components/ws/useAppflowyWebSocket.ts index 407a5d5c..12466757 100644 --- a/src/components/ws/useAppflowyWebSocket.ts +++ b/src/components/ws/useAppflowyWebSocket.ts @@ -6,7 +6,7 @@ import { getTokenParsed } from '@/application/session/token'; import { getConfigValue } from '@/utils/runtime-config'; import { messages } from '@/proto/messages'; -const wsURL = getConfigValue('AF_WS_V2_URL', 'ws://localhost:8000/ws/v2'); +const wsURL = getConfigValue('APPFLOWY_WS_BASE_URL', 'ws://localhost:8000/ws/v2'); // WebSocket close code enum enum CloseCode { diff --git a/src/utils/runtime-config.ts b/src/utils/runtime-config.ts index 4c84a94f..22cc5af8 100644 --- a/src/utils/runtime-config.ts +++ b/src/utils/runtime-config.ts @@ -1,7 +1,7 @@ interface RuntimeConfig { - AF_BASE_URL?: string; - AF_GOTRUE_URL?: string; - AF_WS_V2_URL?: string; + APPFLOWY_BASE_URL?: string; + APPFLOWY_GOTRUE_BASE_URL?: string; + APPFLOWY_WS_BASE_URL?: string; } declare global { diff --git a/vite.config.ts b/vite.config.ts index bce3fc51..49b116fe 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -107,7 +107,7 @@ export default defineConfig({ cors: false, sourcemapIgnoreList: false, }, - envPrefix: ['AF'], + envPrefix: ['APPFLOWY'], esbuild: { keepNames: true, sourcesContent: true, From 104bb3b956a5e852cb62d92dea365ae138017295 Mon Sep 17 00:00:00 2001 From: Nathan Date: Fri, 22 Aug 2025 13:20:24 +0800 Subject: [PATCH 3/3] chore: backward compatibel --- docker/entrypoint.sh | 41 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh index ae584998..9dd36aff 100755 --- a/docker/entrypoint.sh +++ b/docker/entrypoint.sh @@ -1,26 +1,63 @@ #!/bin/sh set -e -# Check required environment variables +# Backward compatibility: Map old environment variable names to new ones +if [ -n "${AF_BASE_URL}" ] && [ -z "${APPFLOWY_BASE_URL}" ]; then + echo "⚠️ WARNING: AF_BASE_URL is deprecated. Please use APPFLOWY_BASE_URL instead." + APPFLOWY_BASE_URL="${AF_BASE_URL}" +fi + +if [ -n "${AF_GOTRUE_URL}" ] && [ -z "${APPFLOWY_GOTRUE_BASE_URL}" ]; then + echo "⚠️ WARNING: AF_GOTRUE_URL is deprecated. Please use APPFLOWY_GOTRUE_BASE_URL instead." + APPFLOWY_GOTRUE_BASE_URL="${AF_GOTRUE_URL}" +fi + +# Support both AF_WS_V2_URL and AF_WS_URL for backward compatibility +if [ -n "${AF_WS_V2_URL}" ] && [ -z "${APPFLOWY_WS_BASE_URL}" ]; then + echo "⚠️ WARNING: AF_WS_V2_URL is deprecated. Please use APPFLOWY_WS_BASE_URL instead." + APPFLOWY_WS_BASE_URL="${AF_WS_V2_URL}" +elif [ -n "${AF_WS_URL}" ] && [ -z "${APPFLOWY_WS_BASE_URL}" ]; then + echo "⚠️ WARNING: AF_WS_URL is deprecated. Please use APPFLOWY_WS_BASE_URL instead." + APPFLOWY_WS_BASE_URL="${AF_WS_URL}" +fi + +# Check required environment variables (after mapping) if [ -z "${APPFLOWY_BASE_URL}" ]; then echo "ERROR: APPFLOWY_BASE_URL environment variable is required but not set" echo "Please set APPFLOWY_BASE_URL to your AppFlowy backend URL (e.g., https://your-backend.example.com)" + echo "Note: You can also use the deprecated AF_BASE_URL for backward compatibility" exit 1 fi if [ -z "${APPFLOWY_GOTRUE_BASE_URL}" ]; then echo "ERROR: APPFLOWY_GOTRUE_BASE_URL environment variable is required but not set" echo "Please set APPFLOWY_GOTRUE_BASE_URL to your GoTrue authentication service URL (e.g., https://your-backend.example.com/gotrue)" + echo "Note: You can also use the deprecated AF_GOTRUE_URL for backward compatibility" exit 1 fi if [ -z "${APPFLOWY_WS_BASE_URL}" ]; then echo "ERROR: APPFLOWY_WS_BASE_URL environment variable is required but not set" echo "Please set APPFLOWY_WS_BASE_URL to your WebSocket URL (e.g., wss://your-backend.example.com/ws/v2)" + echo "Note: You can also use the deprecated AF_WS_V2_URL or AF_WS_URL for backward compatibility" exit 1 fi -# Create inline config script +# Show deprecation summary if any old variables were used +if [ -n "${AF_BASE_URL}" ] || [ -n "${AF_GOTRUE_URL}" ] || [ -n "${AF_WS_V2_URL}" ] || [ -n "${AF_WS_URL}" ]; then + echo "" + echo "════════════════════════════════════════════════════════════════════" + echo "⚠️ DEPRECATION NOTICE: Old environment variable names detected!" + echo "Please update your configuration to use the new names:" + echo " AF_BASE_URL → APPFLOWY_BASE_URL" + echo " AF_GOTRUE_URL → APPFLOWY_GOTRUE_BASE_URL" + echo " AF_WS_V2_URL → APPFLOWY_WS_BASE_URL" + echo " AF_WS_URL → APPFLOWY_WS_BASE_URL" + echo "════════════════════════════════════════════════════════════════════" + echo "" +fi + +# Create inline config script (always use new names internally) CONFIG_SCRIPT="" # Inject the config script into index.html right before