dev-code-snippets-md 1.0.0

package/README.md

@@ -0,0 +1,37 @@
+# dev-code-snippets-md
+
+Collection of reusable Markdown code snippets for developers.
+
+## Installation
+
+```bash
+npm install dev-code-snippets-md
+```
+
+## Snippet Location
+
+After installation, snippets are available at:
+
+```
+node_modules/dev-code-snippets-md/snippets/
+```
+
+## Available Snippets
+
+- `fastapi.md` - FastAPI starter template
+- `react-component.md` - React functional component template
+- `snippet-template.md` - Template for adding new snippets
+
+## Adding New Snippets
+
+1. Create a new `.md` file in the `snippets` folder
+2. Follow the `snippet-template.md` format
+3. Commit and publish a new package version
+
+## Usage
+
+Access snippet files directly from `node_modules`:
+
+```bash
+cat node_modules/dev-code-snippets-md/snippets/fastapi.md
+```

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "dev-code-snippets-md",
+  "version": "1.0.0",
+  "description": "Collection of reusable markdown code snippets for developers",
+  "license": "MIT",
+  "files": [
+    "snippets"
+  ],
+  "dependencies": {
+    "react-router-dom": "^7.14.2"
+  }
+}

package/snippets/fastapi.md

@@ -0,0 +1,21 @@
+# FastAPI Starter Template
+
+Basic FastAPI application structure.
+
+## Code
+
+```python
+from fastapi import FastAPI
+
+app = FastAPI()
+
+@app.get("/")
+def home():
+    return {"message": "Hello World"}
+```
+
+## Usage
+
+Run the server:
+
+uvicorn main:app --reload

package/snippets/react-code-snippets.md

