Improve structure of sampleproject.

sampleproject/calendarapp/apps.py

@@ -4,6 +4,3 @@ from django.apps import AppConfig
 class CalendarappConfig(AppConfig):
     default_auto_field = "django.db.models.BigAutoField"
     name = "calendarapp"
-
-    def ready(self):
-        from components.calendar import calendar  # NOQA

sampleproject/components/calendar/calendar.css

@@ -0,0 +1,2 @@
+.calendar-component { width: 200px; background: pink; }
+.calendar-component span { font-weight: bold; }

sampleproject/components/calendar/calendar.html

@@ -1 +1 @@
-Today's date is <span>{{ date }}</span>
+<div class="calendar-component">Today's date is <span>{{ date }}</span></div>

sampleproject/components/calendar/calendar.js

@@ -0,0 +1,3 @@
+(function(){
+    document.querySelector(".calendar-component").onclick = function(){alert("Clicked calendar!")}
+})()

sampleproject/components/calendar/calendar.py

@@ -3,8 +3,9 @@ from django_components import component
 
 @component.register("calendar")
 class Calendar(component.Component):
-    # Note that Django will look for templates inside `[your app]/components` dir
+    # Note that Django will look for templates inside `[your apps]/components` dir and
-    # To customize which template to use based on context override get_template_name instead
+    # `[project root]/components` dir. To customize which template to use based on context
+    # you can override def get_template_name() instead of specifying the below variable.
     template_name = "calendar/calendar.html"
 
     # This component takes one parameter, a date string to show in the template
@@ -14,5 +15,5 @@ class Calendar(component.Component):
         }
 
     class Media:
-        css = "calendarapp/components/calendar/calendar.css"
+        css = "calendar/calendar.css"
-        js = "calendarapp/components/calendar/calendar.js"
+        js = "calendar/calendar.js"

sampleproject/sampleproject/settings.py

@@ -122,6 +122,9 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/4.0/howto/static-files/
 
 STATIC_URL = "static/"
+STATICFILES_DIRS = [
+    BASE_DIR / "components",
+]
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field