Skip to content

Commit 3f682d7

Browse files
jonasjabarijonasjabari
authored
Merge branch 'main' into 2.0.0
2 parents 9e6ba47 + 731d69b commit 3f682d7

File tree

4 files changed

+156
-52
lines changed

4 files changed

+156
-52
lines changed

‎docs/README.md

Lines changed: 107 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,112 @@
1-
# Work In Progress
1+
# Welcome
22

3-
{% hint style="danger" %}
4-
Implementation in progress! Not ready for use. Docs and migration guides will appear here before official release while they are written. Release is scheduled for April 2021.
3+
As an extension for `matestack-ui-core`, `matestack-ui-bootstrap`ships all you need to build beautiful, reactive UIs in pure Ruby and smart CRUD components based on Bootstrap v5. Don't think about styling anymore and just create admin or application UIs faster than ever before!
4+
5+
### Live Demo <a id="live-demo"></a>
6+
7+
Based on `matestack-ui-core` and `matestack-ui-bootstrap` this reactive dummy app was created in pure Ruby without writing any JavaScript, ERB/HAML/SLIM and CSS: \([check it out](https://dummy.matestack.io/) \| [source code](https://github.com/matestack/matestack-ui-bootstrap/tree/main/spec/dummy)\)
8+
9+
![https://dummy.matestack.io](https://gblobscdn.gitbook.com/assets%2F-MSlZxQYRyTJNqEznL8o%2F-MTevzmZSIIaZYSkG4fv%2F-MTfYhwWbFzn_uGOlml9%2Fimage.png?alt=media&token=cbf6d7df-7d94-450e-9925-b42eb2cb0a3f)
10+
11+
{% hint style="info" %}
12+
We do not offer Sprocktes Support in order to include the JavaScript part of `matestack-ui-bootstrap`. Please use something like Webpacker instead! Sprockets support will be dropped soon for `matestack-ui-core` as well!
513
{% endhint %}
614

15+
### Webpacker Installation
16+
17+
```text
18+
bundle add 'matestack-ui-bootstrap'
19+
yarn add 'matestack-ui-bootstrap'
20+
```
21+
22+
`app/views/layouts/application.html.erb`
23+
24+
```text
25+
<!DOCTYPE html>
26+
<html>
27+
<head>
28+
<title>Your App</title>
29+
<meta name="viewport" content="width=device-width,initial-scale=1">
30+
<%= csrf_meta_tags %>
31+
<%= csp_meta_tag %>
32+
33+
<%= stylesheet_link_tag 'application', media: 'all'%>
34+
<%= javascript_pack_tag 'application'%>
35+
</head>
36+
37+
<body>
38+
<div id="matestack-ui">
39+
<%= yield %>
40+
</div>
41+
</body>
42+
</html>
43+
```
44+
45+
`app/javascript/packs/stylesheets/application.scss`
46+
47+
```css
48+
@import "~bootstrap/scss/bootstrap.scss";
49+
```
50+
51+
`app/javascript/packs/application.js`
52+
53+
```javascript
54+
import Rails from "@rails/ujs"
55+
// import Turbolinks from "turbolinks"
56+
import * as ActiveStorage from "@rails/activestorage"
57+
import "channels"
58+
59+
import "./stylesheets/application.scss";
60+
61+
import Vue from 'vue/dist/vue.esm'
62+
import Vuex from 'vuex'
63+
64+
import MatestackUiCore from 'matestack-ui-core'
65+
import MatestackUiBootstrap from "matestack-ui-bootstrap"
66+
67+
let matestackUiApp = undefined
68+
69+
document.addEventListener('DOMContentLoaded', () => {
70+
matestackUiApp = new Vue({
71+
el: "#matestack-ui",
72+
store: MatestackUiCore.store
73+
})
74+
})
75+
76+
Rails.start()
77+
// Turbolinks.start()
78+
ActiveStorage.start()
79+
```
80+
81+
`app/assets/images/icons`
82+
83+
* download latest compatible icons: [https://github.com/twbs/icons/releases/tag/v1.3.0](https://github.com/twbs/icons/releases/tag/v1.3.0)
84+
* extract the bootstrap-icons.svg to this path: app/assets/images/icons \(served via assets pipeline\)
85+
86+
### Usage
87+
88+
Create Matestack apps, pages and components as described in the docs of `matestack-ui-core` and utilize the components described in the API section in order to create your UI. Just make sure to include the additional Registry in your desired controllers
89+
90+
`app/controllers/application_controller.rb`
91+
92+
```ruby
93+
class ApplicationController < ActionController::Base
94+
95+
include Matestack::Ui::Core::Helper # described in Core docs
96+
97+
end
98+
99+
```
100+
101+
and include the registry wherever you want to use the components via methods like "bs_btn" instead of calling the namespaced classes
102+
103+
`app/matestack/application_component.rb`
104+
105+
```ruby
106+
class ApplicationComponent < Matestack::Ui::Bootstrap
107+
108+
include Matestack::Ui::Bootstrap::Registry # use methods like "bs_btn" instead of calling the namespaced classes
7109

110+
end
8111

112+
```

‎docs/SUMMARY.md

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,52 @@
11
# Table of contents
22

3-
* [Work In Progress](README.md)
4-
* [Integrations](integrations/README.md)
5-
* [Chart.js](integrations/chartjs.md)
6-
* [Devise](integrations/devise.md)
7-
* [Flatpickr](integrations/flatpickr.md)
8-
* [API](api/README.md)
9-
* [Layout](api/layout/README.md)
10-
* [Container](api/layout/container.md)
11-
* [Col](api/layout/col.md)
12-
* [Row](api/layout/row.md)
13-
* [Components](api/components/README.md)
14-
* [Accordion](api/components/accordion.md)
15-
* [Alert](api/components/alert.md)
16-
* [Badge](api/components/badge.md)
17-
* [Breadcrumb](api/components/breadcrumb.md)
18-
* [Button](api/components/button.md)
19-
* [ButtonGroup](api/components/button_group.md)
20-
* [Card](api/components/card.md)
21-
* [Carousel](api/components/carousel.md)
22-
* [Chart](api/components/chart.md)
23-
* [Close](api/components/close.md)
24-
* [Collapse](api/components/collapse.md)
25-
* [Dropdown](api/components/dropdown.md)
26-
* [ListGroup](api/components/list_group.md)
27-
* [Modal](api/components/modal.md)
28-
* [Nav](api/components/tab_nav.md)
29-
* [Navbar](api/components/navbar.md)
30-
* [Pagination](api/components/pagination.md)
31-
* [Popover](api/components/popover.md)
32-
* [Progress](api/components/progress.md)
33-
* [Scrollspy](api/components/scrollspy.md)
34-
* [Smart collection](api/components/smart_collection.md)
35-
* [Spinner](api/components/spinner.md)
36-
* [Toast](api/components/toast.md)
37-
* [Tooltip](api/components/tooltip.md)
38-
* [Form](api/form/README.md)
39-
* [Checkbox](api/form/checkbox.md)
40-
* [Input](api/form/input.md)
41-
* [Radio](api/form/radio.md)
42-
* [Select](api/form/select.md)
43-
* [Submit](api/form/submit.md)
44-
* [Switch](api/form/switch.md)
45-
* [Templates](api/templates/README.md)
46-
* [Apps](api/templates/apps/README.md)
47-
* [Admin App Template](api/templates/apps/admin.md)
3+
* [Welcome](README.md)
4+
5+
## API
6+
7+
* [Templates](api/templates/README.md)
8+
* [Apps](api/templates/apps/README.md)
9+
* [Admin App Template](api/templates/apps/admin.md)
10+
* [Form](api/form/README.md)
11+
* [Checkbox](api/form/checkbox.md)
12+
* [Input](api/form/input.md)
13+
* [Radio](api/form/radio.md)
14+
* [Select](api/form/select.md)
15+
* [Submit](api/form/submit.md)
16+
* [Switch](api/form/switch.md)
17+
* [Components](api/components/README.md)
18+
* [Accordion](api/components/accordion.md)
19+
* [Alert](api/components/alert.md)
20+
* [Badge](api/components/badge.md)
21+
* [Breadcrumb](api/components/breadcrumb.md)
22+
* [Button](api/components/button.md)
23+
* [ButtonGroup](api/components/button_group.md)
24+
* [Card](api/components/card.md)
25+
* [Carousel](api/components/carousel.md)
26+
* [Chart](api/components/chart.md)
27+
* [Close](api/components/close.md)
28+
* [Collapse](api/components/collapse.md)
29+
* [Dropdown](api/components/dropdown.md)
30+
* [ListGroup](api/components/list_group.md)
31+
* [Modal](api/components/modal.md)
32+
* [Nav](api/components/tab_nav.md)
33+
* [Navbar](api/components/navbar.md)
34+
* [Pagination](api/components/pagination.md)
35+
* [Popover](api/components/popover.md)
36+
* [Progress](api/components/progress.md)
37+
* [Scrollspy](api/components/scrollspy.md)
38+
* [Smart collection](api/components/smart_collection.md)
39+
* [Spinner](api/components/spinner.md)
40+
* [Toast](api/components/toast.md)
41+
* [Tooltip](api/components/tooltip.md)
42+
* [Layout](api/layout/README.md)
43+
* [Container](api/layout/container.md)
44+
* [Col](api/layout/col.md)
45+
* [Row](api/layout/row.md)
46+
47+
## Integrations
48+
49+
* [Chart.js](integrations/chartjs.md)
50+
* [Flatpickr](integrations/flatpickr.md)
51+
* [Devise](integrations/devise.md)
4852

‎docs/api/README.md

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/integrations/README.md

Lines changed: 0 additions & 2 deletions
This file was deleted.

0 commit comments

Comments
 (0)