feat: rewrite in ink framework

https://github.com/vadimdemedes/ink

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "okineadev",
 	"version": "0.0.11",
-	"main": "src/index.ts",
-	"module": "src/index.ts",
+	"main": "src/index.tsx",
+	"module": "src/index.tsx",
 	"bin": {
 		"okineadev": "dist/cli.js"
 	},
@@ -23,7 +23,6 @@
 		"links",
 		"bun"
 	],
-	"packageManager": "[email protected]",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/okineadev/okineadev-npm.git"
@@ -32,25 +31,25 @@
 		"lint": "biome check --fix",
 		"format": "biome format --write .",
 		"preversion": "bun run format && git add .",
-		"build": "bun build ./src/index.ts --minify --outfile ./dist/cli.js --target node --footer '// Built with Bun! (https://bun.sh)'",
+		"build": "bun build ./src/index.tsx --minify --outfile ./dist/cli.js --target node --footer '// Built with Bun! (https://bun.sh)' && cp node_modules/yoga-wasm-web/dist/yoga.wasm dist/",
 		"prepublishOnly": "bun run build"
 	},
 	"peerDependencies": {
-		"typescript": "^5.0.0"
+		"typescript": "^5.7.2"
 	},
 	"dependencies": {
-		"boxen": "^8.0.1",
-		"repeat-string": "^1.6.1",
-		"string-width": "^7.2.0",
-		"strip-ansi": "^7.1.0",
-		"terminal-link": "^3.0.0",
-		"widest-line": "^5.0.0",
-		"yoctocolors": "^2.1.1"
+		"ink": "^5.1.0",
+		"ink-link": "^4.1.0",
+		"react": "^18.3.1",
+		"yoga-wasm": "^0.0.2"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
-		"@types/bun": "latest",
+		"@types/bun": "^1.1.14",
 		"changelogen": "^0.5.7",
-		"@types/repeat-string": "^1.6.5"
+		"@types/react": "^18.3.14"
+	},
+	"patchedDependencies": {
+		"[email protected]": "patches/[email protected]"
 	}
 }

patches/ink@5.1.0.patch

