chore: bump Babel & react-docgen (#4454)

Author: layershifter

.babel-preset.js

@@ -16,10 +16,7 @@ const browsers = [
 ]
 
 const plugins = [
-  ['@babel/plugin-proposal-class-properties', { loose: true }],
-  ['@babel/plugin-proposal-optional-chaining', { loose: true }],
   '@babel/plugin-proposal-export-default-from',
-  '@babel/plugin-proposal-export-namespace-from',
   '@babel/plugin-syntax-dynamic-import',
   [
     '@babel/plugin-transform-runtime',

.circleci/config.yml

@@ -5,9 +5,12 @@ general:
     ignore:
       - gh-pages
 
+orbs:
+  browser-tools: circleci/[email protected]
+
 docker_defaults: &docker_defaults
   docker:
-    - image: circleci/node:16-browsers
+    - image: cimg/node:16.16-browsers
   working_directory: ~/project/semantic-ui-react
 
 environment:
@@ -32,6 +35,7 @@ jobs:
           key: v6-node-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
             - ~/.cache/yarn
+      - browser-tools/install-chrome
       - persist_to_workspace:
           root: ~/
           paths:

gulp/plugins/gulp-component-menu.js renamed to gulp/plugins/gulp-component-menu.mjs

@@ -2,7 +2,7 @@ import Vinyl from 'vinyl'
 import gutil from 'gulp-util'
 import through from 'through2'
 
-import getComponentInfo from './util/getComponentInfo'
+import getComponentInfo from './util/getComponentInfo.mjs'
 
 const pluginName = 'gulp-component-menu'
 

gulp/plugins/gulp-example-menu.js renamed to gulp/plugins/gulp-example-menu.mjs

@@ -4,7 +4,7 @@ import _ from 'lodash'
 import path from 'path'
 import through from 'through2'
 
-import { parseDocSection } from './util'
+import parseDocSection from './util/parseDocSection.mjs'
 
 const SECTION_ORDER = {
   Types: 1,

gulp/plugins/gulp-example-source.js renamed to gulp/plugins/gulp-example-source.mjs

@@ -2,7 +2,7 @@ import Vinyl from 'vinyl'
 import gutil from 'gulp-util'
 import through from 'through2'
 
-import { getComponentInfo } from './util'
+import getComponentInfo from './util/getComponentInfo.mjs'
 
 const pluginName = 'gulp-react-docgen'
 

gulp/plugins/gulp-react-docgen.js renamed to gulp/plugins/gulp-react-docgen.mjs

@@ -1,13 +1,14 @@
 import _ from 'lodash'
 import path from 'path'
-import { defaultHandlers, parse, resolver } from 'react-docgen'
+import { builtinResolvers, defaultHandlers, parse } from 'react-docgen'
 import fs from 'fs'
 
-import config from '../../../config'
-import parseDefaultValue from './parseDefaultValue'
-import parseDocblock from './parseDocblock'
-import parserCustomHandler from './parserCustomHandler'
-import parseType from './parseType'
+import parseDefaultValue from './parseDefaultValue.mjs'
+import parseDocblock from './parseDocblock.mjs'
+import parserCustomHandler from './parserCustomHandler.mjs'
+import parseType from './parseType.mjs'
+
+const config = (await import('../../../config.js')).default
 
 const getComponentInfo = (filepath) => {
   const absPath = path.resolve(process.cwd(), filepath)
@@ -24,10 +25,11 @@ const getComponentInfo = (filepath) => {
   const componentType = path.basename(path.dirname(dir)).replace(/s$/, '')
 
   // start with react-docgen info
-  const components = parse(contents, resolver.findAllComponentDefinitions, [
-    ...defaultHandlers,
-    parserCustomHandler,
-  ])
+  const resolver = new builtinResolvers.FindAllDefinitionsResolver()
+  const components = parse(contents, {
+    resolver,
+    handlers: [...defaultHandlers, parserCustomHandler],
+  })
 
   if (!components.length) {
     throw new Error(`Could not find a component definition in "${filepath}".`)

gulp/plugins/util/getComponentInfo.js renamed to gulp/plugins/util/getComponentInfo.mjs

@@ -1,7 +1,7 @@
 import _ from 'lodash'
-import traverse from '@babel/traverse'
+import { traverse } from '@babel/core'
 
-import parseBuffer from './parseBuffer'
+import parseBuffer from './parseBuffer.mjs'
 
 const getJSXAttributes = (jsxPath) =>
   _.map(_.get(jsxPath, 'node.attributes'), (attr) => ({

gulp/plugins/util/index.js

@@ -0,0 +1,79 @@
+await import('@babel/register')
+
+import _ from 'lodash'
+
+const { names } = (await import('../../../src/elements/Flag/Flag.js')).default
+const { positions } = (await import('../../../src/modules/Popup/lib/positions.js')).default
+const SUI = (await import('../../../src/lib/SUI.js')).default
+
+const evalValue = (value) => eval(value) // eslint-disable-line no-eval
+
+const isTransformable = (value) =>
+  typeof value === 'string' &&
+  (value.includes('SUI') || value.includes('names') || value.includes('positions'))
+
+const uniqValues = (values) => {
+  return values.filter((val, i, arr) => arr.indexOf(`${val}`) === arr.lastIndexOf(`${val}`))
+}
+
+const transformEnumValues = (values) => {
+  return values.flatMap(({ value }) => {
+    if (value === 'names') {
+      return evalValue(value)
+    }
+
+    if (value.startsWith('...SUI')) {
+      return evalValue(value.substring(3))
+    }
+
+    return value.replace(/'/g, '')
+  })
+}
+
+const parseEnum = (propDef) => {
+  const { value } = propDef.type
+
+  if (value) {
+    if (isTransformable(value)) {
+      return { ...propDef.type, value: uniqValues(evalValue(value)) }
+    }
+
+    return { ...propDef.type, value: uniqValues(transformEnumValues(value)) }
+  }
+
+  return {
+    ...propDef.type,
+    value: undefined,
+  }
+}
+
+const parseUnion = (propDef) => {
+  const { value } = propDef.type
+  const values = value.filter((v) => v.name === 'enum').flatMap((type) => parseEnum({ type }).value)
+
+  return {
+    ...propDef.type,
+    name: value.map((v) => v.name).join('|'),
+    value: values,
+  }
+}
+
+const parsers = {
+  enum: parseEnum,
+  union: parseUnion,
+}
+
+export default function parseType(propName, propDef) {
+  if (propDef.type === undefined) {
+    throw new Error(
+      [
+        `The prop "${propName}" does not contain propType definition. This happens if the property is in the `,
+        'defaultProps, but it is not in the propTypes',
+      ].join(' '),
+    )
+  }
+
+  const parser = parsers[propDef.type.name]
+
+  return parser ? parser(propDef) : propDef.type
+}