chore: Absorb extensions-renderers package (#43)

* chore: Install missing react dependencies * chore: Add SVGR and svg/module.css types * chore: Add CSS modules * chore: Adds SearchableSelect component * chore: Move adaptive card components to new folder * refactor: Update React import usage * chore: Brings across doist-card.css file * chore: Brings across utils * chore: Adds Action Renderers * chore: Adds card element renderers * chore: Adds input renderers * chore: Adds time-picker component * fix: Use default export for css module usage * feat: Set up ESM build * chore: Remove CommonJS module * chore: Bump version * chore: Fix CSS module and SVGR mocks * chore: Adds missing functions/registrations * chore: Update version * chore: Updates typescript and react types package * chore: Bump version * chore: Actually export the register function * chore: Remove pre-release versioning Co-authored-by: Scott Lovegrove <[email protected]>
Doist · Nov 30, 2022 · 2a90d89 · 2a90d89
1 parent e6ebf11
commit 2a90d89
Show file tree

Hide file tree

Showing 35 changed files with 3,459 additions and 1,561 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,9 +15,9 @@
         "@rollup/plugin-typescript": "^8.3.0",
         "@testing-library/user-event": "^7.2.1",
         "@types/jest": "^27.0.0",
-        "@types/node": "^12.12.52",
-        "@types/react": "^16.9.46",
-        "@types/react-dom": "^16.9.8",
+        "@types/node": "18.11.9",
+        "@types/react": "18.0.25",
+        "@types/react-dom": "18.0.9",
         "autoprefixer": "^9.8.6",
         "better-npm-audit": "^3.5.1",
         "chokidar-cli": "^3.0.0",
@@ -40,7 +40,7 @@
         "ts-jest": "^27.1.3",
         "ts-loader": "^8.1.0",
         "tslib": "^2.2.0",
-        "typescript": "^4.4.4",
+        "typescript": "4.7.4",
         "yalc": "^1.0.0-pre.53"
     },
     "prettier": "@doist/prettier-config",

diff --git a/packages/ui-extensions-react/.eslintrc.js b/packages/ui-extensions-react/.eslintrc.js
@@ -5,4 +5,10 @@ module.exports = {
     },
     extends: ['../../.eslintrc.js', '@doist/eslint-config/react', 'react-app'],
     ignorePatterns: ['dist/', '*.config.js', 'es/', 'lib/'],
+    rules: {
+        // Rules no longer necessary with the new JSX Transformer
+        // ref: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
+        'react/jsx-uses-react': 'off',
+        'react/react-in-jsx-scope': 'off',
+    },
 }
diff --git a/packages/ui-extensions-react/jest.config.js b/packages/ui-extensions-react/jest.config.js
@@ -7,6 +7,7 @@ module.exports = {
     setupFilesAfterEnv: ['<rootDir>/setup-tests.ts'],
     modulePathIgnorePatterns: ['<rootDir>/dist/'],
     moduleNameMapper: {
-        '\\.(css|less)$': '<rootDir>/test_utils/styleMock.ts',
+        '\\.(css|less)$': 'identity-obj-proxy',
+        '\\.svg': '<rootDir>/test_utils/svgMock.ts',
     },
 }
diff --git a/packages/ui-extensions-react/package.json b/packages/ui-extensions-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@doist/ui-extensions-react",
-    "version": "8.0.0",
+    "version": "9.1.0",
     "author": "Doist",
     "license": "MIT",
     "main": "dist/index.js",
