From 26f53d63e5eeb86d5d7e6bb52feb6ddf1e927f21 Mon Sep 17 00:00:00 2001
From: Matt Gallo <mdgallo@us.ibm.com>
Date: Fri, 15 Nov 2024 12:21:17 -0500
Subject: [PATCH] feat: add example dir to mix and match

---
 react/mix-and-match/src/Example/Example.tsx   | 15 +++++++++++++
 .../src/{ => Example}/LegacyGrid.tsx          |  0
 .../src/{ => Example}/ResizableCols.tsx       | 21 -------------------
 .../src/{ => Example}/customTypings.d.ts      |  0
 .../src/{App.scss => Example/example.scss}    |  0
 react/mix-and-match/src/Example/index.ts      |  1 +
 .../src/{ => Example}/makeData.ts             |  0
 react/mix-and-match/src/ExampleLink.tsx       |  9 --------
 react/mix-and-match/src/index.scss            | 13 ------------
 react/mix-and-match/src/index.ts              |  3 ---
 react/mix-and-match/src/main.tsx              | 15 ++-----------
 react/mix-and-match/tsconfig.app.json         |  2 +-
 12 files changed, 19 insertions(+), 60 deletions(-)
 create mode 100644 react/mix-and-match/src/Example/Example.tsx
 rename react/mix-and-match/src/{ => Example}/LegacyGrid.tsx (100%)
 rename react/mix-and-match/src/{ => Example}/ResizableCols.tsx (86%)
 rename react/mix-and-match/src/{ => Example}/customTypings.d.ts (100%)
 rename react/mix-and-match/src/{App.scss => Example/example.scss} (100%)
 create mode 100644 react/mix-and-match/src/Example/index.ts
 rename react/mix-and-match/src/{ => Example}/makeData.ts (100%)
 delete mode 100644 react/mix-and-match/src/ExampleLink.tsx
 delete mode 100644 react/mix-and-match/src/index.ts

diff --git a/react/mix-and-match/src/Example/Example.tsx b/react/mix-and-match/src/Example/Example.tsx
new file mode 100644
index 0000000..12f617a
--- /dev/null
+++ b/react/mix-and-match/src/Example/Example.tsx
@@ -0,0 +1,15 @@
+import { Grid, Column } from '@carbon/react';
+import { ResizableCols } from './ResizableCols';
+import { LegacyGrid } from './LegacyGrid';
+import './example.scss';
+
+export const Example = () => (
+  <Grid className="page-grid">
+    <Column sm={4} md={8} lg={16}>
+      <ResizableCols />
+    </Column>
+    <Column sm={4} md={8} lg={16}>
+      <LegacyGrid />
+    </Column>
+  </Grid>
+);
diff --git a/react/mix-and-match/src/LegacyGrid.tsx b/react/mix-and-match/src/Example/LegacyGrid.tsx
similarity index 100%
rename from react/mix-and-match/src/LegacyGrid.tsx
rename to react/mix-and-match/src/Example/LegacyGrid.tsx
diff --git a/react/mix-and-match/src/ResizableCols.tsx b/react/mix-and-match/src/Example/ResizableCols.tsx
similarity index 86%
rename from react/mix-and-match/src/ResizableCols.tsx
rename to react/mix-and-match/src/Example/ResizableCols.tsx
index 2152c61..d6f4dd7 100644
--- a/react/mix-and-match/src/ResizableCols.tsx
+++ b/react/mix-and-match/src/Example/ResizableCols.tsx
@@ -18,9 +18,6 @@ import {
   ColumnResizeMode,
 } from '@tanstack/react-table';
 import { makeData } from './makeData';
