opsnippets 1.0.0

package/assets.d.ts

@@ -0,0 +1,6 @@
+// src/assets.d.ts
+declare module '*.png' {
+    const src: string;
+    export default src;
+  }
+  

package/dist/components/Button.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare const Increment: () => React.JSX.Element;
+declare const Decrement: () => React.JSX.Element;
+export { Decrement, Increment };

package/dist/components/CodeBlock.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const CodeBlock: ({ code }: {
+    code: string;
+}) => React.JSX.Element;
+export { CodeBlock };

package/dist/components/OneLineComand.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const OneLineBlock: ({ command }: {
+    command: string;
+}) => React.JSX.Element;
+export { OneLineBlock };

package/dist/hooks/counter.d.ts

@@ -0,0 +1,6 @@
+declare const UseCounter: () => {
+    increment: () => void;
+    decrement: () => void;
+    count: number;
+};
+export { UseCounter };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/Button";
+export * from "./hooks/counter";
+export * from "./components/OneLineComand";
+export * from "./components/CodeBlock";

package/dist/index.js

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Prism } from 'react-syntax-highlighter';
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+const UseCounter = () => {
+    const [count, setCount] = useState(0);
+    const increment = () => {
+        setCount(count + 1);
+    };
+    const decrement = () => {
+        setCount(count - 1);
+    };
+    return { increment, decrement, count };
+};
+
+const Increment = () => {
+    const { increment } = UseCounter();
+    return (React.createElement("button", { onClick: increment }, "Increment"));
+};
+const Decrement = () => {
+    const { decrement } = UseCounter();
+    return (React.createElement("button", { onClick: decrement }, "Decrement"));
+};
+
+var copyIcon = "data:image/png;base64,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";
+
+var tickIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAADDpiTIAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAURQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAi2s+iwAAAGt0Uk5TAAECAwQFBggJDA0SExQVGRobHyIpKistLzA5O0hNTk9TVVZaW2drc3R1d3h5ent+gIGChoqUl5ufoKGio6SlqKusra6vsLGztLi+xMvMzs/Q0dLT2Nzf4OHj5OXo6evs8fLz9PX2+fr8/f5ycjfQAAAGZElEQVR42u3cW1dQBRSF0SNgRCLZBbMEI4iIwtKKiMKymwZJCYEUREQkBvv/v/dQjcSQS9YYctb8fgFnz6UgcmgaSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkPVjnxavTswvr22vzN6fGz7tHVj3DMxt1f3cmB7qcJaXusb36f7Q80uE0CXWNrtb+LV5ynfbXv1QPb67PgVre4GYd1MoFJ2p1Ezt1cFtDjtTiT//X6tB2X3en1vpfryO06++AaP+qLV8HRPtXrfi3QLR/1ZxzRftX+Y5Qtn8t+q5wtH/ViJtF+9ey/xuM9q8acLZo/5p0t2j/uuNw0f5Vfkos27/G3S7av6YcL9q/brpetH/NO1+0f625X7R/bTtgtH+tu2C0fy04YbR/zbphtH9NO2K0f111xRPs/+kj+9dFZ4z23+h0x2T/mnHHaP8adsho/40el0z2rzGXjPZf7XbKZP8adcpo/yVvBUT7b/a7ZbL/zqBbJvvXhFtG+19zy2j/674A5C/+4i/+4i/+4i/+4i/+4i/+4i/+4i/+4i/+4i/+4i/+4i/+4i/+4i/+4i/+4i/+4i/+Opb/Z/z58+fPnz9//vz58+fPnz9//vz58+fPnz9//vz58+fPnz9//vz58+fPn7/4i7/4i7/4i7/4i78et07z58+fP3/+/Pnz58+fP3/+/Pnz58+fP3/+/Pnz58+fP3/+/Pnz58+fP/+T6f85f/78+fPnz58/f/78+fPnz58/f/78+fPnz58/f/78+fPnz58/f/78+fPnL/7iL/7iL/7iL/7iL/7iL/7iL/7iL/7iL/7iL/7iL/7iL/7iL/7iL/7iL/56JP8v+PPnz58/f/78+fPnz58/f/78+fPnz58/f/78W+J/qu/5pzv5R/r3vvrxrR/uVdXOj7dvvPYs/yj/c29+/dvej/27d8/zT/Hvfe/uPh/+zsxz/BP8n3r754c8wb33z/Fvvf+L3x/wEL+8zL/l/q/8euBj7L7Fv83+p97ZPexJPnmSf3v//H94hGe5dYZ/W/0njvQ035zh307/wZ2ygGD//s2jPlHEAuL8u5aO/kwBC8j7/t/ocZ6q9QvI8+9eLQsI9m/GjvlkrV5AoH/PRllAsH8zfPyna+0CIn/+46OygGT/jp/KAoL9m5f+3TO2cAGhP/95pSwg2b/5oCwg2b+ZLQtI9m8WygKi3/9ZLwuIfv9ruywg+v2/tYpfQPb7n/OVvoDw93+/qvAFpL//PVXZC4h///+Nil6A3//wwqM/+7dn+J/g3/+xErwA/k3TTFbsAvg3TdMMVOoCTn/Jv2maruXQBfD/s5GKXAD/v+pYTFwA/7+7VHkL4H9/c3EL4L+nvpWwBfB/oAtbUQvg/4+GdoMWwH+fLlfMAvjv25WUBfDPXgD//38BvfwtgL8F8LcA/hbA3wL4WwB/C+BvAfyzFnC7l78F8LcA/hbA3wL4WwB/C+BvAfwtgL8F8LcA/hbA3wL4WwB/C+BvAfwtgL8F8LcA/hbA3wL4WwB/C+BvAfzbtoCFXv4WwN8C+FsAfwv47/xv8D9JCzjL3wL4WwB/C+BvAfwtgL8F8LcA/hbA3wL4WwB/C+BvAfwtgL8F8LcA/hbA3wL4WwB/C2ia5gn+bVzA4ln+FsDfAvhbAH8L4G8B/C2AvwXwtwD+FsA/fgH8sxfAP3sB/LMXwD97AfyzF8A/cwF9/C2Af/wC+GcvgH/2Ap7hn72Au/zDF8DfAvhbAH8L4G8B/C2AvwXwtwD+FsDfAvhbAH8L4G8B/C2AvwXwtwD+FsDfAvinL4B/9gL4Zy+Af/YC+GcvgH/2AvhnL4B/9gL4Zy+Af/YC+GcvgH/2AvhnL4B/9gL4Zy+Af/YC+GcvgH/2AvhnL4B/9gL4Zy+Af/YC+GcvgH/2AvhnL4B/9gL4Zy+Af/YC+GcvgH/2AvhnL4B/9gL4Zy+Af/YC+GcvgH97u7x7uP81/i1uaOsQ/p0JR2p1F1YO9N8cdKKW1zd3gP9SvwO1v0uLD+FfHfXpP6KOkeV9+DfGup0mpa6ByTt79WeGe5wlq/PjUzfn17bXF2anr17sdA9JkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkiRJkvQY9TtWXIJiBquu+QAAAABJRU5ErkJggg==";
+
+const OneLineBlock = ({ command }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(command);
+        setIsCopied(true);
+        setTimeout(() => {
+            setIsCopied(false);
+        }, 1000);
+    };
+    return (React.createElement("div", { style: {
+            width: "400px",
+            background: '#1e293b',
+            display: 'flex',
+            flexDirection: "column",
+            // justifyItems: "center",
+            padding: "2px",
+            borderRadius: "5px",
+            color: "white",
+            fontFamily: "Arial, sans-serif",
+            fontSize: "18px",
+            fontWeight: "bold",
+        } },
+        React.createElement("div", { style: {
+                height: '50px',
+                display: 'flex',
+                justifyContent: "space-between",
+                border: "1px ",
+                alignItems: "center",
+                borderBottom: "1px solid white",
+                padding: '5px'
+            } },
+            React.createElement("p", { style: {
+                    color: "#7dd3fc",
+                    fontSize: '20px',
+                    padding: "5px",
+                    fontWeight: 'lighter'
+                } }, "Terminal"),
+            React.createElement("button", { onClick: () => copyToClipboard(), style: {
+                    width: "30px",
+                    height: '30px',
+                    cursor: "pointer"
+                } },
+                React.createElement("img", { width: "100%", height: "100%", style: {
+                        objectFit: "contain"
+                    }, src: !isCopied ? copyIcon : tickIcon }))),
+        React.createElement("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "10px"
+            } },
+            React.createElement("span", { className: "icon" },
+                React.createElement("svg", { viewBox: "0 0 24 24", fill: "#7dd3fc", color: '#7dd3fc', height: "1   3", width: "13", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", className: "w-[19px] h-[19px] text-gray-800 dark:text-white" },
+                    React.createElement("path", { d: "m9 5 7 7-7 7", "stroke-width": "3", "stroke-linejoin": "round", "stroke-linecap": "round", stroke: "currentColor" }))),
+            React.createElement("p", { style: {
+                    fontFamily: "monospace"
+                } }, command))));
+};
+
+const CodeBlock = ({ code }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(code);
+        setIsCopied(true);
+        setTimeout(() => {
+            setIsCopied(false);
+        }, 1000);
+    };
+    return (React.createElement("div", { style: {
+            display: "flex",
+            alignItems: 'start',
+            justifyContent: "space-between",
+            padding: "5px",
+            borderRadius: "5px",
+            color: "white",
+            fontFamily: "Arial, sans-serif",
+            fontSize: "18px",
+            backgroundColor: 'rgb(29, 31, 33)',
+            width: "40%",
+        } },
+        React.createElement(Prism, { language: "javascript", style: atomDark }, code),
+        React.createElement("button", { onClick: () => copyToClipboard(), style: {
+                width: "30px",
+                height: '30px',
+                cursor: "pointer"
+            } },
+            React.createElement("img", { width: "100%", height: "100%", style: {
+                    objectFit: "contain"
+                }, src: !isCopied ? copyIcon : tickIcon }))));
+};
+
+export { CodeBlock, Decrement, Increment, OneLineBlock, UseCounter };

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "opsnippets",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "npx rollup -c"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.20.0",
+    "rollup-plugin-url": "^3.0.1",
+    "tslib": "^2.6.3"
+  },
+  "dependencies": {
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "react-syntax-highlighter": "^15.5.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from "rollup";
+import typescript from "@rollup/plugin-typescript";
+import url from "rollup-plugin-url"; // Import the URL plugin
+
+export default defineConfig({
+  input: "src/index.ts",
+  output: {
+    dir: "dist",
+    format: "es",
+    name: "demo",
+  },
+  external: ["react", "react-dom"],
+  plugins: [
+    typescript({ tsconfig: "tsconfig.json" }),
+    url({
+      // Inline files smaller than 10 kbytes
+      limit: 10 * 1024,
+      // Output the files in a specific directory if the limit is exceeded
+      fileName: '[name].[hash][extname]',
+    }),
+  ],
+});

package/src/components/Button.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { UseCounter } from '../hooks/counter'
+
+const Increment = () => {
+    const { increment} = UseCounter();
+    return (
+        <button onClick={increment}>Increment</button>
+    )
+}
+
+
+const Decrement = () => {
+    const { decrement} = UseCounter();
+    return (
+        <button onClick={decrement}>Decrement</button>
+    )
+}
+
+export { Decrement, Increment }

package/src/components/CodeBlock.tsx

@@ -0,0 +1,42 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import copyIcon from '../assets/copy.png'
+import tickIcon from '../assets/tick.png'
+import { useState } from 'react';
+import * as React from 'react';
+const CodeBlock = ({ code }: { code: string }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(code);
+        setIsCopied(true);
+        setTimeout(() => {
+            setIsCopied(false);
+        }, 1000);
+    }
+    return (
+        <div style={{
+            display:"flex",
+            alignItems:'start',
+            justifyContent:"space-between",
+            padding:"5px",
+            borderRadius:"5px",
+            color:"white",
+            fontFamily:"Arial, sans-serif",
+            fontSize:"18px",
+            backgroundColor:'rgb(29, 31, 33)',
+            width:"40%",
+        }}>
+            <SyntaxHighlighter language="javascript" style={atomDark}>
+                {code}
+            </SyntaxHighlighter>
+            <button onClick={() => copyToClipboard()} style={{
+                width: "30px",
+                height: '30px',
+                cursor: "pointer"
+            }}><img width={"100%"} height={"100%"} style={{
+                objectFit: "contain"
+            }} src={!isCopied ? copyIcon : tickIcon} /></button>
+        </div>
+    )
+}
+export  {CodeBlock}

