diff --git a/package.json b/package.json index 286222b..e5e74be 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "notios", - "version": "0.5.2", + "version": "0.5.3", "type": "module", "description": "", "keywords": [ @@ -40,13 +40,13 @@ "commander": "^12.1.0", "cross-spawn": "7.0.3", "ink": "^5.0.1", - "ink-divider": "3.0.0", "node-ipc": "10.1.0", "npm-run-all": "4.1.5", "pidtree": "^0.5.0", "react": "^18.3.1", "source-map-support": "^0.5.21", "string-length": "^5.0.1", + "string-width": "^7.2.0", "wcwidth": "^1.0.1", "xdg-portable": "10.6.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0ff434f..22ad5c9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,9 +17,6 @@ importers: ink: specifier: ^5.0.1 version: 5.0.1(@types/react@18.3.3)(react-devtools-core@4.27.8)(react@18.3.1) - ink-divider: - specifier: 3.0.0 - version: 3.0.0(ink@5.0.1(@types/react@18.3.3)(react-devtools-core@4.27.8)(react@18.3.1))(react@18.3.1) node-ipc: specifier: 10.1.0 version: 10.1.0 @@ -38,6 +35,9 @@ importers: string-length: specifier: ^5.0.1 version: 5.0.1 + string-width: + specifier: ^7.2.0 + version: 7.2.0 wcwidth: specifier: ^1.0.1 version: 1.0.1 @@ -1800,13 +1800,6 @@ packages: inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} - ink-divider@3.0.0: - resolution: {integrity: sha512-Mqb9WArtEZCtXw622aHhJqPK157QNc+8ssl9/RvAZlS6nZRCKyW4mYOYCudQh6dSuFGt9eG5yaqT1mJaGmwu+w==} - engines: {node: '>=6'} - peerDependencies: - ink: '>=3.0.0' - react: '>=16.8.0' - ink-testing-library@2.1.0: resolution: {integrity: sha512-7TNlOjJlJXB33vG7yVa+MMO7hCjaC1bCn+zdpSjknWoLbOWMaFdKc7LJvqVkZ0rZv2+akhjXPrcR/dbxissjUw==} engines: {node: '>=10'} @@ -4988,13 +4981,6 @@ snapshots: inherits@2.0.4: {} - ink-divider@3.0.0(ink@5.0.1(@types/react@18.3.3)(react-devtools-core@4.27.8)(react@18.3.1))(react@18.3.1): - dependencies: - ink: 5.0.1(@types/react@18.3.3)(react-devtools-core@4.27.8)(react@18.3.1) - prop-types: 15.8.1 - react: 18.3.1 - string-width: 4.2.3 - ink-testing-library@2.1.0(@types/react@18.3.3): optionalDependencies: '@types/react': 18.3.3 diff --git a/src/components/full_divider.tsx b/src/components/full_divider.tsx index 62619e6..3bc1a79 100644 --- a/src/components/full_divider.tsx +++ b/src/components/full_divider.tsx @@ -1,26 +1,38 @@ import type { FC } from 'react'; -import React, { useEffect, useState } from 'react'; +import React from 'react'; import BoxWithSize from './box_with_size'; +import { Box, Text } from 'ink'; +import stringWidth from 'string-width'; -export interface FullDividerProps { - title?: string; - dividerChar?: string; - dividerColor?: string; -} -const FullDivider: FC = ({ title, dividerChar, dividerColor }) => { - const [Divider, setDivider] = useState>(); - - useEffect(() => { - import('ink-divider').then(setDivider); - }, []); +const paddingChar = ' '; +const FullDivider: FC<{ title?: string; dividerChar?: string; dividerColor?: string }> = ({ + title, + dividerChar = '-', + dividerColor, +}) => { return ( - {({ width }) => - Divider && ( - - ) - } + {(size) => { + const width = Math.max(size.width - 5, 1); + const titleString = title ? `${paddingChar}${title}${paddingChar}` : ''; + const titleWidth = stringWidth(titleString); + const dividerWidth = (width - titleWidth) / 2; + const numberOfCharsPerSide = dividerWidth / stringWidth(dividerChar); + const dividerSideString = dividerChar.repeat(numberOfCharsPerSide); + + return ( + + + {paddingChar} + {dividerSideString} + {titleString} + {dividerSideString} + {paddingChar} + + + ); + }} ); }; diff --git a/src/global.d.ts b/src/global.d.ts index 5f869ab..82a207f 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,2 +1 @@ -declare module 'ink-divider'; declare module 'npm-run-all/*';