mumuki-styles

Add gem 'mumuki-styles' to your Gemfile and then run bundle install.

If you want to run it with rails-assets you must also:

1. Add the following code into app/assets/javascripts/application.js

//= require mumuki-styles

2. Add the following code into app/assets/stylesheets/application.scss

@import "mumuki-styles";

Note: If you do not use SCSS, add *= require mumuki-styles to app/assets/stylesheets/application.css.

1. Run bower install --save mumuki-styles
2. Add the css and js files to index.html

<link rel="stylesheet" href="bower_compoments/mumuki-styles/dist/css/mumuki-styles.css">
<script src="bower_compoments/mumuki-styles/dist/javascript/mumuki-styles.js"></script>

3. if you are using SCSS, simply import the scss file

@import "bower_compoments/mumuki-styles/dist/scss/mumuki-styles.scss"

Note: Building mumuki-styles requires your node installation version to be 8 or greater and yarn to be 1 or greater.

Running yarn build both generates the dist folder and updates the necessary gem files. If you only need to build the gem, you can run yarn build-gem.

When tag.sh X.Y.Z is run:

• The yarn, bower and gem version files are updated to version X.Y.Z
• yarn build is executed
• The dist folder is unignored so its files are included when pushing
• All autogenerated files are included in the new version, which is tagged vX.Y.Z and pushed to the repository.

The next time yarn build is run, the dist folder is ignored again, as it is autogenerated - but we do need it on the repo.

  <div class="mu-file-browser"
    data-can-browse="true"
    data-on-file-open="console.log"
    data-file='{
      "foo": {
        "saraza": {
          "sultano.rb": "sultano"
        },
        "sultano.rb": "sultano",
        "mengano.js": "mengano"
      },
      "bar": {
        "archivo con un nombre largo.doc": "un doc"
      },
      "baz": {
        "mengano.js": "mengano"
      },
      "saraza.txt": "saraza",
      "sultano.rb": "sultano",
      "mengano.js": "mengano",
      "archivo con un nombre largo.doc": "un doc"
    }'>
  </div>

• data-can-browse: (Boolean) user can enter into a folder (default false).
• data-on-file-open: (Function) receives 2 params, file name and file content. If no function given user can't open files.
• data-file: (Hash) hash keys are the names of the resources and hash values are theirs contents (sub-hash for a folder and a string for a file).

With jQuery you can manually render this component using $('.mu-file-browser').renderFileBrowser();

<div class='mu-erd'
  data-entities='{
    "Entity_1": {
      "ent1_id": {
        "type": "Integer",
        "pk": true
      },
      "ent2_id": {
        "type": "Integer",
        "pk": true,
        "fk": {
          "to": { "entity": "Entity_2", "column": "ent2_id" },
          "type": "one_to_one"
        }
      },
      "ent1_description": {
        "type": "Varchar"
      }
    },
    "Entity_2": {
      "ent2_id": {
        "type": "Integer",
        "pk": true
      }
    },
    "Entity_3": {
      "ent3_id": {
        "type": "Integer",
        "pk": true
      },
      "ent2_id": {
        "type": "Integer",
        "pk": true,
        "fk": {
          "to": { "entity": "Entity_2", "column": "ent2_id" },
          "type": "many_to_one"
        }
      },
      "ent1_description": {
        "type": "Varchar"
      }
    }
  }'>
</div>

• data-entities: (Hash<EntityName, EntityColumns>)
  • EntityName: (String).
  • EntityColumns: (Hash<ColumnName, ColumnMetadata>)
    • ColumnName: (String)
    • ColumnMetadata: (Hash)
      • type: (String) Column type (Char, Number, Integer, Varchar, etc),
      • pk: (Boolean - Optional) True if column es PK or part of one,
      • fk: (Hash - Optional) with properties:
        • to: (Object) { entity: (Foreign entity), column: (Foreign column name) }
        • type: (String) one_to_one | one_to_many | many_to_one | many_to_many

With jQuery you can manually render this component using $('.mu-erd').renderERD();

  <div class='mu-browser'
    data-url='https://mi-sitio.mumuki.io'
    data-title='Mumuki - Aprender a programar'
    data-favicon='https://mumuki.io/logo-alt.png'
    data-srcdoc='<p>Hello Mumuki Browser</p>'>
  </div>

• data-srcdoc: HTML of the page to show
• data-url: (Optional) URL of the page (default: https://mumuki.io)
• data-title: (Optional) Title of the browser's tab (default: Mumuki)
• data-favicon: (Optional) Favicon of the brower's tab (default: https://mumuki.io/logo-alt.png)

With jQuery you can manually render this component using $('.mu-browser').renderWebBrowser();

  <div class='mu-sql-table'
    data-name='Personas'
    data-columns='[{"name": "id_persona", "pk": true}, "Nombre", "Apellido", {"name": "Pareja", "fk": true}]'
    data-rows='[
      [1, "Homero", "Simpson", 2],
      [2, "Marge", "Bouvier", 1],
      [3, "Moe", "Szyslak", null]
    ]'>
  </div>

• data-name: (String) Entity name
• data-columns: (String|Hash):
  • if String: Column name
  • if Hash: you need the next keys
    • name: (String) Column name
    • pk: (Bool) if column is PK or part of one
    • fk: (Bool) if column is FK or part of one
• data-rows: (Array<Array>)

With jQuery you can manually render this component using $('.mu-sql-table').renderSqlTable();

  <div class="mu-sql-table-rendered">
    <header>Personas</header>
    <table>
      <thead>
        <tr>
          <th class="mu-sql-table-pk">id_persona</th>
          <th>Nombre</th>
          <th>Apellido</th>
          <th class="mu-sql-table-fk">Pareja</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Homero</td>
          <td>Simpson</td>
          <td>2</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Marge</td>
          <td>Bouvier</td>
          <td>1</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Moe</td>
          <td>Szyslak</td>
          <td>NULL</td>
        </tr>
      </tbody>
    </table>
  </div>

You don't need any data attribute - just follow this convention:

• div (with mu-sql-table-rendered class)
  • div > header
  • div > table
    • div > table > thead
      • div > table > thead > tr > th (th tag can have mu-sql-table-pk and/or mu-sql-table-fk)
    • div > table > tbody
      • div > table > tbody > tr > td

With jQuery you can manually render this component using $('.mu-sql-table-rendered').renderPrerenderedSqlTable();

This project is available as open source under the terms of the MIT License.