[#44] Implement Blueprint Elements #46

joshuapease · 2024-09-24T21:09:15Z

Overview:

Implements all of the items under "Elements" in Blueprint.
Configures Vite to copy SVGs from the /src/icons/ directory
Configures Craft with a filesystem and asset volume (so we can test image related features.
Installs a standalone "Viget Parts Kit" plugin (not 100% certain where we'll go with this, but I'm enjoying breaking up the base module features.

I've left comments on most of the components

Uses `vite-plugin-static-copy` to copy SVGs from src/icons Macro inlines SVG files into page.

joshuapease · 2024-09-24T21:09:30Z

.ddev/config.yaml

@@ -32,7 +32,7 @@ web_extra_exposed_ports:
 web_extra_daemons:
  # Run vite in a separate process
  - name: 'vite'
-    command: 'npm install && npm run dev'
+    command: 'npm install && npm run build && npm run dev'


Ensures that icons are present on start.

Yeah, this works. I had been trying to work around this by either using src/public or the Vite HMR Plugin Copy plugin — this will work, but I think it won't catch additions or changes you make to that folder while working unless you ddev restart (since this is in a daemon and not a terminal tab where R would reload Vite) — right?

Ah... you know what. I got thrown off by the name.

I thought it would only copy the public directory. But it seems like you can configure it to copy any directory?

https://github.com/davidwebca/vite-plugin-hmr-public-copy?tab=readme-ov-file#copy

I was hesitant to use the public directory for icons, because on some of our more complex sites, we occasionally need to reference icons from JS.

I'll put in a ticket to look into this more deeply.

joshuapease · 2024-09-26T23:32:56Z

.env.example.dev

@@ -30,3 +30,6 @@ CRAFT_SECURITY_KEY=
 CRAFT_DEV_MODE=true
 CRAFT_ALLOW_ADMIN_CHANGES=true
 CRAFT_DISALLOW_ROBOTS=true
+
+# Asset Settings
+ASSET_FILESYSTEM=local


In the future, the env var would let you choose s3 or local depending on your environment or preference.

Future ticket for some default AWS setup

Asset and S3 configuration #15

joshuapease · 2024-09-26T23:34:03Z

config/tailwind/buttons.js

@@ -0,0 +1,107 @@
+import plugin from 'tailwindcss/plugin'


Exact copy of blueprint (only change was to make an ES Module)

joshuapease · 2024-09-26T23:34:16Z

config/tailwind/dialog.js

Exact copy of blueprint (only change was to make an ES Module)

joshuapease · 2024-09-26T23:34:56Z

tailwind.config.js

@@ -1,8 +1,47 @@
+import buttons from './config/tailwind/buttons'


Mirroring the TW config of blueprint

joshuapease · 2024-09-26T23:36:05Z

templates/_components/accordion.twig

@@ -0,0 +1,48 @@
+{# @var string|null title #}


Corresponding Blueprint Component

https://staging.blueprint.viget.com/elements/accordion/

joshuapease · 2024-09-26T23:36:44Z

templates/_components/alert-banner.twig

https://staging.blueprint.viget.com/elements/alert-banner/

Only change was to use Alpine for dismissible variant.

joshuapease · 2024-09-26T23:51:58Z

templates/_components/image.twig

Curious to hear everyone's thoughts on this.

It's using Imager X's power pack, but wraps that abstraction so if you ever change your image plugin, you don't have to rip it out everywhere.

Main goals for this component.

Minimize the amount of transform config you need to spread around your project.

Reduce the Imager X specific syntax in your project (would make it easier to switch from Imager X if needed).

Use TW screen names in your sizes props.

ppimg() is doing some interesting stuff here.

Here's some further detail on the fillTransforms setting.

{% set minWidth = 320 %} {% set maxWidth = 2200 %} {{ image ? ppimg( image: image, transform: [ minWidth, maxWidth, // [1.] Generate transforms between 320 and 2200 { ratio: ratio, }, ], params: { class: cx(class, 'w-full h-auto'), loading, fillTransforms: 'auto', // [2.] By using fillTransforms 'auto' we fill in between our min/max widths autoFillCount: 5, // [3.] Creates 5 transforms evenly spaced between our min/max widths allowUpscale: false, sizes: sizes, }, ) }}

joshuapease · 2024-09-26T23:52:42Z

templates/_components/tag.twig

https://staging.blueprint.viget.com/elements/tag/

Identical to Blueprint minus the ability to use slots.

joshuapease · 2024-09-26T23:54:20Z

templates/_components/video.twig

https://staging.blueprint.viget.com/elements/video-embed/

Identical to Blueprint

I think over time our clients would benefit from the following:

lazy load the iframe

customizable thumbnail / play button

We also might want to consider using a plugin that parses URLs to get the video ID/Embed URL.

joshuapease · 2024-09-26T23:55:43Z

templates/_macros/icon.twig

Simple wrapper around the svg function in Craft.

Inlines the SVG markup directly into the page.

Provides some icon sizing logic so you don't have to remember to pass size-xyz everywhere. Although there is the option to pass none as the size and use your own TW classes in unique scenarios.

joshuapease · 2024-09-26T23:58:52Z

vite.config.js

+    plugins: [
+      viteStaticCopy({
+        targets: [{ src: 'src/icons/**/*', dest: './assets/icons' }],
+      }),
+    ],


This is how we handle icons on MW and it works pretty well.

Open to other suggestions too. I considered putting them in the public directory. But you loose the ability to bundle SVG with your JS.

joshuapease · 2024-09-27T15:52:06Z

templates/_components/image.twig

+{% set screens = {
+  'sm': '(min-width: 640px)',
+  'md': '(min-width: 768px)',
+  'lg': '(min-width: 1024px)',
+  'xl': '(min-width: 1280px)',
+  '2xl': '(min-width: 1536px)',
+} %}


On some sites (like MW), we actually convert our TW config to JSON and then load it via PHP so we can get at these values.

But.... I'm of the impression lately that it a ton of complexity to save us 5-ish lines of code.

Do screen sizes really change all that much after a project has been started? This might be an acceptable DUPE

ten1seven

Cool!

ten1seven · 2024-09-30T13:29:49Z

templates/_components/card-icon.twig

+  {% if title or description %}
+    <div class="flex flex-col gap-8">
+      {% if title %}
+        <h2 class="text-xl font-bold">{{ title }}</h2>


This H2 should could probably be a variable. I'm also wondering if H3 is a better default if a typical page structure looks like:

H1 Page Title |- H2 My Card List |- H3 Card Title |- H3 Card Title |- H3 Card Title

Good call! I'll update in my next PR

ten1seven · 2024-09-30T13:30:24Z

templates/_components/card-image.twig

+  {% if title or description %}
+    <div class="flex flex-col gap-8">
+      {% if title %}
+        <h2 class="text-xl font-bold">{{ title }}</h2>


Same question re: heading.

joshuapease added 2 commits September 24, 2024 14:08

[#44] Adds icon macro

82acf58

Uses `vite-plugin-static-copy` to copy SVGs from src/icons Macro inlines SVG files into page.

[#44] Adds a button component

dfd45c6

joshuapease marked this pull request as draft September 24, 2024 21:09

joshuapease commented Sep 24, 2024

View reviewed changes

joshuapease added 7 commits September 24, 2024 14:32

[#44] Adds a card component

b91f06c

[#44] Install Alpine JS

4daa7e0

[#44] Adds Alert Banner Component

bf5ca7e

[#44] Adds Accordion Component

c1234fb

[#44] Adds Tag Component

54a42b1

[#44] Adds Dialog Component

476d4ac

[#44] Adds video component

e5cac4c

joshuapease changed the title ~~[#44] Base UI elements~~ [#44] Implement Blueprint Elements Sep 25, 2024

joshuapease commented Sep 26, 2024

View reviewed changes

joshuapease marked this pull request as ready for review September 27, 2024 00:02

joshuapease requested review from ten1seven, maxdmyers and maxfenton September 27, 2024 00:02

joshuapease added 5 commits September 26, 2024 17:08

[#44] Install spacecatninja/imager-x-power-pack

83f4ee0

[#44] Adds image components. Also image card component.

e490944

[#44] Install standalone Viget Parts Kit

6ed09de

[#44] Adds local filesystem and asset volume

659c795

[#44] Tweaks during code review

abde8cc

joshuapease force-pushed the jp/44-base-ui-elements branch from 4fd734d to abde8cc Compare September 27, 2024 00:08

joshuapease commented Sep 27, 2024

View reviewed changes

ten1seven approved these changes Sep 30, 2024

View reviewed changes

This was referenced Oct 3, 2024

Look in to use of Vite Public Directory HMR #49

Open

Add Default Values to Tailwind Config #18

Closed

Responsive Image Best Practices & Techniques #38

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#44] Implement Blueprint Elements #46

[#44] Implement Blueprint Elements #46

joshuapease commented Sep 24, 2024 •

edited

Loading

joshuapease Sep 24, 2024

maxfenton Sep 27, 2024

joshuapease Oct 3, 2024

joshuapease Oct 3, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 27, 2024

ten1seven left a comment

ten1seven Sep 30, 2024

joshuapease Oct 3, 2024

ten1seven Sep 30, 2024

		@@ -1,8 +1,47 @@
		import buttons from './config/tailwind/buttons'

[#44] Implement Blueprint Elements #46

Are you sure you want to change the base?

[#44] Implement Blueprint Elements #46

Conversation

joshuapease commented Sep 24, 2024 • edited Loading

Overview:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ten1seven left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joshuapease commented Sep 24, 2024 •

edited

Loading