@takaro/lib-components 0.0.1

package/src/styled/index.ts

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

package/src/styled/spacing.ts

@@ -0,0 +1,38 @@
+export type Spacing =
+  | '0'
+  | '0_1'
+  | '0_25'
+  | '0_5'
+  | '0_75'
+  | '1'
+  | '1_5'
+  | '2'
+  | '2_5'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10';
+
+export const spacing: Record<Spacing, string> = {
+  '0': '0rem',
+  '0_1': '0.1rem',
+  '0_25': '0.2rem',
+  '0_5': '0.4rem',
+  '0_75': '0.8rem',
+  '1': '1.2rem',
+  '1_5': '1.6rem',
+  '2': '2rem',
+  '2_5': '2.4rem',
+  '3': '2.8rem',
+  '4': '3.2rem',
+  '5': '4rem',
+  '6': '4.8rem',
+  '7': '5.6rem',
+  '8': '6.4rem',
+  '9': '7.2rem',
+  '10': '8rem',
+};

package/src/styled/theme.ts

@@ -0,0 +1,87 @@
+import baseStyled, { ThemedStyledInterface } from 'styled-components';
+import { breakpoint } from './breakpoint';
+import { elevationLight, elevationDark } from './elevation';
+import { spacing } from './spacing';
+import { zIndex } from './zIndex';
+import { shade } from 'polished';
+
+const fontSize = {
+  tiny: '1rem',
+  small: '1.2rem',
+  medium: '1.325rem',
+  mediumLarge: '1.45rem',
+  large: '2.425rem',
+  huge: '4rem',
+};
+
+const borderRadius = {
+  // For tiny components like checkboxes, tags and labels
+  small: '0.25rem',
+  // For medium components like buttons, inputs and similar components
+  medium: '0.5rem',
+  // For large components like modals and similar components
+  large: '0.8rem',
+};
+
+export const lightTheme = {
+  elevation: elevationLight,
+  spacing,
+  breakpoint,
+  fontSize,
+  borderRadius,
+  zIndex,
+  colors: {
+    primary: '#664de5',
+    primaryShade: shade(0.5, '#664de5'),
+    secondary: '#030917',
+    placeholder: '#f5f5f5',
+    placeholderHighlight: '#ffffff',
+    shade: '#eaf8f0',
+    white: '#ffffff',
+    background: '#f9f9f9',
+    backgroundAlt: '#e9e9e9',
+    // not set correctly yet.
+    backgroundAccent: '#353535',
+    disabled: '#151515',
+    text: '#030303',
+    textAlt: '#636363',
+    info: '#664de5',
+    success: '#3ccd6A',
+    warning: '#f57c00',
+    error: '#ff4252',
+  },
+};
+
+// todo: this should be the color of modals:#343434
+export const darkTheme: ThemeType = {
+  elevation: elevationDark,
+  spacing,
+  breakpoint,
+  fontSize,
+  zIndex,
+  borderRadius,
+  colors: {
+    primary: '#664DE5',
+    primaryShade: shade(0.5, '#664de5'),
+    secondary: '#353535',
+    placeholder: '#202020',
+    placeholderHighlight: '#303030',
+    white: '#ffffff',
+    shade: '#eaf8f0',
+    text: '#c2c2c2',
+    textAlt: '#818181',
+    background: '#080808',
+    backgroundAlt: '#121212',
+    // this is basically for when it is unsure if the background is background or backgroundAlt
+    // Often used for borders and such.
+    backgroundAccent: '#353535',
+    disabled: '#151515',
+    info: '#664de5',
+    success: '#3ccd6A',
+    warning: '#f57c00',
+    error: '#ff4252',
+  },
+};
+
+export type ThemeType = typeof lightTheme;
+export const styled = baseStyled as ThemedStyledInterface<ThemeType>;

package/src/styled/types.ts

@@ -0,0 +1,5 @@
+export type Size = 'tiny' | 'small' | 'medium' | 'large' | 'huge';
+export type Color = 'primary' | 'secondary';
+export type Variant = 'default' | 'outline';
+export type AlertVariants = 'info' | 'warning' | 'error' | 'success';
+export type Density = 'tight' | 'relaxed';

package/src/styled/zIndex.ts

