profile
viewpoint
Travis Arnold souporserious @planningcenter Carlsbad, CA souporserious.com Designer 🎨 Engineer 📐 Systems 🎛 React ⚛️ He/Him

gatsbyjs/gatsby 47549

Build blazing fast, modern apps and websites with React

downshift-js/downshift 8834

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

renatorib/react-powerplug 2676

:electric_plug: Renderless Containers

popperjs/react-popper 1778

🍿⚛Official React library to use Popper, the positioning library

danreeves/react-tether 362

React wrapper around Tether from Hub Spot

dstpierre/react-trix 167

React wrapper around Trix editor from Basecamp + some lightweight features

figma-tools/figma-tools 37

Tools to help you programmatically interact with your Figma files.

souporserious/animated-ui 21

Components for UI animations powered by Animated

souporserious/get-node-dimensions 18

Get accurate element dimensions, even if it's hidden!

souporserious/create-styled-element 6

Simple wrapper around glamor to create styled elements in React.

startedshuding/nextra

started time in 2 hours

startedstyled-components/css-to-react-native

started time in 2 days

issue openedkripod/otion

Write full queries as top-level rules

Motivation

<!-- Brief explanation of the feature through use cases. -->

It would be nice to be able to specify queries at the top-level. From what I can tell, this is currently not supported and they must always start with a conditional group and rules nested inside that.

css({ '@media screen and (min-width: 480px)': { color: 'tomato' } })

This would make transitioning from another library like Emotion or Styled Components easier since they support this syntax.

created time in 2 days

startedromgrk/react-drop-zone

started time in 4 days

startedpqina/react-filepond

started time in 4 days

startednornagon/flatten-svg

started time in 7 days

startedupendra-web/lean-svg

started time in 7 days

issue openedphuoc-ng/html-dom

Add: scroll while dragging

First, thank you for such a wonderful site! I'm in the middle of making a drag and drop library and have been splitting up the architecture as I go along and thought it might be nice to have an example of scrolling the viewport while dragging. I have a React example here that I wouldn't mind converting to vanilla if you think it would make for a good example. Please let me know, I'd be happy to start a PR 🙂

created time in 7 days

startedphuoc-ng/html-dom

started time in 7 days

starteddoitadrian/react-butterfiles

started time in 8 days

startedlokesh/color-thief

started time in 9 days

startedbenjamminf/warpjs

started time in 9 days

push eventsouporserious/figma-tools

Travis Arnold

commit sha 7d0c6b79cd26ef05f0e0b0da0b9440ad9ca7504f

v0.2.3

view details

push time in 10 days

push eventsouporserious/figma-tools

Travis Arnold

commit sha 6a12c42bb01e748641fceb7e9bf3727671e19696

build: upgrade figma-transformer again to get build changes

view details

push time in 10 days

pull request commentplanningcenter/icons

add Figma script

@dsecrest this just needs documentation and it should be ready for review. I'll get with @jonsuh to see where it's at since we started working on that on Friday.

@chantastic not sure if you read the summary from Friday, but we were able to build everything directly from Figma. This is just an enhancement and makes it easier to sync things up using the API. Figma keeps everything version controlled by the way, so I don't think we'll need to keep a local Figma file in Github.

souporserious

comment created time in 10 days

push eventplanningcenter/icons

push time in 10 days

push eventplanningcenter/icons

Travis Arnold

commit sha 21412fdcc1a8ed1cfd32a28baeefe3b2d4c7972c

upgrade figma-tools and remove polyfill

view details

push time in 10 days

push eventsouporserious/figma-tools

Travis Arnold

commit sha 9a19aa412fe695181c7623d94222c91759b42526

v0.2.2

view details

push time in 10 days

push eventsouporserious/figma-tools

Travis Arnold

commit sha 2e3f704bbebe3b0ee173c183e72d9a35615aa8b3

build: upgrade to latest figma-transformer

view details

push time in 10 days

startedrustwasm/wasm-bindgen

started time in 13 days

PR opened planningcenter/icons

add Figma script

Adds a Node script using the figma-tools library to make extracting assets from Figma easier. It does not change the build, which still works the same as before. In addition to building the icon set as normal, we can now run the following command to fetch SVGS from this Figma file:

npm run figma

Please note you will need a personal access token in a .env file at the root of the project in order to fetch the images properly:

FIGMA_TOKEN="your-token-here"
+281 -2355

0 comment