@@ -36,9 +36,11 @@
     },
     "peerDependencies": {
         "@doist/reactist": "^15.0.0",
-        "@doist/ui-extensions-core": "^4.0.0",
+        "@doist/ui-extensions-core": "^4.1.1",
         "adaptivecards": "^2.9.0",
-        "react": ">=17"
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0",
+        "react-select": "5.3.0"
     },
     "prettier": "@doist/prettier-config",
     "dependencies": {
@@ -51,12 +53,15 @@
         "@storybook/addon-essentials": "^6.3.12",
         "@storybook/addon-links": "^6.3.12",
         "@storybook/react": "^6.3.12",
+        "@svgr/rollup": "6.5.1",
         "@testing-library/dom": "^8.13.0",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^9.5.0",
         "@testing-library/react-hooks": "^3.3.0",
+        "@types/react": "18.0.25",
         "@types/testing-library__jest-dom": "^5.14.3",
         "eslint-config-react-app": "^7.0.0",
+        "identity-obj-proxy": "3.0.0",
         "msw": "^0.36.8",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",

diff --git a/packages/ui-extensions-react/rollup.config.js b/packages/ui-extensions-react/rollup.config.js
@@ -3,20 +3,18 @@ import postcss from 'rollup-plugin-postcss'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import nodeResolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
+import svgr from '@svgr/rollup'
 
 module.exports = {
     input: ['src/index.ts'],
-    output: {
-        dir: 'dist',
-        format: 'cjs',
-        sourcemap: true,
-    },
+    output: [{ dir: 'dist', format: 'esm', sourcemap: true }],
     plugins: [
         typescript({ tsconfig: 'tsconfig.build.json' }),
         postcss({ extract: true }),
         nodeResolve(),
         peerDepsExternal(),
         commonjs(),
+        svgr(),
     ],
     external: ['classnames'],
 }
diff --git a/packages/ui-extensions-react/src/@types/module.css.d.ts b/packages/ui-extensions-react/src/@types/module.css.d.ts
@@ -0,0 +1,9 @@
+declare module '*.module.css' {
+    interface IClassNames {
+        [className: string]: string
+    }
+
+    const classNames: IClassNames
+
+    export = classNames
+}
diff --git a/packages/ui-extensions-react/src/@types/svg.d.ts b/packages/ui-extensions-react/src/@types/svg.d.ts
@@ -0,0 +1,7 @@
+declare module '*.svg' {
+    import { FC, ComponentProps } from 'react'
+
+    const SVG: FC<ComponentProps<'svg'>>
+
+    export = SVG
+}
diff --git a/...act/src/components/AdaptiveCardCanvas.tsx → ...ents/adaptive-card/AdaptiveCardCanvas.tsx b/...act/src/components/AdaptiveCardCanvas.tsx → ...ents/adaptive-card/AdaptiveCardCanvas.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useRef } from 'react'
 
 import classNames from 'classnames'
 
