shoelace-rails-ui 0.1.0 → 0.1.1

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

@@ -1,93 +0,0 @@
-{
-  "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

@@ -1,17 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,42 +0,0 @@
-//
-// 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

@@ -1,71 +0,0 @@
-//
-// 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

@@ -1,11 +0,0 @@
-//
-// 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

@@ -1,63 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,58 +0,0 @@
-//
-// 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

@@ -1,67 +0,0 @@
-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 */`
-      }
-    ]
-  });
-}