feat(#2609): add doc for GoabDataGrid

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.10.0-dev.8",
-    "@abgov/ui-components-common": "1.10.0-dev.2",
-    "@abgov/web-components": "1.40.0-dev.17",
+    "@abgov/react-components": "6.10.0-next.1",
+    "@abgov/ui-components-common": "1.10.0-next.1",
+    "@abgov/web-components": "1.40.0-next.1",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",

src/components/sandbox/Sandbox.tsx

@@ -21,12 +21,12 @@ type Flag = "reactive" | "template-driven" | "event";
 type ComponentType = "goa" | "codesnippet";
 type Serializer = (el: any, properties: ComponentBinding[]) => string;
 
-interface SandboxProps {
+interface SandboxProps<T = Record<string, unknown>> {
   properties?: ComponentBinding[];
   formItemProperties?: ComponentBinding[];
   note?: string | { type?: GoabCalloutType; heading?: string; content: string };
   fullWidth?: boolean;
-  onChange?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;
+  onChange?: (bindings: ComponentBinding[], props: T) => void;
   onChangeFormItemBindings?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;
   flags?: Flag[];
   skipRender?: boolean; // prevent rendering the snippet, to allow custom code to be shown
@@ -41,11 +41,11 @@ interface SandboxProps {
 
 type SandboxViewProps = {
   fullWidth?: boolean;
-  sandboxProps: SandboxProps;
+  sandboxProps: SandboxProps<unknown>;
   background?: string;
 };
 
-export const Sandbox = (props: SandboxProps) => {
+export const Sandbox = <T = Record<string, unknown>,>(props: SandboxProps<T>) => {
   const {language: lang, version} = useContext(LanguageVersionContext);
   const [formatLang, setFormatLang] = useState<string>("");
 
@@ -92,10 +92,20 @@ export const Sandbox = (props: SandboxProps) => {
   }
 
   function onChangeFormItemBindings(bindings: ComponentBinding[]) {
-    props.onChangeFormItemBindings?.(bindings, toKeyValue(bindings));
+    props.onChangeFormItemBindings?.(bindings, toFormItemKeyValue(bindings));
   }
 
-  function toKeyValue(bindings: ComponentBinding[]) {
+  function toKeyValue(bindings: ComponentBinding[]): T {
+    return bindings.reduce((acc: Record<string, unknown>, prop: ComponentBinding) => {
+      if (typeof prop.value === "string" && prop.value === "") {
+        return acc;
+      }
+      acc[prop.name] = prop.value;
+      return acc;
+    }, {}) as unknown as T;
+  }
+
+  function toFormItemKeyValue(bindings: ComponentBinding[]): Record<string, unknown> {
     return bindings.reduce((acc: Record<string, unknown>, prop: ComponentBinding) => {
       if (typeof prop.value === "string" && prop.value === "") {
         return acc;
@@ -117,7 +127,7 @@ export const Sandbox = (props: SandboxProps) => {
 
   return (
     <>
-    {props.skipRenderDom ? null : <SandboxView fullWidth={props.fullWidth} sandboxProps={props} background={props.background} />}
+    {props.skipRenderDom ? null : <SandboxView fullWidth={props.fullWidth} sandboxProps={props as SandboxProps<unknown>} background={props.background} />}
 
       {/* Only render the GoAAccordion if props.properties is provided */}
       {props.properties && props.properties.length > 0 && (
@@ -141,7 +151,7 @@ export const Sandbox = (props: SandboxProps) => {
           />
         </GoabAccordion>
       )}
-      <SandboxCode props={props} formatLang={formatLang} lang={lang} serializers={serializers} version={version} />
+      <SandboxCode props={props as SandboxProps<unknown>} formatLang={formatLang} lang={lang} serializers={serializers} version={version} />
       {props.note &&
         (typeof props.note === "string" ? (
           <p className="sandbox-note">{props.note}</p>
@@ -162,7 +172,7 @@ export const Sandbox = (props: SandboxProps) => {
 };
 
 type SandboxCodeProps = {
-  props: SandboxProps & { children: ReactNode };
+  props: SandboxProps<unknown> & { children: ReactNode };
   lang: string;
   formatLang: string;
   serializers: Record<string, Serializer>;
@@ -246,7 +256,7 @@ function SandboxCode(p: SandboxCodeProps) {
 // to be displayed, while hiding the non-reactive ones
 type AdditionalCodeSnippetsProps = {
   tags: string[];
-  sandboxProps: SandboxProps;
+  sandboxProps: SandboxProps<unknown>;
 }
 function AdditionalCodeSnippets(props: AdditionalCodeSnippetsProps) {
   const matches = (list: string[]): boolean => {
@@ -259,6 +269,12 @@ function AdditionalCodeSnippets(props: AdditionalCodeSnippetsProps) {
         Array.isArray(el.props.tags)
           ? el.props.tags
           : [el.props.tags];
+
+      const isSharedSnippet = componentTags.includes("angular") && componentTags.includes("react");
+      if (isSharedSnippet) {
+        return props.tags.some(tag => componentTags.includes(tag));
+      }
+
       if (props.tags.length !== componentTags.length)
         return false;
       return matches(componentTags);
@@ -269,7 +285,7 @@ function AdditionalCodeSnippets(props: AdditionalCodeSnippetsProps) {
 // Filters components from within the Sandbox children
 // i.e. Get all the <CodeSnippet> components
 type ComponentListProps = {
-  sandboxProps: SandboxProps;
+  sandboxProps: SandboxProps<unknown>;
   type: ComponentType;
 }
 function ComponentList(props: ComponentListProps): ReactElement[] {
@@ -289,7 +305,7 @@ function ComponentList(props: ComponentListProps): ReactElement[] {
 type ComponentOutputProps = {
   formatLang: string;
   type: "angular" | "angular-reactive" | "angular-template-driven" | "react";
-  sandboxProps: SandboxProps;
+  sandboxProps: SandboxProps<unknown>;
   serializer: Serializer;
 }
 

src/examples/data-grid/DataGridExamples.tsx

@@ -0,0 +1,27 @@
+import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import { BasicTableWithKeyboardNavigation } from "./basic-table-with-keyboard-navigation.tsx";
+import { SortableTableWithRowSelection } from "./sortable-table-with-row-selection.tsx";
+import { LayoutModeWithCards } from "./layout-mode-with-cards.tsx";
+
+interface DataGridExamplesProps {
+  isGridReady?: boolean;
+}
+
+export function DataGridExamples({
+  isGridReady = true,
+}: DataGridExamplesProps) {
+  return (
+    <>
+      <SandboxHeader exampleTitle="Basic table with keyboard navigation" />
+      <BasicTableWithKeyboardNavigation isGridReady={isGridReady} />
+
+      <SandboxHeader exampleTitle="Sortable table with row selection" />
+      <SortableTableWithRowSelection isGridReady={isGridReady} />
+
+      <SandboxHeader exampleTitle="Layout mode with cards" />
+      <LayoutModeWithCards isGridReady={isGridReady} />
+    </>
+  );
+}
+
+export default DataGridExamples;