@@ -7,9 +7,9 @@ type AdaptiveCardProps = {
 }
 
 export function AdaptiveCardCanvas({ card }: AdaptiveCardProps): JSX.Element {
-    const cardElementRootRef = React.useRef<HTMLDivElement>(null)
+    const cardElementRootRef = useRef<HTMLDivElement>(null)
 
-    React.useEffect(
+    useEffect(
         function renderAdaptiveCardContent() {
             const rootElement = cardElementRootRef.current
             if (!card || !rootElement) return

diff --git a/...t/src/components/AdaptiveCardRenderer.css → ...ts/adaptive-card/AdaptiveCardRenderer.css b/...t/src/components/AdaptiveCardRenderer.css → ...ts/adaptive-card/AdaptiveCardRenderer.css
diff --git a/.../components/AdaptiveCardRenderer.test.tsx → ...aptive-card/AdaptiveCardRenderer.test.tsx b/.../components/AdaptiveCardRenderer.test.tsx → ...aptive-card/AdaptiveCardRenderer.test.tsx
@@ -1,17 +1,15 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import React from 'react'
-
 import { ActionSet, ClipboardAction, DoistCard, TextBlock } from '@doist/ui-extensions-core'
 
 import { fireEvent, render, screen } from '@testing-library/react'
 import { GlobalRegistry } from 'adaptivecards'
 
-import { ClipboardAction as ClipboardActionist } from '../actions'
-import { getDefaultCard } from '../test/fixtures'
+import { ClipboardAction as ClipboardActionist } from '../../actions'
+import { getDefaultCard } from '../../test/fixtures'
 
 import { AdaptiveCardRenderer } from './AdaptiveCardRenderer'
 
-import type { DoistCardResult } from '../types'
+import type { DoistCardResult } from '../../types'
 
 describe('AdaptiveCardRenderer', () => {
     function emptyOnAction() {

diff --git a/...t/src/components/AdaptiveCardRenderer.tsx → ...ts/adaptive-card/AdaptiveCardRenderer.tsx b/...t/src/components/AdaptiveCardRenderer.tsx → ...ts/adaptive-card/AdaptiveCardRenderer.tsx
@@ -1,6 +1,6 @@
 import './AdaptiveCardRenderer.css'
 
-import * as React from 'react'
+import { useEffect, useMemo } from 'react'
 
 import { Loading, Text } from '@doist/reactist'
 
@@ -13,14 +13,14 @@ import {
     SerializationContext,
 } from 'adaptivecards'
 
-import { ClipboardAction, OpenUrlAction, SubmitActionist } from '../actions'
-import { useRefCallback } from '../hooks'
-import { canSetAutoFocus } from '../utils'
+import { ClipboardAction, OpenUrlAction, SubmitActionist } from '../../actions'
+import { useRefCallback } from '../../hooks'
+import { canSetAutoFocus } from '../../utils'
 
 import { AdaptiveCardCanvas } from './AdaptiveCardCanvas'
 
 import type { DoistCardAction, DoistCardActionData } from '@doist/ui-extensions-core'
-import type { DoistCardResult, ExtensionCard, ExtensionError } from '../types'
+import type { DoistCardResult, ExtensionCard, ExtensionError } from '../../types'
 
 type AdaptiveCardRendererProps = {
     onAction: (action: DoistCardAction, loadingText?: string) => void
@@ -74,7 +74,7 @@ export function AdaptiveCardRenderer({
     customElementParse,
     clipboardHandler,
 }: AdaptiveCardRendererProps): JSX.Element {
-    React.useEffect(() => {
+    useEffect(() => {
         if (result.type === 'error') {
             onError?.(result.error)
         }
@@ -128,7 +128,7 @@ export function AdaptiveCardRenderer({
     const loadingText = loading ? result.loadingText : undefined
     const error = result.type === 'error' ? result.error : undefined
 
-    const adaptiveCard = React.useMemo(() => {
+    const adaptiveCard = useMemo(() => {
         const result = new AdaptiveCard()
         if (hostConfig) {
             result.hostConfig = hostConfig
@@ -137,7 +137,7 @@ export function AdaptiveCardRenderer({
         return result
     }, [handleAction, hostConfig])
 
-    const card = React.useMemo(() => {
+    const card = useMemo(() => {
         if (result.type !== 'loaded') return undefined
         const cardData = result.card
 

diff --git a/packages/ui-extensions-react/src/components/adaptive-card/index.ts b/packages/ui-extensions-react/src/components/adaptive-card/index.ts
@@ -0,0 +1,2 @@
+export * from './AdaptiveCardCanvas'
+export * from './AdaptiveCardRenderer'
diff --git a/packages/ui-extensions-react/src/components/doist-card.css b/packages/ui-extensions-react/src/components/doist-card.css
@@ -0,0 +1,86 @@
+:root {
+    --doist-card-color: rgba(0, 0, 0, 0.88);
+    --doist-card-background: rgb(255, 255, 255);
+
+    --doist-card-error-color: red;
+}
+
+.adaptive-card-container {
+    white-space: normal;
+
+    overflow: auto;
+    position: relative;
+}
+
+.adaptive-card-container option {
+    color: var(--doist-card-color) !important;
+    background: var(--doist-card-background);
+}
+
+.adaptive-card-content {
+    white-space: normal;
+
+    overflow: auto;
+    position: relative;
+    height: inherit;
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+.adaptive-card-content option {
+    color: var(--doist-card-color) !important;
+    background: var(--doist-card-background);
+}
+
+.adaptive-card-content p {
+    margin-bottom: var(--reactist-spacing-medium);
+}
+
+.adaptive-renderer-container {
+    position: relative;
+    height: inherit;
+    overflow: auto;
+}
+
+.input-inline-button {
+    margin-left: 0;
+    white-space: nowrap;
+}
+
+.ac-input-container {
+    width: 100%;
+}
+
+.ac-error {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: auto;
+    margin-bottom: auto;
+    color: var(--doist-card-error-color);
+}
+
+.ac-anchor__attention {
+    text-decoration: underline;
+    color: var(--reactist-actionable-destructive-idle-fill);
+}
+
+.ac-anchor__attention:hover {
+    text-decoration: underline;
+    color: var(--reactist-actionable-destructive-hover-fill);
+}
+
+.ac-selectable {
+    cursor: pointer;
+}
+
+.ac-action-stretch {
+    width: 100%;
+}
+
+.ac-adaptiveCard {
+    padding: 0 !important;
+}
+
+.ac-textarea {
+    resize: vertical;
+}
diff --git a/packages/ui-extensions-react/src/components/index.ts b/packages/ui-extensions-react/src/components/index.ts
@@ -1,2 +1,5 @@
-export * from './AdaptiveCardCanvas'
-export * from './AdaptiveCardRenderer'
+import './doist-card.css'
+
+export * from './adaptive-card'
+export * from './searchable-select'
+export * from './time-picker'
diff --git a/packages/ui-extensions-react/src/components/searchable-select/index.ts b/packages/ui-extensions-react/src/components/searchable-select/index.ts
@@ -0,0 +1 @@
+export * from './searchable-select'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './AdaptiveCardCanvas'
		export * from './AdaptiveCardRenderer'