@takaro/lib-components 0.0.1

package/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}

package/@types/files.d.ts

@@ -0,0 +1,23 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.mp3' {
+  const content: string;
+  export default content;
+}

package/@types/react-table-config.d.ts

@@ -0,0 +1,121 @@
+// https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table
+import {
+  UseColumnOrderInstanceProps,
+  UseColumnOrderState,
+  UseExpandedHooks,
+  UseExpandedInstanceProps,
+  UseExpandedOptions,
+  UseExpandedRowProps,
+  UseExpandedState,
+  UseFiltersColumnOptions,
+  UseFiltersColumnProps,
+  UseFiltersInstanceProps,
+  UseFiltersOptions,
+  UseFiltersState,
+  UseGlobalFiltersColumnOptions,
+  UseGlobalFiltersInstanceProps,
+  UseGlobalFiltersOptions,
+  UseGlobalFiltersState,
+  UseGroupByCellProps,
+  UseGroupByColumnOptions,
+  UseGroupByColumnProps,
+  UseGroupByHooks,
+  UseGroupByInstanceProps,
+  UseGroupByOptions,
+  UseGroupByRowProps,
+  UseGroupByState,
+  UsePaginationInstanceProps,
+  UsePaginationOptions,
+  UsePaginationState,
+  UseResizeColumnsColumnOptions,
+  UseResizeColumnsColumnProps,
+  UseResizeColumnsOptions,
+  UseResizeColumnsState,
+  UseRowSelectHooks,
+  UseRowSelectInstanceProps,
+  UseRowSelectOptions,
+  UseRowSelectRowProps,
+  UseRowSelectState,
+  UseRowStateCellProps,
+  UseRowStateInstanceProps,
+  UseRowStateOptions,
+  UseRowStateRowProps,
+  UseRowStateState,
+  UseSortByColumnOptions,
+  UseSortByColumnProps,
+  UseSortByHooks,
+  UseSortByInstanceProps,
+  UseSortByOptions,
+  UseSortByState
+} from 'react-table';
+
+declare module 'react-table' {
+  // take this file as-is, or comment out the sections that don't apply to your plugin configuration
+
+  export interface TableOptions<D extends Record<string, unknown>>
+    extends UseExpandedOptions<D>,
+      UseFiltersOptions<D>,
+      UseGlobalFiltersOptions<D>,
+      UseGroupByOptions<D>,
+      UsePaginationOptions<D>,
+      UseResizeColumnsOptions<D>,
+      UseRowSelectOptions<D>,
+      UseRowStateOptions<D>,
+      UseSortByOptions<D>,
+      // note that having Record here allows you to add anything to the options, this matches the spirit of the
+      // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
+      // feature set, this is a safe default.
+      Record<string, any> {}
+
+  export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseExpandedHooks<D>,
+      UseGroupByHooks<D>,
+      UseRowSelectHooks<D>,
+      UseSortByHooks<D> {}
+
+  export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderInstanceProps<D>,
+      UseExpandedInstanceProps<D>,
+      UseFiltersInstanceProps<D>,
+      UseGlobalFiltersInstanceProps<D>,
+      UseGroupByInstanceProps<D>,
+      UsePaginationInstanceProps<D>,
+      UseRowSelectInstanceProps<D>,
+      UseRowStateInstanceProps<D>,
+      UseSortByInstanceProps<D> {}
+
+  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderState<D>,
+      UseExpandedState<D>,
+      UseFiltersState<D>,
+      UseGlobalFiltersState<D>,
+      UseGroupByState<D>,
+      UsePaginationState<D>,
+      UseResizeColumnsState<D>,
+      UseRowSelectState<D>,
+      UseRowStateState<D>,
+      UseSortByState<D> {}
+
+  export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseFiltersColumnOptions<D>,
+      UseGlobalFiltersColumnOptions<D>,
+      UseGroupByColumnOptions<D>,
+      UseResizeColumnsColumnOptions<D>,
+      UseSortByColumnOptions<D> {}
+
+  export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseFiltersColumnProps<D>,
+      UseGroupByColumnProps<D>,
+      UseResizeColumnsColumnProps<D>,
+      UseSortByColumnProps<D> {}
+
+  export interface Cell<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseGroupByCellProps<D>,
+      UseRowStateCellProps<D> {}
+
+  export interface Row<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseExpandedRowProps<D>,
+      UseGroupByRowProps<D>,
+      UseRowSelectRowProps<D>,
+      UseRowStateRowProps<D> {}
+}

