npm - @takaro/lib-components - Versions diffs - 0.0.1 - Mend

@takaro/lib-components 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (398) hide show

package/src/components/data/Console/ConsoleLine/index.tsx ADDED Viewed

@@ -0,0 +1,127 @@
+import { CSSProperties, FC, ReactElement, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  AiFillWarning as WarningIcon,
+  AiFillCloseCircle as ErrorIcon,
+  AiFillBug as DebugIcon,
+  AiFillInfoCircle as InfoIcon,
+  AiFillMacCommand as CommandIcon,
+} from 'react-icons/ai';
+import { Tooltip } from '../../../../components';
+import { BsChevronExpand as EnterIcon } from 'react-icons/bs';
+import {
+  Wrapper,
+  Container,
+  Body,
+  Header,
+  IconContainer,
+  TimestampContainer,
+  TextContainer,
+  CollapsedContainer,
+  ExpandIconContainer,
+} from './style';
+import { Message, MessageType } from '../MessageModel';
+import { GUTTER_SIZE, LIST_PADDING_SIZE } from '../Console';
+const COLLAPSED_LENGTH = 125;
+interface ConsoleLineProps {
+  message: Message;
+  index: number;
+  collapsed: boolean;
+  style: CSSProperties;
+  setRowState: (i: number, height: number, collapsed: boolean) => void;
+}
+export const ConsoleLine: FC<ConsoleLineProps> = ({ message, collapsed, style, index, setRowState }) => {
+  const { data, type, timestamp } = message;
+  const canCollapse = useMemo(() => {
+    if (!message.data) return false;
+    if (message.type === 'command') return true;
+    // TODO: should calculate the max chars per line based on the font constant, font size and textcontent container
+    return message.data.length > COLLAPSED_LENGTH;
+  }, [index]);
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed);
+  const rowRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (containerRef.current) {
+      setRowState(index, containerRef.current.clientHeight, isCollapsed);
+    }
+  }, [rowRef, isCollapsed]);
+  function defineCollapsableMessageLayout(): ReactElement {
+    let header = '';
+    let body = '';
+    if (type === 'command') {
+      if (message.result == undefined) {
+        throw new Error('Command messages should have a return type');
+      }
+      header = data;
+      body = message.result;
+    } else {
+      // TODO: maybe the header should contain the max on line with ...
+      // and the body the entire message?
+      header = data.split('\n')[0];
+      body = data.split('\n').slice(1).join('\n');
+    }
+    return (
+      <CollapsedContainer>
+        <Header isCollapsed={isCollapsed} type={type}>
+          <p>{header}</p>
+          {body && (
+            <Tooltip>
+              <Tooltip.Trigger asChild>
+                <ExpandIconContainer>
+                  <EnterIcon onClick={() => setIsCollapsed(!isCollapsed)} size={14} />
+                </ExpandIconContainer>
+              </Tooltip.Trigger>
+              <Tooltip.Content>{isCollapsed ? 'show body' : 'collapse body'}</Tooltip.Content>
+            </Tooltip>
+          )}
+        </Header>
+        <Body isCollapsed={isCollapsed} type={type}>
+          {body}
+        </Body>
+      </CollapsedContainer>
+    );
+  }
+  const setIcon = (messageType: MessageType): ReactElement => {
+    switch (messageType) {
+      case 'info':
+        return <InfoIcon size={14} />;
+      case 'warning':
+        return <WarningIcon size={14} />;
+      case 'debug':
+        return <DebugIcon size={14} />;
+      case 'error':
+        return <ErrorIcon size={14} />;
+      case 'command':
+        return <CommandIcon size={14} />;
+    }
+  };
+  return (
+    <Wrapper
+      messageType={type}
+      style={{
+        ...style,
+        top: `${(style.top as number) + GUTTER_SIZE + LIST_PADDING_SIZE}px`,
+        height: `${(style.height as number) - GUTTER_SIZE}px`,
+      }}
+      ref={rowRef}
+    >
+      <Container isCollapsed={isCollapsed} ref={containerRef}>
+        <IconContainer messageType={type}>{setIcon(type)}</IconContainer>
+        <TimestampContainer>[{timestamp}]</TimestampContainer>
+        {canCollapse ? defineCollapsableMessageLayout() : <TextContainer>{data}</TextContainer>}
+      </Container>
+    </Wrapper>
+  );
+};

