@takaro/lib-components 0.0.0-next.0da151e

package/src/hooks/useCallbackRef.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+/**
+ * Source: RadixUI
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+export function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);
+}

package/src/hooks/useDebounce.tsx

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    /*
+      Cancel the timeout if value changes (also on delay change or unmount)
+      This is how we prevent debounced value from updating if value is changed
+      within the delay period. Timeout gets cleared and restarted.
+    */
+    return (): void => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]); // only recall if value or delay changes.
+
+  return debouncedValue;
+}

package/src/hooks/useFocus.tsx

@@ -0,0 +1,12 @@
+import { useRef } from 'react';
+
+export const useFocus = () => {
+  const htmlElRef = useRef<HTMLElement>(null);
+  const setFocus = () => {
+    if (htmlElRef.current) {
+      htmlElRef.current.focus();
+    }
+  };
+
+  return [htmlElRef, setFocus];
+};

package/src/hooks/useLocalStorage.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [error, setError] = useState<DOMException | null>(null);
+
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (e) {
+      console.error('Error reading the local storage value', e);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((prevValue: T) => T)): void => {
+    try {
+      setStoredValue((prevValue) => {
+        const valueToStore = value instanceof Function ? value(prevValue) : value;
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+        return valueToStore;
+      });
+    } catch (e) {
+      // DOMException code 22 for QuotaExceededError
+      if (e instanceof DOMException && e.name === 'QuotaExceededError') {
+        console.error('LocalStorage quota exceeded', e);
+        setError(e);
+      } else {
+        console.error('Error setting the local storage value', e);
+      }
+    }
+  };
+
+  return { storedValue, setValue, error };
+}

package/src/hooks/useLockScroll.ts

@@ -0,0 +1,26 @@
+import { useLayoutEffect } from 'react';
+
+export function useLockBodyScroll(lock = true): void {
+  useLayoutEffect(() => {
+    if (lock) {
+      const originalStyle = window.getComputedStyle(document.body).overflowY;
+      document.body.style.overflowY = 'hidden';
+      // Re-enable scrolling when component unmounts.
+      return (): void => {
+        document.body.style.overflowY = originalStyle;
+      };
+    }
+  }, []); // Empty array ensures effect is only run on mount and unmount.
+}
+
+export function useLockRefScroll(ref: React.MutableRefObject<HTMLElement>): void {
+  useLayoutEffect(() => {
+    if (ref) {
+      const originalStyle = ref.current.style.overflow;
+      ref.current.style.overflow = 'hidden';
+      return (): any => {
+        ref.current.style.overflow = originalStyle;
+      };
+    }
+  }, [ref]);
+}

package/src/hooks/useOnScreen.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+export function useOnScreen(ref: React.RefObject<any>, rootMargin = '0px'): boolean {
+  const [isIntersecting, setIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIntersecting(entry.isIntersecting);
+      },
+      {
+        rootMargin,
+      },
+    );
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return (): void => {
+      observer.unobserve(ref.current);
+    };
+  }, []);
+
+  return isIntersecting;
+}

package/src/hooks/useOutsideAlerter.tsx

