ink 4.0.0 → 4.2.0

package/readme.md

@@ -127,6 +127,7 @@ Feel free to play around with the code and fork this repl at [https://repl.it/@v
 - [lrn](https://github.com/krychu/lrn) - Learning by repetition.
 - [turdle](https://github.com/mynameisankit/turdle) - Wordle game.
 - [Shopify CLI](https://github.com/Shopify/cli) - Build apps, themes, and storefronts for Shopify.
+- [ToDesktop CLI](https://www.todesktop.com/electron) - An all-in-one platform for building Electron apps.
 
 ## Contents
 
@@ -167,7 +168,7 @@ Alternatively, create a TypeScript project:
 npx create-ink-app --typescript my-ink-cli
 ```
 
-<details><summary>Manual setup</summary>
+<details><summary>Manual JavaScript setup</summary>
 <p>
 Ink requires the same Babel setup as you would do for regular React-based apps in the browser.
 
@@ -180,17 +181,7 @@ npm install --save-dev @babel/preset-react
 
 ```json
 {
-	"presets": [
-		"@babel/preset-react",
-		[
-			"@babel/preset-env",
-			{
-				"targets": {
-					"node": true
-				}
-			}
-		]
-	]
+	"presets": ["@babel/preset-react"]
 }
 ```
 
@@ -580,6 +571,58 @@ Margin on all sides. Equivalent to setting `marginTop`, `marginBottom`, `marginL
 <Box margin={2}>Top, bottom, left and right</Box>
 ```
 
+#### Gap
+
+#### gap
+
+Type: `number`\
+Default: `0`
+
+Size of the gap between an element's columns and rows. Shorthand for `columnGap` and `rowGap`.
+
+```jsx
+<Box gap={1} width={3} flexWrap="wrap">
+	<Text>A</Text>
+	<Text>B</Text>
+	<Text>C</Text>
+</Box>
+// A B
+//
+// C
+```
+
+#### columnGap
+
+Type: `number`\
+Default: `0`
+
+Size of the gap between an element's columns.
+
+```jsx
+<Box columnGap={1}>
+	<Text>A</Text>
+	<Text>B</Text>
+</Box>
+// A B
+```
+
+#### rowGap
+
+Type: `number`\
+Default: `0`
+
+Size of the gap between element's rows.
+
+```jsx
+<Box flexDirection="column" rowGap={1}>
+	<Text>A</Text>
+	<Text>B</Text>
+</Box>
+// A
+//
+// B
+```
+
 #### Flex
 
 ##### flexGrow
@@ -681,6 +724,32 @@ See [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/
 // X
 ```
 
+##### flexWrap
+
+Type: `string`\
+Allowed values: `nowrap` `wrap` `wrap-reverse`
+
+See [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/).
+
+```jsx
+<Box width={2} flexWrap="wrap">
+	<Text>A</Text>
+	<Text>BC</Text>
+</Box>
+// A
+// B C
+```
+
+```jsx
+<Box flexDirection="column" height={2} flexWrap="wrap">
+	<Text>A</Text>
+	<Text>B</Text>
+	<Text>C</Text>
+</Box>
+// A C
+// B
+```
+
 ##### alignItems
 
 Type: `string`\
@@ -821,12 +890,36 @@ Default: `flex`
 
 Set this property to `none` to hide the element.
 
+##### overflowX
+
+Type: `string`\
+Allowed values: `visible` `hidden`\
+Default: `visible`
+
+Behavior for an element's overflow in horizontal direction.
+
+##### overflowY
+
+Type: `string`\
+Allowed values: `visible` `hidden`\
+Default: `visible`
+
+Behavior for an element's overflow in vertical direction.
+
+##### overflow
+
+Type: `string`\
+Allowed values: `visible` `hidden`\
+Default: `visible`
+
+Shortcut for setting `overflowX` and `overflowY` at the same time.
+
 #### Borders
 
 ##### borderStyle
 
 Type: `string`\
-Allowed values: `single` `double` `round` `bold` `singleDouble` `doubleSingle` `classic`
+Allowed values: `single` `double` `round` `bold` `singleDouble` `doubleSingle` `classic` | `BoxStyle`
 
 Add a border with a specified style.
 If `borderStyle` is `undefined` (which it is by default), no border will be added.
@@ -870,14 +963,33 @@ Ink uses border styles from [`cli-boxes`](https://github.com/sindresorhus/cli-bo
 
 <img src="media/box-borderStyle.jpg" width="521">
 
-See example in [examples/borders](examples/borders/borders.js).
+Alternatively, pass a custom border style like so:
+
+```jsx
+<Box
+	borderStyle={{
+		topLeft: '↘',
+		top: '↓',
+		topRight: '↙',
+		left: '→',
+		bottomLeft: '↗',
+		bottom: '↑',
+		bottomRight: '↖',
+		right: '←'
+	}}
+>
+	<Text>Custom</Text>
+</Box>
+```
+
+See example in [examples/borders](examples/borders/borders.tsx).
 
 ##### borderColor
 
 Type: `string`
 
 Change border color.
-Accepts the same values as [`color`](#color) in `<Text>` component.
+Shorthand for setting `borderTopColor`, `borderRightColor`, `borderBottomColor` and `borderLeftColor`.
 
 ```jsx
 <Box borderStyle="round" borderColor="green">
@@ -887,6 +999,99 @@ Accepts the same values as [`color`](#color) in `<Text>` component.
 
 <img src="media/box-borderColor.jpg" width="228">
 
+##### borderTopColor
+
+Type: `string`
+
+Change top border color.
+Accepts the same values as [`color`](#color) in `<Text>` component.
+
+```jsx
+<Box borderStyle="round" borderTopColor="green">
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderRightColor
+
+Type: `string`
+
+Change right border color.
+Accepts the same values as [`color`](#color) in `<Text>` component.
+
+```jsx
+<Box borderStyle="round" borderRightColor="green">
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderRightColor
+
+Type: `string`
+
+Change right border color.
+Accepts the same values as [`color`](#color) in `<Text>` component.
+
+```jsx
+<Box borderStyle="round" borderRightColor="green">
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderBottomColor
+
+Type: `string`
+
+Change bottom border color.
+Accepts the same values as [`color`](#color) in `<Text>` component.
+
+```jsx
+<Box borderStyle="round" borderBottomColor="green">
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderLeftColor
+
+Type: `string`
+
+Change left border color.
+Accepts the same values as [`color`](#color) in `<Text>` component.
+
+```jsx
+<Box borderStyle="round" borderLeftColor="green">
+	<Text>Hello world</Text>
+</Box>
+```
+
+##### borderTop
+
+Type: `boolean`\
+Default: `true`
+
+Determines whether top border is visible.
+
+##### borderRight
+
+Type: `boolean`\
+Default: `true`
+
+Determines whether right border is visible.
+
+##### borderBottom
+
+Type: `boolean`\
+Default: `true`
+
+Determines whether bottom border is visible.
+
+##### borderLeft
+
+Type: `boolean`\
+Default: `true`
+
+Determines whether left border is visible.
+
 ### `<Newline>`
 
 Adds one or more newline (`\n`) characters.
@@ -1030,7 +1235,7 @@ render(<Example />);
 that were previously rendered. This means that when you add new items to `items`
 array, changes you make to previous items will not trigger a rerender.
 
-See [examples/static](examples/static/static.js) for an example usage of `<Static>` component.
+See [examples/static](examples/static/static.tsx) for an example usage of `<Static>` component.
 
 #### items
 
@@ -1120,7 +1325,7 @@ This hook is used for handling user input.
 It's a more convenient alternative to using `useStdin` and listening to `data` events.
 The callback you pass to `useInput` is called for each character when user enters any input.
 However, if user pastes text and it's more than one character, the callback will be called only once and the whole string will be passed as `input`.
-You can find a full example of using `useInput` at [examples/use-input](examples/use-input/use-input.js).
+You can find a full example of using `useInput` at [examples/use-input](examples/use-input/use-input.tsx).
 
 ```jsx
 import {useInput} from 'ink';
@@ -1403,7 +1608,7 @@ const Example = () => {
 };
 ```
 
-See additional usage example in [examples/use-stdout](examples/use-stdout/use-stdout.js).
+See additional usage example in [examples/use-stdout](examples/use-stdout/use-stdout.tsx).
 
 ### useStderr()
 
@@ -1496,7 +1701,7 @@ const Example = () => {
 render(<Example />);
 ```
 
-See example in [examples/use-focus](examples/use-focus/use-focus.js) and [examples/use-focus-with-id](examples/use-focus-with-id/use-focus-with-id.js).
+See example in [examples/use-focus](examples/use-focus/use-focus.tsx) and [examples/use-focus-with-id](examples/use-focus-with-id/use-focus-with-id.tsx).
 
 ### useFocusManager()
 
@@ -1833,17 +2038,17 @@ npm run example examples/[example name]
 # e.g. npm run example examples/borders
 ```
 
-- [Jest](examples/jest/jest.js) - Implementation of basic Jest UI [(live demo)](https://ink-jest-demo.vadimdemedes.repl.run/).
-- [Counter](examples/counter/counter.js) - Simple counter that increments every 100ms [(live demo)](https://ink-counter-demo.vadimdemedes.repl.run/).
+- [Jest](examples/jest/jest.tsx) - Implementation of basic Jest UI [(live demo)](https://ink-jest-demo.vadimdemedes.repl.run/).
+- [Counter](examples/counter/counter.tsx) - Simple counter that increments every 100ms [(live demo)](https://ink-counter-demo.vadimdemedes.repl.run/).
 - [Form with validation](https://github.com/final-form/rff-cli-example) - Manage form state using [Final Form](https://github.com/final-form/final-form#-final-form).
-- [Borders](examples/borders/borders.js) - Add borders to `<Box>` component.
-- [Suspense](examples/suspense/suspense.js) - Use React Suspense.
-- [Table](examples/table/table.js) - Render a table with multiple columns and rows.
-- [Focus management](examples/use-focus/use-focus.js) - Use `useFocus` hook to manage focus between components.
-- [User input](examples/use-input/use-input.js) - Listen to user input.
-- [Write to stdout](examples/use-stdout/use-stdout.js) - Write to stdout bypassing main Ink output.
-- [Write to stderr](examples/use-stderr/use-stderr.js) - Write to stderr bypassing main Ink output.
-- [Static](examples/static/static.js) - Use `<Static>` to render permanent output.
+- [Borders](examples/borders/borders.tsx) - Add borders to `<Box>` component.
+- [Suspense](examples/suspense/suspense.tsx) - Use React Suspense.
+- [Table](examples/table/table.tsx) - Render a table with multiple columns and rows.
+- [Focus management](examples/use-focus/use-focus.tsx) - Use `useFocus` hook to manage focus between components.
+- [User input](examples/use-input/use-input.tsx) - Listen to user input.
+- [Write to stdout](examples/use-stdout/use-stdout.tsx) - Write to stdout bypassing main Ink output.
+- [Write to stderr](examples/use-stderr/use-stderr.tsx) - Write to stderr bypassing main Ink output.
+- [Static](examples/static/static.tsx) - Use `<Static>` to render permanent output.
 - [Child process](examples/subprocess-output) - Render output from a child process.
 
 ## Maintainers