-import { ExampleLink } from './ExampleLink';
-import { Launch } from '@carbon/react/icons';
-import * as packageJson from '../package.json';
 
 type Resource = {
   id: string;
@@ -80,24 +77,6 @@ export const ResizableCols = () => {
     <TableContainer
       title="Resizable columns"
       className="basic-table tanstack-example"
-      description={
-        <span className="flex">
-          <ExampleLink
-            url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${
-              packageJson.name
-            }`}
-            icon={Launch}
-            label="Code sandbox"
-          />
-          <ExampleLink
-            url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${
-              packageJson.name
-            }`}
-            icon={Launch}
-            label="StackBlitz"
-          />
-        </span>
-      }
       style={{
         width: table.getCenterTotalSize(),
       }}>
diff --git a/react/mix-and-match/src/customTypings.d.ts b/react/mix-and-match/src/Example/customTypings.d.ts
similarity index 100%
rename from react/mix-and-match/src/customTypings.d.ts
rename to react/mix-and-match/src/Example/customTypings.d.ts
diff --git a/react/mix-and-match/src/App.scss b/react/mix-and-match/src/Example/example.scss
similarity index 100%
rename from react/mix-and-match/src/App.scss
rename to react/mix-and-match/src/Example/example.scss
diff --git a/react/mix-and-match/src/Example/index.ts b/react/mix-and-match/src/Example/index.ts
new file mode 100644
index 0000000..8765fbd
--- /dev/null
+++ b/react/mix-and-match/src/Example/index.ts
@@ -0,0 +1 @@
+export { Example } from './Example';
diff --git a/react/mix-and-match/src/makeData.ts b/react/mix-and-match/src/Example/makeData.ts
similarity index 100%
rename from react/mix-and-match/src/makeData.ts
rename to react/mix-and-match/src/Example/makeData.ts
diff --git a/react/mix-and-match/src/ExampleLink.tsx b/react/mix-and-match/src/ExampleLink.tsx
deleted file mode 100644
index 7a03b61..0000000
--- a/react/mix-and-match/src/ExampleLink.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const ExampleLink = ({ icon, label, url }) => {
-  const Icon = icon;
-  return (
-    <a className="example--link" href={url} target="_blank">
-      {icon && <Icon className="example--link__icon" />}
-      {label}
-    </a>
-  );
-};
diff --git a/react/mix-and-match/src/index.scss b/react/mix-and-match/src/index.scss
index 8965062..e3f9104 100644
--- a/react/mix-and-match/src/index.scss
+++ b/react/mix-and-match/src/index.scss
@@ -3,21 +3,8 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App';
 
 body {
   margin: 0;
   padding: 0;
 }
-
-.example--link {
-  @include type.type-style('label-01');
-
-  display: flex;
-  align-items: center;
-  margin-right: 0.5rem;
-}
-
-.example--link__icon {
-  margin-right: 0.25rem;
-}
diff --git a/react/mix-and-match/src/index.ts b/react/mix-and-match/src/index.ts
deleted file mode 100644
index 0229c69..0000000
--- a/react/mix-and-match/src/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ResizableCols } from './ResizableCols';
-
-export { ResizableCols };
diff --git a/react/mix-and-match/src/main.tsx b/react/mix-and-match/src/main.tsx
index b0833b4..26b45da 100644
--- a/react/mix-and-match/src/main.tsx
+++ b/react/mix-and-match/src/main.tsx
@@ -2,17 +2,13 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
   CodeSnippet,
-  Column,
-  Grid,
   Header,
   HeaderContainer,
   HeaderName,
 } from '@carbon/react';
 
-import { ResizableCols } from './ResizableCols';
-
 import './index.scss';
-import { LegacyGrid } from './LegacyGrid';
+import { Example } from './Example';
 
 const renderUIShellHeader = () => (
   <HeaderContainer
@@ -33,13 +29,6 @@ const renderUIShellHeader = () => (
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     {renderUIShellHeader()}
-    <Grid className="page-grid">
-      <Column sm={4} md={8} lg={16}>
-        <ResizableCols />
-      </Column>
-      <Column sm={4} md={8} lg={16}>
-        <LegacyGrid />
-      </Column>
-    </Grid>
+    <Example />
   </StrictMode>
 );
diff --git a/react/mix-and-match/tsconfig.app.json b/react/mix-and-match/tsconfig.app.json
index a68cf5e..a6e3949 100644
--- a/react/mix-and-match/tsconfig.app.json
+++ b/react/mix-and-match/tsconfig.app.json
@@ -21,7 +21,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ],
+    "types": ["./src/Example/customTypings.d.ts"],
     "resolveJsonModule": true
   },
   "include": ["./src"]