5 changed files

pr created time in 13 days

push eventplanningcenter/icons

Travis Arnold

commit sha dfadffe89effdcd0122907733ee47036f16f4031

cleanup and check for directory

view details

push time in 13 days

push eventplanningcenter/icons

Travis Arnold

commit sha bb5e1d6cee2922171687e6184d2ee148e3a77c9a

upgrade figma-tools and fix lock file

view details

push time in 13 days

push eventsouporserious/figma-tools

Travis Arnold

commit sha eed3611d2403fc4c26a6a107e8ce317440999e99

v0.2.1

view details

push time in 13 days

push eventsouporserious/figma-tools

Travis Arnold

commit sha 5aec89bf1b250aa54a93f779b91f46a232d1b1b2

fix: resolve when http response ends When fetching images they would sometimes come back incomplete, this makes sure the whole file is streamed properly.

view details

push time in 13 days

push eventplanningcenter/icons

Travis Arnold

commit sha a36645f02be0325fe2d9d57ef342cbe8c638df2e

add fromEntries polyfill

view details

push time in 13 days

create barnchplanningcenter/icons

branch : ta/add-figma-script

created branch time in 13 days

push eventplanningcenter/icons

Travis Arnold

commit sha 34e62a4bf59398a897a1fcad12c7bee69d48a3d2

added SVGO to writeCollection

view details

push time in 13 days

startedpveyes/raw.macro

started time in 15 days

startedpveyes/theme-in-css

started time in 15 days

issue commentadobe/react-spectrum

useSelect should select the option based on the last keystrokes

Oh, interesting! Yeah, the example here doesn't seem to be working. Is there option that needs to be configured?

souporserious

comment created time in 15 days

issue openedadobe/react-spectrum

useSelect should select the option based on the last keystrokes

<!--- Thanks for filing an issue 😄! Before you submit, please read the following:

Search open/closed issues before submitting since someone might have asked the same thing before! -->

🐛 Bug Report

The useSelect hook does not select the option based on the last keystrokes when the button is focused and menu is closed.

🤔 Expected Behavior

The useSelect hook should select the option based on the last keystrokes when closed and focused similar to how a native select works:

type-to-select

😯 Current Behavior

Right now nothing happens when the select box is focused and typing occurs.

💁 Possible Solution

I haven't looked into the architecture of useSelect yet, but at work we had to do some interesting things to mimic this, we render an invisible menu to collect the options and select them when the button is focused. There's a demo here if curious as to how it's working. I'll try to get a PR together when I get a chance 😊

created time in 15 days

issue commentframer/motion

[BUG] v2.5.1 Odd Behavior with Drag & onViewportBoxUpdates

This might already be known, but looks like something from 2.7.9rc to 2.8.0rc is breaking that demo: image

stolinski

comment created time in 15 days

startedGoogleChromeLabs/browser-nativefs

started time in 15 days

startedmalcommac/ScrollStackController

started time in 16 days

startedfigma/plugin-samples

started time in 16 days

startedwix/react-native-ui-lib

started time in 16 days

startedkentcdodds/bookshelf

started time in 17 days

startedjaredpalmer/tsdx-monorepo

started time in 17 days

push eventsouporserious/site

Travis Arnold

commit sha 9991a5edda68579a677a304aaed398ac3d27ee26

fix duplicate summary

view details

push time in 21 days

pull request commentTokamakUI/Tokamak

Support `spacing` property on `HStack`/`VStack`

CSS Grid is a great way to support child spacing! I wrote about using them in React here. Would love to help out with this if you're looking for contributors 🙂

MaxDesiatov

comment created time in 21 days

startedTokamakUI/Tokamak

started time in 21 days

pull request commentbraposo/figma-transformer

add object.fromentries polyfill

No worries at all, thank you!! 🎉

souporserious

comment created time in 23 days

delete branch souporserious/figma-transformer

delete branch : add-object-from-entries-polyfill

delete time in 23 days

IssuesEvent
IssuesEvent

push eventsouporserious/figma-tools

Travis Arnold

commit sha 311af926883ca7ce8e55c285c9540aabc5bb54a5

tighten up logo spacing

view details

push time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha 8a8635fcecf37428b3b7dbe2c1fb38fbea5a0347

smaller width image

view details

push time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha 9a88cbc86bcadda563937753b813b65d118edefe

