shoelace-rails-ui 0.1.0

data/remote-src/2.0.0.beta64/shoelace-next/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@shoelace-style/shoelace",
+  "description": "A forward-thinking library of web components.",
+  "version": "2.0.0-beta.64",
+  "homepage": "https://github.com/shoelace-style/shoelace",
+  "author": "Cory LaViska",
+  "license": "MIT",
+  "main": "dist/shoelace.js",
+  "module": "dist/shoelace.js",
+  "customElements": "dist/custom-elements.json",
+  "type": "module",
+  "types": "dist/shoelace.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "web components",
+    "custom elements",
+    "components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shoelace-style/shoelace.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shoelace-style/shoelace/issues"
+  },
+  "funding": {
+    "type": "individual",
+    "url": "https://github.com/sponsors/claviska"
+  },
+  "scripts": {
+    "start": "node scripts/build.js --bundle --serve",
+    "build": "node scripts/build.js --bundle --types --copydir \"docs/dist\"",
+    "verify": "npm run spellcheck && npm run prettier:check && npm run ts-check && npm run build && npm run test",
+    "prepublishOnly": "npm run verify",
+    "prettier": "prettier --write --loglevel warn .",
+    "prettier:check": "prettier --check --loglevel warn .",
+    "ts-check": "tsc --noEmit",
+    "create": "plop --plopfile scripts/plop/plopfile.js",
+    "test": "web-test-runner \"src/**/*.test.ts\" --node-resolve --playwright --browsers chromium firefox webkit",
+    "test:watch": "web-test-runner \"src/**/*.test.ts\" --node-resolve --playwright --browsers chromium firefox webkit --watch",
+    "spellcheck": "cspell \"**/*.{js,ts,jsx,tsx,json,html,xml,css,scss,sass,md}\" --no-progress",
+    "list-outdated-dependencies": "npm-check-updates --format repo --peer",
+    "update-dependencies": "npm-check-updates --peer -u && npm install && npm run prettier && npm run verify"
+  },
+  "engines": {
+    "node": ">=14.15.0"
+  },
+  "dependencies": {
+    "@lit-labs/react": "^1.0.1",
+    "@popperjs/core": "^2.11.2",
+    "@shoelace-style/animations": "^1.1.0",
+    "@shoelace-style/localize": "^2.1.3",
+    "color": "4.1",
+    "lit": "^2.1.0",
+    "qr-creator": "^1.0.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.5.7",
+    "@open-wc/testing": "^3.0.3",
+    "@types/color": "^3.0.2",
+    "@types/react": "^17.0.38",
+    "@web/dev-server-esbuild": "^0.2.16",
+    "@web/test-runner": "^0.13.23",
+    "@web/test-runner-playwright": "^0.8.8",
+    "bootstrap-icons": "^1.7.2",
+    "browser-sync": "^2.27.7",
+    "chalk": "^5.0.0",
+    "command-line-args": "^5.2.0",
+    "comment-parser": "^1.3.0",
+    "cspell": "^5.14.0",
+    "del": "^6.0.0",
+    "download": "^8.0.0",
+    "esbuild": "^0.14.10",
+    "front-matter": "^4.0.2",
+    "get-port": "^6.0.0",
+    "globby": "^12.0.2",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.1.5",
+    "lunr": "^2.3.9",
+    "npm-check-updates": "^12.1.0",
+    "pascal-case": "^3.1.2",
+    "plop": "^3.0.5",
+    "prettier": "^2.5.1",
+    "react": "^17.0.2",
+    "recursive-copy": "^2.0.13",
+    "sinon": "^12.0.1",
+    "strip-css-comments": "^5.0.0",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.4"
+  }
+}

data/remote-src/2.0.0.beta64/shoelace-next/prettier.config.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSpacing: true,
+  htmlWhitespaceSensitivity: 'css',
+  insertPragma: false,
+  bracketSameLine: false,
+  jsxSingleQuote: false,
+  printWidth: 120,
+  proseWrap: 'preserve',
+  quoteProps: 'as-needed',
+  requirePragma: false,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'none',
+  useTabs: false
+};

