Attempt #5872046752 at extensible React TS components. Demo.
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.
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 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 hook on folder hooks/src and import/export it to/from src/index.ts.
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
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.
Yarn workspaces template for React TS library & app powered by vite.
PostCSS +8 with PresetEnv stage 0.
- 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
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.