Skip to content

Commit 0fce54e

Browse files
thedanchezthedanchez
committed
feat: initial implementation of solid-g6
1 parent 72c62bb commit 0fce54e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+15537
-298
lines changed

‎README.md‎

Lines changed: 850 additions & 53 deletions
Large diffs are not rendered by default.

‎bun.lock‎

Lines changed: 455 additions & 196 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jsr.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "template-solidjs-library",
2+
"name": "@dschz/solid-g6",
33
"version": "0.0.0",
44
"license": "MIT",
55
"exports": "./src/index.tsx",

‎package.json‎

Lines changed: 70 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,68 @@
11
{
2-
"name": "template-solidjs-library",
2+
"name": "@dschz/solid-g6",
33
"version": "0.0.0",
4-
"description": "Template for SolidJS library using tsup for bundling. Configured with Bun, NVM, TypeScript, ESLint, Prettier, Vitest, and GHA",
4+
"description": "A SolidJS component library for graph visualization, powered by @antv/g6",
55
"type": "module",
66
"author": "Daniel Sanchez <dsanc89@icloud.com>",
77
"license": "MIT",
8-
"homepage": "https://github.com/thedanchez/template-solidjs-library#readme",
8+
"homepage": "https://github.com/dsnchz/solid-g6#readme",
99
"repository": {
1010
"type": "git",
11-
"url": "https://github.com/thedanchez/template-solidjs-library.git"
11+
"url": "https://github.com/dsnchz/solid-g6.git"
1212
},
1313
"bugs": {
14-
"url": "https://github.com/thedanchez/template-solidjs-library/issues"
14+
"url": "https://github.com/dsnchz/solid-g6/issues"
1515
},
1616
"publishConfig": {
1717
"access": "public"
1818
},
19+
"keywords": [
20+
"antv",
21+
"antv-g6",
22+
"canvas",
23+
"component",
24+
"custom-nodes",
25+
"dag",
26+
"dagre",
27+
"data-viz",
28+
"data-visualization",
29+
"diagram",
30+
"diagram-editor",
31+
"flow-diagram",
32+
"flowchart",
33+
"force-directed-graph",
34+
"force-graph",
35+
"g6",
36+
"graph",
37+
"graph-component",
38+
"graph-editor",
39+
"graph-layout",
40+
"graph-library",
41+
"graph-visualization",
42+
"graphing",
43+
"graphs",
44+
"interactive-graph",
45+
"layout",
46+
"network",
47+
"network-graph",
48+
"node-editor",
49+
"node-graph",
50+
"node-layout",
51+
"node-ui",
52+
"reactive",
53+
"solid",
54+
"solid-component",
55+
"solid-g6",
56+
"solidjs",
57+
"svg",
58+
"topology",
59+
"topology-graph",
60+
"typescript",
61+
"ui-library",
62+
"visual-editor",
63+
"visualization",
64+
"wrapper"
65+
],
1966
"files": [
2067
"dist"
2168
],
@@ -50,33 +97,38 @@
5097
"typecheck": "tsc --noEmit"
5198
},
5299
"devDependencies": {
53-
"@changesets/cli": "^2.29.3",
100+
"@antv/g6": "^5.0.48",
101+
"@changesets/cli": "^2.29.4",
102+
"@solid-primitives/resize-observer": "^2.1.1",
54103
"@solidjs/router": "^0.15.3",
55104
"@solidjs/testing-library": "^0.8.10",
56-
"@tailwindcss/vite": "^4.1.5",
105+
"@tailwindcss/vite": "^4.1.8",
106+
"@tanstack/solid-query": "^5.80.6",
57107
"@testing-library/jest-dom": "^6.6.3",
58-
"@types/bun": "^1.2.12",
59-
"@typescript-eslint/eslint-plugin": "^8.32.0",
60-
"@typescript-eslint/parser": "^8.32.0",
61-
"@vitest/coverage-istanbul": "^3.1.3",
62-
"eslint": "^9.26.0",
108+
"@types/bun": "^1.2.15",
109+
"@types/dagre": "^0.7.52",
110+
"@typescript-eslint/eslint-plugin": "^8.33.1",
111+
"@typescript-eslint/parser": "^8.33.1",
112+
"@vitest/coverage-istanbul": "^3.2.2",
113+
"eslint": "^9.28.0",
63114
"eslint-plugin-simple-import-sort": "^12.1.1",
64115
"eslint-plugin-solid": "^0.14.5",
65-
"globals": "^16.1.0",
116+
"globals": "^16.2.0",
66117
"jiti": "^2.4.2",
67118
"jsdom": "^26.1.0",
68119
"prettier": "^3.5.3",
69-
"solid-js": "^1.9.6",
70-
"tailwindcss": "^4.1.5",
71-
"tsup": "^8.4.0",
120+
"solid-js": "^1.9.7",
121+
"tailwindcss": "^4.1.8",
122+
"tsup": "^8.5.0",
72123
"tsup-preset-solid": "^2.2.0",
73124
"typescript": "^5.8.3",
74-
"typescript-eslint": "^8.32.0",
125+
"typescript-eslint": "^8.33.1",
75126
"vite": "^6.3.5",
76127
"vite-plugin-solid": "^2.11.6",
77-
"vitest": "^3.1.3"
128+
"vitest": "^3.2.2"
78129
},
79130
"peerDependencies": {
131+
"@antv/g6": ">=5.0.0",
80132
"solid-js": ">=1.6.0"
81133
}
82134
}

‎playground/App.tsx‎

Lines changed: 136 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,164 @@
11
import { Route, Router } from "@solidjs/router";
2-
import { ErrorBoundary, For, type JSX, type ParentProps } from "solid-js";
2+
import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
3+
import type { Component, ParentProps } from "solid-js";
4+
import { ErrorBoundary } from "solid-js";
35

