@luzmo/lucero 0.0.1 → 0.0.4

package/vite-utils/cem-plugins/plugin-mixins-and-superclass.ts

@@ -1,141 +0,0 @@
-// TO DO check if we cannot autogenerated through following the mixins & superclass in custome elements manifest in storybook
-
-const treatSizedMixin = (classDocument) => {
-  classDocument.attributes.push({
-    name: 'size',
-    type: {
-      text: "'s' | 'm' | 'l' | 'xl'",
-    },
-    default: 'm',
-    description: 'The size of the element',
-    fieldName: 'size',
-  });
-  classDocument.mixins = classDocument.mixins.filter(
-    (mixin) =>
-      !(mixin.name === 'SizedMixin' || mixin.package === '@utils/sized-mixin')
-  );
-  if (classDocument.mixins.length === 0) {
-    delete classDocument.mixins;
-  }
-};
-
-const treatLikeAnchor = (classDocument) => {
-  const attributes = [
-    [
-      'download',
-      'string',
-      'Causes the browser to treat the linked URL as a download',
-    ],
-    [
-      'label',
-      'string',
-      'An accessible label that describes the component. It will be applied to aria-label, but not visually rendered.',
-    ],
-    ['href', 'text', 'The URL that the hyperlink points to.'],
-    [
-      'target',
-      '"_blank" | "_parent" | "_self" | "_top"',
-      'Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).',
-    ],
-    [
-      'referrerpolicy',
-      '"no-referrer" |"no-referrer-when-downgrade" |"origin" |"origin-when-cross-origin" |"same-origin" |"strict-origin" |"strict-origin-when-cross-origin" |"unsafe-url" |',
-      'How much of the referrer to send when following the link.',
-    ],
-    [
-      'rel',
-      'string',
-      'The relationship of the linked URL as space-separated link types.',
-    ],
-  ];
-  attributes.forEach(([name, type, description]) => {
-    const attribute = {
-      name,
-      type: {
-        text: type,
-      },
-      description,
-      fieldName: name,
-    };
-    classDocument.attributes.push(attribute);
-  });
-  classDocument.mixins = classDocument.mixins.filter(
-    (mixin) =>
-      !(mixin.name === 'LikeAnchor' || mixin.package === '@utils/like-anchor')
-  );
-  if (classDocument.mixins.length === 0) {
-    delete classDocument.mixins;
-  }
-};
-
-const treatFocusable = (classDocument) => {
-  classDocument.attributes.push({
-    name: 'disabled',
-    type: {
-      text: 'boolean',
-    },
-    default: 'false',
-    description: 'Disable this control. It will not receive focus or events',
-    fieldName: 'disabled',
-  });
-  classDocument.attributes.push({
-    name: 'autofocus',
-    type: {
-      text: 'boolean',
-    },
-    default: 'false',
-    description: 'When this control is rendered, focus it automatically',
-    fieldName: 'autofocus',
-  });
-  classDocument.attributes.push({
-    name: 'tabIndex',
-    type: {
-      text: 'number',
-    },
-    description:
-      'The tab index to apply to this control. See general documentation about the tabindex HTML property',
-    fieldName: 'tabIndex',
-  });
-  if (classDocument.superclass) {
-    delete classDocument.superclass;
-  }
-};
-
-export const cemPluginMixinsAndSuperclass = {
-  name: 'web-components-mixins-and-superclass',
-  analyzePhase({ ts, node, moduleDoc }) {
-    switch (node.kind) {
-      case ts.SyntaxKind.ClassDeclaration: {
-        const className = node.name.getText();
-        const classDocument = moduleDoc?.declarations?.find(
-          (declaration) => declaration.name === className
-        );
-
-        if (classDocument?.mixins) {
-          const hasSizedMixin = classDocument.mixins?.some(
-            (mixin) =>
-              mixin.name === 'SizedMixin' ||
-              mixin.package === '@utils/sized-mixin'
-          );
-          if (hasSizedMixin && classDocument.attributes) {
-            treatSizedMixin(classDocument);
-          }
-          const hasLikeAnchorMixin = classDocument.mixins?.some(
-            (mixin) =>
-              mixin.name === 'LikeAnchorMixin' ||
-              mixin.package === '@utils/like-anchor'
-          );
-          if (hasLikeAnchorMixin && classDocument.attributes) {
-            treatLikeAnchor(classDocument);
-          }
-          const hasFocusableMixin =
-            classDocument.superclass?.name === 'Focusable' ||
-            classDocument.superclass?.package === '@utils/focusable';
-          if (hasFocusableMixin && classDocument.attributes) {
-            treatFocusable(classDocument);
-          }
-        }
-      }
-    }
-  },
-};

