From e2408d0157e19126475e326ab19afd0fb46436f7 Mon Sep 17 00:00:00 2001
From: Tak Tran <contact@tutaktran.com>
Date: Tue, 25 Jun 2024 16:03:34 +0100
Subject: [PATCH] AG-11949 - Add license setup page (#1864)

* AG-11949 - Make License setup work on charts

Move Code and Snippet components to shared folder

* AG-11949 - Remove ag-website-shared from ignored

* AG-11949 - Update charts dependencies and snippets for license setup

* AG-11949 - Update useLicenseData with grid update

* AG-11949 - Show charts related errors

* AG-11949 - Add right hand menu for license setup

Remove hiding menus based on commented out code - not used anymore.

* AG-11949 - Don't set license data from url

Don't need to configure anything on charts licenses

* AG-11949 - Fix formatting

* AG-11949 - Update license setup copy

* AG-11949 - Add root eslint config for ag-website-shared

Need to update, after eslint 9.x upgrade

* AG-11949 - Add expiry back in to license setup
---
 .nxignore                                     |   1 -
 .prettierignore                               |   1 -
 eslint.config.mjs                             |  39 +++
 .../src/components/code/Code.module.scss      | 111 ++++++++
 .../src/components/code}/Code.tsx             |   0
 .../components/LicenseSetup.astro             |  21 --
 .../components/LicenseSetup.module.scss       |   9 +-
 .../license-setup/components/LicenseSetup.tsx | 253 ++++++++++--------
 .../utils/getDependencies.test.ts             |  67 ++++-
 .../license-setup/utils/getDependencies.ts    |  46 +++-
 .../license-setup/utils/getSnippets.ts        |  18 +-
 .../license-setup/utils/useLicenseData.ts     |  52 ++--
 .../utils/useUpdateDataFromUrl.ts             |  40 +--
 .../src/components/snippet/EmbedSnippet.astro |   4 +-
 .../src/components/snippet/Snippet.tsx        |  65 +++++
 .../snippet/SnippetFromRemoteUrl.tsx          |   2 +-
 .../style-guide/TextElements.tsx              |   3 +-
 .../src/images/fw-logos/index.ts              |   4 +-
 .../src/markdoc/tags/embedSnippet.ts          |  18 ++
 .../src/markdoc/tags/licenseSetup.ts          |   6 -
 .../src/utils/throwDevWarning.ts              |  19 ++
 packages/ag-charts-website/markdoc.config.ts  |  20 +-
 .../license-setup/LicenseSetup.astro          |  21 ++
 .../components/SideNavigation.tsx             |  39 +--
 .../pages-navigation/hooks/useScrollSpy.ts    |  26 +-
 .../src/components/snippet/Snippet.tsx        |  44 ---
 packages/ag-charts-website/src/constants.ts   |   2 +
 .../ag-charts-website/src/content/config.ts   |  12 +
 .../content/docs/license-install/index.mdoc   |  21 ++
 .../src/content/menu/data.json                |   4 +
 .../components/ApiReference.tsx               |   2 +-
 .../example-runner/components/CodeViewer.tsx  |   2 +-
 .../src/pages/[framework]/[pageName].astro    |  18 +-
 33 files changed, 683 insertions(+), 307 deletions(-)
 create mode 100644 eslint.config.mjs
 create mode 100644 external/ag-website-shared/src/components/code/Code.module.scss
 rename {packages/ag-charts-website/src/components => external/ag-website-shared/src/components/code}/Code.tsx (100%)
 delete mode 100644 external/ag-website-shared/src/components/license-setup/components/LicenseSetup.astro
 rename {packages/ag-charts-website => external/ag-website-shared}/src/components/snippet/EmbedSnippet.astro (84%)
 create mode 100644 external/ag-website-shared/src/components/snippet/Snippet.tsx
 rename {packages/ag-charts-website => external/ag-website-shared}/src/components/snippet/SnippetFromRemoteUrl.tsx (92%)
 create mode 100644 external/ag-website-shared/src/markdoc/tags/embedSnippet.ts
 delete mode 100644 external/ag-website-shared/src/markdoc/tags/licenseSetup.ts
 create mode 100644 external/ag-website-shared/src/utils/throwDevWarning.ts
 create mode 100644 packages/ag-charts-website/src/components/license-setup/LicenseSetup.astro
 delete mode 100644 packages/ag-charts-website/src/components/snippet/Snippet.tsx
 create mode 100644 packages/ag-charts-website/src/content/docs/license-install/index.mdoc

diff --git a/.nxignore b/.nxignore
index 98d9ab178c..4439a43e66 100644
--- a/.nxignore
+++ b/.nxignore
@@ -1,3 +1,2 @@
 __diff_output__
-/external/ag-website-shared/
 
diff --git a/.prettierignore b/.prettierignore
index 7e3c7c29c6..98c4053846 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -10,7 +10,6 @@
 /packages/ag-charts-react/dist
 /packages/ag-charts-vue3/dist
 /packages/ag-charts-vue3/lib
