import json
import os
file_path = os.path.expanduser('~/projects/web-dev-swarm/datasets/frontend/raw/frontend_gold_standard.jsonl')
data = [
{
"instruction": "Refactor the following raw HTML and CSS into a modern React component using Tailwind CSS: <div style='background-color: blue; color: white; padding: 20px; border-radius: 8px;'>Hello World</div",
"input": "<div style='background-color: blue; color: white; padding: 20px; border-radius: 8px;'>Hello World</div",
"output": """```tsx
import React from 'react';
const HelloWorld: React.FC = () => {
return (
<div className="bg-blue-600 text-white p-5 rounded-lg">
Hello World
</div >
);
};
export default HelloWorld;
```""",
"metadata": {"category": "refactor", "framework": "tailwind", "complexity": "low"}
},
{
"instruction": "Refactor the following React Class component into a modern Functional component using Hooks.",
"input": "import React, { Component } from 'react';\n\nclass Counter extends Component {\n state = { count: 0 };\n\n increment = () => {\n this.setState({ count: this.state.count + 1 });\n };\n\n render() {\n return (\n <div>\n <p>Count: {this.state.count}</p>\n <button onClick={this.increment}>Increment</button>\n </div >\n );\n }\n}\n\nexport default Counter;",
"output": """```tsx
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState(0);\n\n const increment = () => {\n setCount(prev => prev + 1);\n };\n\n return (\n <div>\n <p>Count: {count}</p>\n <button onClick={increment}>Increment</button>\n </div >\n );\n};\n\nexport default Counter;\n```""",
"metadata": {"category": "refactor", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Refactor the following component to use Tailwind CSS instead of inline styles for its layout and typography.",
"input": "const Profile = () => {\n return (\n <div style={{ display: 'flex', alignItems: 'center', padding: '1rem', backgroundColor: '#f3f4f6' }}>\n <img src=\"avatar.jpg\" style={{ width: '50px', height: '50px', borderRadius: '50%' }} />\n <div style={{ marginLeft: '1rem' }}>\n <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold' }}>John Doe</h2 >\n <p style={{ color: '#6b7280' }}>Software Engineer</p>\n </div >\n </div >\n );\n};",
"output": """```tsx
import React from 'react';
const Profile: React.FC = () => {\n return (\n <div className="flex items-center p-4 bg-gray-100">\n <img src=\"avatar.jpg\" className="w-12 h-12 rounded-full" alt=\"Avatar\" />\n <div className="ml-4">\n <h2 className="text-xl font-bold">John Doe</h2 >\n <p className="text-gray-500">Software Engineer</p>\n </div >\n </div >\n );\n};\n\nexport default Profile;\n```""",
"metadata": {"category": "refactor", "framework": "tailwind", "complexity": "medium"}
},
{
"instruction": "Refactor this large component into smaller, more manageable sub-components.",
"input": "const UserProfile = ({ user }) => {\n return (\n <div className=\"user-profile\">\n <div className=\"header\">\n <img src={user.avatar} alt={user.name} />\n <h1 >{user.name}</h1 >\n </div >\n <div className=\"bio\">\n <p>{user.bio}</p>\n </div >\n <div className=\"stats\">\n <span >Followers: {user.followers}</span >\n <span >Following: {user.following}</span >\n </div >\n </div >\n );\n};",
"output": """```tsx
import React from 'react';
interface UserProps {\n avatar: string;\n name: string;\n bio: string;\n followers: number;\n following: number;\n}\n\nconst UserHeader: React.FC<{ avatar: string; name: string }> = ({ avatar, name }) => (\n <div className="header">\n <img src={avatar} alt={name} />\n <h1>{name}</h1>\n </div >\n);\n\nconst UserBio: React.FC<{ bio: string }> = ({ bio }) => (\n <div className="bio">\n <p>{bio}</p>\n </div >\n);\n\nconst UserStats: React.FC<{ followers: number; following: number }> = ({ followers, following }) => (\n <div className="stats">\n <span>Followers: {followers}</span>\n <span>Following: {following}</span>\n </div >\n);\n\nconst UserProfile: React.FC<{ user: UserProps }> = ({ user }) => {\n return (\n <div className="user-profile">\n <UserHeader avatar={user.avatar} name={user.name} />\n <UserBio bio={user.bio} />\n <UserStats followers={user.followers} following={user.following} />\n </div >\n );\n};\n\nexport default UserProfile;\n```""",
"metadata": {"category": "refactor", "framework": "react", "complexity": "high"}
},
{
"instruction": "Refactor the following code to use the React Context API instead of prop drilling.",
"input": "const App = () => {\n const [user, setUser] = useState({ name: 'John Doe', role: 'Admin' });\n return <Layout user={user} />;\n};\n\nconst Layout = ({ user }) => {\n return <Header user={user} />;\n};\n\nconst Header = ({ user }) => {\n return <UserMenu user={user} />;\n};\n\nconst UserMenu = ({ user }) => {\n return <div >Welcome, {user.name}!</div >;\n};",
"output": """```tsx
import React, { createContext, useContext, useState } from 'react';
const UserContext = createContext(null);\n\nconst App = () => {\n const [user] = useState({ name: 'John Doe', role: 'Admin' });\n\n return (\n <UserContext.Provider value={user}>\n <Layout />\n </UserContext.Provider>\n );\n};\n\nconst Layout = () => {\n return <Header />;\n};\n\nconst Header = () => {\n return <UserMenu />;\n};\n\nconst UserMenu = () => {\n const user = useContext(UserContext);\n if (!user) return null;\n return <div >Welcome, {user.name}!</div >;\n};\n\nexport default App;\n```""",
"metadata": {"category": "refactor", "framework": "react", "complexity": "high"}
},
{
"instruction": "Refactor the following component to use modern React Hooks instead of lifecycle methods.",
"input": "class DataFetcher extends React.Component {\n state = { data: null, loading: true };\n\n componentDidMount() {\n fetch('https://api.example.com/data')\n .then(res => res.json())\n .then(data => this.setState({ data, loading: false }));\n }\n\n render() {\n const { data, loading } = this.state;\n if (loading) return <div >Loading...</div >;\n return <div >{JSON.stringify(data)}</div >;\n }\n}\n\nexport default DataFetcher;",
"output": """```tsx
import React, { useState, useEffect } from 'react';
const DataFetcher: React.FC = () => {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n fetch('https://api.example.com/data')\n .then(res => res.json())\n .then(data => {\n setData(data);\n setLoading(false);\n });\n }, []);\n\n if (loading) return <div >Loading...</div >;\n return <div >{JSON.stringify(data)}</div >;\n};\n\nexport default DataFetcher;\n```""",
"metadata": {"category": "refactor", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Refactor the following component to use Tailwind CSS instead of inline styles for its layout and typography.",
"input": "const Card = () => {\n return (\n <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '10px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}>\n <h2 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '10px' }}>Card Title</h2 >\n <p style={{ color: '#666', fontSize: '14px' }}>This is a card description.</p>\n </div >\n );\n};",
"output": """```tsx
import React from 'react';
const Card: React.FC = () => {\n return (\n <div className=\"p-5 border border-gray-300 rounded-xl shadow-md\">\n <h2 className=\"text-2xl font-bold mb-2.5\">Card Title</h2 >\n <p className=\"text-gray-600 text-sm\">This is a card description.</p>\n </div >\n );\n};\n\nexport default Card;\n```""",
"metadata": {"category": "refactor", "framework": "tailwind", "complexity": "low"}
},
{
"instruction": "Refactor the following component to use a cleaner pattern for conditional rendering.",
"input": "const StatusMessage = ({ status }) => {\n if (status === 'loading') {\n return <div >Loading...</div >;\n } else if (status === 'error') {\n return <div >Error occurred!</div >;\n } else if (status === 'success') {\n return <div >Success!</div >;\n } else {\n return null;\n }\n};",
"output": """```tsx
import React from 'react';
type Status = 'loading' | 'error' | 'success' | null;\n\nconst StatusMessage: React.FC<{ status: Status }> = ({ status }) => {\n const messages: Record<NonNullable<Status>, React.ReactNode> = {\n loading: <div >Loading...</div >,\n error: <div >Error occurred!</div >,\n success: <div >Success!</div >,\n };\n\n return status ? messages[status] : null;\n};\n\nexport default StatusMessage;\n```""",
"metadata": {"category": "refactor", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Refactor the following useEffect into a custom hook.",
"input": "function useWindowSize() {\n const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });\n\n useEffect(() => {\n const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return size;\n}\n\nfunction MyComponent() {\n const size = useWindowSize();\n return <div >Window size: {size.width} x {size.height}</div >;\n}",
"output": """```tsx
import React, { useState, useEffect } from 'react';
function useWindowSize() {\n const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });\n\n useEffect(() => {\n const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return size;\n}\n\nfunction MyComponent() {\n const size = useWindowSize();\n return <div >Window size: {size.width} x {size.height}</div >;\n}\n\nexport default MyComponent;\n```""",
"metadata": {"category": "refactor", "framework": "react", "complexity": "high"}
},
{
"instruction": "Refactor the following component to use composition instead of passing many props.",
"input": "const Modal = ({ title, content, onClose, footer }) => {\n return (\n <div className=\"modal\">\n <div className=\"modal-header\">\n <h2 >{title}</h2 >\n <button onClick={onClose}>Close</button>\n </div >\n <div className=\"modal-body\">{content}</div >\n <div className=\"modal-footer\">{footer}</div >\n </div >\n );\n};",
"output": """```tsx
import React from 'react';
interface ModalProps {\n title: React.ReactNode;\n children: React.ReactNode;\n onClose: () => void;\n footer?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({ title, children, onClose, footer }) => {\n return (\n <div className=\"modal\">\n <div className=\"modal-header\">\n <h2 >{title}</h2>\n <button onClick={onClose}>Close</button>\n </div >\n <div className=\"modal-body\">{children}</div >\n {footer && <div className=\"modal-footer\">{footer}</div >}\n </div >\n );\n};\n\nexport default Modal;\n```""",
"metadata": {"category": "refactor", "framework": "react", "complexity": "medium"}
}
]
with open(file_path, 'a') as f:\n for entry in data:\n f.write(json.dumps(entry) + '\\n')\n