ricokahler / hacker-ui

A design system for the modern developer. (development on hiatus)

Donate to the ACLU | Shutdown ICE

---

Hi there 👋😄,

My name is Rico Kahler (he/him) and I build consumer-facing websites and apps as well as developer-facing tools.

I care deeply about UX, DX, performance, a11y, and SEO. I specialize in the tooling + React space and also work with serverless architectures and infrastructures using platforms like Vercel and frameworks like Serverless.

Most of my open source these days revolves around Next.js and Sanity.

Checkout my projects 👇 or say hi if you feel like it.

💛 JavaScript

• color2k — small color manipulation lib (2.9kB)
• babel-plugin-tsconfig-paths-module-resolver — Use tsconfig paths in any project that supports custom babel configs.
• @ricokahler/pool — like Promise.all but you can limit the concurrency
• @ricokahler/lazy — A small (~600B gzip), useful set of methods for lazy iteration of iterables
• oauth2-popup-flow — OAuth2 implict grant lib

✔️ Next.js

• next-data-hooks — Use getStaticProps/getServerSideProps as react-hooks
• next-plugin-preval — Pre-evaluate async functions during builds and import them like JSON
• next-plugin-query-cache — A build-time query cache for Next.js

🌶 Sanity

• sanity-codegen — Generate TypeScript types from your Sanity.io schemas
• sanity-super-pane — The Sanity Desk Tool pane with Super Powers
• jsonmatch-patch — A collection of patch utils that utilize JSONMatch

💻 Apps

• longtweet.io — Jamstack TwitLonger alternative
• heic.app — a heic image converter that lives 100% in the browser
• simplepoll.org — simple polls with real-time results
• wordlepdf.com — play Wordle but using PDFs
• hexagonpfp.org — because hexagons are a basic human right

⚛️ React

• hacker-ui — a work-in-progress component library
• flair — a work-in-progress CSS-in-JS lib for React
• hocify — converts hooks to HOCs for compatibility with class-based components.
• react-mounting-transition — helps you add transitions to components you dynamically mount to the DOM

hacker-ui's Issues

Table components

Hacker UI should have table components!

This one is a bit more open ended so let me know if you're interested and we can collaborate on how this should work.

Here are some rough requirements:

• should be simple 🚀
• should be atomic/composable. there should not be one all-in-one table component but instead many smaller table components
• uses HTML table elements internally (e.g. table, th, tr, td, etc)

[bug] Websites issues

Just to let you know, on Chrome Linux combined emoji don't work so you have on intro page there are two emoji

Also there is problem with prism.js

Prism.util.currentScript is not a function

[ON HIATUS] 1.0 Roadmap

Update: 4/13/2020:

Most of the work on this project has been focused on getting the styling system right. This rabbit-holed into creating yet another CSS-in-JS framework. I'm very excited about the direction of the project!

The project aims to support statically extracted CSS-in-JS (similar to linaria) for smaller bundles and better TTI. However, I never fully realized how challenging that project would be (for context, it involves multiple packages and writing several babel plugins to extract the CSS from the JS statically).

As a result of working on that project, original estimates of this project have been delayed until that project is stable enough to use.

Check back soon and check out react-style-system

Update: 5/7/2020:

I've released the first (pre-1.0) version of react-style-system! There's still a good amount of things to be done in that lib but it's good enough to continue more heavy development in this lib. In the next few weeks, expect a v0.2.0 release with more features and a refined vision.

Update: 5/25/2020:

Here is a prioritized roadmap/todo list for v0.2:

• new landing page
• updated docs that removes the words "design system" (to be discussed in detail later)
• updated text input/text area/select components with input adornment support
• modals and dialogs with transitions
• improved tooltips (more options, more timeouts)
• more menu placements (besides top, bottom, left, right)

---

Hey all 👋,

Yesterday (2/14/2020), I posted the first release of Hacker UI! I'm really happy with the amount of feedback and interest in this project so let's get to work together and make this thing stable.