package/vite-utils/cem-plugins/plugin-private-fields-filter.ts

@@ -1,19 +0,0 @@
-export const cemPluginPrivateFieldsFilter = {
-  name: 'web-components-private-fields-filter',
-  analyzePhase({ ts, node, moduleDoc }) {
-    switch (node.kind) {
-      case ts.SyntaxKind.ClassDeclaration: {
-        const className = node.name.getText();
-        const classDocument = moduleDoc?.declarations?.find(
-          (declaration) => declaration.name === className
-        );
-
-        if (classDocument?.members) {
-          classDocument.members = classDocument.members.filter(
-            (member) => !member.privacy
-          );
-        }
-      }
-    }
-  },
-};

package/vite-utils/get-components-entries.ts

@@ -1,30 +0,0 @@
-import glob from 'fast-glob';
-export const getWebComponentEntries = () => {
-  // Always include the index entry
-  const webComponentEntries: Record<string, string> = {
-    index: './src/index.ts'
-  };
-
-  const componentFiles = glob.sync('./src/components/**/index.ts', {
-    ignore: ['./src/components/**/test/**', './src/components/**/stories/**']
-  }); // ** = also include/ignore nested folders
-
-  for (const file of componentFiles) {
-    // Extract the component path relative to components directory
-    const relativePath = file
-      .replace('./src/components/', '')
-      .replace('.ts', '');
-
-    // Check if this is a nested component or root component
-    const isNestedComponent = relativePath.replace('/index', '').includes('/');
-
-    const componentName = isNestedComponent
-      ? relativePath.split('/')[1]
-      : relativePath.replace('/index', '');
-
-    const entryKey = `${componentName}/index`;
-    webComponentEntries[entryKey] = file;
-  }
-
-  return webComponentEntries;
-};

package/vite-utils/get-license-content.ts

@@ -1,31 +0,0 @@
-import { readFileSync } from 'node:fs';
-
-const packageJson = JSON.parse(readFileSync('package.json', 'utf8'));
-export const getLicenseContent = (commentFormat: boolean) => {
-  try {
-    const licenseFile = readFileSync('LICENSE', 'utf8');
-
-    if (!commentFormat) {
-      return licenseFile;
-    }
-
-    return licenseFile
-      .split('\n')
-      .map((line) => ` * ${line}`)
-      .join('\n')
-      .trim();
-  } catch {
-    const license = [
-      `Copyright (c) ${new Date().getFullYear()}`,
-      `name: ${packageJson.name}`,
-      `version: v${packageJson.version}`,
-      `description: ${packageJson.description}`,
-      `author: ${packageJson.author}`,
-      `homepage: ${packageJson.homepage}`
-    ];
-    if (!commentFormat) {
-      return license.join('\n');
-    }
-    return `/**\n ${license.join('\n * ')} */`;
-  }
-};

package/vite-utils/get-package-json-content.ts

@@ -1,49 +0,0 @@
-import { readFileSync } from 'node:fs';
-
-const packageJson = JSON.parse(readFileSync('package.json', 'utf8'));
-export function getPackageJsonContent(
-  webComponentEntries: Record<string, string>
-) {
-  return {
-    name: packageJson.name,
-    version: packageJson.version,
-    homepage: 'https://luzmo.com',
-    description: 'Lucero - The design system for Luzmo',
-    type: 'module',
-    files: ['dist'],
-    main: './lib/index.js',
-    module: './lib/index.js',
-    types: './lib/index.d.ts',
-    exports: {
-      '.': {
-        // types: './lib/index.d.ts',
-        import: './lib/index.js',
-        require: './lib/index.cjs'
-      },
-      ...Object.fromEntries(
-        Object.keys(webComponentEntries)
-          .filter((entry) => entry !== 'index')
-          .map((entry) => [
-            `./${entry.replace('/index', '')}`,
-            {
-              // types: `./lib/${entry.replace('/index', '')}/index.d.ts`,
-              import: `./lib/${entry.replace('/index', '')}/index.js`,
-              require: `./lib/${entry.replace('/index', '')}/index.cjs`
-            }
-          ])
-      )
-    },
-    keywords: [
-      'Luzmo',
-      'design system',
-      'components',
-      'web components',
-      'lucero',
-      'analytics'
-    ],
-    author: 'Luzmo',
-    publishConfig: {
-      access: 'restricted'
-    }
-  };
-}