package/src/components/data/Console/ConsoleLine/style.ts ADDED Viewed

@@ -0,0 +1,76 @@
+import { styled } from '../../../../styled';
+import { MessageType } from '../MessageModel';
+export const Wrapper = styled.div<{
+  messageType: MessageType;
+}>`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  font-family: 'inconsolata';
+  width: 100%;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+export const Container = styled.div<{ isCollapsed: boolean }>`
+  max-width: 100%;
+  width: 100%;
+  height: fit-content;
+  display: grid;
+  align-content: start;
+  grid-template-columns: 4rem 18rem 1fr;
+  margin: ${({ theme }) => theme.spacing[0]};
+`;
+export const IconContainer = styled.div<{ messageType: MessageType }>`
+  padding-left: ${({ theme }) => theme.spacing['0_75']};
+  display: flex;
+  align-items: center;
+  svg {
+    fill: ${({ theme, messageType }) => {
+      if (messageType === 'debug') return theme.colors.error;
+      if (messageType === 'command') return theme.colors.primary;
+      return theme.colors[messageType];
+    }};
+  }
+`;
+export const TimestampContainer = styled.div`
+  font-family: 'inconsolata';
+`;
+export const TextContainer = styled.div`
+  font-family: 'inconsolata';
+  font-size: ${({ theme }) => theme.fontSize.medium};
+  color: ${({ theme }) => theme.colors.text};
+`;
+export const CollapsedContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+export const Header = styled.div<{ isCollapsed: boolean; type: MessageType }>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  p {
+    font-family: 'inconsolata';
+  }
+`;
+export const Body = styled.pre<{ isCollapsed: boolean; type: MessageType }>`
+  display: ${({ isCollapsed }) => (isCollapsed ? 'none' : 'block')};
+  font-family: 'inconsolata';
+  margin: 0;
+`;
+export const ExpandIconContainer = styled.span`
+  position: absolute;
+  cursor: pointer;
+  right: ${({ theme }) => theme.spacing['2']};
+`;

package/src/components/data/Console/MessageModel.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export type MessageType = 'info' | 'warning' | 'error' | 'debug' | 'command';
+export interface Message {
+  type: MessageType;
+  timestamp: string;
+  data: string;
+  // in case it is a command
+  result?: string;
+}

package/src/components/data/Console/index.tsx ADDED Viewed

@@ -0,0 +1,4 @@
+export { Console } from './Console';
+export type { ConsoleProps } from './Console';
+export type { Message } from './MessageModel';

package/src/components/data/Console/style.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import { styled } from '../../../styled';
+export const Wrapper = styled.div`
+  height: 100%;
+  font-weight: 500;
+  border-left: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-right: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  position: relative;
+  border-top-right-radius: ${({ theme }) => theme.borderRadius.large};
+  border-top-left-radius: ${({ theme }) => theme.borderRadius.large};
+`;
+export const Header = styled.div`
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  border-top: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+  height: 50px;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing[1]};
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 ${({ theme }) => theme.spacing[1]};
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+`;
+export const MessageContainer = styled.div`
+  min-height: 550px;
+  height: calc(100% - 50px);
+  border-radius: 0;
+`;

package/src/components/data/Console/useConsoleLiveMode.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Message } from './MessageModel';
+export function useConsoleLiveModeScrolling(messages: Message[]) {
+  const [isLiveModeEnabled, setIsLiveModeEnabled] = useState<boolean>(true);
+  const [scrollOffset, setScrollOffset] = useState<number>(0);
+  // unfortunately the react-window libraries does not have up to date types
+  const consoleMessagesBoxRef = useRef<null | any>(null);
+  // scrolls to the latest message
+  const scrollNewMessages = useCallback(() => {
+    consoleMessagesBoxRef.current?.scrollToItem(messages.length, 'end');
+  }, [messages]);
+  const toggleLiveModeOnConsoleScroll = useCallback(() => {
+    if (consoleMessagesBoxRef.current) {
+      // in case we are scrolling down, don't do anything.
+      if (consoleMessagesBoxRef.current.state.scrollDirection === 'forward') {
+        return;
+      }
+      if (consoleMessagesBoxRef.current.state.scrollOffset < scrollOffset) {
+        setIsLiveModeEnabled(false);
+      }
+      setScrollOffset(consoleMessagesBoxRef.current.state.scrollOffset);
+    }
+  }, [scrollOffset]);
+  useEffect(() => {
+    if (isLiveModeEnabled) {
+      scrollNewMessages();
+    }
+  }, [messages, isLiveModeEnabled, scrollNewMessages]);
+  return {
+    consoleMessagesBoxRef,
+    isLiveModeEnabled,
+    setIsLiveModeEnabled,
+    toggleLiveModeOnConsoleScroll,
+  };
+}