Here is a tentative list of all the features and work items I think are necessary to get to a stable 1.0. This list will probably grow and change but at the very least it'll give you a good idea of what's to come.

By virtue, Hacker UI is meant to be a lean component library/UI framework so I think a realistic estimate for all of this is anywhere from 2-3 months given my bandwidth and given a little breathing room for testing and real world usage.

In the next few days, I'll convert some of these bullet point items into issues and I'll mark many of them as "help wanted" with assigned priorities.

If you want to contribute, please check back soon!

Roadmap

Components

• Modal improvements
• Menu improvements
• Tooltip improvments
• Tables
• Drawers
• Tabs
• Input Adornments (similar to MUI)
• Notifications

Features/Improvements

• Dark mode (partially complete)
• Animations
• Reactive media query tool (e.g. useMediaQuery)
• SSR support (important)

Docs

• Mobile friendly responsive docs (very important)
• Auto-generated API docs
• Grid docs
• Color system docs
• SSR the docs (probably with Gatsby)

Needs Vetting/Auditing

• Performance audit (e.g. how fast does Hacker UI mount styles, how fast does it update classes)
• Typography audit
• Design audits?
• a11y audit (feedback comment)
• SSR and SEO audit
• Bundle size

Maintenance/Code Quality

• Units tests with Jest and GitHub actions
• Cypress tests

Could not find theme. Ensure this component is wrapped in a ThemeProvider

npm install --save hacker-ui@next react-style-system

Code:

import * as React from 'react';
import { Button, createTheme } from "hacker-ui";
import { ThemeProvider } from 'react-style-system';

const theme = createTheme({});

export default () => {
    return (
        <div>
            <ThemeProvider theme={theme}>
                <Button>Button</Button>
            </ThemeProvider>,
        </div>
    );
};

React 17 support?

Hey there! Does HackerUI support React 17? I see that your peerDependencies range is React 16 only, and I'm having trouble using HackerUI on Skypack, which pins all versions of React to v17.

Example: https://codepen.io/fks/pen/ExgLRXy?editors=1010

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I can confirm that React and React DOM versions match, the hook is called in a React component function, and only one version of React is running on the page. The error stack trace points to the useContext call inside of HackerUI core.js, which I could see changing between React v16 & v17

VueJS Roadmap and RFC

Is your feature request related to a problem? Please describe.

I would love to see this become a default for modern web app development and think a VueJS version would be great.

Describe the solution you'd like

Layout ground work and recruit interested community members to work on the Vue version.

Describe alternatives you've considered
Vuetify / Buefy are the two best known toolkits at the moment (leveraging both Material and Bulma).

CSS-in-JS implementation

In case you missed it, Hacker UI ships with its own CSS-in-JS solution.

I feel very good about the direction of this CSS-in-JS solution however it needs more work until its stable and optimized. I started working on it in this repo until I realized it would be more organized to split it off into a separate project.

You can check the progress of that library here. It's called react-style-system.

This issue will be up until this library uses react-style-system.

Code examples should only contain relevant code

Currently there is a lot of documentation related code that makes it messy to find the examples:

I think you could preview the examples code, and then for CodeSandbox still use the whole thing 🙂

CSS-in-JS audit

The first set of contributions I'm looking for is actually in the form of code review. I wrote a lot of this code myself and it would be nice to have others:

1. read it and give feedback on both the idea of what the code is trying to accomplish and then also (does it solve the right problem?)
2. read and review the actual implementation. (does it work as intended?)

This issue is also the first set of "audit" issues I'm opening up. The idea behind the "audit" label is that it's a call out to community experts to openly review some part of Hacker UI.

---

Does it solve the right problem?

In case you didn't catch it, Hacker UI ships its own CSS-in-JS solution. The reason Hacker UI ships with its own CSS-in-JS system is because I had certain requirements and I couldn't find a CSS-in-JS solution that met all of these.

Wish list/requirements

1. Purely component based styles

