Merge pull request #235 from django-daiquiri/webpack

Webpack

.eslintrc.js

@@ -0,0 +1,49 @@
+module.exports = {
+  'root': true,
+  'globals': {
+    'gettext': true,
+    'ngettext': true,
+    'interpolate': true,
+    'process': true,
+    'require': true
+  },
+  'env': {
+    'browser': true,
+    'es2021': true,
+    'node': true
+  },
+  'extends': [
+    'eslint:recommended',
+    'plugin:react/recommended'
+  ],
+  'overrides': [],
+  'parserOptions': {
+    'ecmaVersion': 'latest',
+    'sourceType': 'module'
+  },
+  'plugins': [
+    'react'
+  ],
+  'ignorePatterns': ['**/static/**/*.js'],
+  'rules': {
+    'indent': 'off',
+    'no-empty-pattern': 'off',
+    'linebreak-style': [
+      'error',
+      'unix'
+    ],
+    'quotes': [
+      'error',
+      'single'
+    ],
+    'semi': [
+      'error',
+      'never'
+    ]
+  },
+  'settings': {
+    'react': {
+      'version': 'detect'
+    }
+  }
+}

.gitignore

@@ -16,6 +16,7 @@ __pycache__/
 /htmlcov
 /env
 /venv
+/node_modules
 
 build
 dist

.nvmrc

@@ -0,0 +1 @@
+v21

daiquiri/auth/assets/js/users.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+
+import App from './users/App'
+
+createRoot(
+  document.getElementById('app')
+).render(<App />)

daiquiri/auth/assets/js/users/App.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const App = () => {
+    return <span>👍</span>
+}
+
+export default App

daiquiri/auth/templates/auth/new/users.html

@@ -0,0 +1,15 @@
+{% extends 'core/new/wide.html' %}
+{% load static %}
+
+{% block js %}
+{{ block.super }}
+<script src="{% static 'auth/dist/js/users.js' %}" defer></script>
+{% endblock %}
+
+{% block wide %}
+
+    <h1>User management</h1>
+
+    <div id="app" class="users"></div>
+
+{% endblock %}

daiquiri/auth/urls_auth.py

@@ -2,7 +2,7 @@
 
 from rest_framework import routers
 
-from .views import UsersView
+from .views import UsersView, NewUsersView
 from .viewsets import ProfileViewSet, GroupViewSet
 
 