@@ -0,0 +1,15 @@
+import { useEffect, RefObject, MutableRefObject } from 'react';
+
+export function useOutsideAlerter(ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>, f: () => void): void {
+  useEffect(() => {
+    function handleClickOutside(event: any): void {
+      if (ref.current && !ref.current.contains(event.target)) {
+        f();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return (): void => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}

package/src/hooks/useTableActions.ts

@@ -0,0 +1,61 @@
+import { PaginationState, SortingState, RowSelectionState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { APIOutput } from '@takaro/apiclient';
+
+interface ExtendedAPIOutput<T> extends APIOutput {
+  data: T[];
+}
+
+export interface PageOptions {
+  // amount of pages items are spread across
+  pageCount: number;
+  // total amount of items
+  total: number;
+}
+
+interface TableActionOptions {
+  pageIndex?: number;
+  pageSize?: number;
+}
+
+export interface ColumnFilter {
+  id: string;
+  value: string[];
+}
+
+const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_PAGE_INDEX = 0;
+
+export function useTableActions<T>(
+  { pageIndex, pageSize }: TableActionOptions = { pageIndex: DEFAULT_PAGE_INDEX, pageSize: DEFAULT_PAGE_SIZE },
+) {
+  const [paginationState, setPaginationState] = useState<PaginationState>({
+    pageIndex: pageIndex ?? DEFAULT_PAGE_INDEX,
+    pageSize: pageSize ?? DEFAULT_PAGE_SIZE,
+  });
+  const [columnFiltersState, setColumnFiltersState] = useState<ColumnFilter[]>([]);
+  const [columnSearchState, setColumnSearchState] = useState<ColumnFilter[]>([]);
+  const [sortingState, setSortingState] = useState<SortingState>([]);
+  const [rowSelectionState, setRowSelectionState] = useState<RowSelectionState>({});
+
+  function getPageOptions(data: ExtendedAPIOutput<T>): PageOptions {
+    // we can use page 0 here because that data is the same for all pages
+    const limit = data.meta.limit!;
+    const total = data.meta.total!;
+
+    const pageCount = data.meta.total ? Math.ceil(total / limit) : Math.ceil(data.data.length / limit);
+
+    return {
+      pageCount,
+      total,
+    };
+  }
+
+  return {
+    pagination: { paginationState, setPaginationState, getPageOptions },
+    columnFilters: { columnFiltersState, setColumnFiltersState },
+    columnSearch: { columnSearchState, setColumnSearchState },
+    sorting: { sortingState, setSortingState },
+    rowSelection: { rowSelectionState, setRowSelectionState },
+  };
+}

package/src/hooks/useTheme.tsx

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import type { ThemeType } from '../styled/theme';
+import { ThemeContext } from 'styled-components';
+
+export const useTheme = (): ThemeType => {
+  return useContext<ThemeType>(ThemeContext);
+};

package/src/images/company-icon-primary.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<path fill="#664DE5" d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z"/>
+</svg>

package/src/images/company-icon-secondary.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<path fill="#030917" d="M512 165.4c0 127.9-70.05 235.3-175.3 270.1c-20.04 7.938-41.83 12.46-64.69 12.46c-64.9 0-125.2-36.51-155.7-94.47c-54.13 49.93-68.71 107-68.96 108.1C44.72 472.6 34.87 480 24.02 480c-1.844 0-3.727-.2187-5.602-.6562c-12.89-3.098-20.84-16.08-17.75-28.96c9.598-39.5 90.47-226.4 335.3-226.4C344.8 224 352 216.8 352 208S344.8 192 336 192C228.6 192 151 226.6 96.29 267.6c.1934-10.82 1.242-21.84 3.535-33.05c13.47-65.81 66.04-119 131.4-134.2c28.33-6.562 55.68-6.013 80.93-.0054c56 13.32 118.2-7.412 149.3-61.24c5.664-9.828 20.02-9.516 24.66 .8282C502.7 76.76 512 121.9 512 165.4z"/>
+</svg>

package/src/images/index.ts

@@ -0,0 +1,4 @@
+import CompanyIconPrimary from './company-icon-primary.svg';
+import CompanyIconSecondary from './company-icon-secondary.svg';
+
+export { CompanyIconPrimary, CompanyIconSecondary };

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from './components';
+export * from './styled';
+export * from './hooks';
+export * from './helpers';
+export * from './views';
+export * as errors from './errors';
+export * from './types';
+export * from './images';
+export * as testing from './test/testUtils';

package/src/stories/Colors.mdx

@@ -0,0 +1,35 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import { styled } from '../styled';
+import { darkTheme as theme } from '../styled/theme';
+
+<Meta title="Colors" />
+
+# Colors
+
+<ColorPalette>
+  <ColorItem title="theme.colors.primary" colors={[theme.colors.primary]} />
+  <ColorItem title="theme.colors.secondary" colors={[theme.colors.secondary]} />
+
+## Alert colors
+
+<ColorItem title="theme.colors.info" colors={[theme.colors.info]} />
+<ColorItem title="theme.colors.success" colors={[theme.colors.success]} />
+<ColorItem title="theme.colors.warning" colors={[theme.colors.warning]} />
+<ColorItem title="theme.colors.error" colors={[theme.colors.error]} />
+
+## backgrounds
+
+<ColorItem title="theme.colors.background" colors={[theme.colors.background]} />
+<ColorItem title="theme.colors.backgroundAlt" colors={[theme.colors.backgroundAlt]} />
+<ColorItem title="theme.colors.backgroundAccent" colors={[theme.colors.backgroundAccent]} />
+<ColorItem title="theme.colors.placeholder" colors={[theme.colors.placeholder]} />
+<ColorItem title="theme.colors.placeholderHighlight" colors={[theme.colors.placeholderHighlight]} />
+
+
+## Text
+
+<ColorItem title="theme.colors.text" colors={[theme.colors.text]} />
+<ColorItem title="theme.colors.textAlt" colors={[theme.colors.textAlt]} />
+<ColorItem title="theme.colors.disabled" colors={[theme.colors.disabled]} />
+
+</ColorPalette>

package/src/stories/Introduction.mdx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Introduction" />
+
+<style>{``}</style>
+
+# Takaro UI library
+
+Takaro UI is a component library custom made to used within the Takaro ecosystem.
+
+## Roadmap
+
+You can see what we have in mind at our projects page.
+
+## Development
+
+If you'd like to help us out with the project, we welcome contributions of all types! Check out our Contributing.md for more details on how you can help make Takaro UI even better!

package/src/stories/Spacing.mdx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/addon-docs';
+import { spacing } from '../styled/spacing';
+
+<Meta title="Spacing" />
+
+# Spacing
+Cosistent spacing of width, height, margins and padding maintain visual balance in the design system.
+
+## Spacing tokens
+The design system provides spacers that can be used vertically and horizontally. The smaller spacers should be used on more detailed spacing of elements within reusable components.
+The larger spacers should be used on layout spacing. **These spacing tokens should be used for all possible spacings!**
+
+<div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', marginTop: '20px' }}>
+  {Object.entries(spacing)
+    .sort((a, b) => parseFloat(a[0].replace('_', '.')) - parseFloat(b[0].replace('_', '.')))
+    .map(([key, value]) => (
+      <div key={key} style={{ margin: '10px', textAlign: 'center' }}>
+        <div style={{ backgroundColor: '#333', width: '50px', height: value, marginBottom: '5px' }}></div>
+        {key.replace('_', '.')}
+      </div>
+    ))}
+</div>
+
+
+

package/src/styled/GlobalStyle.ts

@@ -0,0 +1,209 @@
+import { createGlobalStyle, keyframes } from 'styled-components';
+import { ThemeType } from './theme';
+import { SnackBarStyles } from './Snackbar';
+
+const skeletonLoading = keyframes`
+  0% { transform: translateX(-100%); }
+  40%, 100% { transform: translateX(100%); }
+`;
+
+export const GlobalStyle = createGlobalStyle<{ theme: ThemeType }>`
+
+  *::selection {
+    background-color: ${({ theme }) => theme.colors.primary};
+    color: white;
+  }
+
+  :root {
+    font-size: 62.5%; /* (62.5/100) * 16px = 10px */
+    box-sizing: border-box;
+  }
+
+  #takaro-root {
+    margin: 0 auto;
+    overflow-x: hidden;
+    background-color: ${({ theme }) => theme.colors.background};
+  }
+
+
+  html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    scroll-behavior: smooth;
+    line-height: 1.5;
+    font-family: 'Inter', sans-serif;
+    font-weight: 400;
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: ${({ theme }) => theme.colors.background};
+
+    @supports (scrollbar-gutter: stable) {
+      scrollbar-gutter: stable;
+    }
+  }
+
+  body{
+    transition: background-color 0.2s linear;
+    overflow: hidden;
+  }
+
+  a, p, div, ul, li, h1, h2, h3, h4, h5, h6, header, footer, fieldset, legend, dl, dt, dd{
+    transition: background-color 0.2s linear;
+    transition: box-shadow 0.125s linear;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    color: ${({ theme }) => theme.colors.text};
+  }
+  
+  span {
+    letter-spacing: normal;
+  }
+
+  h1 {
+    font-size: ${({ theme }) => theme.fontSize.large};
+    font-weight: 600;
+  }
+  h2 {
+    font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+    font-weight: 600;
+  }
+  h3 {
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    font-weight: 500;
+  }
+
+
+  strong {
+    padding: ${({ theme }) => `0 ${theme.spacing['0_25']}`};
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+    border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+    background-color: ${({ theme }) => theme.colors.backgroundAlt};
+    font-weight: 400;
+    white-space: no-wrap;
+  }
+
+  form {
+    display: block;
+    width: 100%;
+    fieldset {
+      border: none;
+    }
+  }
+
+  input, textarea {
+    appearance: none;
+    box-sizing: border-box;
+    margin: 0;
+    outline: 0;
+    padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing[1]}`};
+    border-width: 0.1rem;
+    border-radius: ${({ theme }) => theme.borderRadius.medium};
+    font-size: ${({ theme }) => theme.fontSize.small};
+    border-color: transparent;
+    background-color: ${({ theme }) => theme.colors.backgroundAlt};
+    color: ${({ theme }) => theme.colors.text};
+    font-family: inherit;
+    &[readOnly]{
+      cursor: default;
+      &:focus {
+        border-color: none!important;
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      &:focus {
+        border-color: none!important;
+      }
+    }
+
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  textarea {
+    resize: vertical;
+    width: calc(100% - ${({ theme }) => theme.spacing[1]} * 2);
+  }
+
+  input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='search']::-webkit-search-results-button,
+  input[type='search']::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  button {
+    display: block;
+    padding: ${({ theme }) => `${theme.spacing['0_75']} ${theme.spacing['2_5']}`};
+    border-radius: ${({ theme }) => theme.borderRadius.medium};
+    border: none;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  a.underline {
+    text-decoration: underline;
+    text-decoration-color: inherit;
+    text-decoration-thickness: 1px;
+  }
+
+  a, button {
+    cursor: pointer;
+    text-decoration: none;
+    background-position: -100px;
+    &:active, &:focus{
+      outline: 0;
+      outline-style: none;
+      -moz-outline-style: none;
+    }
+  }
+
+.placeholder {
+    overflow: hidden;
+    position: relative;
+    border-radius: ${({ theme }): string => theme.borderRadius.large};
+    background-color: ${({ theme }): string => theme.colors.placeholder};
+    border: 1px solid ${({ theme }): string => theme.colors.backgroundAccent};
+    &::before {
+      content: '';
+      width: 100%;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(
+        90deg, 
+        ${({ theme }): string => theme.colors.placeholderHighlight}d3 0, 
+        ${({ theme }): string => theme.colors.placeholderHighlight}4d 20%, 
+        ${({ theme }): string => theme.colors.placeholderHighlight}66 60%, 
+        ${({ theme }): string => theme.colors.placeholderHighlight}d3
+      );
+      animation: ${skeletonLoading} 2.5s infinite ease-in-out;
+    }
+  }
+
+  .simplebar-mask {
+    &:focus-visible {
+      border: none;
+    }
+  }
+
+  /* notistack snackbar styling */
+  ${SnackBarStyles}
+
+  `;

package/src/styled/Snackbar.tsx

@@ -0,0 +1,41 @@
+import { css } from 'styled-components';
+import { ThemeType } from './theme';
+
+export const SnackBarStyles = css<{ theme: ThemeType }>`
+  /* Snackbar snack colors for every type */
+  .mui-snackbar {
+    color: white;
+  }
+  .MuiSnackbarContent-root {
+    background-color: ${({ theme }): string => theme.colors.primary};
+    color: white;
+  }
+  #notistack-snackbar {
+    font-weight: 600;
+    font-family: 'Lato', sans-serif;
+    color: ${({ theme }) => theme.colors.text};
+    font-size: 1.5rem;
+    padding: 2rem;
+  }
+
+  div.SnackbarContent-root {
+    border: 1px solid ${({ theme }) => theme.colors.background};
+  }
+
+  /* info */
+  div.SnackbarItem-variantInfo {
+    background-color: ${({ theme }): string => theme.colors.white}!important;
+  }
+  /* success */
+  div.SnackbarItem-variantSuccess {
+    background-color: ${({ theme }): string => theme.colors.white}!important;
+  }
+  /* warning */
+  div.SnackbarItem-variantWarning {
+    background-color: ${({ theme }): string => theme.colors.white}!important;
+  }
+  /* error */
+  div.SnackbarItem-variantError {
+    background-color: ${({ theme }): string => theme.colors.background}!important;
+  }
+`;

package/src/styled/animations.ts

@@ -0,0 +1,36 @@
+import { keyframes } from 'styled-components';
+
+export const pulseAnimation = (color: string) => keyframes`
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 ${color}B3;
+  }
+  30% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(0,0,0,0.0);
+  }
+  45% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0,0,0,0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0,0,0,0);
+  }
+`;
+
+export const shakeAnimation = keyframes`
+  2.5%, 22.5% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  5%, 20% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  7.5%, 12.5%, 17.5% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  10%, 15% {
+    transform: translate3d(4px, 0, 0);
+  }
+`;

package/src/styled/breakpoint.ts

@@ -0,0 +1,7 @@
+export const breakpoint = {
+  tiny: '640px',
+  small: '768px',
+  medium: '1024px',
+  large: '1280px',
+  huge: '1536px',
+} as const;

package/src/styled/device.ts

@@ -0,0 +1,10 @@
+export const device = {
+  // We see everything bigger as the default.
+  xxl: '(max-width: 1921px)',
+  xl: '(max-width: 1500px)',
+  lg: '(max-width: 1200px)',
+  md: '(max-width: 992px)',
+  sm: '(max-width: 768px)',
+  xs: '(max-width: 576px)',
+  xxs: '(max-width: 450px)',
+};

package/src/styled/index.ts

@@ -0,0 +1,10 @@
+/* Re-export of styled-components styled default export which at typings for the custom theme */
+export { styled, lightTheme, darkTheme, ThemeProvider, useThemeSwitcher } from './theme';
+export type { ThemeType, ThemeName } from './theme';
+
+export { GlobalStyle } from './GlobalStyle';
+export * from './types';
+export { device } from './device';
+export * from './animations';
+
+export type { Spacing } from './spacing';