@@ -0,0 +1,75 @@
+diff --git a/build/devtools-window-polyfill.d.ts b/home/okineadev/.bun/install/cache/[email protected]@@@1/build/devtools-window-polyfill.d.ts
+deleted file mode 100644
+index cb0ff5c3b541f646105198ee23ac0fc3d805023e..0000000000000000000000000000000000000000
+diff --git a/build/devtools-window-polyfill.js b/home/okineadev/.bun/install/cache/[email protected]@@@1/build/devtools-window-polyfill.js
+deleted file mode 100644
+index fa70f59393455ba28863debc1aac97c3960a9aa1..0000000000000000000000000000000000000000
+diff --git a/build/devtools-window-polyfill.js.map b/home/okineadev/.bun/install/cache/[email protected]@@@1/build/devtools-window-polyfill.js.map
+deleted file mode 100644
+index 2308a0d92293b0a64fb178d6a41a6f426774d956..0000000000000000000000000000000000000000
+diff --git a/build/devtools.d.ts b/home/okineadev/.bun/install/cache/[email protected]@@@1/build/devtools.d.ts
+deleted file mode 100644
+index 5c830167965dad7cb48aeea273b9f3d9c8344492..0000000000000000000000000000000000000000
+diff --git a/build/devtools.js b/home/okineadev/.bun/install/cache/[email protected]@@@1/build/devtools.js
+deleted file mode 100644
+index 85d20c6ed3438e1539fea84db6c32dddad276744..0000000000000000000000000000000000000000
+diff --git a/build/devtools.js.map b/home/okineadev/.bun/install/cache/[email protected]@@@1/build/devtools.js.map
+deleted file mode 100644
+index 7d699a2a98ec0f15e57ae18507b4fa1a69daf290..0000000000000000000000000000000000000000
+diff --git a/build/reconciler.js b/build/reconciler.js
+index 77fc1ff9c90f3626bcfece5bcf94438e77df1b54..f0009962a532dc151ca5212ab2ede2594c0cbccd 100644
+--- a/build/reconciler.js
++++ b/build/reconciler.js
+@@ -4,30 +4,30 @@ import { DefaultEventPriority } from 'react-reconciler/constants.js';
+ import Yoga from 'yoga-wasm-web/auto';
+ import { createTextNode, appendChildNode, insertBeforeNode, removeChildNode, setStyle, setTextNodeValue, createNode, setAttribute, } from './dom.js';
+ import applyStyles from './styles.js';
+-// We need to conditionally perform devtools connection to avoid
+-// accidentally breaking other third-party code.
+-// See https://github.com/vadimdemedes/ink/issues/384
+-if (process.env['DEV'] === 'true') {
+-    try {
+-        await import('./devtools.js');
+-    }
+-    catch (error) {
+-        if (error.code === 'ERR_MODULE_NOT_FOUND') {
+-            console.warn(`
+-The environment variable DEV is set to true, so Ink tried to import \`react-devtools-core\`,
+-but this failed as it was not installed. Debugging with React Devtools requires it.
++// // We need to conditionally perform devtools connection to avoid
++// // accidentally breaking other third-party code.
++// // See https://github.com/vadimdemedes/ink/issues/384
++// if (process.env['DEV'] === 'true') {
++//     try {
++//         await import('./devtools.js');
++//     }
++//     catch (error) {
++//         if (error.code === 'ERR_MODULE_NOT_FOUND') {
++//             console.warn(`
++// The environment variable DEV is set to true, so Ink tried to import \`react-devtools-core\`,
++// but this failed as it was not installed. Debugging with React Devtools requires it.
+
+-To install use this command:
++// To install use this command:
+
+-$ npm install --save-dev react-devtools-core
+-				`.trim() + '\n');
+-        }
+-        else {
+-            // eslint-disable-next-line @typescript-eslint/only-throw-error
+-            throw error;
+-        }
+-    }
+-}
++// $ npm install --save-dev react-devtools-core
++// 				`.trim() + '\n');
++//         }
++//         else {
++//             // eslint-disable-next-line @typescript-eslint/only-throw-error
++//             throw error;
++//         }
++//     }
++// }
+ const diff = (before, after) => {
+     if (before === after) {
+         return;

scripts/shim.ts

@@ -0,0 +1,22 @@
+// shim.ts
+const bin = Bun.file('../dist/cli.js')
+let content = await new Response(bin).text()
+
+// Replace createRequire(import.meta.url) with require
+content = content.replace(/createRequire\(import\.meta\.url\)/g, 'require')
+
+// Replace $(import.meta.url) where $ is "createRequire as something"
+const createRequireAsRegex = /(?<=createRequire as )(.+?)(\w*)(?=\})/g
+const matches = content.match(createRequireAsRegex)
+
+if (!matches?.length) {
+	throw new Error('No matches found')
+}
+
+for (const match of matches) {
+	const pattern = `${match}(import.meta.url)`
+	content = content.replaceAll(pattern, 'require')
+}
+
+await Bun.write('../dist/cli.js', content)
+console.log('Successfully shimmed dist/bin.js')

src/components/Divider.tsx

@@ -0,0 +1,36 @@
+import { Box, type BoxProps } from 'ink'
+
+/**
+ * Props for the Divider component.
+ */
+export interface DividerProps extends BoxProps {
+	/**
+	 * Color of the divider's border. Matches the type of `borderColor` in the Ink `Box` component.
+	 * Accepts standard Ink color names or hex codes.
+	 * @default "blackBright"
+	 */
+	color?: BoxProps['borderColor']
+}
+
+/**
+ * A horizontal divider component styled as a single border line.
+ *
+ * @param props - Properties to customize the divider.
+ * @returns A styled Ink `Box` component representing a divider.
+ */
+const Divider: React.FC<DividerProps> = ({
+	color = 'blackBright',
+	...props
+}) => (
+	<Box
+		borderColor={color}
+		borderStyle="single"
+		borderBottom={true}
+		borderTop={false}
+		borderLeft={false}
+		borderRight={false}
+		{...props}
+	/>
+)
+
+export default Divider

src/index.tsx

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+
+import socials from './socials'
+import { render, Text, Box, Newline } from 'ink'
+import Divider from './components/Divider'
+import Link from 'ink-link'
+// import QRCode from 'qrcode'
+
+// Constants
+const BORDER_STYLE = 'round'
+const PADDING = 1
+const BORDER_COLOR = 'grey'
+
+const macOSControls = (
+	<Text>
+		<Text color="red">●</Text> <Text color="yellow">●</Text>{' '}
+		<Text color="green">●</Text>
+	</Text>
+)
+
+const title = (
+	<Text>
+		Hi!👋 I'm <Text bold>Okinea Dev</Text>
+	</Text>
+)
+const description = (
+	<Box flexDirection="column" alignItems="center">
+		<Text>Here you can view links to my profiles</Text>
+		<Text>
+			I also recommend visiting <Text underline>https://okinea.dev</Text>
+		</Text>
+	</Box>
+)
+
+const barcode = '║█║▌║█║▌│║▌█║▌║'
+const name = 'YURII BOGDAN'
+
+const paletteASCII = `\
+⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⡠⣶⣶⣿⡟
+⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⣷⣿⣿⠟
+⠄⠄⠄⠄⠄⠄⠄⠄⠄⢀⣀⣠⣤⣄⡀⢀⣴⡮⠉
+⠄⠄⠄⠄⠄⠄⠄⣴⣿⣿⣿⣿⠿⢟⢱⣿⡟⣰⣦⣀
+⠄⠄⠄⠄⠄⠄⠄⢿⣿⣿⣿⠁⣠⣾⣷⠍⣼⣿⣿⣿⣷⡄
+⠄⠄⠄⠄⠄⠄⠄⠄⠙⢻⣿⣦⣉⣛⣃⣠⣿⣿⣿⣿⣿⣿⣆
+⠄⣠⣶⣿⣷⣦⡀⠄⠄⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡀
+⢸⣿⣿⣿⣿⣿⣿⣷⣶⣿⣿⣿⣿⣿⣿⣿⡟⠁⠄⠄⠈⢻⣿⡇
+⢸⣿⣿⡿⠛⠉⠛⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣀⣀⣀⣼⣿⡇
+⠘⣿⣿⡄⠄⠄⠄⢀⣿⣿⣿⣿⣿⣿⣿⡿⠿⢿⣿⣿⣿⣿⣿⠃
+⠄⠹⣿⣿⣷⣶⣶⣿⣿⣿⣿⣿⣿⣿⡏⠄⠄⠄⠄⢻⣿⣿⡟
+⠄⠄⠙⢿⣿⣿⣿⡟⠁⠄⠄⠈⠻⣿⣿⣦⣄⣀⣴⣿⣿⠏
+⠄⠄⠄⠄⠙⢿⣿⣿⣤⣀⣀⣀⣴⣿⣿⣿⣿⣿⡿⠟⠁
+⠄⠄⠄⠄⠄⠄⠈⠙⠛⠿⠿⠿⠿⠿⠿⠛⠛⠉`
+
+const App = () => (
+	<Box
+		borderStyle={BORDER_STYLE}
+		borderColor={BORDER_COLOR}
+		paddingLeft={PADDING}
+		paddingRight={PADDING}
+		flexDirection="row"
+		alignSelf="flex-start"
+		gap={4}
+	>
+		<Box flexDirection="column">
+			{macOSControls}
+
+			<Box
+				flexDirection="column"
+				alignItems="center"
+				paddingLeft={1}
+				paddingRight={1}
+			>
+				<Text>
+					{title}
+					<Newline />
+				</Text>
+				{description}
+			</Box>
+
+			<Box flexDirection="column" marginTop={1}>
+				{Object.entries(socials).map(([key, value]) => (
+					<Text key={key}>
+						<Text bold color="redBright">
+							{key}
+						</Text>
+						{': '}
+						<Link url={value.link}>@{value.username}</Link>
+					</Text>
+				))}
+			</Box>
+			<Divider />
+			<Box>
+				<Text>
+					<Text color="whiteBright">{barcode}</Text>{' '}
+					<Text dimColor>{name}</Text>
+				</Text>
+			</Box>
+		</Box>
+		<Box>
+			<Text>{paletteASCII}</Text>
+		</Box>
+	</Box>
+)
+
+render(<App />)