feat: Add re-usable components (#220)

Author: fsbraun

.editorconfig

@@ -38,3 +38,6 @@ insert_final_newline = false
 
 [*plugins/image.html]
 insert_final_newline = false
+
+[*.html]
+indent_size = 2

.github/workflows/codecov.yml

@@ -12,17 +12,12 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        python-version: [ 3.8, 3.9, "3.10", "3.11"]  # latest release minus two
+        python-version: ["3.10", "3.11", "3.12"]  # latest release minus two
         requirements-file: [
-            dj32_cms38.txt,
-            dj32_cms39.txt,
-            dj32_cms41.txt,
-            dj40_cms311.txt,
-            dj41_cms311.txt,
             dj42_cms311.txt,
-            dj40_cms41.txt,
-            dj41_cms41.txt,
             dj42_cms41.txt,
+            dj50_cms41.txt,
+            dj51_cms41.txt,
         ]
         os: [
             ubuntu-20.04,
@@ -40,6 +35,6 @@ jobs:
     - name: Generate Report
       run: |
         pip install -r tests/requirements/${{ matrix.requirements-file }}
-        coverage run setup.py test
+        coverage run run_tests.py
     - name: Upload Coverage to Codecov
       uses: codecov/codecov-action@v4

.github/workflows/docs.yml

@@ -25,7 +25,7 @@ jobs:
           key: ${{ runner.os }}-pip-${{ hashFiles('docs/requirements.in') }}
           restore-keys: |
             ${{ runner.os }}-pip-
-      - run: python -m pip install -r docs/requirements.in
+      - run: python -m pip install -r docs/requirements.txt
       - name: Build docs
         run: |
           cd docs
@@ -50,7 +50,7 @@ jobs:
           key: ${{ runner.os }}-pip-${{ hashFiles('docs/requirements.in') }}
           restore-keys: |
             ${{ runner.os }}-pip-
-      - run: python -m pip install -r docs/requirements.in
+      - run: python -m pip install -r docs/requirements.txt
       - name: Check spelling
         run: |
           cd docs

README.rst

@@ -14,27 +14,31 @@ currently used frontend framework such as Bootstrap, or its specific version.
 Key features
 ============
 
--  Support of `Bootstrap 5 <https://getbootstrap.com>`_, django CMS 3.8+
-   and the new upcoming major django CMS 4.
+- Support of `Bootstrap 5 <https://getbootstrap.com>`_, django CMS 3.8+
+  and django CMS 4.
 
--  **Separation of plugins from css framework**, i.e. no need to
-   rebuild you site's plugin tree if css framework is changed in the
-   future, e.g. from Bootstrap 5 to a future version.
+- **Separation of plugins from css framework**, i.e. no need to
+  rebuild you site's plugin tree if css framework is changed in the
+  future, e.g. from Bootstrap 5 to a future version.
 
--  **New link plugin** allowing to link to internal pages provided by
-   other applications, such as `djangocms-blog
-   <https://github.com/nephila/djangocms-blog>`_.
+- **New link plugin** allowing to link to internal pages provided by
+  other applications, such as `djangocms-blog
+  <https://github.com/nephila/djangocms-blog>`_.
 
--  **Nice and well-arranged admin frontend** of `djangocms-bootstrap4
-   <https://github.com/django-cms/djangocms-bootstrap4>`_
+- **Nice and well-arranged admin frontend** of `djangocms-bootstrap4
+  <https://github.com/django-cms/djangocms-bootstrap4>`_
+
+- **Extensible** within the project and with separate project (e.g. a
+  theme app). Create your own components with a few lines of code only.
+
+- **Plugins are re-usable as UI components** anywhere in your project
+  (e.g. in a custom app) giving your whole project a more consistent
+  user experience.
 
 -  A management command to **migrate from djangocms-bootstrap4**. This
    command automatically migrates all ``djangocms-bootstrap4`` plugins to
    ``djangocms-frontend``.
 
--  **Extensible** within the project and with separate project (e.g. a
-   theme app)
-
 
 Description
 ===========
@@ -55,6 +59,10 @@ The link plugin has been rewritten to not only allow internal links to other
 CMS pages, but also to other django models such as, e.g., posts of
 `djangocms-blog <https://github.com/nephila/djangocms-blog>`_.
 
+The plugins are designed to be re-usable as UI components in your
+project, e.g. in a custom app, giving your whole project a more
+consistent user experience.
+
 Contributing
 ============
 
@@ -150,7 +158,7 @@ See readthedocs for the `documentation
 License
 =======
 
-See `LICENSE <https://github.com/django-cms/djangocms-frontend/blob/master/LICENSE>`_. 
+See `LICENSE <https://github.com/django-cms/djangocms-frontend/blob/master/LICENSE>`_.
 
 .. |pypi| image:: https://badge.fury.io/py/djangocms-frontend.svg
    :target: http://badge.fury.io/py/djangocms-frontend

djangocms_frontend/__init__.py

@@ -19,4 +19,4 @@
 13. Github actions will publish the new package to pypi
 """
 
-__version__ = "1.3.4"
+__version__ = "2.0.0a"

djangocms_frontend/apps.py

@@ -0,0 +1,11 @@
+from django import apps
+
+
+class DjangocmsFrontendConfig(apps.AppConfig):
+    name = "djangocms_frontend"
+    verbose_name = "DjangoCMS Frontend"
+
+    def ready(self):
+        from .component_pool import setup
+
+        setup()

djangocms_frontend/cms_plugins.py

@@ -1,10 +1,44 @@
+from cms.constants import SLUG_REGEXP
 from cms.plugin_base import CMSPluginBase
 from django.utils.encoding import force_str
 
+from djangocms_frontend.helpers import get_related
 
-class CMSUIPlugin(CMSPluginBase):
+if hasattr(CMSPluginBase, "edit_field"):
+    # FrontendEditable functionality already implemented in core?
+    FrontendEditableAdminMixin = object
+else:
+    # If not use our own version of the plugin-enabled mixin
+    from .helpers import FrontendEditableAdminMixin
+
+
+class CMSUIPlugin(FrontendEditableAdminMixin, CMSPluginBase):
     render_template = "djangocms_frontend/html_container.html"
     change_form_template = "djangocms_frontend/admin/base.html"
 
     def __str__(self):
         return force_str(super().__str__())
+
+    def render(self, context, instance, placeholder):
+        for key, value in instance.config.items():
+            if isinstance(value, dict) and set(value.keys()) == {"pk", "model"}:
+                if key not in instance.__dir__():  # hasattr would return the value in the config dict
+                    setattr(instance.__class__, key, get_related(key))
+        return super().render(context, instance, placeholder)
+
+    def get_plugin_urls(self):
+        from django.urls import re_path
+
+        info = f"{self.model._meta.app_label}_{self.model._meta.model_name}"
+
+        def pat(regex, fn):
+            return re_path(regex, fn, name=f"{info}_{fn.__name__}")
+
+        return [
+            pat(r'edit-field/(%s)/([a-z\-]+)/$' % SLUG_REGEXP, self.edit_field),
+        ]
+
+    def _get_object_for_single_field(self, object_id, language):
+        from .models import FrontendUIItem
+
+        return FrontendUIItem.objects.get(pk=object_id)

djangocms_frontend/common/__init__.py

@@ -0,0 +1,40 @@
+from importlib import import_module
+
+from djangocms_frontend import settings
+
+from .title import TitleFormMixin, TitleMixin
+
+__common = {
+    "attributes": ("AttributesMixin",),
+    "background": ("BackgroundFormMixin", "BackgroundMixin"),
+    "responsive": ("ResponsiveFormMixin", "ResponsiveMixin"),
+    "sizing": ("SizingFormMixin", "SizingMixin"),
+    "spacing": ("SpacingFormMixin", "SpacingMixin", "MarginFormMixin", "MarginMixin", "PaddingFormMixin", "PaddingMixin"),
+}
+
+for module, classes in __common.items():
+    try:
+        module = import_module(f"{__name__}.{settings.framework}.{module}", module)
+        for cls in classes:
+            globals()[cls] = getattr(module, cls)
+    except ModuleNotFoundError:
+        for cls in classes:
+            globals()[cls] = type(cls, (object,), {})
+
+__all__ = [
+    "TitleMixin",
+    "TitleFormMixin",
+    "AttributesMixin",
+    "BackgroundFormMixin",
+    "BackgroundMixin",
+    "ResponsiveFormMixin",
+    "ResponsiveMixin",
+    "SizingFormMixin",
+    "SizingMixin",
+    "SpacingFormMixin",
+    "SpacingMixin",
+    "MarginFormMixin",
+    "MarginMixin",
+    "PaddingFormMixin",
+    "PaddingMixin",
+]