Skip to content

Commit

Permalink
Merge pull request #1551 from finos/showcase-search
Browse files Browse the repository at this point in the history
identify imported components in exhibits, remove displaySequence
  • Loading branch information
heswell authored Nov 30, 2024
2 parents 06f888d + bd5012e commit f439bc9
Show file tree
Hide file tree
Showing 122 changed files with 321 additions and 1,986 deletions.
1 change: 1 addition & 0 deletions .semgrepignore
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ vuu-ui/packages/vuu-ui-controls/src/list/Highlighter.tsx
vuu-ui/packages/vuu-ui-controls/src/list/common-hooks/utils/filter-utils.ts
vuu-ui/packages/vuu-utils/src/url-utils.ts
vuu-ui/showcase/scripts/build-file-list.mjs
vuu-ui/showcase/scripts/searchTargetsFromFileSystem.ts
vuu-ui/showcase/src/index.tsx
vuu-ui/showcase/src/examples/Layout/Menu.examples.tsx
vuu-ui/tools/websocket-test.html
Expand Down
3 changes: 2 additions & 1 deletion vuu-ui/showcase/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"build": "node ./scripts/build.mjs",
"dev": "vite",
"docs": "node ./scripts/build-docs.mjs",
"showcase": "tsx ./scripts/showcase.ts"
"showcase": "tsx ./scripts/showcase.ts",
"search-tree": "tsx ./scripts/build-search-tree.ts"
},
"keywords": [],
"author": "heswell",
Expand Down
14 changes: 14 additions & 0 deletions vuu-ui/showcase/scripts/build-search-tree.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import path from "path";
import { searchTargetsFromFileSystem } from "./searchTargetsFromFileSystem";
import { writeFile } from "../../scripts/utils.mjs";

const outdir = "dist";

const start = performance.now();
const treeSourceJson = searchTargetsFromFileSystem("./src/examples", "");
const end = performance.now();
console.log(`building the search tree took ${end - start} ms`);
await writeFile(
`export default ${JSON.stringify(treeSourceJson, null, 2)};`,
path.resolve(outdir, "searchTreeJson.js"),
);
108 changes: 108 additions & 0 deletions vuu-ui/showcase/scripts/searchTargetsFromFileSystem.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import fs from "fs";
import path from "path";
import { type TreeSourceNode } from "@finos/vuu-utils";

const lastPathSegment = (path: string, separator = "/") => {
const root = path.endsWith(separator) ? path.slice(0, -1) : path;
return root.slice(root.lastIndexOf(separator) + 1);
};

export const dropLastPathSegment = (path: string, separator = "/") => {
return path.slice(0, path.lastIndexOf(separator));
};

const importExportPattern =
/(?:^(import) \{([^}]+)\} from "(.*)";)|(?:(export) const ([A-Z][a-zA-Z]+))/gm;
const importSeparator = /\s*,\s*/;
const componentPattern = /^[A-Z]/;

export const searchTargetsFromFileSystem = (
exhibitsPath: string,
route: string,
icon = "folder",
): TreeSourceNode[] => {
const treeSourceNodes: TreeSourceNode[] = [];
fs.readdirSync(exhibitsPath).forEach((fileName) => {
const filePath = path.join(exhibitsPath, fileName);
if (fs.lstatSync(filePath).isDirectory()) {
const childNodes = searchTargetsFromFileSystem(
filePath,
`${route}${fileName}/`,
"box",
);

const treeSourceNode: TreeSourceNode = {
childNodes,
id: `${route}${fileName}`,
icon,
label: fileName,
};
if (
Array.isArray(treeSourceNode.childNodes) &&
treeSourceNode.childNodes.length > 0
) {
treeSourceNodes.push(treeSourceNode);
}
} else if (fileName.match(/(examples.tsx|.mdx)$/)) {
const name = dropLastPathSegment(dropLastPathSegment(fileName, "."), ".");
const id = `${route}${name}`;
if (name !== lastPathSegment(route)) {
treeSourceNodes.push({
id,
icon: "box",
label: name,
childNodes: showcaseComponentsAsTreeNodes(
exhibitsPath,
`${route}${name}/`,
fileName,
),
});
} else {
treeSourceNodes.push(
...showcaseComponentsAsTreeNodes(exhibitsPath, route, fileName),
);
}
}
});
return treeSourceNodes;
};