package/src/components/data/CopyId/CopyId.stories.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { styled } from '../../../styled';
+import { CopyId, CopyIdProps } from '../../../components';
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 5rem;
+  background: ${({ theme }) => theme.colors.background};
+  text-align: left;
+  & > div {
+    margin: 1rem;
+  }
+`;
+export default {
+  title: 'Data/CopyId',
+  component: CopyId,
+  decorators: [(story) => <Wrapper>{story()}</Wrapper>],
+  args: {
+    id: '3141592653589793238462643383279',
+  },
+} as Meta<CopyIdProps>;
+export const Default: StoryFn<CopyIdProps> = (args) => <CopyId {...args} />;
+export const CustomPlaceholder: StoryObj<CopyIdProps> = {
+  args: {
+    placeholder: 'custom placeholder',
+    id: '3141592653589793238462643383279',
+  },
+};

package/src/components/data/CopyId/index.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import { FC, useEffect, useState } from 'react';
+import { Chip } from '../../../components';
+import { AiFillCopy as CopyIcon, AiOutlineCheck as CheckmarkIcon } from 'react-icons/ai';
+export interface CopyIdProps {
+  id?: string;
+  placeholder?: string;
+}
+export const CopyId: FC<CopyIdProps> = ({ id, placeholder }) => {
+  const [copied, setCopied] = useState<boolean>(false);
+  function handleCopy(text: string) {
+    setCopied(true);
+    navigator.clipboard.writeText(text);
+  }
+  useEffect(() => {
+    /* If it was copied, show a checkmark for 2.5s thn make it possible to copy again */
+    if (copied) {
+      setTimeout(() => {
+        setCopied(false);
+      }, 2500);
+    }
+  }, [copied]);
+  if (!id) return <></>;
+  return (
+    <Chip
+      icon={copied ? <CheckmarkIcon /> : <CopyIcon />}
+      onClick={() => handleCopy(id)}
+      variant="outline"
+      label={copied ? 'copied' : placeholder ? placeholder : id}
+      color="backgroundAccent"
+    />
+  );
+};

package/src/components/data/DateFormatter/DateFormatter.stories.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+// TODO: save images locally so when there is no network they are still loaded.
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { DateFormatter, DateFormatterProps } from '.';
+import { DateTime } from 'luxon';
+export default {
+  title: 'Data/DateFormatter',
+  component: DateFormatter,
+  args: {
+    ISODate: DateTime.now().toISO(),
+    format: DateTime.DATE_FULL,
+  },
+} as Meta<DateFormatterProps>;
+export const Default: StoryFn<DateFormatterProps> = (args) => (
+  <div>
+    provides a wrapper component for formatting dates to the standard format used throughout takaro.
+    <br />
+    The current date is formatted to format <strong>DATE_FULL</strong>
+    <br />
+    <strong>
+      <DateFormatter ISODate={args.ISODate} format={args.format} />
+    </strong>
+  </div>
+);

package/src/components/data/DateFormatter/index.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+import { DateTime, DateTimeFormatOptions } from 'luxon';
+import { FC } from 'react';
+export interface DateFormatterProps {
+  ISODate: string;
+  format?: DateTimeFormatOptions;
+}
+export const DateFormatter: FC<DateFormatterProps> = ({ ISODate, format }) => {
+  return format ? (
+    <>{DateTime.fromISO(ISODate).toLocaleString(format)}</>
+  ) : (
+    <>{DateTime.fromISO(ISODate).toLocaleString(DateTime.DATETIME_SHORT)}</>
+  );
+};

package/src/components/data/Drawer/Drawer.stories.tsx ADDED Viewed

@@ -0,0 +1,144 @@
+import React, { useMemo } from 'react';
+import { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Button, TextField, CollapseList, Chip, RadioGroup, Switch, Drawer, DrawerSkeleton } from '../../../components';
+import { styled } from '../../../styled';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing[2]};
+`;
+const Status = styled.div`
+  margin-bottom: ${({ theme }) => theme.spacing[2]};
+`;
+export default {
+  title: 'data/Drawer',
+  component: Drawer,
+} as Meta;
+export const Loading: StoryFn = () => {
+  return <DrawerSkeleton />;
+};
+interface FormFields {
+  name: string;
+  description: string;
+  priceType: 'fixed' | 'variable';
+  generateLicenseKeys: boolean;
+  redirectAfterPurchase: boolean;
+  onStoreFront: boolean;
+}
+export const Default: StoryFn = () => {
+  const [open, setOpen] = useState<boolean>(false);
+  const validationSchema = useMemo(
+    () =>
+      z.object({
+        name: z.string().nonempty('Name field cannot be empty'),
+        description: z.string().min(20, 'description must be at least 20 characters'),
+        priceType: z.enum(['fixed', 'variable']),
+      }),
+    []
+  );
+  const { handleSubmit, control } = useForm<FormFields>({
+    resolver: zodResolver(validationSchema),
+  });
+  const onSubmit: SubmitHandler<FormFields> = async () => {
+    setOpen(false);
+  };
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} text="Open drawer" />
+      <Drawer open={open} onOpenChange={setOpen}>
+        <Drawer.Content>
+          <Drawer.Heading>Product Details</Drawer.Heading>
+          <Drawer.Body>
+            <Status>
+              Status: <Chip label="active" color="success" variant="outline" />
+            </Status>
+            <form id="myform" onSubmit={handleSubmit(onSubmit)}>
+              <CollapseList>
+                <CollapseList.Item title="General">
+                  <TextField
+                    label="Name"
+                    name="name"
+                    required
+                    control={control}
+                    description={
+                      'Give your product a short and clear name.\n50-60 characters is the recommended length for search engines.'
+                    }
+                  />
+                  <TextField
+                    label="Description"
+                    name="description"
+                    required
+                    control={control}
+                    description="Give your product a short and clear description. 120-160 characters is the recommended length for search engines"
+                  />
+                </CollapseList.Item>
+                <CollapseList.Item title="Pricing">
+                  <RadioGroup
+                    control={control}
+                    label="Selection a price type"
+                    name="priceType"
+                    options={[
+                      {
+                        label: 'Fixed',
+                        labelPosition: 'left',
+                        value: 'fixed',
+                      },
+                      {
+                        label: 'Variable',
+                        labelPosition: 'left',
+                        value: 'variable',
+                      },
+                    ]}
+                  />
+                </CollapseList.Item>
+              </CollapseList>
+              <CollapseList.Item title="Settings">
+                <Switch
+                  control={control}
+                  label="Generate License Keys"
+                  name="generateLicenseKeys"
+                  size="tiny"
+                  description="Issue each sutomer a unique license key after purchase"
+                />
+                <Switch
+                  control={control}
+                  label="Redirect customers after purchase"
+                  name="redirectAfterPurchase"
+                  size="small"
+                  description="Redirect customers to a custom URL after making a purchase"
+                />
+                <Switch
+                  control={control}
+                  label="Display product on storefront?"
+                  name="onStoreFront"
+                  description="Show this product on your storefront"
+                  size="small"
+                />
+              </CollapseList.Item>
+            </form>
+          </Drawer.Body>
+          <Drawer.Footer>
+            <ButtonContainer>
+              <Button text="Cancel" onClick={() => setOpen(false)} color="background" />
+              <Button fullWidth text="Save changes" type="submit" form="myform" />
+            </ButtonContainer>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer>
+    </>
+  );
+};

