@carbon/ibm-products-web-components 0.0.1-canary.3564

package/src/components/side-panel/story-styles.scss

@@ -0,0 +1,46 @@
+/*
+* Copyright IBM Corp. 2023, 2024
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+@use '@carbon/styles/scss/theme' as *;
+
+$story-prefix: 'side-panel-stories__';
+
+.#{$story-prefix}body-content {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  gap: 1rem;
+}
+
+.#{$story-prefix}text-inputs {
+  display: flex;
+  gap: 1rem;
+
+  > * {
+    flex-basis: 50%;
+  }
+}
+
+.#{$story-prefix}story-container {
+  position: fixed;
+  display: grid;
+  block-size: 100vh;
+  grid-template-rows: 3rem 1fr;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.#{$story-prefix}story-header {
+  background: $background-inverse;
+}
+
+.#{$story-prefix}story-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/globals/internal/handle.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * An object to keep track of things that can be cleaned up.
+ */
+export default interface Handle {
+  /**
+   * Releases the thing that this object is keeping track of.
+   * For example, if this `Handle` is keeping track of an event listener, this `release()` method removes the event listener.
+   */
+  release(): null;
+}

package/src/globals/settings.ts

@@ -0,0 +1,22 @@
+/**
+ *
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const prefix = 'c4p';
+const carbonPrefix = 'cds';
+
+/**
+ * A selector selecting tabbable nodes.
+ * Borrowed from `carbon-angular`. tabbable === focusable.
+ */
+const selectorTabbable = `
+  ${prefix}-side-nav-link,
+  ${prefix}-side-nav-menu,
+  ${prefix}-side-nav-menu-item
+`;
+// Because we're going to have a bunch of exports
+export { prefix, carbonPrefix, selectorTabbable };

package/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { default as CDSSidePanel } from './components/side-panel/side-panel';

package/src/typings/resources.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+declare module '*.scss';
+declare module '*.scss?lit';
+declare module 'vitest/config';
+
+declare module '*.mdx' {
+  let MDXComponent: (props: any) => JSX.Element;
+  // @ts-ignore
+  export default {
+    parameters: {
+      docs: {
+        // @ts-ignore
+        container: JSX.Element,
+        page: MDXComponent,
+      },
+    },
+  };
+}

package/tasks/build.js