46
import { Navbar } from "./Navbar";
7+
import { Behaviors } from "./pages/Behaviors";
8+
import { EdgeTypes } from "./pages/EdgeTypes";
59
import { ErrorPage } from "./pages/Error";
10+
import { Events } from "./pages/Events";
11+
import { GraphChildren } from "./pages/GraphChildren";
612
import { Home } from "./pages/Home";
13+
import { Layouts } from "./pages/Layouts";
14+
import { NodeTypes } from "./pages/NodeTypes";
715
import { NotFound } from "./pages/NotFound";
16+
import { Overview } from "./pages/Overview";
17+
import { States } from "./pages/States";
818

9-
type Page = {
10-
readonly path: string;
11-
readonly component: () => JSX.Element;
12-
};
19+
export interface Page {
20+
path: string;
21+
name: string;
22+
title: string;
23+
icon: string;
24+
component: Component;
25+
}
1326

14-
const PAGES: readonly Page[] = [
27+
// Simple page definitions - keeping it minimal
28+
export const PAGES: Page[] = [
1529
{
1630
path: "/",
31+
name: "Home",
32+
title: "Home",
33+
icon: "🏠",
1734
component: Home,
1835
},
36+
{
37+
path: "/overview",
38+
name: "Overview",
39+
title: "Overview",
40+
icon: "📖",
41+
component: Overview,
42+
},
43+
{
44+
path: "/node-types",
45+
name: "Node Types",
46+
title: "Node Types",
47+
icon: "🔷",
48+
component: NodeTypes,
49+
},
50+
{
51+
path: "/edge-types",
52+
name: "Edge Types",
53+
title: "Edge Types",
54+
icon: "🔗",
55+
component: EdgeTypes,
56+
},
57+
{
58+
path: "/states",
59+
name: "Element States",
60+
title: "States",
61+
icon: "⚡",
62+
component: States,
63+
},
64+
{
65+
path: "/graph-children",
66+
name: "Graph Children",
67+
title: "Graph Children",
68+
icon: "👶",
69+
component: GraphChildren,
70+
},
71+
{
72+
path: "/behaviors",
73+
name: "Behaviors",
74+
title: "Behaviors",
75+
icon: "🎯",
76+
component: Behaviors,
77+
},
78+
{
79+
path: "/events",
80+
name: "Events",
81+
title: "Events",
82+
icon: "⚡",
83+
component: Events,
84+
},
85+
{
86+
path: "/layouts",
87+
name: "Layouts",
88+
title: "Layouts",
89+
icon: "🌐",
90+
component: Layouts,
91+
},
1992
{
2093
path: "*",
94+
name: "Not Found",
95+
title: "Not Found",
96+
icon: "❓",
2197
component: NotFound,
2298
},
2399
];
24100

25-
const MainContent = (props: ParentProps) => {
101+
// Simple navigation structure
102+
export const NAV_STRUCTURE = [
103+
{
104+
name: "Home",
105+
icon: "🏠",
106+
pages: PAGES.filter((p) => p.path === "/"),
107+
},
108+
{
109+
name: "Documentation",
110+
icon: "📖",
111+
pages: PAGES.filter((p) => p.path === "/overview"),
112+
},
113+
{
114+
name: "Examples",
115+
icon: "📚",
116+
pages: PAGES.filter((p) => p.path !== "/" && p.path !== "/overview" && p.path !== "*"),
117+
},
118+
];
119+
120+
// Create query client
121+
const queryClient = new QueryClient({
122+
defaultOptions: {
123+
queries: {
124+
staleTime: 1000 * 60 * 5, // 5 minutes
125+
retry: 1,
126+
},
127+
},
128+
});
129+
130+
// Root layout component that includes the responsive navigation
131+
const RootLayout = (props: ParentProps) => {
26132
return (
27-
<main class="flex flex-col h-full w-full grow overflow-auto bg-app-background">
28-
{props.children}
29-
</main>
133+
<div class="min-h-screen bg-gray-100">
134+
{/* Responsive Navigation */}
135+
<Navbar />
136+
137+
{/* Main content area - responsive margins */}
138+
<div class="pt-16 md:pt-0 md:ml-64">
139+
<main class="min-h-screen">{props.children}</main>
140+
</div>
141+
</div>
30142
);
31143
};
32144

33-
const RootLayout = (props: ParentProps) => (
34-
<div id="root-screen" class="h-screen w-screen">
35-
<Navbar />
36-
<MainContent>{props.children}</MainContent>
37-
</div>
38-
);
39-
40145
export const App = () => {
41146
return (
42147
<ErrorBoundary fallback={(e, r) => <ErrorPage error={e} reset={r} />}>
43-
<Router root={RootLayout}>
44-
<For each={PAGES}>{(page) => <Route path={page.path} component={page.component} />}</For>
45-
</Router>
148+
<QueryClientProvider client={queryClient}>
149+
<Router root={RootLayout}>
150+
<Route path="/" component={Home} />
151+
<Route path="/overview" component={Overview} />
152+
<Route path="/layouts" component={Layouts} />
153+
<Route path="/node-types" component={NodeTypes} />
154+
<Route path="/edge-types" component={EdgeTypes} />
155+
<Route path="/behaviors" component={Behaviors} />
156+
<Route path="/events" component={Events} />
157+
<Route path="/states" component={States} />
158+
<Route path="/graph-children" component={GraphChildren} />
159+
<Route path="*" component={NotFound} />
160+
</Router>
161+
</QueryClientProvider>
46162
</ErrorBoundary>
47163
);
48164
};

0 commit comments

Comments
 (0)