Imaginary UI

Config-driven React UI.

https://github.com/imaginarymachines/imaginary-ui

Very beta.

Used moishinetzer/PBandJ

Install

- npm i @imaginary-machines/imaginary-ui

Development

- Clone
- git clone https://github.com/imaginarymachines/imaginary-ui
- Install
- npm i
- Start demo:
- npm run dev
- Run tests
- npm run test
- Tests are for util functions.
- Will use storybook interactions
- Build lib for release
- npm run build:lib
- Run Lint
- npm run lint
- Run Formatter
- npm run format
- Run type checker
- npm run check
- Run Storybook
- npm run storybook
- Not yet.

Layout Config Spec

$3

- Configuration

ImaginaryForm

``jsx
import { ImaginaryForm } from "@imaginarymachines/ui";
const layout = {
//@todo document
};
const Test = () => {
function App() {
const onSave = (data: any) => {
console.log(data);
};
const components: IImaginaryUiComponents = {
InputArea: InputArea,
SelectArea: SelectArea,
FormButton: ({ text, onClick }) => (
{text}
),
SubmitButton: ({ text }) => ,
};

return (
<>
components={components}
layout={layout}
onSave={onSave}
/>

);
}
};
`

Tailwind config

In the future, this will have a WordPress preset and a Tailwind preset.

Add ./node_modules/@imaginary-machines/imaginary-ui/dist/*.js', to content in your tailwind.config

`js
const defaultTheme = require("tailwindcss/defaultTheme");
/* @type {import('tailwindcss').Config} /
module.exports = {
content: [
"..//other paths",
"./node_modules/@imaginary-machines/imaginary-ui/dist/*.js",
],
theme: {
extend: {
fontFamily: {
sans: ["Figtree", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [require("@tailwindcss/forms")],
};
`

Changing Components

The and useImaginaryUi() hooks provide components.

Commit a Changeset

Once you have added your token to GitHub secrets, you need to commit a changeset. Generate your first changeset by running:

`sh
npx changeset
`

Then commit the changeset log to trigger the GitHub Action.

See below for more information on how to use changesets.

> Note: PBandJ has been configured assuming projects use the main branch as the default branch. If you use a different branch, you will need to change the publish.yml file in the .github/workflows folder to use your default branch. You will also need to change the config.json file in the .changeset folder to use your default branch.

$3

Once the GitHub Action has been triggered, it will create a PR that will publish your library to npm. Once the PR has been merged, your library will be published to npm!

> Note: Sometimes the GitHub Action can fail, this can be due to a number of reasons most likely it is to do with the name of your package. If this happens, change the name of your package in package.json`, and either rerun the action or try again from step 4.