YAPUI
Yet Another Primitive UI.
Development Requirements
- node
- npm | yarn
See package.json for dependencies
Motivation
Can read the full reasoning in the blog post, however the main motivation are:
- to learn,
- control the API,
- opinionated way of styling via objects
- most important have set of UI components that I have full control over when building my side projects.
Installation
npm install yapui
Setup
Single page application (SPA)
This is how is used in a React SPA
// index.js
import React from 'react';
import { render } from 'react-dom';
import { UiProvider, createStylesRenderer } from 'yapui';
import { App } from './App';
const renderer = createStylesRenderer();
render(
<UiProvider renderer={renderer}>
<App />
</UiProvider>,
document.getElementById('app')
);Next.js
Usage in next.js is based on this (now-example)[https://github.com/zeit/next.js/tree/master/examples/with-fela]
// pages/_document.js
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { createStylesRenderer, renderToNodeList } from 'yapui';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const renderer = createStylesRenderer();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => <App {...props} renderer={renderer} />,
});
const initialProps = await Document.getInitialProps(ctx);
const styles = renderToNodeList(renderer);
return {
...initialProps,
// styles prop is then used in the render method automatically
// by the custom document. No need to add it manually
styles: [...initialProps.styles, ...styles],
};
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}// pages/_app.js
import React from 'react';
import { UiProvider } from 'yapui';
// before 2.6.1 you need a fallback renderer, now this is included in
// UiProvider
export default function MyApp({ Component, pageProps, renderer }) {
return (
<UiProvider renderer={renderer}>
<Component {...pageProps} />
</UiProvider>
);
}Usage
For the api of each component available See for Storybook and documentation
Scripts
-
installinstall project dependencies -
storybookstart the storybook dev server -
buildrunsbuild:cjsandbuild:esm -
build:storybookbuilds the storybook site for this project -
build:cjsbuilds primitive ui as commonjs compatible module -
build:esmbuilds primitive ui as ES modules compatible module -
clean:distdeletes distribution directory -
clean:node_modulesdeletes dependencies directory -
lintruns eslint script
TODO
- [ ] document usage
- [x] finalize api
- [x] revise components and check if more are needed
- [x] document api
- [x] finish typescript declaration files