{{ title }}
+{{ title }}
{{ description }}
Slider
- + {% lucide "book-open", { "class": "size-4" } %}Switch
- + {% lucide "book-open", { "class": "size-4" } %}Table
- + {% lucide "book-open", { "class": "size-4" } %}Tabs
- + {% lucide "book-open", { "class": "size-4" } %}Textarea
- + {% lucide "book-open", { "class": "size-4" } %}Toast
- + {% lucide "book-open", { "class": "size-4" } %}Tooltip
- + {% lucide "book-open", { "class": "size-4" } %}You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
+
-
+
Use Nunjucks or Jinja macros
{% lucide "arrow-right" %}
diff --git a/docs/src/components/avatar.njk b/docs/src/components/avatar.njk
index 2a5520e..771d863 100644
--- a/docs/src/components/avatar.njk
+++ b/docs/src/components/avatar.njk
@@ -12,7 +12,7 @@ toc:
{% endset %}
diff --git a/docs/src/components/breadcrumb.njk b/docs/src/components/breadcrumb.njk
index 2f28cef..106c792 100644
--- a/docs/src/components/breadcrumb.njk
+++ b/docs/src/components/breadcrumb.njk
@@ -75,7 +75,7 @@ document.addEventListener('alpine:init', () => {
{% lucide "circle-alert" %}
-
{% set code %}There is no dedicated accordion component in Basecoat.
+There is no dedicated avatar component in Basecoat.
{% endset %}
diff --git a/docs/src/components/breadcrumb.njk b/docs/src/components/breadcrumb.njk
index 2f28cef..106c792 100644
--- a/docs/src/components/breadcrumb.njk
+++ b/docs/src/components/breadcrumb.njk
@@ -75,7 +75,7 @@ document.addEventListener('alpine:init', () => {
You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
+
-
+
-
+
Use Nunjucks or Jinja macros
{% lucide "arrow-right" %}
diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk
index f19b2b8..8006d1d 100644
--- a/docs/src/components/dialog.njk
+++ b/docs/src/components/dialog.njk
@@ -89,7 +89,7 @@ document.addEventListener('alpine:init', () => {
You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
+
Components with Javascript
{% lucide "arrow-right" %}
@@ -111,13 +111,22 @@ document.addEventListener('alpine:init', () => {
] %}
{{ tabs(id="combobox", tabsets=tabsets) }}
+
+
+
+{% set code_dispatch %}{% endset %}
+{{ code_block(code_dispatch | prettyHtml, "html") }}
+
-
The component will dispatch dialog:opened and dialog:closed events when the dialog is opened or closed. You can also dispatch dialog:open and dialog:close events to open or close the dialog programmatically. You will need the element to have an id to be able to target it (e.g. <div id="my-dialog" class="dialog">):
Jinja and Nunjucks
You can use the dialog() Nunjucks or Jinja macro for this component.
+
Use Nunjucks or Jinja macros
{% lucide "arrow-right" %}
diff --git a/docs/src/components/dropdown-menu.njk b/docs/src/components/dropdown-menu.njk
index ad5b206..c5c4222 100644
--- a/docs/src/components/dropdown-menu.njk
+++ b/docs/src/components/dropdown-menu.njk
@@ -114,7 +114,7 @@ document.addEventListener('alpine:init', () => {
You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
+
-
+
Use Nunjucks or Jinja macros
{% lucide "arrow-right" %}
diff --git a/docs/src/components/popover.njk b/docs/src/components/popover.njk
index 38809a4..8f68e8d 100644
--- a/docs/src/components/popover.njk
+++ b/docs/src/components/popover.njk
@@ -91,7 +91,7 @@ document.addEventListener('alpine:init', () => {
You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
+
-
+
Use Nunjucks or Jinja macros
{% lucide "arrow-right" %}
diff --git a/docs/src/components/select.njk b/docs/src/components/select.njk
index 2e549a6..24e7ee4 100644
--- a/docs/src/components/select.njk
+++ b/docs/src/components/select.njk
@@ -106,7 +106,7 @@ document.addEventListener('alpine:init', () => {
You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
+
Components with Javascript
{% lucide "arrow-right" %}
@@ -128,13 +128,17 @@ document.addEventListener('alpine:init', () => {
] %}
{{ tabs(id="select", tabsets=tabsets) }}
+
+
+
-
The component will dispatch a select:change event when a value is selected, along with the value and label of the selected option in the detail object.
Jinja and Nunjucks
You can use the dropdown_menu() Nunjucks or Jinja macro for this component.
+
Use Nunjucks or Jinja macros
{% lucide "arrow-right" %}
diff --git a/docs/src/components/sidebar.njk b/docs/src/components/sidebar.njk
index 6731393..298c464 100644
--- a/docs/src/components/sidebar.njk
+++ b/docs/src/components/sidebar.njk
@@ -43,7 +43,7 @@ toc:
You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
+
-
+
Use Nunjucks or Jinja macros
{% lucide "arrow-right" %}
diff --git a/docs/src/components/tabs.njk b/docs/src/components/tabs.njk
index bfcb198..f574234 100644
--- a/docs/src/components/tabs.njk
+++ b/docs/src/components/tabs.njk
@@ -109,7 +109,7 @@ document.addEventListener('alpine:init', () => {
{% endif %}
-{% endmacro %}
\ No newline at end of file
+{% endmacro %}
+
+{#
+ Renders a single toast message.
+
+ @param category {string} [optional] [default="success"] - Type of toast ('success', 'error', 'info', 'warning'). Determines icon and ARIA role.
+ @param title {string} [optional] - The main title text of the toast.
+ @param description {string} [optional] - The secondary description text.
+ @param action {object} [optional] - Defines an action button.
+ - label {string}: Button text.
+ - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+ - url {string}: URL for an anchor link button.
+ @param cancel {object} [optional] - Defines a cancel/dismiss button (similar structure to action).
+ - label {string}: Button text.
+ - click {string}: JavaScript code to execute on click (e.g., '$dispatch(\'custom-event\')').
+ - url {string}: URL for an anchor link button.
+#}
+{% macro toast(
+ category="success",
+ title="",
+ description="",
+ action=None,
+ cancel=None
+) %}
+You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
+
-
+ {% elif item.type == "item" or not item.type %} +
+ {% elif item.type == "submenu" %} +
+
+
+ {% elif item.type == "item" or not item.type %}
+
+
+ {% if item.icon %}{{ item.icon | safe }}{% endif %}
+ {{ item.label }}
+
+
+ {% endif %}
+ {% endfor %}
+{% endmacro %}
\ No newline at end of file
diff --git a/src/jinja/tabs.html.jinja b/src/jinja/tabs.html.jinja
index e9cddb6..4b1537e 100644
--- a/src/jinja/tabs.html.jinja
+++ b/src/jinja/tabs.html.jinja
@@ -37,7 +37,7 @@
{{ key }}="{{ value }}"
{% endfor %}
>
- {% for tabset in tabsets %}
+ {% for tabset in tabsets.items() %}
+
+{% endmacro %}
+
+{#
+ Renders a list of items for the select component.
+
+ @param items {array} - The array of items to render.
+ @param parent_id_prefix {string} [optional] - The prefix for the item id.
+#}
+{% macro render_select_items(items, parent_id_prefix="items") %}
+ {% for item in items.items() %}
+ {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+
+ {% if item.type == "group" %}
+ {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+
Use Nunjucks or Jinja macros
{% lucide "arrow-right" %}
diff --git a/docs/src/components/toast.njk b/docs/src/components/toast.njk
index 30baf29..29acaf9 100644
--- a/docs/src/components/toast.njk
+++ b/docs/src/components/toast.njk
@@ -67,7 +67,7 @@ toc:
diff --git a/docs/src/kitchen-sink.njk b/docs/src/kitchen-sink.njk
index d84f68b..915ac1c 100644
--- a/docs/src/kitchen-sink.njk
+++ b/docs/src/kitchen-sink.njk
@@ -1,5 +1,7 @@
---
layout: layouts/layout.njk
+title: Kitchen Sink
+description: A collection of all the components available in Basecoat.
---
{% set components = [
{ label: "Accordion", id: "accordion" },
@@ -31,11 +33,17 @@ layout: layouts/layout.njk
{ label: "Tooltip", id: "tooltip" }
] %}
-You will also need to include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. x-bind, x-data, @click).
+
-
\ No newline at end of file
+
+
Use Nunjucks or Jinja macros
{% lucide "arrow-right" %}
diff --git a/docs/src/index.njk b/docs/src/index.njk
index bec77d1..9ce2570 100644
--- a/docs/src/index.njk
+++ b/docs/src/index.njk
@@ -7,7 +7,7 @@ layout: layouts/layout.njk
diff --git a/docs/src/installation.njk b/docs/src/installation.njk
index 401f249..6ff8bc3 100644
--- a/docs/src/installation.njk
+++ b/docs/src/installation.njk
@@ -25,14 +25,10 @@ toc:
---
{% from "macros/code_block.njk" import code_block %}
+{% from "tabs.njk" import tabs %}
+
+
+
+
-
All of the shadcn/ui magic, none of the React
+All of the shadcn/ui magic, none of the React
A components library built with Tailwind CSS that works with any web stack.
@@ -92,7 +92,7 @@ layout: layouts/layout.njk
-
+
Strictly Necessary
These cookies are essential in order to use the website and use its features.
Install the CSS
-
- {% lucide "circle-alert" %}
-
-
If you don't want to use npm, you can follow the manual installation instructions.
--
Add Tailwind CSS
@@ -46,8 +42,17 @@ toc:- {% set code %}npm install hunvreus/basecoat{% endset %} - {{ code_block(code, "bash") }} + {% set code_npm %}npm install basecoat-css{% endset %} + {% set code_pnpm %}pnpm add basecoat-css{% endset %} + {% set code_bun %}bun add basecoat-css{% endset %} + {% set code_yarn %}yarn add basecoat-css{% endset %} + {% set tabsets = [ + { tab: "npm", panel: code_block(code_npm, class="") }, + { tab: "pnpm", panel: code_block(code_pnpm, class="") }, + { tab: "bun", panel: code_block(code_bun, class="") }, + { tab: "yarn", panel: code_block(code_yarn, class="") } + ] %} + {{ tabs(id="npm-install", tabsets=tabsets) }}Add Basecoat to your Tailwind CSS file.
@@ -55,7 +60,7 @@ toc:Alternatively, you can directly copy the
basecoat.cssfile into your project. -
Import basecoat in your CSS
{% set code %}@import "tailwindcss"; -@import "basecoat";{% endset %} +@import "basecoat-css";{% endset %} {{ code_block(code, "css") }} -
@@ -95,10 +100,23 @@ toc:
Use the CLI
-+ +{% set code_npm_exec %}npx basecoat-cli add dialog{% endset %} +{% set code_pnpm_exec %}pnpm dlx basecoat-cli add dialog{% endset %} +{% set code_bun_exec %}bunx basecoat-cli add dialog{% endset %} +{% set code_yarn_exec %}yarn dlx basecoat-cli add dialog{% endset %} +{% set exec_tabsets = [ + { tab: "npm", panel: code_block(code_npm_exec, class="") }, + { tab: "pnpm", panel: code_block(code_pnpm_exec, class="") }, + { tab: "bun", panel: code_block(code_bun_exec, class="") }, + { tab: "yarn", panel: code_block(code_yarn_exec, class="") } +] %} +{{ tabs(id="cli-execution", tabsets=exec_tabsets, label="Execute CLI commands to add components:") }} + +If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for any of the complex components(e.g. Dialog). It will copy the JS and `
-.html.jinjaor.njkmacros into your code.For example, to add the Dialog component, run:
- {% set code %}npx basecoatui add dialog{% endset %} - {{ code_block(code, "bash") }} +If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for any of the complex components(e.g. Dialog). It will copy the JS and
+.html.jinjaor.njkmacros into your code.For example, to add the Dialog component, run one of the following commands:
+@@ -140,10 +158,31 @@ toc:You will be asked to confirm the template engine and destination directory for the Javascript and macros.
- Import the theme in your CSS file: {% set code %}@import "tailwindcss"; -@import "basecoat"; +@import "basecoat-css"; @import "theme.css";{% endset %} {{ code_block(code, "css") }} - +
Customization
+ +
+
diff --git a/docs/src/introduction.njk b/docs/src/introduction.njk
index 31904d5..5c18d11 100644
--- a/docs/src/introduction.njk
+++ b/docs/src/introduction.njk
@@ -46,7 +46,7 @@ toc:
You can override default styles using Tailwind:
+ {% set code %}{% endset %} + {{ code_block(code, "html") }} +You can also obviously extend and/or override the existing styles with your own Tailwind files:
+ {% set code %}@import "tailwindcss"; +@import "basecoat-css"; +@import "theme.css";{% endset %} + {{ code_block(code, "css") }} +You can also use use the theme variables to customize many aspects of the components (colors, fonts, sizes, etc).
+If you want to make more drastic changes, I recommend copying the basecoat.css file into your project and making your changes there.
There's also a CLI to help you scaffold components and get set up fast.
-Check out the installation guide to get started.
+Check out the installation guide to get started.
How can I help?
@@ -55,9 +55,9 @@ toc:Basecoat is 100% open source and free.
-
-
{% if name is defined %}
@@ -105,4 +110,42 @@
>
{% endif %}
- {% for component in components %}
- {% include "partials/kitchen-sink/" ~ component.id ~ ".njk" %}
- {% endfor %}
+
+ {% elif item.type == "item" or not item.type %} + {% if item.url %} + + {{ item.label | safe }} + + {% else %} + + {% endif %} + {% endif %} + {% endfor %} {% endmacro %} \ No newline at end of file diff --git a/src/jinja/select.html.jinja b/src/jinja/select.html.jinja index 72b2e5e..e58aa47 100644 --- a/src/jinja/select.html.jinja +++ b/src/jinja/select.html.jinja @@ -10,12 +10,13 @@ @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div. @param input_attrs {object} [optional] - Additional HTML attributes for the hidden input. @param search_placeholder {string} [optional] [default="Search entries..."] - Placeholder text for the search input (combobox only). - @param is_combobox {boolean} [optional] [default=False] - Renders a combobox with search functionality if true. + @param is_combobox {boolean} [optional] [default=False] - Renders a combobox with search functionality if True. #} {% macro select( id=None, selected=None, name=None, + items=None, main_attrs={}, trigger_attrs={}, content_attrs={}, @@ -91,7 +92,11 @@ {{ key }}="{{ value }}" {% endfor %} > - {{ caller() if caller }} + {% if items %} + {{ render_select_items(items, id ~ "-items" if id else "items") }} + {% else %} + {{ caller() if caller }} + {% endif %}
+
+{% endmacro %}
+
+{#
+ Renders dropdown menu items recursively.
+
+ @param items {array} - The array of items to render.
+ @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
+#}
+{% macro render_dropdown_items(items, parent_id_prefix="items") %}
+ {% for item in items.items() %}
+ {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+
+ {% if item.type == "group" %}
+ {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+
+
+
+
{{ title }}
+{{ description }}
+
+ {% for component in components %}
+ {% include "partials/kitchen-sink/" ~ component.id ~ ".njk" %}
+ {% endfor %}
+
{% from "macros/toc.njk" import toc_nav %}
diff --git a/docs/src/robots.njk b/docs/src/robots.njk
new file mode 100644
index 0000000..9fd990e
--- /dev/null
+++ b/docs/src/robots.njk
@@ -0,0 +1,7 @@
+---
+permalink: /robots.txt
+eleventyExcludeFromCollections: true
+---
+Sitemap: {{ site.url }}/sitemap.xml
+User-agent: *
+Disallow:
\ No newline at end of file
diff --git a/docs/src/sitemap.njk b/docs/src/sitemap.njk
new file mode 100644
index 0000000..0fa1068
--- /dev/null
+++ b/docs/src/sitemap.njk
@@ -0,0 +1,15 @@
+---
+permalink: /sitemap.xml
+eleventyExcludeFromCollections: true
+---
+
+
+ {% for page in collections.all %}
+ {% if not page.url.startsWith('/fragments/') %}
+
+ {{ site.url }}{{ page.url | url }}
+ {{ page.date.toISOString() }}
+
+ {% endif %}
+ {% endfor %}
+
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 04cc19f..3c55bc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,24 +1,21 @@
{
"name": "basecoat",
- "version": "0.1.0",
+ "version": "0.0.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "basecoat",
- "version": "0.1.0",
+ "version": "0.0.1",
"license": "MIT",
- "bin": {
- "basecoat": "cli/index.js"
- },
+ "workspaces": [
+ "packages/*"
+ ],
"devDependencies": {
"@11ty/eleventy": "^3.0.0",
"@grimlink/eleventy-plugin-lucide-icons": "^2.1.4",
"@tailwindcss/cli": "^4.1.3",
- "commander": "^13.1.0",
"concurrently": "^9.1.2",
- "fs-extra": "^11.3.0",
- "inquirer": "^12.6.0",
"prettier": "^3.5.3",
"tailwindcss": "^4.1.3"
}
@@ -260,7 +257,6 @@
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-4.1.5.tgz",
"integrity": "sha512-swPczVU+at65xa5uPfNP9u3qx/alNwiaykiI/ExpsmMSQW55trmZcwhYWzw/7fj+n6Q8z1eENvR7vFfq9oPSAQ==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -285,7 +281,6 @@
"version": "5.1.9",
"resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.1.9.tgz",
"integrity": "sha512-NgQCnHqFTjF7Ys2fsqK2WtnA8X1kHyInyG+nMIuHowVTIgIuS10T4AznI/PvbqSpJqjCUqNBlKGh1v3bwLFL4w==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -307,7 +302,6 @@
"version": "10.1.10",
"resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.1.10.tgz",
"integrity": "sha512-roDaKeY1PYY0aCqhRmXihrHjoSW2A00pV3Ke5fTpMCkzcGF64R8e0lw3dK+eLEHwS4vB5RnW1wuQmvzoRul8Mw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/figures": "^1.0.11",
@@ -335,7 +329,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -345,14 +338,12 @@
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
- "dev": true,
"license": "MIT"
},
"node_modules/@inquirer/core/node_modules/string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
- "dev": true,
"license": "MIT",
"dependencies": {
"emoji-regex": "^8.0.0",
@@ -367,7 +358,6 @@
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
- "dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
@@ -380,7 +370,6 @@
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^4.0.0",
@@ -395,7 +384,6 @@
"version": "4.2.10",
"resolved": "https://registry.npmjs.org/@inquirer/editor/-/editor-4.2.10.tgz",
"integrity": "sha512-5GVWJ+qeI6BzR6TIInLP9SXhWCEcvgFQYmcRG6d6RIlhFjM5TyG18paTGBgRYyEouvCmzeco47x9zX9tQEofkw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -418,7 +406,6 @@
"version": "4.0.12",
"resolved": "https://registry.npmjs.org/@inquirer/expand/-/expand-4.0.12.tgz",
"integrity": "sha512-jV8QoZE1fC0vPe6TnsOfig+qwu7Iza1pkXoUJ3SroRagrt2hxiL+RbM432YAihNR7m7XnU0HWl/WQ35RIGmXHw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -441,7 +428,6 @@
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.11.tgz",
"integrity": "sha512-eOg92lvrn/aRUqbxRyvpEWnrvRuTYRifixHkYVpJiygTgVSBIHDqLh0SrMQXkafvULg3ck11V7xvR+zcgvpHFw==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=18"
@@ -451,7 +437,6 @@
"version": "4.1.9",
"resolved": "https://registry.npmjs.org/@inquirer/input/-/input-4.1.9.tgz",
"integrity": "sha512-mshNG24Ij5KqsQtOZMgj5TwEjIf+F2HOESk6bjMwGWgcH5UBe8UoljwzNFHqdMbGYbgAf6v2wU/X9CAdKJzgOA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -473,7 +458,6 @@
"version": "3.0.12",
"resolved": "https://registry.npmjs.org/@inquirer/number/-/number-3.0.12.tgz",
"integrity": "sha512-7HRFHxbPCA4e4jMxTQglHJwP+v/kpFsCf2szzfBHy98Wlc3L08HL76UDiA87TOdX5fwj2HMOLWqRWv9Pnn+Z5Q==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -495,7 +479,6 @@
"version": "4.0.12",
"resolved": "https://registry.npmjs.org/@inquirer/password/-/password-4.0.12.tgz",
"integrity": "sha512-FlOB0zvuELPEbnBYiPaOdJIaDzb2PmJ7ghi/SVwIHDDSQ2K4opGBkF+5kXOg6ucrtSUQdLhVVY5tycH0j0l+0g==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -518,7 +501,6 @@
"version": "7.5.0",
"resolved": "https://registry.npmjs.org/@inquirer/prompts/-/prompts-7.5.0.tgz",
"integrity": "sha512-tk8Bx7l5AX/CR0sVfGj3Xg6v7cYlFBkEahH+EgBB+cZib6Fc83dwerTbzj7f2+qKckjIUGsviWRI1d7lx6nqQA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/checkbox": "^4.1.5",
@@ -548,7 +530,6 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@inquirer/rawlist/-/rawlist-4.1.0.tgz",
"integrity": "sha512-6ob45Oh9pXmfprKqUiEeMz/tjtVTFQTgDDz1xAMKMrIvyrYjAmRbQZjMJfsictlL4phgjLhdLu27IkHNnNjB7g==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -571,7 +552,6 @@
"version": "3.0.12",
"resolved": "https://registry.npmjs.org/@inquirer/search/-/search-3.0.12.tgz",
"integrity": "sha512-H/kDJA3kNlnNIjB8YsaXoQI0Qccgf0Na14K1h8ExWhNmUg2E941dyFPrZeugihEa9AZNW5NdsD/NcvUME83OPQ==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -595,7 +575,6 @@
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@inquirer/select/-/select-4.2.0.tgz",
"integrity": "sha512-KkXQ4aSySWimpV4V/TUJWdB3tdfENZUU765GjOIZ0uPwdbGIG6jrxD4dDf1w68uP+DVtfNhr1A92B+0mbTZ8FA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -620,7 +599,6 @@
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.6.tgz",
"integrity": "sha512-/mKVCtVpyBu3IDarv0G+59KC4stsD5mDsGpYh+GKs1NZT88Jh52+cuoA1AtLk2Q0r/quNl+1cSUyLRHBFeD0XA==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=18"
@@ -1353,7 +1331,6 @@
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
"integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
- "dev": true,
"license": "MIT",
"dependencies": {
"type-fest": "^0.21.3"
@@ -1382,7 +1359,6 @@
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
- "dev": true,
"license": "MIT",
"dependencies": {
"color-convert": "^2.0.1"
@@ -1472,6 +1448,14 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/basecoat-cli": {
+ "resolved": "packages/cli",
+ "link": true
+ },
+ "node_modules/basecoat-css": {
+ "resolved": "packages/css",
+ "link": true
+ },
"node_modules/bcp-47": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.0.tgz",
@@ -1617,7 +1601,6 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
"integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==",
- "dev": true,
"license": "ISC",
"engines": {
"node": ">= 12"
@@ -1705,7 +1688,6 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
- "dev": true,
"license": "MIT",
"dependencies": {
"color-name": "~1.1.4"
@@ -1718,14 +1700,12 @@
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
- "dev": true,
"license": "MIT"
},
"node_modules/commander": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz",
"integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=18"
@@ -2061,7 +2041,6 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
"integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
- "dev": true,
"license": "MIT",
"dependencies": {
"chardet": "^0.7.0",
@@ -2076,7 +2055,6 @@
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
- "dev": true,
"license": "MIT"
},
"node_modules/fast-glob": {
@@ -2196,7 +2174,6 @@
"version": "11.3.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
"integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==",
- "dev": true,
"license": "MIT",
"dependencies": {
"graceful-fs": "^4.2.0",
@@ -2296,7 +2273,6 @@
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
- "dev": true,
"license": "ISC"
},
"node_modules/gray-matter": {
@@ -2413,7 +2389,6 @@
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
- "dev": true,
"license": "MIT",
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3"
@@ -2433,7 +2408,6 @@
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-12.6.0.tgz",
"integrity": "sha512-3zmmccQd/8o65nPOZJZ+2wqt76Ghw3+LaMrmc6JE/IzcvQhJ1st+QLCOo/iLS85/tILU0myG31a2TAZX0ysAvg==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@inquirer/core": "^10.1.10",
@@ -2530,7 +2504,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@@ -2626,7 +2599,6 @@
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
- "dev": true,
"license": "MIT",
"dependencies": {
"universalify": "^2.0.0"
@@ -3191,7 +3163,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-2.0.0.tgz",
"integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==",
- "dev": true,
"license": "ISC",
"engines": {
"node": "^18.17.0 || >=20.5.0"
@@ -3279,7 +3250,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@@ -3557,7 +3527,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/run-async/-/run-async-3.0.0.tgz",
"integrity": "sha512-540WwVDOMxA6dN6We19EcT9sc3hkXPw5mzRNGM3FkdN/vtE9NFvj5lFAPNwUDmJjXidm3v7TC1cTE7t17Ulm1Q==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=0.12.0"
@@ -3591,7 +3560,6 @@
"version": "7.8.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
- "dev": true,
"license": "Apache-2.0",
"dependencies": {
"tslib": "^2.1.0"
@@ -3601,7 +3569,6 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
- "dev": true,
"license": "MIT"
},
"node_modules/section-matter": {
@@ -3708,7 +3675,6 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
- "dev": true,
"license": "ISC",
"engines": {
"node": ">=14"
@@ -3918,7 +3884,6 @@
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
"integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
- "dev": true,
"license": "MIT",
"dependencies": {
"os-tmpdir": "~1.0.2"
@@ -3964,14 +3929,12 @@
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
- "dev": true,
"license": "0BSD"
},
"node_modules/type-fest": {
"version": "0.21.3",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
"integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
- "dev": true,
"license": "(MIT OR CC0-1.0)",
"engines": {
"node": ">=10"
@@ -3991,7 +3954,6 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">= 10.0.0"
@@ -4235,7 +4197,6 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz",
"integrity": "sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=18"
@@ -4243,6 +4204,24 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
+ },
+ "packages/cli": {
+ "name": "basecoat-cli",
+ "version": "0.1.0",
+ "license": "MIT",
+ "dependencies": {
+ "commander": "^13.1.0",
+ "fs-extra": "^11.3.0",
+ "inquirer": "^12.6.0"
+ },
+ "bin": {
+ "basecoat-cli": "dist/index.js"
+ }
+ },
+ "packages/css": {
+ "name": "basecoat-css",
+ "version": "0.1.0",
+ "license": "MIT"
}
}
}
diff --git a/package.json b/package.json
index a30855d..8b88dd9 100644
--- a/package.json
+++ b/package.json
@@ -2,19 +2,20 @@
"name": "basecoat",
"version": "0.1.0",
"description": "shadcn/ui for the rest of us",
+ "author": "hunvreus",
"type": "module",
+ "private": true,
+ "workspaces": [
+ "packages/*"
+ ],
"files": [
- "css",
- "js",
- "nunjucks",
- "jinja",
- "cli"
+ "src/css",
+ "src/js",
+ "src/nunjucks",
+ "src/jinja"
],
- "bin": {
- "basecoat": "./cli/index.js"
- },
"exports": {
- ".": "./css/basecoat.css"
+ ".": "./src/css/basecoat.css"
},
"keywords": [
"components",
@@ -42,19 +43,17 @@
},
"homepage": "https://github.com/hunvreus/basecoat#readme",
"scripts": {
- "css:dev": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --watch",
- "eleventy:serve": "eleventy --serve",
- "dev": "concurrently \"npm:css:dev\" \"npm:eleventy:serve\"",
- "build": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --minify && eleventy"
+ "build": "node ./scripts/build.js",
+ "docs:build": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --minify && eleventy",
+ "docs:dev:css": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --watch",
+ "docs:dev:eleventy": "ELEVENTY_ENV=prod eleventy --serve",
+ "docs:dev": "concurrently \"npm:docs:dev:css\" \"npm:docs:dev:eleventy\""
},
"devDependencies": {
"@11ty/eleventy": "^3.0.0",
"@grimlink/eleventy-plugin-lucide-icons": "^2.1.4",
"@tailwindcss/cli": "^4.1.3",
- "commander": "^13.1.0",
"concurrently": "^9.1.2",
- "fs-extra": "^11.3.0",
- "inquirer": "^12.6.0",
"prettier": "^3.5.3",
"tailwindcss": "^4.1.3"
}
diff --git a/packages/cli/README.md b/packages/cli/README.md
new file mode 100644
index 0000000..0281c8a
--- /dev/null
+++ b/packages/cli/README.md
@@ -0,0 +1,56 @@
+# basecoat-cli
+
+This package provides a Command Line Interface (CLI) to help you quickly scaffold [Basecoat](https://basecoatui.com) components into your project.
+
+## Prerequisites
+
+- Ensure you have Node.js and npm (or your preferred package manager) installed.
+- For the components to function correctly, your project should have:
+ - [Tailwind CSS](https://tailwindcss.com/docs/installation) installed and configured.
+ - The `basecoat-css` package installed and imported (or `basecoat.css` manually added).
+ - [Alpine.js](https://alpinejs.dev/docs/installation) installed and initialized, as Basecoat components rely on it for interactivity.
+
+## Usage
+
+Use the `add` command to add components to your project:
+
+```bash
+# npx
+npx basecoat-cli add [component]
+
+# pnpm
+pnpm dlx basecoat-cli add [component]
+
+# bun
+bunx basecoat-cli add [component]
+
+# yarn
+yarn dlx basecoat-cli add [component]
+```
+
+Replace `[component]` with the name of the component you wish to add (e.g., `dialog`, `select`) or leave it out if you want to pick from the list of available components
+or install all of them at once.
+
+The CLI will prompt you for:
+
+1. **Template Engine:** Choose between Nunjucks (`.njk`) or Jinja (`.html.jinja`).
+2. **Assets Directory:** The path where component assets (like JavaScript files) should be placed (e.g., `src/assets/js/components`).
+3. **Macros Directory:** The path where component macros should be placed (e.g., `src/_includes/macros/components`).
+
+The CLI will then copy the necessary JavaScript files and Nunjucks/Jinja macros for the selected component into the specified directories.
+
+### Example
+
+To add the `dialog` component:
+
+```bash
+npx basecoat-cli add dialog
+```
+
+## Documentation
+
+For more detailed information on components, their usage, and customization options, please refer to the [Basecoat documentation](https://basecoatui.com/installation/#install-cli).
+
+## License
+
+[MIT](https://github.com/hunvreus/basecoat/blob/main/LICENSE.md)
\ No newline at end of file
diff --git a/packages/cli/index.js b/packages/cli/index.js
new file mode 100755
index 0000000..9f5a9a3
--- /dev/null
+++ b/packages/cli/index.js
@@ -0,0 +1,193 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import inquirer from 'inquirer';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const program = new Command();
+
+// Attempt to read version from the CLI's own package.json
+let packageVersion = 'unknown';
+try {
+ const cliScriptRunningDir = path.dirname(fileURLToPath(import.meta.url)); // .../packages/cli/dist
+ const cliPackageRootDir = path.resolve(cliScriptRunningDir, '..'); // .../packages/cli
+ const packageJsonPath = path.join(cliPackageRootDir, 'package.json');
+ const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8');
+ packageVersion = JSON.parse(packageJsonContent).version;
+} catch (error) {
+ console.warn('Could not read CLI package version:', error.message);
+}
+
+const DEFAULT_CONFIG = {
+ templateEngine: null,
+ templateDest: './components/basecoat',
+ scriptDest: './static/js/basecoat'
+};
+let config = { ...DEFAULT_CONFIG }; // User-specific config, potentially updated by prompts
+
+// Discovers available components from the CLI's bundled assets.
+async function getAvailableComponents() {
+ try {
+ const cliScriptRunningDir = path.dirname(fileURLToPath(import.meta.url));
+ const assetsDir = path.resolve(cliScriptRunningDir, 'assets');
+ const jsSourceDir = path.join(assetsDir, 'js');
+
+ const jsFiles = await fs.readdir(jsSourceDir);
+
+ return jsFiles
+ .filter(file => file.endsWith('.js'))
+ .map(file => path.basename(file, '.js'));
+ } catch (error) {
+ console.error("Error reading component source directories from CLI assets:", error);
+ return [];
+ }
+}
+
+// Ensures necessary configuration (template engine, destination paths) is set, prompting the user if needed.
+async function ensureConfiguration() {
+ if (!config.templateEngine) {
+ const engineChoice = await inquirer.prompt([
+ {
+ type: 'list',
+ name: 'engine',
+ message: 'Which template engine are you using?',
+ choices: ['nunjucks', 'jinja'],
+ }
+ ]);
+ config.templateEngine = engineChoice.engine;
+ }
+
+ const pathPrompts = [];
+ if (!config.templateDest || config.templateDest === DEFAULT_CONFIG.templateDest) {
+ pathPrompts.push({
+ type: 'input',
+ name: 'templateDest',
+ message: 'Where should template files be placed?',
+ default: DEFAULT_CONFIG.templateDest,
+ });
+ }
+ if (!config.scriptDest || config.scriptDest === DEFAULT_CONFIG.scriptDest) {
+ pathPrompts.push({
+ type: 'input',
+ name: 'scriptDest',
+ message: 'Where should script files be placed?',
+ default: DEFAULT_CONFIG.scriptDest,
+ });
+ }
+
+ if (pathPrompts.length > 0) {
+ const pathChoices = await inquirer.prompt(pathPrompts);
+ if (pathChoices.templateDest) config.templateDest = pathChoices.templateDest;
+ if (pathChoices.scriptDest) config.scriptDest = pathChoices.scriptDest;
+ }
+}
+
+// Copies a component's template and script files to the user's project.
+async function addComponent(componentName) {
+ console.log(`\nProcessing component: ${componentName}...`);
+
+ const cliScriptRunningDir = path.dirname(fileURLToPath(import.meta.url));
+ const assetsDir = path.resolve(cliScriptRunningDir, 'assets');
+ const templateExt = config.templateEngine === 'jinja' ? '.html.jinja' : '.njk';
+
+ const templateSource = path.join(assetsDir, config.templateEngine, `${componentName}${templateExt}`);
+ const scriptSource = path.join(assetsDir, 'js', `${componentName}.js`);
+
+ const templateDestPath = path.resolve(process.cwd(), config.templateDest, `${componentName}${templateExt}`);
+ const scriptDestPath = path.resolve(process.cwd(), config.scriptDest, `${componentName}.js`);
+
+ try {
+ const templateExists = await fs.pathExists(templateSource);
+ const scriptExists = await fs.pathExists(scriptSource);
+
+ if (!templateExists) {
+ console.error(` Error: Template file for component '${componentName}' not found in CLI assets. Searched: ${templateSource}`);
+ // Optionally, list available template engines or files for that component if helpful
+ }
+ if (!scriptExists) {
+ console.error(` Error: Script file for component '${componentName}' not found in CLI assets. Searched: ${scriptSource}`);
+}
+ if (!templateExists || !scriptExists) return; // Skip this component if sources are missing
+
+ await fs.ensureDir(path.dirname(templateDestPath));
+ await fs.ensureDir(path.dirname(scriptDestPath));
+
+ await fs.copyFile(templateSource, templateDestPath);
+ console.log(` -> Copied template to: ${templateDestPath}`);
+ await fs.copyFile(scriptSource, scriptDestPath);
+ console.log(` -> Copied script to: ${scriptDestPath}`);
+
+ } catch (error) {
+ console.error(` Error processing component ${componentName}:`, error);
+ }
+}
+
+// Setup main CLI program
+program
+ .name('basecoat-cli')
+ .description('Add Basecoat components to your project')
+ .version(packageVersion);
+
+// Define the 'add' command
+program
+ .command('add')
+ .description('Add one or more Basecoat components to your project')
+ .argument('[components...]', 'Names of components to add (e.g., dialog select)')
+ .action(async (componentsArg) => {
+ let componentsToAdd = []; // Initialize as an empty array
+ try {
+ if (!componentsArg || componentsArg.length === 0) {
+ const availableComponents = await getAvailableComponents();
+ if (availableComponents.length === 0) {
+ console.error('Error: No components available in the CLI. Build might be corrupted.');
+ return;
+ }
+
+ const allComponentsChoice = 'All components';
+ const choices = [allComponentsChoice, ...availableComponents];
+
+ const answers = await inquirer.prompt([
+ {
+ type: 'list', // Changed from checkbox to list
+ name: 'selectedComponent', // Changed name for clarity
+ message: 'Which component(s) would you like to add?',
+ choices: choices,
+ }
+ ]);
+
+ if (answers.selectedComponent === allComponentsChoice) {
+ componentsToAdd = availableComponents; // Add all
+ } else {
+ componentsToAdd = [answers.selectedComponent]; // Add the single selected one
+ }
+ } else {
+ // If components were provided as arguments, use them directly
+ // (This part of the logic remains, ensuring componentsArg is an array)
+ componentsToAdd = Array.isArray(componentsArg) ? componentsArg : [componentsArg];
+ }
+
+ if (!componentsToAdd || componentsToAdd.length === 0) {
+ console.log('No components selected. Exiting.');
+ return;
+ }
+
+ await ensureConfiguration(); // Confirm/gather destination paths
+
+ for (const componentName of componentsToAdd) {
+ await addComponent(componentName);
+ }
+ console.log('\nComponent addition process finished.');
+
+ } catch (error) {
+ if (error.isTtyError || error.constructor?.name === 'ExitPromptError') { // Handle inquirer cancellation
+ console.log('\nOperation cancelled by user.');
+ } else {
+ console.error('\nAn unexpected error occurred during the add command:', error);
+ }
+ process.exit(1); // Exit with error code for unexpected errors
+ }
+ });
+
+program.parse(process.argv);
\ No newline at end of file
diff --git a/packages/cli/package.json b/packages/cli/package.json
new file mode 100644
index 0000000..35f2d3c
--- /dev/null
+++ b/packages/cli/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "basecoat-cli",
+ "version": "0.1.1",
+ "description": "Add Basecoat components to your project",
+ "author": "hunvreus",
+ "license": "MIT",
+ "type": "module",
+ "bin": {
+ "basecoat-cli": "./dist/index.js"
+ },
+ "files": [
+ "dist/"
+ ],
+ "dependencies": {
+ "commander": "^13.1.0",
+ "fs-extra": "^11.3.0",
+ "inquirer": "^12.6.0"
+ },
+ "keywords": [
+ "cli",
+ "components",
+ "component library",
+ "component system",
+ "ui",
+ "ui kit",
+ "shadcn",
+ "shadcn/ui",
+ "tailwind",
+ "tailwindcss",
+ "css",
+ "html",
+ "jinja",
+ "nunjucks",
+ "alpinejs"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/hunvreus/basecoat.git",
+ "directory": "packages/cli"
+ },
+ "bugs": {
+ "url": "https://github.com/hunvreus/basecoat/issues"
+ },
+ "homepage": "https://basecoatui.com/installation#install-cli"
+}
\ No newline at end of file
diff --git a/packages/css/README.md b/packages/css/README.md
new file mode 100644
index 0000000..86da733
--- /dev/null
+++ b/packages/css/README.md
@@ -0,0 +1,54 @@
+# basecoat-css
+
+This package provides the core CSS styles for [Basecoat](https://basecoatui.com), a component library built with Tailwind CSS.
+
+## Prerequisites
+
+Your project must have [Tailwind CSS](https://tailwindcss.com/docs/installation) installed and configured, as Basecoat relies on Tailwind utility classes and theming.
+
+## Installation
+
+You can install `basecoat-css` using your preferred package manager:
+
+```bash
+# npm
+npm install basecoat-css
+
+# yarn
+yarn add basecoat-css
+
+# pnpm
+pnpm add basecoat-css
+
+# bun
+bun add basecoat-css
+```
+
+Alternatively, you can download the `basecoat.css` file directly from the [GitHub repository](https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css) (or the `dist/basecoat.css` file from this package after installation) and include it in your project.
+
+## Usage
+
+After installation, import `basecoat-css` into your main CSS file. Make sure to import it **after** Tailwind CSS and **before** any custom theme overrides.
+
+```css
+/* Your main CSS file (e.g., styles.css) */
+
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "basecoat-css"; /* Or the path to basecoat.css if manually added */
+
+/* Your custom styles or theme overrides (optional) */
+/* @import "your-theme.css"; */
+```
+
+Once imported, you can start using Basecoat's component classes in your HTML.
+
+## Documentation
+
+For more detailed information on components, their usage, and customization options, please refer to the [Basecoat documentation](https://basecoatui.com/installation/#install-css).
+
+## License
+
+[MIT](https://github.com/hunvreus/basecoat/blob/main/LICENSE.md)
\ No newline at end of file
diff --git a/packages/css/package.json b/packages/css/package.json
new file mode 100644
index 0000000..95ae017
--- /dev/null
+++ b/packages/css/package.json
@@ -0,0 +1,40 @@
+{
+ "name": "basecoat-css",
+ "version": "0.1.2",
+ "description": "Tailwind CSS for Basecoat components",
+ "author": {
+ "name": "hunvreus",
+ "url": "https://x.com/hunvreus"
+ },
+ "license": "MIT",
+ "main": "dist/basecoat.css",
+ "style": "dist/basecoat.css",
+ "files": [
+ "dist/"
+ ],
+ "keywords": [
+ "components",
+ "component library",
+ "component system",
+ "ui",
+ "ui kit",
+ "shadcn",
+ "shadcn/ui",
+ "tailwind",
+ "tailwindcss",
+ "css",
+ "html",
+ "jinja",
+ "nunjucks",
+ "alpinejs"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/hunvreus/basecoat.git",
+ "directory": "packages/css"
+ },
+ "bugs": {
+ "url": "https://github.com/hunvreus/basecoat/issues"
+ },
+ "homepage": "https://basecoatui.com/installation#install-css"
+}
\ No newline at end of file
diff --git a/scripts/build.js b/scripts/build.js
new file mode 100644
index 0000000..97c6fa5
--- /dev/null
+++ b/scripts/build.js
@@ -0,0 +1,112 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Resolve project root, assuming this script is in /scripts/
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const projectRoot = path.resolve(__dirname, '..');
+
+// Ensures a directory exists. If it doesn't, it's created recursively.
+async function ensureDir(dirPath) {
+ try {
+ await fs.access(dirPath);
+ } catch (error) {
+ if (error.code === 'ENOENT') {
+ await fs.mkdir(dirPath, { recursive: true });
+ } else {
+ throw error;
+ }
+ }
+}
+
+// Cleans a directory by removing all its contents (files and subdirectories).
+async function cleanDir(directory) {
+ try {
+ await fs.access(directory);
+ const entries = await fs.readdir(directory, { withFileTypes: true });
+ for (const entry of entries) {
+ const entryPath = path.join(directory, entry.name);
+ if (entry.isDirectory()) {
+ await fs.rm(entryPath, { recursive: true, force: true });
+ } else {
+ await fs.unlink(entryPath);
+ }
+ }
+ console.log(`Cleaned directory: ${directory}`);
+ } catch (error) {
+ if (error.code === 'ENOENT') {
+ console.log(`Directory not found, no need to clean: ${directory}`);
+ } else {
+ console.error(`Error cleaning directory ${directory}:`, error);
+ throw error;
+ }
+ }
+}
+
+// Recursively copies a directory.
+async function copyDirRecursive(src, dest) {
+ await ensureDir(dest);
+ const entries = await fs.readdir(src, { withFileTypes: true });
+ for (let entry of entries) {
+ const srcPath = path.join(src, entry.name);
+ const destPath = path.join(dest, entry.name);
+ if (entry.isDirectory()) {
+ await copyDirRecursive(srcPath, destPath);
+ } else {
+ await fs.copyFile(srcPath, destPath);
+ }
+ }
+}
+
+// Main build function to prepare packages for publishing.
+async function build() {
+ console.log('Starting build process...');
+
+ // Define all necessary paths
+ const cliPackageDir = path.join(projectRoot, 'packages', 'cli');
+ const cliDistDir = path.join(cliPackageDir, 'dist');
+ const cliDistAssetsDir = path.join(cliDistDir, 'assets');
+
+ const cssPackageDir = path.join(projectRoot, 'packages', 'css');
+ const cssDistDir = path.join(cssPackageDir, 'dist');
+
+ const srcDir = path.join(projectRoot, 'src');
+ const srcCssDir = path.join(srcDir, 'css');
+ const srcJsDir = path.join(srcDir, 'js');
+ const srcNunjucksDir = path.join(srcDir, 'nunjucks');
+ const srcJinjaDir = path.join(srcDir, 'jinja');
+
+ // Clean previous build artifacts
+ console.log('Cleaning distribution directories...');
+ await cleanDir(cliDistDir);
+ await cleanDir(cssDistDir);
+
+ // Build CLI package
+ console.log('Building CLI package...');
+ await ensureDir(cliDistDir); // Ensure base dist dir exists
+ await ensureDir(cliDistAssetsDir); // Ensure assets dir within dist exists
+
+ await fs.copyFile(path.join(cliPackageDir, 'index.js'), path.join(cliDistDir, 'index.js'));
+ console.log(`Copied CLI index.js to ${cliDistDir}`);
+
+ await copyDirRecursive(srcJsDir, path.join(cliDistAssetsDir, 'js'));
+ console.log(`Copied JS assets to ${path.join(cliDistAssetsDir, 'js')}`);
+ await copyDirRecursive(srcNunjucksDir, path.join(cliDistAssetsDir, 'nunjucks'));
+ console.log(`Copied Nunjucks assets to ${path.join(cliDistAssetsDir, 'nunjucks')}`);
+ await copyDirRecursive(srcJinjaDir, path.join(cliDistAssetsDir, 'jinja'));
+ console.log(`Copied Jinja assets to ${path.join(cliDistAssetsDir, 'jinja')}`);
+
+ // Build CSS package
+ console.log('Building CSS package...');
+ await ensureDir(cssDistDir); // Ensure dist dir exists for css package
+ await fs.copyFile(path.join(srcCssDir, 'basecoat.css'), path.join(cssDistDir, 'basecoat.css'));
+ console.log(`Copied basecoat.css to ${cssDistDir}`);
+
+ console.log('Build process finished successfully!');
+}
+
+build().catch(error => {
+ console.error('Build failed:', error);
+ process.exit(1);
+});
diff --git a/src/css/basecoat.css b/src/css/basecoat.css
index f9f6099..8390957 100644
--- a/src/css/basecoat.css
+++ b/src/css/basecoat.css
@@ -716,6 +716,11 @@
.select {
@apply appearance-none border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9;
@apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.75rem] bg-size-[1rem];
+
+ option,
+ optgroup {
+ @apply bg-popover text-popover-foreground;
+ }
}
}
diff --git a/src/jinja/dropdown-menu.html.jinja b/src/jinja/dropdown-menu.html.jinja
index cdaa0bf..fc16e12 100644
--- a/src/jinja/dropdown-menu.html.jinja
+++ b/src/jinja/dropdown-menu.html.jinja
@@ -3,6 +3,7 @@
@param id {string} [optional] - Unique identifier for the dropdown component.
@param trigger {string} [optional] - HTML content for the button that triggers the dropdown.
+ @param menu {array} [optional] - Array of menu items for the dropdown.
@param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
@param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
@param content_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
@@ -10,6 +11,7 @@
{% macro dropdown_menu(
id=None,
trigger=None,
+ menu=None,
main_attrs={},
trigger_attrs={},
content_attrs={}
@@ -19,8 +21,8 @@
x-data="dropdownMenu"
@click.away="open = false"
{% if id %}id="{{ id }}"{% endif %}
- {% for key, value in main_attrs.items() %}
- {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+ {% for key, value in main_attrs %}
+ {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
{% if trigger %}
@@ -33,7 +35,7 @@
id="{{ id }}-trigger"
aria-controls="{{ id }}-menu"
{% endif %}
- {% for key, value in trigger_attrs.items() %}
+ {% for key, value in trigger_attrs %}
{{ key }}="{{ value }}"
{% endfor %}
>
@@ -45,13 +47,67 @@
aria-hidden="true"
x-bind="$content"
{% if id %}id="{{ id }}-menu"{% endif %}
- {% for key, value in content_attrs.items() %}
+ {% for key, value in content_attrs %}
{{ key }}="{{ value }}"
{% endfor %}
>
+
+ {% elif item.type == "separator" %}
+ {{ item.label }}
+ {{ render_dropdown_items(item.items, item_id) if item.items }}
+ + {% elif item.type == "item" or not item.type %} + {% if item.url %} + + {{ item.label | safe }} + + {% else %} + + {% endif %} + {% endif %} + {% endfor %} {% endmacro %} \ No newline at end of file diff --git a/src/jinja/select.html.jinja b/src/jinja/select.html.jinja index 72b2e5e..e58aa47 100644 --- a/src/jinja/select.html.jinja +++ b/src/jinja/select.html.jinja @@ -10,12 +10,13 @@ @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div. @param input_attrs {object} [optional] - Additional HTML attributes for the hidden input. @param search_placeholder {string} [optional] [default="Search entries..."] - Placeholder text for the search input (combobox only). - @param is_combobox {boolean} [optional] [default=False] - Renders a combobox with search functionality if true. + @param is_combobox {boolean} [optional] [default=False] - Renders a combobox with search functionality if True. #} {% macro select( id=None, selected=None, name=None, + items=None, main_attrs={}, trigger_attrs={}, content_attrs={}, @@ -91,7 +92,11 @@ {{ key }}="{{ value }}" {% endfor %} > - {{ caller() if caller }} + {% if items %} + {{ render_select_items(items, id ~ "-items" if id else "items") }} + {% else %} + {{ caller() if caller }} + {% endif %}
+
+ {% elif item.type == "separator" %}
+ {{ item.label }}
+ {{ render_select_items(item.items, item_id) if item.items }}
+ + {% elif item.type == "item" or not item.type %} +
+ {{ item.label | safe }}
+
+ {% endif %}
+ {% endfor %}
{% endmacro %}
\ No newline at end of file
diff --git a/src/jinja/sidebar.html.jinja b/src/jinja/sidebar.html.jinja
new file mode 100644
index 0000000..f6f12bd
--- /dev/null
+++ b/src/jinja/sidebar.html.jinja
@@ -0,0 +1,138 @@
+{#
+ Renders a sidebar component.
+
+ @param id {string} [optional] - Unique identifier for the sidebar component.
+ @param label {string} [optional] [default="Sidebar navigation"] - Label for the sidebar navigation.
+ @param open {boolean} [optional] [default=True] - Whether the sidebar is open.
+ @param side {string} [optional] - Side of the sidebar to display.
+ @param header {string} [optional] - Header content for the sidebar.
+ @param footer {string} [optional] - Footer content for the sidebar.
+ @param menu {array} [optional] - Array of menu items for the sidebar.
+#}
+{% macro sidebar(
+ id=None,
+ label="Sidebar navigation",
+ open=True,
+ side=None,
+ header=None,
+ footer=None,
+ menu=None,
+ main_attrs={},
+ header_attrs={},
+ content_attrs={},
+ footer_attrs={},
+ content_wrapper_attrs=None
+) %}
+
+{% endmacro %}
+
+{#
+ Renders sidebar content recursively (groups, items, submenus, separators).
+
+ @param items {array} - The array of items to render.
+ @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
+#}
+{% macro render_sidebar_content(items, parent_id_prefix="content") %}
+ {% for item in items.items() %}
+ {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
+
+ {% if item.type == "group" %}
+ {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
+
+ {% if item.label %}
+
+ {% elif item.type == "separator" %}
+ {{ item.label }}
+ {% endif %} +-
+ {{ render_sidebar_content(item.items, item_id) if item.items }}
+
+ {% elif item.type == "submenu" %} +
+
+{% endmacro %}
+
+{% set toast_icons = {
+ 'success': '',
+ 'error': '',
+ 'info': '',
+ 'warning': ''
+} %}
\ No newline at end of file
diff --git a/src/js/toast.js b/src/js/toast.js
index a66bebe..672dafa 100644
--- a/src/js/toast.js
+++ b/src/js/toast.js
@@ -10,8 +10,10 @@ window.basecoat.registerToast = function(Alpine) {
timeoutId: null,
init() {
- this.timeoutDuration = config.duration || (config.category === 'error' ? 5000 : 3000);
- this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+ if (config.duration !== -1) {
+ this.timeoutDuration = config.duration || (config.category === 'error' ? 5000 : 3000);
+ this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
+ }
this.open = true;
this.$watch('$store.toaster.isPaused', (isPaused) => {
if (!this.open) return;
+
+
+ {% if category in ["error", "success", "info", "warning"] %}
+ {{ toast_icons[category] | safe }}
+ {% endif %}
+
+ {% if title %}
+
+ {% if action or cancel %}
+
+ {% endif %}
+
+ {{ title }}
+ {% endif %} + {% if description %} +{{ description }}
+ {% endif %} +