The way you write css with styled-components or emotion is not really scoped to a component per-se. When you write styles with these tools, you write a style for an element but that's not really the relationship I'm going for.

The purpose of declaring the styles with createStyles in one section is that this section will have specific variables related to the component. In other words, createStyles creates a scope for you to define styles that pull in data specific to the component you're writing styles for.

2. Composable set of styles as part of the component's API

If you're familiar with Material-UI, they allow you to style any sub-element in the component using the classes prop. I like this a lot because it expands what a component can do without expanding its API footprint and this eliminates the need for having props for styling (e.g. bold, noMargin, etc).

3. Embrace HTML semantics and classNames

Another thing I'm somewhat passionate about is using semantic HTML elements. When you use a syntax like const Title = styled.div, when you go to use the Title component, you almost forget that it was a div. To me it's important to remember what HTML element you're using and having it up front with a style matches that philosophy.

4. The ability to be define the color of a component dynamically, including derived states

This is kind of a big one for me. I find that defining colors of a component adds a significant amount of complexity and duplication because colors adds another dimension of styling required.

E.g. for every button, you have to create 3 extra classes, one for the primary, secondary, and tertiary color, and within each of those classes, you have to create derived colors for hover, focus, and action states.

If your set of colors is small, it's possible to handle this but then throw in "dark mode" as a requirement and everything just gets out of hand.

So to get the point, the wish list item for this define a way write styles as a function that takes in two colors, the desired color and the surface color (mostly white or black), and output styles. This will make it easy to support dark mode for every color.

Conceptually, you can think of it like this:

const myButtonStyle = (desiredColor, surfaceColor) => css`
  color: ${readableColorOnSurface(desiredColor, surfaceColor)};
  background-color: ${desiredColor};
`;

5. The ability to work in any react environment without the need for a special compiler step or pragma

Hacker UI should just work. If there are significant benefits in having the user install a babel plugin then I'll consider it but ideally and by philosophy, Hacker UI should be ready out of the box and work in any React environment.

---

Anyway, given all these requirements, I made sense to me to attempt another CSS-in-JS solution 🤷‍♀️

The current solution

WIP

Does it work as intended?

Hacker UI needs a logo

Hacker is the unbranded design system, however, it still think it could benefit from a logo.

The logo should be:

• simple (almost basic?)
• monochrome

Any takers?

[feature request] Needs a License

Looks great, I'd like to use it in a project but I need to know what the license is.

Input "adornments"

TODO

Development on Hiatus

👋 Hi all,

Thank for you taking interest in this project. It has been a passion project of mine for some time now and I do plan on finishing it once I have the appropriate time to do so.

This library has a very strict philosophy of being lightweight and simple. However, that doesn't mean that implementing it is. Where the development got sidetracked was with the styling system behind it. I was working on a relatively novel CSS-in-JS lib that combined statically extracted CSS-in-JS, atomic CSS, and theming and got stuck along the way.

What I learned is that themable, statically-extracted atomic CSS-in-JS is an incredibly difficult problem that requires a surprising amount of bundler and babel integration. I was working on this in some other messy repos if you'd like to take a look:

• https://github.com/ricokahler/atomic-css-in-js (very messy, very not ready)
• https://github.com/ricokahler/flair

I don't want to release Hacker UI unless it's fast and composable and I strongly believe I can't do that without more time to dedicate towards the styling solution.

---

When Hacker-UI is released it'll be the smallest library of its kind while still being completely composable and themable.

Watch releases to be notified when development picks back up.

Tab components

Hacker UI should have a tabs component! (similar to Material UI's tabs component)

Here's a rough idea of how it should work:

• should be simple
• a11y
• include a Tabs and Tab component
• compose over the existing Button component for a tab
• two variants/implementations
  • radio group/radio button
  • just buttons (no active value)

Any takers? Let me know if you're interested!

Theming playground

hacker-ui should have a theming playground like box-shadow generator. the result is a theme they can copy and paste into their code.

thanks to @pearlzhuzeng for the idea