lmcjt37/kulor-reactify

Colour convertor written using node and react

Kulor-reactify

Description

This is a colour conversion app that allows you to convert colours between RGB, HEX and HSL colour modes. The background of the app updates to provide you with a representation of what the colour you are converting looks like. It is written using vanilla React without any flux/redux framework to keep it simple.

Includes:

• Randomisation
• Lighten (default: +10%, can be controlled by variance slider)
• Darken (default: -10%, can be controlled by variance slider)
• Handles alpha and conversion
• Handy Help Hints to get you going
• Quickly copy the input for wherever it's needed
• More to come...

Getting Started

1. Clone this repository
2. Run npm install && npm run dev, this will install all dependencies, build and start up the server
3. Visit localhost:8080 in your browser (You can also visit the app on your device when on the same network)

Working project: http://lmcjt.com/kulor

Scripts

npm run dev This will run tests with coverage, build the app for development and then start a local server.

npm run start This starts the local server on port 8080.

npm run test Runs test suite.

npm run test:coverage This runs the test suite with coverage reporting.

npm run build:dev This will run tests with coverage and build app for development.

npm run build:prod This will run tests and then build app for production without additional plugins.

Tools

• React-toolbox (http://react-toolbox.com/)
• SASS (http://sass-lang.com/)
• TinyColour (https://github.com/bgrins/TinyColor)

Acknowledgements

• Navigation is based on Lucas Bebber's Gooey Menu but has been altered to work alongside React and React-toolbox
• Github corner link was created by Tim Holman

Pipeline

• Colour palette for storing colours from the session
• Ability to get different colour combos (triad/complementary/tetrad)

Contact

Feel free to contact me directly through twitter @lmcjt or my website lmcjt.com

Contributing

• Fork and submit PR's
• Raise issues/suggestions
• Contact me directly for further information

It's an ongoing project and contributions, issues or suggestions are welcome. You can contact me by any method you feel comfortable with. I don't adhere to any code of conduct, I just appreciate using your common sense and respecting others. Play nicely 😘

Troubleshooting

• Make sure to run npm install on first run of code to avoid console warnings/errors.
• If you receive "Node Sass could not find a binding for your current environment" error, try running npm rebuild node-sass to build the binding for your current environment.

kulor-reactify's Issues

Click to copy

Add the ability to click and copy each value.

• RGB
• HEX
• HSL (concat the 3 sources to one value)

Can zoom on iPhone

Seen on iPhone 6S, double-tap on the background caused the screen to zoom in and again back out.

This functionality should be disabled and/or not happen.

Number of formatting issues spotted in trimRgb method of colourHelper

• 3 characters allows the fullstop and 2 characters doesn't
  expect(ColourHelper.trimRgb("123.")).to.equal("123,.");

• not excluding all unwanted characters
  expect(ColourHelper.trimRgb("rgba(123,123,123)")).to.equal("123,123,123");

• shouldn't allow initial fullstop
  expect(ColourHelper.trimRgb(".")).to.equal("");

• shouldn't allow initial space or replace space with comma
  expect(ColourHelper.trimRgb(" ")).to.equal(",");

• zeros shouldn't be allowed in first 3 sections
  expect(ColourHelper.trimRgb("255,255,0")).to.equal("255,255,0");

Tests need creating and integrating in build cycle

• Unit
• Integration
• Contract (If necessary)

Input text on RGB input can be too long on handheld

With the introduction of the alpha value, it is possible for the input text to overlap the prefix or suffix of the input.

See attachment.

First character in RGB input can be a comma

Need validation to prevent commas(and other allowed punctuation) as first characters in the RGB input field.

Storage mechanism for tracking favourite colours

The idea would be to create something like a colour palette which could either store saved colours to, or suggestive colours could be generated in place/as well as.

Gooey Nav Item ripple effect update

The gooey navitem ripple effect is currently done using (s)css. This could actually be swapped for the react toolbox version.

The example - http://react-toolbox.com/#/components/ripple - can be used as a guide

Hint text not functioning correctly

• You can cause the HEX hint text to overlap the RGB one by deleting the initial value in the HEX input field.

• Opacity is not being applied correctly to the hint text when deleting the text.

• It should be "#" not "HEX#"

Failed to load resource (__webpack.hmr)

Not causing a major or critical issue that is breaking. But something isn't being bundled correctly and is causing this issue:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://lmcjt.com/__webpack_hmr

The page will continue to try and GET the resource and fail each time.

** Can be seen in the console

RGB input bug not handling spaces

When inputting values, adding spaces will break the converter or not give the correct returned value/colour.

Add path resolver

Update documentation

Update documentation around testing and other available scripts which can be found in package.json

UI fixes for handheld screensizes

• Copy buttons too close
• Buttons not expanding to full width

Missing prefix/suffix when change event inserts value

If you empty the RGB field so that the prefix and suffix disappear, then change the HEX field so that a value is inserted into the RGB field. This change event doesn't cause the prefix/suffix opacity to react or change for the new value.

Needs a check in place for change events across the board.

UI too tall for mobile

Recently adding the button bar has cause the screen to be too tall to fit on the screen without scrolling.

A decision needs to be made in order to either present the buttons better at the bottom of the screen, show only icons, or have a single button that hides/shows all the buttons as and when they are needed.

Initial Unit Tests

Initial Unit Tests need to be added, this will help identify ongoing issues or potential gotchas.

Increment/decrement lighten and darken by value

Find a solution to be able to specify the value of which you lighten and darken the colour by each time you click the button.

Limit values for RGB input

RGB values for each primary colour(red, green, blue) should be limited to 255. The fix for this could simply be to introduce tooltips sooner to help flag user input errors rather than handle this in the code.

Add Webpack dashboard

https://medium.com/@wesharehoodies/webpack-dashboard-with-create-react-app-vue-cli-and-custom-configs-49166e1a69de

Alpha doesn't affect background colour

The reason for this is that the mechanism used to work out the theme (isDark), doesn't factor in alpha to it's calculations. Therefore as we change the background, readability is poor. So the decision to leave this change out was made.

Deleting alpha from rgb input not returning to 1.0

MOR

• Add alpha value to rgb
• Remove alpha from rgb
• See background colour not affected

Alpha background affects github link corner

Certain extremes of alpha against certain colours (if not all) causes the "Octocat" to display incorrectly

Colour combinations

Using the tinyColor library, we could use what is already available to us and expand on functionality to include the following; triad, complementary, and tetrad.

Test - Add coverage for tests

Include some sort of coverage reporter for tests to be extra thorough - maybe Istanbul

UI layout on mobile responsive

Not enough clearance from the logo when viewing the page on responsive mobile.

Add alpha

There are a number of different ways this could be done.

Thinking about it, the simplest way would be to add another slider which if anything other than 1.0 then we would add a 4th segment to RGB and HEX. Where the HSL/HSV values could simply use the slider pattern as is.