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,3 +1,2 @@
 __diff_output__
-/external/ag-website-shared/
 

.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

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'],
+ },
+ ],
+ },
+ },
+];

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);
+ }
+}

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;
  }