Quick start

Installation

Install Jack in your new project

npm

npm install @priolo/jack

Also install Jon

npm

npm install @priolo/jon

Jack uses Jon for state management
You don't need to know Jon perfectly to use Jack

Quick start

You can do everything in App.tsx

App.tsx

import { Button, CardsGroup } from "@priolo/jack";
import { createStore } from "@priolo/jon";
import { FunctionComponent } from "react";

import './index.css';
import "@priolo/jack/dist/style.css";

const App: FunctionComponent = () => {

  // HANDLERS
  /** add a new CARD to the DECK */
  const handleAdd = () => {
    const view = createStore(cardSetup) as ViewStore;
    deckCardsSo.add({ view });
  };

  // RENDER
  return (
    <div style={cssRoot}>

      <div style={{ display: "flex", flexDirection: "column" }}>
        <Button onClick={handleAdd}>ADD CARD</Button>
      </div>

      <div style={cssDeck}>
        <CardsGroup
          cardsStore={deckCardsSo}
          Render={({ view }) => <ExampleView store={view} />} />
      </div>

    </div>
  );
};

We have a cssRoot div that contains a simple menu to add CARDs
and a cssDeck div that contains the CARDs

CardsGroup connects with the deckCardsSo STORE
Let's create the STORE that contains all the CARDs

const deckCardsSo = createStore(cardsSetup) as CardsStore

Let's create the STORE to manage the state of a single CARD

const setup = {
  state: {
    text: "init value",
  },
  mutators: {
    setText: (text: string) => ({ text }),
  },
}
const cardSetup = mixStores(viewSetup, setup)

Note that this STORE derives from viewSetup but we'll see that later

And, finally, the VIEW component of the CARD

const CardView: FunctionComponent = ({
  store,
}) => {

  // STORE
  const state = useStore(store)

  // RENDER
  return (
    <div style={cssCard}>
      <TextInput
        value={state.text}
        onChange={(text) => store.setText(text)}
      />
    </div>
  )
}

Don't worry and click here
there's all the complete code

Of course, it's ugly.
But we know that a bit of CSS turns crap into GOLD!

Anyway, the "ADD CARD" button adds a new CardView component to the DECK
And each CardView has a TextInput that displays/modifies the state of the CARD's STORE
(STORE generated from the cardSetup template)