package/Dockerfile.dev

@@ -0,0 +1,21 @@
+FROM node:18.18.2-alpine as build
+
+ENV NODE_ENV=development
+WORKDIR /app
+
+# root
+COPY package*.json ./
+COPY tsconfig.react.json ./
+
+# ui
+COPY packages/ui/*.json ./packages/ui/
+
+# Install before src changes so it does not need to be rebuilt so often.
+RUN npm ci
+
+COPY packages/ui/.storybook ./packages/ui/.storybook
+COPY packages/ui/public ./packages/ui/public
+COPY packages/ui/src ./packages/ui/src
+
+WORKDIR /app/packages/ui
+CMD ["npm", "run", "start"]

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@takaro/lib-components",
+  "version": "0.0.1",
+  "private": false,
+  "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
+  "author": "Takaro Team",
+  "license": "AGPL-3.0-or-later",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "storybook build -c ../../.storybook",
+    "start:dev": "NODE_OPTIONS='' storybook dev -c ../../.storybook -p 13002",
+    "_test": "jest",
+    "test:unit": "CI=true vitest",
+    "test:watch": "jest --watch",
+    "test:update": "jest --updateSnapshot",
+    "sort-package": "sort-package-json"
+  },
+  "devDependencies": {
+    "@hookform/devtools": "^4.2.2",
+    "@mdx-js/react": "^2.1.5",
+    "@types/jest": "^28.1.6",
+    "@types/react-window": "^1.8.5",
+    "@types/styled-components": "^5.1.25",
+    "@types/topojson-client": "^3.1.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sort-package-json": "^1.53.1",
+    "storybook": "7.5.3"
+  },
+  "peerDependencies": {
+    "@floating-ui/react": "^0.24.0 || ^0.26.0",
+    "@monaco-editor/react": "^4.4.6",
+    "@rjsf/core": "^5.6.2",
+    "@rjsf/utils": "^5.6.2",
+    "@rjsf/validator-ajv8": "^5.6.2",
+    "@tanstack/react-query": "^4.26.1",
+    "@tanstack/react-table": "^8.7.9",
+    "@tanstack/react-router": "^1.15.22",
+    "@types/luxon": "3.3.0",
+    "framer-motion": "^10.16.12",
+    "luxon": "3.3.0",
+    "notistack": "^3.0.1",
+    "polished": "^4.1.3",
+    "rc-slider": "^9.7.5",
+    "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.50.1",
+    "react-icons": "^4.11.0",
+    "react-intersection-observer": "^9.5.1",
+    "react-virtualized-auto-sizer": "^1.0.9",
+    "react-window": "^1.8.8",
+    "simplebar-react": "^3.2.4",
+    "styled-components": "^5.3.5",
+    "web-vitals": "^2.1.2",
+    "@visx/scale": "^3.5.0",
+    "@visx/responsive": "^3.3.0",
+    "@visx/group": "^3.3.0",
+    "@visx/heatmap": "^3.3.0",
+    "@visx/tooltip": "^3.3.0",
+    "@visx/event": "^3.3.0",
+    "@visx/shape": "^3.5.0",
+    "@visx/grid": "^3.5.0",
+    "@visx/vendor": "^3.5.0",
+    "@visx/brush": "^3.6.1",
+    "@visx/axis": "^3.5.0",
+    "@visx/pattern": "3.3.0",
+    "@visx/curve": "^3.3.0",
+    "@visx/gradient": "^3.3.0",
+    "@visx/mock-data": "^3.3.0",
+    "@visx/geo": "3.5.0",
+    "topojson-client": "^3.1.0"
+  }
+}

package/readme.md

@@ -0,0 +1,10 @@
+# Ui
+
+Ui is a package that does not run on its own and the core should always be included with other packages.
+
+The dockerfiles however contain the storybook build.
+
+# Note
+
+Keep typescript at 4.2.2. Otherwise storybook-docgen will not work.
+Could maybe be fixed by upgrading all the plugins, but cba atm, it is too fragile :)

package/src/components/actions/Button/Button.stories.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { Button, ButtonProps } from '.';
+import { AiFillCloud as Icon } from 'react-icons/ai';
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  grid-gap: 2rem;
+  padding: 5rem;
+  background: ${({ theme }) => theme.colors.background};
+
+  div {
+    button {
+      margin: 15px 0;
+    }
+  }
+`;
+
+export default {
+  title: 'Actions/Button',
+  component: Button,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    size: 'medium',
+    text: 'basic button',
+    variant: 'default',
+    type: 'button',
+    disabled: false,
+    isLoading: false,
+    color: 'primary',
+    onClick: undefined,
+  },
+} as Meta<ButtonProps>;
+
+export const Default: StoryFn<ButtonProps> = (args) => <Button {...args} />;
+
+export const Examples = () => (
+  <>
+    {/* Default */}
+    <Button
+      onClick={() => {
+        /* */
+      }}
+      text="Default Button"
+    />
+    <Button
+      icon={<Icon size={20} />}
+      onClick={() => {
+        /* */
+      }}
+      text="Icon Button"
+    />
+    <Button
+      disabled
+      onClick={() => {
+        /* */
+      }}
+      text="Disabled Button"
+    />
+    <Button
+      isLoading
+      onClick={() => {
+        /* */
+      }}
+      text="Loading Button"
+    />
+
+    {/* Outline */}
+    <Button
+      onClick={() => {
+        /* */
+      }}
+      text="Outlined Button"
+      variant="outline"
+    />
+    <Button
+      icon={<Icon size={20} />}
+      onClick={() => {
+        /* */
+      }}
+      text="Icon Button"
+      variant="outline"
+    />
+    <Button
+      disabled
+      onClick={() => {
+        /* */
+      }}
+      text="Disabled Button"
+      variant="outline"
+    />
+    <Button
+      isLoading
+      onClick={() => {
+        /* */
+      }}
+      text="Loading Button"
+      variant="outline"
+    />
+
+    {/* Clear */}
+    <Button
+      onClick={() => {
+        /* */
+      }}
+      text="Clear Button"
+      variant="clear"
+    />
+    <Button
+      icon={<Icon size={20} />}
+      onClick={() => {
+        /* */
+      }}
+      text="Icon Button"
+      variant="clear"
+    />
+    <Button
+      disabled
+      onClick={() => {
+        /* */
+      }}
+      text="Disabled Button"
+      variant="clear"
+    />
+    <Button
+      isLoading
+      onClick={() => {
+        /* */
+      }}
+      text="Loading Button"
+      variant="clear"
+    />
+
+    {/* white */}
+    <Button
+      onClick={() => {
+        /* */
+      }}
+      text="White Button"
+      variant="white"
+    />
+    <Button
+      icon={<Icon size={20} />}
+      onClick={() => {
+        /* */
+      }}
+      text="Icon Button"
+      variant="white"
+    />
+    <Button
+      disabled
+      onClick={() => {
+        /* */
+      }}
+      text="Disabled Button"
+      variant="white"
+    />
+    <Button
+      isLoading
+      onClick={() => {
+        /* */
+      }}
+      text="Loading Button"
+      variant="white"
+    />
+  </>
+);