@@ -0,0 +1,31 @@
+/* this is an attempt to make a z-index system that is easy to use and understand using stacking order
+ It is important to have a good understanding of HTML's stacking context
+ Recommended: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
+*/
+
+type ComponentType = 'tooltip' | 'dialog' | 'drawer' | 'dropdown' | 'overlay' | 'notificationBanner' | 'errorMessage';
+
+// IMPORTANT: types, in order of their desired z-index
+// Overlay is the backdrop for drawer and dialog
+const types: ComponentType[] = [
+  'tooltip',
+  'dialog',
+  'drawer',
+  'notificationBanner',
+  'overlay',
+  'dropdown',
+  'errorMessage',
+];
+
+// This is a magic value that is loosely based on our websites.
+// courtesy of some 3rd party components
+const baseValue = 10000;
+
+// maps z-index to each type
+export const zIndex = types.reduce(
+  (acc: Record<ComponentType, number>, type, index) => {
+    acc[type] = baseValue + index;
+    return acc;
+  },
+  {} as Record<ComponentType, number> // initialize obj with correct type
+);

package/src/test/__mocks__/fileMock.ts

@@ -0,0 +1,2 @@
+const mock = 'test-file-stub';
+export default mock;

package/src/test/setupTests.ts

@@ -0,0 +1,3 @@
+import 'jest-styled-components';
+import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/react/dont-cleanup-after-each';

package/src/test/snapshotResolver.js

@@ -0,0 +1,21 @@
+module.exports = {
+  /**
+   *
+   * @param testPath Path of the test file being tested
+   * @param snapshotExtension The extension for snapshots (.snap usually)
+   */
+  resolveSnapshotPath: (testPath, snapshotExtension) => {
+    return testPath + snapshotExtension;
+  },
+
+  /**
+   *
+   * @param snapshotFilePath The filename of the snapshot (i.e. some.test.js.snap)
+   * @param snapshotExtension The extension for snapshots (.snap)
+   */
+  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
+    snapshotFilePath.replace(snapshotExtension, ''),
+
+  /* Used to validate resolveTestPath(resolveSnapshotPath( {this} )) */
+  testPathForConsistencyCheck: 'some.test.js'
+};

package/src/test/testUtils.tsx

@@ -0,0 +1,31 @@
+import { FC, PropsWithChildren, ReactElement } from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import { lightTheme, GlobalStyle } from '@takaro/lib-components';
+import { ThemeProvider } from 'styled-components';
+import { SnackbarProvider } from '../helpers';
+import { createMemoryHistory, createRootRoute, createRouter, RouterProvider } from '@tanstack/react-router';
+
+const Providers: FC<PropsWithChildren<unknown>> = ({ children }) => {
+  const rootRoute = createRootRoute({
+    component: () => children,
+  });
+  const router = createRouter({
+    routeTree: rootRoute,
+    history: createMemoryHistory({ initialEntries: ['/'] }),
+  });
+
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <SnackbarProvider>
+        <GlobalStyle />
+        <RouterProvider router={router} />
+      </SnackbarProvider>
+    </ThemeProvider>
+  );
+};
+
+const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
+  render(ui, { wrapper: Providers, ...options });
+
+export * from '@testing-library/react';
+export { customRender as render };

package/src/types/index.ts

@@ -0,0 +1 @@
+export type { AnyJson, IJsonMap, JsonArray } from './json';

package/src/types/json.ts

@@ -0,0 +1,5 @@
+export type AnyJson = boolean | number | string | null | JsonArray | IJsonMap | Date;
+export interface IJsonMap {
+  [key: string]: AnyJson;
+}
+export type JsonArray = Array<AnyJson>;

package/src/views/LoadingPage.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { styled } from '../styled';
+import { Loading } from '../components';
+import { motion } from 'framer-motion';
+import { getTransition } from '../helpers';
+
+const Container = styled(motion.div)`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.colors.primary};
+`;
+
+const animations = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+export const LoadingPage: FC = () => {
+  return (
+    <Container
+      animate="animate"
+      initial="initial"
+      key="loading-page"
+      transition={{
+        ...getTransition(),
+      }}
+      variants={animations}
+    >
+      <Loading fill="white" />
+    </Container>
+  );
+};

package/src/views/index.ts

@@ -0,0 +1 @@
+export { LoadingPage } from './LoadingPage';

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.react.json",
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+  ],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "dist",
+    "baseUrl": "src",
+    "paths": {
+      "test-utils": [
+        "test/testUtils.tsx"
+      ]
+    }
+  }
+}