@@ -0,0 +1,165 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import { fileURLToPath } from 'url';
+import { globby } from 'globby';
+import { rollup } from 'rollup';
+import alias from '@rollup/plugin-alias';
+import autoprefixer from 'autoprefixer';
+import carbonIcons from '../tools/rollup-plugin-icons.js';
+import carbonIconPaths from '../tools/rollup-plugin-icon-paths.js';
+import commonjs from '@rollup/plugin-commonjs';
+import copy from 'rollup-plugin-copy';
+import cssnano from 'cssnano';
+import litSCSS from '../tools/rollup-plugin-lit-scss.js';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import path from 'path';
+import postcss from 'postcss';
+import typescript from '@rollup/plugin-typescript';
+
+import * as packageJson from '../package.json' assert { type: 'json' };
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+async function build() {
+  const esInputs = await globby([
+    'src/**/*.ts',
+    '!src/**/*.stories.ts',
+    '!src/**/*.d.ts',
+    '!src/polyfills',
+  ]);
+
+  const libInputs = await globby([
+    'src/components/**/defs.ts',
+    'src/globals/**/*.ts',
+    '!src/globals/decorators/**/*.ts',
+    '!src/globals/directives/**/*.ts',
+    '!src/globals/internal/**/*.ts',
+    '!src/globals/mixins/**/*.ts',
+  ]);
+
+  const iconInput = await globby([
+    'node_modules/@carbon/icons/lib/**/*.js',
+    '!**/index.js',
+  ]);
+
+  const entryPoint = {
+    rootDir: 'src',
+    outputDirectory: path.resolve(__dirname, '..'),
+  };
+
+  const formats = [
+    {
+      type: 'esm',
+      directory: 'es',
+    },
+    {
+      type: 'commonjs',
+      directory: 'lib',
+    },
+  ];
+
+  for (const format of formats) {
+    const outputDirectory = path.join(
+      entryPoint.outputDirectory,
+      format.directory
+    );
+
+    const cwcInputConfig = getRollupConfig(
+      format.type === 'esm' ? esInputs : libInputs,
+      entryPoint.rootDir,
+      outputDirectory,
+      format.type === 'esm' ? iconInput : []
+    );
+
+    const cwcBundle = await rollup(cwcInputConfig);
+
+    await cwcBundle.write({
+      dir: outputDirectory,
+      format: format.type,
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+      banner,
+      exports: 'named',
+      sourcemap: true,
+    });
+  }
+}
+
+const banner = `/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+`;
+
+function getRollupConfig(input, rootDir, outDir, iconInput) {
+  return {
+    input,
+    // Mark dependencies listed in `package.json` as external so that they are
+    // not included in the output bundle.
+    external: [
+      ...Object.keys(packageJson.default.dependencies),
+      ...Object.keys(packageJson.default.devDependencies),
+    ].map((name) => {
+      // Transform the name of each dependency into a regex so that imports from
+      // nested paths are correctly marked as external.
+      //
+      // Example:
+      // import 'module-name';
+      // import 'module-name/path/to/nested/module';
+      return new RegExp(`^${name}(/.*)?`);
+    }),
+    plugins: [
+      alias({
+        entries: [{ find: /^(.*)\.scss\?lit$/, replacement: '$1.scss' }],
+      }),
+      copy({
+        targets: [{ src: 'src/components/**/*.scss', dest: 'scss' }],
+        flatten: false,
+      }),
+      nodeResolve({
+        browser: true,
+        mainFields: ['jsnext', 'module', 'main'],
+        extensions: ['.js', '.ts'],
+      }),
+      commonjs({
+        include: [/node_modules/],
+      }),
+      litSCSS({
+        includePaths: [
+          path.resolve(__dirname, '../node_modules'),
+          path.resolve(__dirname, '../../../node_modules'),
+        ],
+        async preprocessor(contents, id) {
+          return (
+            await postcss([autoprefixer(), cssnano()]).process(contents, {
+              from: id,
+            })
+          ).css;
+        },
+      }),
+      carbonIcons(iconInput, banner),
+      typescript({
+        noEmitOnError: true,
+        compilerOptions: {
+          rootDir,
+          outDir,
+        },
+      }),
+      carbonIconPaths(),
+    ],
+  };
+}
+
+build().catch((error) => {
+  console.log(error);
+  process.exit(1);
+});

package/tools/rollup-plugin-icon-paths.js

@@ -0,0 +1,39 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+/**
+ * @returns {object} The rollup plugin to transform `@carbon/icons/lib` imports to relative path in build.
+ */
+export default function rollupPluginIconPaths() {
+  return {
+    name: 'transform-icon-paths',
+
+    generateBundle(options, bundle) {
+      function transformIconPaths(filePath, content) {
+        const __dirname = path.dirname(fileURLToPath(import.meta.url));
+        const iconPathRegex = /@carbon\/icons\/lib/g;
+        const filenameES = filePath.replace(/[/\\]src[/\\]/, '/es/');
+        const iconsDir = path.relative(
+          path.dirname(filenameES),
+          path.resolve(__dirname, '../icons')
+        );
+        return content.replace(iconPathRegex, iconsDir);
+      }
+
+      for (const [fileName, fileData] of Object.entries(bundle)) {
+        if (fileData.type === 'chunk') {
+          fileData.code = transformIconPaths(fileName, fileData.code);
+        }
+      }
+    },
+  };
+}

package/tools/rollup-plugin-icons.js

