Merge pull request #4 from privatenumber/develop

release

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -6,22 +6,33 @@ labels: 'bug: pending triage'
 
 ## Bug description
 <!--
-  A clear and concise description of what the expected behavior is and what happened instead.
+  What did you do? (Provide code in next section)
+
+  What did you expect to happen?
+
+  What happened instead?
+
+  Do you have an error stack-trace?
 -->
 
-## Reproduction steps
+## Reproduction
 <!--
-  Providing reproduction steps are crucial for communicating the problem.
+  Provide one of the following:
+  1. A code-snippet that reproduces the issue
+  2. A reproduction repo that reproduces the issue
+  3. A PR with a failing test-case
+
+  Remove irrelevant code to make it easier for others to read and debug.
 
-  Please open a PR with a failing test case or provide a link to a repo that can reproduce the problem you ran into.
+  -- Why?
+  The goal is to maximize communication efficiency.
 
-  Keep your reproductions minimal. Follow guidelines here: https://stackoverflow.com/help/minimal-reproducible-example
+  When an issue is immediately reproducible, others can start debugging instead of following-up with questions.
 -->
 
 ## Environment
 
-- ink-task-runner version:
-- Webpack version:
+- ink-task-list version:
 - Operating System:
 - Node version:
 - Package manager (npm/yarn/pnpm) and version:

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -4,22 +4,30 @@ about: Suggest an idea for this project
 labels: 'feature request'
 ---
 
-## Is your feature request related to a problem? Please describe.
+## Is your feature request related to a problem?
 <!--
-  A clear and concise description of what the problem is. Ex. I'm frustrated when [...]
+  What's the motivation behind this issue?
+
+  Eg. I'm frustrated when...
 -->
 
 ## Describe the solution you'd like
 <!--
-  A clear and concise description of what you want to happen.
+  What kind of solution would you like to see?
+
+  What makes it a good solution?
 -->
 
 ## Describe alternatives you've considered
 <!--
-  A clear and concise description of any alternative solutions or features you've considered.
+  What else did you try?
+
+  Do you have a work around?
 -->
 
 ## Additional context
 <!--
-  Add any other context or screenshots about the feature request here.
+  Anything else to share?
+
+  Screenshots? Links?
 -->

README.md

@@ -1,23 +1,23 @@
-# ink-task-runner <a href="https://npm.im/ink-task-runner"><img src="https://badgen.net/npm/v/ink-task-runner"></a> <a href="https://npm.im/ink-task-runner"><img src="https://badgen.net/npm/dm/ink-task-runner"></a> <a href="https://packagephobia.now.sh/result?p=ink-task-runner"><img src="https://packagephobia.now.sh/badge?p=ink-task-runner"></a> <a href="https://bundlephobia.com/result?p=ink-task-runner"><img src="https://badgen.net/bundlephobia/minzip/ink-task-runner"></a>
+# ink-task-list <a href="https://npm.im/ink-task-list"><img src="https://badgen.net/npm/v/ink-task-list"></a> <!-- <a href="https://npm.im/ink-task-list"><img src="https://badgen.net/npm/dm/ink-task-list"></a> --> <a href="https://packagephobia.now.sh/result?p=ink-task-list"><img src="https://packagephobia.now.sh/badge?p=ink-task-list"></a>
 
-Task runner components for [Ink](https://github.com/vadimdemedes/ink)
+Task list components for [Ink](https://github.com/vadimdemedes/ink)
 
 <p align="center">
-  <img width="400" src=".github/task-runner.gif">
+  <img width="400" src=".github/task-list.gif">
 </p>
 
 <sub>Support this project by ⭐️ starring and sharing it. [Follow me](https://github.com/privatenumber) to see what other cool projects I'm working on! ❤️</sub>
 
 ## 🚀 Install
 ```sh
-npm i ink-task-runner
+npm i ink-task-list
 ```
 
 ## 🚦 Quick usage
 ```tsx
 import React from 'react';
 import { render } from 'ink';
-import { TaskList, Task } from 'ink-task-runner';
+import { TaskList, Task } from 'ink-task-list';
 
 render(
     <TaskList>
@@ -110,3 +110,5 @@ Default: `false`
 
 ## 🙏 Credits
 The component UI was insipired [listr](https://github.com/SamVerschueren/listr) and [listr2](https://github.com/cenk1cenk2/listr2) ❤️
+
+Big thanks to [Sindre Sorhus](https://github.com/sindresorhus) for making this package so easy to make.

package.json

@@ -1,17 +1,16 @@
 {
-	"name": "ink-task-runner",
+	"name": "ink-task-list",
 	"version": "0.0.0-semantic-release",
-	"description": "Render a Task runner in Ink",
+	"description": "Render a Task list in Ink",
 	"keywords": [
 		"ink",
 		"components",
-		"task runner",
 		"task list",
 		"task"
 	],
 	"license": "MIT",
-	"repository": "privatenumber/ink-task-runner",
-	"funding": "https://github.com/privatenumber/ink-task-runner?sponsor=1",
+	"repository": "privatenumber/ink-task-list",
+	"funding": "https://github.com/privatenumber/ink-task-list?sponsor=1",
 	"author": {
 		"name": "Hiroki Osame",
 		"email": "hiroki.osame@gmail.com"

src/Task.tsx

@@ -1,4 +1,6 @@
-import React, { FC, ReactElement, isValidElement } from 'react';
+import React, {
+	FC, ReactElement, isValidElement, Children,
+} from 'react';
 import PropTypes from 'prop-types';
 import { Text, Box } from 'ink';
 import figures from 'figures';
@@ -50,7 +52,7 @@ const Task: FC<{
 	isExpanded,
 	children,
 }) => {
-	const childrenArray = Array.isArray(children) ? children : [children];
+	const childrenArray = Children.toArray(children);
 	const listChildren = childrenArray.filter(node => isValidElement(node));
 	let icon = (state === 'loading')
 		? (

tests/List.spec.tsx

@@ -101,12 +101,25 @@ describe('basic use-cases', () => {
 						state="pending"
 					/>
 				</Task>
+				<Task
+					label="Nested va children prop"
+					isExpanded
+					// eslint-disable-next-line react/no-children-prop
+					children={
+						<Task
+							label="Item loading"
+							state="loading"
+						/>
+					}
+				/>
 			</TaskList>,
 		);
 
 		expect(lastFrame()).toMatchInlineSnapshot(`
 		"❯ Item loading
-		  ◼ Item pending"
+		  ◼ Item pending
+		❯ Nested va children prop
+		  ⠋ Item loading"
 	`);
 	});
 });