datagrid TODO

packages/website/docs/components/tabular_content/data_grid/_category_.yml

@@ -0,0 +1,3 @@
+label: 'Data grid'
+collapsed: true
+position: 2

packages/website/docs/components/tabular_content/data_grid/_grid_configuration_wrapper.tsx

@@ -0,0 +1,146 @@
+import { css } from '@emotion/react';
+import {
+  EuiSplitPanel,
+  EuiButtonGroup,
+  EuiFormRow,
+  EuiCodeBlock,
+  useEuiTheme,
+} from '@elastic/eui';
+
+export const ConfigurationDemoWithSnippet = ({
+  children,
+  configuration,
+  snippet,
+  column = true,
+}) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <EuiSplitPanel.Outer hasBorder>
+      <EuiSplitPanel.Inner
+        grow={false}
+        css={
+          column &&
+          css`
+            display: flex;
+            flex-wrap: wrap;
+            gap: ${euiTheme.size.base};
+          `
+        }
+      >
+        <div
+          css={
+            column
+              ? css`
+                  flex: 0 0 350px;
+
+                  .euiFormRow__labelWrapper {
+                    flex-basis: 10ch !important;
+                  }
+
+                  .euiFormRow__fieldWrapper {
+                    flex-grow: 1;
+                  }
+
+                  @media (max-width: ${euiTheme.breakpoint.s}px) {
+                    flex: 1 1 100%;
+
+                    .euiFormRow {
+                      max-inline-size: 100%;
+                      inline-size: 100%;
+                    }
+                  }
+                `
+              : css`
+                  margin-block-end: ${euiTheme.size.l};
+                `
+          }
+        >
+          {configuration.map(
+            ({ label, options, idSelected, onChange, nestedConfig }) => (
+              <>
+                <EuiFormRow
+                  label={label}
+                  display="columnCompressed"
+                  fullWidth={!column}
+                >
+                  <EuiButtonGroup
+                    isFullWidth
+                    buttonSize="compressed"
+                    legend={label}
+                    options={options}
+                    idSelected={idSelected}
+                    onChange={onChange}
+                  />
+                </EuiFormRow>
+                {nestedConfig &&
+                  nestedConfig.map(
+                    ({ label, options, idSelected, onChange }) => (
+                      <EuiFormRow
+                        label={label}
+                        display="columnCompressed"
+                        fullWidth={!column}
+                        css={css`
+                          .euiFormRow__labelWrapper {
+                            padding-inline-start: ${euiTheme.size.l};
+                          }
+                        `}
+                      >
+                        <EuiButtonGroup
+                          isFullWidth
+                          buttonSize="compressed"
+                          legend={label}
+                          options={options}
+                          idSelected={idSelected}
+                          onChange={onChange}
+                        />
+                      </EuiFormRow>
+                    )
+                  )}
+              </>
+            )
+          )}
+        </div>
+
+        <div
+          css={css`
+            flex: 1 0 auto;
+            min-inline-size: 0;
+
+            & > * {
+              inline-size: 100%;
+              block-size: 100%;
+            }
+          `}
+        >
+          {children}
+        </div>
+      </EuiSplitPanel.Inner>
+      {snippet && (
+        <>
+          <EuiSplitPanel.Inner
+            color="subdued"
+            paddingSize="none"
+            grow={false}
+            css={{ borderBlockStart: euiTheme.border.thin }}
+          >
+            <EuiCodeBlock
+              language="tsx"
+              fontSize="m"
+              paddingSize="m"
+              isCopyable
+            >
+              {snippet}
+            </EuiCodeBlock>
+          </EuiSplitPanel.Inner>
+        </>
+      )}
+    </EuiSplitPanel.Outer>
+  );
+};
+
+export const objectConfigToSnippet = (config: object) => {
+  let snippet = JSON.stringify(config, null, 2);
+  return snippet.replace(/^[ ]{2,}"[^:\n\r]+(?<!\\)":/gm, (match) =>
+    match.replace(/"/g, '')
+  );
+};

packages/website/docs/components/tabular_content/data_grid/_prop_snippet_table.tsx

@@ -0,0 +1,91 @@
+import { useMemo, FC, ReactNode } from 'react';
+import {
+  EuiBasicTable,
+  EuiBasicTableColumn,
+  EuiMarkdownFormat,
+  getDefaultEuiMarkdownPlugins,
+  EuiCodeBlock,
+  EuiLink,
+  EuiSpacer,
+} from '@elastic/eui';
+import { ProcessedComponent } from '@elastic/eui-docgen';
+
+type DataGridPropSnippetTableProps = {
+  propSnippetMap: Record<string, string | ReactNode>;
+  linksMap?: Record<string, string>;
+  docgen: ProcessedComponent;
+};
+
+const { processingPlugins, parsingPlugins } = getDefaultEuiMarkdownPlugins({
+  exclude: ['lineBreaks'],
+});
+
+const columns: Array<EuiBasicTableColumn<{}>> = [
+  {
+    name: 'Prop',
+    render: ({ propName, propDescription }) => (
+      <>
+        {propName}
+        {propDescription && (
+          <>
+            <EuiSpacer size="s" />
+            <EuiMarkdownFormat
+              textSize="s"
+              processingPluginList={processingPlugins}
+              parsingPluginList={parsingPlugins}
+            >
+              {propDescription}
+            </EuiMarkdownFormat>
+          </>
+        )}
+      </>
+    ),
+    textOnly: true,
+    valign: 'top',
+  },
+  {
+    field: 'snippet',
+    name: 'Sample snippet',
+    render: (snippet: string | ReactNode) =>
+      typeof snippet === 'string' ? (
+        <EuiCodeBlock
+          fontSize="s"
+          paddingSize="s"
+          className="eui-fullWidth"
+          isCopyable
+          language="tsx"
+        >
+          {snippet}
+        </EuiCodeBlock>
+      ) : (
+        snippet
+      ),
+    valign: 'top',
+  },
+];
+
+export const DataGridPropSnippetTable: FC<DataGridPropSnippetTableProps> = ({
+  propSnippetMap,
+  linksMap,
+  docgen,
+}) => {
+  const items = useMemo(
+    () =>
+      Object.entries(propSnippetMap).map(([prop, snippet]) => {
+        const propLink = linksMap?.[prop];
+        const propName = propLink ? (
+          <EuiLink href={propLink}>
+            <strong>{prop}</strong>
+          </EuiLink>
+        ) : (
+          <strong>{prop}</strong>
+        );
+        const propDescription = docgen.props[prop]?.description;
+
+        return { propName, propDescription, snippet };
+      }),
+    [propSnippetMap]
+  );
+
+  return <EuiBasicTable items={items} columns={columns} />;
+};