feat: basic table icon

src/components/icons.tsx

@@ -33,6 +33,9 @@ import {
   FileOutput,
   X,
 } from 'lucide-react';
+import dynamic from 'next/dynamic';
+import dynamicIconImport from 'lucide-react/dynamicIconImports';
+import React from 'react';
 
 export type Icon = keyof typeof Icons;
 
@@ -138,3 +141,26 @@ export function DynamicIcon(props: DynamicIconProps) {
   const Icon = Icons[icon];
   return <Icon {...rest} />;
 }
+
+interface LooseIconProps extends LucideProps {
+  icon: keyof typeof dynamicIconImport | undefined | null;
+}
+
+export const allIconNames = Object.keys(dynamicIconImport);
+
+export function isValidIconName(
+  icon: string | null | undefined,
+): icon is keyof typeof dynamicIconImport {
+  if (!icon) return false;
+  return allIconNames.includes(icon);
+}
+
+function LooseIconRaw({ icon, ...props }: LooseIconProps) {
+  if (!icon) return null;
+
+  const LucideIcon = dynamic(dynamicIconImport[icon]);
+
+  return <LucideIcon {...props} />;
+}
+
+export const LooseIcon = React.memo(LooseIconRaw);

src/components/nodes/floating-nodes.tsx

@@ -2,16 +2,22 @@ import { tableSchema } from '@/lib/table';
 import React, { memo } from 'react';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { Separator } from '../ui/separator';
