polmoneys / boost

Attempt #40582458204

TLDR

Attempt #5872046752 at extensible React TS components. Demo.

Get started

Fork and play:

<Button> docs,<Card> docs,<Checkbox> docs,<Dialog> docs,<Fence> docs,<Font> docs,<Group> docs,<Icon> docs,<Input> docs,<Layers> docs, <Link> docs, <List> docs, <Move> docs, <Options> docs, <Pic> docs, <Popover> docs, <Radio> docs, <Range> docs, <ScrollUnit> docs, <Shape> docs, <Stat> docs, <Sticky> docs, <Switch> docs, <Textarea> docs, <Track> docs, <Trap> docs, <Unit> docs.

Overview

Components are meant to be used with CSS utility classNames for customization.

 <Button
      // adds theme & 2 units of padding horizontally 
      className="success px $$"
      onClick={() => trayActions.on()}
   >
     Show tray
   </Button>

If you are working at 'design system' level you can always use the primitive and add sugar to it, like:

// @/packages/Button/src/Button.tsx

 const SuccessButton = (props:ButtonProps)=> <Button
      {...props}
     className="success px $$"
   />
    

Button.Success = SuccessButton;

Some components require more complex classNames prop, an Input:

// @/packages/Input/src/Input.tsx

 const AccentInput = (props:InputProps)=> <Input
      {...props}
      classNames={{ input: "accent px $$" }}
   />

Input.Accent = AccentInput;

Add packages

Add a folder under packages and configure both vite.config.ts and package.json to it's own requirements, check other packages for reference.

   # install any dependencies this package needs
   yarn install 
   
   # build
   yarn build

To use, add it to package.json dependencies.

Add hooks

Add hook on folder hooks/src and import/export it to/from src/index.ts.

Author CSS

Write CSS with PostCSS sugar on any folder structure and import all files to index.css. A file css.css will be created in /dist directory.

   # @/css/

   yarn build

Get started.

Developer Experience

You can always re-export all packages from a single export and make components more specific with built-in styles to improve DX.

Folder styled shows how.

Tooling

Yarn workspaces template for React TS library & app powered by vite.

PostCSS +8 with PresetEnv stage 0.

Roadmap

• improve export types & css from Packages && script after yarn build of a Package to trigger yarn build on cssfolder
• add sortable to packages/Move
• add more hooks demos: useUrlParams, useAttachStylesheet, useMenu...
• publish packages/ArtDirection

Inspiration 💐

Our requirements are more modest but at the same time more responsible: buildings, furniture, drinking glasses may well be consumer items that we can destroy without regret after they have served for some short or long period, but while we use them we expect them to fullfill their role and serve us perfectly, so perfectly that we can also derive aesthetic enjoyment from observing them in use.

Erik Gunnar Asplund on Swedish Grace.

Feedback

Twitter

polmoneys.com