@brightspot/ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/tailwind-plugin-icon.js

@@ -1,6 +1,8 @@
 import plugin from 'tailwindcss/plugin';
 import icons from 'lucide-static/font/info.json';
 import * as LucideExports from 'lucide-static/dist/cjs/lucide-static';
+import { pascalToKebab } from './util/string';
+import { addNameSpaceXML, encodeSVG } from './util/svg';
 /**
  * Lucide Icons | https://lucide.dev/icons/
  * Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
@@ -39,31 +41,7 @@ for (const [key, value] of Object.entries(LucideExports)) {
         }
     }
 }
-function addNameSpace(data) {
-    if (data.indexOf(`http://www.w3.org/2000/svg`) < 0) {
-        data = data.replace(/<svg/g, `<svg xmlns='http://www.w3.org/2000/svg'`);
-    }
-    return data;
-}
-function pascalToKebab(str) {
-    return str
-        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-        .replace(/([A-Za-z])([0-9])/g, '$1-$2')
-        .toLowerCase();
-}
-function kebabToPascal(str) {
-    return str
-        .split('-')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join('');
-}
-function encodeSVG(data) {
-    data = data.replace(/"/g, `'`);
-    data = data.replace(/>\s{1,}</g, `><`);
-    data = data.replace(/\s{2,}/g, ` `);
-    return data.replace(symbols, encodeURIComponent);
-}
-module.exports = plugin(function ({ addBase, addComponents, matchUtilities, theme }) {
+module.exports = plugin(function ({ addComponents, matchUtilities, theme }) {
     const size = 'var(--Icon-size)';
     const prefix = '.btu-icon-';
     Object.entries(svgs).forEach(([key, svg]) => {
@@ -76,7 +54,7 @@ module.exports = plugin(function ({ addBase, addComponents, matchUtilities, them
             },
             [`${prefix}via-mask-${pascalToKebab(key)}`]: {
                 '--size': '20px',
-                '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svg))}")`,
+                '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
                 mask: 'var(--Icon-svg) center / contain no-repeat',
                 'aspect-ratio': '1',
                 'inline-size': 'var(--Icon-size, --size)',
@@ -126,113 +104,6 @@ module.exports = plugin(function ({ addBase, addComponents, matchUtilities, them
             '--Icon-size': value,
         }),
     }, { values: theme('iconSize') });
-    // Compat v4 Icons:
-    // Icon names which are Google Material icons mapped to a lucide equivalent to support the legacy markup.
-    const compatNames = new Map();
-    compatNames.set('arrow_downward', 'arrow-down');
-    compatNames.set('arrow_upward', 'arrow-up');
-    compatNames.set('assessment', 'file-chart-pie');
-    compatNames.set('assignment', 'clipboard-check');
-    compatNames.set('attachment', 'file');
-    compatNames.set('auto_stories', 'book');
-    compatNames.set('ballot', 'shield-question');
-    compatNames.set('border_all', 'table-2');
-    compatNames.set('cancel', 'circle-x');
-    compatNames.set('chat_bubble', 'message-circle');
-    compatNames.set('check_circle', 'circle-check-big');
-    compatNames.set('chrome_reader_mode', 'table-properties');
-    compatNames.set('class', 'book-type');
-    compatNames.set('close', 'x');
-    compatNames.set('code', 'code');
-    compatNames.set('comment', 'message-circle-plus');
-    compatNames.set('comments_disabled', 'message-circle-x');
-    compatNames.set('create_new_folder', 'boxes');
-    compatNames.set('description', 'file-text');
-    compatNames.set('edit', 'pencil');
-    compatNames.set('error', 'circle-alert');
-    compatNames.set('expand_more', 'chevrons-up-down');
-    compatNames.set('expand_less', 'chevrons-down-up');
-    compatNames.set('feed', 'scroll-text');
-    compatNames.set('format_align_center', 'align-center');
-    compatNames.set('format_align_left', 'align-left');
-    compatNames.set('format_align_right', 'align-right');
-    compatNames.set('format_bold', 'bold');
-    compatNames.set('format_clear', 'remove-formatting');
-    compatNames.set('format_indent_increase', 'indent-increase');
-    compatNames.set('format_indent_decrease', 'indent-decrease');
-    compatNames.set('format_italic', 'italic');
-    compatNames.set('format_list_bulleted', 'list');
-    compatNames.set('format_list_numbered', 'badge-help');
-    compatNames.set('format_quote', 'quote');
-    compatNames.set('format_strikethrough', 'strikethrough');
-    compatNames.set('format_underlined', 'underline');
-    compatNames.set('fullscreen', 'maximize-2');
-    compatNames.set('grid_on', 'file-spreadsheet');
-    compatNames.set('handshake', 'handshake');
-    compatNames.set('help', 'circle-help');
-    compatNames.set('history', 'history');
-    compatNames.set('home', 'house');
-    compatNames.set('import_contacts', 'book');
-    compatNames.set('insert_photo', 'file-image');
-    compatNames.set('keyboard', 'keyboard');
-    compatNames.set('link', 'link-2');
-    compatNames.set('link_off', 'link-2-off');
-    compatNames.set('live_tv', 'tv-minimal-play');
-    compatNames.set('local_offer', 'tag');
-    compatNames.set('manage_search', 'text-search');
-    compatNames.set('menu_book', 'book-marked');
-    compatNames.set('more_horiz', 'ellipsis');
-    compatNames.set('music_note', 'music-2');
-    compatNames.set('notes', 'notebook-text');
-    compatNames.set('ondemand_video', 'video');
-    compatNames.set('open_with', 'move');
-    compatNames.set('person', 'user-pen');
-    compatNames.set('photo', 'file-image');
-    compatNames.set('photo_camera', 'camera');
-    compatNames.set('photo_library', 'images');
-    compatNames.set('picture', 'image-up');
-    compatNames.set('play', 'square-play');
-    compatNames.set('playlist_play', 'list-video');
-    compatNames.set('post_add', 'clipboard-plus');
-    compatNames.set('question_answer', 'pencil-line');
-    compatNames.set('rate_review', 'square-pen');
-    compatNames.set('redo', 'redo');
-    compatNames.set('remove', 'minus');
-    compatNames.set('school', 'badge-info');
-    compatNames.set('search', 'search');
-    compatNames.set('settings_ethernet', 'chevrons-left-right-ellipsis');
-    compatNames.set('short_text', 'text');
-    compatNames.set('slideshow', 'film');
-    compatNames.set('slow_motion_video', 'list-video');
-    compatNames.set('subject', 'letter-text');
-    compatNames.set('textsms', 'message-circle-more');
-    compatNames.set('theaters', 'clapperboard');
-    compatNames.set('toc', 'notebook-tabs');
-    compatNames.set('toggle_off', 'toggle-left');
-    compatNames.set('toggle_on', 'toggle-right');
-    compatNames.set('undo', 'undo');
-    compatNames.set('vertical_align_bottom', 'subscript');
-    compatNames.set('vertical_align_top', 'superscript');
-    compatNames.set('view_compact', 'layout-panel-top');
-    compatNames.set('volume_up', 'volume-2');
-    compatNames.set('warning', 'triangle-alert');
-    compatNames.set('wb_incandescent', 'lightbulb');
-    compatNames.set('widgets', 'blocks');
-    compatNames.set('zap', 'zap');
-    compatNames.forEach((value, key) => {
-        addBase({
-            /* this is the default icon when no mapped icon is found */
-            [`[data-icon],[data-icon-name],[data-icon-button-name]`]: {
-                '--compat-icon': `'${icons['circle-dashed'].encodedCode}'`,
-                '--compat-icon-via-mask': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svgs['CircleDashed']))}")`,
-            },
-            [`html [data-icon="${key}"],html [data-icon-name="${key}"],html [data-icon-button-name="${key}"]`]: {
-                // tslint:disable-next-line
-                '--compat-icon': `'${icons[value].encodedCode}'`,
-                '--compat-icon-via-mask': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svgs[kebabToPascal(value)]))}")`,
-            },
-        });
-    });
 }, {
     theme: {
         iconSize: {

package/dist/tailwind-plugin-icon.ts

@@ -1,15 +1,10 @@
 import plugin from 'tailwindcss/plugin'
 import icons from 'lucide-static/font/info.json'
 import * as LucideExports from 'lucide-static/dist/cjs/lucide-static'
+import { pascalToKebab } from './util/string'
+import { addNameSpaceXML, encodeSVG } from './util/svg'
 declare let module: any
 
-interface LucideTypes {
-  encodedCode: string
-  prefix: string
-  className: string
-  unicode: string
-}
-
 /**
  * Lucide Icons | https://lucide.dev/icons/
  * Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
@@ -50,36 +45,8 @@ for (const [key, value] of Object.entries(LucideExports)) {
   }
 }
 
-function addNameSpace(data: string): string {
-  if (data.indexOf(`http://www.w3.org/2000/svg`) < 0) {
-    data = data.replace(/<svg/g, `<svg xmlns='http://www.w3.org/2000/svg'`)
-  }
-  return data
-}
-
-function pascalToKebab(str: string): string {
-  return str
-    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-    .replace(/([A-Za-z])([0-9])/g, '$1-$2')
-    .toLowerCase()
-}
-
-function kebabToPascal(str: string): string {
-  return str
-    .split('-')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join('')
-}
-
-function encodeSVG(data: string): string {
-  data = data.replace(/"/g, `'`)
-  data = data.replace(/>\s{1,}</g, `><`)
-  data = data.replace(/\s{2,}/g, ` `)
-  return data.replace(symbols, encodeURIComponent)
-}
-
 module.exports = plugin(
-  function ({ addBase, addComponents, matchUtilities, theme }) {
+  function ({ addComponents, matchUtilities, theme }) {
     const size = 'var(--Icon-size)'
     const prefix = '.btu-icon-'
 
@@ -93,7 +60,7 @@ module.exports = plugin(
         },
         [`${prefix}via-mask-${pascalToKebab(key)}`]: {
           '--size': '20px',
-          '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svg))}")`,
+          '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
           mask: 'var(--Icon-svg) center / contain no-repeat',
           'aspect-ratio': '1',
           'inline-size': 'var(--Icon-size, --size)',
@@ -154,116 +121,6 @@ module.exports = plugin(
       },
       { values: theme('iconSize') },
     )
-
-    // Compat v4 Icons:
-    // Icon names which are Google Material icons mapped to a lucide equivalent to support the legacy markup.
-    const compatNames = new Map()
-    compatNames.set('arrow_downward', 'arrow-down')
-    compatNames.set('arrow_upward', 'arrow-up')
-    compatNames.set('assessment', 'file-chart-pie')
-    compatNames.set('assignment', 'clipboard-check')
-    compatNames.set('attachment', 'file')
-    compatNames.set('auto_stories', 'book')
-    compatNames.set('ballot', 'shield-question')
-    compatNames.set('border_all', 'table-2')
-    compatNames.set('cancel', 'circle-x')
-    compatNames.set('chat_bubble', 'message-circle')
-    compatNames.set('check_circle', 'circle-check-big')
-    compatNames.set('chrome_reader_mode', 'table-properties')
-    compatNames.set('class', 'book-type')
-    compatNames.set('close', 'x')
-    compatNames.set('code', 'code')
-    compatNames.set('comment', 'message-circle-plus')
-    compatNames.set('comments_disabled', 'message-circle-x')
-    compatNames.set('create_new_folder', 'boxes')
-    compatNames.set('description', 'file-text')
-    compatNames.set('edit', 'pencil')
-    compatNames.set('error', 'circle-alert')
-    compatNames.set('expand_more', 'chevrons-up-down')
-    compatNames.set('expand_less', 'chevrons-down-up')
-    compatNames.set('feed', 'scroll-text')
-    compatNames.set('format_align_center', 'align-center')
-    compatNames.set('format_align_left', 'align-left')
-    compatNames.set('format_align_right', 'align-right')
-    compatNames.set('format_bold', 'bold')
-    compatNames.set('format_clear', 'remove-formatting')
-    compatNames.set('format_indent_increase', 'indent-increase')
-    compatNames.set('format_indent_decrease', 'indent-decrease')
-    compatNames.set('format_italic', 'italic')
-    compatNames.set('format_list_bulleted', 'list')
-    compatNames.set('format_list_numbered', 'badge-help')
-    compatNames.set('format_quote', 'quote')
-    compatNames.set('format_strikethrough', 'strikethrough')
-    compatNames.set('format_underlined', 'underline')
-    compatNames.set('fullscreen', 'maximize-2')
-    compatNames.set('grid_on', 'file-spreadsheet')
-    compatNames.set('handshake', 'handshake')
-    compatNames.set('help', 'circle-help')
-    compatNames.set('history', 'history')
-    compatNames.set('home', 'house')
-    compatNames.set('import_contacts', 'book')
-    compatNames.set('insert_photo', 'file-image')
-    compatNames.set('keyboard', 'keyboard')
-    compatNames.set('link', 'link-2')
-    compatNames.set('link_off', 'link-2-off')
-    compatNames.set('live_tv', 'tv-minimal-play')
-    compatNames.set('local_offer', 'tag')
-    compatNames.set('manage_search', 'text-search')
-    compatNames.set('menu_book', 'book-marked')
-    compatNames.set('more_horiz', 'ellipsis')
-    compatNames.set('music_note', 'music-2')
-    compatNames.set('notes', 'notebook-text')
-    compatNames.set('ondemand_video', 'video')
-    compatNames.set('open_with', 'move')
-    compatNames.set('person', 'user-pen')
-    compatNames.set('photo', 'file-image')
-    compatNames.set('photo_camera', 'camera')
-    compatNames.set('photo_library', 'images')
-    compatNames.set('picture', 'image-up')
-    compatNames.set('play', 'square-play')
-    compatNames.set('playlist_play', 'list-video')
-    compatNames.set('post_add', 'clipboard-plus')
-    compatNames.set('question_answer', 'pencil-line')
-    compatNames.set('rate_review', 'square-pen')
-    compatNames.set('redo', 'redo')
-    compatNames.set('remove', 'minus')
-    compatNames.set('school', 'badge-info')
-    compatNames.set('search', 'search')
-    compatNames.set('settings_ethernet', 'chevrons-left-right-ellipsis')
-    compatNames.set('short_text', 'text')
-    compatNames.set('slideshow', 'film')
-    compatNames.set('slow_motion_video', 'list-video')
-    compatNames.set('subject', 'letter-text')
-    compatNames.set('textsms', 'message-circle-more')
-    compatNames.set('theaters', 'clapperboard')
-    compatNames.set('toc', 'notebook-tabs')
-    compatNames.set('toggle_off', 'toggle-left')
-    compatNames.set('toggle_on', 'toggle-right')
-    compatNames.set('undo', 'undo')
-    compatNames.set('vertical_align_bottom', 'subscript')
-    compatNames.set('vertical_align_top', 'superscript')
-    compatNames.set('view_compact', 'layout-panel-top')
-    compatNames.set('volume_up', 'volume-2')
-    compatNames.set('warning', 'triangle-alert')
-    compatNames.set('wb_incandescent', 'lightbulb')
-    compatNames.set('widgets', 'blocks')
-    compatNames.set('zap', 'zap')
-
-    compatNames.forEach((value: string, key) => {
-      addBase({
-        /* this is the default icon when no mapped icon is found */
-        [`[data-icon],[data-icon-name],[data-icon-button-name]`]: {
-          '--compat-icon': `'${icons['circle-dashed'].encodedCode}'`,
-          '--compat-icon-via-mask': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svgs['CircleDashed']))}")`,
-        },
-        [`html [data-icon="${key}"],html [data-icon-name="${key}"],html [data-icon-button-name="${key}"]`]:
-          {
-            // tslint:disable-next-line
-            '--compat-icon': `'${(icons as Record<string, LucideTypes>)[value].encodedCode}'`,
-            '--compat-icon-via-mask': `url("data:image/svg+xml,${encodeSVG(addNameSpace(svgs[kebabToPascal(value)]))}")`,
-          },
-      })
-    })
   },
   {
     theme: {

package/dist/tailwind.config.js

@@ -1,4 +1,5 @@
 import defaultTheme from 'tailwindcss/defaultTheme';
+import plugin from 'tailwindcss/plugin';
 /* All tailwind configuration options can be found at: https://tailwindcss.com/docs/configuration */
 export default {
     /* extending the TWCSS dark variant since we also use a root-classname of "is-dark" to enable dark mode */
@@ -563,5 +564,9 @@ export default {
             starFilled: 'polygon(54.55% 9.09%,68.59% 37.55%,100% 42.14%,77.27% 64.27%,82.64% 95.55%,54.55% 80.77%,26.45% 95.55%,31.82% 64.27%,9.09% 42.14%,40.5% 37.55%,54.55% 9.09%)',
         },
     },
-    plugins: [],
+    plugins: [
+        plugin(({ addVariant }) => {
+            addVariant('touch-device', '@media (hover: none) or (pointer: coarse)');
+        }),
+    ],
 };

package/dist/tailwind.config.ts

@@ -1,5 +1,6 @@
 import type { Config } from 'tailwindcss'
 import defaultTheme from 'tailwindcss/defaultTheme'
+import plugin from 'tailwindcss/plugin'
 
 /* All tailwind configuration options can be found at: https://tailwindcss.com/docs/configuration */
 export default {
@@ -578,5 +579,9 @@ export default {
         'polygon(54.55% 9.09%,68.59% 37.55%,100% 42.14%,77.27% 64.27%,82.64% 95.55%,54.55% 80.77%,26.45% 95.55%,31.82% 64.27%,9.09% 42.14%,40.5% 37.55%,54.55% 9.09%)',
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(({ addVariant }) => {
+      addVariant('touch-device', '@media (hover: none) or (pointer: coarse)')
+    }),
+  ],
 } satisfies Config

package/dist/util/string.js

@@ -0,0 +1,14 @@
+// Given "WaterBalloon", returns "water-balloon"
+export function pascalToKebab(str) {
+    return str
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Za-z])([0-9])/g, '$1-$2')
+        .toLowerCase();
+}
+// Given "water-balloon", returns "WaterBalloon"
+export function kebabToPascal(str) {
+    return str
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+}

package/dist/util/svg.js

@@ -0,0 +1,13 @@
+const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g;
+export function addNameSpaceXML(data) {
+    if (data.indexOf(`http://www.w3.org/2000/svg`) < 0) {
+        data = data.replace(/<svg/g, `<svg xmlns='http://www.w3.org/2000/svg'`);
+    }
+    return data;
+}
+export function encodeSVG(data) {
+    data = data.replace(/"/g, `'`);
+    data = data.replace(/>\s{1,}</g, `><`);
+    data = data.replace(/\s{2,}/g, ` `);
+    return data.replace(symbols, encodeURIComponent);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
   "main": "./dist/tailwind.config.ts",