@@ -0,0 +1,73 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import path from 'path';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'url';
+import icon from './svg-result-carbon-icon.js';
+
+/**
+ * @param {Array} [inputs] icon files of the @carbon/icons/lib folder from node_modules
+ * @param {String} [banner] license banner to prepend to file
+ * @returns {object} The rollup plugin to generate lit svg template icon files.
+ */
+export default function rollupPluginIcons(inputs, banner) {
+  return {
+    name: 'carbon-icons',
+
+    async buildEnd() {
+      const __dirname = path.dirname(fileURLToPath(import.meta.url));
+      const require = createRequire(import.meta.url);
+
+      for (const input of inputs) {
+        const iconPath = path.resolve(__dirname, `../${input}`);
+
+        const svg = await import(iconPath);
+
+        const iconsDir = path.dirname(require.resolve('@carbon/icons/lib'));
+        const iconsESPath = path.resolve(
+          'es',
+          'icons',
+          path.relative(iconsDir, iconPath)
+        );
+
+        const code = `${banner}
+import { svg } from 'lit';
+import spread from '@carbon/web-components/es/globals/directives/spread.js';
+
+const svgResultCarbonIcon = ${icon(svg.default)};
+export default svgResultCarbonIcon;`;
+
+        this.emitFile({
+          type: 'asset',
+          fileName: `icons/${path.relative(iconsDir, iconPath)}`,
+          source: code,
+        });
+
+        // emit icon type file
+        const typeCode = `${banner}
+import { SVGTemplateResult } from 'lit-html';
+declare const svgResultCarbonIcon: ({ children, ...attrs }?: { children?: SVGTemplateResult; [attr: string]: any }) => SVGTemplateResult;
+export default svgResultCarbonIcon;`;
+
+        const typePath = path.format({
+          ...path.parse(iconPath),
+          base: '',
+          ext: '.d.ts',
+        });
+
+        this.emitFile({
+          type: 'asset',
+          fileName: `icons/${path.relative(iconsDir, typePath)}`,
+          source: typeCode,
+        });
+      }
+    },
+  };
+}

package/tools/rollup-plugin-lit-scss.js

@@ -0,0 +1,89 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import path from 'path';
+import { promisify } from 'util';
+import * as sass from 'sass';
+import { createFilter } from '@rollup/pluginutils';
+
+const renderSass = promisify(sass.render);
+const noop = (s) => s;
+
+/**
+ * @param {string} css A CSS.
+ * @returns {string} A `lit-html` template of the given CSS.
+ */
+function transformToTemplate(css) {
+  return `import { css } from 'lit';export default css([${JSON.stringify(
+    css
+  )}])`;
+}
+
+/**
+ * @param {object} [options] The options.
+ * @param {RegExp} [options.include=/\.scss/] The files to include.
+ * @param {RegExp} [options.exclude] The files to exclude.
+ * @param {Function} [options.preprocessor] The CSS preprocessor to use.
+ * @returns {object} The rollup plugin to transform an `.scss` file to a `lit-html` template.
+ */
+export default function LitSCSS({
+  include = /\.scss$/i,
+  exclude,
+  preprocessor = noop,
+  ...options
+} = {}) {
+  const filter = createFilter(include, exclude);
+  return {
+    name: 'lit-scss',
+
+    /**
+     * Enqueues the module contents for loading.
+     *
+     * @param {string} id The module ID.
+     */
+    load(id) {
+      if (filter(id)) {
+        this.addWatchFile(path.resolve(id));
+      }
+      return null;
+    },
+
+    /**
+     * Transforms the module contents.
+     *
+     * @param {string} contents The module contents.
+     * @param {string} id The module ID.
+     * @returns {object} The transformed module contents.
+     */
+    async transform(contents, id) {
+      if (!filter(id)) {
+        return null;
+      }
+
+      const finalContent = `
+        $feature-flags: (
+          enable-css-custom-properties: true,
+        );
+       ${contents}`;
+
+      const { css } = await renderSass({
+        ...options,
+        file: id,
+        data: finalContent,
+      });
+
+      return {
+        code: transformToTemplate(await preprocessor(css.toString(), id)),
+        map: {
+          mappings: '',
+        },
+      };
+    },
+  };
+}

