chore: add example links

carbon-design-system · Sep 9, 2024 · fa48432 · fa48432
1 parent b0eec94
commit fa48432
Show file tree

Hide file tree

Showing 71 changed files with 485 additions and 17 deletions.
diff --git a/packages/batch-actions/.env b/packages/batch-actions/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
diff --git a/packages/batch-actions/src/BatchActions.tsx b/packages/batch-actions/src/BatchActions.tsx
@@ -35,6 +35,9 @@ import {
 } from '@tanstack/match-sorter-utils'
 
 import { makeData } from './makeData';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 type Resource = {
   id: string
@@ -174,6 +177,10 @@ export const BatchActions = () => {
     <TableContainer
       title="Batch actions, global filter"
       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/packages/batch-actions/src/ExampleLink.tsx b/packages/batch-actions/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+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/packages/batch-actions/src/index.scss b/packages/batch-actions/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 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/packages/batch-actions/tsconfig.app.json b/packages/batch-actions/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/customizeColumns/.env b/packages/customizeColumns/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
diff --git a/packages/customizeColumns/src/CustomizeColumns.tsx b/packages/customizeColumns/src/CustomizeColumns.tsx
@@ -25,6 +25,9 @@ import { TearsheetNarrow } from '@carbon/ibm-products';
 import { Sortable } from './drag-drop/Sortable';
 import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 type Resource = {
   id: string
@@ -91,6 +94,10 @@ export const CustomizeColumns = () => {
       <TableContainer
         title="Customize column order"
         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/packages/customizeColumns/src/ExampleLink.tsx b/packages/customizeColumns/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+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/packages/customizeColumns/src/index.scss b/packages/customizeColumns/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 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/packages/customizeColumns/tsconfig.app.json b/packages/customizeColumns/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/editableCells/.env b/packages/editableCells/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
diff --git a/packages/editableCells/src/EditableCells.tsx b/packages/editableCells/src/EditableCells.tsx
@@ -17,6 +17,9 @@ import {
   useReactTable,
 } 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
@@ -233,6 +236,10 @@ export const EditableCells = () => {
       <TableContainer
         title="Editable cells"
         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/packages/editableCells/src/ExampleLink.tsx b/packages/editableCells/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+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/packages/editableCells/src/index.scss b/packages/editableCells/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 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/packages/editableCells/tsconfig.app.json b/packages/editableCells/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/filterFlyout/.env b/packages/filterFlyout/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
diff --git a/packages/filterFlyout/src/ExampleLink.tsx b/packages/filterFlyout/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+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/packages/filterFlyout/src/FilterFlyout.tsx b/packages/filterFlyout/src/FilterFlyout.tsx
@@ -46,6 +46,9 @@ import {
 
 import { makeData } from './makeData';
 import { TagOverflow, pkg } from '@carbon/ibm-products';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 pkg.component.TagOverflow = true;
 
@@ -211,6 +214,10 @@ export const FilterFlyout = () => {
       <TableContainer
         title="Filter flyout"
         className="basic-table tanstack-example filter-flyout-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/packages/filterFlyout/src/index.scss b/packages/filterFlyout/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 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/packages/filterFlyout/tsconfig.app.json b/packages/filterFlyout/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/filterPanel/.env b/packages/filterPanel/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
diff --git a/packages/filterPanel/src/ExampleLink.tsx b/packages/filterPanel/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+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/packages/filterPanel/src/FilterPanel.tsx b/packages/filterPanel/src/FilterPanel.tsx
@@ -45,6 +45,9 @@ import {
 
 import { makeData } from './makeData';
 import { TagOverflow, pkg } from '@carbon/ibm-products';
+import { ExampleLink } from './ExampleLink';
+import { Launch } from '@carbon/react/icons'
+import * as packageJson from '../package.json'
 
 pkg.component.TagOverflow = true;
 
@@ -267,6 +270,10 @@ export const FilterPanel = () => {
       <TableContainer
         title="Filter panel"
         className="basic-table tanstack-example filter-flyout-example filter-panel-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/packages/filterPanel/src/index.scss b/packages/filterPanel/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 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/packages/filterPanel/tsconfig.app.json b/packages/filterPanel/tsconfig.app.json
@@ -21,7 +21,8 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ]
+    "types": [ "./src/customTypings.d.ts" ],
+    "resolveJsonModule": true
   },
   "include": ["./src"]
 }
diff --git a/packages/gallery/src/index.scss b/packages/gallery/src/index.scss
@@ -1,8 +1,21 @@
 @use '@carbon/react' with ($font-path: '@ibm/plex');
+@use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
 @use './App.scss';
 
 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/packages/globalFilter/.env b/packages/globalFilter/.env
@@ -0,0 +1,2 @@
+VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
+VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages
diff --git a/packages/globalFilter/src/ExampleLink.tsx b/packages/globalFilter/src/ExampleLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+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>
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_CODE_SANDBOX_URL_ROOT=https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/packages
		VITE_STACK_BLITZ_URL_ROOT=https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/packages