package/vite-utils/plugin-generate-custom-elements-manifest.ts

@@ -1,156 +0,0 @@
-import { Plugin as CemPlugin } from '@custom-elements-manifest/analyzer';
-import {
-  create,
-  litPlugin,
-  ts
-} from '@custom-elements-manifest/analyzer/src/browser-entrypoint.js';
-import glob from 'fast-glob';
-import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
-import { join } from 'node:path';
-import type { SourceFile } from 'typescript';
-import { Plugin } from 'vite';
-import { cemPluginMixinsAndSuperclass } from './cem-plugins/plugin-mixins-and-superclass';
-import { cemPluginPrivateFieldsFilter } from './cem-plugins/plugin-private-fields-filter';
-
-export interface VitePluginCustomElementsManifestOptions {
-  endpoint?: string; // '/custom-elements.json'
-  output?: string; // 'custom-elements.json'
-  files?: string[];
-  componentEntries?: string[];
-  config?: string; // 'custom-elements-manifest.config.mjs'
-  dev?: boolean;
-  plugins?: CemPlugin[];
-}
-
-export interface ConfigFileOptions {
-  globs: string[];
-  exclude: string[];
-  dev: boolean;
-  plugins: CemPlugin[];
-}
-
-export async function loadOptions({
-  endpoint = '/custom-elements.json',
-  output = 'custom-elements.json',
-  componentEntries = [],
-  config,
-  ...createManifestOptions
-}: VitePluginCustomElementsManifestOptions): Promise<VitePluginCustomElementsManifestOptions> {
-  const files = Object.entries(componentEntries)
-    .filter(([key, _]) => key !== 'index')
-    // only use component entries
-    .map(([_, value]) => `${value.replace('/index.ts', '')}/**/*.ts`);
-
-  return {
-    endpoint,
-    output,
-    dev: createManifestOptions.dev,
-    plugins: createManifestOptions.plugins,
-    files
-  };
-}
-
-function createModule(path: string) {
-  const source = readFileSync(path).toString();
-
-  return ts.createSourceFile(
-    path,
-    source,
-    ts.ScriptTarget.ES2015,
-    true
-  ) as SourceFile;
-}
-
-function createManifest(
-  paths: string[],
-  { dev = false }: { dev?: boolean } = {}
-) {
-  let files = paths.flatMap((p) => glob.sync(p, { absolute: false }));
-
-  // filter out files in the tests & stories folders & index.ts files
-  files = files.filter(
-    (path) =>
-      !path.includes('/tests/') &&
-      !path.includes('/stories/') &&
-      !path.endsWith('index.ts')
-  );
-
-  const modules = files.map(createModule);
-
-  const plugins: CemPlugin[] = [
-    ...litPlugin(),
-    cemPluginPrivateFieldsFilter,
-    cemPluginMixinsAndSuperclass
-  ];
-
-  return create({
-    modules,
-    plugins,
-    dev
-  });
-}
-
-async function PluginCustomElementsManifest(
-  options: VitePluginCustomElementsManifestOptions = {}
-): Promise<Plugin> {
-  const virtualModuleId = 'virtual:vite-plugin-cem/custom-elements-manifest';
-  const resolvedVirtualModuleId = `\0${virtualModuleId}`;
-
-  const {
-    endpoint = '/custom-elements.json',
-    output,
-    files = [],
-    ...createManifestOptions
-  } = await loadOptions(options);
-
-  return {
-    name: 'vite-plugin-custom-elements-manifest',
-
-    configureServer(server) {
-      server.middlewares.use(endpoint, async (req, res) => {
-        const manifest = createManifest(files, createManifestOptions);
-
-        res.end(JSON.stringify(manifest, null, 2));
-      });
-    },
-
-    generateBundle(this, { dir }) {
-      const path = join(dir, output);
-      const manifest = createManifest(files, createManifestOptions);
-
-      mkdirSync(dir, { recursive: true });
-      writeFileSync(path, JSON.stringify(manifest, null, 2));
-    },
-
-    resolveId(id) {
-      if (id !== virtualModuleId) {
-        return;
-      }
-
-      return resolvedVirtualModuleId;
-    },
-
-    load(id) {
-      if (id !== resolvedVirtualModuleId) {
-        return;
-      }
-
-      const manifest = createManifest(files, createManifestOptions);
-      return `export default ${JSON.stringify(manifest, null, 2)}`;
-    },
-
-    async handleHotUpdate({ server }) {
-      const mod = await server.moduleGraph.getModuleByUrl(
-        resolvedVirtualModuleId
-      );
-
-      if (!mod) {
-        return;
-      }
-
-      server.reloadModule(mod);
-    }
-  };
-}
-
-export default PluginCustomElementsManifest;