-/external/ag-website-shared/
 /packages/ag-charts-angular/projects/ag-charts-angular/src/test.ts
 
 /.nx/cache
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000000..5023db752a
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,39 @@
+import pluginJs from '@eslint/js';
+// TODO: Add after eslint upgrade to v9.x
+// import eslintImportX from 'eslint-plugin-import-x';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default [
+    { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+    pluginJs.configs.recommended,
+    ...tseslint.configs.recommended,
+    {
+        plugins: {
+            // 'import-x': eslintImportX
+        },
+    },
+    {
+        ignores: ['node_modules/', 'dist/'],
+    },
+    {
+        rules: {
+            '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/consistent-type-imports': [
+                'error',
+                {
+                    prefer: 'type-imports',
+                    fixStyle: 'separate-type-imports',
+                },
+            ],
+            'import-x/consistent-type-specifier-style': 'error',
+            '@typescript-eslint/no-this-alias': 'off',
+            'no-restricted-imports': [
+                'error',
+                {
+                    patterns: ['community-modules/*', 'enterprise-modules/*', '*/main'],
+                },
+            ],
+        },
+    },
+];
diff --git a/external/ag-website-shared/src/components/code/Code.module.scss b/external/ag-website-shared/src/components/code/Code.module.scss
new file mode 100644
index 0000000000..5ceb3df33f
--- /dev/null
+++ b/external/ag-website-shared/src/components/code/Code.module.scss
@@ -0,0 +1,111 @@
+@use 'design-system' as *;
+
+.clipboardButtonOuter {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: $spacing-size-1;
+    right: $spacing-size-1;
+    height: $spacing-size-8;
+    opacity: 0;
+    z-index: 2;
+    overflow: hidden;
+    transition: opacity 0.33s ease-in-out;
+
+    pre:hover & {
+        opacity: 1;
+    }
+}
+
+.clipboardButton,
+.clipboardButtonCopied {
+    display: flex;
+    align-items: center;
+    height: $spacing-size-8;
+    background-color: var(--color-bg-primary);
+    border-top: 1px solid var(--color-border-primary);
+    border-bottom: 1px solid var(--color-border-primary);
+
+    #{$selector-darkmode} & {
+        background-color: var(--color-code-background);
+    }
+}
+
+.clipboardButton {
+    width: calc(#{$spacing-size-8} - var(--radius-sm));
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
+    border-right: 1px solid var(--color-border-primary);
+    cursor: pointer;
+    transition: background-color $transition-default-timing;
+
+    svg {
+        --color-icon: var(--color-util-gray-500);
+
+        position: relative;
+        left: -2px;
+        transition: fill $transition-default-timing;
+    }
+
+    &:hover svg {
+        --color-icon: var(--color-util-brand-400);
+
+        #{$selector-darkmode} & {
+            --color-icon: var(--color-link-hover);
+        }
+    }
+}
+
+.clipboardButtonCopiedOuter {
+    overflow: hidden;
+}
+
+.clipboardButtonCopied {
+    font-size: var(--text-fs-sm);
+    font-weight: var(--text-semibold);
+    padding-left: $spacing-size-2;
+    padding-right: $spacing-size-2;
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
+    border-left: 1px solid var(--color-border-primary);
+    color: var(--color-fg-white);
+    transform: translateX(calc(100% - var(--radius-sm)));
+    transition:
+        transform $transition-default-timing,
+        background-color $transition-default-timing,
+        color $transition-default-timing;
+    cursor: pointer;
+
+    #{$selector-darkmode} & {
+        color: var(--color-bg-primary);
+    }
+}
+
+.hasCopied {
+    opacity: 1;
+
+    .clipboardButton {
+        background-color: var(--color-util-gray-700);
+    }
+
+    .clipboardButton svg {
+        --color-icon: var(--color-fg-white);
+
+        #{$selector-darkmode} & {
+            --color-icon: var(--color-bg-primary);
+        }
+    }
+
+    .clipboardButton:hover svg {
+        --color-icon: var(--color-fg-white);
+
+        #{$selector-darkmode} & {
+            --color-icon: var(--color-bg-primary);
+        }
+    }
+
+    .clipboardButtonCopied {
+        transform: translateX(0);
+        background-color: var(--color-util-gray-700);
+    }
+}
diff --git a/packages/ag-charts-website/src/components/Code.tsx b/external/ag-website-shared/src/components/code/Code.tsx
similarity index 100%
rename from packages/ag-charts-website/src/components/Code.tsx
rename to external/ag-website-shared/src/components/code/Code.tsx
diff --git a/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.astro b/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.astro
deleted file mode 100644
index 925b967f8e..0000000000
--- a/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.astro
+++ /dev/null
@@ -1,21 +0,0 @@
----
-import type { MenuSection } from '@ag-grid-types';
-import { LicenseSetup } from './LicenseSetup';
-import { getEntry } from 'astro:content';
-import { getFrameworkFromPath } from '@features/docs/utils/urlPaths';
-import seedRepos from '../../../content/seed-projects/grid-seed-projects.json';
-import { getFilteredMenuSections } from '@components/pages-navigation/utils/getFilteredMenuSections';
-
-const { pathname } = Astro.url;
-const framework = getFrameworkFromPath(pathname);
-
-const { data: menu } = await getEntry('menu', 'data');
-
-// TODO: Need to generalise this to make it work with charts
-const menuItems: MenuSection[] = getFilteredMenuSections({
-    menuSections: menu.main.sections,
-    framework,
-});
----
-
-<LicenseSetup client:only="react" framework={framework} path={pathname} menuItems={menuItems} seedRepos={seedRepos} />
diff --git a/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.module.scss b/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.module.scss
index 7f6519c131..cd7d065f6b 100644
--- a/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.module.scss
+++ b/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.module.scss
@@ -94,12 +94,11 @@
 }
 
 .licenseData {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-size-8;
     margin-top: $spacing-size-2;
 
-    > div {
-        margin-bottom: $spacing-size-8;
-    }
-
     .inputList {
         margin-bottom: $spacing-size-10;
     }
@@ -220,6 +219,8 @@
 }
 
 .results {
+    margin-top: $spacing-size-8;
+
     h2 {
         margin-top: $spacing-size-12;
     }
diff --git a/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.tsx b/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.tsx
index 2ff5b492ef..e1626d2da6 100644
--- a/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.tsx
+++ b/external/ag-website-shared/src/components/license-setup/components/LicenseSetup.tsx
@@ -1,11 +1,11 @@
-import type { Framework, ImportType, MenuItem } from '@ag-grid-types';
+import type { Framework, ImportType, Library, MenuItem } from '@ag-grid-types';
 import Note from '@ag-website-shared/components/alert/Note';
 import Success from '@ag-website-shared/components/alert/Success';
 import Warning from '@ag-website-shared/components/alert/Warning';
 import { Icon } from '@ag-website-shared/components/icon/Icon';
+import { Snippet } from '@ag-website-shared/components/snippet/Snippet';
+import fwLogos from '@ag-website-shared/images/fw-logos';
 import { FrameworkSelectorInsideDocs } from '@components/framework-selector-inside-doc/FrameworkSelectorInsideDocs';
-import { Snippet } from '@components/snippet/Snippet';
-import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';
 import classnames from 'classnames';
 import { type FunctionComponent, useMemo } from 'react';
 
@@ -24,6 +24,7 @@ interface SeedRepo {
 }
 
 interface Props {
+    library: Library;
     framework: Framework;
     path: string;
     menuItems: MenuItem[];
@@ -41,7 +42,7 @@ const EmailSales = () => {
     );
 };
 
-export const LicenseSetup: FunctionComponent<Props> = ({ framework, path, menuItems, seedRepos }) => {
+export const LicenseSetup: FunctionComponent<Props> = ({ library, framework, path, menuItems, seedRepos }) => {
     const {
         userLicense,
         setUserLicense,
@@ -57,19 +58,21 @@ export const LicenseSetup: FunctionComponent<Props> = ({ framework, path, menuIt
         licenseState,
         licenseInvalidErrors,
         licenseValidMessage,
-    } = useLicenseData();
+    } = useLicenseData({ library });
     const dependenciesSnippet = useMemo(
         () =>
             getDependenciesSnippet({
+                library,
                 framework,
                 isIntegratedCharts,
                 importType,
             }),
-        [framework, isIntegratedCharts, importType]
+        [library, framework, isIntegratedCharts, importType]
     );
     const npmInstallSnippet = useMemo(
         () =>
             getNpmInstallSnippet({
+                library,
                 framework,
                 isIntegratedCharts,
                 importType,
@@ -97,11 +100,13 @@ export const LicenseSetup: FunctionComponent<Props> = ({ framework, path, menuIt
                 }),
         [seedRepos, isIntegratedCharts, framework, importType]
     );
+    const isGrid = library === 'grid';
+    const productName = isGrid ? 'AG Grid' : 'AG Charts';
 
     return (
         <>
             <form>
-                <h2>Validate your licence</h2>
+                <h2 id="validate-your-license">Validate Your Licence</h2>
 
                 <div className={styles.licenceWrapper}>
                     <textarea
@@ -132,8 +137,6 @@ export const LicenseSetup: FunctionComponent<Props> = ({ framework, path, menuIt
                     </Warning>
                 ))}
 
-                {/* TODO change "AG Grid" to grid/charts based on site */}
-
                 <div className={styles.licenseData}>
                     {hasValue(userLicense) && (
                         <div>
@@ -148,69 +151,73 @@ export const LicenseSetup: FunctionComponent<Props> = ({ framework, path, menuIt
                         </div>
                     )}
 
-                    <div>
-                        <h2>Configure your application</h2>
+                    {isGrid && (
+                        <>
+                            <div>
+                                <h2>Configure Your Application</h2>
 
-                        <div className={styles.icQuestion}>
-                            <label
-                                className={classnames(styles.licensedProduct, styles.integratedProduct, {
-                                    [styles.valid]: licensedProducts.grid && licensedProducts.charts,
-                                    [styles.trial]:
-                                        userLicenseIsTrial && licensedProducts.grid && licensedProducts.charts,
-                                    [styles.expired]:
-                                        (userLicenseIsExpired || userLicenseTrialIsExpired) &&
-                                        licensedProducts.grid &&
-                                        licensedProducts.charts,
-                                })}
-                            >
-                                Are you using Integrated Charts?{' '}
-                                <input
-                                    type="checkbox"
-                                    name="products"
-                                    value="integratedEnterprise"
-                                    checked={isIntegratedCharts}
-                                    onChange={() => {
-                                        updateIsIntegratedChartsWithUrlUpdate(!isIntegratedCharts);
-                                    }}
-                                />
-                            </label>
-                        </div>
-                    </div>
-                    {licenseState.gridNoChartsError && (
-                        <Warning>
-                            {licenseState.gridNoChartsError}. <EmailSales />
-                        </Warning>
-                    )}
+                                <div className={styles.icQuestion}>
+                                    <label
+                                        className={classnames(styles.licensedProduct, styles.integratedProduct, {
+                                            [styles.valid]: licensedProducts.grid && licensedProducts.charts,
+                                            [styles.trial]:
+                                                userLicenseIsTrial && licensedProducts.grid && licensedProducts.charts,
+                                            [styles.expired]:
+                                                (userLicenseIsExpired || userLicenseTrialIsExpired) &&
+                                                licensedProducts.grid &&
+                                                licensedProducts.charts,
+                                        })}
+                                    >
+                                        Are you using Integrated Charts?{' '}
+                                        <input
+                                            type="checkbox"
+                                            name="products"
+                                            value="integratedEnterprise"
+                                            checked={isIntegratedCharts}
+                                            onChange={() => {
+                                                updateIsIntegratedChartsWithUrlUpdate(!isIntegratedCharts);
+                                            }}
+                                        />
+                                    </label>
+                                </div>
+                            </div>
+                            {licenseState.integratedChartsNoChartsError && (
+                                <Warning>
+                                    {licenseState.integratedChartsNoChartsError}. <EmailSales />
+                                </Warning>
+                            )}
 
-                    <div className={styles.frameworkImportContainer}>
-                        <div className={styles.frameworkContainer}>
-                            <label>Framework</label>
-                            <FrameworkSelectorInsideDocs
-                                path={path}
-                                currentFramework={framework}
-                                menuItems={menuItems}
-                            />
-                        </div>
+                            <div className={styles.frameworkImportContainer}>
+                                <div className={styles.frameworkContainer}>
+                                    <label>Framework</label>
+                                    <FrameworkSelectorInsideDocs
+                                        path={path}
+                                        currentFramework={framework}
+                                        menuItems={menuItems}
+                                    />
+                                </div>
 
-                        <span className={styles.divider}></span>
+                                <span className={styles.divider}></span>
 
-                        <div className={styles.importContainer}>
-                            <label>
-                                <span>Import type:</span>
-                            </label>
+                                <div className={styles.importContainer}>
+                                    <label>
+                                        <span>Import type:</span>
+                                    </label>
 
-                            <select
-                                name="importType"
-                                value={importType}
-                                onChange={(e) => {
-                                    updateImportTypeWithUrlUpdate(e.target.value as ImportType);
-                                }}
-                            >
-                                <option value="packages">Packages</option>
-                                <option value="modules">Modules</option>
-                            </select>
-                        </div>
-                    </div>
+                                    <select
+                                        name="importType"
+                                        value={importType}
+                                        onChange={(e) => {
+                                            updateImportTypeWithUrlUpdate(e.target.value as ImportType);
+                                        }}
+                                    >
+                                        <option value="packages">Packages</option>
+                                        <option value="modules">Modules</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </>
+                    )}
                 </div>
 
                 <div className={styles.results}>
@@ -221,6 +228,11 @@ export const LicenseSetup: FunctionComponent<Props> = ({ framework, path, menuIt
                             {licenseState.chartsNoGridEnterpriseError}. <EmailSales />
                         </Warning>
                     )}
+                    {licenseState.gridNoChartsEnterpriseError && (
+                        <Warning>
+                            {licenseState.gridNoChartsEnterpriseError}. <EmailSales />
+                        </Warning>
+                    )}
 
                     {licenseState.minimalModulesInfo && <Note>{licenseState.minimalModulesInfo}</Note>}
 
@@ -245,58 +257,75 @@ export const LicenseSetup: FunctionComponent<Props> = ({ framework, path, menuIt
                             {licenseState.chartsNoGridEnterpriseError}. <EmailSales />
                         </Warning>
                     )}
-
-                    <p>An example of how to set up your AG Grid Enterprise License Key:</p>
-                    {bootstrapSnippet.grid && (
-                        <Snippet framework={framework} content={bootstrapSnippet.grid} copyToClipboard />
+                    {licenseState.gridNoChartsEnterpriseError && (
+                        <Warning>
+                            {licenseState.gridNoChartsEnterpriseError}. <EmailSales />
+                        </Warning>
                     )}
 
-                    <h2 id="seed-repos">Seed Repositories</h2>
+                    <p>An example of how to set up your {productName} Enterprise License Key:</p>
 
-                    {selectedSeedRepos.length ? (
+                    <Snippet
+                        framework={framework}
+                        content={bootstrapSnippet[library as keyof typeof bootstrapSnippet]}
+                        copyToClipboard
+                    />
+
+                    {isGrid && (
                         <>
-                            <p>Here are some seed code repositories to get you started:</p>
+                            <h2 id="seed-repos">Seed Repositories</h2>
+
+                            {selectedSeedRepos.length ? (
+                                <>
+                                    <p>Here are some seed code repositories to get you started:</p>
 
-                            <table className={styles.reposTable} role="grid">
-                                <thead>
-                                    <tr>
-                                        <th scope="col">Github Repo</th>
-                                        <th scope="col">Framework</th>
-                                        <th scope="col">Development Environment</th>
-                                        <th scope="col">Import Type</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {selectedSeedRepos.map(({ name, url, framework, devEnvironment, importType }) => {
-                                        return (
-                                            <tr key={url}>
-                                                <td>
-                                                    <a
-                                                        className={classnames(styles.repoButton, 'button-secondary')}
-                                                        href={url}
-                                                    >
-                                                        <Icon name="github" />
-                                                        {name}
-                                                    </a>
-                                                </td>
-                                                <td>
-                                                    <img
-                                                        className={styles.frameworkLogo}
-                                                        src={urlWithBaseUrl(`/images/fw-logos/${framework}.svg`)}
-                                                        alt={framework}
-                                                    />{' '}
-                                                    {framework}
-                                                </td>
-                                                <td>{devEnvironment}</td>
-                                                <td>{importType}</td>
+                                    <table className={styles.reposTable} role="grid">
+                                        <thead>
+                                            <tr>
+                                                <th scope="col">Github Repo</th>
+                                                <th scope="col">Framework</th>
+                                                <th scope="col">Development Environment</th>
+                                                <th scope="col">Import Type</th>
                                             </tr>
-                                        );
-                                    })}
-                                </tbody>
-                            </table>
+                                        </thead>
+                                        <tbody>
+                                            {selectedSeedRepos.map(
+                                                ({ name, url, framework, devEnvironment, importType }) => {
+                                                    return (
+                                                        <tr key={url}>
+                                                            <td>
+                                                                <a
+                                                                    className={classnames(
+                                                                        styles.repoButton,
+                                                                        'button-secondary'
+                                                                    )}
+                                                                    href={url}
+                                                                >
+                                                                    <Icon name="github" />
+                                                                    {name}
+                                                                </a>
+                                                            </td>
+                                                            <td>
+                                                                <img
+                                                                    className={styles.frameworkLogo}
+                                                                    src={fwLogos[framework]}
+                                                                    alt={framework}
+                                                                />{' '}
+                                                                {framework}
+                                                            </td>
+                                                            <td>{devEnvironment}</td>
+                                                            <td>{importType}</td>
+                                                        </tr>
+                                                    );
+                                                }
+                                            )}
+                                        </tbody>
+                                    </table>
+                                </>
+                            ) : (
+                                <p>Select your enterprise products above to view seed repositories.</p>
+                            )}
                         </>
-                    ) : (
-                        <p>Select your enterprise products above to view seed repositories.</p>
                     )}
                 </div>
             </form>
diff --git a/external/ag-website-shared/src/components/license-setup/utils/getDependencies.test.ts b/external/ag-website-shared/src/components/license-setup/utils/getDependencies.test.ts
index 7b153156f8..ec25b0f29b 100644
--- a/external/ag-website-shared/src/components/license-setup/utils/getDependencies.test.ts
+++ b/external/ag-website-shared/src/components/license-setup/utils/getDependencies.test.ts
@@ -1,6 +1,6 @@
-import { getGridDependencies } from './getDependencies';
+import { getDependencies } from './getDependencies';
 
-describe('getGridDependencies', () => {
+describe('grid getDependencies', () => {
     test.each`
         framework       | isIntegratedCharts | importType    | expected
         ${'react'}      | ${false}           | ${'packages'} | ${['ag-grid-react', 'ag-grid-enterprise']}
@@ -23,7 +23,8 @@ describe('getGridDependencies', () => {
         '$framework { isIntegratedCharts: $isIntegratedCharts, importType: $importType } is $expected',
         ({ framework, isIntegratedCharts, importType, expected }) => {
             expect(
-                getGridDependencies({
+                getDependencies({
+                    library: 'grid',
                     framework,
                     isIntegratedCharts,
                     importType,
@@ -32,3 +33,63 @@ describe('getGridDependencies', () => {
         }
     );
 });
+
+describe('charts getDependencies', () => {
+    test.each`
+        framework       | isIntegratedCharts | importType    | expected
+        ${'react'}      | ${false}           | ${'packages'} | ${['ag-charts-react', 'ag-charts-enterprise']}
+        ${'react'}      | ${true}            | ${'packages'} | ${['ag-charts-react', 'ag-charts-enterprise']}
+        ${'angular'}    | ${false}           | ${'packages'} | ${['ag-charts-angular', 'ag-charts-enterprise']}
+        ${'angular'}    | ${true}            | ${'packages'} | ${['ag-charts-angular', 'ag-charts-enterprise']}
+        ${'vue'}        | ${false}           | ${'packages'} | ${['ag-charts-vue3', 'ag-charts-enterprise']}
+        ${'vue'}        | ${true}            | ${'packages'} | ${['ag-charts-vue3', 'ag-charts-enterprise']}
+        ${'javascript'} | ${false}           | ${'packages'} | ${['ag-charts-enterprise']}
+        ${'javascript'} | ${true}            | ${'packages'} | ${['ag-charts-enterprise']}
+    `(
+        '$framework { isIntegratedCharts: $isIntegratedCharts, importType: $importType } is $expected',
+        ({ framework, isIntegratedCharts, importType, expected }) => {
+            expect(
+                getDependencies({
+                    library: 'charts',
+                    framework,
+                    isIntegratedCharts,
+                    importType,
+                }).sort()
+            ).toEqual(expected.sort());
+        }
+    );
+
+    test('Throws error if getting charts modules', () => {
+        expect(() =>
+            getDependencies({
+                library: 'charts',
+                framework: 'react',
+                importType: 'modules',
+            }).sort()
+        ).toThrow();
+
+        expect(() =>
+            getDependencies({
+                library: 'charts',
+                framework: 'angular',
+                importType: 'modules',
+            }).sort()
+        ).toThrow();
+
+        expect(() =>
+            getDependencies({
+                library: 'charts',
+                framework: 'vue',
+                importType: 'modules',
+            }).sort()
+        ).toThrow();
+
+        expect(() =>
+            getDependencies({
+                library: 'charts',
+                framework: 'javascript',
+                importType: 'modules',
+            }).sort()
+        ).toThrow();
+    });
+});
diff --git a/external/ag-website-shared/src/components/license-setup/utils/getDependencies.ts b/external/ag-website-shared/src/components/license-setup/utils/getDependencies.ts
index 58c1d8103f..96df81682d 100644
--- a/external/ag-website-shared/src/components/license-setup/utils/getDependencies.ts
+++ b/external/ag-website-shared/src/components/license-setup/utils/getDependencies.ts
@@ -1,6 +1,6 @@
-import type { Framework, ImportType } from '@ag-grid-types';
+import type { Framework, ImportType, Library } from '@ag-grid-types';
 
-export const getGridDependencies = ({
+const getGridDependencies = ({
     framework,
     isIntegratedCharts,
     importType,
@@ -45,3 +45,45 @@ export const getGridDependencies = ({
 
     return dependencies;
 };
+
+const getChartsDependencies = ({ framework, importType }: { framework: Framework; importType?: ImportType }) => {
+    const dependencies: string[] = [];
+
+    if (importType === 'packages') {
+        dependencies.push('ag-charts-enterprise');
+        if (framework === 'react') {
+            dependencies.push('ag-charts-react');
+        } else if (framework === 'angular') {
+            dependencies.push('ag-charts-angular');
+        } else if (framework === 'vue') {
+            dependencies.push('ag-charts-vue3');
+        }
+    } else if (importType === 'modules') {
+        throw new Error('Charts does not have modules');
+    }
+
+    return dependencies;
+};
+
+export const getDependencies = ({
+    library,
+    framework,
+    isIntegratedCharts,
+    importType,
+}: {
+    library: Library;
+    framework: Framework;
+    isIntegratedCharts?: boolean;
+    importType?: ImportType;
+}) => {
+    return library === 'grid'
+        ? getGridDependencies({
+              framework,
+              isIntegratedCharts: isIntegratedCharts!,
+              importType,
+          })
+        : getChartsDependencies({
+              framework,
+              importType,
+          });
+};
diff --git a/external/ag-website-shared/src/components/license-setup/utils/getSnippets.ts b/external/ag-website-shared/src/components/license-setup/utils/getSnippets.ts
index eaafbb40b7..8698e96142 100644
--- a/external/ag-website-shared/src/components/license-setup/utils/getSnippets.ts
+++ b/external/ag-website-shared/src/components/license-setup/utils/getSnippets.ts
@@ -1,19 +1,22 @@
-import type { Framework, ImportType } from '@ag-grid-types';
-import { agGridVersion } from '@constants';
+import type { Framework, ImportType, Library } from '@ag-grid-types';
+import { agLibraryVersion } from '@constants';
 
-import { getGridDependencies } from './getDependencies';
+import { getDependencies } from './getDependencies';
 import { GRID_LICENSE_TEMPLATES, getChartsTemplate } from './templates';
 
 export const getDependenciesSnippet = ({
+    library,
     framework,
     isIntegratedCharts,
     importType,
 }: {
+    library: Library;
     framework: Framework;
     isIntegratedCharts: boolean;
     importType?: ImportType;
 }) => {
-    const dependencies = getGridDependencies({
+    const dependencies = getDependencies({
+        library,
         framework,
         isIntegratedCharts,
         importType,
@@ -21,22 +24,25 @@ export const getDependenciesSnippet = ({
 
     const depObject: Record<string, string> = {};
     dependencies.forEach((dependency) => {
-        depObject[dependency] = `~${agGridVersion}`;
+        depObject[dependency] = `~${agLibraryVersion}`;
     });
 
     return dependencies.length > 0 ? `dependencies: ${JSON.stringify(depObject, null, 4)}` : undefined;
 };
 
 export const getNpmInstallSnippet = ({
+    library,
     framework,
     isIntegratedCharts,
     importType,
 }: {
+    library: Library;
     framework: Framework;
     isIntegratedCharts: boolean;
     importType?: ImportType;
 }) => {
-    const dependencies = getGridDependencies({
+    const dependencies = getDependencies({
+        library,
         framework,
         isIntegratedCharts,
         importType,
diff --git a/external/ag-website-shared/src/components/license-setup/utils/useLicenseData.ts b/external/ag-website-shared/src/components/license-setup/utils/useLicenseData.ts
index 28a964f7e0..d1144fcfb7 100644
--- a/external/ag-website-shared/src/components/license-setup/utils/useLicenseData.ts
+++ b/external/ag-website-shared/src/components/license-setup/utils/useLicenseData.ts
@@ -1,5 +1,5 @@
 import { LicenseManager } from '@ag-grid-enterprise/core';
-import type { ImportType } from '@ag-grid-types';
+import type { ImportType, Library } from '@ag-grid-types';
 import { AgCharts } from 'ag-charts-enterprise';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
@@ -12,6 +12,7 @@ import { useUpdateDataFromUrl } from './useUpdateDataFromUrl';
 export type LicenseStateKey = keyof typeof licenseDataState;
 type LicenseState = Record<LicenseStateKey, string | undefined>;
 interface DataState {
+    library: Library;
     userLicense: string;
     licensedProducts: LicensedProducts;
     isIntegratedCharts: boolean;
@@ -38,22 +39,32 @@ const licenseDataState = {
     validIntegratedChartsLicense: {
         getIsState: ({ userLicense, licensedProducts }: DataState) =>
             hasValue(userLicense) && licensedProducts.charts && licensedProducts.grid,
-        message: `Valid Enterprise Bundle license key. Includes AG Grid Enterprise and AG Chart Enterprise`,
+        message: `Valid Enterprise Bundle license key. Includes AG Grid Enterprise and AG Charts Enterprise`,
     },
     minimalModulesInfo: {
         getIsState: ({ licensedProducts, importType }: DataState) => licensedProducts.grid && importType === 'modules',
         message:
             "This is the minimal set of modules needed to render AG Grid Enterprise. You may need to include additional modules to this list of dependencies according to the AG Grid Enterprise feature you're using",
     },
+
+    // On Grid website, error if only have AG Charts Enterprise
     chartsNoGridEnterpriseError: {
-        getIsState: ({ licensedProducts }: DataState) => licensedProducts.charts && !licensedProducts.grid,
+        getIsState: ({ library, licensedProducts }: DataState) =>
+            library === 'grid' && licensedProducts.charts && !licensedProducts.grid,
         message: `Your license key does not include AG Grid Enterprise`,
     },
-    gridNoChartsError: {
+    // On Charts website, error if only have AG Grid Enterprise
+    gridNoChartsEnterpriseError: {
+        getIsState: ({ library, licensedProducts }: DataState) =>
+            library === 'charts' && !licensedProducts.charts && licensedProducts.grid,
+        message: `Your license key does not include AG Charts Enterprise`,
+    },
+    integratedChartsNoChartsError: {
         getIsState: ({ licensedProducts, isIntegratedCharts }: DataState) =>
             !licensedProducts.charts && licensedProducts.grid && isIntegratedCharts,
         message: `Your license key does not include Integrated Charts`,
     },
+
     userLicenseError: {
         getIsState: ({ userLicense, userLicenseIsValid }: DataState) => {
             return hasValue(userLicense) && !userLicenseIsValid;
@@ -61,10 +72,6 @@ const licenseDataState = {
         message:
             'License key is not valid. Make sure you are copying the whole license key which was originally provided',
     },
-    v2LicenseError: {
-        getIsState: ({ userLicenseVersion }: DataState) => userLicenseVersion === '2',
-        message: 'This license key is not valid for AG Grid v30 and later',
-    },
     expiredError: {
         getIsState: ({ userLicense, userLicenseIsExpired }: DataState) => {
             return hasValue(userLicense) && userLicenseIsExpired;
@@ -80,14 +87,10 @@ const licenseDataState = {
 };
 
 const licenseValidKeys: LicenseStateKey[] = ['validGridLicense', 'validChartsLicense', 'validIntegratedChartsLicense'];
-const licenseInvalidKeys: LicenseStateKey[] = [
-    'expiredError',
-    'expiredTrialError',
-    'userLicenseError',
-    'v2LicenseError',
-];
+const licenseInvalidKeys: LicenseStateKey[] = ['expiredError', 'expiredTrialError', 'userLicenseError'];
 
 const useLicenseState = ({
+    library,
     userLicense,
     licensedProducts,
     isIntegratedCharts,
@@ -106,6 +109,7 @@ const useLicenseState = ({
         (Object.keys(licenseDataState) as LicenseStateKey[]).forEach((key) => {
             const { getIsState, message } = licenseDataState[key];
             const isError = getIsState({
+                library,
                 userLicense,
                 licensedProducts,
                 isIntegratedCharts,
@@ -149,7 +153,7 @@ const useLicenseState = ({
     };
 };
 
-export const useLicenseData = () => {
+export const useLicenseData = ({ library }: { library: Library }) => {
     /**
      * User input license
      */
@@ -195,7 +199,12 @@ export const useLicenseData = () => {
         userLicenseIsExpired,
         userLicenseTrialIsExpired,
     } = useMemo(() => {
-        const details = licenseDetails.suppliedLicenseType === 'CHARTS' ? chartsLicenseDetails : licenseDetails;
+        let details;
+        if (library === 'grid') {
+            details = licenseDetails.suppliedLicenseType === 'CHARTS' ? chartsLicenseDetails : licenseDetails;
+        } else {
+            details = chartsLicenseDetails.suppliedLicenseType === 'GRID' ? licenseDetails : chartsLicenseDetails;
+        }
 
         return {
             userLicenseVersion: details.version || undefined,
@@ -205,9 +214,10 @@ export const useLicenseData = () => {
             userLicenseIsExpired: Boolean(details.expired),
             userLicenseTrialIsExpired: Boolean(details.trialExpired),
         };
-    }, [licenseDetails, chartsLicenseDetails]);
+    }, [library, licenseDetails, chartsLicenseDetails]);
 
     const { licenseState } = useLicenseState({
+        library,
         userLicense,
         licensedProducts,
         isIntegratedCharts,
@@ -220,7 +230,7 @@ export const useLicenseData = () => {
         importType,
     });
 
-    useUpdateDataFromUrl({ setIsIntegratedCharts, setImportType });
+    useUpdateDataFromUrl({ library, setIsIntegratedCharts, setImportType });
     useLicenseDebug({
         licenseDetails,
         chartsLicenseDetails,
@@ -238,8 +248,8 @@ export const useLicenseData = () => {
             return;
         }
 
-        const { suppliedLicenseType } = licenseDetails;
-        const gridEnterprise = suppliedLicenseType === 'GRID' || suppliedLicenseType === 'BOTH';
+        const { suppliedLicenseType, version } = library === 'grid' ? licenseDetails : chartsLicenseDetails;
+        const gridEnterprise = version === '2' || suppliedLicenseType === 'GRID' || suppliedLicenseType === 'BOTH';
         const isIntegrated = suppliedLicenseType === 'BOTH';
         const chartsEnterprise = suppliedLicenseType === 'CHARTS' || suppliedLicenseType === 'BOTH';
 
@@ -249,7 +259,7 @@ export const useLicenseData = () => {
         });
 
         updateIsIntegratedChartsWithUrlUpdate(isIntegrated);
-    }, [licenseDetails]);
+    }, [library, licenseDetails, chartsLicenseDetails]);
 
     const licenseInvalidErrors = useMemo(() => {
         return Object.entries(licenseState)
diff --git a/external/ag-website-shared/src/components/license-setup/utils/useUpdateDataFromUrl.ts b/external/ag-website-shared/src/components/license-setup/utils/useUpdateDataFromUrl.ts
index a8e6e6ef6e..355a717b27 100644
--- a/external/ag-website-shared/src/components/license-setup/utils/useUpdateDataFromUrl.ts
+++ b/external/ag-website-shared/src/components/license-setup/utils/useUpdateDataFromUrl.ts
@@ -1,38 +1,46 @@
-import type { ImportType } from '@ag-grid-types';
+import type { ImportType, Library } from '@ag-grid-types';
 import { useEffect } from 'react';
 
 import { updateSearchParams } from './updateSearchParams';
 
 export const useUpdateDataFromUrl = ({
+    library,
     setIsIntegratedCharts,
     setImportType,
 }: {
+    library: Library;
     setIsIntegratedCharts: React.Dispatch<boolean>;
     setImportType: React.Dispatch<ImportType>;
 }) => {
     useEffect(() => {
-        const searchParams = new URLSearchParams(window.location.search);
-        const integratedChartsParam = searchParams.get('integratedCharts');
-        const importTypeParam = searchParams.get('importType');
         const newSearchParams = {} as { integratedCharts: boolean; importType: ImportType };
 
-        if (integratedChartsParam) {
-            if (integratedChartsParam === 'true') {
-                setIsIntegratedCharts(true);
-                newSearchParams.integratedCharts = true;
-            } else {
-                setIsIntegratedCharts(false);
+        if (library === 'grid') {
+            const searchParams = new URLSearchParams(window.location.search);
+            const integratedChartsParam = searchParams.get('integratedCharts');
+            const importTypeParam = searchParams.get('importType');
+
+            if (integratedChartsParam) {
+                if (integratedChartsParam === 'true') {
+                    setIsIntegratedCharts(true);
+                    newSearchParams.integratedCharts = true;
+                } else {
+                    setIsIntegratedCharts(false);
+                }
             }
-        }
 
-        const importType = importTypeParam?.trim();
-        if (['modules', 'packages'].includes(importType as ImportType)) {
-            setImportType(importType);
-            newSearchParams.importType = importType;
+            const importType = importTypeParam?.trim();
+            if (['modules', 'packages'].includes(importType as ImportType)) {
+                setImportType(importType);
+                newSearchParams.importType = importType;
+            }
+        } else {
+            newSearchParams.integratedCharts = false;
+            newSearchParams.importType = undefined;
         }
 
         if (Object.keys(newSearchParams).length) {
             updateSearchParams(newSearchParams);
         }
-    }, []);
+    }, [library]);
 };
diff --git a/packages/ag-charts-website/src/components/snippet/EmbedSnippet.astro b/external/ag-website-shared/src/components/snippet/EmbedSnippet.astro
similarity index 84%
rename from packages/ag-charts-website/src/components/snippet/EmbedSnippet.astro
rename to external/ag-website-shared/src/components/snippet/EmbedSnippet.astro
index d4e1332516..9d393c3190 100644
--- a/packages/ag-charts-website/src/components/snippet/EmbedSnippet.astro
+++ b/external/ag-website-shared/src/components/snippet/EmbedSnippet.astro
@@ -1,10 +1,10 @@
 ---
 import { getPageNameFromPath } from '@features/docs/utils/urlPaths';
-import Code, { type Language } from '../Code';
+import Code, { type Language } from '@ag-website-shared/components/code/Code';
 import { getExamplesPath } from '@features/docs/utils/filesData';
 import path from 'path';
 import { readFileSync } from 'node:fs';
-import { SnippetFromRemoteUrl } from './SnippetFromRemoteUrl';
+import { SnippetFromRemoteUrl } from '@ag-website-shared/components/snippet/SnippetFromRemoteUrl';
 import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';
 
 interface Props {
diff --git a/external/ag-website-shared/src/components/snippet/Snippet.tsx b/external/ag-website-shared/src/components/snippet/Snippet.tsx
new file mode 100644
index 0000000000..ddeb98691c
--- /dev/null
+++ b/external/ag-website-shared/src/components/snippet/Snippet.tsx
@@ -0,0 +1,65 @@
+import type { Framework } from '@ag-grid-types';
+import Code, { type Language } from '@ag-website-shared/components/code/Code';
+import { throwDevWarning } from '@ag-website-shared/utils/throwDevWarning';
+import * as snippetTransformer from '@components/snippet/snippetTransformer';
+
+const languages = {
+    react: 'jsx',
+    javascript: 'js',
+    angular: 'ts',
+    vue: 'ts',
+};
+
+interface Props {
+    framework: Framework;
+    content: string;
+    transform?: boolean;
+    language?: Language;
+    lineNumbers?: boolean;
+    suppressFrameworkContext?: boolean;
+    spaceBetweenProperties?: boolean;
+    inlineReactProperties?: boolean;
+    copyToClipboard?: boolean;
+    children?: any;
+}
+
+/**
+ * This takes a code snippet written in JavaScript and transforms it into an idiomatic code snippet for the selected
+ * framework.
+ */
+export const Snippet = (props: Props) => {
+    const {
+        framework,
+        content,
+        transform,
+        language,
+        lineNumbers,
+        suppressFrameworkContext,
+        spaceBetweenProperties,
+        inlineReactProperties,
+        copyToClipboard,
+    } = props;
+
+    if (!content) {
+        throwDevWarning({ message: 'No content in snippet' });
+        return;
+    }
+
+    // create FW specific snippet
+    const snippet = transform
+        ? snippetTransformer.transform(content, framework, {
+              suppressFrameworkContext,
+              spaceBetweenProperties,
+              inlineReactProperties,
+          })
+        : content;
+
+    return (
+        <Code
+            code={snippet}
+            language={language ? language : (languages[framework] as Language)}
+            lineNumbers={lineNumbers}
+            copyToClipboard={copyToClipboard}
+        />
+    );
+};
diff --git a/packages/ag-charts-website/src/components/snippet/SnippetFromRemoteUrl.tsx b/external/ag-website-shared/src/components/snippet/SnippetFromRemoteUrl.tsx
similarity index 92%
rename from packages/ag-charts-website/src/components/snippet/SnippetFromRemoteUrl.tsx
rename to external/ag-website-shared/src/components/snippet/SnippetFromRemoteUrl.tsx
index 844fa3c899..d60c74c122 100644
--- a/packages/ag-charts-website/src/components/snippet/SnippetFromRemoteUrl.tsx
+++ b/external/ag-website-shared/src/components/snippet/SnippetFromRemoteUrl.tsx
@@ -1,4 +1,4 @@
-import Code, { type Language } from '@components/Code';
+import Code, { type Language } from '@ag-website-shared/components/code/Code';
 import type { FunctionComponent } from 'react';
 import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
 
diff --git a/external/ag-website-shared/src/design-system/style-guide/TextElements.tsx b/external/ag-website-shared/src/design-system/style-guide/TextElements.tsx
index a7ce7fa207..0403a9d534 100644
--- a/external/ag-website-shared/src/design-system/style-guide/TextElements.tsx
+++ b/external/ag-website-shared/src/design-system/style-guide/TextElements.tsx
@@ -1,5 +1,4 @@
-import { Snippet } from '@components/snippet/Snippet';
-import React from 'react';
+import { Snippet } from '@ag-website-shared/components/snippet/Snippet';
 import type { FunctionComponent } from 'react';
 
 import styles from './StyleGuide.module.scss';
diff --git a/external/ag-website-shared/src/images/fw-logos/index.ts b/external/ag-website-shared/src/images/fw-logos/index.ts
index ebb2b5018f..134dc082c8 100644
--- a/external/ag-website-shared/src/images/fw-logos/index.ts
+++ b/external/ag-website-shared/src/images/fw-logos/index.ts
@@ -1,3 +1,5 @@
+import type { Framework } from '@ag-grid-types';
+
 import angularSvg from './angular.svg';
 import javascriptSvg from './javascript.svg';
 import reactSvg from './react.svg';
@@ -5,7 +7,7 @@ import solidSvg from './solid.svg';
 import vueSvg from './vue.svg';
 import vueInvertedSvg from './vue_inverted.svg';
 
-const fw_logos = {
+const fw_logos: Record<Framework | 'solid' | 'vueInverted', string> = {
     javascript: javascriptSvg.src,
     angular: angularSvg.src,
     react: reactSvg.src,
diff --git a/external/ag-website-shared/src/markdoc/tags/embedSnippet.ts b/external/ag-website-shared/src/markdoc/tags/embedSnippet.ts
new file mode 100644
index 0000000000..0bc7eddb1c
--- /dev/null
+++ b/external/ag-website-shared/src/markdoc/tags/embedSnippet.ts
@@ -0,0 +1,18 @@
+import { type Render, component } from '@astrojs/markdoc/config';
+import type { Config, Schema } from '@markdoc/markdoc';
+
+export const embedSnippet: Schema<Config, Render> = {
+    render: component('../../external/ag-website-shared/src/components/snippet/EmbedSnippet.astro'),
+    attributes: {
+        /**
+         * Source file relative to example folder
+         */
+        src: { type: String },
+        /**
+         * Source file url
+         */
+        url: { type: String },
+        language: { type: String },
+        lineNumbers: { type: Boolean },
+    },
+};
diff --git a/external/ag-website-shared/src/markdoc/tags/licenseSetup.ts b/external/ag-website-shared/src/markdoc/tags/licenseSetup.ts
deleted file mode 100644
index 803e5fef8d..0000000000
--- a/external/ag-website-shared/src/markdoc/tags/licenseSetup.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type Render, component } from '@astrojs/markdoc/config';
-import type { Config, Schema } from '@markdoc/markdoc';
-
-export const licenseSetup: Schema<Config, Render> = {
-    render: component('../../external/ag-website-shared/src/components/license-setup/components/LicenseSetup.astro'),
-};
diff --git a/external/ag-website-shared/src/utils/throwDevWarning.ts b/external/ag-website-shared/src/utils/throwDevWarning.ts
new file mode 100644
index 0000000000..f28bc430b4
--- /dev/null
+++ b/external/ag-website-shared/src/utils/throwDevWarning.ts
@@ -0,0 +1,19 @@
+import { getIsDev } from '@utils/env';
+
+interface Params {
+    message: string;
+    /**
+     * Don't print out a console warning if not in dev environment
+     */
+    skipWarning?: boolean;
+}
+
+export function throwDevWarning({ message, skipWarning }: Params) {
+    if (getIsDev()) {
+        throw new Error(message);
+    } else {
+        if (!skipWarning) {
+            console.warn(message);
+        }
+    }
+}
diff --git a/packages/ag-charts-website/markdoc.config.ts b/packages/ag-charts-website/markdoc.config.ts
index 3c0389498b..733b16efb9 100644
--- a/packages/ag-charts-website/markdoc.config.ts
+++ b/packages/ag-charts-website/markdoc.config.ts
@@ -2,6 +2,7 @@ import { isFramework } from '@ag-website-shared/markdoc/functions/isFramework';
 import { isNotJavascriptFramework } from '@ag-website-shared/markdoc/functions/isNotJavascriptFramework';
 import { heading } from '@ag-website-shared/markdoc/nodes/heading';
 import { br } from '@ag-website-shared/markdoc/tags/br';
+import { embedSnippet } from '@ag-website-shared/markdoc/tags/embedSnippet';
 import { enterpriseIcon } from '@ag-website-shared/markdoc/tags/enterpriseIcon';
 import { idea } from '@ag-website-shared/markdoc/tags/idea';
 import { image } from '@ag-website-shared/markdoc/tags/image';
@@ -38,6 +39,10 @@ export default defineMarkdocConfig({
         warning,
         idea,
         enterpriseIcon,
+        embedSnippet,
+        licenseSetup: {
+            render: component('./src/components/license-setup/LicenseSetup.astro'),
+        },
         chartExampleRunner: {
             render: component('./src/features/docs/components/DocsExampleRunner.astro'),
             attributes: {
@@ -100,20 +105,5 @@ export default defineMarkdocConfig({
                 specialTypes: { type: 'Object' },
             },
         },
-        embedSnippet: {
-            render: component('./src/components/snippet/EmbedSnippet.astro'),
-            attributes: {
-                /**
-                 * Source file relative to example folder
-                 */
-                src: { type: String },
-                /**
-                 * Source file url
-                 */
-                url: { type: String },
-                language: { type: String },
-                lineNumbers: { type: Boolean },
-            },
-        },
     },
 });
diff --git a/packages/ag-charts-website/src/components/license-setup/LicenseSetup.astro b/packages/ag-charts-website/src/components/license-setup/LicenseSetup.astro
new file mode 100644
index 0000000000..09ebff8399
--- /dev/null
+++ b/packages/ag-charts-website/src/components/license-setup/LicenseSetup.astro
@@ -0,0 +1,21 @@
+---
+import { LicenseSetup } from '@ag-website-shared/components/license-setup/components/LicenseSetup';
+import { getEntry } from 'astro:content';
+import { getFrameworkFromPath } from '@features/docs/utils/urlPaths';
+import seedRepos from '@ag-website-shared/content/seed-projects/grid-seed-projects.json';
+
+const { pathname } = Astro.url;
+const framework = getFrameworkFromPath(pathname);
+
+const { data: menuData } = await getEntry('menu', 'data');
+const menuItems = Object.values(menuData);
+---
+
+<LicenseSetup
+    client:only="react"
+    library="charts"
+    framework={framework}
+    path={pathname}
+    menuItems={menuItems}
+    seedRepos={seedRepos}
+/>
diff --git a/packages/ag-charts-website/src/components/pages-navigation/components/SideNavigation.tsx b/packages/ag-charts-website/src/components/pages-navigation/components/SideNavigation.tsx
index 74c3b4e0cd..1f80869e3f 100644
--- a/packages/ag-charts-website/src/components/pages-navigation/components/SideNavigation.tsx
+++ b/packages/ag-charts-website/src/components/pages-navigation/components/SideNavigation.tsx
@@ -2,49 +2,16 @@ import { navigate, scrollIntoViewById } from '@ag-website-shared/utils/navigatio
 import { useScrollSpy } from '@components/pages-navigation/hooks/useScrollSpy';
 import { addNonBreakingSpaceBetweenLastWords } from '@utils/addNonBreakingSpaceBetweenLastWords';
 import type { MarkdownHeading } from 'astro';
-import { type RefObject, useEffect } from 'react';
 
 import styles from './SideNavigation.module.scss';
 
 interface Props {
     headings: MarkdownHeading[];
+    delayedScrollSpy?: boolean;
 }
 
-/**
- * Remove nav links of headings that are not shown
- *
- * This can happen when the markdoc is commented out.
- */
-function useRemoveHiddenHeadings({
-    headings,
-    menuRef,
-}: {
-    headings: MarkdownHeading[];
-    menuRef: RefObject<HTMLElement>;
-}) {
-    useEffect(() => {
-        if (!menuRef?.current) {
-            return;
-        }
-        const hiddenHeadings = headings.filter(({ slug }) => {
-            return !document.getElementById(slug);
-        });
-
-        hiddenHeadings.forEach(({ slug }) => {
-            const navHeading = menuRef.current!.querySelector(`a[href='#${slug}']`);
-            if (!navHeading) {
-                return;
-            }
-            const navHeadingContainer = navHeading.parentElement;
-            navHeadingContainer?.classList.add(styles.hidden);
-        });
-    }, [headings, menuRef?.current]);
-}
-
-export function SideNavigation({ headings }: Props) {
-    const menuRef = useScrollSpy({ headings });
-
-    useRemoveHiddenHeadings({ headings, menuRef });
+export function SideNavigation({ headings, delayedScrollSpy }: Props) {
+    const menuRef = useScrollSpy({ headings, delayedScrollSpy });
 
     if (headings.length < 2) {
         return null;
diff --git a/packages/ag-charts-website/src/components/pages-navigation/hooks/useScrollSpy.ts b/packages/ag-charts-website/src/components/pages-navigation/hooks/useScrollSpy.ts
index b99b06564f..cad0bc5abe 100644
--- a/packages/ag-charts-website/src/components/pages-navigation/hooks/useScrollSpy.ts
+++ b/packages/ag-charts-website/src/components/pages-navigation/hooks/useScrollSpy.ts
@@ -1,9 +1,20 @@
 import { useLocation } from '@ag-website-shared/utils/navigation';
+import { scrollspy } from '@utils/scrollspy';
 import type { MarkdownHeading } from 'astro';
 import { useEffect, useRef } from 'react';
-import { scrollspy } from 'src/utils/scrollspy';
 
-export function useScrollSpy({ headings, offset = 120 }: { headings: MarkdownHeading[]; offset?: number }) {
+export function useScrollSpy({
+    headings,
+    offset = 120,
+    delayedScrollSpy,
+}: {
+    headings: MarkdownHeading[];
+    offset?: number;
+    /**
+     * Delay scroll spy running, so the UI has time to render
+     */
+    delayedScrollSpy?: boolean;
+}) {
     const menuRef = useRef<HTMLElement>(null);
     const location = useLocation();
 
@@ -14,7 +25,16 @@ export function useScrollSpy({ headings, offset = 120 }: { headings: MarkdownHea
         }
     }
 
-    useEffect(() => scrollspy(headings, handleScrollSpy, { offset }), [location?.hash, headings]);
+    useEffect(() => {
+        function runScrollSpy() {
+            scrollspy(headings, handleScrollSpy, { offset });
+        }
+        if (delayedScrollSpy) {
+            setTimeout(() => runScrollSpy(), 500);
+        } else {
+            runScrollSpy();
+        }
+    }, [location?.hash, headings, delayedScrollSpy]);
 
     return menuRef;
 }
diff --git a/packages/ag-charts-website/src/components/snippet/Snippet.tsx b/packages/ag-charts-website/src/components/snippet/Snippet.tsx
deleted file mode 100644
index adf875b220..0000000000
--- a/packages/ag-charts-website/src/components/snippet/Snippet.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import Code from '../Code';
-import { transform } from './snippetTransformer';
-
-const languages = {
-    react: 'jsx',
-    javascript: 'js',
-    angular: 'ts',
-    vue: 'ts',
-};
-
-/**
- * This takes a code snippet written in JavaScript and transforms it into an idiomatic code snippet for the selected
- * framework.
- */
-export const Snippet = (props) => {
-    const transformCode = props.transform === undefined ? true : props.transform === 'true';
-    const snippetToTransform = props.children.toString();
-
-    // snippets with spaces need to be prefixed with '|' as markdown doesn't allow spaces
-    const formattedSnippet = snippetToTransform.replace(/^\|/gm, '').trim();
-
-    // create FW specific snippet
-    const snippet = transformCode
-        ? transform(formattedSnippet, props.framework, extractOptions(props))
-        : formattedSnippet;
-
-    return (
-        <Code
-            code={snippet}
-            language={props.language ? props.language : languages[props.framework]}
-            lineNumbers={props.lineNumbers}
-        />
-    );
-};
-
-const extractOptions = (props) => {
-    const asBoolean = (prop) => ['true', '{true}', ''].includes(prop?.toLowerCase());
-
-    return {
-        suppressFrameworkContext: asBoolean(props['suppressframeworkcontext']),
-        spaceBetweenProperties: asBoolean(props['spacebetweenproperties']),
-        inlineReactProperties: asBoolean(props['inlinereactproperties']),
-    };
-};
diff --git a/packages/ag-charts-website/src/constants.ts b/packages/ag-charts-website/src/constants.ts
index a0a9e05c4d..01252c70d8 100644
--- a/packages/ag-charts-website/src/constants.ts
+++ b/packages/ag-charts-website/src/constants.ts
@@ -26,6 +26,8 @@ export const agChartsReactVersion = import.meta.env?.PUBLIC_PACKAGE_VERSION ?? '
 export const agChartsAngularVersion = import.meta.env?.PUBLIC_PACKAGE_VERSION ?? 'unknown';
 export const agChartsVueVersion = import.meta.env?.PUBLIC_PACKAGE_VERSION ?? 'unknown';
 
+export const agLibraryVersion = agChartsVersion;
+
 export const NPM_CDN = 'https://cdn.jsdelivr.net/npm';
 export const PUBLISHED_URLS = {
     'ag-charts-react': `${NPM_CDN}/ag-charts-react@${agChartsReactVersion}/`,
diff --git a/packages/ag-charts-website/src/content/config.ts b/packages/ag-charts-website/src/content/config.ts
index 6299d03d20..ad0d439d3d 100644
--- a/packages/ag-charts-website/src/content/config.ts
+++ b/packages/ag-charts-website/src/content/config.ts
@@ -17,6 +17,18 @@ const docs = defineCollection({
          * Hide left hand page menu
          */
         hidePageMenu: z.boolean().optional(),
+        /**
+         * Override side navigation headings
+         */
+        headings: z
+            .array(
+                z.object({
+                    depth: z.number(),
+                    slug: z.string(),
+                    text: z.string(),
+                })
+            )
+            .optional(),
     }),
 });
 
diff --git a/packages/ag-charts-website/src/content/docs/license-install/index.mdoc b/packages/ag-charts-website/src/content/docs/license-install/index.mdoc
new file mode 100644
index 0000000000..455c876ac8
--- /dev/null
+++ b/packages/ag-charts-website/src/content/docs/license-install/index.mdoc
@@ -0,0 +1,21 @@
+---
+title: 'Installing Your Licence Key'
+enterprise: true
+headings:
+    - slug: 'top'
+      text: 'Installing Your License Key'
+      depth: 1
+    - slug: 'validate-your-license'
+      text: 'Validate Your License'
+      depth: 2
+    - slug: 'add-your-dependencies'
+      text: 'Add Your Dependencies'
+      depth: 3
+    - slug: 'set-up-your-application'
+      text: 'Set Up Your Application'
+      depth: 3
+---
+
+Validate your licence key and set up your application. See sample code and example projects to learn how to install your AG Charts Enterprise product.
+
+{% licenseSetup /%}
diff --git a/packages/ag-charts-website/src/content/menu/data.json b/packages/ag-charts-website/src/content/menu/data.json
index 1afb878de7..67bd31851c 100644
--- a/packages/ag-charts-website/src/content/menu/data.json
+++ b/packages/ag-charts-website/src/content/menu/data.json
@@ -74,6 +74,10 @@
                     {
                         "title": "Upgrading to Enterprise",
                         "path": "licensing"
+                    },
+                    {
+                        "title": "Installing Your Licence Key",
+                        "path": "license-install"
                     }
                 ]
             },
diff --git a/packages/ag-charts-website/src/features/api-documentation/components/ApiReference.tsx b/packages/ag-charts-website/src/features/api-documentation/components/ApiReference.tsx
index ba6c2292ca..2479c88e07 100644
--- a/packages/ag-charts-website/src/features/api-documentation/components/ApiReference.tsx
+++ b/packages/ag-charts-website/src/features/api-documentation/components/ApiReference.tsx
@@ -1,6 +1,6 @@
+import Code from '@ag-website-shared/components/code/Code';
 import { Icon } from '@ag-website-shared/components/icon/Icon';
 import { navigate, scrollIntoViewById, useLocation } from '@ag-website-shared/utils/navigation';
-import Code from '@components/Code';
 import type {
     ApiReferenceNode,
     ApiReferenceType,
diff --git a/packages/ag-charts-website/src/features/example-runner/components/CodeViewer.tsx b/packages/ag-charts-website/src/features/example-runner/components/CodeViewer.tsx
index c9e32e423d..77a370d594 100644
--- a/packages/ag-charts-website/src/features/example-runner/components/CodeViewer.tsx
+++ b/packages/ag-charts-website/src/features/example-runner/components/CodeViewer.tsx
@@ -1,6 +1,6 @@
 import type { InternalFramework } from '@ag-grid-types';
+import Code from '@ag-website-shared/components/code/Code';
 import { Icon } from '@ag-website-shared/components/icon/Icon';
-import Code from '@components/Code';
 import type { ExampleType, FileContents } from '@features/example-generator/types';
 import { doOnEnter } from '@utils/doOnEnter';
 import classnames from 'classnames';
diff --git a/packages/ag-charts-website/src/pages/[framework]/[pageName].astro b/packages/ag-charts-website/src/pages/[framework]/[pageName].astro
index d0f140cc10..9ead2693a5 100644
--- a/packages/ag-charts-website/src/pages/[framework]/[pageName].astro
+++ b/packages/ag-charts-website/src/pages/[framework]/[pageName].astro
@@ -20,15 +20,17 @@ const { page } = Astro.props;
 const currentFramework = Astro.params.framework as Framework;
 const pageName = Astro.params.pageName as Framework;
 const path = Astro.url.pathname;
-const { title, enterprise, hideSideMenu, hidePageMenu } = page.data;
+const { title, enterprise, hideSideMenu, hidePageMenu, headings: pageHeadings } = page.data;
 
 const { Content } = await page.render();
-const headings = getHeadings({
-    title,
-    markdocContent: page.body,
-    framework: currentFramework,
-    getTabItemSlug: (id) => `${DOCS_TAB_ITEM_ID_PREFIX}${id}`,
-});
+const headings =
+    pageHeadings ||
+    getHeadings({
+        title,
+        markdocContent: page.body,
+        framework: currentFramework,
+        getTabItemSlug: (id) => `${DOCS_TAB_ITEM_ID_PREFIX}${id}`,
+    });
 
 const { data: menuData } = await getEntry('menu', 'data');
 const menuItems = Object.values(menuData);
@@ -80,7 +82,7 @@ const descriptionWithSeoTagline = `${description} ${seoTagline}`;
             </div>
         </div>
 
-        {!hideSideMenu && <SideNavigation client:load headings={headings} />}
+        {!hideSideMenu && <SideNavigation client:load headings={headings} delayedScrollSpy={Boolean(pageHeadings)} />}
     </div>
 </Layout>