beam-cli
Version:
A beautifully simple CLI for running Lighthouse audits on a statically generated (SSG) website
64 lines (63 loc) • 2.67 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { Box, useInput } from 'ink';
import figures from 'figures';
import open from 'open';
import { categoryTitles } from '../../lighthouse/categories.js';
import { useListIndex, useListItem } from '../hooks/use-list-item.js';
import { ExplorerHeader } from './header.js';
import { ExplorerTable } from './table.js';
import { getSortCategories, sortResults } from './sorting.js';
const tabs = ['Lighthouse Scores', 'Page Sizes'];
export const Explorer = ({ results, }) => {
const [selectedTab, previousTab, nextTab] = useListItem(tabs, tabs[0], {
loops: true,
});
const [ascending, setAscending] = useState(false);
const [sortCategories, setSortCategories] = useState([]);
const [sortCat, previousSortCat, nextSortCat] = useListItem(sortCategories, 'path', { loops: true });
const [sortedResults, setSortedResults] = useState([]);
const [selectedIndex, previousItem, nextItem] = useListIndex(sortedResults);
useEffect(() => {
if (selectedTab === 'Page Sizes') {
setSortCategories(['path', 'size']);
return;
}
setSortCategories(getSortCategories(results));
}, [results, selectedTab]);
const [sortDescription, setSortDescription] = useState('');
useEffect(() => {
setSortDescription(`${ascending ? figures.arrowUp : figures.arrowDown} ${categoryTitles[sortCat] ?? 'Path'}`);
setSortedResults(sortResults(results, sortCat, ascending));
}, [ascending, sortCat, results]);
useInput(async (input, key) => {
if (key.tab) {
if (key.shift) {
previousTab();
}
else {
nextTab();
}
}
if (input === '-')
setAscending(false);
if (input === '=')
setAscending(true);
if (key.upArrow)
previousItem();
if (key.downArrow)
nextItem();
if (input === 's' || input === ']')
nextSortCat();
if (input === '[')
previousSortCat();
if (key.return) {
const selectedResult = sortedResults[selectedIndex];
if (selectedResult?.htmlPath) {
void open(selectedResult.htmlPath);
}
}
});
return (React.createElement(Box, { flexDirection: 'column' },
React.createElement(ExplorerHeader, { tabs: tabs, sortDescription: sortDescription, selectedTab: selectedTab }),
React.createElement(ExplorerTable, { results: sortedResults, selectedIndex: selectedIndex, selectedCategory: sortCat ?? 'path', selectedTab: selectedTab })));
};