From 1f9c5364ed19673edf1ac82633861412c0566631 Mon Sep 17 00:00:00 2001 From: Joachim Date: Thu, 17 Mar 2022 11:53:15 +0100 Subject: [PATCH 1/2] Add story --- .../components/form/color-select/stories.js | 252 ++++++++++++++++++ 1 file changed, 252 insertions(+) diff --git a/assets/javascripts/kitten/components/form/color-select/stories.js b/assets/javascripts/kitten/components/form/color-select/stories.js index 1dc8ed650a..64932769b7 100644 --- a/assets/javascripts/kitten/components/form/color-select/stories.js +++ b/assets/javascripts/kitten/components/form/color-select/stories.js @@ -1,4 +1,6 @@ import React, { useState, useEffect } from 'react' +import classNames from 'classnames' +import styled from 'styled-components' import { ColorSelect } from './index' import { action } from '@storybook/addon-actions' import { DocsPage } from 'storybook/docs-page' @@ -152,3 +154,253 @@ export const Default = ({ value, ...args }) => { ) } + + +const ALL_COLORS = [ +'#718000', +'#297eb3', +'#4379c4', +'#bf5a11', +'#006cff', +'#f00a0a', +'#198a5d', +'#f00038', +'#857272', +'#4b6369', +'#008763', +'#d11141', +'#0781a6', +'#006cff', +'#6667AB', +'#006cff', +'#1900ff', +'#eb1717', +'#4b4c4d', +'#6b8005', +'#c03320', +'#844dd6', +'#8f741d', +'#008704', +'#3A4BFB', +'#018766', +'#386fbc', +'#123752', +'#047454', +'#000000', +'#005952', +'#087cc4', +'#002d9c', +'#2d7d7a', +'#6d7a77', +'#006cff', +'#e33112', +'#007e80', +'#947256', +'#a36d21', +'#00404c', +'#04333a', +'#9e1184', +'#380087', +'#5400e3', +'#206355', +'#327fa6', +'#5a1539', +'#00804e', +'#3d1e99', +'#228500', +'#b85f06', +'#008a3e', +'#73797a', +'#3b06b0', +'#000000', +'#7b7d00', +'#008566', +'#008213', +'#1c8a30', +'#4b4949', +'#0882a1', +'#3507ff', +'#008a19', +'#188a04', +'#008a5e', +'#3c66a0', +'#058c00', +'#bf5474', +'#007d76', +'#80756a', +'#0601a4', +'#0081a8', +'#007ccf', +'#ab5200', +'#477f52', +'#273967', +'#108491', +'#008712', +'#c83a12', +'#2b4aa1', +'#082d61', +'#006cff', +'#088700', +'#a33bac', +'#807765', +'#e82502', +'#006cff', +'#0081a8', +'#0078e0', +'#c9530e', +'#bb2f03', +'#284cf5', +'#008c05', +'#044595', +'#621225', +'#ba0404', +'#358581', +'#022602', +'#99700f', +'#4c0f3a', +'#078c00', +'#710D0F', +'#488566', +'#007cb3', +'#e80e69', +'#d31f1f', +'#2d7603', +'#e80576', +'#078a32', +'#960a57', +'#000000', +'#bd5b42', +'#2969c1', +'#046db4', +'#1300ff', +'#073aed', +'#5b7aa6', +'#008585', +'#03877e', +'#236a7d', +'#b55b70', +'#152338', +'#8a7700', +'#d4008d', +'#d006d4', +'#008a3c', +'#ad50bf', +'#7d7d00', +'#b55c0a', +'#28377f', +'#007bc2', +'#006cff', +'#008c1e', +'#7d6e00', +'#7a7772', +'#0914b4', +'#666b6e', +'#021873', +'#3c8000', +'#000000', +'#000afa', +'#d400cd', +'#ba00db', +'#5e7d5b', +'#008a20', +'#168a58', +'#787878', +'#006cff', +'#857744', +'#7d3b00', +'#1c027c', +'#006cff', +'#990a0a', +'#234C44', +'#7d2d00', +'#74797a', +'#826f00', +'#77777d', +'#0c7cc7', +'#a700ff', +'#000000', +'#296254', +'#0080ab', +'#f00000', +'#53535a', +'#268500', +'#8f0000', +'#7d7500', +'#b440ac', +'#0A4F9C', +'#0565ec', +'#787877', +'#008002', +'#4b678b', +'#006cff', +'#e80078', +'#5e6f87', +'#5379ad', +'#5673cc', +'#7a7773', + +] + +const StyledViz = styled.div` + position: relative; + width: calc(100% - 30px); + margin-left: 30px; + height: 200px; + + background: + linear-gradient(180deg, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%), + linear-gradient(0deg, rgba(0,0,0,1), rgba(0, 0, 0, 0) 50%), + linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red); + + &::before { + content: " "; + position: absolute; + left: -30px; + width: 30px; + top: 0; + height: 100%; + background: linear-gradient(0deg, rgba(0,0,0,1), rgba(255, 255, 255, 1)); + } + + .colorButton { + position: absolute; + + &:not(.hueless) { + left: calc(var(--hue) / 360 * 100%); + } + &.hueless { + left: -15px; + } + top: calc(100% - var(--light) * 1%); + + width: 5px; + height: 5px; + border-radius: 5px; + border: 2px solid white; + transform: translate(-50%, -50%); + + background-color: var(--color); + } +` + +export const Visualizer = () => { + return ( + + {ALL_COLORS.map((color) => { + const colorHSL = colord(color).toHsl() + + return ( +
) + })} + + ) +} From f3ffd63c3332ac482f1af0abca73a65e8cb50367 Mon Sep 17 00:00:00 2001 From: Joachim Date: Thu, 17 Mar 2022 12:27:28 +0100 Subject: [PATCH 2/2] Update stories.js --- .../components/form/color-select/stories.js | 61 +++++++++++++------ 1 file changed, 44 insertions(+), 17 deletions(-) diff --git a/assets/javascripts/kitten/components/form/color-select/stories.js b/assets/javascripts/kitten/components/form/color-select/stories.js index 64932769b7..a20caab3bf 100644 --- a/assets/javascripts/kitten/components/form/color-select/stories.js +++ b/assets/javascripts/kitten/components/form/color-select/stories.js @@ -4,8 +4,9 @@ import styled from 'styled-components' import { ColorSelect } from './index' import { action } from '@storybook/addon-actions' import { DocsPage } from 'storybook/docs-page' -import { Text, Button } from 'kitten' +import { Text, Button, Field } from 'kitten' import { colord } from 'colord' +import uniq from 'lodash/fp/uniq' export default { title: 'Form/ColorSelect', @@ -384,23 +385,49 @@ const StyledViz = styled.div` ` export const Visualizer = () => { + const [inputValue, setInputValue] = useState(ALL_COLORS.join('\n')) + + const handleInputChange = (e) => { + setInputValue(e.target.value) + } + return ( - - {ALL_COLORS.map((color) => { - const colorHSL = colord(color).toHsl() + <> + + {uniq(inputValue.split('\n')).map((color) => { + const colorHSL = colord(color).toHsl() - return ( -
) - })} - + return ( +
) + })} + +
+ + Couleurs (une valeur par ligne) + + + + Fonctionne avec la commande : + + {`Project.where.not(page_colors: nil).select{|p| p.primary_100 != '#e6f7fe' && p.visible?}.each{|n| puts n.primary_500};0`} + + +
+ ) }