data/remote-src/2.0.0.beta64/shoelace-next/scripts/build.js

@@ -0,0 +1,158 @@
+import fs from 'fs';
+import browserSync from 'browser-sync';
+import chalk from 'chalk';
+import commandLineArgs from 'command-line-args';
+import copy from 'recursive-copy';
+import del from 'del';
+import esbuild from 'esbuild';
+import getPort, { portNumbers } from 'get-port';
+import { globby } from 'globby';
+import { execSync } from 'child_process';
+
+const bs = browserSync.create();
+
+const { bundle, copydir, dir, serve, types } = commandLineArgs([
+  { name: 'bundle', type: Boolean },
+  { name: 'copydir', type: String },
+  { name: 'dir', type: String, defaultValue: 'dist' },
+  { name: 'serve', type: Boolean },
+  { name: 'types', type: Boolean }
+]);
+
+const outdir = dir;
+
+del.sync(outdir);
+fs.mkdirSync(outdir, { recursive: true });
+
+(async () => {
+  try {
+    execSync(`node scripts/make-metadata.js --outdir "${outdir}"`, { stdio: 'inherit' });
+    execSync(`node scripts/make-search.js --outdir "${outdir}"`, { stdio: 'inherit' });
+    execSync(`node scripts/make-react.js`, { stdio: 'inherit' });
+    execSync(`node scripts/make-vscode-data.js --outdir "${outdir}"`, { stdio: 'inherit' });
+    execSync(`node scripts/make-css.js --outdir "${outdir}"`, { stdio: 'inherit' });
+    execSync(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
+    if (types) execSync(`tsc --project . --outdir "${outdir}"`, { stdio: 'inherit' });
+  } catch (err) {
+    console.error(chalk.red(err));
+    process.exit(1);
+  }
+
+  const alwaysExternal = ['@lit-labs/react', 'react'];
+  const buildResult = await esbuild
+    .build({
+      format: 'esm',
+      target: 'es2017',
+      entryPoints: [
+        // The whole shebang
+        './src/shoelace.ts',
+        // Components
+        ...(await globby('./src/components/**/!(*.(style|test)).ts')),
+        // Translations
+        ...(await globby('./src/translations/**/*.ts')),
+        // Public utilities
+        ...(await globby('./src/utilities/**/!(*.(style|test)).ts')),
+        // Theme stylesheets
+        ...(await globby('./src/themes/**/!(*.test).ts')),
+        // React wrappers
+        ...(await globby('./src/react/**/*.ts'))
+      ],
+      outdir,
+      chunkNames: 'chunks/[name].[hash]',
+      incremental: serve,
+      define: {
+        // Popper.js requires this to be set
+        'process.env.NODE_ENV': '"production"'
+      },
+      bundle: true,
+      //
+      // We don't bundle certain dependencies in the unbundled build. This ensures we ship bare module specifiers,
+      // allowing end users to better optimize when using a bundler. (Only packages that ship ESM can be external.)
+      //
+      // We never bundle React or @lit-labs/react though!
+      //
+      external: bundle
+        ? alwaysExternal
+        : [...alwaysExternal, '@popperjs/core', '@shoelace-style/animations', 'lit', 'qr-creator'],
+      splitting: true,
+      plugins: []
+    })
+    .catch(err => {
+      console.error(chalk.red(err));
+      process.exit(1);
+    });
+
+  // Copy the build output to an additional directory
+  if (copydir) {
+    del.sync(copydir);
+    copy(outdir, copydir);
+  }
+
+  console.log(chalk.green(`The build has been generated at ${outdir} 📦\n`));
+
+  // Dev server
+  if (serve) {
+    const port = await getPort({
+      port: portNumbers(4000, 4999)
+    });
+
+    // Make sure docs/dist is empty since we're serving it virtually
+    del.sync('docs/dist');
+
+    console.log(chalk.cyan(`Launching the Shoelace dev server at http://localhost:${port}! 🥾\n`));
+
+    // Launch browser sync
+    bs.init({
+      startPath: '/',
+      port,
+      logLevel: 'silent',
+      logPrefix: '[shoelace]',
+      logFileChanges: true,
+      notify: false,
+      single: true,
+      ghostMode: false,
+      server: {
+        baseDir: 'docs',
+        routes: {
+          '/dist': './dist'
+        }
+      }
+    });
+
+    // Rebuild and reload when source files change
+    bs.watch(['src/**/!(*.test).*']).on('change', async filename => {
+      console.log(`Source file changed - ${filename}`);
+      buildResult
+        // Rebuild and reload
+        .rebuild()
+        .then(() => {
+          // Rebuild stylesheets when a theme file changes
+          if (/^src\/themes/.test(filename)) {
+            execSync(`node scripts/make-css.js --outdir "${outdir}"`, { stdio: 'inherit' });
+          }
+        })
+        .then(() => {
+          // Skip metadata when styles are changed
+          if (/(\.css|\.styles\.ts)$/.test(filename)) {
+            return;
+          }
+
+          execSync(`node scripts/make-metadata.js --outdir "${outdir}"`, { stdio: 'inherit' });
+        })
+        .then(() => {
+          bs.reload();
+        })
+        .catch(err => console.error(chalk.red(err)));
+    });
+
+    // Reload without rebuilding when the docs change
+    bs.watch(['docs/**/*.md']).on('change', filename => {
+      console.log(`Docs file changed - ${filename}`);
+      execSync(`node scripts/make-search.js --outdir "${outdir}"`, { stdio: 'inherit' });
+      bs.reload();
+    });
+  }
+
+  // Cleanup on exit
+  process.on('SIGTERM', () => buildResult.rebuild.dispose());
+})();

data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-css.js

@@ -0,0 +1,42 @@
+//
+// This script generates stylesheets from all *.styles.ts files in src/themes
+//
+import chalk from 'chalk';
+import commandLineArgs from 'command-line-args';
+import fs from 'fs/promises';
+import { mkdirSync } from 'fs';
+import { globbySync } from 'globby';
+import path from 'path';
+import prettier from 'prettier';
+import stripComments from 'strip-css-comments';
+
+const { outdir } = commandLineArgs({ name: 'outdir', type: String });
+const files = globbySync('./src/themes/**/*.styles.ts');
+const themesDir = path.join(outdir, 'themes');
+
+console.log('Generating stylesheets');
+
+mkdirSync(themesDir, { recursive: true });
+
+try {
+  files.map(async file => {
+    const source = await fs.readFile(file, 'utf8');
+    const css = source.match(/export default css`(.*?)`;/s)[1];
+
+    // We're currently scraping for CSS with a regex, so we can't use interpolation at the moment
+    if (css.includes('${')) {
+      console.error(
+        chalk.red(`Template literal expressions are not currently supported in theme stylesheets: ${file}`)
+      );
+      process.exit(1);
+    }
+
+    const formattedStyles = prettier.format(stripComments(css), { parser: 'css' });
+    const filename = path.basename(file).replace('.styles.ts', '.css');
+    const outFile = path.join(themesDir, filename);
+    await fs.writeFile(outFile, formattedStyles, 'utf8');
+  });
+} catch (err) {
+  console.error(chalk.red('Error generating stylesheets!'));
+  console.error(err);
+}

data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-icons.js

@@ -0,0 +1,71 @@
+//
+// This script downloads and generates icons and icon metadata.
+//
+import chalk from 'chalk';
+import commandLineArgs from 'command-line-args';
+import copy from 'recursive-copy';
+import del from 'del';
+import download from 'download';
+import fm from 'front-matter';
+import { readFileSync, mkdirSync } from 'fs';
+import { stat, readFile, writeFile } from 'fs/promises';
+import { globby } from 'globby';
+import path from 'path';
+
+const { outdir } = commandLineArgs({ name: 'outdir', type: String });
+const iconDir = path.join(outdir, '/assets/icons');
+
+const iconPackageData = JSON.parse(readFileSync('./node_modules/bootstrap-icons/package.json', 'utf8'));
+let numIcons = 0;
+
+(async () => {
+  try {
+    const version = iconPackageData.version;
+    const srcPath = `./.cache/icons/icons-${version}`;
+    const url = `https://github.com/twbs/icons/archive/v${version}.zip`;
+
+    try {
+      await stat(`${srcPath}/LICENSE.md`);
+      console.log('Generating icons from cache');
+    } catch {
+      // Download the source from GitHub (since not everything is published to NPM)
+      console.log(`Downloading and extracting Bootstrap Icons ${version} 📦`);
+      await download(url, './.cache/icons', { extract: true });
+    }
+
+    // Copy icons
+    console.log(`Copying icons and license`);
+    await del([iconDir]);
+    mkdirSync(iconDir, { recursive: true });
+    await Promise.all([
+      copy(`${srcPath}/icons`, iconDir),
+      copy(`${srcPath}/LICENSE.md`, path.join(iconDir, 'LICENSE.md')),
+      copy(`${srcPath}/bootstrap-icons.svg`, './docs/assets/icons/sprite.svg', { overwrite: true })
+    ]);
+
+    // Generate metadata
+    console.log(`Generating icon metadata`);
+    const files = await globby(`${srcPath}/docs/content/icons/**/*.md`);
+
+    const metadata = await Promise.all(
+      files.map(async file => {
+        const name = path.basename(file, path.extname(file));
+        const data = fm(await readFile(file, 'utf8')).attributes;
+        numIcons++;
+
+        return {
+          name,
+          title: data.title,
+          categories: data.categories,
+          tags: data.tags
+        };
+      })
+    );
+
+    await writeFile(path.join(iconDir, 'icons.json'), JSON.stringify(metadata, null, 2), 'utf8');
+
+    console.log(chalk.cyan(`Successfully processed ${numIcons} icons ✨\n`));
+  } catch (err) {
+    console.error(err);
+  }
+})();

data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-metadata.js

@@ -0,0 +1,11 @@
+//
+// This script runs the Custom Elements Manifest analyzer to generate custom-elements.json
+//
+import commandLineArgs from 'command-line-args';
+import { execSync } from 'child_process';
+
+const { outdir } = commandLineArgs({ name: 'outdir', type: String });
+
+// Run the analyzer
+console.log('Generating component metadata');
+execSync(`cem analyze --litelement --outdir "${outdir}"`, { stdio: 'inherit' });

data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-react.js

@@ -0,0 +1,63 @@
+import chalk from 'chalk';
+import fs from 'fs';
+import del from 'del';
+import path from 'path';
+import { pascalCase } from 'pascal-case';
+import prettier from 'prettier';
+import prettierConfig from '../prettier.config.cjs';
+import { getAllComponents } from './shared.js';
+
+const outdir = path.join('./src/react');
+
+// Clear build directory
+del.sync(outdir);
+fs.mkdirSync(outdir, { recursive: true });
+
+// Fetch component metadata
+const metadata = JSON.parse(fs.readFileSync('./dist/custom-elements.json', 'utf8'));
+
+// Wrap components
+console.log('Wrapping components for React...');
+
+const components = getAllComponents(metadata);
+const index = [];
+
+components.map(component => {
+  const tagWithoutPrefix = component.tagName.replace(/^sl-/, '');
+  const componentDir = path.join(outdir, tagWithoutPrefix);
+  const componentFile = path.join(componentDir, 'index.ts');
+  const importPath = component.modulePath.replace(/^src\//, '').replace(/\.ts$/, '');
+
+  fs.mkdirSync(componentDir, { recursive: true });
+
+  const events = (component.events || []).map(event => `${`on${pascalCase(event.name)}`}: '${event.name}'`).join(',\n');
+
+  const source = prettier.format(
+    `
+      import * as React from 'react';
+      import { createComponent } from '@lit-labs/react';
+      import Component from '../../${importPath}';
+
+      export default createComponent(
+        React,
+        '${component.tagName}',
+        Component,
+        {
+          ${events}
+        }
+      );
+    `,
+    Object.assign(prettierConfig, {
+      parser: 'babel-ts'
+    })
+  );
+
+  index.push(`export { default as ${component.name} } from './${tagWithoutPrefix}';`);
+
+  fs.writeFileSync(componentFile, source, 'utf8');
+});
+
+// Generate the index file
+fs.writeFileSync(path.join(outdir, 'index.ts'), index.join('\n'), 'utf8');
+
+console.log(chalk.cyan(`\nComponents have been wrapped for React! 📦\n`));

data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-search.js

@@ -0,0 +1,100 @@
+import commandLineArgs from 'command-line-args';
+import fs from 'fs';
+import path from 'path';
+import { globby } from 'globby';
+import lunr from 'lunr';
+import { getAllComponents } from './shared.js';
+
+const { outdir } = commandLineArgs({ name: 'outdir', type: String });
+const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.json'), 'utf8'));
+
+console.log('Generating search index for documentation');
+
+(async () => {
+  function getHeadings(markdown, maxLevel = 6) {
+    const headings = [];
+    const lines = markdown.split('\n');
+
+    lines.map(line => {
+      if (line.startsWith('#')) {
+        const level = line.match(/^(#+)/)[0].length;
+        const content = line.replace(/^#+/, '');
+
+        if (level <= maxLevel) {
+          headings.push({ level, content });
+        }
+      }
+    });
+
+    return headings;
+  }
+
+  function getMembers(markdown) {
+    const members = [];
+    const headers = markdown.match(/\[component-header:([a-z-]+)\]/g);
+
+    if (!headers) {
+      return '';
+    }
+
+    headers.map(header => {
+      const tagName = header.match(/\[component-header:([a-z-]+)\]/)[1];
+      const component = getAllComponents(metadata).find(component => component.tagName === tagName);
+
+      if (component) {
+        const fields = ['members', 'cssProperties', 'cssParts', 'slots', 'events'];
+
+        fields.map(field => {
+          if (component[field]) {
+            component[field].map(entry => {
+              if (entry.name) members.push(entry.name);
+              if (entry.description) members.push(entry.description);
+              if (entry.attribute) members.push(entry.attribute);
+            });
+          }
+        });
+      }
+    });
+
+    return members.join(' ');
+  }
+
+  const files = await globby('./docs/**/*.md');
+  const map = {};
+  const searchIndex = lunr(function () {
+    // The search index uses these field names extensively, so shortening them can save some serious bytes. The initial
+    // index file went from 468 KB => 401 KB by using single-character names!
+    this.ref('id'); // id
+    this.field('t', { boost: 10 }); // title
+    this.field('h', { boost: 5 }); // headings
+    this.field('m', { boost: 2 }); // members (props, methods, events, etc.)
+    this.field('c'); // content
+
+    files.map((file, index) => {
+      const relativePath = path.relative('./docs', file).replace(/\\/g, '/');
+      const relativePathNoExtension = relativePath.split('.').slice(0, -1).join('.');
+      const url = relativePath.replace(/\.md$/, '');
+      const filename = path.basename(file);
+      // Ignore certain directories and files
+      if (relativePath.startsWith('assets/') || relativePath.startsWith('dist/') || filename === '_sidebar.md') {
+        return false;
+      }
+
+      const content = fs.readFileSync(file, 'utf8');
+      const allHeadings = getHeadings(content, 4);
+      const title = allHeadings.find(heading => heading.level === 1)?.content || '';
+      const headings = allHeadings
+        .filter(heading => heading.level > 1)
+        .map(heading => heading.content)
+        .concat([relativePathNoExtension])
+        .join(' ');
+      const members = getMembers(content);
+
+      this.add({ id: index, t: title, h: headings, m: members, c: content });
+
+      map[index] = { title, url };
+    });
+  });
+
+  fs.writeFileSync('./docs/search.json', JSON.stringify({ searchIndex, map }), 'utf8');
+})();

data/remote-src/2.0.0.beta64/shoelace-next/scripts/make-vscode-data.js

@@ -0,0 +1,58 @@
+//
+// This script generates vscode.html-custom-data.json (for IntelliSense).
+//
+// You must generate dist/custom-elements.json before running this script.
+//
+import commandLineArgs from 'command-line-args';
+import fs from 'fs';
+import path from 'path';
+import { getAllComponents } from './shared.js';
+
+const { outdir } = commandLineArgs({ name: 'outdir', type: String });
+const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.json'), 'utf8'));
+
+console.log('Generating custom data for VS Code');
+
+const components = getAllComponents(metadata);
+const vscode = { tags: [] };
+
+components.map(component => {
+  const name = component.tagName;
+  const attributes = component.attributes?.map(attr => {
+    const type = attr.type?.text;
+    let values = [];
+
+    if (type) {
+      type.split('|').map(val => {
+        val = val.trim();
+
+        // Only accept values that are strings and numbers
+        const isString = val.startsWith(`'`);
+        const isNumber = Number(val).toString() === val;
+
+        if (isString) {
+          // Remove quotes
+          val = val.replace(/^'/, '').replace(/'$/, '');
+        }
+
+        if (isNumber || isString) {
+          values.push({ name: val });
+        }
+      });
+    }
+
+    if (values.length === 0) {
+      values = undefined;
+    }
+
+    return {
+      name: attr.name,
+      description: attr.description,
+      values
+    };
+  });
+
+  vscode.tags.push({ name, attributes });
+});
+
+fs.writeFileSync(path.join(outdir, 'vscode.html-custom-data.json'), JSON.stringify(vscode, null, 2), 'utf8');

data/remote-src/2.0.0.beta64/shoelace-next/scripts/plop/plopfile.js

@@ -0,0 +1,67 @@
+export default function (plop) {
+  plop.setHelper('tagWithoutPrefix', tag => tag.replace(/^sl-/, ''));
+
+  plop.setHelper('tagToTitle', tag => {
+    const withoutPrefix = plop.getHelper('tagWithoutPrefix');
+    const titleCase = plop.getHelper('titleCase');
+    return titleCase(withoutPrefix(tag));
+  });
+
+  plop.setGenerator('component', {
+    description: 'Generate a new component',
+    prompts: [
+      {
+        type: 'input',
+        name: 'tag',
+        message: 'Tag name? (e.g. sl-button)',
+        validate: value => {
+          // Start with sl- and include only a-z + dashes
+          if (!/^sl-[a-z-+]+/.test(value)) {
+            return false;
+          }
+
+          // No double dashes or ending dash
+          if (value.includes('--') || value.endsWith('-')) {
+            return false;
+          }
+
+          return true;
+        }
+      }
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.ts',
+        templateFile: 'templates/component/component.hbs'
+      },
+      {
+        type: 'add',
+        path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.styles.ts',
+        templateFile: 'templates/component/styles.hbs'
+      },
+      {
+        type: 'add',
+        path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.test.ts',
+        templateFile: 'templates/component/tests.hbs'
+      },
+      {
+        type: 'add',
+        path: '../../docs/components/{{ tagWithoutPrefix tag }}.md',
+        templateFile: 'templates/component/docs.hbs'
+      },
+      {
+        type: 'modify',
+        path: '../../docs/_sidebar.md',
+        pattern: /<!--plop:component-->/,
+        template: `- [{{ tagToTitle tag }}](/components/{{ tagWithoutPrefix tag }})\n  <!--plop:component-->`
+      },
+      {
+        type: 'modify',
+        path: '../../src/shoelace.ts',
+        pattern: /\/\* plop:component \*\//,
+        template: `export { default as {{ properCase tag }} } from './components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}';\n/* plop:component */`
+      }
+    ]
+  });
+}