const showcaseComponentsAsTreeNodes = (
exhibitsPath: string,
route,
fileName: string,
) => {
const imports: string[] = [];
const filePath = path.join(exhibitsPath, fileName);
const text = fs.readFileSync(filePath).toString();
let match = importExportPattern.exec(text);
const treeSourceNodes: TreeSourceNode[] = [];
while (match != null) {
if (match[1] === "import") {
// Note the importa are file level, we need to tie them to
// individual exhibits
const importTarget = match[2];
// const importSource = match[3];
const importedComponents = importTarget
.trim()
.split(importSeparator)
.filter((name) => componentPattern.test(name));
imports.push(...importedComponents);
} else if (match[4] === "export") {
const componentName = match[5];
treeSourceNodes.push({
id: `${route}${componentName}`,
label: componentName,
nodeData: {
componentName,
imports,
path: `${exhibitsPath}/${fileName}`,
},
});
}

match = importExportPattern.exec(text);
}

return treeSourceNodes;
};
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getSchema, LocalDataSourceProvider } from "@finos/vuu-data-test";
import { DataSourceFilter, TableSchema } from "@finos/vuu-data-types";
import { Table, TableProps } from "@finos/vuu-table";
import {
import { DataSourceFilter, type TableSchema } from "@finos/vuu-data-types";
import { Table, type TableProps } from "@finos/vuu-table";
import type {
ColumnDescriptor,
TableConfig,
TableRowSelectHandler,
Expand Down Expand Up @@ -30,8 +30,6 @@ registerComponent("pin-button", PinButtonCell, "cell-renderer", {
userCanAssign: false,
});

let displaySequence = 0;

const TableTemplate = ({
filter,
config,
Expand Down Expand Up @@ -154,7 +152,6 @@ export const PinItemButton = () => {
</LocalDataSourceProvider>
);
};
PinItemButton.displaySequence = displaySequence++;

export const SearchWithPin = () => {
const schema = getSchema("instruments");
Expand All @@ -180,7 +177,6 @@ export const SearchWithPin = () => {
</LocalDataSourceProvider>
);
};
SearchWithPin.displaySequence = displaySequence++;

const EmptyRecent = () => {
return <div style={{ padding: "12px 6px" }}>No recently viewed items</div>;
Expand Down Expand Up @@ -324,7 +320,6 @@ export const SearchAndPinned = () => {
</LocalDataSourceProvider>
);
};
SearchAndPinned.displaySequence = displaySequence++;

export const SearchAndPinnedWithAdditionalContent = () => {
const schema = getSchema("instruments");
Expand Down Expand Up @@ -386,4 +381,3 @@ export const SearchAndPinnedWithAdditionalContent = () => {
</LocalDataSourceProvider>
);
};
SearchAndPinnedWithAdditionalContent.displaySequence = displaySequence++;
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ import { LinkedDataSources, LinkedTableView } from "@finos/vuu-datatable";
import { TableSearch } from "@finos/vuu-ui-controls";
import { useDataSource } from "@finos/vuu-utils";

let displaySequence = 1;

// prettier-ignore
const ParentTableSchema:TableSchema = {
columns: [
Expand Down Expand Up @@ -283,7 +281,6 @@ export const SimpleCrossTableFiltering = () => {
</LayoutProvider>
);
};
SimpleCrossTableFiltering.displaySequence = displaySequence++;

const TableSearchTemplate = ({
schema,
Expand Down Expand Up @@ -401,4 +398,3 @@ export const FilteredLinkedTableView = () => {
</LocalDataSourceProvider>
);
};
FilteredLinkedTableView.displaySequence = displaySequence++;
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,10 @@ import { AppHeader } from "./app-header";

registerComponent("LayoutComponentsPanel", LayoutComponentsPanel, "view");

let displaySequence = 0;

export const TabbedLayoutComponents = () => {
const demoPersistenceManager = useMemo(
() => new StaticPersistenceManager({ layoutMetadata }),
[]
[],
);

return (
Expand All @@ -40,12 +38,11 @@ export const TabbedLayoutComponents = () => {
</PersistenceProvider>
);
};
TabbedLayoutComponents.displaySequence = displaySequence++;

export const TabbedLayoutComponentsWithDragDrop = () => {
const demoPersistenceManager = useMemo(
() => new StaticPersistenceManager({ layoutMetadata }),
[]
[],
);

return (
Expand Down Expand Up @@ -78,12 +75,11 @@ export const TabbedLayoutComponentsWithDragDrop = () => {
</PersistenceProvider>
);
};
TabbedLayoutComponentsWithDragDrop.displaySequence = displaySequence++;

export const FlyoutLayoutAndSettingsWithDragDrop = () => {
const demoPersistenceManager = useMemo(
() => new StaticPersistenceManager({ layoutMetadata }),
[]
[],
);

const applicationSettingsSchema: SettingsSchema = {
Expand Down Expand Up @@ -153,4 +149,3 @@ export const FlyoutLayoutAndSettingsWithDragDrop = () => {
</PersistenceProvider>
);
};
FlyoutLayoutAndSettingsWithDragDrop.displaySequence = displaySequence++;
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import { LocalDataSourceProvider } from "@finos/vuu-data-test";
import { DataValueDescriptor } from "@finos/vuu-data-types";
import { DialogProvider } from "@finos/vuu-popups";

let displaySequence = 0;

const instrumentsTable = { module: "SIMUL", table: "instruments" };

const formFieldDescriptors: DataValueDescriptor[] = [
Expand Down Expand Up @@ -92,4 +90,3 @@ export const RightInlineEditForm = () => (
<TableWithInlineEditForm />
</LocalDataSourceProvider>
);
RightInlineEditForm.displaySequence = displaySequence++;
4 changes: 0 additions & 4 deletions vuu-ui/showcase/src/examples/Apps/SampleApp.examples.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ registerComponent("TableSettings", TableSettingsPanel, "view");

const user = { username: "why-the-lucky-stiff", token: "test-token" };

let displaySequence = 1;

const getFeaturePath: GetFeaturePaths = ({
env,
fileName,
Expand Down Expand Up @@ -162,5 +160,3 @@ export const SampleAppDefaultFeatures = () => {
</LocalDataSourceProvider>
);
};

SampleAppDefaultFeatures.displaySequence = displaySequence++;
7 changes: 2 additions & 5 deletions vuu-ui/showcase/src/examples/Apps/SimpleApp.examples.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import { useCallback, useMemo } from "react";

import "./SimpleApp.css";

let displaySequence = 1;

const classBase = "vuuSimpleApp";

export const SimpleApp = () => {
Expand All @@ -33,7 +31,7 @@ export const SimpleApp = () => {
dataSource: simulModule.createDataSource("instruments"),
showColumnHeaderMenus: false,
}),
[schema]
[schema],
);

const handleApplyFilter = useCallback((filter: DataSourceFilter) => {
Expand All @@ -58,7 +56,7 @@ export const SimpleApp = () => {
dataSource: simulModule.createDataSource("instruments"),
showColumnHeaderMenus: false,
}),
[schema]
[schema],
);

return (
Expand Down Expand Up @@ -128,4 +126,3 @@ export const SimpleApp = () => {
</LayoutProvider>
);
};
SimpleApp.displaySequence = displaySequence++;
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { UnsavedChangesReport } from "@finos/vuu-data-react";
import { Entity } from "@finos/vuu-utils";

let displaySequence = 1;

export const DefaultUnsavedChangesReport = () => {
const entity: Entity = {
price: 200.5,
Expand All @@ -20,4 +18,3 @@ export const DefaultUnsavedChangesReport = () => {
</div>
);
};
DefaultUnsavedChangesReport.displaySequence = displaySequence++;
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ import { useAutoLoginToVuuServer } from "../utils";
import { VuuDataSourceProvider } from "@finos/vuu-data-react";
import { View } from "@finos/vuu-layout";

let displaySequence = 1;

type FilterTableTemplateProps = {
style?: CSSProperties;
tableSchema?: TableSchema;
Expand Down Expand Up @@ -89,7 +87,6 @@ export const FilterTableVuuInstruments = () => {
</VuuDataSourceProvider>
);
};
FilterTableVuuInstruments.displaySequence = displaySequence++;

export const FilterTableArrayDataInstruments = () => {
return (
Expand All @@ -98,7 +95,6 @@ export const FilterTableArrayDataInstruments = () => {
</LocalDataSourceProvider>
);
};
FilterTableArrayDataInstruments.displaySequence = displaySequence++;

export const FilterTableInstrumentsQuickFilters = () => (
<LocalDataSourceProvider modules={["SIMUL"]}>
Expand All @@ -110,19 +106,15 @@ export const FilterTableInstrumentsQuickFilters = () => (
/>
</LocalDataSourceProvider>
);
FilterTableInstrumentsQuickFilters.displaySequence = displaySequence++;

export const FilterTableArrayDataInstrumentsFullFilters = () => (
<LocalDataSourceProvider modules={["SIMUL"]}>
<FilterTableTemplate variant="full-filters" />
</LocalDataSourceProvider>
);
FilterTableArrayDataInstrumentsFullFilters.displaySequence = displaySequence++;

export const FilterTableArrayDataInstrumentsFixedHeightContainer = () => (
<LocalDataSourceProvider modules={["SIMUL"]}>
<FilterTableTemplate style={{ height: 600, width: 900 }} />
</LocalDataSourceProvider>
);
FilterTableArrayDataInstrumentsFixedHeightContainer.displaySequence =
displaySequence++;
Loading

0 comments on commit f439bc9

Please sign in to comment.