feat: add example dirs across remaning react examples

react/pagination/src/Example/Example.tsx

@@ -0,0 +1,11 @@
+import { Grid, Column } from '@carbon/react';
+import { PaginationExample } from './Pagination';
+import './example.scss';
+
+export const Example = () => (
+  <Grid className="page-grid">
+    <Column sm={4} md={8} lg={16}>
+      <PaginationExample />
+    </Column>
+  </Grid>
+);

react/pagination/src/Pagination.tsx → react/pagination/src/Example/Pagination.tsx

@@ -19,9 +19,6 @@ import {
   getPaginationRowModel,
 } 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;
@@ -88,24 +85,6 @@ export const PaginationExample = () => {
     <TableContainer
       title="Pagination"
       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(),
       }}>

react/pagination/src/Example/index.ts

@@ -0,0 +1 @@
+export { Example } from './Example';

react/pagination/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;
-}

react/pagination/src/main.tsx

@@ -2,14 +2,11 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
   CodeSnippet,
-  Column,
-  Grid,
   Header,
   HeaderContainer,
   HeaderName,
 } from '@carbon/react';
-
-import { PaginationExample } from './Pagination';
+import { Example } from './Example';
 
 import './index.scss';
 
@@ -32,10 +29,6 @@ const renderUIShellHeader = () => (
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     {renderUIShellHeader()}
-    <Grid className="page-grid">
-      <Column sm={4} md={8} lg={16}>
-        <PaginationExample />
-      </Column>
-    </Grid>
+    <Example />
   </StrictMode>
 );

react/pagination/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"]

react/resizing/src/Example/Example.tsx

@@ -0,0 +1,11 @@
+import { Grid, Column } from '@carbon/react';
+import { ResizableCols } from './ResizableCols';
+import './example.scss';
+
+export const Example = () => (
+  <Grid className="page-grid">
+    <Column sm={4} md={8} lg={16}>
+      <ResizableCols />
+    </Column>
+  </Grid>
+);

react/resizing/src/ResizableCols.tsx → react/resizing/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(),
       }}>

react/resizing/src/Example/index.ts

@@ -0,0 +1 @@
+export { Example } from './Example';

react/resizing/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;
-}

react/resizing/src/main.tsx

@@ -2,16 +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 { Example } from './Example';
 
 const renderUIShellHeader = () => (
   <HeaderContainer
@@ -32,10 +29,6 @@ const renderUIShellHeader = () => (
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     {renderUIShellHeader()}
-    <Grid className="page-grid">
-      <Column sm={4} md={8} lg={16}>
-        <ResizableCols />
-      </Column>
-    </Grid>
+    <Example />
   </StrictMode>
 );

react/resizing/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"]

react/row-actions/src/Example/Example.tsx

@@ -0,0 +1,15 @@
+import { Grid, Column } from '@carbon/react';
+import { RowActions } from './RowActions';
+import { RowWithContextMenu } from './RowWithContextMenu';
+import './example.scss';
+
+export const Example = () => (
+  <Grid className="page-grid">
+    <Column sm={4} md={8} lg={16}>
+      <RowActions />
+    </Column>
+    <Column sm={4} md={8} lg={16}>
+      <RowWithContextMenu />
+    </Column>
+  </Grid>
+);

react/row-actions/src/RowActions.tsx → react/row-actions/src/Example/RowActions.tsx

@@ -1,7 +1,6 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 
 import {
-  Column,
   flexRender,
   getCoreRowModel,
   useReactTable,
@@ -12,9 +11,6 @@ import { DataTable, IconButton, TableContainer } from '@carbon/react';
 import { TrashCan, Edit } from '@carbon/react/icons';
 const { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } =
   DataTable;
-import { ExampleLink } from './ExampleLink';
-import { Launch } from '@carbon/react/icons';
-import * as packageJson from '../package.json';
 
 export const RowActions = () => {
   const onDelete = (row: Resource) => {
@@ -91,25 +87,7 @@ export const RowActions = () => {
   return (
     <TableContainer
       title="Row actions"
-      className="tanstack-example sticky-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>
-      }>
+      className="tanstack-example sticky-example">
       <Table>
         <TableHead>
           {table.getHeaderGroups().map((headerGroup) => (

react/row-actions/src/RowWithContextMenu.tsx → react/row-actions/src/Example/RowWithContextMenu.tsx

@@ -14,11 +14,9 @@ import {
   TableContainer,
   useContextMenu,
 } from '@carbon/react';
+import { TrashCan } from '@carbon/react/icons';
 const { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } =
   DataTable;
-import { ExampleLink } from './ExampleLink';
-import { Launch, TrashCan } from '@carbon/react/icons';
-import * as packageJson from '../package.json';
 
 const ContextRow = ({ row, children, updateData, data }) => {
   const el = useRef(null);
@@ -98,25 +96,7 @@ export const RowWithContextMenu = () => {
   return (
     <TableContainer
       title="Row with context menu"
-      className="tanstack-example sticky-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>
-      }>
+      className="tanstack-example sticky-example">
       <Table>
         <TableHead>
           {table.getHeaderGroups().map((headerGroup) => (

react/row-actions/src/Example/index.ts

@@ -0,0 +1 @@
+export { Example } from './Example';

react/row-actions/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;
-}