Move theme helpers and some stylesheets to proper locations

shlink-frontend-kit/src/form/SearchField.scss

@@ -1,4 +1,4 @@
-@import '../../../src/utils/mixins/vertical-align';
+@import '../../../shlink-web-component/src/utils/mixins/vertical-align';
 
 .search-field {
   position: relative;

shlink-frontend-kit/src/index.scss

@@ -0,0 +1,2 @@
+@import './utils/ResponsiveTable';
+@import './theme/theme';

shlink-frontend-kit/src/index.ts

@@ -3,4 +3,5 @@ export * from './form';
 export * from './hooks';
 export * from './navigation';
 export * from './ordering';
+export * from './theme';
 export * from './utils';

shlink-frontend-kit/src/navigation/DropdownBtn.scss

@@ -1,6 +1,6 @@
 /* stylelint-disable no-descending-specificity */
 
-@import '../../../src/utils/mixins/vertical-align';
+@import '../../../shlink-web-component/src/utils/mixins/vertical-align';
 
 .dropdown-btn__toggle.dropdown-btn__toggle {
   text-align: left;

shlink-frontend-kit/src/navigation/NavPills.scss

@@ -1,4 +1,4 @@
-@import '../../../src/utils/base';
+@import '../base';
 
 .nav-pills__nav {
   position: sticky !important;

shlink-frontend-kit/src/utils/ResponsiveTable.scss

@@ -1,4 +1,4 @@
-@import '../../utils/base';
+@import '../base';
 
 .responsive-table__header {
   @media (max-width: $responsiveTableBreakpoint) {

shlink-web-component/src/Main.tsx

@@ -9,6 +9,7 @@ import { AsideMenu } from './common/AsideMenu';
 import { useFeature } from './utils/features';
 import { useSwipeable } from './utils/helpers/hooks';
 import { useRoutesPrefix } from './utils/routesPrefix';
+import './utils/StickyCardPaginator.scss';
 
 export type MainProps = {
   createNotFound?: (nonPrefixedHomePath: string) => ReactNode;

shlink-web-component/src/common/AsideMenu.scss

@@ -1,5 +1,5 @@
-@import '../../../src/utils/base';
-@import '../../../src/utils/mixins/vertical-align';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../utils/mixins/vertical-align';
 
 .aside-menu {
   width: $asideMenuWidth;

shlink-web-component/src/domains/DomainSelector.scss

@@ -1,5 +1,5 @@
-@import '../../../src/utils/base';
-@import '../../../src/utils/mixins/vertical-align';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../utils/mixins/vertical-align';
 
 .domains-dropdown__toggle-btn.domains-dropdown__toggle-btn,
 .domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:hover,

shlink-web-component/src/overview/helpers/HighlightCard.scss

@@ -1,4 +1,4 @@
-@import '../../../../src/utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .highlight-card.highlight-card {
   text-align: center;

shlink-web-component/src/short-urls/ShortUrlForm.scss

@@ -1,4 +1,4 @@
-@import '../../../src/utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .short-url-form p:last-child {
   margin-bottom: 0;

shlink-web-component/src/short-urls/helpers/ShortUrlsRow.scss

@@ -1,6 +1,11 @@
-@import '../../../../src/utils/base';
-@import '../../../../src/utils/mixins/text-ellipsis';
-@import '../../../../src/utils/mixins/vertical-align';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../../utils/mixins/vertical-align';
+
+@mixin text-ellipsis() {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
 
 .short-urls-row__cell.short-urls-row__cell {
   vertical-align: middle !important;

shlink-web-component/src/tags/TagsTable.scss

@@ -1,5 +1,5 @@
-@import '../../../src/utils/base';
-@import '../../../src/utils/mixins/sticky-cell';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../utils/mixins/sticky-cell';
 
 .tags-table__header-cell.tags-table__header-cell {
   @include sticky-cell(false);

shlink-web-component/src/utils/components/IconInput.scss

@@ -1,5 +1,5 @@
-@import '../../../../src/utils/mixins/vertical-align';
-@import '../../../../src/utils/base';
+@import '../mixins/vertical-align';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .icon-input-container {
   position: relative;

shlink-web-component/src/utils/dates/DateInput.scss

@@ -1,5 +1,5 @@
-@import '../../../../src/utils/mixins/vertical-align';
-@import '../../../../src/utils/base';
+@import '../mixins/vertical-align';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .react-datepicker__close-icon.react-datepicker__close-icon {
   @include vertical-align();

shlink-web-component/src/utils/mixins/sticky-cell.scss

@@ -1,4 +1,4 @@
-@import '../base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 @mixin sticky-cell($with-separators: true) {
   z-index: 1;

shlink-web-component/src/utils/mixins/vertical-align.scss

@@ -0,0 +1,5 @@
+@mixin vertical-align($extraTransforms: null) {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) $extraTransforms;
+}

shlink-web-component/src/utils/settings.ts

@@ -1,5 +1,5 @@
+import type { Theme } from '@shlinkio/shlink-frontend-kit';
 import { createContext, useContext } from 'react';
-import type { Theme } from '../../../src/utils/theme';
 import type { ShortUrlsOrder } from '../short-urls/data';
 import type { TagsOrder } from '../tags/data/TagsListChildrenProps';
 import type { DateInterval } from './dates/helpers/dateIntervals';

shlink-web-component/src/visits/VisitsTable.scss

@@ -1,5 +1,5 @@
-@import '../../../src/utils/base';
-@import '../../../src/utils/mixins/sticky-cell';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../utils/mixins/sticky-cell';
 
 .visits-table {
   margin: 1.5rem 0 0;

shlink-web-component/src/visits/charts/DoughnutChart.tsx

@@ -1,9 +1,9 @@
+import { isDarkThemeEnabled, PRIMARY_DARK_COLOR, PRIMARY_LIGHT_COLOR } from '@shlinkio/shlink-frontend-kit';
 import type { Chart, ChartData, ChartDataset, ChartOptions } from 'chart.js';
 import { keys, values } from 'ramda';
 import type { FC } from 'react';
 import { memo, useState } from 'react';
 import { Doughnut } from 'react-chartjs-2';
-import { isDarkThemeEnabled, PRIMARY_DARK_COLOR, PRIMARY_LIGHT_COLOR } from '../../../../src/utils/theme';
 import { renderPieChartLabel } from '../../utils/helpers/charts';
 import type { Stats } from '../types';
 import { DoughnutChartLegend } from './DoughnutChartLegend';

shlink-web-component/src/visits/charts/DoughnutChartLegend.scss

@@ -1,4 +1,4 @@
-@import '../../../../src/utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .doughnut-chart-legend {
   list-style-type: none;

shlink-web-component/src/visits/charts/HorizontalBarChart.tsx

@@ -1,9 +1,9 @@
+import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '@shlinkio/shlink-frontend-kit';
 import type { ChartData, ChartDataset, ChartOptions, InteractionItem } from 'chart.js';
 import { keys, values } from 'ramda';
 import type { FC, MutableRefObject } from 'react';
 import { useRef } from 'react';
 import { Bar, getElementAtEvent } from 'react-chartjs-2';
-import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../../../src/utils/theme';
 import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
 import { prettify } from '../../utils/helpers/numbers';
 import type { Stats } from '../types';

shlink-web-component/src/visits/charts/LineChartCard.scss

@@ -1,4 +1,4 @@
-@import '../../../../src/utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .line-chart-card__body canvas {
   height: 300px !important;

shlink-web-component/src/visits/charts/LineChartCard.tsx

@@ -1,4 +1,4 @@
-import { ToggleSwitch, useToggle } from '@shlinkio/shlink-frontend-kit';
+import { HIGHLIGHTED_COLOR, MAIN_COLOR, ToggleSwitch, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { ChartData, ChartDataset, ChartOptions, InteractionItem } from 'chart.js';
 import {
   add,
@@ -24,7 +24,6 @@ import {
   DropdownToggle,
   UncontrolledDropdown,
 } from 'reactstrap';
-import { HIGHLIGHTED_COLOR, MAIN_COLOR } from '../../../../src/utils/theme';
 import { formatInternational } from '../../utils/dates/helpers/date';
 import { rangeOf } from '../../utils/helpers';
 import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';

shlink-web-component/src/visits/helpers/MapModal.scss

@@ -1,5 +1,5 @@
-@import '../../../../src/utils/base';
-@import '../../../../src/utils/mixins/fit-with-margin';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '../../utils/mixins/fit-with-margin';
 
 .map-modal__modal.map-modal__modal {
   @media (min-width: $mdMin) {

shlink-web-component/test/tags/helpers/Tag.test.tsx

@@ -1,7 +1,7 @@
+import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import type { ReactNode } from 'react';
-import { MAIN_COLOR } from '../../../../src/utils/theme';
 import { Tag } from '../../../src/tags/helpers/Tag';
 import type { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
 import { renderWithEvents } from '../../__helpers__/setUpTest';

shlink-web-component/test/utils/services/ColorGenerator.test.ts

@@ -1,5 +1,5 @@
+import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MAIN_COLOR } from '../../../../src/utils/theme';
 import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
 import type { LocalStorage } from '../../../src/utils/services/LocalStorage';
 

src/app/App.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .app-container {
   height: 100%;

src/app/App.tsx

@@ -1,3 +1,4 @@
+import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
 import type { Settings } from '@shlinkio/shlink-web-component';
 import classNames from 'classnames';
 import type { FC } from 'react';
@@ -7,7 +8,6 @@ import { AppUpdateBanner } from '../common/AppUpdateBanner';
 import { NotFound } from '../common/NotFound';
 import type { ServersMap } from '../servers/data';
 import { forceUpdate } from '../utils/helpers/sw';
-import { changeThemeInMarkup } from '../utils/theme';
 import './App.scss';
 
 interface AppProps {

src/common/AppUpdateBanner.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 @import '../utils/mixins/horizontal-align';
 
 .app-update-banner.app-update-banner {

src/common/Home.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 @import '../utils/mixins/vertical-align';
 
 $mainCardWidth: 720px;

src/common/MainHeader.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .main-header.main-header {
   color: white;

src/common/NoMenuLayout.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .no-menu-wrapper {
   padding: 15px 0 0;

src/common/ShlinkVersionsContainer.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .shlink-versions-container--with-sidebar {
   margin-left: 0;

src/common/ShlinkWebComponentContainer.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .menu-layout__swipeable {
   height: 100%;

src/common/img/ShlinkLogo.tsx

@@ -1,4 +1,4 @@
-import { MAIN_COLOR } from '../../utils/theme';
+import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 
 export interface ShlinkLogoProps {
   color?: string;

src/common/react-tag-autocomplete.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .react-tags {
   position: relative;

src/index.scss

@@ -1,12 +1,10 @@
 /* stylelint-disable no-descending-specificity */
 
-@import './utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '@shlinkio/shlink-frontend-kit/index';
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import './common/react-tag-autocomplete.scss';
-@import './utils/theme/theme';
 @import './utils/mixins/text-ellipsis';
-@import './utils/table/ResponsiveTable';
-@import './utils/StickyCardPaginator';
 
 * {
   outline: none !important;

src/servers/ServersListGroup.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 @import '../utils/mixins/vertical-align';
 @import '../utils/mixins/thin-scroll';
 

src/servers/helpers/ServerError.scss

@@ -1,4 +1,4 @@
-@import '../../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .server-error__container {
   text-align: center;

src/settings/UserInterfaceSettings.tsx

@@ -1,10 +1,9 @@
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
+import type { Theme } from '@shlinkio/shlink-frontend-kit';
+import { changeThemeInMarkup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
 import type { Settings, UiSettings } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
-import type { Theme } from '../utils/theme';
-import { changeThemeInMarkup } from '../utils/theme';
 import './UserInterfaceSettings.scss';
 
 interface UserInterfaceProps {

test/common/img/ShlinkLogo.test.tsx

@@ -1,7 +1,7 @@
+import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 import { render } from '@testing-library/react';
 import type { ShlinkLogoProps } from '../../../src/common/img/ShlinkLogo';
 import { ShlinkLogo } from '../../../src/common/img/ShlinkLogo';
-import { MAIN_COLOR } from '../../../src/utils/theme';
 
 describe('<ShlinkLogo />', () => {
   const setUp = (props: ShlinkLogoProps) => render(<ShlinkLogo {...props} />);

test/settings/UserInterfaceSettings.test.tsx

@@ -1,8 +1,8 @@
+import type { Theme } from '@shlinkio/shlink-frontend-kit';
 import type { UiSettings } from '@shlinkio/shlink-web-component';
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
-import type { Theme } from '../../src/utils/theme';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<UserInterfaceSettings />', () => {