@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Popover/hooks/usePopover.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+} from '@floating-ui/react';
+import { PopoverOptions, UsePopover } from '../types';
+
+export const usePopover: UsePopover = ({
+  initialOpen = false,
+  placement = 'bottom',
+  modal,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+  floatingOptions = {},
+}: PopoverOptions = {}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
+  const [labelId, setLabelId] = React.useState<string | undefined>();
+  const [descriptionId, setDescriptionId] = React.useState<
+    string | undefined
+  >();
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      flip({
+        crossAxis: placement.includes('-'),
+        padding: 5,
+      }),
+      shift({ padding: 5 }),
+    ],
+    ...floatingOptions,
+  });
+
+  const context = data.context;
+
+  const click = useClick(context, {
+    enabled: controlledOpen == null,
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const interactions = useInteractions([click, dismiss, role]);
+
+  const result = React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      modal,
+      labelId,
+      descriptionId,
+      floatingOptions,
+      setLabelId,
+      setDescriptionId,
+    }),
+    [
+      open,
+      setOpen,
+      interactions,
+      data,
+      modal,
+      labelId,
+      descriptionId,
+      floatingOptions,
+    ],
+  );
+
+  return result;
+};

package/src/components/Popover/hooks/usePopoverContext.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ContextType } from '../types';
+
+export const PopoverContext = React.createContext<ContextType>(
+  {} as ContextType,
+);
+
+export const usePopoverContext = () => {
+  const context = React.useContext(PopoverContext);
+
+  if (context == null) {
+    throw new Error('Popover components must be wrapped in <Popover />');
+  }
+
+  return context as ContextType;
+};

package/src/components/Popover/index.ts

@@ -0,0 +1,6 @@
+export { Popover } from './Popover';
+export { PopoverClose } from './PopoverClose';
+export { PopoverContent } from './PopoverContent';
+export { PopoverDescription } from './PopoverDescription';
+export { PopoverHeading } from './PopoverHeading';
+export { PopoverTrigger } from './PopoverTrigger';

package/src/components/Popover/stories/Popover.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Popover } from '..';
+import { StoryComponent } from './StoryComponent';
+
+type PopoverType = typeof Popover;
+export type Args = Parameters<PopoverType>[0];
+
+export default {
+  title: 'Components/Popover',
+  component: Popover,
+  argTypes: {},
+} as Meta<typeof Popover>;
+
+export const Default: StoryObj<PopoverType> = () => {
+  return <StoryComponent />;
+};
+
+Default.args = {};

package/src/components/Popover/stories/StoryComponent.tsx

