@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/ui/Slider.css

@@ -1,192 +0,0 @@
-.memori--slider-container {
-  position: relative;
-  width: 100%;
-  max-width: 100%;
-  padding: 12px 12px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  touch-action: none;
-  user-select: none;
-
-}
-
-.memori--slider-disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.memori--slider-header {
-  position: absolute;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-  /* max-height: 10px; */
-}
-
-.memori--slider-label {
-  max-width: 70%;
-  font-size: 1.2rem;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-.memori--slider-value {
-  min-width: 40px;
-  max-width: 30%;
-  font-size: 1rem;
-  font-weight: 500;
-  text-align: right;
-}
-
-.memori--slider-track-container {
-  position: relative;
-  display: flex;
-  height: 96px;
-  max-height: 96px;
-  align-items: center;
-  margin-top: 8px;
-  cursor: pointer;
-  touch-action: none;
-}
-
-.memori--slider-track {
-  position: absolute;
-  overflow: hidden;
-  width: 100%;
-  height: 16px;
-  max-height: 16px;
-  border-radius: 8px;
-  background-color: #e5e5e5;
-}
-
-.memori--slider-track-fill {
-  position: absolute;
-  width: var(--percentage);
-  height: 100%;
-  border-radius: 8px;
-  background-color: var(--memori-primary, #2563eb);
-  transition: width 0.15s ease;
-}
-
-.memori--slider-marks {
-  position: absolute;
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  padding: 0 8px;
-  padding-top: 24px;
-  pointer-events: none;
-}
-
-.memori--slider-mark {
-  display: flex;
-  min-width: 40px;
-  flex-direction: column;
-  align-items: center;
-}
-
-.memori--slider-mark-line {
-  width: 3px;
-  height: 8px;
-  max-height: 8px;
-  margin-bottom: 8px;
-  background-color: #9ca3af;
-}
-
-.memori--slider-mark-value {
-  color: #666;
-  font-size: 1rem;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.memori--slider-thumb {
-  position: absolute;
-  z-index: 1;
-  left: var(--percentage);
-  width: 40px;
-  max-width: 40px;
-  height: 40px;
-  max-height: 40px;
-  border: 4px solid var(--memori-primary, #2563eb);
-  border-radius: 50%;
-  background-color: white;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
-  touch-action: none;
-  transform: translateX(-50%);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.memori--slider-thumb:hover,
-.memori--slider-thumb:active {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
-  transform: translateX(-50%) scale(1.1);
-}
-
-/* Portrait/Totem specific styles */
-@media screen and (max-aspect-ratio: 3/4) {
-  .memori--slider-container {
-    padding: 16px;
-  }
-
-  .memori--slider-header {
-    margin-bottom: 16px;
-  }
-
-  .memori--slider-label {
-    font-size: 1.3rem;
-  }
-
-  .memori--slider-value {
-    min-width: 50px;
-    font-size: 1.1rem;
-  }
-
-  .memori--slider-track-container {
-    height: 80px;
-    margin-top: 8px;
-  }
-
-  .memori--slider-track {
-    height: 16px;
-    border-radius: 10px;
-  }
-
-  .memori--slider-thumb {
-    width: 48px;
-    height: 48px;
-    border-width: 4px;
-  }
-
-  .memori--slider-mark-value {
-    margin-top: 4px;
-    font-size: 1.1rem;
-  }
-}
-
-/* Very tall displays */
-@media screen and (min-height: 1200px) {
-  .memori--slider-container {
-    padding: 24px 20px;
-  }
-
-  .memori--slider-header {
-    margin-bottom: 24px;
-  }
-
-  .memori--slider-label {
-    font-size: 1.4rem;
-  }
-
-  .memori--slider-track-container {
-    height: 96px;
-    margin-top: 12px;
-  }
-
-  .memori--slider-thumb {
-    width: 56px;
-    height: 56px;
-    border-width: 5px;
-  }
-}

package/src/components/ui/Slider.stories.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Slider, { Props } from './Slider';
-
-import './Slider.css';
-
-const meta: Meta = {
-  title: 'UI/Slider',
-  component: Slider,
-  argTypes: {
-    min: {
-      control: {
-        type: 'number',
-      },
-    },
-    max: {
-      control: {
-        type: 'number',
-      },
-    },
-    step: {
-      control: {
-        type: 'number',
-      },
-    },
-  },        
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <Slider {...args} />
-);
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  min: 0,
-  max: 100,
-  step: 1,
-  defaultValue: 50,
-};
-
-export const Spinning = Template.bind({});
-Spinning.args = {
-  min: 0,
-  max: 100,
-  step: 1,
-  defaultValue: 50,
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  min: 0,
-  max: 100,
-  step: 1,
-  defaultValue: 50,
-  primary: true,
-};

package/src/components/ui/Slider.tsx

@@ -1,142 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Listbox } from '@headlessui/react';
-import cx from 'classnames';
-export interface Props {
-  min?: number;
-  max?: number;
-  step?: number;
-  defaultValue?: number;
-  label?: string | React.ReactNode;
-  onChange?: (value: number) => void;
-  disabled?: boolean;
-}
-
-const CustomSlider = ({
-  min = 0,
-  max = 100,
-  step = 1,
-  defaultValue = 50,
-  label,
-  onChange,
-  disabled = false,
-}: Props) => {
-  const [value, setValue] = useState(defaultValue);
-  const [isDragging, setIsDragging] = useState(false);
-  const sliderRef = useRef<HTMLDivElement>(null);
-  const percentage = ((value - min) / (max - min)) * 100;
-
-  const marks = [];
-  for (let i = min; i <= max; i += (max - min) / 4) {
-    marks.push(Math.round(i));
-  }
-
-  const calculateNewValue = (clientX: number) => {
-    if (!sliderRef.current) return value;
-
-    const bounds = sliderRef.current.getBoundingClientRect();
-    const position = clientX - bounds.left;
-    const sliderWidth = bounds.width;
-    const percentage = Math.max(0, Math.min(100, (position / sliderWidth) * 100));
-    const newValue = Math.round((percentage / 100) * (max - min) + min);
-    const steppedValue = Math.round(newValue / step) * step;
-    return Math.min(Math.max(steppedValue, min), max);
-  };
-
-  const handleInteractionStart = (clientX: number) => {
-    if (disabled) return;
-    setIsDragging(true);
-    const newValue = calculateNewValue(clientX);
-    setValue(newValue);
-    onChange?.(newValue);
-  };
-
-  const handleInteractionMove = (clientX: number) => {
-    if (!isDragging || disabled) return;
-    const newValue = calculateNewValue(clientX);
-    setValue(newValue);
-    onChange?.(newValue);
-  };
-
-  const handleInteractionEnd = () => {
-    setIsDragging(false);
-  };
-
-  useEffect(() => {
-    const handleTouchMove = (e: TouchEvent) => {
-      if (!isDragging) return;
-      e.preventDefault(); // Prevent scrolling while dragging
-      handleInteractionMove(e.touches[0].clientX);
-    };
-
-    const handleMouseMove = (e: MouseEvent) => {
-      handleInteractionMove(e.clientX);
-    };
-
-    const handleEndInteraction = () => {
-      handleInteractionEnd();
-    };
-
-    if (isDragging) {
-      window.addEventListener('touchmove', handleTouchMove, { passive: false });
-      window.addEventListener('mousemove', handleMouseMove);
-      window.addEventListener('touchend', handleEndInteraction);
-      window.addEventListener('mouseup', handleEndInteraction);
-    }
-
-    return () => {
-      window.removeEventListener('touchmove', handleTouchMove);
-      window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('touchend', handleEndInteraction);
-      window.removeEventListener('mouseup', handleEndInteraction);
-    };
-  }, [isDragging]);
-
-  useEffect(() => {
-    setValue(defaultValue);
-  }, [defaultValue]);
-
-  return (
-    <div 
-      className={cx('memori--slider-container', { 'memori--slider-disabled': disabled })}
-      style={{ '--percentage': `${percentage}%` } as React.CSSProperties}
-    >
-      <div className="memori--slider-header">
-        {label && <div className="memori--slider-label">{label}</div>}
-        <div className="memori--slider-value">{value}</div>
-      </div>
-      
-      <div
-        ref={sliderRef}
-        className="memori--slider-track-container"
-        onMouseDown={(e) => handleInteractionStart(e.clientX)}
-        onTouchStart={(e) => handleInteractionStart(e.touches[0].clientX)}
-      >
-        <div className="memori--slider-track">
-          <div className="memori--slider-track-fill" />
-        </div>
-
-        <div className="memori--slider-marks">
-          {marks.map((mark) => (
-            <div key={mark} className="memori--slider-mark">
-              <div className="memori--slider-mark-line" />
-              <span className="memori--slider-mark-value">{mark}</span>
-            </div>
-          ))}
-        </div>
-
-        <Listbox value={value} onChange={setValue} disabled={disabled}>
-          <div 
-            className="memori--slider-thumb"
-            role="slider"
-            aria-valuemin={min}
-            aria-valuemax={max}
-            aria-valuenow={value}
-            tabIndex={disabled ? -1 : 0}
-          />
-        </Listbox>
-      </div>
-    </div>
-  );
-};
-
-export default CustomSlider;

package/src/components/ui/Spin.css

@@ -1,31 +0,0 @@
-.memori-spin {
-    position: relative;
-}
-
-.memori-spin--spinner {
-    position: absolute;
-    z-index: 100;
-    top: 0;
-    left: 0;
-    display: none;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    background: rgba(255, 255, 255, 0.8);
-}
-
-.memori-spin--spinning .memori-spin--spinner {
-    display: flex;
-}
-
-.memori-spin--spinner svg {
-    width: 30%;
-    max-width: 5rem;
-    height: 30%;
-    max-height: 5rem;
-}
-
-.memori-spin--primary svg {
-    fill: var(--memori-primary);
-}

package/src/components/ui/Spin.stories.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import Spin, { Props } from './Spin';
-
-import './Spin.css';
-
-const meta: Meta = {
-  title: 'UI/Spin',
-  component: Spin,
-  argTypes: {
-    spinning: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    primary: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <Spin {...args}>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    <h2>Suspendisse a sodales nulla, sed semper nisi.</h2>
-    <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
-    <ul>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-    </ul>
-    <p>Nulla at urna diam.</p>
-  </Spin>
-);
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  spinning: false,
-};
-
-export const Spinning = Template.bind({});
-Spinning.args = {
-  spinning: true,
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  spinning: true,
-  primary: true,
-};

package/src/components/ui/Spin.test.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Spin from './Spin';
-
-const content = (
-  <>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    <h2>Suspendisse a sodales nulla, sed semper nisi.</h2>
-    <p>Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.</p>
-    <ul>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-      <li>Quisque in ultrices lectus.</li>
-    </ul>
-    <p>Nulla at urna diam.</p>
-  </>
-);
-
-it('renders Spin unchanged', () => {
-  const { container } = render(<Spin>{content}</Spin>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Spin spinning unchanged', () => {
-  const { container } = render(<Spin spinning>{content}</Spin>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Spin with custom className unchanged', () => {
-  const { container } = render(<Spin className="lorem-ipsum">{content}</Spin>);
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Spin spinning primary unchanged', () => {
-  const { container } = render(
-    <Spin spinning primary>
-      {content}
-    </Spin>
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/ui/Spin.tsx

@@ -1,31 +0,0 @@
-import React, { FC } from 'react';
-import cx from 'classnames';
-import Loading from '../icons/Loading';
-
-export interface Props {
-  spinning?: boolean;
-  className?: string;
-  primary?: boolean;
-  children?: JSX.Element | React.ReactNode;
-}
-
-const Spin: FC<Props> = ({
-  spinning = false,
-  primary = false,
-  className,
-  children,
-}: Props) => (
-  <div
-    className={cx('memori-spin', className, {
-      'memori-spin--spinning': spinning,
-      'memori-spin--primary': primary,
-    })}
-  >
-    {children}
-    <div className="memori-spin--spinner">
-      <Loading loading />
-    </div>
-  </div>
-);
-
-export default Spin;

package/src/components/ui/Table.css

@@ -1,132 +0,0 @@
-table.memori--table {
-    --memori-table-spacing: 1rem;
-    --memori-table-border-color: rgb(237, 240, 243);
-    --memori-table-bg-color: rgb(246, 248, 249);
-
-    margin: 1rem 0;
-    font-size: 1rem;
-}
-
-table.memori--table.memori--table--compact {
-    --memori-table-spacing: 0.5rem;
-    font-size: 0.875rem;
-}
-
-@media (max-width: 767px) {
-    table.memori--table {
-        --memori-table-spacing: 0.5rem;
-
-        font-size: 0.875rem;
-    }
-
-    table.memori--table.memori--table--compact {
-        font-size: 0.75rem;
-    }
-}
-
-:where(table) {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    text-indent: 0;
-}
-
-.memori--responsive-table-wrapper {
-    width: 100%;
-    max-width: 800px;
-    overflow-x: auto;
-}
-
-.memori--responsive-table-wrapper > br {
-    display: none;
-}
-
-table.memori--table th,
-table.memori--table td {
-    padding: calc(var(--memori-table-spacing) / 2) var(--memori-table-spacing);
-    border-bottom: 1px solid var(--memori-table-border-color);
-    text-align: left;
-    text-align: start;
-}
-
-table.memori--table thead th {
-    padding: var(--memori-table-spacing) var(--memori-table-spacing);
-    background-color: var(--memori-table-bg-color);
-}
-
-table.memori--table tfoot th,
-table.memori--table tfoot td {
-    border-top: 1px solid var(--memori-table-border-color);
-    border-bottom: 0;
-}
-
-table.memori--table[role='grid'] tbody tr:nth-child(odd) {
-    background-color: var(--memori-table-bg-color);
-}
-
-.memori--table--pagination {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-bottom: 1rem;
-}
-
-.memori--table--pagination--pages {
-    display: flex;
-    align-items: center;
-    margin-right: 1rem;
-}
-
-.memori--table--pagination--pages--current {
-    padding: 0 0.5rem;
-    font-variant-numeric: tabular-nums;
-}
-
-.memori--table--pagination--pages button.memori-button.memori-button--circle {
-    padding: 0.25rem;
-}
-
-.memori--table--pagination--pages button.memori-button[disabled] {
-    opacity: 0.3;
-}
-
-.memori--table--pagination ul.memori-select--options {
-    right: 0;
-}
-
-@media (max-width: 600px) {
-    .memori--table--pagination--pages {
-        margin-right: auto;
-    }
-
-    .memori--table--pagination--pages--current {
-        padding: 0 0.25rem;
-    }
-
-    .memori--table--pagination .memori-select button.memori-select--button {
-        padding-top: 0.25rem;
-        padding-right: 2rem;
-        padding-bottom: 0.25rem;
-        padding-left: 0.5rem;
-        font-size: 0.875rem;
-    }
-
-    .memori--table--pagination .memori-select ul.memori-select--options {
-        min-width: fit-content;
-    }
-}
-
-table.memori--table th.memori--table--column-centered,
-table.memori--table td.memori--table--column-centered {
-    text-align: center;
-}
-
-table.memori--table th.memori--table--column-right,
-table.memori--table td.memori--table--column-right {
-    text-align: right;
-    text-align: end;
-}
-
-.memori--table--date {
-    white-space: nowrap;
-}