@@ -15,6 +15,7 @@
 urlpatterns = [
     # user management
     path('users/', UsersView.as_view(), name='users'),
+    path('users/new/', NewUsersView.as_view(), name='users_new'),
 
     # rest api
     path('api/', include(router.urls)),

daiquiri/auth/views.py

@@ -109,6 +109,11 @@ def get_context_data(self, **kwargs):
         return context
 
 
+class NewUsersView(ModelPermissionMixin, CSRFViewMixin, TemplateView):
+    template_name = 'auth/new/users.html'
+    permission_required = 'daiquiri_auth.view_profile'
+
+
 class PasswordChangeView(AllauthPasswordChangeView):
 
     success_url = reverse_lazy('account_change_password_done')

daiquiri/contact/assets/js/messages.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+
+import App from './messages/App'
+
+createRoot(
+  document.getElementById('app')
+).render(<App />)

daiquiri/contact/assets/js/messages/App.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const App = () => {
+    return <span>👍</span>
+}
+
+export default App

daiquiri/contact/templates/contact/new/messages.html

@@ -0,0 +1,15 @@
+{% extends 'core/new/wide.html' %}
+{% load static %}
+
+{% block js %}
+{{ block.super }}
+<script src="{% static 'contact/dist/js/messages.js' %}" defer></script>
+{% endblock %}
+
+{% block wide %}
+
+    <h1>Contact messages</h1>
+
+    <div id="app" class="messages"></div>
+
+{% endblock %}

daiquiri/contact/urls.py

@@ -1,7 +1,7 @@
 from django.urls import include, path
 from rest_framework import routers
 
-from .views import MessagesView, contact
+from .views import MessagesView, contact, NewMessagesView
 from .viewsets import ContactMessageViewSet, StatusViewSet
 
 app_name = 'contact'
@@ -13,6 +13,7 @@
 urlpatterns = [
     path('', contact, name='contact'),
     path('messages/', MessagesView.as_view(), name='messages'),
+    path('messages/new/', NewMessagesView.as_view(), name='messages_new'),
 
     # rest api
     path('api/', include(router.urls)),

daiquiri/contact/views.py

@@ -49,3 +49,8 @@ def contact(request):
 class MessagesView(ModelPermissionMixin, CSRFViewMixin, TemplateView):
     template_name = 'contact/messages.html'
     permission_required = 'daiquiri_contact.view_contactmessage'
+
+
+class NewMessagesView(ModelPermissionMixin, CSRFViewMixin, TemplateView):
+    template_name = 'contact/new/messages.html'
+    permission_required = 'daiquiri_contact.view_contactmessage'

daiquiri/core/assets/js/base.js

@@ -0,0 +1 @@
+import 'bootstrap'

daiquiri/core/assets/js/utils/baseUrl.js

@@ -0,0 +1,2 @@
+// take the baseurl from the <head> of the django template
+export default document.querySelector('meta[name="baseurl"]').content.replace(/\/+$/, '')

daiquiri/core/assets/scss/base.scss

@@ -0,0 +1,3 @@
+@import '~bootstrap/scss/bootstrap';
+
+@import 'layout';

daiquiri/core/assets/scss/layout.scss

@@ -0,0 +1,3 @@
+h1 {
+    margin-top: 20px;
+}

daiquiri/core/templates/core/new/base.html

@@ -0,0 +1,29 @@
+{% load static %}<!DOCTYPE html>
+<html>
+
+<head>
+
+{% include 'core/new/base_head.html' %}
+
+{% block css %}
+<link rel="stylesheet" href="{% static 'core/dist/css/base.css' %}" />
+{% endblock %}
+
+{% block js %}
+<script src="{% static 'core/dist/js/base.js' %}" defer></script>
+{% endblock %}
+
+</head>
+
+<body>
+
+{% include 'core/new/base_navigation.html' %}
+
+{% block content %}{% endblock %}
+
+{% include 'core/new/base_footer.html' %}
+
+{% if not debug %}{% include 'core/base_analytics.html' %}{% endif %}
+</body>
+
+</html>

daiquiri/core/templates/core/new/base_head.html

@@ -0,0 +1,14 @@
+{% load static %}
+
+<title>{{ request.site.name }}</title>
+
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+<meta property="og:title" content="{{ request.site.name }}" />
+<meta property="og:url" content="{{ request.site.domain }}" />
+
+<meta name='baseurl' content="{% url 'home' %}" />
+<meta name='staticurl' content="{% static '' %}" />
+
+<link rel="shortcut icon" href="{% static 'core/img/favicon.png' %}" type="image/png" />

daiquiri/core/templates/core/new/base_navigation.html

@@ -0,0 +1,18 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="{% url 'home' %}">{{ request.site.name }}</a>
+        <button
+            class="navbar-toggler" type="button"
+            data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbar-collapse">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>

daiquiri/core/templates/core/new/wide.html

@@ -0,0 +1,10 @@
+{% extends 'core/new/base.html' %}
+{% block content %}
+
+<main class="container">
+    <section class="wide">
+        {% block wide %}{% endblock %}
+    </section>
+</main>
+
+{% endblock %}

daiquiri/query/assets/js/examples.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+
+import App from './examples/App'
+
+createRoot(
+  document.getElementById('app')
+).render(<App />)

daiquiri/query/assets/js/examples/App.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const App = () => {
+    return <span>👍</span>
+}
+
+export default App

daiquiri/query/assets/js/jobs.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+
+import App from './jobs/App'
+
+createRoot(
+  document.getElementById('app')
+).render(<App />)

daiquiri/query/assets/js/jobs/App.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const App = () => {
+    return <span>👍</span>
+}
+
+export default App

daiquiri/query/assets/js/query.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+
+import App from './query/App'
+
+createRoot(
+  document.getElementById('app')
+).render(<App />)

daiquiri/query/assets/js/query/App.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const App = () => {
+    return <span>👍</span>
+}
+
+export default App

daiquiri/query/templates/query/new/examples.html

@@ -0,0 +1,20 @@
+{% extends 'core/new/wide.html' %}
+{% load static %}
+
+{% block css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'query/dist/css/examples.css' %}" />
+{% endblock %}
+
+{% block js %}
+{{ block.super }}
+<script src="{% static 'query/dist/js/examples.js' %}" defer></script>
+{% endblock %}
+
+{% block wide %}
+
+    <h1>Example queries</h1>
+
+    <div id="app" class="examples"></div>
+
+{% endblock %}

daiquiri/query/templates/query/new/jobs.html

@@ -0,0 +1,20 @@
+{% extends 'core/new/wide.html' %}
+{% load static %}
+
+{% block css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'query/dist/css/jobs.css' %}" />
+{% endblock %}
+
+{% block js %}
+{{ block.super }}
+<script src="{% static 'query/dist/js/jobs.js' %}" defer></script>
+{% endblock %}
+
+{% block wide %}
+
+    <h1>Query jobs</h1>
+
+    <div id="app" class="jobs"></div>
+
+{% endblock %}

daiquiri/query/templates/query/new/query.html

@@ -0,0 +1,20 @@
+{% extends 'core/new/wide.html' %}
+{% load static %}
+
+{% block css %}
+{{ block.super }}
+<link rel="stylesheet" href="{% static 'query/dist/css/query.css' %}" />
+{% endblock %}
+
+{% block js %}
+{{ block.super }}
+<script src="{% static 'query/dist/js/query.js' %}" defer></script>
+{% endblock %}
+
+{% block wide %}
+
+    <h1>Query interface</h1>
+
+    <div id="app" class="query"></div>
+
+{% endblock %}