@@ -0,0 +1,39 @@
+import { useTheme } from '@emotion/react';
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeading,
+  PopoverDescription,
+  PopoverClose,
+} from '..';
+
+export const StoryComponent = () => {
+  const theme = useTheme();
+  return (
+    <div
+      css={{
+        height: '400px',
+        display: 'flex',
+        justifyContent: 'center',
+      }}>
+      <Popover>
+        <PopoverTrigger>Trigger</PopoverTrigger>
+        <PopoverContent
+          className="popover"
+          css={{
+            gap: 15,
+            border: `2px solid ${theme.colors.turquoise}`,
+            borderRadius: 15,
+            padding: 15,
+          }}>
+          <PopoverHeading variant="h4">Popover heading</PopoverHeading>
+          <PopoverDescription variant="body1">
+            Popover description
+          </PopoverDescription>
+          <PopoverClose>Close</PopoverClose>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};

package/src/components/Popover/types.ts

@@ -0,0 +1,42 @@
+import {
+  Placement,
+  useInteractions,
+  UseFloatingReturn,
+  UseFloatingOptions,
+} from '@floating-ui/react';
+
+export interface PopoverOptions {
+  initialOpen?: boolean;
+  placement?: Placement;
+  modal?: boolean;
+  open?: boolean;
+  floatingOptions?: Partial<UseFloatingOptions>;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export type SetIDs = {
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+
+export interface PopoverTriggerProps {
+  children?: React.ReactNode;
+  asChild?: boolean;
+  dataTestId?: string;
+}
+
+type UseInteractions = ReturnType<typeof useInteractions>;
+
+export type UsePopover = (props: PopoverOptions) => {
+  open: boolean;
+  modal?: boolean;
+  labelId?: string;
+  descriptionId?: string;
+  floatingOptions?: PopoverOptions['floatingOptions'];
+  setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setOpen: (open: boolean) => void;
+} & UseInteractions &
+  UseFloatingReturn;
+
+export type ContextType = ReturnType<UsePopover> & SetIDs;

package/src/components/Progress/Progress.spec.tsx

@@ -0,0 +1,85 @@
+import { screen, within } from '../../../customTest';
+
+import theme from '@themes/main';
+
+import ProgressBar from '@components/ProgressBar';
+import ProgressVertical from '@components/ProgressVertical';
+import ProgressLegend from '@components/ProgressLegend';
+import ProgressLegendItem from '@components/ProgressLegendItem';
+
+import Progress from './index';
+
+describe('Progress', () => {
+  it('Render Progress horizontal', () => {
+    render(
+      <Progress>
+        <ProgressBar percentage={50} color={'green'} />
+      </Progress>,
+    );
+
+    const progressBar = screen.getByRole('progressbar');
+
+    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.green}`);
+    expect(progressBar).toHaveStyle('width: 50%');
+  });
+
+  it('Render Progress with legend in the correct order', async () => {
+    render(
+      <Progress>
+        <ProgressLegend>
+          <ProgressLegendItem position="start" percentage={0}>
+            0%
+          </ProgressLegendItem>
+          <ProgressLegendItem position="current" percentage={45}>
+            45%
+          </ProgressLegendItem>
+          <ProgressLegendItem position="end" percentage={100}>
+            100%
+          </ProgressLegendItem>
+        </ProgressLegend>
+        <ProgressBar percentage={50} color={'green'} />
+      </Progress>,
+    );
+
+    const progressBar = screen.getByRole('progressbar');
+    const [item1, item2, item3] = await screen.queryAllByText(/%/i);
+
+    await within(item1).findByText(/0%/i);
+    await within(item2).findByText(/45%/i);
+    await within(item3).findByText(/100%/i);
+
+    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.green}`);
+    expect(progressBar).toHaveStyle('width: 50%');
+  });
+
+  it('Render ProgressBar with different color', () => {
+    render(
+      <Progress>
+        <ProgressBar percentage={50} color={'blue'} />
+      </Progress>,
+    );
+
+    const progressBar = screen.getByRole('progressbar');
+
+    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.blue}`);
+    expect(progressBar).toHaveStyle('width: 50%');
+  });
+
+  it('Render ProgressVertical with legend', async () => {
+    render(
+      <ProgressVertical>
+        <ProgressBar percentage={50} color={'green'} />
+        <ProgressLegend>
+          <ProgressLegendItem percentage={60}>60%</ProgressLegendItem>
+        </ProgressLegend>
+      </ProgressVertical>,
+    );
+
+    const progressBar = screen.getByRole('progressbar');
+
+    await screen.findByText(/60%/i);
+
+    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.green}`);
+    expect(progressBar).toHaveStyle('height: 50%');
+  });
+});

package/src/components/Progress/Progress.stories.tsx

