@neo4j-ndl/react 4.18.10 → 4.18.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/_common/TruncatedTextWithTooltip.js +67 -0
- package/lib/cjs/_common/TruncatedTextWithTooltip.js.map +1 -0
- package/lib/cjs/ai/preview/Preview.js +4 -3
- package/lib/cjs/ai/preview/Preview.js.map +1 -1
- package/lib/cjs/ai/preview/stories/index.js +9 -9
- package/lib/cjs/ai/preview/stories/index.js.map +1 -1
- package/lib/cjs/ai/preview/stories/preview-code-confirmation.story.js +1 -1
- package/lib/cjs/ai/preview/stories/preview-code-confirmation.story.js.map +1 -1
- package/lib/cjs/ai/preview/stories/{preview-code-read.story.js → preview-code-cypher.story.js} +2 -2
- package/lib/cjs/ai/preview/stories/preview-code-cypher.story.js.map +1 -0
- package/lib/cjs/ai/preview/stories/preview-code-languages.story.js +1 -1
- package/lib/cjs/ai/preview/stories/preview-code-languages.story.js.map +1 -1
- package/lib/cjs/ai/preview/stories/{preview-code-write.story.js → preview-code-truncation.story.js} +5 -5
- package/lib/cjs/ai/preview/stories/preview-code-truncation.story.js.map +1 -0
- package/lib/esm/_common/TruncatedTextWithTooltip.js +60 -0
- package/lib/esm/_common/TruncatedTextWithTooltip.js.map +1 -0
- package/lib/esm/ai/preview/Preview.js +4 -3
- package/lib/esm/ai/preview/Preview.js.map +1 -1
- package/lib/esm/ai/preview/stories/index.js +6 -6
- package/lib/esm/ai/preview/stories/index.js.map +1 -1
- package/lib/esm/ai/preview/stories/preview-code-confirmation.story.js +1 -1
- package/lib/esm/ai/preview/stories/preview-code-confirmation.story.js.map +1 -1
- package/lib/esm/ai/preview/stories/{preview-code-read.story.js → preview-code-cypher.story.js} +2 -2
- package/lib/esm/ai/preview/stories/preview-code-cypher.story.js.map +1 -0
- package/lib/esm/ai/preview/stories/preview-code-languages.story.js +1 -1
- package/lib/esm/ai/preview/stories/preview-code-languages.story.js.map +1 -1
- package/lib/esm/ai/preview/stories/{preview-code-write.story.js → preview-code-truncation.story.js} +8 -8
- package/lib/esm/ai/preview/stories/preview-code-truncation.story.js.map +1 -0
- package/lib/types/_common/TruncatedTextWithTooltip.d.ts +46 -0
- package/lib/types/_common/TruncatedTextWithTooltip.d.ts.map +1 -0
- package/lib/types/ai/preview/Preview.d.ts +8 -2
- package/lib/types/ai/preview/Preview.d.ts.map +1 -1
- package/lib/types/ai/preview/stories/index.d.ts +4 -4
- package/lib/types/ai/preview/stories/index.d.ts.map +1 -1
- package/lib/types/ai/preview/stories/{preview-code-write.story.d.ts → preview-code-cypher.story.d.ts} +1 -1
- package/lib/types/ai/preview/stories/preview-code-cypher.story.d.ts.map +1 -0
- package/lib/types/ai/preview/stories/preview-code-languages.story.d.ts.map +1 -1
- package/lib/types/ai/preview/stories/{preview-code-read.story.d.ts → preview-code-truncation.story.d.ts} +1 -1
- package/lib/types/ai/preview/stories/preview-code-truncation.story.d.ts.map +1 -0
- package/package.json +2 -2
- package/skills/ndl-react/SKILL.md +1 -1
- package/skills/ndl-react/components/ai/preview.md +86 -66
- package/skills/ndl-react/components/ai/user-bubble.md +1 -12
- package/skills/ndl-react/components/breadcrumbs.md +2 -2
- package/lib/cjs/ai/preview/stories/preview-code-read.story.js.map +0 -1
- package/lib/cjs/ai/preview/stories/preview-code-write.story.js.map +0 -1
- package/lib/esm/ai/preview/stories/preview-code-read.story.js.map +0 -1
- package/lib/esm/ai/preview/stories/preview-code-write.story.js.map +0 -1
- package/lib/types/ai/preview/stories/preview-code-read.story.d.ts.map +0 -1
- package/lib/types/ai/preview/stories/preview-code-write.story.d.ts.map +0 -1
|
@@ -17,8 +17,9 @@ Import: `import { Preview } from '@neo4j-ndl/react/ai'`
|
|
|
17
17
|
|------|------|----------|---------|-------------|
|
|
18
18
|
| `code` | `string` | ✅ | | The code content to display |
|
|
19
19
|
| `headerActions` | `ReactNode` | | | The actions to display in the header. Should be small buttons or icon buttons only. |
|
|
20
|
+
| `heading` | `string` | | | The heading to display in the header. If not provided, the language will be displayed. Truncates with an ellipsis and shows a tooltip with the full text when space is limited. |
|
|
20
21
|
| `isLoading` | `boolean` | | `false` | Whether the code block is loading |
|
|
21
|
-
| `label` | `'read' \| 'write'` | | | The current state of the code block |
|
|
22
|
+
| `label` | `'read' \| 'write'` | | | The current state of the code block @deprecated - The query should be described in the heading property instead. |
|
|
22
23
|
| `language` | `any` | ✅ | | The language of the code (e.g., 'cypher', 'python', 'javascript') |
|
|
23
24
|
| `ref` | `Ref<HTMLDivElement>` | | | A ref to apply to the root element. |
|
|
24
25
|
| `theme` | `'ndl-code-dark' \| 'ndl-code-light'` | | | The theme of the code block |
|
|
@@ -46,10 +47,35 @@ Import: `import { Preview } from '@neo4j-ndl/react/ai'`
|
|
|
46
47
|
|
|
47
48
|
| Prop | Type | Required | Default | Description |
|
|
48
49
|
|------|------|----------|---------|-------------|
|
|
49
|
-
| `actions` | `ReactNode` | | |
|
|
50
|
-
| `children` | `ReactNode` | | |
|
|
50
|
+
| `actions` | `ReactNode` | | | The actions to display in the header. Should be small buttons or icon buttons only. |
|
|
51
|
+
| `children` | `ReactNode` | | | The content to display in the header. When a plain string is passed, it truncates with an ellipsis and shows a tooltip with the full text when space is limited. |
|
|
51
52
|
| `ref` | `Ref<HTMLDivElement>` | | | A ref to apply to the root element. |
|
|
52
53
|
|
|
54
|
+
## Accessibility
|
|
55
|
+
|
|
56
|
+
## Keyboard interactions
|
|
57
|
+
|
|
58
|
+
| Key | Description |
|
|
59
|
+
| -------- | -------------------------------------------------------------------------------------- |
|
|
60
|
+
| `Tab` | Moves focus to the header heading when it is truncated, then to the header actions |
|
|
61
|
+
| `Escape` | Closes the tooltip showing the full heading text |
|
|
62
|
+
|
|
63
|
+
## Truncated header heading
|
|
64
|
+
|
|
65
|
+
When the header heading (the `heading` of `Preview.Code`, or a plain string passed to `Preview.Header`) does not fit the available space, it truncates with an ellipsis and a tooltip with the full text becomes available.
|
|
66
|
+
|
|
67
|
+
- The heading receives `tabIndex="0"` only while the text is actually clipped, so keyboard users can reveal the full text on focus without a dead tab stop when nothing is hidden
|
|
68
|
+
- The tooltip opens on hover and on keyboard focus, and is dismissible with `Escape` while remaining hoverable and persistent per [WCAG 1.4.13 Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)
|
|
69
|
+
- The heading is intentionally not a button: it performs no action, so button semantics would announce an interaction that does not exist
|
|
70
|
+
- Screen readers always receive the full heading text from the element's own content — CSS truncation is visual-only and does not remove text from the accessibility tree. The tooltip primarily serves sighted mouse and keyboard users
|
|
71
|
+
- The focused heading shows a visible focus outline
|
|
72
|
+
|
|
73
|
+
### Related WCAG criteria
|
|
74
|
+
|
|
75
|
+
- [1.4.13 Content on Hover or Focus](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html) (AA): The tooltip is dismissible (`Escape`), hoverable, and persistent
|
|
76
|
+
- [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) (A): The full heading text is reachable via keyboard focus when truncated
|
|
77
|
+
- [2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html) (AA): The truncated heading shows a focus outline when focused via keyboard
|
|
78
|
+
|
|
53
79
|
## Examples
|
|
54
80
|
|
|
55
81
|
### Code Confirmation
|
|
@@ -76,7 +102,7 @@ const Component = () => {
|
|
|
76
102
|
<Preview.Code
|
|
77
103
|
code={cypherCode}
|
|
78
104
|
language="cypher"
|
|
79
|
-
|
|
105
|
+
heading="Show functions executable by user"
|
|
80
106
|
isLoading={false}
|
|
81
107
|
headerActions={null}
|
|
82
108
|
/>
|
|
@@ -113,24 +139,36 @@ const Component = () => {
|
|
|
113
139
|
export default Component;
|
|
114
140
|
```
|
|
115
141
|
|
|
116
|
-
### Code
|
|
142
|
+
### Code Cypher
|
|
117
143
|
|
|
118
144
|
```tsx
|
|
119
145
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
120
146
|
|
|
147
|
+
import { OutlinedButton } from '@neo4j-ndl/react';
|
|
121
148
|
import { Preview } from '@neo4j-ndl/react/ai';
|
|
149
|
+
import { PencilSquareIconOutline } from '@neo4j-ndl/react/icons';
|
|
122
150
|
|
|
123
|
-
const
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
"""
|
|
127
|
-
query = f"SHOW {function_type} FUNCTIONS EXECUTABLE BY {username}"
|
|
128
|
-
return query`;
|
|
151
|
+
const cypherCode = `SHOW [ALL|BUILT IN|USER DEFINED] FUNCTION[S] EXECUTABLE BY
|
|
152
|
+
username
|
|
153
|
+
[YIELD { * | field[, ...] } [ORDER BY field ...`;
|
|
129
154
|
|
|
130
155
|
const Component = () => {
|
|
131
156
|
return (
|
|
132
157
|
<Preview>
|
|
133
|
-
<Preview.Code
|
|
158
|
+
<Preview.Code
|
|
159
|
+
code={cypherCode}
|
|
160
|
+
language="cypher"
|
|
161
|
+
heading="Show functions executable by user"
|
|
162
|
+
headerActions={
|
|
163
|
+
<OutlinedButton
|
|
164
|
+
leadingVisual={<PencilSquareIconOutline />}
|
|
165
|
+
variant="neutral"
|
|
166
|
+
size="small"
|
|
167
|
+
>
|
|
168
|
+
Send to Query
|
|
169
|
+
</OutlinedButton>
|
|
170
|
+
}
|
|
171
|
+
/>
|
|
134
172
|
</Preview>
|
|
135
173
|
);
|
|
136
174
|
};
|
|
@@ -138,17 +176,28 @@ const Component = () => {
|
|
|
138
176
|
export default Component;
|
|
139
177
|
```
|
|
140
178
|
|
|
141
|
-
### Code
|
|
179
|
+
### Code Languages
|
|
142
180
|
|
|
143
181
|
```tsx
|
|
144
182
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
145
183
|
|
|
146
184
|
import { Preview } from '@neo4j-ndl/react/ai';
|
|
147
185
|
|
|
186
|
+
const pythonCode = `def show_functions(username, function_type='ALL'):
|
|
187
|
+
"""
|
|
188
|
+
Show functions executable by user
|
|
189
|
+
"""
|
|
190
|
+
query = f"SHOW {function_type} FUNCTIONS EXECUTABLE BY {username}"
|
|
191
|
+
return query`;
|
|
192
|
+
|
|
148
193
|
const Component = () => {
|
|
149
194
|
return (
|
|
150
195
|
<Preview>
|
|
151
|
-
<Preview.Code
|
|
196
|
+
<Preview.Code
|
|
197
|
+
code={pythonCode}
|
|
198
|
+
language="python"
|
|
199
|
+
heading="Show functions executable by user"
|
|
200
|
+
/>
|
|
152
201
|
</Preview>
|
|
153
202
|
);
|
|
154
203
|
};
|
|
@@ -156,36 +205,17 @@ const Component = () => {
|
|
|
156
205
|
export default Component;
|
|
157
206
|
```
|
|
158
207
|
|
|
159
|
-
### Code
|
|
208
|
+
### Code Loading
|
|
160
209
|
|
|
161
210
|
```tsx
|
|
162
211
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
163
212
|
|
|
164
|
-
import { OutlinedButton } from '@neo4j-ndl/react';
|
|
165
213
|
import { Preview } from '@neo4j-ndl/react/ai';
|
|
166
|
-
import { PencilSquareIconOutline } from '@neo4j-ndl/react/icons';
|
|
167
|
-
|
|
168
|
-
const cypherCode = `SHOW [ALL|BUILT IN|USER DEFINED] FUNCTION[S] EXECUTABLE BY
|
|
169
|
-
username
|
|
170
|
-
[YIELD { * | field[, ...] } [ORDER BY field ...`;
|
|
171
214
|
|
|
172
215
|
const Component = () => {
|
|
173
216
|
return (
|
|
174
217
|
<Preview>
|
|
175
|
-
<Preview.Code
|
|
176
|
-
code={cypherCode}
|
|
177
|
-
language="cypher"
|
|
178
|
-
label="read"
|
|
179
|
-
headerActions={
|
|
180
|
-
<OutlinedButton
|
|
181
|
-
leadingVisual={<PencilSquareIconOutline />}
|
|
182
|
-
variant="neutral"
|
|
183
|
-
size="small"
|
|
184
|
-
>
|
|
185
|
-
Send to Query
|
|
186
|
-
</OutlinedButton>
|
|
187
|
-
}
|
|
188
|
-
/>
|
|
218
|
+
<Preview.Code code="" language="cypher" isLoading={true} />
|
|
189
219
|
</Preview>
|
|
190
220
|
);
|
|
191
221
|
};
|
|
@@ -193,49 +223,39 @@ const Component = () => {
|
|
|
193
223
|
export default Component;
|
|
194
224
|
```
|
|
195
225
|
|
|
196
|
-
### Code
|
|
226
|
+
### Code Truncation
|
|
197
227
|
|
|
198
228
|
```tsx
|
|
199
229
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
200
230
|
|
|
201
|
-
import {
|
|
231
|
+
import { OutlinedButton } from '@neo4j-ndl/react';
|
|
202
232
|
import { Preview } from '@neo4j-ndl/react/ai';
|
|
203
|
-
import {
|
|
204
|
-
PencilSquareIconOutline,
|
|
205
|
-
PlayCircleIconOutline,
|
|
206
|
-
} from '@neo4j-ndl/react/icons';
|
|
233
|
+
import { PencilSquareIconOutline } from '@neo4j-ndl/react/icons';
|
|
207
234
|
|
|
208
|
-
const cypherCode = `
|
|
209
|
-
|
|
210
|
-
|
|
235
|
+
const cypherCode = `MATCH (person:Person)-[:ACTED_IN]->(movie:Movie)
|
|
236
|
+
WHERE movie.released > 2000
|
|
237
|
+
RETURN person.name, movie.title`;
|
|
211
238
|
|
|
212
239
|
const Component = () => {
|
|
213
240
|
return (
|
|
214
|
-
<
|
|
215
|
-
<Preview
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
<
|
|
222
|
-
|
|
223
|
-
description="Send to Query"
|
|
224
|
-
size="small"
|
|
225
|
-
>
|
|
226
|
-
<PencilSquareIconOutline />
|
|
227
|
-
</CleanIconButton>
|
|
228
|
-
<CleanIconButton
|
|
241
|
+
<div style={{ maxWidth: 400 }}>
|
|
242
|
+
<Preview>
|
|
243
|
+
<Preview.Code
|
|
244
|
+
code={cypherCode}
|
|
245
|
+
language="cypher"
|
|
246
|
+
heading="Find all people who acted in movies released after the year 2000"
|
|
247
|
+
headerActions={
|
|
248
|
+
<OutlinedButton
|
|
249
|
+
leadingVisual={<PencilSquareIconOutline />}
|
|
229
250
|
variant="neutral"
|
|
230
|
-
description="Run in Query"
|
|
231
251
|
size="small"
|
|
232
252
|
>
|
|
233
|
-
|
|
234
|
-
</
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
</
|
|
253
|
+
Send to Query
|
|
254
|
+
</OutlinedButton>
|
|
255
|
+
}
|
|
256
|
+
/>
|
|
257
|
+
</Preview>
|
|
258
|
+
</div>
|
|
239
259
|
);
|
|
240
260
|
};
|
|
241
261
|
|
|
@@ -24,18 +24,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
|
24
24
|
import { UserBubble } from '@neo4j-ndl/react/ai';
|
|
25
25
|
|
|
26
26
|
const Component = () => {
|
|
27
|
-
return
|
|
28
|
-
<UserBubble
|
|
29
|
-
avatarProps={{
|
|
30
|
-
name: 'KM',
|
|
31
|
-
source:
|
|
32
|
-
'https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=',
|
|
33
|
-
type: 'image',
|
|
34
|
-
}}
|
|
35
|
-
>
|
|
36
|
-
Can you analyse my data and tell me about...?
|
|
37
|
-
</UserBubble>
|
|
38
|
-
);
|
|
27
|
+
return <UserBubble>Can you analyse my data and tell me about...?</UserBubble>;
|
|
39
28
|
};
|
|
40
29
|
|
|
41
30
|
export default Component;
|
|
@@ -124,7 +124,7 @@ import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
|
124
124
|
import { Breadcrumbs, Menu } from '@neo4j-ndl/react';
|
|
125
125
|
import {
|
|
126
126
|
BuildingOffice2IconOutline,
|
|
127
|
-
|
|
127
|
+
CubeIconOutline,
|
|
128
128
|
Neo4JIconColorIcon,
|
|
129
129
|
} from '@neo4j-ndl/react/icons';
|
|
130
130
|
import { useRef, useState } from 'react';
|
|
@@ -173,7 +173,7 @@ const Component = () => {
|
|
|
173
173
|
</Breadcrumbs.SelectButton>
|
|
174
174
|
</Breadcrumbs.Item>
|
|
175
175
|
<Breadcrumbs.Item>
|
|
176
|
-
<Breadcrumbs.Button leadingElement={<
|
|
176
|
+
<Breadcrumbs.Button leadingElement={<CubeIconOutline />}>
|
|
177
177
|
Project 1
|
|
178
178
|
</Breadcrumbs.Button>
|
|
179
179
|
<Breadcrumbs.SelectButton ariaLabel="Open project menu"></Breadcrumbs.SelectButton>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"preview-code-read.story.js","sourceRoot":"","sources":["../../../../../src/ai/preview/stories/preview-code-read.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAClD,4CAA8C;AAC9C,kDAAiE;AAEjE,MAAM,UAAU,GAAG;;gDAE6B,CAAC;AAEjD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,YAAO,cACN,uBAAC,YAAO,CAAC,IAAI,IACX,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,MAAM,EACZ,aAAa,EACX,uBAAC,sBAAc,IACb,aAAa,EAAE,uBAAC,+BAAuB,KAAG,EAC1C,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,8BAGG,GAEnB,GACM,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { OutlinedButton } from '@neo4j-ndl/react';\nimport { Preview } from '@neo4j-ndl/react/ai';\nimport { PencilSquareIconOutline } from '@neo4j-ndl/react/icons';\n\nconst cypherCode = `SHOW [ALL|BUILT IN|USER DEFINED] FUNCTION[S] EXECUTABLE BY\nusername\n[YIELD { * | field[, ...] } [ORDER BY field ...`;\n\nconst Component = () => {\n return (\n <Preview>\n <Preview.Code\n code={cypherCode}\n language=\"cypher\"\n label=\"read\"\n headerActions={\n <OutlinedButton\n leadingVisual={<PencilSquareIconOutline />}\n variant=\"neutral\"\n size=\"small\"\n >\n Send to Query\n </OutlinedButton>\n }\n />\n </Preview>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"preview-code-write.story.js","sourceRoot":"","sources":["../../../../../src/ai/preview/stories/preview-code-write.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAmD;AACnD,4CAA8C;AAC9C,kDAGgC;AAEhC,MAAM,UAAU,GAAG;;gDAE6B,CAAC;AAEjD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,uBAAC,YAAO,cACN,uBAAC,YAAO,CAAC,IAAI,IACX,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,OAAO,EACb,aAAa,EACX,6DACE,uBAAC,uBAAe,IACd,OAAO,EAAC,SAAS,EACjB,WAAW,EAAC,eAAe,EAC3B,IAAI,EAAC,OAAO,YAEZ,uBAAC,+BAAuB,KAAG,GACX,EAClB,uBAAC,uBAAe,IACd,OAAO,EAAC,SAAS,EACjB,WAAW,EAAC,cAAc,EAC1B,IAAI,EAAC,OAAO,YAEZ,uBAAC,6BAAqB,KAAG,GACT,IACjB,GAEL,GACM,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton } from '@neo4j-ndl/react';\nimport { Preview } from '@neo4j-ndl/react/ai';\nimport {\n PencilSquareIconOutline,\n PlayCircleIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nconst cypherCode = `SHOW [ALL|BUILT IN|USER DEFINED] FUNCTION[S] EXECUTABLE BY\nusername\n[YIELD { * | field[, ...] } [ORDER BY field ...`;\n\nconst Component = () => {\n return (\n <Preview>\n <Preview.Code\n code={cypherCode}\n language=\"cypher\"\n label=\"write\"\n headerActions={\n <>\n <CleanIconButton\n variant=\"neutral\"\n description=\"Send to Query\"\n size=\"small\"\n >\n <PencilSquareIconOutline />\n </CleanIconButton>\n <CleanIconButton\n variant=\"neutral\"\n description=\"Run in Query\"\n size=\"small\"\n >\n <PlayCircleIconOutline />\n </CleanIconButton>\n </>\n }\n />\n </Preview>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"preview-code-read.story.js","sourceRoot":"","sources":["../../../../../src/ai/preview/stories/preview-code-read.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,MAAM,UAAU,GAAG;;gDAE6B,CAAC;AAEjD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,OAAO,cACN,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,MAAM,EACZ,aAAa,EACX,KAAC,cAAc,IACb,aAAa,EAAE,KAAC,uBAAuB,KAAG,EAC1C,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,8BAGG,GAEnB,GACM,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { OutlinedButton } from '@neo4j-ndl/react';\nimport { Preview } from '@neo4j-ndl/react/ai';\nimport { PencilSquareIconOutline } from '@neo4j-ndl/react/icons';\n\nconst cypherCode = `SHOW [ALL|BUILT IN|USER DEFINED] FUNCTION[S] EXECUTABLE BY\nusername\n[YIELD { * | field[, ...] } [ORDER BY field ...`;\n\nconst Component = () => {\n return (\n <Preview>\n <Preview.Code\n code={cypherCode}\n language=\"cypher\"\n label=\"read\"\n headerActions={\n <OutlinedButton\n leadingVisual={<PencilSquareIconOutline />}\n variant=\"neutral\"\n size=\"small\"\n >\n Send to Query\n </OutlinedButton>\n }\n />\n </Preview>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"preview-code-write.story.js","sourceRoot":"","sources":["../../../../../src/ai/preview/stories/preview-code-write.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,UAAU,GAAG;;gDAE6B,CAAC;AAEjD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,KAAC,OAAO,cACN,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAE,UAAU,EAChB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,OAAO,EACb,aAAa,EACX,8BACE,KAAC,eAAe,IACd,OAAO,EAAC,SAAS,EACjB,WAAW,EAAC,eAAe,EAC3B,IAAI,EAAC,OAAO,YAEZ,KAAC,uBAAuB,KAAG,GACX,EAClB,KAAC,eAAe,IACd,OAAO,EAAC,SAAS,EACjB,WAAW,EAAC,cAAc,EAC1B,IAAI,EAAC,OAAO,YAEZ,KAAC,qBAAqB,KAAG,GACT,IACjB,GAEL,GACM,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { CleanIconButton } from '@neo4j-ndl/react';\nimport { Preview } from '@neo4j-ndl/react/ai';\nimport {\n PencilSquareIconOutline,\n PlayCircleIconOutline,\n} from '@neo4j-ndl/react/icons';\n\nconst cypherCode = `SHOW [ALL|BUILT IN|USER DEFINED] FUNCTION[S] EXECUTABLE BY\nusername\n[YIELD { * | field[, ...] } [ORDER BY field ...`;\n\nconst Component = () => {\n return (\n <Preview>\n <Preview.Code\n code={cypherCode}\n language=\"cypher\"\n label=\"write\"\n headerActions={\n <>\n <CleanIconButton\n variant=\"neutral\"\n description=\"Send to Query\"\n size=\"small\"\n >\n <PencilSquareIconOutline />\n </CleanIconButton>\n <CleanIconButton\n variant=\"neutral\"\n description=\"Run in Query\"\n size=\"small\"\n >\n <PlayCircleIconOutline />\n </CleanIconButton>\n </>\n }\n />\n </Preview>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"preview-code-read.story.d.ts","sourceRoot":"","sources":["../../../../../src/ai/preview/stories/preview-code-read.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAUjD,QAAA,MAAM,SAAS,+CAmBd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"preview-code-write.story.d.ts","sourceRoot":"","sources":["../../../../../src/ai/preview/stories/preview-code-write.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAajD,QAAA,MAAM,SAAS,+CA4Bd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|