Skip to content

Commit 0cc11f6

Browse files
axis-d0opaxis-d0op
authored
chore: script to map new empty views (#556)
1 parent 57d98a0 commit 0cc11f6

5 files changed

Lines changed: 194 additions & 1 deletion

File tree

‎components/empty-view/docs/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,19 @@ export const DialogEmptyViewExample = () => {
5959
);
6060
};
6161
```
62+
## Adding new illustrations
6263

64+
The `add-illustration` script automates adding new illustration mappings from `@axiscommunications/fluent-illustrations` into this component. It scans the illustrations library for available Dark/Light pairs, shows which ones aren't yet mapped, and lets you interactively select which to add. The script updates both `IllustrationKind` in `types.ts` and the mapping in `constants.ts`.
65+
66+
```sh
67+
pnpm add-illustration
68+
```
69+
70+
The script will:
71+
72+
1. List all unmapped illustrations by number
73+
2. Prompt you to select which to add (comma-separated numbers, or `all`)
74+
3. Suggest a kebab-case key for each (editable)
75+
4. Update `src/types.ts` and `src/constants.ts`
76+
77+
Run `pnpm lint` after to format the changes.

‎components/empty-view/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"build": "pnpm prebuild && pnpm build:types && pnpm build:esm",
2424
"build:esm": "esbuild --format=esm --bundle --sourcemap --packages=external --outdir=lib src/index.ts",
2525
"build:types": "tsc -p tsconfig.build.json",
26+
"add-illustration": "bash scripts/add-illustration.sh",
2627
"check:unused-deps": "depcheck . --config=depcheck.yml",
2728
"lint": "tsc --noEmit && biome check"
2829
},

‎components/empty-view/scripts/add-illustration.sh‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
#!/usr/bin/env bash
2+
#
3+
# Interactively add illustration mappings to the empty-view component.
4+
# Scans the illustrations library for available Dark/Light pairs,
5+
# shows which ones aren't yet mapped, and lets you select which to add.
6+
#
7+
# Usage: pnpm add-illustration
8+
#
9+
set -euo pipefail
10+
11+
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
12+
COMPONENT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
13+
REPO_ROOT="$(cd "$COMPONENT_DIR/../.." && pwd)"
14+
15+
ILLUSTRATIONS_INDEX="$REPO_ROOT/illustrations/src/index.ts"
16+
CONSTANTS_FILE="$COMPONENT_DIR/src/constants.ts"
17+
TYPES_FILE="$COMPONENT_DIR/src/types.ts"
18+
19+
for f in "$ILLUSTRATIONS_INDEX" "$CONSTANTS_FILE" "$TYPES_FILE"; do
20+
if [[ ! -f "$f" ]]; then
21+
echo "Error: Cannot find $f" >&2
22+
exit 1
23+
fi
24+
done
25+
26+
# Convert PascalCase to kebab-case
27+
pascal_to_kebab() {
28+
echo "$1" | sed -E 's/([A-Z])/-\1/g' | sed 's/^-//' | tr '[:upper:]' '[:lower:]'
29+
}
30+
31+
# --- Discover all illustration pairs from the index ---
32+
all_dark=$(grep -oE '[A-Za-z]+Dark' "$ILLUSTRATIONS_INDEX" | sort -u)
33+
34+
bases=()
35+
for dark_export in $all_dark; do
36+
base="${dark_export%Dark}"
37+
if grep -q "${base}Light" "$ILLUSTRATIONS_INDEX"; then
38+
bases+=("$base")
39+
fi
40+
done
41+
42+
# --- Find which are already mapped in constants.ts ---
43+
mapped_dark=$(grep -oE '[A-Za-z]+Dark' "$CONSTANTS_FILE" | sort -u)
44+
mapped_bases=" "
45+
for m in $mapped_dark; do
46+
mapped_bases="$mapped_bases${m%Dark} "
47+
done
48+
49+
unmapped=()
50+
for base in "${bases[@]}"; do
51+
if [[ "$mapped_bases" != *" $base "* ]]; then
52+
unmapped+=("$base")
53+
fi
54+
done
55+
56+
if [[ ${#unmapped[@]} -eq 0 ]]; then
57+
echo "All illustrations are already mapped!"
58+
exit 0
59+
fi
60+
61+
# --- Display unmapped illustrations ---
62+
echo ""
63+
echo "Unmapped illustrations (${#unmapped[@]}):"
64+
echo ""
65+
for i in "${!unmapped[@]}"; do
66+
printf " %2d) %s\n" $((i + 1)) "${unmapped[$i]}"
67+
done
68+
echo ""
69+
echo "Enter numbers to add (comma-separated, e.g. 1,3,5), 'all', or 'q' to quit:"
70+
read -r selection
71+
72+
if [[ "$selection" == "q" ]]; then
73+
exit 0
74+
fi
75+
76+
selected=()
77+
if [[ "$selection" == "all" ]]; then
78+
selected=("${unmapped[@]}")
79+
else
80+
IFS=',' read -ra nums <<< "$selection"
81+
for num in "${nums[@]}"; do
82+
num=$(echo "$num" | tr -d ' ')
83+
if [[ "$num" =~ ^[0-9]+$ ]] && (( num >= 1 && num <= ${#unmapped[@]} )); then
84+
selected+=("${unmapped[$((num - 1))]}")
85+
else
86+
echo "Warning: Ignoring invalid selection '$num'" >&2
87+
fi
88+
done
89+
fi
90+
91+
if [[ ${#selected[@]} -eq 0 ]]; then
92+
echo "No illustrations selected."
93+
exit 0
94+
fi
95+
96+
# --- Prompt for kebab-case keys ---
97+
echo ""
98+
echo "Confirm kebab-case keys (press Enter to accept suggestion):"
99+
echo ""
100+
101+
additions=() # "base:key" pairs
102+
for base in "${selected[@]}"; do
103+
suggested=$(pascal_to_kebab "$base")
104+
read -rp " ${base}Dark/Light -> [${suggested}]: " custom
105+
key="${custom:-$suggested}"
106+
additions+=("${base}:${key}")
107+
done
108+
109+
# --- Confirm ---
110+
echo ""
111+
echo "Will add:"
112+
for entry in "${additions[@]}"; do
113+
base="${entry%%:*}"
114+
key="${entry#*:}"
115+
echo " \"${key}\" -> bundleIllustrationSmart(${base}Dark, ${base}Light)"
116+
done
117+
echo ""
118+
read -rp "Proceed? [Y/n]: " confirm
119+
if [[ "${confirm:-Y}" =~ ^[Nn] ]]; then
120+
echo "Aborted."
121+
exit 0
122+
fi
123+
124+
# --- Apply changes ---
125+
for entry in "${additions[@]}"; do
126+
base="${entry%%:*}"
127+
key="${entry#*:}"
128+
129+
# 1. Add imports to constants.ts (alphabetically sorted within the import block)
130+
# Find the right insertion point for Dark import
131+
dark_import=" ${base}Dark,"
132+
light_import=" ${base}Light,"
133+
# Use perl to insert imports in sorted position within the import block
134+
perl -i -pe "
135+
if (/^ (\w+),\$/ || /^ (\w+)Light,\$/ || /^ (\w+)Dark,\$/) {
136+
my \$line = \$_;
137+
chomp \$line;
138+
\$line =~ s/^ //;
139+
if (!defined \$inserted_dark && \$line gt \"${base}Dark,\") {
140+
print \" ${base}Dark,\n\";
141+
\$inserted_dark = 1;
142+
}
143+
if (!defined \$inserted_light && \$line gt \"${base}Light,\") {
144+
print \" ${base}Light,\n\";
145+
\$inserted_light = 1;
146+
}
147+
}
148+
if (/bundleIllustrationSmart/) {
149+
if (!defined \$inserted_dark) {
150+
print \" ${base}Dark,\n\";
151+
}
152+
if (!defined \$inserted_light) {
153+
print \" ${base}Light,\n\";
154+
}
155+
}
156+
" "$CONSTANTS_FILE"
157+
158+
# 2. Add map entry to constants.ts (before "} as const;")
159+
sed -i '' "/^} as const;/i\\
160+
\"${key}\": bundleIllustrationSmart(${base}Dark, ${base}Light)," "$CONSTANTS_FILE"
161+
162+
# 3. Add to IllustrationKind type in types.ts (multiline union, insert before ";")
163+
perl -i -0pe "s/(IllustrationKind\s*=\s*.*?)(;)/\${1}\n | \"${key}\"\${2}/s" "$TYPES_FILE"
164+
done
165+
166+
echo ""
167+
echo "Added ${#additions[@]} illustration(s)."
168+
echo ""
169+
echo "Updated:"
170+
echo " $(basename "$TYPES_FILE")"
171+
echo " $(basename "$CONSTANTS_FILE")"
172+
echo ""
173+
echo "Run 'pnpm lint' to format and verify."

‎components/empty-view/src/constants.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import {
2+
AddUserDark,
3+
AddUserLight,
24
AddUserProfileDark,
35
AddUserProfileLight,
46
CodeErrorDark,
@@ -91,4 +93,5 @@ export const Illustration: Record<
9193
UnderConstructionDark,
9294
UnderConstructionLight
9395
),
96+
"add-user": bundleIllustrationSmart(AddUserDark, AddUserLight),
9497
} as const;

‎components/empty-view/src/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ export type IllustrationKind =
2424
| "menu-item-focus"
2525
| "drag-menu"
2626
| "media-error"
27-
| "under-construction";
27+
| "under-construction"
28+
| "add-user";
2829

2930
export interface ContentProps {
3031
readonly body: ReactNode;

0 commit comments

Comments
 (0)