@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
227 lines (162 loc) • 4.69 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { Response } from '@neo4j-ndl/react/ai';
const comprehensiveMarkdown = `
# All Markdown Components Demo
This story demonstrates all the markdown components that the Response component can render.
## Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
## Text Formatting
This is **bold text** and this is *italic text*.
You can also use __bold__ and _italic_ with underscores.
Combine them: **bold and *italic* together**.
## Lists
### Unordered Lists
- Item 1
- Item 2
- Item 3
- Nested item 1
- Nested item 2
- Deeply nested item
- <h1>Nested nested heading</h1>
### Ordered Lists
1. First item
2. Second item
3. Third item
1. Nested numbered item
2. Another nested item
3. <h2>Nested nested heading</h2>
## Code
### Inline Code
Use \`const x = 5\` for inline code.
### Code Blocks
#### JavaScript
\`\`\`javascript
const greeting = "Hello World";
console.log(greeting);
function sayHello(name) {
return \`Hello, \${name}!\`;
}
\`\`\`
#### Python
\`\`\`python
def greet(name):
return f"Hello, {name}!"
print(greet("World"))
\`\`\`
#### Cypher
\`\`\`cypher
MATCH (n:Person)-[:KNOWS]->(m:Person)
WHERE n.name = "Alice"
RETURN m.name
\`\`\`
#### TypeScript
\`\`\`typescript
interface User {
name: string;
age: number;
}
const user: User = {
name: "John",
age: 30
};
\`\`\`
#### Without Language Specification
\`\`\`
Plain code block
without syntax highlighting
\`\`\`
## Links
Visit [Neo4j](https://neo4j.com) for more information.
Multiple links: [Documentation](https://neo4j.com/docs) and [Community](https://community.neo4j.com)
## Blockquotes
> This is a blockquote.
> It can span multiple lines.
> ### Blockquote with heading
>
> You can also include other markdown inside blockquotes.
>
> - Like lists
> - And other elements
### Nested Blockquotes
> Outer quote
>> Nested quote
>>> Deeply nested quote
## Horizontal Rules
Content above the rule
---
Content below the rule
## Images
## Paragraphs
This is a paragraph with multiple sentences. It demonstrates how regular text is rendered. You can write long-form content that spans multiple lines.
Another paragraph here. Paragraphs are separated by blank lines in markdown.
## Mixed Content Example
Here's a practical example combining multiple elements:
### Database Query Tutorial
To query your Neo4j database, follow these steps:
1. **Connect to your database**
Use the following code:
\`\`\`javascript
const driver = neo4j.driver(
'bolt://localhost:7687',
neo4j.auth.basic('neo4j', 'password')
);
\`\`\`
2. **Write your Cypher query**
\`\`\`cypher
MATCH (n:Movie)
WHERE n.released > 2000
RETURN n.title, n.released
ORDER BY n.released DESC
LIMIT 10
\`\`\`
3. **Execute and process results**
> **Note**: Always close your session after use!
For more information, visit the [Neo4j Documentation](https://neo4j.com/docs).
---
## Special Characters and Escaping
You can escape special characters: \\* \\_ \\[ \\]
## Preformatted Text
Use code blocks for preformatted text with preserved spacing:
\`\`\`
This text
has preserved
indentation
\`\`\`
| Item | In Stock | Price |
| :---------------- | :------: | ----: |
| Python Hat | True | 222222223.99 |
| SQL Hat | True | 23.99 |
| Codecademy Tee | False | 19.99 |
| Codecademy Hoodie | False | 42.99 |
`;
export const Component = () => {
return (_jsx("div", { className: "max-w-4xl", children: _jsx(Response, { children: comprehensiveMarkdown }) }));
};
export default Component;
//# sourceMappingURL=response-all-components.story.js.map