chore: convert __examples__ to esm

packages/__examples__/.gitignore

@@ -1,5 +1,4 @@
 node_modules/
 __build__/
 .babel-cache
-*.asketch.json
 prop-data.json

packages/__examples__/.storybook/main.ts

@@ -22,15 +22,16 @@
  * SOFTWARE.
  */
 
-import { dirname, join } from 'path'
+// import { dirname, join } from 'path'
+import type { StorybookConfig } from '@storybook/react-webpack5'
 
-module.exports = {
+const config: StorybookConfig = {
   stories: ['./stories/stories.ts'],
   typescript: {
     check: false,
     reactDocgen: false
   },
-  framework: getAbsolutePath('@storybook/react-webpack5'),
+  framework: '@storybook/react-webpack5',
   docs: {
     autodocs: false
   },
@@ -41,6 +42,8 @@ module.exports = {
   }
 }
 
-function getAbsolutePath(value: string) {
-  return dirname(require.resolve(join(value, 'package.json')))
-}
+// function getAbsolutePath(value: string) {
+//   return dirname(require.resolve(join(value, 'package.json')))
+// }
+
+export default config

packages/__examples__/buildScripts/build-examples-json.mjs → packages/__examples__/buildScripts/buildExamplesJson.js

@@ -23,14 +23,14 @@
  */
 
 const outputName = 'prop-data.json'
-// eslint-disable-next-line no-console
+// eslint-disable-next-line no-console, no-undef
 console.log('starting to build example prop combinations to ' + outputName)
 
 import { readFileSync, writeFileSync } from 'fs'
 import { resolve, dirname } from 'path'
 import { fileURLToPath } from 'url'
 import { globby } from 'globby'
-import parsePropValues from './parsePropValues.mjs'
+import parsePropValues from './parsePropValues.js'
 const projectRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../')
 
 async function buildExamplesJSON() {
@@ -42,9 +42,7 @@ async function buildExamplesJSON() {
     '**/es/**',
     '**/template/**'
   ]
-  const ignore = ignorePaths.map(
-    (file) => '!' + resolve(projectRoot, file)
-  )
+  const ignore = ignorePaths.map((file) => '!' + resolve(projectRoot, file))
   const matches = await globby([files, ...ignore])
   const componentProps = matches.reduce((result, absoluteExampleFilePath) => {
     // path to the component that is tested, e.g. /ui-tag/src/Tag/index.js
@@ -81,7 +79,7 @@ async function buildExamplesJSON() {
 
   writeFileSync(outputName, everything)
 
-  // eslint-disable-next-line no-console
+  // eslint-disable-next-line no-console, no-undef
   console.log('finished generating example prop combinations.')
 }
 

packages/__examples__/buildScripts/parsePropValues.mjs → packages/__examples__/buildScripts/parsePropValues.js

@@ -65,21 +65,16 @@ import { builtinResolvers, parse, makeFsImporter } from 'react-docgen'
 export default function parsePropValues(fileSource, fileName) {
   let parsedSrc = {}
   try {
-    parsedSrc = parse(
-      fileSource,
-      {
-        resolver: new builtinResolvers.FindExportedDefinitionsResolver(),
-        filename: fileName,
-        importer: makeFsImporter()
-      }
-    )
+    parsedSrc = parse(fileSource, {
+      resolver: new builtinResolvers.FindExportedDefinitionsResolver(),
+      filename: fileName,
+      importer: makeFsImporter()
+    })
     if (Array.isArray(parsedSrc)) {
       parsedSrc = parsedSrc.shift()
     }
   } catch (error) {
-    throw new Error(
-      `[__examples__] Could not parse component source: ${error}`
-    )
+    throw new Error(`[__examples__] Could not parse component source: ${error}`)
   }
 
   return getPropValuesFromParsedProps(parsedSrc.props)

packages/__examples__/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "version": "10.3.0",
   "author": "Instructure, Inc. Engineering and Product Design",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/instructure/instructure-ui.git"
@@ -16,7 +17,7 @@
     "start:watch": "npm run build:examples && npm run watch:examples",
     "bundle": "npm run build:examples && npm run build:storybook",
     "clean": "ui-scripts clean",
-    "build:examples": "node buildScripts/build-examples-json.mjs",
+    "build:examples": "node buildScripts/buildExamplesJson.js",
     "build:storybook": "ui-scripts examples",
     "watch:examples": "ui-scripts examples --watch -p 9090"
   },