chore(repo): convert to monorepo (#30)

* chore(monorepo): change file structure

* chore(monorepo): restructure to monorepo

* chore(build): generate working dist files

* chore(build): scripts file

* chore(build): script build

* chore(build): set alias for scss?inline

* chore(build): create rollup plugin for ?inline query

* chore(lint): change entry to packages

* chore(lint): add jsdoc

.gitignore

@@ -27,3 +27,4 @@ custom-elements.json
 *.njsproj
 *.sln
 *.sw?
+.nx/*

.storybook/main.js

@@ -15,8 +15,8 @@ import sass from 'sass';
 
 const config = {
   stories: [
-    '../src/components/**/*.mdx',
-    '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../packages/**/src/__stories__/*.mdx',
+    '../packages/**/__stories__/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   framework: {
@@ -38,7 +38,11 @@ const config = {
       plugins: [
         postcss(),
         postcssLit({
-          include: ['./node_modules', 'src/**/*.scss', 'src/**/*.scss?*'],
+          include: [
+            './node_modules',
+            'packages/**/*.scss',
+            'packages/**/*.scss?*',
+          ],
         }),
       ],
     });

src/typings/resources.d.ts → declarations.d.ts

@@ -6,7 +6,6 @@
  * 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 '*.mdx' {
   let MDXComponent: (props: any) => JSX.Element; // eslint-disable-line no-undef
   export default {
@@ -25,7 +24,18 @@ declare global {
   }
 }
 
-declare module '*.scss?inline';
+declare module '*.scss?inline' {
+  import { CSSResult } from 'lit';
+  const styles: CSSResult;
+  export default styles;
+}
+
+declare module '*.scss' {
+  import { CSSResult } from 'lit';
+  const styles: CSSResult;
+  export default styles;
+}
+
 declare module '*.svg';
 declare module '*.jpg';
 declare module '*.png';

gulp-tasks/build.js

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 gulp from 'gulp';
+import './build/dist.js';
+import './build/modules.js';
+
+gulp.task(
+  'build',
+  gulp.parallel(gulp.task('build:modules'), gulp.task('build:dist'))
+);

gulp-tasks/build/dist.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 fs from 'fs';
+import gulp from 'gulp';
+import path from 'path';
+import { rollup } from 'rollup';
+import getRollupConfig from '../../tools/get-rollup-config.js';
+
+/**
+ * Gets all of the folders and returns out
+ *
+ * @param {string} dir Directory to check
+ * @returns {string[]} List of folders
+ * @private
+ */
+function _getFolders(dir) {
+  return fs.readdirSync(dir).filter((file) => fs.statSync(path.join(dir, file)).isDirectory());
+}
+
+/**
+ * Builds all of the rollup bundles for all components
+ *
+ * @param {object} [options] The build options.
+ * @param {string} [options.mode=development] The build mode.
+ */
+async function _buildComponents({ mode = 'development' } = {}) {
+  if (!fs.existsSync('dist')) {
+    fs.mkdirSync('dist');
+  }
+
+  const folders = _getFolders(`packages`);
+
+  for (let i = folders.length - 1; i >= 0; i--) {
+    if (!fs.existsSync(`packages/${folders[i]}/index.ts`)) {
+      folders.splice(i, 1);
+    }
+  }
+
+  return rollup(getRollupConfig({ mode, folders }))
+    .then((bundle) => {
+      bundle.write({
+        format: 'es',
+        dir: 'dist',
+      });
+    })
+    .catch((err) => {
+      // eslint-disable-next-line no-console
+      console.error(err);
+    });
+}
+
+/**
+ * Defined scripts to return as gulp tasks
+ *
+ * @type {object}
+ * @private
+ */
+const _scripts = {
+    dev() {
+      return _buildComponents();
+    },
+    prod() {
+      return _buildComponents({ mode: 'production' });
+    },
+};
+
+// Gulp tasks (LTR)
+gulp.task('build:dist:dev', _scripts.dev);
+gulp.task('build:dist:prod', _scripts.prod);
+gulp.task('build:dist', gulp.series(gulp.task('build:dist:dev'), gulp.task('build:dist:prod')));
+

gulp-tasks/build/modules.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 gulp from 'gulp';
+import './modules/css.js'
+import './modules/scripts.js';
+import './modules/types.js'
+
+gulp.task(
+  'build:modules',
+  gulp.parallel(
+    gulp.task('build:modules:css'),
+    gulp.task('build:modules:scripts'),
+    gulp.task('build:modules:types')
+  )
+);

gulp-tasks/build/modules/css.js

@@ -0,0 +1,90 @@
+/**
+ * @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 asyncDone from 'async-done';
+import autoprefixer from 'autoprefixer';
+import cleanCSS from 'gulp-clean-css';
+import gulp from 'gulp';
+import header from 'gulp-header';
+import path from 'path';
+import postcss from 'gulp-postcss';
+import prettier from 'gulp-prettier';
+import replaceExtension from 'replace-ext';
+import * as dartSass from 'sass'
+import gulpSass from 'gulp-sass';
+const sass = gulpSass(dartSass);
+import through2 from 'through2';
+import {promisify} from 'util';
+import {readFile} from 'fs';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const readFileAsync = promisify(readFile);
+const promisifyStream = promisify(asyncDone);
+
+/**
+ * Builds the CSS module file
+ *
+ * @param {object} [options] The build options.
+ * @param {string} [options.banner] License banner
+ * @returns {*} Gulp stream
+ * @private
+ */
+const buildModulesCSS = ({ banner }) =>
+  gulp
+    .src([`packages/*/src/*.scss`])
+    .pipe(
+      sass({
+        includePaths: ['node_modules', '../../node_modules'],
+      })
+    )
+    .pipe(
+      postcss([
+        autoprefixer(),
+      ])
+    )
+    .pipe(cleanCSS())
+    .pipe(
+      through2.obj((file, enc, done) => {
+        file.contents = Buffer.from(`
+          import { css } from 'lit';
+          export default css([${JSON.stringify(String(file.contents))}]);
+        `);
+        file.path = replaceExtension(
+          file.path,
+        '.css.js'
+        );
+        done(null, file);
+      })
+    )
+    .pipe(prettier())
+    .pipe(header(banner))
+    .pipe(gulp.dest(function(file){
+      // output type files within the package folders itself (ie. packages/es/{component}/src/..)
+     const destPath = file.path.match(/(?<=packages\/)(.*?)(?=\/)/gm)[0];
+     file.dirname = file.dirname.replace(`/${destPath}`, '')
+     return `packages/${destPath}/es`;
+   }));
+
+/**
+ * Builds the CSS
+ *
+ * @returns {Promise<void>} Stream
+ */
+async function css() {
+  const banner = await readFileAsync(
+    path.resolve(__dirname, '../../../tools/license.js'),
+    'utf8'
+  );
+  await Promise.all([
+    promisifyStream(() => buildModulesCSS({ banner })),
+  ]);
+}
+
+gulp.task('build:modules:css', css);

gulp-tasks/build/modules/scripts.js

@@ -0,0 +1,55 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 gulp from 'gulp';
+import babel from 'gulp-babel'
+import sourcemaps from 'gulp-sourcemaps';
+import ts from 'gulp-typescript';
+import stripComments from 'strip-comments';
+import filter from 'gulp-filter';
+import babelPluginResourceJSPaths from '../../../tools/babel-plugin-resource-js-paths.js';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Builds the module script files
+ *
+ * @returns {*} Gulp stream
+ */
+async function scripts() {
+  const tsProject = ts.createProject(path.resolve(__dirname, '../../../tsconfig.json'));
+  const {js} =  gulp.src([
+      `packages/**/*.ts`,
+      `!packages/**/*-story*.ts*`,
+      `!packages/**/__stories__/*.ts`,
+      `!packages/**/__tests__/*.ts`,
+      `!packages/**/*.d.ts`,
+    ]).pipe(sourcemaps.init()).pipe(tsProject());
+
+  return js.pipe(
+        babel({
+          plugins: [
+            babelPluginResourceJSPaths,
+          ],
+        })
+      )
+      // Avoids generating `.js` from interface-only `.ts` files
+      .pipe(filter((file) => stripComments(file.contents.toString(), { sourceType: 'module' }).replace(/\s/g, '')))
+      .pipe(sourcemaps.write('.'))
+      .pipe(gulp.dest(function(file){
+        // output type files within the package folders itself (ie. packages/es/{component}/src/..)
+        const destPath = file.path.match(/(?<=packages\/)(.*?)(?=\/)/gm)[0];
+        file.dirname = file.dirname.replace(`/${destPath}`, '')
+        return `packages/${destPath}/es`;
+      }));
+}
+
+gulp.task('build:modules:scripts', scripts);

gulp-tasks/build/modules/types.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 gulp from 'gulp';
+import path from 'path';
+import through2 from 'through2';
+import sourcemaps from 'gulp-sourcemaps';
+import ts from 'gulp-typescript';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Builds the types modules (d.ts files)
+ *
+ * @returns {*} gulp stream
+ */
+function types() {
+  const tsProject = ts.createProject(path.resolve(__dirname, '../../../tsconfig.json'));
+  const { dts } = gulp
+  .src([`packages/**/*.ts`, `!packages/**/__tests__/*.ts`, `!packages/**/*-story*.ts*`, `!packages/**/__stories__/*.ts`])
+  .pipe(sourcemaps.init())
+  .pipe(tsProject());
+
+return dts
+  .pipe(
+    through2.obj((file, enc, done) => {
+      file.contents = Buffer.from(`${file.contents.toString()}\n//# sourceMappingURL=${path.basename(file.path)}.map\n`);
+      done(null, file);
+    })
+  )
+  .pipe(sourcemaps.write('.'))
+  .pipe(gulp.dest(function(file){
+     // output type files within the package folders itself (ie. packages/es/{component}/src/..)
+    const destPath = file.path.match(/(?<=packages\/)(.*?)(?=\/)/gm)[0];
+    file.dirname = file.dirname.replace(`/${destPath}`, '')
+    return `packages/${destPath}/es`;
+  }));
+}
+
+gulp.task('build:modules:types', types);

src/index.ts → gulpfile.js

@@ -7,5 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { default as C4AIExtendedButton } from './components/extended-button/extended-button';
-export { default as C4AITestInput } from './components/test-input/test-input';
+import './gulp-tasks/build.js';
+
+process.once('SIGINT', () => {
+  process.exit(0);
+});