@ironsource/shared-ui 2.0.0-rc.1 → 2.0.0-test.1

package/index.js

@@ -0,0 +1,185 @@
+import './MenuItem.vue_vue_type_style_index_0_scoped_c7e837fa_lang.css';
+import { AppTriggerTypes as T } from "./components/appTrigger/index.js";
+import { AutocompleteDropdownTypes as c } from "./components/autocompleteDropdown/index.js";
+import { MenuItemTypes as I } from "./components/menuItem/index.js";
+import { MenuTypes as E } from "./components/menu/index.js";
+import { AppIconTypes as $ } from "./components/appIcon/index.js";
+import { RadioButtonTypes as F } from "./components/radioButton/index.js";
+import { Snackbar as C } from "./components/snackbar/index.js";
+import { FloatingToolbarTypes as B } from "./components/floatingToolbar/index.js";
+import { IncludeExcludeTypes as P } from "./components/includeExclude/index.js";
+import { CssBaselineTypes as w } from "./components/cssBaseline/index.js";
+import { ID_INJECTION_KEY as H, useId as O } from "./composables/useId.js";
+import { EmptyStateTypes as N } from "./components/emptyState/index.js";
+import { TableTypes as G } from "./components/table/index.js";
+import { DialogTypes as K } from "./components/dialog/index.js";
+import { FilterPanelTypes as Y } from "./components/filtersPanel/index.js";
+import { FilterDropdownTypes as q } from "./components/filterDropdown/index.js";
+import { TabsTypes as L } from "./components/tabs/index.js";
+import { CheckboxTypes as U } from "./components/checkbox/index.js";
+import { IconTypes as X } from "./components/icon/index.js";
+import { SkeletonTypes as ee } from "./components/skeleton/index.js";
+import { TypographyTypes as re } from "./components/typography/index.js";
+import { TypographyTypesV4 as pe } from "./components/typography/v4/index.js";
+import { PopoverTypes as fe } from "./components/popover/index.js";
+import * as e from "./components/button/v3/index.js";
+import * as o from "./components/button/v4/index.js";
+import * as r from "./components/chip/v3/index.js";
+import * as t from "./components/chip/v4/index.js";
+import * as p from "./components/switch/v3/index.js";
+import * as a from "./components/switch/v4/index.js";
+import * as f from "./components/dropdown/v3/index.js";
+import * as m from "./components/dropdown/v4/index.js";
+import * as x from "./components/search/v3/index.js";
+import * as s from "./components/search/v4/index.js";
+import * as l from "./components/input/v3/index.js";
+import * as d from "./components/input/v4/index.js";
+import { ToggleTypes as xe } from "./components/toggle/index.js";
+import { TooltipTypes as le } from "./components/tooltip/index.js";
+import { TextAreaTypes as ue } from "./components/textArea/index.js";
+import { EditableTypes as ie } from "./components/table-cells/index.js";
+import { useToggle as ye } from "./composables/useToggle.js";
+import { useSearch as ge } from "./composables/useSearch.js";
+import { DateRangeTypes as be } from "./components/dateRange/index.js";
+import { DatePickerTypes as De } from "./components/datePicker/index.js";
+import { BannerTypes as Ae } from "./components/banner/index.js";
+import { default as ke } from "./components/appTrigger/AppTrigger.vue.js";
+import { default as he } from "./components/autocompleteDropdown/AutocompleteDropdown.vue.js";
+import { default as Se } from "./components/menuItem/MenuItem.vue.js";
+import { default as Re } from "./components/menu/Menu.vue.js";
+import { default as Me } from "./components/appIcon/AppIcon.vue.js";
+import { default as Oe } from "./components/radioButton/RadioButton.vue.js";
+import { default as Ne } from "./components/radioButton/RadioGroup.vue.js";
+import { snackbarEmits as Ge, snackbarTypes as Je } from "./components/snackbar/snackbar.types.js";
+import { default as Ve } from "./components/floatingToolbar/FloatingToolbar.vue.js";
+import { default as je } from "./components/includeExclude/IncludeExclude.vue.js";
+import { default as ze } from "./components/includeExclude/IncludeExcludeDragDrop.vue.js";
+import { default as Qe } from "./components/includeExclude/IncludeExcludeOption.vue.js";
+import { default as We } from "./components/includeExclude/IncludeExcludeOptionDraggable.vue.js";
+import { default as Ze } from "./components/includeExclude/IncludeExcludeAppTrigger.vue.js";
+import { default as oo } from "./components/includeExclude/IncludeExcludeAppHeader.vue.js";
+import { default as to } from "./components/includeExclude/IncludeExcludeChipFilter.vue.js";
+import { default as ao } from "./components/cssBaseline/CssBaseline.vue.js";
+import { default as mo } from "./components/emptyState/EmptyState.vue.js";
+import { default as so } from "./components/table/Table.vue.js";
+import { TableContext as uo } from "./components/table/TableContext.js";
+import { default as io } from "./components/dialog/Dialog.vue.js";
+import { Reason as yo } from "./components/dialog/Reason.js";
+import { default as go } from "./components/filtersPanel/FiltersPanel.vue.js";
+import { default as bo } from "./components/filtersPanel/FilterSearchInput.vue.js";
+import { useHiddenFilter as Do } from "./components/filtersPanel/useHiddenFilter.js";
+import { default as Ao } from "./components/filterDropdown/FilterDropdown.vue.js";
+import { default as ko } from "./components/filterDropdown/AddFilterButton.vue.js";
+import { default as ho } from "./components/tabs/Tabs.vue.js";
+import { default as So } from "./components/checkbox/Checkbox.vue.js";
+import { default as Ro } from "./components/icon/Icon.vue.js";
+import { icons as Mo } from "./components/icon/icons/index.js";
+import { default as Oo } from "./components/skeleton/Skeleton.vue.js";
+import { default as No } from "./components/typography/Heading.vue.js";
+import { default as Go } from "./components/typography/Text.vue.js";
+import { default as Ko } from "./components/typography/v4/Typography.vue.js";
+import { default as Yo } from "./components/popover/Popover.vue.js";
+import { default as qo } from "./components/toggle/Toggle.vue.js";
+import { default as Lo } from "./components/tooltip/Tooltip.vue.js";
+import { default as Uo } from "./components/textArea/TextArea.vue.js";
+import { default as Xo } from "./components/table-cells/Editable.vue.js";
+import { EditableContext as er, useEditableContext as or } from "./components/table-cells/EditableContext.js";
+import { default as tr } from "./components/dateRange/DateRange.vue.js";
+import { default as ar } from "./components/datePicker/DatePicker.vue.js";
+import { default as mr } from "./components/banner/Banner.vue.js";
+const u = {
+  ...r,
+  ...t,
+  ...p,
+  ...a,
+  ...e,
+  ...o,
+  ...f,
+  ...m,
+  ...x,
+  ...s,
+  ...l,
+  ...d
+};
+export {
+  ko as AddFilterButton,
+  Me as AppIcon,
+  $ as AppIconTypes,
+  ke as AppTrigger,
+  T as AppTriggerTypes,
+  he as AutocompleteDropdown,
+  c as AutocompleteDropdownTypes,
+  mr as Banner,
+  Ae as BannerTypes,
+  So as Checkbox,
+  U as CheckboxTypes,
+  ao as CssBaseline,
+  w as CssBaselineTypes,
+  ar as DatePicker,
+  De as DatePickerTypes,
+  tr as DateRange,
+  be as DateRangeTypes,
+  io as Dialog,
+  K as DialogTypes,
+  Xo as Editable,
+  er as EditableContext,
+  ie as EditableTypes,
+  mo as EmptyState,
+  N as EmptyStateTypes,
+  Ao as FilterDropdown,
+  q as FilterDropdownTypes,
+  Y as FilterPanelTypes,
+  bo as FilterSearchInput,
+  go as FiltersPanel,
+  Ve as FloatingToolbar,
+  B as FloatingToolbarTypes,
+  No as Heading,
+  H as ID_INJECTION_KEY,
+  Ro as Icon,
+  X as IconTypes,
+  je as IncludeExclude,
+  oo as IncludeExcludeAppHeader,
+  Ze as IncludeExcludeAppTrigger,
+  to as IncludeExcludeChipFilter,
+  ze as IncludeExcludeDragDrop,
+  Qe as IncludeExcludeOption,
+  We as IncludeExcludeOptionDraggable,
+  P as IncludeExcludeTypes,
+  Re as Menu,
+  Se as MenuItem,
+  I as MenuItemTypes,
+  E as MenuTypes,
+  Yo as Popover,
+  fe as PopoverTypes,
+  Oe as RadioButton,
+  F as RadioButtonTypes,
+  Ne as RadioGroup,
+  yo as Reason,
+  Oo as Skeleton,
+  ee as SkeletonTypes,
+  C as Snackbar,
+  so as Table,
+  uo as TableContext,
+  G as TableTypes,
+  ho as Tabs,
+  L as TabsTypes,
+  Go as Text,
+  Uo as TextArea,
+  ue as TextAreaTypes,
+  qo as Toggle,
+  xe as ToggleTypes,
+  Lo as Tooltip,
+  le as TooltipTypes,
+  Ko as Typography,
+  re as TypographyTypes,
+  pe as TypographyTypesV4,
+  u as default,
+  Mo as icons,
+  Ge as snackbarEmits,
+  Je as snackbarTypes,
+  or as useEditableContext,
+  Do as useHiddenFilter,
+  O as useId,
+  ge as useSearch,
+  ye as useToggle
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-test.1",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -9,13 +9,14 @@
     "dev": "vite",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && node inject-css.js && sh ./scripts/build-styles.sh",
     "preview": "vite preview",
-    "storybook": "StoryBookEnv=dev start-storybook -p 6006",
-    "storybook:dist": "StoryBookEnv=prod start-storybook -p 6006",
-    "build-storybook": "build-storybook -o docs",
+    "storybook": "StoryBookEnv=dev sb dev -p 6006",
+    "storybook:dist": "StoryBookEnv=prod sb dev -p 6006",
+    "build-storybook": "storybook build -o docs",
     "serve-storybook": "RemoveAddons=true npm run build-storybook && http-server ./docs --port 6007",
     "serve-storybook-ci": "npx concurrently -s first -n 'SB,TEST' -c 'magenta,blue' 'npm run storybook:dist --silent' 'npx wait-on tcp:6006' ",
     "test-storybook": "test-storybook --maxWorkers=2",
-    "test-storybook-ci": "npx concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'npm run storybook:dist --silent' 'npx wait-on tcp:6006 && npm run test-storybook' ",
+    "test-storybook-ci:old": "npx concurrently -k -s first -n 'SB,TEST' -c \"magenta,blue\" \"npm run storybook:dist --silent\" \"npx wait-on tcp:6006 && npm run test-storybook\" ",
+    "test-storybook-ci": "concurrently 'npm run storybook:dist --silent' 'npx wait-on http://localhost:6006 && npm run test-storybook'  --kill-others --success first",
     "jest:integration:update": "jest --updateSnapshot",
     "jest:integration": "jest --runTestsByPath $TESTS_LISTS",
     "test:integration": "start-server-and-test serve-storybook http-get://localhost:6007 jest:integration",
@@ -44,11 +45,17 @@
     "release": "commit-and-tag-version"
   },
   "dependencies": {
+    "@phosphor-icons/vue": "^2.1.6",
+    "@storybook/cli": "^7.5.3",
+    "@storybook/vue3-vite": "^7.5.3",
     "@vueuse/core": "^8.7.5",
     "@vueuse/integrations": "^8.9.1",
     "date-fns": "^2.29.1",
     "floating-vue": "2.0.0-beta.20",
     "focus-trap": "^6.9.4",
+    "npm-check-updates": "^16.14.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "vue": "^3.2.31",
     "vuedraggable": "^4.1.0"
   },