@@ -0,0 +1,234 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ProgressBar from '@components/ProgressBar';
+import ProgressVertical from '@components/ProgressVertical';
+import ProgressLegendItem from '@components/ProgressLegendItem';
+import ProgressLegend from '@components/ProgressLegend';
+
+import Progress from './index';
+
+type Args = Parameters<typeof ProgressBar>[0];
+
+export default {
+  title: 'Components/Progress',
+  component: Progress,
+  argTypes: {
+    color: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: [
+        'pink',
+        'yellow',
+        'green',
+        'turquoise',
+        'purple',
+        'blueLight',
+        'blue',
+      ],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+} as Meta<typeof Progress>;
+
+export const Vertical: StoryObj = (args: Args) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: 200,
+        width: '100%',
+      }}>
+      <div
+        style={{
+          height: 200,
+          paddingInline: 20,
+        }}>
+        <ProgressVertical>
+          <ProgressBar percentage={args.percentage} color={args.color} />
+          <ProgressLegend>
+            <ProgressLegendItem position="end" percentage={100}>
+              3000
+            </ProgressLegendItem>
+            <ProgressLegendItem position="current" percentage={args.percentage}>
+              1500
+            </ProgressLegendItem>
+            <ProgressLegendItem position="start" percentage={0}>
+              0
+            </ProgressLegendItem>
+          </ProgressLegend>
+        </ProgressVertical>
+      </div>
+
+      <div
+        style={{
+          height: 200,
+          paddingInline: 20,
+        }}>
+        <ProgressVertical>
+          <ProgressLegend>
+            <ProgressLegendItem position="end" percentage={100}>
+              <span
+                style={{
+                  textAlign: 'right',
+                  display: 'block',
+                  paddingRight: 6,
+                }}>
+                100%
+              </span>
+            </ProgressLegendItem>
+            <ProgressLegendItem position="current" percentage={30}>
+              <span
+                style={{
+                  textAlign: 'right',
+                  display: 'block',
+                  paddingRight: 6,
+                }}>
+                30%
+              </span>
+            </ProgressLegendItem>
+            <ProgressLegendItem position="start" percentage={0}>
+              <span
+                style={{
+                  textAlign: 'right',
+                  display: 'block',
+                  paddingRight: 6,
+                }}>
+                0%
+              </span>
+            </ProgressLegendItem>
+          </ProgressLegend>
+          <ProgressBar percentage={30} color={args.color} />
+        </ProgressVertical>
+      </div>
+
+      <div
+        style={{
+          height: 200,
+          paddingInline: 20,
+        }}>
+        <ProgressVertical>
+          <ProgressLegend>
+            <ProgressLegendItem position="current" percentage={30}>
+              <span
+                style={{
+                  textAlign: 'right',
+                  display: 'block',
+                  paddingRight: 6,
+                }}>
+                30%
+              </span>
+            </ProgressLegendItem>
+          </ProgressLegend>
+          <ProgressBar percentage={30} color={args.color} />
+        </ProgressVertical>
+      </div>
+
+      <div
+        style={{
+          height: 200,
+          paddingInline: 20,
+        }}>
+        <ProgressVertical>
+          <ProgressBar percentage={30} color={args.color} />
+          <ProgressLegend>
+            <ProgressLegendItem position="current" percentage={30}>
+              <span
+                style={{
+                  textAlign: 'right',
+                  display: 'block',
+                  paddingRight: 6,
+                }}>
+                30%
+              </span>
+            </ProgressLegendItem>
+          </ProgressLegend>
+        </ProgressVertical>
+      </div>
+
+      <div
+        style={{
+          height: 200,
+          paddingInline: 20,
+        }}>
+        <ProgressVertical>
+          <ProgressBar percentage={30} color={args.color} />
+        </ProgressVertical>
+      </div>
+    </div>
+  );
+};
+Vertical.args = {
+  percentage: 30,
+  color: 'blue',
+};
+
+export const Horizontal: StoryObj = (args: Args) => {
+  return (
+    <div>
+      <div
+        style={{
+          paddingBlock: 20,
+        }}>
+        <Progress>
+          <ProgressLegend>
+            <ProgressLegendItem percentage={80}> 80% </ProgressLegendItem>
+          </ProgressLegend>
+          <ProgressBar percentage={args.percentage} color={args.color} />
+        </Progress>
+      </div>
+
+      <div
+        style={{
+          paddingBlock: 20,
+        }}>
+        <Progress>
+          <ProgressBar percentage={60} color={args.color} />
+          <ProgressLegend>
+            <ProgressLegendItem percentage={60}> 60% </ProgressLegendItem>
+          </ProgressLegend>
+        </Progress>
+      </div>
+
+      <div
+        style={{
+          paddingBlock: 20,
+        }}>
+        <Progress>
+          <ProgressBar percentage={args.percentage} color={args.color} />
+        </Progress>
+      </div>
+
+      <div
+        style={{
+          paddingBlock: 20,
+        }}>
+        <Progress>
+          <ProgressBar percentage={45} color={args.color} />
+          <ProgressLegend>
+            <ProgressLegendItem position="start" percentage={0}>
+              {' '}
+              0%{' '}
+            </ProgressLegendItem>
+            <ProgressLegendItem position="current" percentage={45}>
+              {' '}
+              45%{' '}
+            </ProgressLegendItem>
+            <ProgressLegendItem position="end" percentage={100}>
+              {' '}
+              100%{' '}
+            </ProgressLegendItem>
+          </ProgressLegend>
+        </Progress>
+      </div>
+    </div>
+  );
+};
+Horizontal.args = {
+  percentage: 80,
+  color: 'blue',
+};

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,7 @@
+import { ProgressProps } from './types';
+
+const Progress = ({ children }: ProgressProps) => {
+  return <div>{children}</div>;
+};
+
+export default Progress;

