@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
244 lines (200 loc) • 5.08 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 codeExamplesMarkdown = `
# Code Examples
This story focuses on different code rendering capabilities.
## Multiple Programming Languages
### JavaScript
\`\`\`javascript
// Array methods
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log('Doubled:', doubled);
console.log('Sum:', sum);
\`\`\`
### TypeScript
\`\`\`typescript
// Generics
function identity<T>(arg: T): T {
return arg;
}
const result = identity<string>("Hello");
const num = identity(42);
\`\`\`
### Python
\`\`\`python
# List comprehension
squares = [x**2 for x in range(10)]
evens = [x for x in range(20) if x % 2 == 0]
# Dictionary comprehension
square_dict = {x: x**2 for x in range(5)}
print(f"Squares: {squares}")
print(f"Evens: {evens}")
\`\`\`
### Cypher
\`\`\`cypher
// Create nodes and relationships
CREATE (alice:Person {name: 'Alice', age: 30})
CREATE (bob:Person {name: 'Bob', age: 25})
CREATE (alice)-[:KNOWS {since: 2020}]->(bob)
RETURN alice, bob
\`\`\`
### SQL
\`\`\`sql
-- Complex query
SELECT
u.name,
COUNT(o.id) as order_count,
SUM(o.total) as total_spent
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.active = true
GROUP BY u.id, u.name
HAVING COUNT(o.id) > 5
ORDER BY total_spent DESC
LIMIT 10;
\`\`\`
### Rust
\`\`\`rust
// Pattern matching
fn describe_number(n: i32) -> String {
match n {
0 => "zero".to_string(),
1..=10 => "small".to_string(),
11..=100 => "medium".to_string(),
_ => "large".to_string(),
}
}
\`\`\`
### Go
\`\`\`go
// Goroutines and channels
func worker(id int, jobs <-chan int, results chan<- int) {
for j := range jobs {
fmt.Printf("worker %d processing job %d\\n", id, j)
results <- j * 2
}
}
\`\`\`
### JSON
\`\`\`json
{
"name": "Response Component",
"version": "1.0.0",
"features": [
"markdown rendering",
"syntax highlighting",
"streaming support"
],
"config": {
"theme": "dark",
"lineNumbers": true
}
}
\`\`\`
### YAML
\`\`\`yaml
# Configuration file
app:
name: MyApp
version: 1.0.0
port: 3000
database:
host: localhost
port: 5432
credentials:
username: admin
password: secret
features:
- authentication
- logging
- caching
\`\`\`
### Shell/Bash
\`\`\`bash
#!/bin/bash
# Deploy script
echo "Starting deployment..."
npm install
npm run build
npm test
if [ $? -eq 0 ]; then
echo "Deployment successful!"
else
echo "Deployment failed!"
exit 1
fi
\`\`\`
## Inline Code
You can use inline code like \`const x = 5\`, \`npm install\`, or \`SELECT * FROM users\` within sentences.
Mixed with text: The \`Array.map()\` method creates a new array and the \`filter()\` method filters elements.
## Code Without Language
\`\`\`
Plain text code block
No syntax highlighting
Just monospace font
\`\`\`
## Long Code Blocks
\`\`\`javascript
// Complex React component
import React, { useState, useEffect, useCallback } from 'react';
const UserDashboard = ({ userId }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const fetchUser = useCallback(async () => {
try {
setLoading(true);
const response = await fetch(\`/api/users/\${userId}\`);
if (!response.ok) throw new Error('Failed to fetch user');
const data = await response.json();
setUser(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}, [userId]);
useEffect(() => {
fetchUser();
}, [fetchUser]);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
if (!user) return <div>No user found</div>;
return (
<div className="dashboard">
<h1>{user.name}</h1>
<p>Email: {user.email}</p>
<button onClick={fetchUser}>Refresh</button>
</div>
);
};
export default UserDashboard;
\`\`\`
`;
export const Component = () => {
return (_jsx("div", { className: "max-w-4xl", children: _jsx(Response, { children: codeExamplesMarkdown }) }));
};
export default Component;
//# sourceMappingURL=response-code-examples.story.js.map