package/vite-utils/plugin-generate-file.ts

@@ -1,130 +0,0 @@
-// adapated from https://github.com/sumy7/vite-plugin-generate-file
-
-import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
-import { dirname, relative, resolve } from 'node:path';
-import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite';
-
-interface GenerateFile {
-  output?: string;
-  type?: 'json' | 'text';
-  data?: Record<string, any> | string;
-}
-
-interface NormalizeGenerateFile extends GenerateFile {
-  contentType?: 'application/json' | 'text/plain';
-  fullPath: string;
-  relativePath: string;
-}
-
-type Options = GenerateFile | GenerateFile[];
-let config: ResolvedConfig;
-let distPath: string;
-const generateFileMap = new Map<string, NormalizeGenerateFile>();
-
-function ensureDirectoryExistence(filePath: string): void {
-  const _dirname = dirname(filePath);
-  if (existsSync(_dirname)) {
-    return;
-  }
-  ensureDirectoryExistence(_dirname);
-  mkdirSync(_dirname);
-}
-
-function normalizeOption(option: GenerateFile): NormalizeGenerateFile {
-  const generateFileOption: GenerateFile = {
-    output: './output.txt',
-    type: 'json',
-    ...option
-  };
-  const fullPath = resolve(distPath, generateFileOption.output!);
-  const relativePath = `/${relative(distPath, fullPath)}`;
-  const contentType =
-    generateFileOption.output === 'json' ? 'application/json' : 'text/plain';
-  return {
-    ...generateFileOption,
-    contentType,
-    fullPath,
-    relativePath
-  };
-}
-
-function generateFile(option: NormalizeGenerateFile): void {
-  const filePath = option.fullPath;
-  const fileContent =
-    typeof option.data === 'string'
-      ? option.data
-      : JSON.stringify(option.data, null, 2);
-  ensureDirectoryExistence(filePath);
-  writeFileSync(filePath, fileContent, { flag: 'w' });
-}
-
-function configureServer(server: ViteDevServer): void {
-  server.middlewares.use((req, res, next) => {
-    const uri = new URL(req.originalUrl!, `http://${req.headers.host}`);
-    const pathname = uri.pathname;
-
-    if (generateFileMap.has(pathname)) {
-      const option = generateFileMap.get(pathname)!;
-      const content =
-        typeof option.data === 'string'
-          ? option.data
-          : JSON.stringify(option.data, null, 2);
-      res.writeHead(200, {
-        'Content-Type': option.contentType
-      });
-      res.write(content);
-      res.end();
-    } else {
-      next();
-    }
-  });
-
-  const _print = server.printUrls;
-  server.printUrls = () => {
-    let host = `${config.server.https ? 'https' : 'http'}://localhost:${
-      config.server.port || '80'
-    }`;
-
-    const url = server.resolvedUrls?.local[0];
-
-    if (url) {
-      try {
-        const u = new URL(url);
-        host = `${u.protocol}//${u.host}`;
-      } catch (error) {
-        console.warn('Parse resolved url failed:', error);
-      }
-    }
-
-    _print();
-  };
-}
-
-export function PluginGenerateFile(options: Options): Plugin {
-  return {
-    name: 'vite-generate-file',
-    configResolved(resolvedConfig) {
-      config = resolvedConfig;
-      distPath = resolve(config.root, config.build.outDir);
-
-      if (Array.isArray(options)) {
-        options.forEach((option) => {
-          const simpleOption = normalizeOption(option);
-          generateFileMap.set(simpleOption.relativePath, simpleOption);
-        });
-      } else {
-        const simpleOption = normalizeOption(options);
-        generateFileMap.set(simpleOption.relativePath, simpleOption);
-      }
-    },
-    closeBundle() {
-      if (config.command === 'serve') {
-        return;
-      }
-      for (const option of generateFileMap.values()) {
-        generateFile(option);
-      }
-    },
-    configureServer
-  };
-}

package/vite-utils/plugin-prepend-css-variables-code.ts

