feat: make customizable

oclif · Aug 21, 2024 · 6fa62ef · 6fa62ef
1 parent e141828
commit 6fa62ef
Show file tree

Hide file tree

Showing 5 changed files with 527 additions and 129 deletions.
diff --git a/examples/basic.ts b/examples/basic.ts
@@ -6,7 +6,7 @@ import {makeTable} from '../src/index.js'
 const data = [
   {
     age: 20,
-    bigData: 'a'.repeat(98),
+    bigData: 'a'.repeat(200),
     employed: ansis.bold('true'),
     evenMoreBigData: 'a'.repeat(130),
     id: terminalLink('36329', 'https://example.com/alice'),
@@ -35,12 +35,20 @@ makeTable(
   data,
   [
     'id',
-    'name',
+    {align: 'center', key: 'name', name: 'First Name'},
     'age',
     'employed',
     'bigData',
-    'moreBigData',
+    // 'moreBigData',
     // 'evenMoreBigData',
   ],
-  {maxWidth: '50%'},
+  {
+    borderStyle: 'outline',
+    headerFormatter: 'capitalCase',
+    headerOptions: {
+      bold: true,
+      color: '#905de8',
+    },
+    overflow: 'wrap',
+  },
 )
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "dependencies": {
     "@oclif/core": "^4",
     "@types/react": "^18.3.3",
+    "change-case": "^5.4.4",
     "ink": "^5.0.1",
     "object-hash": "^3.0.0",
     "react": "^18.3.1",

diff --git a/src/skeletons.ts b/src/skeletons.ts
@@ -0,0 +1,251 @@
+export type BorderStyle =
+  | 'all'
+  | 'vertical'
+  | 'horizontal'
+  | 'none'
+  | 'outline'
+  | 'vertical-with-outline'
+  | 'horizontal-with-outline'
+
+type Skeleton = {
+  cross: string
+  left: string
+  line: string
+  right: string
+}
+
+export const BORDER_SKELETONS: Record<
+  BorderStyle,
+  {
+    data: Skeleton
+    footer: Skeleton
+    header: Skeleton
+    heading: Skeleton
+    separator: Skeleton
+  }
+> = {
+  all: {
+    data: {
+      cross: '│',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+    footer: {
+      cross: '┴',
+      left: '└',
+      line: '─',
+      right: '┘',
+    },
+    header: {
+      cross: '┬',
+      left: '┌',
+      line: '─',
+      right: '┐',
+    },
+    heading: {
+      cross: '│',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+    separator: {
+      cross: '┼',
+      left: '├',
+      line: '─',
+      right: '┤',
+    },
+  },
+  horizontal: {
+    data: {
+      cross: ' ',
+      left: ' ',
+      line: ' ',
+      right: ' ',
+    },
+    footer: {
+      cross: '─',
+      left: '─',
+      line: '─',
+      right: '─',
+    },
+    header: {
+      cross: ' ',
+      left: ' ',
+      line: ' ',
+      right: ' ',
+    },
+    heading: {
+      cross: ' ',
+      left: ' ',
+      line: ' ',
+      right: ' ',
+    },
+    separator: {
+      cross: '─',
+      left: '─',
+      line: '─',
+      right: '─',
+    },
+  },
+  'horizontal-with-outline': {
+    data: {
+      cross: ' ',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+    footer: {
+      cross: '─',
+      left: '└',
+      line: '─',
+      right: '┘',
+    },
+    header: {
+      cross: '─',
+      left: '┌',
+      line: '─',
+      right: '┐',
+    },
+    heading: {
+      cross: ' ',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+    separator: {
+      cross: '─',
+      left: '├',
+      line: '─',
+      right: '┤',
+    },
+  },
+  none: {
+    data: {
+      cross: ' ',
+      left: ' ',
+      line: ' ',
+      right: ' ',
+    },
+    footer: {
+      cross: ' ',
+      left: ' ',
+      line: ' ',
+      right: ' ',
+    },
+    header: {
+      cross: ' ',
+      left: ' ',
+      line: ' ',
+      right: ' ',
+    },
+    heading: {
+      cross: ' ',
+      left: ' ',
+      line: ' ',
+      right: ' ',
+    },
+    separator: {
+      cross: ' ',
+      left: ' ',
+      line: ' ',
+      right: ' ',
+    },
+  },
+  outline: {
+    data: {
+      cross: ' ',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+    footer: {
+      cross: '─',
+      left: '└',
+      line: '─',
+      right: '┘',
+    },
+    header: {
+      cross: '─',
+      left: '┌',
+      line: '─',
+      right: '┐',
+    },
+    heading: {
+      cross: ' ',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+    separator: {
+      cross: ' ',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+  },
+  vertical: {
+    data: {
+      cross: '│',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+    footer: {
+      cross: '│',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+    header: {
+      cross: ' ',
+      left: ' ',
+      line: ' ',
+      right: ' ',
+    },
+    heading: {
+      cross: ' ',
+      left: ' ',
+      line: ' ',
+      right: ' ',
+    },
+    separator: {
+      cross: '│',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+  },
+  'vertical-with-outline': {
+    data: {
+      cross: '│',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+    footer: {
+      cross: '┴',
+      left: '└',
+      line: '─',
+      right: '┘',
+    },
+    header: {
+      cross: '┬',
+      left: '┌',
+      line: '─',
+      right: '┐',
+    },
+    heading: {
+      cross: '│',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+    separator: {
+      cross: '│',
+      left: '│',
+      line: ' ',
+      right: '│',
+    },
+  },
+}