@@ -61,72 +68,73 @@
     "vue": "^3.2.31"
   },
   "devDependencies": {
-    "@babel/core": "7.17.9",
-    "@babel/node": "7.16.8",
-    "@commitlint/cli": "^17.0.3",
-    "@commitlint/config-conventional": "^17.0.3",
-    "@figus/cli": "^2.0.8",
-    "@mdx-js/react": "^2.1.2",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-docs": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addon-measure": "^6.5.9",
-    "@storybook/addon-outline": "^6.5.9",
-    "@storybook/builder-vite": "^0.1.36",
-    "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/test-runner": "^0.5.0",
-    "@storybook/vue3": "^6.5.9",
-    "@types/download": "^8.0.1",
-    "@types/node": "^18.0.0",
-    "@types/prismjs": "^1.26.0",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@babel/core": "7.23.3",
+    "@babel/node": "7.22.19",
+    "@commitlint/cli": "^18.4.1",
+    "@commitlint/config-conventional": "^18.4.0",
+    "@figus/cli": "^2.0.22",
+    "@mdx-js/react": "^3.0.0",
+    "@playwright/test": "^1.39.0",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-docs": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-measure": "^7.5.3",
+    "@storybook/addon-outline": "^7.5.3",
+    "@storybook/mdx2-csf": "^1.1.0",
+    "@storybook/test-runner": "^0.14.1",
+    "@storybook/vue3": "^7.5.3",
+    "@types/download": "^8.0.5",
+    "@types/node": "^20.9.0",
+    "@types/prismjs": "^1.26.3",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "@vitejs/plugin-vue": "^4.4.1",
     "@vitest/coverage-c8": "^0.23.4",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.0.0-rc.17",
-    "autoprefixer": "^10.4.7",
-    "commit-and-tag-version": "^10.1.0",
-    "concurrently": "^7.3.0",
-    "dedent": "^0.7.0",
-    "dotenv": "^16.0.1",
-    "eslint": "^8.11.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-storybook": "^0.5.13",
-    "eslint-plugin-vue": "^8.5.0",
-    "fast-glob": "^3.2.11",
-    "figma-api": "^1.10.1",
-    "fs-extra": "^10.1.0",
-    "happy-dom": "^2.49.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.2",
+    "autoprefixer": "^10.4.16",
+    "commit-and-tag-version": "^12.0.0",
+    "concurrently": "^8.2.2",
+    "dedent": "^1.5.1",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-vue": "^9.18.1",
+    "fast-glob": "^3.3.2",
+    "figma-api": "^1.11.0",
+    "fs-extra": "^11.1.1",
+    "happy-dom": "^12.10.3",
     "http-server": "^14.1.1",
-    "husky": "^8.0.1",
+    "husky": "^8.0.3",
     "i": "^0.3.7",
-    "jest": "^27.5.1",
-    "jest-image-snapshot": "^6.1.0",
-    "jest-puppeteer": "^6.2.0",
-    "lint-staged": "^13.0.3",
+    "jest": "^29.7.0",
+    "jest-image-snapshot": "^6.2.0",
+    "jest-puppeteer": "^9.0.1",
+    "lint-staged": "^15.1.0",
     "lodash.kebabcase": "^4.1.1",
     "mustache": "^4.2.0",
-    "nodejs-file-downloader": "^4.10.1",
-    "npm": "^8.19.2",
-    "postcss": "^8.4.14",
-    "prettier": "^2.6.0",
+    "nodejs-file-downloader": "^4.12.1",
+    "npm": "^10.2.3",
+    "postcss": "^8.4.31",
+    "prettier": "^3.1.0",
     "prismjs": "^1.29.0",
-    "puppeteer": "^19.4.1",
-    "replace": "^1.2.1",
-    "rimraf": "^3.0.2",
-    "sass": "^1.49.7",
-    "start-server-and-test": "^1.15.2",
-    "svgo": "^2.8.0",
-    "typescript": "^4.5.4",
-    "vite": "^2.9.9",
-    "vite-plugin-libcss": "^1.0.5",
-    "vite-plugin-static-copy": "^0.6.0",
-    "vitest": "^0.23.2",
-    "vue-tsc": "^0.35.0"
+    "puppeteer": "^21.5.1",
+    "replace": "^1.2.2",
+    "rimraf": "^5.0.5",
+    "sass": "^1.69.5",
+    "start-server-and-test": "^2.0.2",
+    "svgo": "^3.0.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vite-plugin-libcss": "^1.1.1",
+    "vite-plugin-static-copy": "^0.17.0",
+    "vitest": "^0.34.6",
+    "vue-tsc": "^1.8.22",
+    "wait-on": "^7.2.0"
   },
   "repository": "https://github.com/ironsource-mobile/shared-ui-ssp.git",
   "main": "./index.js",