@@ -0,0 +1,458 @@
+# React Lab Programs (Experiment 06–10)
+
+Source: BCSL657B React Lab Manual
+
+---
+
+# EXPERIMENT 06 — React Form Validation
+
+## File: src/App.js
+
+```javascript
+import './App.css';
+import React, { useState } from "react";
+
+const App = () => {
+
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    password: "",
+    showPassword: false
+  });
+
+  const [errors, setErrors] = useState({});
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    let sanitizedValue = value.replace(/[<>]/g, "");
+    setFormData({ ...formData, [name]: sanitizedValue });
+  };
+
+  const toggleShowPassword = () => {
+    setFormData({ ...formData, showPassword: !formData.showPassword });
+  };
+
+  const validateForm = () => {
+
+    let newErrors = {};
+
+    if (!formData.name.trim())
+      newErrors.name = "Name is required.";
+
+    if (!formData.email.trim())
+      newErrors.email = "Email is required.";
+    else if (!/^\S+@\S+\.\S+$/.test(formData.email))
+      newErrors.email = "Invalid email format.";
+
+    if (!formData.password.trim())
+      newErrors.password = "Password is required.";
+    else if (formData.password.length < 6)
+      newErrors.password = "Password must be at least 6 characters.";
+
+    setErrors(newErrors);
+
+    return Object.keys(newErrors).length === 0;
+
+  };
+
+  const handleSubmit = (e) => {
+
+    e.preventDefault();
+
+    if (validateForm()) {
+
+      console.log("Form Submitted Successfully!", formData);
+
+      alert("Form Submitted Successfully!");
+
+      setFormData({
+        name: "",
+        email: "",
+        password: "",
+        showPassword: false
+      });
+
+      setErrors({});
+
+    }
+
+  };
+
+  return (
+
+    <div className="container">
+
+      <h2>React Form</h2>
+
+      <form onSubmit={handleSubmit}>
+
+        <label>Name</label>
+        <input name="name" value={formData.name} onChange={handleChange} />
+        {errors.name && <p>{errors.name}</p>}
+
+        <label>Email</label>
+        <input name="email" value={formData.email} onChange={handleChange} />
+        {errors.email && <p>{errors.email}</p>}
+
+        <label>Password</label>
+        <input
+          type={formData.showPassword ? "text" : "password"}
+          name="password"
+          value={formData.password}
+          onChange={handleChange}
+        />
+        {errors.password && <p>{errors.password}</p>}
+
+        <label>
+          <input type="checkbox" checked={formData.showPassword} onChange={toggleShowPassword}/>
+          Show Password
+        </label>
+
+        <button type="submit">Submit</button>
+
+      </form>
+
+    </div>
+
+  );
+
+};
+
+export default App;
+```
+
+---
+
+# EXPERIMENT 07 — Profile Card Component
+
+## File: src/components/ProfileCard.js
+
+```javascript
+import React, { useState } from "react";
+
+const ProfileCard = ({ name, bio, profilePic, initialBgColor }) => {
+
+  const [bgColor, setBgColor] = useState(initialBgColor || "#f8f9fa");
+
+  const changeBackground = () => {
+
+    const colors = ["#ffadad","#ffd6a5","#cce5ff","#d4a5a5","#caffbf"];
+
+    const randomColor = colors[Math.floor(Math.random() * colors.length)];
+
+    setBgColor(randomColor);
+
+  };
+
+  return (
+
+    <div style={{ backgroundColor: bgColor, padding: "20px", textAlign: "center" }}>
+
+      <img
+        src={profilePic}
+        alt="profile"
+        style={{ width: "100px", borderRadius: "50%" }}
+      />
+
+      <h2>{name}</h2>
+
+      <p>{bio}</p>
+
+      <button onClick={changeBackground}>
+        Change Background
+      </button>
+
+    </div>
+
+  );
+
+};
+
+export default ProfileCard;
+```
+
+---
+
+# EXPERIMENT 08 — Reminder Application
+
+## File: src/components/AddTask.js
+
+```javascript
+import React, { useState } from 'react';
+
+const AddTask = ({ addTask }) => {
+
+  const [taskName, setTaskName] = useState('');
+  const [dueDate, setDueDate] = useState('');
+
+  const handleSubmit = (e) => {
+
+    e.preventDefault();
+
+    if (taskName.trim()) {
+
+      addTask(taskName, dueDate);
+
+      setTaskName('');
+      setDueDate('');
+
+    }
+
+  };
+
+  return (
+
+    <form onSubmit={handleSubmit}>
+
+      <input
+        type="text"
+        placeholder="Task Name"
+        value={taskName}
+        onChange={(e) => setTaskName(e.target.value)}
+      />
+
+      <input
+        type="date"
+        value={dueDate}
+        onChange={(e) => setDueDate(e.target.value)}
+      />
+
+      <button type="submit">Add Task</button>
+
+    </form>
+
+  );
+
+};
+
+export default AddTask;
+```
+
+---
+
+## File: src/App.js
+
+```javascript
+import React, { useState } from 'react';
+import AddTask from './components/AddTask';
+
+function App() {
+
+  const [tasks, setTasks] = useState([]);
+
+  const addTask = (name, dueDate) => {
+
+    const newTask = {
+      id: Date.now(),
+      name,
+      dueDate,
+      completed: false
+    };
+
+    setTasks([...tasks, newTask]);
+
+  };
+
+  return (
+
+    <div>
+
+      <h1>Reminder App</h1>
+
+      <AddTask addTask={addTask} />
+
+      <ul>
+
+        {tasks.map(task => (
+          <li key={task.id}>
+            {task.name} - {task.dueDate}
+          </li>
+        ))}
+
+      </ul>
+
+    </div>
+
+  );
+
+}
+
+export default App;
+```
+
+---
+
+# EXPERIMENT 09 — React Router Navigation
+
+## File: src/App.js
+
+```javascript
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+
+function Home() {
+  return <h1>Welcome to Home</h1>;
+}
+
+function About() {
+  return <h1>About Us</h1>;
+}
+
+function Contact() {
+  return <h1>Contact Us</h1>;
+}
+
+function App() {
+
+  return (
+
+    <Router>
+
+      <Routes>
+
+        <Route path="/" element={<Home />} />
+
+        <Route path="/about" element={<About />} />
+
+        <Route path="/contact" element={<Contact />} />
+
+      </Routes>
+
+    </Router>
+
+  );
+
+}
+
+export default App;
+```
+
+---
+
+# EXPERIMENT 10 — Lifecycle Methods + API Fetch
+
+## File: src/DataFetcher.js
+
+```javascript
+import React, { Component } from "react";
+import axios from "axios";
+
+class DataFetcher extends Component {
+
+  constructor(props) {
+
+    super(props);
+
+    this.state = {
+      data: [],
+      searchTerm: '',
+      error: null,
+    };
+
+  }
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+
+    if (prevState.searchTerm !== this.state.searchTerm) {
+      this.fetchData();
+    }
+
+  }
+
+  fetchData = () => {
+
+    axios.get("https://jsonplaceholder.typicode.com/posts")
+
+      .then(response => {
+        this.setState({
+          data: response.data,
+          error: null
+        });
+      })
+
+      .catch(() => {
+        this.setState({
+          error: "Failed to fetch data"
+        });
+      });
+
+  };
+
+  handleSearch = (event) => {
+
+    this.setState({
+      searchTerm: event.target.value
+    });
+
+  };
+
+  render() {
+
+    const { data, searchTerm, error } = this.state;
+
+    const filteredData =
+      data.filter(item =>
+        item.title.includes(searchTerm)
+      );
+
+    return (
+
+      <div>
+
+        <h1>Data Fetcher</h1>
+
+        <input
+          type="text"
+          placeholder="Search..."
+          onChange={this.handleSearch}
+        />
+
+        {error && <p>{error}</p>}
+
+        <ul>
+
+          {filteredData.map(item => (
+            <li key={item.id}>{item.title}</li>
+          ))}
+
+        </ul>
+
+      </div>
+
+    );
+
+  }
+
+}
+
+export default DataFetcher;
+```
+
+---
+
+## File: src/App.js
+
+```javascript
+import React from "react";
+import DataFetcher from "./DataFetcher";
+
+function App() {
+
+  return (
+
+    <div>
+
+      <DataFetcher />
+
+    </div>
+
+  );
+
+}
+
+export default App;
+```

package/snippets/react-component.md

@@ -0,0 +1,19 @@
+# React Functional Component
+
+Simple React functional component template.
+
+## Code
+
+```jsx
+import React from "react";
+
+function App() {
+  return <h1>Hello World</h1>;
+}
+
+export default App;
+```
+
+## Usage
+
+Import and render inside your React application.

package/snippets/snippet-template.md

@@ -0,0 +1,17 @@
+# Snippet Title
+
+Short description of what the snippet does.
+
+## Code
+
+```language
+PASTE YOUR CODE SNIPPET HERE
+```
+
+## Usage
+
+Explain how the snippet is used.
+
+## Notes (optional)
+
+Any additional explanation.