add README logo script (#2)

view details

push time in a month

delete branch souporserious/figma-tools

delete branch : add-logo

delete time in a month

PR merged souporserious/figma-tools

add README logo script

Adds an assets script that will fetch the logo from the libraries Figma file.

+7 -7

0 comment

4 changed files

souporserious

pr closed time in a month

PR opened souporserious/figma-tools

add README logo script

Adds an assets script that will fetch the logo from the libraries Figma file.

+7 -7

0 comment

4 changed files

pr created time in a month

create barnchsouporserious/figma-tools

branch : add-logo

created branch time in a month

starteddotansimha/graphql-typed-document-node

started time in a month

issue commentgatsbyjs/gatsby

Browser won't hot reload re-compiled sources, broken after `gatsby@2.24.9`

Thanks for looking into this! In my case it still wasn't working which I boiled down to the use of chokidar cli that was running two builds, after removing that and running the processes separately, all seems to work well!

amankkg

comment created time in a month

started4Catalyzer/babel-plugin-dev-expression

started time in a month

delete branch souporserious/mutik

delete branch : patch-1

delete time in a month

issue commentsouporserious/use-item-list

Bug: Can't read property 'disabled' of undefined in moveHighlightedItem

Oops, sorry about that! Hopefully, a quick fix can be just checking its existence. I really need to add tests around everything 😅

diondiondion

comment created time in a month

issue commentsouporserious/use-item-list

FR: Add way to easily access the selected item

I agree, there should be a first-class way to do this. I'll work on this when I get a chance. Feel free to start a PR if you have a solution in mind in the meantime!

diondiondion

comment created time in a month

issue openedsouporserious/use-item-list

Look into performance issues with large lists

Right now large lists will lag because of too many updates to the React tree. The new useMutableSource hook should help here once it's stable, but for now we may be able to use something like zustand to increase performance.

created time in a month

startedvickOnRails/react-native-casestudies

started time in a month

startedplanttheidea/hash-it

started time in a month

push eventsouporserious/use-item-list

Travis Arnold

commit sha 5afa6665bcdadc92e505084f5fe2b4ab4d245ca6

v0.1.1

view details

push time in a month

created tagsouporserious/use-item-list

tagv0.1.1

A primitive React hook used to coordinate indexed collections effortlessly.

created time in a month

push eventsouporserious/use-item-list

Travis Arnold

commit sha 0fecc0479b9c1356b2f1515b3ce9feda7f65c193

fix(useItem): set disabled to false by default fixes disabled check not firing highlight at appropriate time

view details

push time in a month

issue commentsouporserious/use-item-list

Publish latest changes to NPM

Latest published under 0.1.0 🎉

diondiondion

comment created time in a month

created tagsouporserious/use-item-list

tagv0.1.0

A primitive React hook used to coordinate indexed collections effortlessly.

created time in a month

push eventsouporserious/use-item-list

Travis Arnold

commit sha 80ce0076e020acc6e6975e21a91ed6e50a5feb1b

v0.1.0 closes #1

view details

push time in a month

issue closedsouporserious/use-item-list

Publish latest changes to NPM

Hi Travis,

thanks for making this library, it's a real lifesaver for me right now. However I noticed (after some struggles trying to recreate the examples) that the NPM release of the library is out of date with the changes in the repo (and the examples/documentation). If it's not too much of a hassle (and the current state of code is stable enough) it would be great if you could publish it to NPM for ease of use.

Thanks a lot! Dion

closed time in a month

diondiondion

push eventsouporserious/use-item-list

Travis Arnold

commit sha 92b70d70ec6b68f79163ce11f0ed1e8dde5fc8cc

add more types

view details

Travis Arnold

commit sha abf4830e35ed9d89aa1a2d45a03a44bc256e8af9

cleanup docs and examples

view details

push time in a month

push eventsouporserious/use-item-list

Travis Arnold

commit sha dec2015a5c719efb908e116351250876485ff86c

feat(useItem): add disabled prop (#3)

view details

push time in a month

delete branch souporserious/use-item-list

delete branch : add-disabled-option

delete time in a month

issue closedsouporserious/use-item-list

FR: Support disabled items

It would be great if use-item-list supported disabled items. This could be implemented as an additional property in the object passed to useItem, e.g.:

const item = useItem({
  ref,
  text,
  value,
  isDisabled,
})

Items marked as disabled in this way should be skipped over by the moveHighlightedItem and highlightItemByString functions (even though it might be good if this was optional, as sometimes it can be beneficial for accessibility to be able to highlight disabled items).

closed time in a month

diondiondion

PR merged souporserious/use-item-list

feat(useItem): add disabled option

Adds the ability to specify an item as disabled.

closes #2

+29 -11

0 comment

1 changed file

souporserious

pr closed time in a month

PR opened souporserious/use-item-list

feat(useItem): add disabled option

Adds the ability to specify an item as disabled.

closes #2

+29 -11

0 comment

1 changed file

pr created time in a month

push eventsouporserious/use-item-list

Travis Arnold

commit sha 55c22dfbe96d08fd0c6c2ea312a0178e4b7a9169

cleanup

view details

push time in a month

create barnchsouporserious/use-item-list

branch : add-disabled-option

created branch time in a month

issue commentsouporserious/use-item-list

Publish latest changes to NPM

Apologies, other projects have been taking priority over this one. However, working on this again and will have things updated soon! I appreciate your patience.

diondiondion

comment created time in a month

issue commentsouporserious/use-item-list

FR: Support disabled items

Yes, this should definitely be added! Thanks for filing an issue, I'll get started on a PR 🙂

diondiondion

comment created time in a month

delete branch souporserious/use-item-list

delete branch : master

delete time in a month

create barnchsouporserious/use-item-list

branch : main

created branch time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha 8169bfa74372b2cc333d69c7c5910069b055a372

docs: add missing example library

view details

push time in a month

created tagsouporserious/figma-tools

tagv0.2.0

Tools to help you programmatically interact with your Figma files.

created time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha 8b7c5ee653ca34234da131cc4124ed37ced22527

v0.2.0

view details

push time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha 86c4f4ba6953c16334d21617b21c4363c576866e

fix links

view details

push time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha 13dd77dba1c4f849a8ebc383af5fb157c113f122

chore: Options -> ImageOptions

view details

push time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha d6841afbd0640a1826c7bd0a18a2e6911c64ea53

feat(fetchImages): allow passing all file image params

view details

push time in a month

delete branch souporserious/figma-tools

delete branch : add-filter-option

delete time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha 3d864d8835ea794cf8361fd31d91c51f9f6b7e66

feat(fetchImages): add filter option (#1) Adds a new `filter` option that replaces `pages`. This allows for more advance filtering by allowing the use of a function.

view details

push time in a month

PR merged souporserious/figma-tools

feat(fetchImages): add filter option breaking change

Adds a new filter option that replaces pages. This allows for more advance filtering by allowing the use of a function.

fetchImages({
  fileId: 'uxAAkYDER67NTqLWOulhAd',
-  pages: ['16px icons'],
+ filter: component => component.pageName === '16px icons',
  format: 'svg',
}).then(svgs => {
  console.log(svgs)
})
+81 -49

0 comment

6 changed files

souporserious

pr closed time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha 803526edcce044a43983cc85c772f86e17e61a9f

update examples, only allow filter function

view details

push time in a month

PR opened souporserious/figma-tools

feat(fetchImages): add filter option breaking change

Adds a new filter option that replaces pages. This allows for more advance filtering by allowing the use of a function.

fetchImages({
  fileId: 'uxAAkYDER67NTqLWOulhAd',
-  pages: ['16px icons'],
+ filter: component => component.pageName === '16px icons',
  format: 'svg',
}).then(svgs => {
  console.log(svgs)
})
+45 -35

0 comment

1 changed file

pr created time in a month

create barnchsouporserious/figma-tools

branch : add-filter-option

created branch time in a month

created tagsouporserious/figma-tools

tagv0.1.1

Tools to help you programmatically interact with your Figma files.

created time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha 40025fd58a74e6ba4713aff381c4b94ee37c7419

v0.1.1

view details

push time in a month

push eventsouporserious/figma-tools

Travis Arnold

commit sha d50a595935c6ceac3e79334ed5fbda16928ed49f

feat(fetchImages): add groupName to return value

view details

push time in a month

startedmalerba118/react-use-database

started time in a month

push eventsouporserious/site

Travis Arnold

commit sha 156dec44831c04a916b93e8cc2594c205403607b

fix title case

view details

push time in a month

push eventsouporserious/site

Travis Arnold

commit sha 281d7119d6cc4eaa73e296dfd58a11e3eaed2e38

publish figma webhooks

view details

push time in a month

startedcevr/xsfp

started time in a month

more