package/src/components/OneLineComand.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import { useState } from 'react'
+import copyIcon from '../assets/copy.png'
+import tickIcon from '../assets/tick.png'
+const OneLineBlock = ({ command }: { command: string }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const copyToClipboard = () => {
+        navigator.clipboard.writeText(command);
+        setIsCopied(true);
+        setTimeout(() => {
+            setIsCopied(false);
+        }, 1000);
+    }
+    return (
+
+        <div style={{
+            width: "400px",
+            background: '#1e293b',
+            display: 'flex',
+            flexDirection: "column",
+            // justifyItems: "center",
+            padding: "2px",
+            borderRadius: "5px",
+            color: "white",
+            fontFamily: "Arial, sans-serif",
+            fontSize: "18px",
+            fontWeight: "bold",
+
+        }}>
+            <div style={{
+                height: '50px',
+                display: 'flex',
+                justifyContent: "space-between",
+                border: "1px ",
+                alignItems: "center",
+                borderBottom: "1px solid white",
+                padding: '5px'
+            }}>
+                <p style={{
+                    color: "#7dd3fc",
+                    fontSize: '20px',
+                    padding: "5px",
+                    fontWeight: 'lighter'
+                }}>Terminal</p>
+                <button onClick={() => copyToClipboard()} style={{
+                    width: "30px",
+                    height: '30px',
+                    cursor:"pointer"
+                }}><img width={"100%"} height={"100%"} style={{
+                    objectFit: "contain"
+                }} src={!isCopied ? copyIcon : tickIcon} /></button>
+            </div>
+            <div style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "10px"
+
+            }}>
+                <span className="icon">
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="#7dd3fc"
+                        color='#7dd3fc'
+                        height="1   3"
+                        width="13"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                        className="w-[19px] h-[19px] text-gray-800 dark:text-white"
+                    >
+                        <path
+                            d="m9 5 7 7-7 7"
+                            stroke-width="3"
+                            stroke-linejoin="round"
+                            stroke-linecap="round"
+                            stroke="currentColor"
+                        ></path>
+                    </svg>
+                </span>
+                <p style={{
+                    fontFamily: "monospace"
+                }}>{command}</p>
+            </div>
+        </div>
+
+    )
+}
+
+export  {OneLineBlock}

package/src/hooks/counter.tsx

@@ -0,0 +1,18 @@
+import  { useState } from 'react'
+
+const UseCounter = () => {
+    const [count, setCount] = useState(0)
+
+    const increment = () => {
+        setCount(count + 1)
+    }
+
+    const decrement = () => {
+        setCount(count - 1)
+    }
+
+    return { increment, decrement, count }
+
+}
+
+export { UseCounter };

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./components/Button";
+export * from "./hooks/counter";
+export * from "./components/OneLineComand";
+export * from "./components/CodeBlock"

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "jsx": "react",
+      "target": "ES2020",
+      "module": "ESNext",
+      "declaration": true,
+      "declarationDir": "dist",
+      "strict": true,
+      "moduleResolution": "node",
+    }
+  }