package/src/components/data/Drawer/DrawerBody.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren, useId, useLayoutEffect } from 'react';
+import { useDrawerContext } from './DrawerContext';
+import { styled } from '../../../styled';
+const Container = styled.div<{ canDrag: boolean }>`
+  position: relative;
+  /* Large left padding is for the drawer handle */
+  padding: ${({ theme, canDrag }) =>
+    `0 ${theme.spacing['2_5']} ${theme.spacing[2]} ${canDrag ? theme.spacing['4'] : theme.spacing['2_5']}`};
+`;
+export const DrawerBody: FC<PropsWithChildren> = ({ children }) => {
+  const { setLabelId, canDrag } = useDrawerContext();
+  const id = useId();
+  useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(undefined);
+  }, [id, setLabelId]);
+  return <Container canDrag={canDrag}>{children}</Container>;
+};

package/src/components/data/Drawer/DrawerContent.tsx ADDED Viewed

@@ -0,0 +1,110 @@
+import { forwardRef, HTMLProps, useState } from 'react';
+import { styled } from '../../../styled';
+import { AnimatePresence, motion, PanInfo } from 'framer-motion';
+import SimpleBar from 'simplebar-react';
+import { FloatingFocusManager, FloatingPortal, useMergeRefs, FloatingOverlay } from '@floating-ui/react';
+import { useDrawerContext } from './DrawerContext';
+const Container = styled(motion.div)`
+  position: relative;
+  background-color: ${({ theme }) => theme.colors.background};
+  width: 700px;
+  height: 100%;
+  z-index: ${({ theme }) => theme.zIndex.drawer};
+  border-left: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+`;
+export const HandleContainer = styled.div`
+  height: 80vh;
+  top: 10vh;
+  width: 15px;
+  left: 5px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  justify-content: center;
+  /* handle */
+  div {
+    background-color: ${({ theme }) => theme.colors.backgroundAccent};
+    height: 100px;
+    width: 0.8rem;
+    border-radius: 9999px;
+  }
+`;
+export const DrawerContent = forwardRef<HTMLElement, HTMLProps<HTMLDivElement>>((props, propRef) => {
+  const { context, labelId, descriptionId, getFloatingProps, setOpen, canDrag } = useDrawerContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+  const [dragPosition, setDragPosition] = useState<number>(0);
+  const root = document.getElementById('drawer');
+  if (!root) {
+    throw new Error('Drawer needs to render in a <div id="drawer"></div>');
+  }
+  const handleDrag = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+    const newPosition = Math.min(Math.max(info.offset.x / 650, 0), 1);
+    setDragPosition(newPosition);
+  };
+  const handleDragEnd = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+    // Snap back to position if dragged to the right
+    if (info.offset.x > 450) {
+      setOpen(false);
+    } else if (info.offset.x >= 0) {
+      setDragPosition(0);
+    }
+  };
+  return (
+    <FloatingPortal root={root}>
+      <AnimatePresence>
+        {context.open && (
+          <FloatingOverlay
+            lockScroll
+            style={{
+              placeItems: 'end',
+              maxHeight: '100vh',
+              maxWidth: '100vw',
+              overflow: 'hidden!important',
+              display: 'grid',
+              background: `rgba(0, 0, 0, ${Math.max(0.8 - dragPosition, 0.4)})`,
+            }}
+          >
+            <FloatingFocusManager context={context}>
+              <Container
+                ref={ref}
+                aria-labelledby={labelId}
+                aria-describedby={descriptionId}
+                {...getFloatingProps(props)}
+                initial={{ x: '100%' }}
+                animate={{
+                  x: 0,
+                }}
+                exit={{
+                  x: '100%',
+                }}
+                drag={canDrag ? 'x' : false}
+                dragConstraints={{ left: 0, right: 0 }}
+                onDrag={handleDrag}
+                onDragEnd={handleDragEnd}
+                dragElastic={{ left: 0, right: 0.4 }}
+                layout
+              >
+                {canDrag && (
+                  <HandleContainer>
+                    <div />
+                  </HandleContainer>
+                )}
+                <SimpleBar style={{ maxHeight: '92vh' }}>{props.children}</SimpleBar>
+              </Container>
+            </FloatingFocusManager>
+          </FloatingOverlay>
+        )}
+      </AnimatePresence>
+    </FloatingPortal>
+  );
+});