feat: add example dir to infinite scroll

carbon-design-system · Nov 15, 2024 · e4ce0ff · e4ce0ff
1 parent 112945a
commit e4ce0ff
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 54 deletions.
diff --git a/react/infiniteScroll/src/Example/Example.tsx b/react/infiniteScroll/src/Example/Example.tsx
@@ -0,0 +1,11 @@
+import { Grid, Column } from '@carbon/react';
+import { InfiniteScroll } from './InfiniteScroll';
+import './example.scss';
+
+export const Example = () => (
+  <Grid className="page-grid">
+    <Column sm={4} md={8} lg={16}>
+      <InfiniteScroll />
+    </Column>
+  </Grid>
+);
diff --git a/react/infiniteScroll/src/InfiniteScroll.tsx → ...niteScroll/src/Example/InfiniteScroll.tsx b/react/infiniteScroll/src/InfiniteScroll.tsx → ...niteScroll/src/Example/InfiniteScroll.tsx
@@ -17,9 +17,6 @@ const { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } =
   DataTable;
 
 import { fetchData, Resource, ResourceApiResponse } from './makeData';
-import { ExampleLink } from './ExampleLink';
-import { Launch } from '@carbon/react/icons';
-import * as packageJson from '../package.json';
 
 const fetchSize = 50;
 
@@ -148,22 +145,6 @@ export const InfiniteScroll = () => {
   return (
     <div className="virtual-example tanstack-example">
       <h4>Virtualized infinite scroll</h4>
-      <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>
       {/* {process.env.NODE_ENV === 'development' ? (
           <p className='virtual-description'>
             <strong>Notice:</strong> You are currently running React in

diff --git a/react/infiniteScroll/src/customTypings.d.ts → ...niteScroll/src/Example/customTypings.d.ts b/react/infiniteScroll/src/customTypings.d.ts → ...niteScroll/src/Example/customTypings.d.ts
diff --git a/react/infiniteScroll/src/App.scss → ...t/infiniteScroll/src/Example/example.scss b/react/infiniteScroll/src/App.scss → ...t/infiniteScroll/src/Example/example.scss
diff --git a/react/infiniteScroll/src/Example/index.ts b/react/infiniteScroll/src/Example/index.ts
@@ -0,0 +1 @@
+export { Example } from './Example';
diff --git a/react/infiniteScroll/src/makeData.ts → react/infiniteScroll/src/Example/makeData.ts b/react/infiniteScroll/src/makeData.ts → react/infiniteScroll/src/Example/makeData.ts
diff --git a/react/infiniteScroll/src/ExampleLink.tsx b/react/infiniteScroll/src/ExampleLink.tsx
diff --git a/react/infiniteScroll/src/index.scss b/react/infiniteScroll/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/infiniteScroll/src/index.ts b/react/infiniteScroll/src/index.ts
diff --git a/react/infiniteScroll/src/main.tsx b/react/infiniteScroll/src/main.tsx
@@ -2,17 +2,14 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
   CodeSnippet,
-  Column,
-  Grid,
   Header,
   HeaderContainer,
   HeaderName,
 } from '@carbon/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import { InfiniteScroll } from './InfiniteScroll';
-
 import './index.scss';
+import { Example } from './Example';
 const queryClient = new QueryClient();
 
 const renderUIShellHeader = () => (
@@ -35,11 +32,7 @@ createRoot(document.getElementById('root')!).render(
   <QueryClientProvider client={queryClient}>
     <StrictMode>
       {renderUIShellHeader()}
-      <Grid className="page-grid">
-        <Column sm={4} md={8} lg={16}>
-          <InfiniteScroll />
-        </Column>
-      </Grid>
+      <Example />
     </StrictMode>
   </QueryClientProvider>
 );
diff --git a/react/infiniteScroll/tsconfig.app.json b/react/infiniteScroll/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"]