package/src/components/Progress/index.ts

@@ -0,0 +1 @@
+export { default } from './Progress';

package/src/components/Progress/types.ts

@@ -0,0 +1,5 @@
+export interface ProgressProps {
+  children:
+    | React.ReactElement<React.PropsWithChildren<{ vertical?: boolean }>>
+    | React.ReactElement<React.PropsWithChildren<{ vertical?: boolean }>>[];
+}

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,68 @@
+import {
+  pink,
+  yellow,
+  green,
+  turquoise,
+  purple,
+  blue,
+  blueLight,
+  yellowWarm,
+} from '@styles/global';
+
+import { ProgressBarProps } from './types';
+import { wrapper, bar } from './styles';
+
+const mapColors: MainColors = {
+  pink,
+  yellow,
+  green,
+  turquoise,
+  purple,
+  blue,
+  blueLight,
+  yellowWarm,
+};
+
+export const ProgressBar = ({
+  percentage,
+  color = 'green',
+  vertical = false,
+  bgColor = 'rgba(238, 241, 247, 1)',
+  size = 12,
+}: ProgressBarProps) => {
+  const mapBarWrapper = {
+    horizontal: {
+      height: size,
+      width: '100%',
+    },
+    vertical: {
+      height: '100%',
+      width: size,
+    },
+  };
+  const mapBarContainer = {
+    horizontal: {
+      width: `${percentage}%`,
+      height: size,
+    },
+    vertical: {
+      width: size,
+      height: `${percentage}%`,
+    },
+  };
+
+  return (
+    <div
+      css={[wrapper, { backgroundColor: bgColor }]}
+      style={{
+        ...mapBarWrapper[vertical ? 'vertical' : 'horizontal'],
+      }}>
+      <span
+        role="progressbar"
+        css={[bar, mapColors[color]]}
+        style={mapBarContainer[vertical ? 'vertical' : 'horizontal']}></span>
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/components/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { default } from './ProgressBar';

package/src/components/ProgressBar/styles.ts

@@ -0,0 +1,15 @@
+import { css, Theme } from '@emotion/react';
+
+export const wrapper = (theme: Theme) => css`
+  position: relative;
+  background-color: ${theme.colors.greyLighter};
+  border-radius: 12px;
+  box-shadow: inset 0 -1px 1px ${theme.colors.white30};
+`;
+
+export const bar = () => css`
+  position: absolute;
+  display: block;
+  bottom: 0;
+  border-radius: 12px;
+`;

package/src/components/ProgressBar/types.ts

@@ -0,0 +1,7 @@
+export interface ProgressBarProps {
+  percentage: number;
+  color?: keyof MainColors;
+  vertical?: boolean;
+  bgColor?: string;
+  size?: number;
+}

package/src/components/ProgressCircle/ProgressCircle.spec.tsx

@@ -0,0 +1,37 @@
+import { screen } from '../../../customTest';
+
+import theme from '@themes/main';
+
+import ProgressCircle from './index';
+
+describe('ProgressCircle', () => {
+  it('Render ProgressCircle', () => {
+    render(<ProgressCircle max={100} currentValue={50} />);
+
+    const ProgressBar = screen.getByRole('progressbar');
+    const svg = ProgressBar.querySelectorAll(
+      'svg',
+    )[0] as unknown as HTMLElement;
+
+    const [colorInit, colorEnd] = svg.querySelectorAll('stop');
+
+    expect(colorInit).toHaveAttribute('stop-color', theme.colors.green);
+    expect(colorEnd).toHaveAttribute('stop-color', theme.colors.greenLighter);
+    expect(svg).toHaveAttribute('viewBox', '0 0 160 160');
+  });
+
+  it('Render ProgressCircle smaller', () => {
+    render(<ProgressCircle max={100} currentValue={50} size={100} />);
+
+    const ProgressBar = screen.getByRole('progressbar');
+    const svg = ProgressBar.querySelectorAll(
+      'svg',
+    )[0] as unknown as HTMLElement;
+
+    const [colorInit, colorEnd] = svg.querySelectorAll('stop');
+
+    expect(colorInit).toHaveAttribute('stop-color', theme.colors.green);
+    expect(colorEnd).toHaveAttribute('stop-color', theme.colors.greenLighter);
+    expect(svg).toHaveAttribute('viewBox', '0 0 100 100');
+  });
+});