init

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": "3.0.0"
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-transform-class-properties"
+  ]
+}

.browserslistrc

@@ -0,0 +1,11 @@
+[production staging]
+>5%
+last 2 versions
+not ie > 0
+not ie_mob > 0
+Firefox ESR
+
+[development]
+last 1 chrome version
+last 1 firefox version
+last 1 edge version

.eslintrc

@@ -0,0 +1,18 @@
+{
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "eslint:recommended"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "sourceType": "module",
+    "requireConfigFile": false
+  },
+  "rules": {
+    "semi": 2
+  }
+}

.github/workflows/runtests.yml

@@ -1,13 +1,61 @@
 name: Runs tests
 
 on:
-  pull_request:
+  # Trigger the workflow on push or pull request,
+  # but only for the main branch
   push:
     branches:
       - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.ref }}-django-check
+  cancel-in-progress: true
 
 jobs:
+
+  code-style-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.10'
+          cache: pip
+      - name: Install dependencies
+        run: |
+          pip install -r requirements-dev.txt
+      - name: Check code style
+        run: |
+          pre-commit run --all-files
+
+  frontend-build:
+    needs: code-style-check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+      - name: Fix permissions issue
+        run: chmod -R 0777 frontend
+      - name: npm install, build
+        run: |
+          npm ci
+          npm run build
+      - name: Archive artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: frontend-build
+          path: |
+            src/django_lookbook/static
+
   runtests:
+    needs: frontend-build
     runs-on: ubuntu-latest
     env:
       CHANNELS_REDIS: redis://localhost:6379/0
@@ -21,6 +69,10 @@ jobs:
           - 6379:6379
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/download-artifact@v4
+        with:
+          name: frontend-build
+          path: src/django_lookbook/static
       - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v5
         with:

.nvmrc

@@ -0,0 +1 @@
+lts/iron

.pre-commit-config.yaml

@@ -1,3 +1,5 @@
+exclude: 'src/django_lookbook/static/'
+
 repos:
   - repo: https://github.com/pycqa/isort
     rev: 5.12.0
@@ -22,3 +24,21 @@ repos:
     rev: v1.6.1
     hooks:
       - id: mypy
+  - repo: https://github.com/thibaudcolas/curlylint
+    rev: v0.13.1
+    hooks:
+      - id: curlylint
+        types: [ html ]
+  - repo: https://github.com/rtts/djhtml
+    rev: 3.0.6
+    hooks:
+      - id: djhtml
+        args:
+          - --tabwidth=2
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v2.7.1
+    hooks:
+      - id: prettier
+        types_or:
+          - css
+          - javascript

.stylelintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "scss/at-import-partial-extension": null
+  }
+}

CHANGELOG.md

@@ -1,13 +1,2 @@
 # Changelog
 
-## 1.0.5
-
-1. Add `show_previews` option to control whether to show previews or not
-
-## 1.0.4
-
-1. Add component `Preview` support
-
-## 1.0.2
-
-1. Initial release

Makefile

@@ -1,4 +1,5 @@
 build:
+	npm run build
 	poetry build
 
 publish:

README.md

@@ -1,22 +1 @@
 # README