+import { LooseIcon, isValidIconName } from '../icons';
 
 export const FloatingNode = memo((props: NodeProps) => {
   const table = tableSchema.safeParse(props.data);
 
   if (!table.success) return null;
 
+  const icon = isValidIconName(table.data.icon) ? table.data.icon : null;
+
   return (
     <React.Fragment>
       <div className="bg-secondary py-2 flex flex-col border rounded-lg">
-        <h3 className="font-semibold px-4">{table.data.name}</h3>
+        <span className="flex justify-between items-center px-4">
+          <h3 className="font-semibold">{table.data.name}</h3>
+          <LooseIcon icon={icon} size={16} />
+        </span>
         <Separator className="my-2" />
         <ul>
           {table.data.columns.map(column => (

src/lib/lang-miro/grammar/miro.grammar

@@ -1,18 +1,30 @@
 @top Database { Table }
 
-Table { TableName "{" commaSep<Column>? "}" }
+Table { 
+  TableName Icon?
+  "{" commaSep<Column>? "}"
+}
+
+Icon { "i-" IconName }
 
-Column { ColumnName ColumnType list<Constraint>? Relationship? }
+Column { 
+  ColumnName 
+  ColumnType 
+  list<Constraint>? 
+  Relationship? 
+}
 
 Relationship { "->" TableName "." ColumnName }
 
 @tokens {
-  TableName { Identifier }
-  ColumnName { Identifier }
+  TableName { Name }
+  ColumnName { Name }
   ColumnType { Identifier }
   Constraint { Identifier }
   space { $[\r\t\n ] }
-  Identifier { $[A-Za-z_]+ }
+  Identifier { $[\[A-Za-z_?\]]+ }
+  Name { $[A-Za-z_]+ }
+  IconName { $[\[A-Za-z_?\-\]]+ }
   "{" "}"
 }
 

src/lib/lang-miro/grammar/miro.terms.ts

@@ -3,8 +3,10 @@ export const
   Database = 1,
   Table = 3,
   TableName = 4,
-  Column = 6,
-  ColumnName = 7,
-  ColumnType = 8,
-  Constraint = 9,
-  Relationship = 10
+  Icon = 5,
+  IconName = 6,
+  Column = 8,
+  ColumnName = 9,
+  ColumnType = 10,
+  Constraint = 11,
+  Relationship = 12

src/lib/lang-miro/grammar/miro.ts

@@ -3,16 +3,16 @@ import {LRParser} from "@lezer/lr"
 import {MiroStyleTags} from "../highlight"
 export const parser = LRParser.deserialize({
   version: 14,
-  states: "$[OVQPOOO[QPO'#C_QOQPOOOaQQO,58yOiQSO'#CbOnQPO'#ClOOQO1G.e1G.eOvQPO1G.eO{QWO,58|O!ZQQO'#ChO!fQPO,59WOOQO7+$P7+$PO!nQWO'#CmO!|QPO'#CfOOQO1G.h1G.hO#RQPO1G.hOOQO,59S,59SOOQO-E6f-E6fOOQO'#Cg'#CgO#^QWO,59XO#lQPO,59QOOQO7+$S7+$SOOQO-E6e-E6eO#qQQO1G.lOOQO7+$W7+$W",
-  stateData: "#v~O_OS~OSPO~OTRO~OQUOVSO~OWWO~OdXOQ`X~OQZO~OX[Ob]OQUadUa~OVSOQ[Xd[X~OdXOQ`a~OXbOQaXbaXdaX~OSdO~Ob]OQUidUi~OXbOQaabaadaa~OcgO~OVhO~O",
-  goto: "!UbPPPcPPfPPPlrxPPP!O!RRQOQTRR`XQ^WRe_Qc[RfcQYTRaYRVRR_W",
-  nodeNames: "⚠ Database } Table TableName { Column ColumnName ColumnType Constraint Relationship",
-  maxTerm: 20,
+  states: "%QOVQPOOO[QQO'#C_QOQPOOOdQSO'#CaOiQWO,58yOqQPO,58yOOQO,58{,58{OvQ`O'#CdO{QPO'#CoOOQO1G.e1G.eO!TQPO1G.eO!YQWO1G.eO!bQpO,59OO!pQWO'#CjO!{QPO,59ZOOQO7+$P7+$PO#TQPO7+$PO#YQpO'#CpO#hQPO'#ChOOQO1G.j1G.jO#mQPO1G.jOOQO,59U,59UOOQO-E6h-E6hOOQO<<Gk<<GkOOQO'#Ci'#CiO#xQpO,59[O$WQPO,59SOOQO7+$U7+$UOOQO-E6g-E6gO$]QWO1G.nOOQO7+$Y7+$Y",
+  stateData: "$b~OaOS~OSPO~OVSObRO~OUUO~OQXOXVO~OVZO~OY[O~Og]OQcX~OQ_O~OQ_OXVO~OZaOebOQWagWa~OXVOQ^Xg^X~Og]OQca~OQgO~OZhOQdXedXgdX~OSjO~OebOQWigWi~OZhOQdaedagda~OfmO~OXnO~O",
+  goto: "!`ePPPfPiPPlPPPsy!PPPPP!V!]RQORTPSWSZRe]Qc[RkdQiaRliQ^WRf^QYSR`ZRd[",
+  nodeNames: "⚠ Database } Table TableName Icon IconName { Column ColumnName ColumnType Constraint Relationship",
+  maxTerm: 23,
   propSources: [MiroStyleTags],
   skippedNodes: [0],
   repeatNodeCount: 2,
-  tokenData: "#R~R[XYwYZw]^wpqw|}|}!O!R!O!P!^!c!}!c#R#S!c#T#o!c#o#p!w#q#r!|~|O_~~!ROd~~!UP!`!a!X~!^Ob~~!cOc~_!nRVQWSXWSP!c!}!c#R#S!c#T#o!c~!|OT~~#ROQ~",
-  tokenizers: [0, 1, 2, 3],
+  tokenData: "&s~RaXY!WYZ!W]^!Wpq!W|}!]}!O!b!O!P#p!a!b#u!c!}$e!}#O#u#P#Q#u#R#S$e#T#]$e#]#^%X#^#o$e#o#p&i#q#r&n~!]Oa~~!bOg~u!gWUS}!O#P!`!a#k!a!b#P!c!}#P!}#O#P#P#Q#P#R#S#P#T#o#PS#UVUS}!O#P!a!b#P!c!}#P!}#O#P#P#Q#P#R#S#P#T#o#Pq#pOeq~#uOf~!U$OVY`ZpUS}!O#P!a!b#u!c!}#u!}#O#u#P#Q#u#R#S#u#T#o#u!_$rVXWY`ZpUSSP}!O#P!a!b#u!c!}$e!}#O#u#P#Q#u#R#S$e#T#o$e!a%fVXWY`ZpUSSP}!O%{!a!b#u!c!}$e!}#O#u#P#Q#u#R#S$e#T#o$eU&SVbQUS}!O#P!a!b#P!c!}#P!}#O#P#P#Q#P#R#S#P#T#o#P~&nOV~~&sOQ~",
+  tokenizers: [0, 1, 2, 3, 4, 5],
   topRules: {"Database":[0,1]},
   tokenPrec: 0
 })

src/lib/lang-miro/index.ts

@@ -17,6 +17,7 @@ import {
 } from '@codemirror/autocomplete';
 import { MiroHighlighting, MiroStyleTags } from './highlight';
 import { linter, Diagnostic } from '@codemirror/lint';
+import { allIconNames } from '@/components/icons';
 
 let parserWithMetadata = parser.configure({
   props: [
@@ -51,6 +52,13 @@ export const miroDefaultCompletion = completeFromList([
   { label: 'date', type: 'keyword' },
 ]);
 
+export const iconCompletion = completeFromList(
+  allIconNames.map(icon => ({
+    label: `i-${icon}`,
+    type: 'icon',
+  })),
+);
+
 const miroTypeCompletion = (
   context: CompletionContext,
 ): CompletionResult | null => {
@@ -103,7 +111,7 @@ export function miro() {
     MiroHighlighting,
     MiroLinter,
     autocompletion({
-      override: [miroTypeCompletion, completeAnyWord],
+      override: [miroTypeCompletion, completeAnyWord, iconCompletion],
     }),
   ]);
 }

src/lib/lang-miro/parser.ts

@@ -11,7 +11,7 @@ export class MiroLang {
     this.tree = parser.parse(this.miroLang);
   }
 
-  private nodeToString(node: SyntaxNode | undefined): string {
+  private nodeToString(node: SyntaxNode | undefined | null): string {
     if (!node) return '';
     return this.miroLang.slice(node.from, node.to);
   }
@@ -25,6 +25,10 @@ export class MiroLang {
       .forEach(tableNode => {
         const tableName = this.nodeToString(tableNode.firstChild!);
 
+        const icon = this.nodeToString(
+          tableNode.firstChild?.nextSibling,
+        ).substring(2);
+
         const columns = tableNode.getChildren('Column').map(columnNode => {
           const columnName = this.nodeToString(columnNode.firstChild!);
           const columnType = this.nodeToString(
@@ -61,6 +65,7 @@ export class MiroLang {
 
         tables.push({
           name: tableName,
+          icon,
           columns,
         });
       });

src/lib/table.ts

@@ -22,6 +22,7 @@ export const columnSchema = z.object({
 
 export const tableSchema = z.object({
   name: z.string(),
+  icon: z.string().optional(),
   columns: z.array(columnSchema),
 });