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

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:24.11.0-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,15 @@
+{
+  "name": "@takaro/lib-components",
+  "version": "0.0.0-next.0da151e",
+  "private": false,
+  "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
+  "license": "AGPL-3.0-or-later",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "storybook build -c ../../.storybook",
+    "start:dev": "storybook dev --no-open -c ../../.storybook -p 13002",
+    "test:unit": "CI=true vitest",
+    "test:snapshot": "vitest -u"
+  }
+}

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,149 @@
+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',
+    children: '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={() => {
+        /* */
+      }}
+    >
+      Default Button
+    </Button>
+    <Button
+      icon={<Icon size={20} />}
+      onClick={() => {
+        /* */
+      }}
+    >
+      Icon Button
+    </Button>
+    <Button
+      disabled
+      onClick={() => {
+        /* */
+      }}
+    >
+      Disabled Button
+    </Button>
+    <Button
+      isLoading
+      onClick={() => {
+        /* */
+      }}
+    >
+      Loading Button
+    </Button>
+
+    {/* Outline */}
+    <Button
+      onClick={() => {
+        /* */
+      }}
+      variant="outline"
+    >
+      Outlined Button
+    </Button>
+    <Button
+      icon={<Icon size={20} />}
+      onClick={() => {
+        /* */
+      }}
+      variant="outline"
+    >
+      Icon Button
+    </Button>
+    <Button
+      disabled
+      onClick={() => {
+        /* */
+      }}
+      variant="outline"
+    >
+      Disabled Button
+    </Button>
+    <Button
+      isLoading
+      onClick={() => {
+        /* */
+      }}
+      variant="outline"
+    >
+      Loading Button
+    </Button>
+
+    {/* Clear */}
+    <Button
+      onClick={() => {
+        /* */
+      }}
+      variant="clear"
+    >
+      Clear Button
+    </Button>
+    <Button
+      icon={<Icon size={20} />}
+      onClick={() => {
+        /* */
+      }}
+      variant="clear"
+    >
+      Icon Button
+    </Button>
+    <Button
+      disabled
+      onClick={() => {
+        /* */
+      }}
+      variant="clear"
+    >
+      Disabled Button
+    </Button>
+    <Button
+      isLoading
+      onClick={() => {
+        /* */
+      }}
+      variant="clear"
+    >
+      Loading Button
+    </Button>
+  </>
+);

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

@@ -0,0 +1,8 @@
+import { Button } from '.';
+import { expect, it } from 'vitest';
+import { render } from '../../../test/testUtils';
+
+it('Should render <Button/>', () => {
+  const { container } = render(<Button>button text</Button>);
+  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/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Button/> 1`] = `
+<div>
+  <button
+    class="sc-ggqIjW dRTgIR"
+    color="primary"
+    tabindex="0"
+    type="button"
+  >
+     
+    <span>
+      button text
+    </span>
+     
+  </button>
+</div>
+`;

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

@@ -0,0 +1,89 @@
+import { JSX, cloneElement, forwardRef, MouseEvent as ReactMouseEvent, ReactElement, PropsWithChildren } from 'react';
+import { Spinner } from '../../../components';
+import { ButtonColor, Default, Outline, Clear } 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 | 'clear';
+  color?: ButtonColor | 'white';
+  /// When nesting forms a button can be linked to only fire the form with the given name.
+  form?: string;
+}
+
+export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(function Button(
+  {
+    icon,
+    iconPosition = 'left',
+    size = 'medium',
+    type = 'button',
+    isLoading = false,
+    className,
+    children,
+    form,
+    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>{children}</span> {iconPosition === 'right' && getIcon()}
+          </Default>
+        );
+      case 'outline':
+        return (
+          <Outline {...props}>
+            {iconPosition === 'left' && getIcon()} <span>{children}</span> {iconPosition === 'right' && getIcon()}
+          </Outline>
+        );
+      case 'clear':
+        return (
+          <Clear {...props}>
+            {iconPosition === 'left' && getIcon()} <span>{children}</span> {iconPosition === 'right' && getIcon()}
+          </Clear>
+        );
+    }
+  }
+
+  return getVariant();
+});