feat: support forge 3.0 (#11)

.autorc

@@ -1,7 +1,6 @@
 plugins:
   - - npm
     - setRcToken: false
-      publishFolder: dist/forge-react/
   - conventional-commits
   - released
   - first-time-contributor

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,7 +7,7 @@ assignees: ''
 ---
 
 **Describe the bug:**
-A clear and concise description of what the bug is.
+<!-- A clear and concise description of what the bug is. -->
 
 **To Reproduce:**
 Steps to reproduce the behavior:
@@ -17,10 +17,10 @@ Steps to reproduce the behavior:
 4. See error
 
 **Expected behavior:**
-A clear and concise description of what you expected to happen.
+<!-- A clear and concise description of what you expected to happen. -->
 
 **Screenshots:**
-If applicable, add screenshots to help explain your problem.
+<!-- If applicable, add screenshots to help explain your problem. -->
 
 **Please complete the following information:**
  - Package version: [e.g. v1.0.0]
@@ -30,4 +30,4 @@ If applicable, add screenshots to help explain your problem.
  - OS: [e.g. Windows, Mac, Linux, iOS, Android, All]
 
 **Additional context:**
-Add any other context about the problem here.
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -7,10 +7,10 @@ assignees: ''
 ---
 
 **Describe the feature:**
-A clear and concise description of the feature.
+<!-- A clear and concise description of the feature. -->
 
 **Describe any alternatives you've considered:**
-A clear and concise description of any alternative features or workarounds you've considered.
+<!-- A clear and concise description of any alternative features or workarounds you've considered. -->
 
 **Additional context:**
-Add any other context or screenshots about the feature request here.
+<!-- Add any other context or screenshots about the feature request here. -->

.github/workflows/auto-pr-check.yml

@@ -2,12 +2,9 @@ name: Pull Request Validation
 
 on:
   pull_request:
-    branches:
-      - next
     types: [opened, synchronize, reopened, labeled, unlabeled]
-  workflow_dispatch:
 
 jobs:
   release:
     name: Pull Request Validation
-    uses: tyler-technologies-oss/forge-automation-shared/.github/workflows/wf-auto-pr-check.yml@v2.8.1
+    uses: tyler-technologies-oss/forge-automation-shared/.github/workflows/wf-auto-pr-check.yml@v2.9.0

.github/workflows/build-pr.yml

@@ -2,17 +2,10 @@ name: Build Pull Request
 
 on:
   pull_request:
-    paths:
-      - '.github/workflows/**/*'
-      - '.eslintrc.json'
-      - 'gulpfile.ts'
-      - 'package.json'
-      - 'tsconfig.json'
-      - 'src/projects/**/*'
 
 jobs:
   build:
     name: Build
-    uses: tyler-technologies-oss/forge-automation-shared/.github/workflows/wf-build-and-test.yml@v2.8.1
+    uses: tyler-technologies-oss/forge-automation-shared/.github/workflows/wf-build-and-test.yml@v2.9.0
     secrets:
       NPM_TOKEN: ${{ secrets.FORGE_NPM_TOKEN }}

.github/workflows/build-release.yml

@@ -1,21 +1,9 @@
-## We only run this workflow on pushes to the next branch. This workflow will
-## first determine if a release is to be published, and if so, build and publish.
-## Otherwise, if not a release, we just perform CI build validation.
-
 name: Build and Release
 
 on:
   push:
     branches:
       - next
-    paths:
-      - '.github/workflows/**/*'
-      - '.eslintrc.json'
-      - 'package.json'
-      - '.autorc'
-      - 'gulpfile.js'
-      - 'tsconfig.json'
-      - 'src/projects/**/*'
   workflow_dispatch:
 
 concurrency: build-release-${{ github.ref }}
@@ -27,15 +15,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Prepare Repository
-        # Fetch full git history and tags
         run: git fetch --unshallow --tags
 
       - name: Cache Dependencies
         id: cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         env:
           cache-name: cache-node-modules
         with:
@@ -47,9 +34,9 @@ jobs:
             ${{ runner.os }}-
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: "16"
+          node-version: "20"
 
       - name: Install
         id: install
@@ -75,7 +62,7 @@ jobs:
 
       ## Detect if any specific files we care about have changed to help us know if we need to execute a CI build or Storybook deployment at all or not
       - name: Check File Changes
-        uses: dorny/paths-filter@v2
+        uses: dorny/paths-filter@v3
         id: file-filter
         with:
           filters: |
@@ -86,7 +73,7 @@ jobs:
               - 'package.json'
               - 'gulpfile.js'
               - 'tsconfig.json'
-              - 'src/projects/**'
+              - 'lib/**'
     outputs:
       is-release: ${{ steps.detect-release.outputs.release }}
       build-files-changed: ${{ steps.file-filter.outputs.build == 'true' }}
@@ -95,7 +82,7 @@ jobs:
   build:
     name: Build
     needs: wf-config
-    uses: tyler-technologies-oss/forge-automation-shared/.github/workflows/wf-build-and-test.yml@v2.8.1
+    uses: tyler-technologies-oss/forge-automation-shared/.github/workflows/wf-build-and-test.yml@v2.9.0
     if: ${{ needs.wf-config.outputs.is-release == 'false' && needs.wf-config.outputs.build-files-changed == 'true' }}
     secrets:
       NPM_TOKEN: ${{ secrets.FORGE_NPM_TOKEN }}
@@ -104,7 +91,7 @@ jobs:
   build-and-release:
     name: Build and Release
     needs: wf-config
-    uses: tyler-technologies-oss/forge-automation-shared/.github/workflows/wf-build-release.yml@v2.8.1
+    uses: tyler-technologies-oss/forge-automation-shared/.github/workflows/wf-build-release.yml@v2.9.0
     if: ${{ needs.wf-config.outputs.is-release == 'true' }}
     with:
       PRODUCTION_RELEASE: true

.gitignore

@@ -1,26 +1,5 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
+node_modules/
+build/
+dist/
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# build
-/dist
+*.log*

README.md

@@ -1,25 +1,28 @@
-# Forge React
+# Tyler Forge™ React Adapter
 
 This repository contains the `@tylertech/forge-react` adapter library for working with
-Forge Web Components within a React application. This library contains React wrapper components,
+Tyler Forge™ components within a React application. This library contains React wrapper components,
 hooks, and other utilities to improve the developer experience when building applications with Forge.
 
 > Note: The `@tylertech/forge-react` package is not required when using Forge with React
 > projects, but it will make the consumption of Forge seamless and feel more native to React developers.
 
 ## The problem
 
-React doesn't pass data through the JavaScript API on HTML elements. This means that any Web Components
-created with the Custom Elements API in the browser will suffer from the same issue when trying to pass
-complex data types such as array, objects, and functions through to the underlying HTML element.
+React doesn't pass data through the JavaScript API (properties) on HTML elements. This means that any Web
+Components created with the Custom Elements API in the browser will suffer from the same issue when trying
+to pass complex data types such as array, objects, and functions through to the underlying HTML element.
 
 Another issue is how event bubbling works in React. Since React uses its own synthetic events system,
 standard HTML event bubbling from custom elements doesn't work, nor does attaching event listeners to
-these custom elements.
+these custom elements for any `CustomEvent` types.
 
 This library provides proxy React component wrappers for all Forge components to ensure that the APIs
 are properly consumed via the JavaScript API (HTML attributes are still usable as well), along with 
-providing the ability to listen to events on the elements.
+providing the ability to listen to custom events on the elements.
+
+> **Note:** React now natively supports communication with custom elements as of React 19. You will now be able
+> to use the standard Forge elements directly (without the React wrappers) in React 19+ going forward!
 
 ## Data binding
 
@@ -30,7 +33,7 @@ work as expected because `data` will get stringified:
 <forge-table data={data}></forge-table>
 ```
 
-By using this library, you will use the React wrapper components instead to ensure this works:
+By using this library, you will use the React wrapper components instead to ensure this works as expected:
 
 ```html
 <ForgeTable data={data} />
@@ -64,7 +67,7 @@ const DialogComponent = () => <div>Dialog component</div>;
 const SomeComponent = () => {
   // You provide a component to display in a `<forge-dialog>` as the first parameter, and
   // any (optional) configuration as the second parameter
-  const [showDialog, hideDialog] = useForgeDialog(DialogComponent, { escapeClose: false });
+  const [showDialog, hideDialog] = useForgeDialog(DialogComponent, { persistent: true });
 
   function handleClick(): void {
     showDialog();
@@ -78,7 +81,7 @@ const SomeComponent = () => {
 };
 ```
 
-Alternatively, if you're using class-based components, you can show a dialog (which internally uses the `useForgeDialog` hook) like this:
+Alternatively, if you're using components, you can show a dialog like this:
 
 ```ts
 import { ForgeDialog } from '@tylertech/forge';
@@ -91,7 +94,7 @@ const SomeComponent = () => {
   }
 
   return (
-    <ForgeDialog open={isOpen} escapeClose={false} onDismiss={() => setOpen(false)}>
+    <ForgeDialog open={isOpen} persistent on-forge-dialog-close={() => setOpen(false)}>
       <DialogComponent />
     </ForgeDialog>
   );
@@ -127,12 +130,9 @@ defineButtonComponent();
 
 ## Development
 
-This repository was created with `create-react-app`, and it contains `src/projects/forge-react`
-directory where the library lives.
-
 The demo application can be started by running `npm start`.
 
-To build the library, run the following: `npm run build:library`.
+To build the library, run the following: `npm run build`.
 
 > The built npm package output will be placed in the `dist/forge-react` directory.
 

commitlint.config.js

@@ -1,7 +1,9 @@
-module.exports = {
+const config = {
   extends: ['@commitlint/config-conventional'],
   rules: {
-    "header-max-length": [0, 'always', 100],
-    "footer-max-line-length": [0, 'always', 100]
+    'header-max-length': [0, 'always', 100],
+    'footer-max-line-length': [0, 'always', 100]
   }
 };
+
+export default config;

src/App.tsx → demo/App.tsx

@@ -1,25 +1,20 @@
 import { createContext, useState } from 'react';
 import { Switch, Route, BrowserRouter } from 'react-router-dom';
-import { ForgeCard } from 'src/projects/forge-react/src';
+import { ForgeCard } from '@tylertech/forge-react';
 import './App.scss';
 import Header from './core/header/Header';
 import SideNav from './core/sidenav/SideNav';
 import routeConfig, { IAppRoute } from './route-config';
-import packageJson from './projects/forge-react/package.json';
 
 export const TestContext = createContext(undefined as any);
 
 function App(): JSX.Element {
   const [open, setOpen] = useState(true);
 
-  function onToggleMenu(): void {
-    setOpen(!open);
-  }
-
   return (
     <BrowserRouter>
-      <Header slot="header" onToggleMenu={onToggleMenu} />
-      <SideNav slot="body-left" open={open} />
+      <Header slot="header" />
+      <SideNav slot="body-left" />
       <main slot="body" className="app-content">
         <TestContext.Provider value={{ value: 'Hello from TestContext!' }}>
           <div>

demo/core/header/Header.tsx

@@ -0,0 +1,30 @@
+import { IAppBarComponent, IconRegistry } from '@tylertech/forge';
+import { PropsWithChildren, useEffect } from 'react';
+import { ForgeAppBar, ForgeIcon } from '@tylertech/forge-react';
+import { tylIconTylerTalkingTLogo } from '@tylertech/tyler-icons/custom';
+import { useHistory } from 'react-router-dom';
+
+export interface HeaderProps {
+  slot: string;
+}
+
+function Header(props: PropsWithChildren<HeaderProps>): JSX.Element {
+  const history = useHistory();
+
+  useEffect(() => {
+    IconRegistry.define(tylIconTylerTalkingTLogo);
+  }, []);
+
+  function handleHref(evt: CustomEvent<void>): void {
+    evt.preventDefault();
+    history.push((evt.target as IAppBarComponent).href);
+  }
+
+  return (
+    <ForgeAppBar href="/" on-forge-app-bar-navigate={handleHref} title-text="Tyler Forge™ - React Adapter" {...props}>
+      <ForgeIcon slot="logo" name="tyler_talking_t_logo" />
+    </ForgeAppBar>
+  );
+}
+
+export default Header;

src/core/home/Home.tsx → demo/core/home/Home.tsx

@@ -1,13 +1,14 @@
 export function Home(): JSX.Element {
   return (
     <>
-      <h2 className="forge-typography--title">Forge React</h2>
-      <p className="forge-typography--body1">
+      <h2 className="forge-typography--heading4">Tyler Forge™ React Adapter</h2>
+      <p>
         A library of React wrapper components and utilities that facilitate usage of Forge Components in React applications
         to enable a more native React development experience.
-
+      </p>
+      <p>
         This demo application acts as a development sandbox for the library, but also aims to provide an example of how to use Forge
-        components in React that utilize the component wrappers an utilities.
+        components in React that utilize the component wrappers and utilities.
       </p>
     </>
   );