@takaro/lib-components 0.0.15 → 0.0.18

package/src/components/navigation/index.ts

@@ -4,7 +4,8 @@ export type { StepperProps } from './Steppers/Stepper';
 export { SlimStepper } from './Steppers/SlimStepper';
 export type { SlimStepperProps } from './Steppers/SlimStepper';
 
-export { StepperProvider, useStepper } from './Steppers/context';
+export { StepperProvider } from './Steppers/provider';
+export { useStepper } from './Steppers/useStepper';
 
 export { IconNav } from './IconNav';
 export type { IconNavProps } from './IconNav';

package/src/components/other/ActionMenu/index.tsx

@@ -1,4 +1,4 @@
-import { Children, forwardRef, Dispatch, FC, ReactElement, SetStateAction, PropsWithChildren } from 'react';
+import { Children, forwardRef, FC, ReactElement, PropsWithChildren } from 'react';
 import { Container, Item } from './style';
 import { AiOutlineCheck as CheckMarkIcon } from 'react-icons/ai';
 import { Elevation } from '../../../styled/';
@@ -9,17 +9,16 @@ export interface ActionMenuProps {
     y: number | null;
     strategy: 'absolute' | 'fixed';
   };
-  selectedState: [number, Dispatch<SetStateAction<number>>];
+  selected: number;
+  setSelected: (selected: number) => void;
   children: ReactElement | ReactElement[];
   elevation?: Elevation;
 }
 
 export const ActionMenu = forwardRef<HTMLUListElement, ActionMenuProps>(function ActionMenu(
-  { attributes, children, selectedState, elevation = 4 },
+  { attributes, children, selected, setSelected, elevation = 4 },
   ref,
 ) {
-  const [selected, setSelected] = selectedState;
-
   return (
     <Container
       elevation={elevation}
@@ -31,14 +30,22 @@ export const ActionMenu = forwardRef<HTMLUListElement, ActionMenuProps>(function
       ref={ref}
     >
       {Children.map(children, (child: ReactElement<ActionProps>, idx) => (
-        <Item onClick={() => setSelected(idx)}>
+        <Item
+          aria-disabled={child.props.disabled}
+          onClick={() => {
+            if (child.props.disabled) {
+              return;
+            }
+            setSelected(idx);
+          }}
+        >
           {child}
           {selected === idx ? (
             <div style={{ display: 'flex', alignItems: 'center' }}>
-              <CheckMarkIcon size={15} />
+              <CheckMarkIcon className="checkmark" size={15} />
             </div>
           ) : (
-            <div className="checkmark-placeholder"></div>
+            <div className="checkmark-placeholder" />
           )}
         </Item>
       ))}
@@ -49,8 +56,10 @@ export const ActionMenu = forwardRef<HTMLUListElement, ActionMenuProps>(function
 interface ActionProps {
   onClick: () => unknown;
   text: string;
-  // TODO: implement disabled when needed
+  disabled?: boolean;
 }
-export const Action: FC<PropsWithChildren<ActionProps>> = ({ children }) => {
-  return <div>{children}</div>;
+
+export const Action: FC<PropsWithChildren<ActionProps>> = ({ children, disabled = false }) => {
+  const _ = disabled;
+  return children;
 };

package/src/components/other/ActionMenu/style.ts

@@ -36,12 +36,12 @@ export const Item = styled.li`
       color: white;
     }
 
-    svg {
+    svg.checkmark {
       fill: white;
     }
   }
 
-  svg {
+  svg.checkmark {
     margin-left: ${({ theme }) => theme.spacing[1]};
     fill: ${({ theme }): string => theme.colors.text};
   }

package/src/components/other/ClipBoard/ClipBoard.test.tsx

@@ -1,5 +1,6 @@
 import { ClipBoard } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils';
+import { expect, it } from 'vitest';
 
 it('Should render <ClipBoard />', () => {
   const { container } = render(<ClipBoard text="ClipBoard text" />);

package/src/components/other/ClipBoard/__snapshots__/ClipBoard.test.tsx.snap

@@ -0,0 +1,36 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <ClipBoard /> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg jSPpZO"
+    role="button"
+    tabindex="-1"
+  >
+    <input
+      aria-describedby="clipboard-input-error"
+      aria-invalid="false"
+      readonly=""
+      type="text"
+      value="ClipBoard text"
+    />
+    <div
+      class="sc-gEvEer bneOhB"
+    >
+      <svg
+        fill="currentColor"
+        height="20"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 1024 1024"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

package/src/components/other/Empty/Empty.test.tsx

@@ -1,7 +1,10 @@
 import { Empty } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils.tsx';
+import { expect, it } from 'vitest';
 
 it('Should render <Empty />', () => {
-  const { container } = render(<Empty />);
+  const { container } = render(
+    <Empty header="this is the header" description="this is the description" actions={[]} />,
+  );
   expect(container).toMatchSnapshot();
 });

package/src/components/other/Empty/__snapshots__/Empty.test.tsx.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Empty /> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg csqXIR"
+  >
+    <h2>
+      this is the header
+    </h2>
+    <p
+      class="sc-eqUAAy flGMfW"
+    >
+      this is the description
+    </p>
+    <div
+      class="sc-gEvEer eufunr"
+    />
+  </div>
+</div>
+`;

package/src/components/other/PermissionsGuard/hasPermissionsHelper.ts

@@ -0,0 +1,18 @@
+import { PERMISSIONS } from '@takaro/apiclient';
+
+type PermissionsSet = PERMISSIONS | PERMISSIONS[];
+export type RequiredPermissions = PermissionsSet[];
+
+export const hasPermissionHelper = (
+  userPermissions: PERMISSIONS[],
+  requiredPermissions: RequiredPermissions,
+): boolean => {
+  if (userPermissions.includes(PERMISSIONS.Root)) {
+    return true;
+  }
+  return requiredPermissions.some((permissionSet) =>
+    Array.isArray(permissionSet)
+      ? permissionSet.every((permission) => userPermissions.includes(permission))
+      : userPermissions.includes(permissionSet as PERMISSIONS),
+  );
+};

package/src/components/other/PermissionsGuard/index.tsx

@@ -1,8 +1,6 @@
 import { FC, PropsWithChildren, ReactElement, useMemo } from 'react';
 import { PERMISSIONS } from '@takaro/apiclient';
-
-type PermissionsSet = PERMISSIONS | PERMISSIONS[];
-export type RequiredPermissions = PermissionsSet[];
+import { RequiredPermissions, hasPermissionHelper } from './hasPermissionsHelper';
 
 export interface PermissionsGuardProps {
   requiredPermissions: RequiredPermissions;
@@ -10,20 +8,6 @@ export interface PermissionsGuardProps {
   fallback?: ReactElement;
 }
 
-export const hasPermissionHelper = (
-  userPermissions: PERMISSIONS[],
-  requiredPermissions: RequiredPermissions,
-): boolean => {
-  if (userPermissions.includes(PERMISSIONS.Root)) {
-    return true;
-  }
-  return requiredPermissions.some((permissionSet) =>
-    Array.isArray(permissionSet)
-      ? permissionSet.every((permission) => userPermissions.includes(permission))
-      : userPermissions.includes(permissionSet as PERMISSIONS),
-  );
-};
-
 export const PermissionsGuard: FC<PropsWithChildren<PermissionsGuardProps>> = ({
   userPermissions,
   requiredPermissions,

package/src/components/other/Plan/Plan.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Plan, PlanProps } from '.';
+
+export default {
+  title: 'Other/Plan',
+  component: Plan,
+  args: {
+    title: 'Hobby plan',
+    description:
+      'Lorem ipsum dolor sit amet consect etur adipisicing elit. Itaque amet indis perferendis blanditiis repellendus etur quidem assumenda.',
+    price: '20',
+    features: ['Lorem ipsum', 'dolor sit amet', 'etur adipisicing elit', 'Itaque amet indis perferendis blanditiis '],
+    buttonText: 'Get access',
+    to: 'https://takaro.io',
+  },
+} as Meta<PlanProps>;
+
+export const Default: StoryFn<PlanProps> = (args) => {
+  return <Plan {...args} />;
+};

package/src/components/other/Plan/index.tsx

@@ -0,0 +1,93 @@
+import { FC } from 'react';
+import { Button, Card, Chip, Divider } from '../../../components';
+import { AiOutlineCheck as CheckmarkIcon } from 'react-icons/ai';
+import { useTheme } from '../../../hooks';
+import { InnerContainer, PriceContainer, FeatureList, FeaturesContainer } from './style';
+
+export interface PlanProps {
+  to: string;
+  title: string;
+  description: string;
+  features: string[];
+  price?: string;
+  buttonText: string;
+  highlight?: boolean;
+  currency?: string;
+  period?: string;
+}
+
+export const Plan: FC<PlanProps> = ({
+  to,
+  title,
+  description,
+  features,
+  price,
+  buttonText,
+  highlight = false,
+  currency,
+  period,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <Card
+      style={{
+        maxWidth: '1000px',
+        width: '100%',
+        margin: '0 auto',
+      }}
+    >
+      <Card.Body>
+        <InnerContainer>
+          <FeaturesContainer>
+            <h1 style={{}}>
+              {title}
+              {highlight && <Chip color="primary" variant="outline" label="Most popular" />}
+            </h1>
+            <p style={{ marginBottom: '3rem' }}>{description}</p>
+            <Divider
+              // eslint-disable-next-line quotes
+              label={{ text: "What's included", labelPosition: 'center', color: 'primary' }}
+              fullWidth
+              size="large"
+            />
+            <FeatureList>
+              {features.map((feature) => (
+                <li key={feature}>
+                  <CheckmarkIcon fill={theme.colors.primary} style={{ marginRight: '0.5rem' }} /> {feature}
+                </li>
+              ))}
+            </FeatureList>
+          </FeaturesContainer>
+          {/* right side*/}
+          <PriceContainer highlight={highlight}>
+            <div>
+              {price && (
+                <p
+                  style={{
+                    display: 'flex',
+                    alignItems: 'baseline',
+                    justifyContent: 'center',
+
+                    fontSize: theme.fontSize.mediumLarge,
+                    fontWeight: 600,
+                    columnGap: theme.spacing['0_5'],
+                  }}
+                >
+                  <span style={{ fontSize: theme.fontSize.huge, fontWeight: 800 }}>{price}</span>
+                  <span style={{ fontSize: theme.fontSize.small }}>
+                    {currency ? currency.toUpperCase() : ''} / {period}
+                  </span>
+                </p>
+              )}
+              <a style={{ width: '100%' }} className="button" href={to} target="_blank" rel="noreferrer">
+                <Button fullWidth text={buttonText} />
+              </a>
+              <p></p>
+            </div>
+          </PriceContainer>
+        </InnerContainer>
+      </Card.Body>
+    </Card>
+  );
+};

package/src/components/other/Plan/style.ts

@@ -0,0 +1,61 @@
+import { styled } from '../../../styled';
+
+export const InnerContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+
+  @media (max-width: 1200px) {
+    grid-template-columns: 450px 1fr;
+  }
+`;
+
+export const PriceContainer = styled.div<{ highlight: boolean }>`
+  background-color: ${({ theme }) => theme.colors.background};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ highlight, theme }) => (highlight ? theme.colors.primary : theme.colors.backgroundAccent)};
+  padding: ${({ theme }) => theme.spacing[4]};
+
+  & > div:first-child {
+    justify-content: center;
+    flex-direction: column;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    min-width: fit-content;
+
+    p:last-child {
+      font-size: ${({ theme }) => theme.fontSize.tiny};
+      color: ${({ theme }) => theme.colors.textAlt};
+      margin-top: ${({ theme }) => theme.spacing['1_5']};
+    }
+  }
+`;
+
+export const FeaturesContainer = styled.div`
+  flex: 1 1 auto;
+  padding: 0 ${({ theme }) => theme.spacing[2]};
+
+  h1 {
+    margin-bottom: ${({ theme }) => theme.spacing['1_5']};
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+export const FeatureList = styled.ul`
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+
+  li {
+    column-gap: ${({ theme }) => theme.spacing['0_75']};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: capitalize;
+  }
+`;

package/src/components/other/Usage/Usage.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Usage, UsageProps } from './Usage';
+
+export default {
+  title: 'Other/Usage',
+  component: Usage,
+  args: {
+    unit: 'Functions',
+    total: 5,
+    value: 1,
+  },
+} as Meta<UsageProps>;
+
+export const Default: StoryFn<UsageProps> = (args) => {
+  return (
+    <div style={{ width: '250px' }}>
+      <Usage {...args} />
+    </div>
+  );
+};

package/src/components/other/Usage/Usage.tsx

@@ -0,0 +1,35 @@
+import { AlertVariants, Color } from '../../../styled';
+import { ProgressBar } from '../../../components';
+import { FC } from 'react';
+
+export interface UsageProps {
+  unit?: string;
+  value: number;
+  total: number;
+  progressBarColor?: Color | AlertVariants;
+  minFill?: number;
+}
+
+export const Usage: FC<UsageProps> = ({ value, total, unit, progressBarColor = 'primary', minFill }) => {
+  const percentage = (value / total) * 100;
+
+  return (
+    <div style={{ minWidth: '175px' }}>
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          paddingRight: '0.25rem',
+        }}
+      >
+        <p>{unit}</p>
+        <p>
+          {value} of {total}
+        </p>
+      </div>
+      <ProgressBar mode="determinate" value={percentage} size="small" color={progressBarColor} minFill={minFill} />
+    </div>
+  );
+};

package/src/components/other/Usage/UsageCard.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { UsageCard, UsageCardProps } from './UsageCard';
+
+export default {
+  title: 'Other/UsageCard',
+  component: UsageCard,
+  args: {
+    title: 'Functions included in your plan',
+    info: 'Here we can add some extra details?',
+    description: 'Here we can add some extra details about something.',
+    unit: 'Functions',
+    total: 100000,
+    value: 52329,
+  },
+} as Meta<UsageCardProps>;
+
+export const Default: StoryFn<UsageCardProps> = (args) => {
+  return (
+    <>
+      <div style={{ marginBottom: '2rem' }}>
+        <h1 style={{ fontSize: '3.5rem', fontWeight: 500 }}>Summary</h1>
+        <p>Resets on Sept 1st, 2025</p>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
+        <UsageCard {...args} />
+        <UsageCard {...args} />
+      </div>
+    </>
+  );
+};

package/src/components/other/Usage/UsageCard.tsx

@@ -0,0 +1,88 @@
+import { styled } from '../../../styled';
+import { useTheme } from '../../../hooks';
+import { Card, ProgressBar, IconTooltip } from '../../../components';
+
+import { AiOutlineQuestion as QuestionIcon } from 'react-icons/ai';
+import { FC } from 'react';
+import { UsageProps } from './Usage';
+
+const TitleContainer = styled.div<{ margin: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: ${({ margin, theme }) => (margin ? theme.spacing['2'] : 0)};
+`;
+
+const DetailsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing[1]};
+
+  h2 {
+    font-size: 2.25rem;
+    font-weight: 600;
+  }
+  span {
+    backgroundcolor: ${({ theme }) => theme.spacing[1]};
+    border: 1px solid ${({ theme }) => theme.colors.backgroundAccent};
+    font-size: ${({ theme }) => theme.fontSize.mediumLarge};
+    padding: ${({ theme }) => `${theme.spacing['0_25']} ${theme.spacing['0_75']}`};
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+  }
+`;
+
+export interface UsageCardProps extends UsageProps {
+  title: string;
+  description?: string;
+  info?: string;
+}
+
+export const UsageCard: FC<UsageCardProps> = ({
+  title,
+  value,
+  total,
+  info,
+  unit,
+  description,
+  progressBarColor,
+  minFill,
+}) => {
+  const theme = useTheme();
+  const used_percentage = Math.min((value / total) * 100, 100);
+  const remaining = Math.max(total - value, 0);
+  const formatter = new Intl.NumberFormat('en', {
+    notation: 'compact',
+    compactDisplay: 'short',
+    maximumFractionDigits: 1,
+  });
+
+  return (
+    <Card>
+      <Card.Body>
+        <TitleContainer margin={description ? false : true}>
+          <h3>{title}</h3>
+          {info && (
+            <IconTooltip placement="top" color="background" icon={<QuestionIcon />}>
+              {info}
+            </IconTooltip>
+          )}
+        </TitleContainer>
+        {description && <p style={{ color: theme.colors.textAlt, marginBottom: theme.spacing[2] }}>{description}</p>}
+        <DetailsContainer>
+          <h2>
+            {formatter.format(value)} / {formatter.format(total)} {unit}
+          </h2>
+          <span>{formatter.format(remaining)} remaining</span>
+        </DetailsContainer>
+        <ProgressBar
+          mode="determinate"
+          value={used_percentage}
+          size="medium"
+          color={progressBarColor}
+          minFill={minFill}
+        />
+      </Card.Body>
+    </Card>
+  );
+};

package/src/components/other/index.ts

@@ -12,8 +12,16 @@ export type { ActionMenuProps } from './ActionMenu';
 
 export { CollapseList } from './CollapseList';
 
-export { PermissionsGuard, hasPermissionHelper } from './PermissionsGuard';
-export type { PermissionsGuardProps, RequiredPermissions } from './PermissionsGuard';
+export { PermissionsGuard } from './PermissionsGuard';
+export { hasPermissionHelper } from './PermissionsGuard/hasPermissionsHelper';
+export type { RequiredPermissions } from './PermissionsGuard/hasPermissionsHelper';
+export type { PermissionsGuardProps } from './PermissionsGuard';
+
+export { Plan } from './Plan';
+export type { PlanProps } from './Plan';
+
+export { UsageCard } from './Usage/UsageCard';
+export type { UsageCardProps } from './Usage/UsageCard';
 
 export { Collapsible } from './Collapsible';
 export type { CollapsibleProps } from './Collapsible';

package/src/components/visual/Card/index.tsx

@@ -1,4 +1,4 @@
-import { FC, HTMLProps, PropsWithChildren } from 'react';
+import { forwardRef, HTMLProps, PropsWithChildren } from 'react';
 import { styled } from '../../../styled';
 import { CardTitle } from './CardTitle';
 import { CardBody } from './CardBody';
@@ -38,22 +38,25 @@ interface SubComponentTypes {
   Body: typeof CardBody;
 }
 
-export const Card: FC<PropsWithChildren<CardProps>> & SubComponentTypes = function Card({
-  children,
-  variant = 'default',
-  ...props
-}) {
+const _Card = forwardRef<HTMLDivElement, PropsWithChildren<CardProps>>(function Card(
+  { children, variant = 'default', ...props },
+  ref,
+) {
   const canClick = 'onClick' in props;
   const { className, ...restProps } = props;
 
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    <Container canClick={canClick} variant={variant} className={className} {...restProps}>
+    <Container ref={ref} canClick={canClick} variant={variant} className={className} {...restProps}>
       {children}
     </Container>
   );
-};
+});
+
+// TODO: type it correctly instead
+type CardType = typeof _Card & SubComponentTypes;
+export const Card = _Card as CardType;
 
 Card.Title = CardTitle;
 Card.Body = CardBody;

package/src/components/visual/Divider/Divider.test.tsx

@@ -1,5 +1,6 @@
 import { Divider } from '.';
-import { render } from 'test-utils';
+import { render } from '../../../test/testUtils';
+import { it, expect } from 'vitest';
 
 it('Should render <Accordion />', () => {
   const { container } = render(<Divider />);

package/src/components/visual/Divider/__snapshots__/Divider.test.tsx.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Should render <Accordion /> 1`] = `
+<div>
+  <div
+    class="sc-aXZVg ktErGV"
+  >
+    <div
+      class="sc-eqUAAy hsBlKB"
+    />
+  </div>
+</div>
+`;