matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New Date input (#368)

Browse Source 
Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala
2024-04-15 18:39:19 +05:30
committed by GitHub
parent 1dd02cc147
commit 4f4f7128fa
10 changed files with 501 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
client/lib/colors.js vendored Normal file
View File

@@ -0,0 +1,114 @@
// hexToHSL.js functionality
const hexToHSL = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) || []
try {
let r = parseInt(result[1], 16)
let g = parseInt(result[2], 16)
let b = parseInt(result[3], 16)
r /= 255
g /= 255
b /= 255
const max = Math.max(r, g, b),
min = Math.min(r, g, b)
let h = 0,
s,
l = (max + min) / 2
if (max === min) {
h = s = 0 // achromatic
} else {
const d = max - min
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0)
break
case g:
h = (b - r) / d + 2
break
case b:
h = (r - g) / d + 4
break
}
h /= 6
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }
} catch (error) {
console.error('Invalid HEX color', hex)
return { h: 0, s: 0, l: 0 }
}
}
// hslToHex.js functionality
const hslToHex = ({ h, s, l }) => {
l /= 100
const a = (s * Math.min(l, 1 - l)) / 100
const f = n => {
const k = (n + h / 30) % 12
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
return Math.round(255 * color).toString(16).padStart(2, '0')
}
return `#${f(0)}${f(8)}${f(4)}`
}
// generateColor.js functionality
const generateColor = ({ hex, preserve, shades }) => {
const colorHSL = hexToHSL(hex)
const obj = {}
const lightnessDelta = {}
shades.forEach(({ name, lightness }) => {
const { h, s, l } = colorHSL
const hsl = { h, s, l: lightness }
const hex = hslToHex(hsl)
obj[name] = hex
if (preserve) lightnessDelta[name] = Math.abs(l - lightness)
})
if (preserve) {
const [closestShade] = Object.keys(lightnessDelta).sort(
(a, b) => lightnessDelta[a] - lightnessDelta[b]
)
obj[closestShade] = hex
}
return obj
}
// tailwindcssPaletteGenerator functionality
const tailwindcssPaletteGenerator = (options) => {
let colors = []
let names = ['primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'senary', 'septenary', 'octonary', 'nonary', 'denary']
let preserve = true
let shades = [
{ name: '50', lightness: 98 },
{ name: '100', lightness: 95 },
{ name: '200', lightness: 90 },
{ name: '300', lightness: 82 },
{ name: '400', lightness: 64 },
{ name: '500', lightness: 46 },
{ name: '600', lightness: 33 },
{ name: '700', lightness: 24 },
{ name: '800', lightness: 14 },
{ name: '900', lightness: 7 },
{ name: '950', lightness: 4 }
]
if (typeof options === 'string') options = { colors: [options], names, preserve, shades }
if (Array.isArray(options)) options = { colors: options, names, preserve, shades }
if (typeof options === 'object' && !Array.isArray(options)) {
options = Object.assign({ colors, names, preserve, shades }, options)
}
const palette = {}
options.colors.forEach((hex, i) => {
const name = options.names[i]
palette[name] = generateColor({ hex, preserve, shades: options.shades })
})
return palette
}
// Exporting the functions
export { generateColor, tailwindcssPaletteGenerator }

27
client/lib/forms/form-themes.js vendored
View File

@@ -6,11 +6,20 @@ export const themes = {
default: {
label: 'text-gray-700 dark:text-gray-300 font-semibold',
input: 'rounded-lg border-gray-300 flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100',
inputSpacing: {
vertical: 'py-2',
horizontal: 'px-4'
},
help: 'text-gray-400 dark:text-gray-500'
},
Button: {
body: 'transition ease-in duration-200 text-center font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg filter hover:brightness-110'
},
DateInput: {
label: 'text-gray-700 dark:text-gray-300 font-semibold',
input: 'rounded-lg flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100',
help: 'text-gray-400 dark:text-gray-500'
},
CodeInput: {
label: 'text-gray-700 dark:text-gray-300 font-semibold',
input: 'rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden',
@@ -51,11 +60,20 @@ export const themes = {
default: {
label: 'text-gray-700 dark:text-gray-300 font-semibold',
input: 'flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-2 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100',
inputSpacing: {
vertical: 'py-2',
horizontal: 'px-4'
},
help: 'text-gray-400 dark:text-gray-500'
},
Button: {
body: 'transition ease-in duration-200 text-center font-semibold focus:outline-none focus:ring-2 focus:ring-offset-2 filter hover:brightness-110'
},
DateInput: {
label: 'text-gray-700 dark:text-gray-300 font-semibold',
input: 'flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 placeholder-gray-400 text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100',
help: 'text-gray-400 dark:text-gray-500'
},
SelectInput: {
label: 'text-gray-700 dark:text-gray-300 font-semibold',
input: 'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full px-2 bg-white text-gray-700 placeholder-gray-400 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-600 text-base focus:outline-none focus:ring-2 focus:border-transparent',
@@ -96,11 +114,20 @@ export const themes = {
default: {
label: 'text-gray-900 dark:text-gray-100 mb-2 block mt-4',
input: 'rounded border-transparent flex-1 appearance-none shadow-inner-notion w-full py-2 px-2 bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 dark:placeholder-gray-500 placeholder-gray-400 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion',
inputSpacing: {
vertical: 'py-2',
horizontal: 'px-4'
},
help: 'text-notion-input-help dark:text-gray-500'
},
Button: {
body: 'rounded-md transition ease-in duration-200 text-center font-semibold shadow shadow-inner-notion focus:outline-none focus:ring-2 focus:ring-offset-2 filter hover:brightness-110'
},
DateInput: {
label: 'text-gray-900 dark:text-gray-100 mb-2 block mt-4',
input: 'rounded shadow-inner-notion border-transparent focus:border-transparent flex-1 appearance-none w-full bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 placeholder-gray-400 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion p-[1px]',
help: 'text-notion-input-help dark:text-gray-500'
},
SelectInput: {
label: 'text-gray-900 dark:text-gray-100 mb-2 block mt-4',
input: 'rounded relative w-full border-transparent flex-1 appearance-none bg-notion-input-background shadow-inner-notion w-full px-2 text-gray-900 placeholder-gray-400 dark:bg-notion-dark-light dark:placeholder-gray-500 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion',