Add Kitt to your Project

These are the setup instructions for adding Kitt to a repository

1. To install Kitt on your project as a dependency, add the following:

harness.exs

def deps do
    [
    {:kitt, "~> 0.0 ", organization: "cuatro"}
    ]
    end

Navigate to the assets directory and add:

assets/package.json

"dependencies": {
    "kitt": "file:../deps/kitt"
    }

2. Run the following

mix harness.get
    mix harness
    mix deps.get
    yarn --cwd=assets

3. Connect JS and CSS assets

app.scss / app.css

@import 'kitt/priv/static/assets/css/kitt';

Import KittHooks and add them to the hooks section of liveSocket

assets/js/app.js

import { KittHooks } from 'kitt/priv/static/assets/js/kitt';
    ...
    let liveSocket = new LiveSocket(...some_params, ..., {
    ...
    hooks: { ...hooks, ...Hooks, ...KittHooks }, //KittHooks here
    ....
    })

If you plan on using a component whose story page describes a dependency on KittAppEventBindings (which provides some code to support interactions between the client and server), make sure to import and instantiate that as well:

assets/js/app.js

import { KittAppEventBindings } from 'kitt/priv/static/assets/js/kitt';
    ...
    KittAppEventBindings();

4. To start using Kitt components:

Add it as:

or

any module

use Kitt

Add Components To Kitt

With Phoenix Storybook, you can build components and simulate data for them easily.

1. Clone the Kitt repo and then run

mix deps.get
    mix esbuild.install
    yarn install --cwd assets
    mix dev

2. Open localhost:4123 in your browser

Test Kitt in your project

1. Add Kitt as a dependency

harness.exs

{:kitt, path: "../kitt"}

package.json

"kitt": "file:../../kitt"

2. Do the harness dance

mix harness.get
    mix harness
    mix deps.unlock kitt
    mix deps.get
    yarn install --cwd assets

3. Every time you make a change in kitt that you want to see reflected in your "other app", you'll need to do the following:

mix harness.get
    mix harness
    mix deps.unlock kitt
    mix deps.get
    yarn upgrade kitt --cwd=assets

Release Kitt

1. Update the CHANGELOG using the Keep a Changelog format that this project adheres to

2. Release Kitt in Github

3. To keep all repos synchronized use the following Release Instructions