package/src/components/actions/Button/Button.test.tsx

@@ -0,0 +1,7 @@
+import { Button } from '.';
+import { render } from 'test-utils';
+
+it('Should render <Button/>', () => {
+  const { container } = render(<Button text="button text" />);
+  expect(container).toMatchSnapshot();
+});

package/src/components/actions/Button/Button.test.tsx.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <Button/> 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-radius: 0.8rem;
+  background: #664DE5;
+  background-size: 200% auto;
+  font-weight: 900;
+  border: 2px solid none;
+  cursor: pointer;
+  line-height: 19px;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  box-shadow: rgb(0 0 0 / 5%) 0px 15px 30px 0px;
+  -webkit-transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1);
+  transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1);
+  padding: 11px 18px;
+}
+
+.c0 span {
+  margin-left: 0px;
+  color: white;
+  font-size: 1.25rem;
+  font-weight: 800;
+}
+
+.c0 span:hover {
+  color: white;
+}
+
+.c0:focus {
+  outline: 0;
+}
+
+.c0:hover {
+  background-position: right center;
+}
+
+.c0:disabled {
+  cursor: default;
+  background: #d3d3d3;
+  border-color: transparent;
+  color: white;
+}
+
+.c0:disabled span {
+  color: white;
+}
+
+.c0:disabled:hover span {
+  color: white;
+}
+
+.c0 svg {
+  display: none;
+  cursor: pointer;
+  fill: white;
+  stroke: white;
+}
+
+<div>
+  <button
+    class="c0"
+    color="primary"
+    type="button"
+  >
+    <span>
+      button text
+    </span>
+  </button>
+</div>
+`;

package/src/components/actions/Button/index.tsx

@@ -0,0 +1,99 @@
+import { cloneElement, forwardRef, MouseEvent as ReactMouseEvent, ReactElement } from 'react';
+import { Spinner } from '../../../components';
+import { ButtonColor, Default, Outline, Clear, White } from './style';
+import { Size, Variant } from '../../../styled';
+
+export interface ButtonProps {
+  disabled?: boolean;
+  onClick?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => unknown;
+  isLoading?: boolean;
+  icon?: ReactElement;
+  iconPosition?: 'left' | 'right';
+  className?: string;
+  fullWidth?: boolean;
+  size?: Size;
+  type?: 'submit' | 'reset' | 'button';
+  // TODO: clear should be renamed to text
+  variant?: Variant | 'white' | 'clear';
+  color?: ButtonColor | 'white';
+  text: string;
+
+  /// When nesting forms a button can be linked to only fire the form with the given name.
+  form?: string;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      icon,
+      iconPosition = 'left',
+      size = 'medium',
+      type = 'button',
+      isLoading = false,
+      className,
+      form,
+      text,
+      color = 'primary',
+      disabled = false,
+      fullWidth = false,
+      variant = 'default',
+      onClick = () => {},
+    },
+    ref
+  ) => {
+    function getIcon(): JSX.Element {
+      if (isLoading) return <Spinner color={variant === 'default' ? 'white' : color} size="small" />;
+
+      if (icon) return cloneElement(icon, { size: 20 });
+
+      return <></>;
+    }
+
+    function getVariant(): JSX.Element {
+      const props = {
+        className: className,
+        color: color,
+        disabled: disabled,
+        iconPosition: iconPosition,
+        form: form,
+        icon: !!icon,
+        isLoading: isLoading,
+        onClick: !disabled || !isLoading ? onClick : undefined,
+        size: size,
+        fullWidth: fullWidth,
+        type: type,
+        ref: ref,
+        tabIndex: disabled ? -1 : 0,
+      };
+
+      switch (variant) {
+        case 'default':
+          return (
+            <Default {...props}>
+              {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+            </Default>
+          );
+        case 'outline':
+          return (
+            <Outline {...props}>
+              {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+            </Outline>
+          );
+        case 'clear':
+          return (
+            <Clear {...props}>
+              {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+            </Clear>
+          );
+        case 'white':
+          return (
+            <White {...props}>
+              {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+            </White>
+          );
+      }
+    }
+
+    return getVariant();
+  }
+);