Working on a new design system component for various kinds of list items, settings rows, etc throughout our app
It looks simple but it's turning out to be extremely difficult. I'm not sure it's even possible
I've gotten very close except for centering "value"
codepen.io/editor/Jamie...
![function Example() {
let [cardNumber, setCardNumber] = useState()
let { inputProps, ...otherStuff } = useInputMask({
mask: "0000 0000 0000 0000",
value: cardNumber,
onValueChange: setCardNumber,
})
// <MyInput> needs to accept all of these props:
//
// inputProps = {
// value,
// onInput, onPaste, onFocus, onBlur,
// onKeyDown, onKeyPress, onKeyUp,
// }
return <MyInput {...inputProps}/>
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreifvrvm2ajojsa27syjr55k2mfya2t7yk76ipihy7tppgdtviuxcda)
![function Example() {
let [cardNumber, setCardNumber] = useState()
let ref = useRef()
let { ...otherStuff } = useInputMask(ref, {
mask: "0000 0000 0000 0000",
value: cardNumber,
onValueChange: setCardNumber,
})
// <MyInput> only needs to accept a ref
return <MyInput ref={ref} />
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreidx7wgpz65usbhdunf5fch7kvf2q64shw5uckuwn2tawmbycqqqfa)
![Title: Anchor Positioning Containment
Section 1: In this example, the tooltip should be constrained by the scroll area of the dialog component. Its positioning should prefer the “max-height” relative to the parent scroll area and should close when its anchor is not visible [images of a scroll area inside of a dialog slowly being scrolled and the position of the tooltip flipping to use the largest available area and then disappearing when the button it is anchored to scrolls away]
Section 2: As the tooltip gets larger it should try to remain centered within the x-axis of the scroll area, and its height should fit the content as long as there is space available in the y-axis [images of the tooltip content getting longer and longer, staying within the width of the scroll area, and eventually wrapping to a new line, then overflowing with an ellipsis when there is no longer enough room for more lines]](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreigp77fkfj4pv47uramgqpzyx5t6pedn3soypm4pupq7cvfuuen2n4)
![let text = "aaabbbccc"
let start = 3
let end = 6
// Today: Need to call .slice() 3 times
let before = text.slice(0, start)
let inner = text.slice(start, end)
let after = text.slice(end)
// Proposal: string.slices()
let [before, inner, after] = "aaabbbccc".slices(3, 6)
// ["aaa", "bbb", "ccc"]
// Example: Highlighting search result text
let text = "NYC flights are booked:"
let search = "flights"
let start = text.indexOf(search)
let end = start + search.length
let [before, match, after] = text.slices(start, end)
let html = `<span>${before}<em>${match}</em>${after}</span>`
// >>> "<span>NYC <em>flights</em> are booked"](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreiamuoalerwstz6ipz4jqidnneh52cv7wrzduogaiymxmaebtfdxra)
![// This dreaded "global state" does not make you a terrible developer.
let connection = null
// Look this isn't so bad...
function db() {
assert(connection != null, "Call connect() first")
return connection
}
// Your database tests can know they need to call this every time
export async function connect() {
assert(connection == null, "Do not call connect() twice")
connection = new Database()
await connection.connect()
}
// And this one after each test...
export function close() {
assert(connection != null, "I cannot close() what is not opened")
connection.close()
connection = null
}
// Look how nice it will be to just import this function directly
export function booksList() {
return db().query("SELECT * FROM books").all()
}
// Or this one... do you really need some DatabaseServiceFactoryController?
export function booksGet(id) {
return db().query("SELECT * FROM books WHERE id = ?").get([id])
}
// The answer is no, feel free to be a little bit bad
export function booksAdd({ title }) {
return db().query("INSERT INTO books (title) VALUES (?)").run([title])
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreicom5jpuimd7x2rqho5uafel6v7khrzsdqznyqm6f3mjxqldohyv4)
![// JS strings are represented as UTF-16, but most langs/tools
// have preferred using UTF-8 for many years, which complicates interop
//
// We can never change the underlying representation of JavaScript strings, but
// still many tools need to operate on raw utf-8 bytes.
//
// It would be nice if we could do use some familiar string APIs but operating
// on UTF-8 bytes
// The body returned by fetching example.com will return UTF-8 bytes.
// We can access those bytes directly in an ArrayBuffer.
let response = await fetch("https://example.com/")
let buffer = await response.arrayBuffer()
// You can then construct a Uint8Array from that buffer and each element
// will represent one UTF-8 code unit.
let bytes = new Uint8Array(buffer)
// However, now you're just working with numbers
console.log(bytes) // >> Uint8Array(1256) [60, 33, 100, 111, 99, 116, ...]
// If you want to do any string-like operations on these arrays, you basically
// need to do everything yourself
// Proposal:
// What if we had a new TypedArray class that had string-ish methods?
let utf8 = new Utf8String(buffer)
// This is still just a Uint8Array/ArrayBuffer under the hood
utf8 instanceof Uint8Array // true
utf8.buffer === buffer // true
// Indices would still just be numbers
// (They wouldn't automatically convert to UTF-16 strings)
utf8[0] // >> 60
// But accessing malformed data would return U+FFFD (�) the "Replacement Char"
utf8[malformedCharIndex] // >> 65533
// Then we can start getting into the fun bits: Now you can have familiar
// String-like APIs that operate on UTF-8 encoded bytes rather than UTF-16
utf8.trim() // >> Utf8String
utf8.padEnd(5) // >> Utf8String
// For operations that need another string, you'd use other Utf8Strings
let other = Utf8String.from("<h1>Example Domain</h1>")
utf8.includes(other)
utf8.localeCompare(other, { sensitivity: "base" })
// Maybe even regex operations could still work
utf8.match(/Example/)
utf8.replace(/Example/, Utf8String.from("Paragon"))](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:mlm5fumlu4k7emxlveklmp4z/bafkreifaj4xneiwoeyricso3ihgdhlnpf7fxsmftxmlno6xjvhvrpbyrwi)
