CMSgov · pwolfert · Jan 31, 2023 · Jan 31, 2023 · Jan 31, 2023 · Jan 31, 2023
diff --git a/.gitignore b/.gitignore
@@ -6,10 +6,6 @@
 **/package-lock.json
 /examples/*/yarn.lock
 
-/examples/cdn/js/*
-/examples/cdn/css/*
-/examples/cdn/fonts/*
-
 # Code editors
 *.sublime-*
 

diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -73,6 +73,10 @@ module.exports = async ({ config }) => {
       __dirname,
       '../packages/design-system/src/styles/'
     ),
+    react: 'preact/compat',
+    'react-dom/test-utils': 'preact/test-utils',
+    'react-dom': 'preact/compat', // Must be below test-utils
+    'react/jsx-runtime': 'preact/jsx-runtime',
   };
 
   return config;

diff --git a/examples/cdn-preact/README.md b/examples/cdn-preact/README.md
@@ -0,0 +1,15 @@
+## Example: Consuming assets from the CDN
+
+This shows the usage of CMS design system preact components from the CDN:
+
+- Include the core CSS bundle and theme
+- Include the JS vendor files and bundle
+- Use CSS layout, utility, and component classes
+- Render Preact components from our library
+
+See also: https://reactjs.org/docs/add-react-to-a-website.html
+
+## Getting started
+
+1. Serve the root of this directory from a webserver, with `npx http-server`
+2. View it in a browser by visiting http://localhost:8080
diff --git a/examples/cdn-preact/copy.sh b/examples/cdn-preact/copy.sh
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+mkdir -p dist/js
+cp -R ../../packages/design-system/dist/js/. dist/js/
diff --git a/examples/cdn-preact/index.html b/examples/cdn-preact/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>CDN Example</title>
+    <link rel="stylesheet" href="https://design.cms.gov/cdn/design-system/6.0.0/css/index.css" />
+    <link
+      rel="stylesheet"
+      href="https://design.cms.gov/cdn/design-system/6.0.0/css/core-theme.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <script src="dist/js/preact.min.umd.js"></script>
+    <script src="dist/js/preact-components.js"></script>
+  </head>
+  <body class="ds-base">
+    <div id="usa-banner"></div>
+    <script>
+      preact.render(preact.h(DesignSystem.UsaBanner), document.getElementById('usa-banner'));
+    </script>
+
+    <header class="ds-base--inverse ds-u-padding-y--3">
+      <div class="ds-l-container">
+        <span class="ds-h3">ExampleWebsite.gov</span>
+      </div>
+    </header>
+
+    <div class="ds-l-container ds-u-padding-top--2">
+      <div class="ds-u-measure--base">
+        <h1 class="ds-h1">CDN Example</h1>
+        <p>
+          This is an example showing how to use the CDN. Some elements are simple and can be easily
+          created by applying a CSS class from the Design System. Some components are more complex
+          or are interactive. Our React-based component library is here for those more complex
+          cases.
+        </p>
+
+        <div id="alert"></div>
+        <script>
+          preact.render(
+            preact.h(DesignSystem.Alert, {
+              heading: 'Hello World',
+              children: 'I was rendered with React!',
+            }),
+            document.getElementById('alert')
+          );
+        </script>
+
+        <form>
+          <div id="month-picker"></div>
+          <script>
+            preact.render(
+              preact.h(DesignSystem.MonthPicker, {
+                label: 'Please select the months you lived abroad.',
+                name: 'months',
+              }),
+              document.getElementById('month-picker')
+            );
+          </script>
+
+          <button type="submit" class="ds-c-button ds-c-button--primary">Submit</button>
+        </form>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/examples/cdn-preact/style.css b/examples/cdn-preact/style.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/examples/cdn-web-components/README.md b/examples/cdn-web-components/README.md
@@ -0,0 +1,15 @@
+## Example: Consuming assets from the CDN
+
+This shows the usage of CMS design system web components from the CDN:
+
+- Include the core CSS bundle and theme
+- Include the JS vendor files and bundle
+- Use CSS layout, utility, and component classes
+- Render web components from our library
+
+See also: https://reactjs.org/docs/add-react-to-a-website.html
+
+## Getting started
+
+1. Serve the root of this directory from a webserver, with `npx http-server`
+2. View it in a browser by visiting http://localhost:8080
diff --git a/examples/cdn-web-components/copy.sh b/examples/cdn-web-components/copy.sh
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+mkdir -p dist/js
+cp -R ../../packages/design-system/dist/js/. dist/js/
diff --git a/examples/cdn-web-components/index.html b/examples/cdn-web-components/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>CDN Example</title>
+    <link rel="stylesheet" href="https://design.cms.gov/cdn/design-system/6.0.0/css/index.css" />
+    <link
+      rel="stylesheet"
+      href="https://design.cms.gov/cdn/design-system/6.0.0/css/core-theme.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body class="ds-base">
+    <header class="ds-base--inverse ds-u-padding-y--3">
+      <div class="ds-l-container">
+        <span class="ds-h3">ExampleWebsite.gov</span>
+        <ds-badge variation="info">Hello world</ds-badge>
+      </div>
+    </header>
+
+    <div class="ds-l-container ds-u-padding-top--2">
+      <div class="ds-u-measure--base">
+        <h1 class="ds-h1">CDN Example</h1>
+        <p>
+          This is an example showing how to use the CDN and our library of interactive web
+          components.
+        </p>
+
+        <ds-alert
+          variation="error"
+          heading="WHOA!!!!!"
+          class-name="ds-u-margin-y--2"
+          analytics="true"
+        >
+          <span>Weeeeeee!!!</span>
+        </ds-alert>
+
+        <ds-button onclick="console.log('hello')" id="the-button">I'm a button</ds-button>
+      </div>
+    </div>
+
+    <script src="dist/js/web-components.js"></script>
+  </body>
+</html>
diff --git a/examples/cdn-web-components/style.css b/examples/cdn-web-components/style.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/examples/preact-app/Gulpfile.js b/examples/preact-app/Gulpfile.js
@@ -0,0 +1,18 @@
+const gulp = require('gulp');
+
+/**
+ * Copy the static assets from the design system, such as the fonts and images.
+ * We could do this manually, but why not automate it so it's easy to do
+ * as things are updated :)
+ */
+gulp.task('copy-design-system', function () {
+  return gulp
+    .src([
+      'node_modules/@cmsgov/design-system/dist/**/fonts/*',
+      'node_modules/@cmsgov/design-system/dist/**/images/*',
+      'node_modules/@cmsgov/design-system/dist/css/*.css',
+    ])
+    .pipe(gulp.dest('./dist/'));
+});
+
+gulp.task('default', gulp.series('copy-design-system'));
diff --git a/examples/preact-app/README.md b/examples/preact-app/README.md
@@ -0,0 +1,9 @@
+## Example: react-app
+
+This example shows how you can incorporate the design system into a Preact application. It uses [Webpack](https://webpack.js.org) to bundle and optimize JavaScript files, [Babel](https://babeljs.io/) to transpile JSX, and [Gulp](http://gulpjs.com/) to copy static assets from the design system.
+
+## Getting started
+
+1. Install packages: `npm install` or `yarn install`
+1. Compile and bundle assets: `npm run build` or `yarn run build`
+1. Open `index.html` in a browser.
diff --git a/examples/preact-app/babel.config.js b/examples/preact-app/babel.config.js
@@ -0,0 +1,26 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  const presets = [
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: 'entry',
+        corejs: '3.0.0',
+      },
+    ],
+  ];
+
+  return {
+    presets,
+    plugins: [
+      [
+        '@babel/plugin-transform-react-jsx',
+        {
+          pragma: 'h',
+          pragmaFrag: 'Fragment',
+        },
+      ],
+    ],
+  };
+};
diff --git a/examples/preact-app/index.html b/examples/preact-app/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Design System</title>
+    <link rel="stylesheet" href="dist/styles/index.css" />
+    <link rel="stylesheet" href="dist/styles/core-theme.css" />
+  </head>
+  <body class="ds-base">
+    <div id="jsx-root">
+      <h1>Build assets before viewing</h1>
+      <p>Seeing this message in the browser? Make sure to run the following command first:</p>
+      <p>
+        <code>yarn run build</code>
+        <br />
+        <em>or</em>
+        <br />
+        <code>npm run build</code>
+      </p>
+    </div>
+
+    <script src="dist/scripts/bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/preact-app/package.json b/examples/preact-app/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "react-app-example",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@cmsgov/design-system": "^6.0.0",
+    "preact": "^10.11.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-react-jsx": "7.20.13",
+    "@babel/preset-env": "^7.20.2",
+    "babel-loader": "^8.0.0",
+    "gulp": "^4.0.2",
+    "http-server": "14.1.1",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "webpack --mode production --progress && gulp",
+    "serve": "http-server"
+  }
+}
diff --git a/examples/preact-app/src/scripts/index.js b/examples/preact-app/src/scripts/index.js
@@ -0,0 +1,50 @@
+/* eslint-disable react/react-in-jsx-scope */
+
+// Named import from main entry file. This example has been configured to use Webpack's tree shaking
+// to only bundle imported components. Without this optimization, all components will be imported
+// your build process.
+
+import { Alert, Button, Drawer, UsaBanner } from '@cmsgov/design-system';
+import { render } from 'preact';
+import { useState } from 'preact/hooks';
+
+const Example = function () {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <UsaBanner />
+      <header className="ds-base--inverse ds-u-padding-y--3">
+        <div className="ds-l-container">
+          <span className="ds-h3">ExampleWebsite.gov</span>
+        </div>
+      </header>
+
+      <div className="ds-l-container ds-u-padding-top--2">
+        <div className="ds-u-measure--base">
+          <h1 className="ds-h1">Preact Example</h1>
+          <Alert heading="Hello world">
+            <p className="ds-c-alert__text">You did it! You&rsquo;ve ran the example.</p>
+            {open && (
+              <Drawer
+                footerTitle="Footer Title"
+                footerBody={<p className="ds-text ds-u-margin--0">Footer content</p>}
+                heading="Drawer Heading"
+                onCloseClick={() => setOpen(false)}
+                hasFocusTrap={true}
+              >
+                Test
+              </Drawer>
+            )}
+            <Button onClick={() => setOpen(true)} className="ds-u-margin-top--2">
+              Learn more
+            </Button>
+          </Alert>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const root = document.querySelector('#jsx-root');
+root.innerHTML = ''; // Preact doesn't replace content with its `render` function
+render(<Example />, root);
diff --git a/examples/preact-app/webpack.config.js b/examples/preact-app/webpack.config.js
@@ -0,0 +1,41 @@
+/**
+ * Use Webpack + Babel to bundle and transpile our JSX
+ */
+const path = require('path');
+const webpack = require('webpack');
+
+const config = {
+  entry: './src/scripts/index.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist/scripts'),
+  },
+  resolve: {
+    alias: {
+      react: 'preact/compat',
+      'react-dom': 'preact/compat',
+      'react/jsx-runtime': 'preact/jsx-runtime',
+    },
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      h: ['preact', 'h'],
+      Fragment: ['preact', 'Fragment'],
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+module.exports = config;