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

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

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render <Empty /> 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -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;
+  padding: 0.7rem;
+}
+
+.c1 {
+  height: 40px;
+  margin-bottom: 1rem;
+}
+
+.c1 svg {
+  height: 100%;
+  margin: auto;
+}
+
+.c2 {
+  color: #d3d3d3;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <svg
+        class="ant-empty-img-simple"
+        height="41"
+        viewBox="0 0 64 41"
+        width="64"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="none"
+          fill-rule="evenodd"
+          transform="translate(0 1)"
+        >
+          <ellipse
+            cx="32"
+            cy="33"
+            fill="#f5f5f5"
+            rx="32"
+            ry="7"
+          />
+          <g
+            fill="#d9d9d9"
+            fill-rule="nonzero"
+          >
+            <path
+              d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+            />
+            <path
+              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+              fill="#fafafa"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div
+      class="c2"
+    >
+      No Data
+    </div>
+  </div>
+</div>
+`;

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 jLRJsD"
+    >
+      this is the description
+    </p>
+    <div
+      class="sc-gEvEer eufunr"
+    />
+  </div>
+</div>
+`;

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

@@ -0,0 +1,85 @@
+import { FC, ReactElement } from 'react';
+import { Size, styled } from '../../../styled';
+
+const Container = styled.div<{ size: Size }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 600px;
+
+  svg {
+    fill: ${({ theme }) => theme.colors.primary};
+  }
+
+  ${({ size }) => {
+    switch (size) {
+      case 'tiny':
+        return `
+          padding: 0.225rem;
+          border-radius: 0.5rem;
+        `;
+      case 'small':
+        return `
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+        `;
+      case 'medium':
+        return `
+          padding: 2rem;
+          border-radius: .7rem
+        `;
+      case 'large':
+        return `
+          padding: 6rem;
+          border-radius: .8rem
+        `;
+      case 'huge':
+        return `
+          border-radius: 1rem;
+          padding: 10rem 12rem
+        `;
+    }
+  }};
+`;
+
+const ActionContainer = styled.div`
+  display: grid;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing[2]};
+  justify-content: center;
+  align-content: center;
+  grid-auto-rows: auto;
+  grid-auto-flow: column;
+`;
+
+const Description = styled.p`
+  max-width: 300px;
+  margin: 0.5rem auto 1rem auto;
+  color: ${({ theme }) => theme.colors.text};
+  text-align: center;
+`;
+
+export const EmptyPage = styled.div`
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  height: 100%;
+  width: 100%;
+`;
+
+export interface EmptyProps {
+  header: string;
+  description: string;
+  actions: ReactElement[];
+  size?: Size;
+}
+
+export const Empty: FC<EmptyProps> = ({ description = 'No Data', header, actions, size = 'medium' }) => {
+  return (
+    <Container size={size}>
+      <h2>{header}</h2>
+      <Description>{description}</Description>
+      <ActionContainer>{actions}</ActionContainer>
+    </Container>
+  );
+};

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { PermissionsGuard, PermissionsGuardProps } from '.';
+import { PERMISSIONS } from '@takaro/apiclient';
+import { Alert } from '../../feedback';
+
+export default {
+  title: 'Other/PermissionsGuard',
+  component: PermissionsGuard,
+  decorators: [
+    (story) => (
+      <div>
+        <Alert
+          variant="warning"
+          text="It is unlikely you will use THIS permissionguard directly. There should be a specific permissionguard in web-*
+          application"
+        ></Alert>
+        {story()}
+      </div>
+    ),
+  ],
+} as Meta<PermissionsGuardProps>;
+
+export const Default: StoryObj<typeof PermissionsGuard> = {
+  args: {
+    userPermissions: [PERMISSIONS.ReadUsers, PERMISSIONS.ManageUsers],
+    requiredPermissions: [PERMISSIONS.ReadUsers],
+    children: <div>You can see this because you have 'READ_USERS' permission.</div>,
+  },
+};
+
+export const NoAccess: StoryObj<typeof PermissionsGuard> = {
+  args: {
+    userPermissions: [PERMISSIONS.ReadUsers],
+    requiredPermissions: [PERMISSIONS.ManageUsers],
+    children: <div>You cannot see this because you don't have 'MANAGE_USERS' permission.</div>,
+  },
+};
+
+export const MultiplePermissionsRequired: StoryObj<typeof PermissionsGuard> = {
+  args: {
+    userPermissions: [PERMISSIONS.ManageUsers, PERMISSIONS.ReadUsers],
+    requiredPermissions: [[PERMISSIONS.ManageUsers, PERMISSIONS.ReadUsers]],
+    children: <div>You can see this because you have both 'MANAGE_USERS' and 'READ_USERS' permissions.</div>,
+  },
+};
+
+export const OrPermissionsRequired: StoryObj<typeof PermissionsGuard> = {
+  args: {
+    userPermissions: [PERMISSIONS.ManageUsers],
+    // Here each inner array is an AND condition, and we have an OR condition between these sets
+    requiredPermissions: [[PERMISSIONS.ManageUsers], [PERMISSIONS.ReadUsers]],
+    children: <div>You can see this because you have either 'MANAGE_USERS' or 'READ_USERS' permission.</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

@@ -0,0 +1,27 @@
+import { FC, PropsWithChildren, ReactElement, useMemo } from 'react';
+import { PERMISSIONS } from '@takaro/apiclient';
+import { RequiredPermissions, hasPermissionHelper } from './hasPermissionsHelper';
+
+export interface PermissionsGuardProps {
+  requiredPermissions: RequiredPermissions;
+  userPermissions: PERMISSIONS[];
+  fallback?: ReactElement;
+}
+
+export const PermissionsGuard: FC<PropsWithChildren<PermissionsGuardProps>> = ({
+  userPermissions,
+  requiredPermissions,
+  children,
+  fallback,
+}) => {
+  // only update permissions when userPermissions or requiredPermissions change
+  const hasPermission = useMemo(() => {
+    return hasPermissionHelper(userPermissions, requiredPermissions);
+  }, [userPermissions, requiredPermissions]);
+
+  if (!hasPermission) {
+    return fallback ?? null;
+  }
+
+  return <>{children}</>;
+};

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,92 @@
+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" label="Most popular" />}
+            </h1>
+            <p style={{ marginBottom: '3rem' }}>{description}</p>
+            <Divider
+              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>{buttonText}</Button>
+              </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

@@ -0,0 +1,27 @@
+export { ClipBoard } from './ClipBoard';
+export type { ClipBoardProps } from './ClipBoard';
+
+export { Empty, EmptyPage } from './Empty';
+export type { EmptyProps } from './Empty';
+
+export { Company } from './Company';
+export type { CompanyProps } from './Company';
+
+export { ActionMenu, Action } from './ActionMenu';
+export type { ActionMenuProps } from './ActionMenu';
+
+export { CollapseList } from './CollapseList';
+
+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';