@@ -176,10 +184,11 @@
     "./text": "./components/typography/Text.vue.js",
     "./heading": "./components/typography/Heading.vue.js",
     "./popover": "./components/popover/Popover.vue.js",
-    "./input": "./components/input/Input.vue.js",
-    "./dollarInput": "./components/input/DollarInput.vue.js",
-    "./passwordInput": "./components/input/PasswordInput.vue.js",
-    "./percentageInput": "./components/input/PercentageInput.vue.js",
+    "./input": "./components/input/v3/Input.vue.js",
+    "./input/v4": "./components/input/v4/TextField.vue.js",
+    "./dollarInput": "./components/input/v3/DollarInput.vue.js",
+    "./passwordInput": "./components/input/v3/PasswordInput.vue.js",
+    "./percentageInput": "./components/input/v3/PercentageInput.vue.js",
     "./textArea": "./components/textArea/TextArea.vue.js",
     "./styleguide": "./styleguide.scss",
     "./commonCssVariables": "./commonCssVariables.scss",

package/styles/v4/border-radius.css

@@ -1,4 +1,4 @@
-:root {
+.light-theme-v4 {
     --border-radius-xs: 2px;
     --border-radius-sm: 4px;
     --border-radius-md: 6px;

package/styles/v4/breakpoints.scss

@@ -0,0 +1,131 @@
+$breakPoints: (
+    xxs: 0,
+    // Phones - 768px and below
+    xs: 768px,
+    // Tablet portrait - 768px - 1023px
+    sm: 1024px,
+    // Tablet landscape - 1024px - 1279px
+    md: 1280px,
+    // Small laptop - 1280px - 1439px
+    lg: 1440px,
+    // Large laptop - 1440px - 1919px
+    xl: 1920px,
+    // Desktop - 1920px - 2559px
+    xxl: 2560px,
+    // Big Desktop - 2560px and up
+
+) !default;
+
+// Breakpoint viewport sizes and media queries.
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+// The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) {
+    $n: index($breakpoint-names, $name);
+
+    @if not $n {
+        @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+    }
+
+    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $breakPoints) {
+    $min: map-get($breakpoints, $name);
+    @return if($min !=0, $min, null);
+}
+
+// Maximum breakpoint width.
+// The maximum value is reduced by 0.02px to work around the limitations of
+@function breakpoint-max($name, $breakpoints: $breakPoints) {
+    $max: map-get($breakpoints, $name);
+    @return if($max and $max > 0, $max - .02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $breakPoints) {
+    @return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-min($name, $breakpoints: $breakPoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    }
+    @else {
+        @content;
+    }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-max($name, $breakpoints: $breakPoints) {
+    $max: breakpoint-max($name, $breakpoints);
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    }
+    @else {
+        @content;
+    }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $breakPoints) {
+    $min: breakpoint-min($lower, $breakpoints);
+    $max: breakpoint-max($upper, $breakpoints);
+    @if $min !=null and $max !=null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    }
+    @else if $max==null {
+        @include media-breakpoint-min($lower, $breakpoints) {
+            @content;
+        }
+    }
+    @else if $min==null {
+        @include media-breakpoint-max($upper, $breakpoints) {
+            @content;
+        }
+    }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $breakPoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    $next: breakpoint-next($name, $breakpoints);
+    $max: breakpoint-max($next);
+    @if $min !=null and $max !=null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    }
+    @else if $max==null {
+        @include media-breakpoint-min($name, $breakpoints) {
+            @content;
+        }
+    }
+    @else if $min==null {
+        @include media-breakpoint-max($next, $breakpoints) {
+            @content;
+        }
+    }
+}