Skip to content

Commit 1804a31

Browse files
authored
fix: ui space issue (#352)
* fix: ui space issue * chore: tests * chore: padLabel * chore: changeset * chore: changeset
1 parent c4ed883 commit 1804a31

31 files changed

Lines changed: 100 additions & 178 deletions

.changeset/sunny-jeans-wish.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'dotenv-diff': patch
3+
---
4+
5+
fixed ui space issue if key is too long

packages/cli/src/ui/compare/printErrorNotFound.ts

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import path from 'path';
2-
import {
3-
UI_LABEL_WIDTH,
4-
label,
5-
value,
6-
error,
7-
divider,
8-
header,
9-
} from '../theme.js';
2+
import { label, value, error, divider, header, padLabel } from '../theme.js';
103

114
/**
125
* Prints error messages if env/example files are missing.
@@ -29,17 +22,17 @@ export function printErrorNotFound(
2922

3023
if (!envExists) {
3124
console.log(
32-
`${label('Missing env'.padEnd(UI_LABEL_WIDTH))}${error(path.basename(envFlag))}`,
25+
`${label(padLabel('Missing env'))}${error(path.basename(envFlag))}`,
3326
);
3427
}
3528
if (!exExists) {
3629
console.log(
37-
`${label('Missing example'.padEnd(UI_LABEL_WIDTH))}${error(path.basename(exampleFlag))}`,
30+
`${label(padLabel('Missing example'))}${error(path.basename(exampleFlag))}`,
3831
);
3932
}
4033

4134
console.log(
42-
`${label('Suggestion'.padEnd(UI_LABEL_WIDTH))}${value('ensure both files exist before comparing')}`,
35+
`${label(padLabel('Suggestion'))}${value('ensure both files exist before comparing')}`,
4336
);
4437
console.log(`${divider}`);
4538
}

packages/cli/src/ui/compare/printIssues.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import type { Filtered } from '../../config/types.js';
22
import {
3-
UI_LABEL_WIDTH,
43
label,
54
warning,
65
error,
76
dim,
87
divider,
98
header,
9+
padLabel,
1010
} from '../theme.js';
1111

1212
/**
@@ -28,7 +28,7 @@ export function printIssues(
2828
console.log(`${error('▸')} ${header('Missing keys')}`);
2929
console.log(`${divider}`);
3030
for (const key of filtered.missing) {
31-
console.log(`${label(key.padEnd(UI_LABEL_WIDTH))}${error('missing')}`);
31+
console.log(`${label(padLabel(key))}${error('missing')}`);
3232
}
3333
console.log(`${divider}`);
3434
}
@@ -38,7 +38,7 @@ export function printIssues(
3838
console.log(`${warning('▸')} ${header('Extra keys (not in example)')}`);
3939
console.log(`${divider}`);
4040
for (const key of filtered.extra) {
41-
console.log(`${label(key.padEnd(UI_LABEL_WIDTH))}${warning('extra')}`);
41+
console.log(`${label(padLabel(key))}${warning('extra')}`);
4242
}
4343
console.log(`${divider}`);
4444
}
@@ -48,7 +48,7 @@ export function printIssues(
4848
console.log(`${warning('▸')} ${header('Empty values')}`);
4949
console.log(`${divider}`);
5050
for (const key of filtered.empty) {
51-
console.log(`${label(key.padEnd(UI_LABEL_WIDTH))}${warning('empty')}`);
51+
console.log(`${label(padLabel(key))}${warning('empty')}`);
5252
}
5353
console.log(`${divider}`);
5454
}
@@ -59,7 +59,7 @@ export function printIssues(
5959
console.log(`${divider}`);
6060
for (const { key, expected, actual } of filtered.mismatches) {
6161
console.log(
62-
`${label(key.padEnd(UI_LABEL_WIDTH))}${warning(`expected: ${expected}`)} ${dim(`got: ${actual}`)}`,
62+
`${label(padLabel(key))}${warning(`expected: ${expected}`)} ${dim(`got: ${actual}`)}`,
6363
);
6464
}
6565
console.log(`${divider}`);

packages/cli/src/ui/compare/printPrompt.ts

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import path from 'path';
22
import {
3-
UI_LABEL_WIDTH,
43
label,
54
value,
65
accent,
76
warning,
87
dim,
98
divider,
109
header,
10+
padLabel,
1111
} from '../theme.js';
1212

1313
/**
@@ -29,21 +29,17 @@ export const printPrompt = {
2929
console.log(`${warning('▸')} ${header('No env files found')}`);
3030
console.log(`${divider}`);
3131
console.log(
32-
`${label('Status'.padEnd(UI_LABEL_WIDTH))}${warning('no .env* or .env.example found')}`,
33-
);
34-
console.log(
35-
`${label('Action'.padEnd(UI_LABEL_WIDTH))}${dim('skipping comparison')}`,
32+
`${label(padLabel('Status'))}${warning('no .env* or .env.example found')}`,
3633
);
34+
console.log(`${label(padLabel('Action'))}${dim('skipping comparison')}`);
3735
console.log(`${divider}`);
3836
},
3937

4038
missingEnv(envPath: string) {
4139
console.log();
4240
console.log(`${warning('▸')} ${header('File not found')}`);
4341
console.log(`${divider}`);
44-
console.log(
45-
`${label('File'.padEnd(UI_LABEL_WIDTH))}${warning(path.basename(envPath))}`,
46-
);
42+
console.log(`${label(padLabel('File'))}${warning(path.basename(envPath))}`);
4743
console.log(`${divider}`);
4844
},
4945

@@ -59,11 +55,9 @@ export const printPrompt = {
5955
console.log(`${accent('▸')} ${header('File created')}`);
6056
console.log(`${divider}`);
6157
console.log(
62-
`${label('Created'.padEnd(UI_LABEL_WIDTH))}${value(path.basename(envPath))}`,
63-
);
64-
console.log(
65-
`${label('From'.padEnd(UI_LABEL_WIDTH))}${dim(path.basename(examplePath))}`,
58+
`${label(padLabel('Created'))}${value(path.basename(envPath))}`,
6659
);
60+
console.log(`${label(padLabel('From'))}${dim(path.basename(examplePath))}`);
6761
console.log(`${divider}`);
6862
},
6963

@@ -72,11 +66,9 @@ export const printPrompt = {
7266
console.log(`${accent('▸')} ${header('File created')}`);
7367
console.log(`${divider}`);
7468
console.log(
75-
`${label('Created'.padEnd(UI_LABEL_WIDTH))}${value(path.basename(examplePath))}`,
76-
);
77-
console.log(
78-
`${label('From'.padEnd(UI_LABEL_WIDTH))}${dim(path.basename(envPath))}`,
69+
`${label(padLabel('Created'))}${value(path.basename(examplePath))}`,
7970
);
71+
console.log(`${label(padLabel('From'))}${dim(path.basename(envPath))}`);
8072
console.log(`${divider}`);
8173
},
8274
};

packages/cli/src/ui/compare/printStats.ts

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import type { Filtered } from '../../config/types.js';
2-
import {
3-
UI_LABEL_WIDTH,
4-
label,
5-
value,
6-
accent,
7-
divider,
8-
header,
9-
} from '../theme.js';
2+
import { label, value, accent, divider, header, padLabel } from '../theme.js';
103

114
/**
125
* Interface representing the comparison statistics between two environment files
@@ -46,7 +39,7 @@ export function printStats(
4639
if (json || !showStats) return;
4740

4841
const row = (lbl: string, val: string | number) =>
49-
console.log(`${label(lbl.padEnd(UI_LABEL_WIDTH))}${value(String(val))}`);
42+
console.log(`${label(padLabel(lbl))}${value(String(val))}`);
5043

5144
console.log();
5245
console.log(`${accent('▸')} ${header('Compare Statistics')}`);

packages/cli/src/ui/scan/printConsolelogWarning.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import type { EnvUsage, VariableUsages } from '../../config/types.js';
22
import { normalizePath } from '../../core/helpers/normalizePath.js';
33
import {
4-
UI_LABEL_WIDTH,
54
label,
65
warning,
76
error,
87
dim,
98
divider,
109
header,
10+
padLabel,
1111
} from '../theme.js';
1212

1313
/**
@@ -49,13 +49,13 @@ export function printConsolelogWarning(
4949
uniqueUsages.slice(0, maxShow).forEach((usage) => {
5050
const normalizedFile = normalizePath(usage.file);
5151
console.log(
52-
`${label(variable.padEnd(UI_LABEL_WIDTH))}${textColor(`${normalizedFile}:${usage.line}`)}`,
52+
`${label(padLabel(variable))}${textColor(`${normalizedFile}:${usage.line}`)}`,
5353
);
5454
});
5555

5656
if (uniqueUsages.length > maxShow) {
5757
console.log(
58-
`${label(''.padEnd(UI_LABEL_WIDTH))}${dim(`+${uniqueUsages.length - maxShow} more`)}`,
58+
`${label(padLabel(''))}${dim(`+${uniqueUsages.length - maxShow} more`)}`,
5959
);
6060
}
6161
}

packages/cli/src/ui/scan/printExampleWarnings.ts

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import type { ExampleSecretWarning } from '../../config/types.js';
2-
import {
3-
UI_LABEL_WIDTH,
4-
label,
5-
warning,
6-
error,
7-
divider,
8-
header,
9-
} from '../theme.js';
2+
import { label, warning, error, divider, header, padLabel } from '../theme.js';
103

114
/**
125
* Prints example file secret warnings to the console.
@@ -31,7 +24,7 @@ export function printExampleWarnings(
3124
for (const w of warnings) {
3225
const severityColor = w.severity === 'high' ? error : warning;
3326
console.log(
34-
`${label(w.key.padEnd(UI_LABEL_WIDTH))}${severityColor(`${w.reason} [${w.severity}]`)}`,
27+
`${label(padLabel(w.key))}${severityColor(`${w.reason} [${w.severity}]`)}`,
3528
);
3629
}
3730

packages/cli/src/ui/scan/printExpireWarnings.ts

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import type { ExpireWarning } from '../../config/types.js';
2-
import {
3-
UI_LABEL_WIDTH,
4-
label,
5-
error,
6-
warning,
7-
divider,
8-
header,
9-
} from '../theme.js';
2+
import { label, error, warning, divider, header, padLabel } from '../theme.js';
103
import { EXPIRE_THRESHOLD_DAYS } from '../../config/constants.js';
114

125
/**
@@ -43,9 +36,7 @@ export function printExpireWarnings(
4336

4437
const rowColor = strict || warn.daysLeft <= 7 ? error : warning;
4538

46-
console.log(
47-
`${label(warn.key.padEnd(UI_LABEL_WIDTH))}${rowColor(statusText)}`,
48-
);
39+
console.log(`${label(padLabel(warn.key))}${rowColor(statusText)}`);
4940
}
5041

5142
console.log(`${divider}`);

packages/cli/src/ui/scan/printFrameworkWarnings.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import type {
33
DetectedFramework,
44
} from '../../config/types.js';
55
import {
6-
UI_LABEL_WIDTH,
76
label,
87
warning,
98
error,
109
dim,
1110
divider,
1211
header,
1312
wrapReason,
13+
padLabel,
1414
} from '../theme.js';
1515
import { normalizePath } from '../../core/helpers/normalizePath.js';
1616

@@ -58,10 +58,10 @@ export function printFrameworkWarnings(
5858

5959
for (const { w, locations } of grouped.values()) {
6060
console.log(
61-
`${label(w.variable.padEnd(UI_LABEL_WIDTH))}${textColor(wrapReason(w.reason))}`,
61+
`${label(padLabel(w.variable))}${textColor(wrapReason(w.reason))}`,
6262
);
6363
for (const loc of locations) {
64-
console.log(`${label(''.padEnd(UI_LABEL_WIDTH))}${dim(loc)}`);
64+
console.log(`${label(padLabel(''))}${dim(loc)}`);
6565
}
6666
}
6767

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import {
2-
UI_LABEL_WIDTH,
3-
accent,
4-
label,
5-
value,
6-
divider,
7-
header,
8-
} from '../theme.js';
1+
import { accent, label, value, divider, header, padLabel } from '../theme.js';
92

103
/**
114
* Prints the header for the scanning output.
@@ -19,7 +12,7 @@ export function printHeader(comparedAgainst?: string): void {
1912
console.log(`${accent('▸')} ${header('dotenv-diff')}`);
2013
console.log(`${divider}`);
2114
console.log(
22-
`${label('Comparing against'.padEnd(UI_LABEL_WIDTH))}${value(comparedAgainst)}`,
15+
`${label(padLabel('Comparing against'))}${value(comparedAgainst)}`,
2316
);
2417
console.log(`${divider}`);
2518
}

0 commit comments

Comments
 (0)