package/tools/svg-result-carbon-icon-loader.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const path = require('path');
+const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon');
+
+/**
+ * A Vite loader to generate `lit-html`'s `SVGResult` from an icon descriptor from `@carbon/icons`.
+ *
+ * @returns {string} The massaged module content.
+ */
+function svgResultCarbonIconLoader() {
+  const descriptor = require(this.resourcePath); // eslint-disable-line global-require
+  return `
+    import { svg } from 'lit';
+    import spread from '@carbon/web-components/es/globals/directives/spread.js';
+    const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon(descriptor)};
+    export default svgResultCarbonIcon;
+  `;
+}
+
+module.exports = svgResultCarbonIconLoader;

package/tools/svg-result-carbon-icon.js

@@ -0,0 +1,42 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { getAttributes, formatAttributes } from '@carbon/icon-helpers';
+
+// TODO: update @carbon/icon-helpers with this version of toString
+const toString = (descriptor) => {
+  if (typeof descriptor === 'string') {
+    return descriptor;
+  }
+  const { elem = 'svg', attrs = {}, content = [] } = descriptor;
+  const children = content.map(toString).join('');
+  if (elem !== 'svg') {
+    return `<${elem} ${formatAttributes(attrs)}>${children}</${elem}>`;
+  }
+  return `<${elem} ${formatAttributes(
+    getAttributes(attrs)
+  )}>${children}</${elem}>`;
+};
+
+/**
+ * Function that takes a valid @carbon/icons style icon descriptor and returns a lit-html svg instance
+ *
+ * @param {object} descriptor Object representation of an SVG icon as generated by @carbon/icons
+ */
+const icon = (descriptor) => {
+  descriptor.attrs = getAttributes(
+    Object.assign(descriptor.attrs, {
+      '...': '${spread(attrs)}', // eslint-disable-line no-template-curly-in-string
+    })
+  );
+  descriptor?.content?.unshift('${children}'); // eslint-disable-line no-template-curly-in-string
+  return `({ children, ...attrs } = {}) => svg\`${toString(descriptor)}\``;
+};
+
+export default icon;

package/tools/vite-svg-result-carbon-icon-loader.ts

@@ -0,0 +1,65 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const path = require('path');
+const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon');
+
+/**
+ * A Vite plugin to generate `lit-html`'s `SVGResult` from an icon descriptor from `@carbon/icons`.
+ *
+ * @returns {string} The massaged module content.
+ */
+export default function svgResultCarbonIconLoader() {
+  const svgRegex = /@carbon[\\/]icons[\\/]/i;
+
+  const paths = new Map<string, string>();
+
+  return {
+    name: 'svg-result-carbon-icon-loader',
+    enforce: 'pre',
+
+    resolveId(id: string): string | null {
+      if (id.match(svgRegex)) {
+        paths.set(id, id);
+        return id;
+      } else {
+        return null;
+      }
+    },
+
+    async load(id: string): Promise<string | undefined> {
+      let outcome: string | undefined;
+      if (!id.match(svgRegex)) {
+        return outcome;
+      }
+      return ``;
+    },
+
+    async transform(src: string, id: string) {
+      if (!paths.has(id)) {
+        return null;
+      }
+
+      const outcome: string | undefined = src;
+      if (!id.match(svgRegex)) {
+        return outcome;
+      }
+
+      const descriptor = require(id);
+      return `
+          import { svg } from 'lit';
+          import spread from '@carbon/web-components/es/globals/directives/spread.js';
+          const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon.default(
+            descriptor
+          )};
+          export default svgResultCarbonIcon;
+      `;
+    },
+  };
+}

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "lib": ["es2017", "esnext.array", "dom", "dom.iterable"],
+    "typeRoots": [
+      "src/typings",
+      "tests/typings",
+      "node_modules/@types",
+      "../../node_modules/@types"
+    ],
+    "declaration": true,
+    "rootDir": ".",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "stripInternal": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "experimentalDecorators": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "tests/**/*.ts",
+    ".storybook/**/*.ts",
+    ".storybook/**/*.tsx"
+  ],
+  "exclude": ["src/**/*.stories.ts", "src/globals/internal/storybook-cdn.ts"]
+}