Merge pull request #3 from mikemcbride/two-point-oh

2.0

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.gitignore

@@ -0,0 +1,60 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test

README.md

@@ -1,6 +1,8 @@
 # convert-color-cli
 
-Convert HEX codes to RGB and vice-versa from the command line.
+Convert HEX, RGB, and HSL colors to other formats from the command line.
+
+<img src="screenshot.gif" width="688">
 
 ## Install
 
@@ -14,37 +16,39 @@ npm install -g convert-color-cli # or yarn global add convert-color-cli
 
 ### Globally
 
-Convert RGB to HEX. You can pass the three RGB values as separate arguments or you can pass the full `rgb(x,x,x)` string wrapped in quotes. If doing RGBA, you must wrap in quotes.
+Convert RGB, HEX, or HSL, including alpha values for all three. You can pass any color code in as the optional first parameter:
 
 ```sh
-$ convert-color 255 154 253
-> ff9afd
-
 $ convert-color 'rgb(40, 42, 54)'
-> 282a36
-
 $ convert-color 'rgba(40, 42, 54, 75%)'
-> 282a36bf
+$ convert-color ff9afd
+$ convert-color '#282a36'
+$ convert-color 282a36bf
+$ convert-color 'hsl(336, 100%, 50%)'
+$ convert-color 'hsla(336, 100%, 50%, 0.75)'
 ```
 
-Convert HEX to RGB. The `#` is optional but if you include it you must wrap the input in quotes. It can also handle HEX codes with alpha values.
+The CLI app will detect the format of the color you input and ask which type you'd like to convert it to:
 
 ```sh
-$ convert-color ff9afd
-> rgb(255, 154, 253)
-$ convert-color '#282a36'
-> rgb(40, 42, 54)
-$ convert-color 282a36bf
-> rgba(40, 42, 54, 75%)
+$ convert-color 'hsl(336, 100%, 50%)'
+
+Convert hsl(336, 100%, 50%) to which format:
+
+❯ HEX
+  RGB
 ```
 
-## Related
+Upon selecting a format, the converted value will be displayed and the result is copied to your clipboard:
 
-This CLI makes heavy use of these excellent modules under the hood:
+```sh
+$ convert-color 'hsl(336, 100%, 50%)'
+
+hsl(336, 100%, 50%) converted to RGB is rgb(255, 0, 102).
 
-- [hex-rgb](https://github.com/sindresorhus/hex-rgb) - Convert HEX to RGB
-- [rgb-hex](https://github.com/sindresorhus/rgb-hex) - Convert RGB to HEX
+It has been copied to your clipboard.
+```
 
 ## License
 
-MIT © [Mike McBride](https://mikemcbride.me)
+MIT © [Mike McBride](https://mikemcbride.me)

cli.js

@@ -1,63 +1,42 @@
 #!/usr/bin/env node
 'use strict'
+const React = require('react')
+const importJsx = require('import-jsx')
+const {render} = require('ink')
 const meow = require('meow')
-const rgbHex = require('rgb-hex')
-const hexRgb = require('hex-rgb')
-const clipboardy = require('clipboardy')
-const chalk = require('chalk')
-
-function isHex(str) {
-  // optional # at beginning
-  // matches a-f, A-F, 0-9 exactly 8, 6, or 3 times
-  let hexRegex = /^#?([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/
-  return hexRegex.test(str)
-}
+
+const ui = importJsx('./ui')
 
 const cli = meow(`
   Examples
-  # rgb to hex
-  $ convert-color 255 154 253
-  ff9afd
+  # rgb
   $ convert-color 'rgb(40, 42, 54)'
-  282a36
+
+  # alpha values can be % or decimal
   $ convert-color 'rgba(40, 42, 54, 75%)'
-  282a36bf
   $ convert-color 'rgba(40, 42, 54, 0.75)'
-  282a36bf
-  
-  # hex to rgb
+
+  # hex
   $ convert-color ff9afd
-  rgb(255, 154, 253)
-  
+
   # can have a pound sign at beginning
   $ convert-color '#282a36'
-  rgb(40, 42, 54)
-  
-  # works with 8 digit hex codes
+
+  # works with 8 digit hex codes (opacity)
   $ convert-color 282a36bf
-  rgba(40, 42, 54, 0.75)
+
+  # hsl
+  $ convert-color 'hsl(336, 100%, 50%)'
+
+  # alpha values can be % or decimal
+  $ convert-color 'hsla(336, 100%, 50%, 75%)'
+  $ convert-color 'hsla(336, 100%, 50%, 0.75)'
+
+  # you can also omit a color and input it using the interactive input
+  $ convert-color
+
+  Enter the color you want to convert:
 `)
 
-const val = cli.input.join(' ')
-let convertedValue = ''
-
-if (isHex(val)) {
-  let { red, green, blue, alpha } = hexRgb(val)
-  if (alpha !== 1) {
-    alpha = parseFloat(alpha).toFixed(2)
-    if (alpha.endsWith(0)) {
-      alpha = parseFloat(alpha).toFixed(1)
-    }
-
-    convertedValue =`rgba(${red}, ${green}, ${blue}, ${alpha})`
-  } else {
-    convertedValue = `rgb(${red}, ${green}, ${blue})`
-  }
-} else {
-  convertedValue = rgbHex(val)
-}
-
-clipboardy.writeSync(convertedValue)
-
-console.log(chalk.green(`${convertedValue} (copied to clipboard)`))
-
+const initialColor = cli.input.length === 0 ? null : cli.input.join(' ')
+module.exports = render(React.createElement(ui, { color: initialColor }))

components/InputColor.js

@@ -0,0 +1,14 @@
+const React = require('react')
+const { Box, Text } = require('ink')
+const { UncontrolledTextInput } = require('ink-text-input')
+
+const InputColor = (props) => (
+  <Box>
+    <Box marginRight={1}>
+      <Text>Enter the color you want to convert:</Text>
+    </Box>
+    <UncontrolledTextInput onSubmit={props.onInputChange} />
+  </Box>
+)
+
+module.exports = InputColor

components/SelectFormat.js

@@ -0,0 +1,15 @@
+const React = require('react')
+const { Box, Color, Text } = require('ink')
+const { default: SelectInput } = require('ink-select-input')
+
+const SelectFormat = (props) => (
+  <Box flexDirection="column">
+    <Box marginBottom={1}>
+      <Text>Convert <Color green>{props.color}</Color> to which format:</Text>
+    </Box>
+
+    <SelectInput items={props.conversionItems} onSelect={props.onFormatSelect} />
+  </Box>
+)
+
+module.exports = SelectFormat