-
-[![PyPI version](https://badge.fury.io/py/django-viewcomponent.svg)](https://badge.fury.io/py/django-viewcomponent)
-[![PyPI Supported Python Versions](https://img.shields.io/pypi/pyversions/django-viewcomponent.svg)](https://pypi.python.org/pypi/django-viewcomponent/)
-
-django-viewcomponent is a Django library that provides a way to create reusable components for your Django project.
-
-It is inspired by Rails [ViewComponent](https://viewcomponent.org/).
-
-## Why use django-viewcomponent
-
-### Single responsibility
-
-django-viewcomponent can help developers to build reusable components from the Django templates, and make the templates more readable and maintainable.
-
-### Testing
-
-django-viewcomponent components are Python objects, so they can be **easily tested** without touching Django view and Django urls.
-
-## Documentation
-
-[Documentation](https://django-viewcomponent.readthedocs.io/en/latest/)

docs/source/conf.py

@@ -16,7 +16,7 @@
 
 
 # -- Project information -----------------------------------------------------
-project = "django-viewcomponent"
+project = "django-lookbook"
 copyright = f"{datetime.datetime.now().year}, Michael Yin"
 author = "Michael Yin"
 

docs/source/getting_started.md

@@ -3,7 +3,7 @@
 Create *components/example/example.py*
 
 ```python
-from django_viewcomponent import component
+from django_lookbook import component
 
 
 @component.register("example")

docs/source/index.rst

@@ -1,4 +1,4 @@
-django-viewcomponent
+django-lookbook
 =====================
 
 A simple way to create reusable components in Django, inspired by Rails' ViewComponent.

docs/source/install.md

@@ -1,15 +1,15 @@
 # Installation
 
 ```shell
-$ pip install django-viewcomponent
+$ pip install django-lookbook
 ```
 
 Then add the app into `INSTALLED_APPS` in settings.py
 
 ```python
 INSTALLED_APPS = [
     ...,
-    'django_viewcomponent',
+    'django_lookbook',
 ]
 ```
 
@@ -30,7 +30,7 @@ TEMPLATES = [
                 'django.template.loaders.cached.Loader', [
                     'django.template.loaders.filesystem.Loader',
                     'django.template.loaders.app_directories.Loader',
-                    'django_viewcomponent.loaders.ComponentLoader',
+                    'django_lookbook.loaders.ComponentLoader',
                 ]
             )],
         },
@@ -49,7 +49,7 @@ TEMPLATES = [
                 ...
             ],
             'builtins': [
-                'django_viewcomponent.templatetags.viewcomponent_tags',       # new
+                'django_lookbook.templatetags.viewcomponent_tags',       # new
             ]
         },
     },

docs/source/overview.md

@@ -1,13 +1,13 @@
 # Overview
 
-django-viewcomponent is a Django library that provides a way to create reusable components for your Django project. It is inspired by [ViewComponent](https://viewcomponent.org/) for Ruby on Rails.
+django-lookbook is a Django library that provides a way to create reusable components for your Django project. It is inspired by [ViewComponent](https://viewcomponent.org/) for Ruby on Rails.
 
-## What’s a django-viewcomponent
+## What’s a django-lookbook
 
-django-viewcomponent is an evolution of the Django partial template, a django-viewcomponent is actually a Python object.
+django-lookbook is an evolution of the Django partial template, a django-lookbook is actually a Python object.
 
 ```python
-from django_viewcomponent import component
+from django_lookbook import component
 
 @component.register("hello")
 class HelloComponent(component.Component):
@@ -19,7 +19,7 @@ class HelloComponent(component.Component):
 
 Notes:
 
-1. Here we defined a Python class `HelloComponent` that inherits from `django_viewcomponent.component.Component`.
+1. Here we defined a Python class `HelloComponent` that inherits from `django_lookbook.component.Component`.
 2. `@component.register("hello")` is a decorator that registers the component with the name `hello`.
 3. The `template` attribute is a string that contains the HTML template for the component.
 4. The `__init__` method is the constructor of the component, it receives the `name` parameter and stores it in the `self.name` attribute. So we can access it later in the template via `{{ self.name }}`.
@@ -40,12 +40,12 @@ The returning HTML would be:
 <h1>Hello, Michael Yin!</h1>
 ```
 
-## Why use django-viewcomponent
+## Why use django-lookbook
 
 ### Single responsibility
 
-django-viewcomponent can help developers to build reusable components from the Django templates, and make the templates more readable and maintainable.
+django-lookbook can help developers to build reusable components from the Django templates, and make the templates more readable and maintainable.
 
 ### Testing
 
-django-viewcomponent components are Python objects, so they can be **easily tested** without touching Django view and Django urls.
+django-lookbook components are Python objects, so they can be **easily tested** without touching Django view and Django urls.

docs/source/preview.md

@@ -19,7 +19,7 @@ VIEW_COMPONENTS = {
 Add below url path to your Django urls
 
 ```python
-path("previews/", include("django_viewcomponent.urls")),
+path("previews/", include("django_lookbook.urls")),
 ```
 
 So all the previews will work on the `/previews` path, I'd like to do that when `DEBUG` is `True`.
@@ -39,7 +39,7 @@ Notes:
 
 ```python
 from django.template import Context, Template
-from django_viewcomponent.preview import ViewComponentPreview
+from django_lookbook.preview import ViewComponentPreview
 
 
 class ModalComponentPreview(ViewComponentPreview):
@@ -92,4 +92,4 @@ The great thing is, we can also see the source code of the preview, which helps
 
 ## Override Templates
 
-You can also override the templates to fit your needs, please check the template files under `django_viewcomponent/templates/django_viewcomponent` to learn more.
+You can also override the templates to fit your needs, please check the template files under `django_lookbook/templates/django_lookbook` to learn more.

docs/source/slot.md

@@ -9,8 +9,8 @@ Unlike other packages which declare slot via `{% slot %}`, we define the slot in
 Create *components/blog/blog.py*
 
 ```python
-from django_viewcomponent import component
-from django_viewcomponent.fields import RendersOneField
+from django_lookbook import component
+from django_lookbook.fields import RendersOneField
 
 
 @component.register("blog")
@@ -65,8 +65,8 @@ You can use `filled` attribute of the slot field to check if the slot is filled
 Let's update `BlogComponent`
 
 ```python
-from django_viewcomponent import component
-from django_viewcomponent.fields import RendersOneField, RendersManyField
+from django_lookbook import component
+from django_lookbook.fields import RendersOneField, RendersManyField
 
 
 @component.register("blog")
@@ -125,8 +125,8 @@ This is a very powerful feature, please read it carefully.
 Let's update the `BlogComponent` again
 
 ```python
-from django_viewcomponent import component
-from django_viewcomponent.fields import RendersOneField, RendersManyField
+from django_lookbook import component
+from django_lookbook.fields import RendersOneField, RendersManyField
 
 
 @component.register("header")

frontend/src/application/app.js

@@ -0,0 +1,5 @@
+// This is the scss entry file
+import "../styles/index.scss";
+
+// import Stimulus controllers
+import "../controllers/index";

frontend/src/controllers/index.js

@@ -0,0 +1,26 @@
+import { Application } from "@hotwired/stimulus";
+import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers";
+import {
+  Alert,
+  Dropdown,
+  Modal,
+  Tabs,
+  Popover,
+  Toggle,
+} from "tailwindcss-stimulus-components";
+
+const application = Application.start();
+application.debug = process.env.NODE_ENV === "development";
+window.Stimulus = application;
+
+// load local controllers, only xxx_controller.js would be loaded
+const context = require.context("./", true, /\.(js|ts)$/);
+application.load(definitionsFromContext(context));
+
+// register 3-party controllers
+application.register("alert", Alert);
+application.register("dropdown", Dropdown);
+application.register("modal", Modal);
+application.register("tabs", Tabs);
+application.register("popover", Popover);
+application.register("toggle", Toggle);