mumuki-styles

Installing

Ruby

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.

Bower

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"

Development

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.

Tagging and releasing

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.

Components

mu-file-browser

  <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>

mu-file-browser attributes

• 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();

mu-erd

<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>

mu-erd attributes

• 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();

mu-browser

  <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>

mu-browser attributes

• 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();

mu-sql-table

  <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>

mu-sql-table attributes

• 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();

mu-sql-table-rendered

  <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>

mu-sql-table-rendered attributes

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();

License

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