@@ -1,55 +0,0 @@
-import MagicString from 'magic-string';
-import fs from 'node:fs';
-import { resolve } from 'node:path';
-import * as sass from 'sass';
-import { Plugin } from 'vite';
-
-// Create the CSS variables initialization code
-let globalCSSVariables;
-const getGlobalStyles = () => {
-  if (globalCSSVariables) return globalCSSVariables;
-
-  const globalScssPath = resolve(
-    import.meta.dirname,
-    './../src/styles/global-variables.css'
-  );
-  const scssContent = fs.readFileSync(globalScssPath, 'utf8');
-  globalCSSVariables = sass.compileString(scssContent, {
-    style: 'compressed',
-    loadPaths: [resolve(import.meta.dirname, './../src/styles')]
-  }).css;
-
-  return globalCSSVariables;
-};
-
-const cssVariablesTemplate = () => `
-// Auto-generated initialization code
-const initializeGlobalLuzmoCSSVariables = () => {
-  if (typeof document !== 'undefined' && !document.querySelector('style[data-luzmo-vars]')) {
-    const styleElement = document.createElement('style');
-    styleElement.setAttribute('data-luzmo-vars', '');
-    styleElement.textContent = \`${getGlobalStyles().replaceAll('`', '\\`')}\`;
-    document.head.appendChild(styleElement);
-  }
-};
-initializeGlobalLuzmoCSSVariables();
-`;
-
-export function prependCssVariablesCode(): Plugin {
-  return {
-    name: 'prepend-css-variables-code',
-    renderChunk(code, chunk) {
-      // Only prepend the initialization code to the index entry of web component files
-      if (!chunk.fileName.endsWith('index.js')) {
-        return null;
-      }
-      const s = new MagicString(code);
-      s.prepend(cssVariablesTemplate());
-      return {
-        code: s.toString(),
-        map: s.generateMap({ hires: true })
-      };
-    },
-    apply: 'build'
-  };
-}

package/vite.config.component.ts

@@ -1,69 +0,0 @@
-import { defineConfig } from 'vite';
-import banner from 'vite-plugin-banner';
-import tsconfigPaths from 'vite-tsconfig-paths';
-import { getWebComponentEntries } from './vite-utils/get-components-entries';
-import { getLicenseContent } from './vite-utils/get-license-content';
-import { getPackageJsonContent } from './vite-utils/get-package-json-content';
-import PluginCustomElementsManifest from './vite-utils/plugin-generate-custom-elements-manifest';
-import { PluginGenerateFile } from './vite-utils/plugin-generate-file';
-import { prependCssVariablesCode } from './vite-utils/plugin-prepend-css-variables-code';
-
-export default defineConfig(({ mode }) => {
-  const webComponentEntries = getWebComponentEntries();
-  const bannerContent = getLicenseContent(true);
-  const packageJsonContent = getPackageJsonContent(webComponentEntries);
-  return {
-    define: {
-      'process.env.NODE_ENV': JSON.stringify(mode)
-    },
-    plugins: [
-      tsconfigPaths(),
-      PluginCustomElementsManifest({
-        output: './../custom-elements.json',
-        dev: mode === 'development',
-        componentEntries: Object.values(webComponentEntries),
-        files: ['src/components/**/*(!stories).ts']
-      }),
-      prependCssVariablesCode(),
-      banner(bannerContent),
-      PluginGenerateFile([
-        {
-          type: 'json',
-          output: './../package.json',
-          data: packageJsonContent
-        }
-      ]),
-      PluginGenerateFile([
-        {
-          type: 'text',
-          output: './../LICENSE',
-          data: getLicenseContent(false)
-        }
-      ])
-    ],
-    css: {
-      modules: {
-        // set to [local] so that the css class names are not changed
-        generateScopedName: '[local]'
-      }
-    },
-    build: {
-      // make sure the dist folder is set otherwise will overwrite the package.json in the root folder
-      outDir: './dist/lib',
-      // set to false in development mode so the storybook doesn't watch a suddenly empty dist folder
-      emptyOutDir: mode === 'production' ? true : false,
-      lib: {
-        entry: webComponentEntries,
-        name: 'Luzmo Design System - Lucero'
-      },
-      rollupOptions: {
-        external: ['lit', '@luzmo/icons'],
-        output: {
-          globals: {
-            lit: 'lit'
-          }
-        }
-      }
-    }
-  };
-});

package/vite.config.storybook.ts

@@ -1,6 +0,0 @@
-import { defineConfig } from 'vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
-
-export default defineConfig({
-  plugins: [tsconfigPaths()]
-});