trepur_components 2.3.9 → 2.3.11

package/src/components/Calendar/Calendar.stories.tsx

@@ -1,21 +0,0 @@
-import { CalendarComponent } from './';
-import { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'V2Components/Calendar',
-  component: CalendarComponent,
-} satisfies Meta<typeof CalendarComponent>;
-
-export default meta;
-
-type Story = StoryObj<typeof CalendarComponent>;
-
-export const Default: Story = {};
-
-export const ShowDoubleView: Story = {
-  ...Default,
-  args: {
-    ...Default.args,
-    showDoubleView: true,
-  },
-};

package/src/components/Calendar/index.tsx

@@ -1,92 +0,0 @@
-import { forwardRef, HTMLAttributes, useState } from 'react';
-
-import Calendar from 'react-calendar';
-
-import './style.css';
-
-export type Detail = 'month' | 'year' | 'decade' | 'century';
-
-export interface CalendarProps {
-  onChange?: () => void;
-  useRange?: boolean;
-  minDetail?: Detail;
-  minDate?: Date;
-  maxDate?: Date;
-  showNavigation?: true;
-  disabledDates?: string[];
-  showDoubleView?: boolean;
-}
-
-interface Tile {
-  activeStartDate: Date;
-  date: Date;
-  view: string;
-}
-
-const CalendarComp = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement> & CalendarProps
->(
-  (
-    {
-      onChange,
-      useRange,
-      minDetail,
-      minDate,
-      maxDate,
-      showNavigation,
-      disabledDates,
-      showDoubleView,
-    },
-    ref,
-  ) => {
-    const [today, setToday] = useState(new Date());
-
-    const calculateDisabledDates = (
-      date: Tile,
-      disabledDates?: string[],
-    ): boolean => {
-      const formattedDate = new Intl.DateTimeFormat('en-gb', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit',
-      }).format(date?.date);
-
-      if (!disabledDates) return false;
-
-      return disabledDates.includes(formattedDate);
-    };
-
-    return (
-      <Calendar
-        ref={ref}
-        onActiveStartDateChange={({ value, activeStartDate, action }) => {
-          const toFormat = activeStartDate !== null ? activeStartDate : today;
-          if (action === 'next') {
-            setToday(new Date(toFormat));
-          }
-          if (action === 'prev') {
-            setToday(new Date(toFormat));
-          }
-        }}
-        activeStartDate={today}
-        onChange={onChange}
-        selectRange={useRange}
-        minDetail={minDetail}
-        minDate={minDate}
-        maxDate={maxDate}
-        showNavigation={showNavigation}
-        showDoubleView={showDoubleView}
-        tileDisabled={(date: Tile) => {
-          return calculateDisabledDates(date, disabledDates);
-        }}
-      />
-    );
-  },
-);
-
-CalendarComp.displayName = 'Calendar';
-
-const CalendarComponent = Object.assign(CalendarComp);
-
-export { CalendarComponent };

package/src/components/Calendar/style.css

@@ -1,233 +0,0 @@
-.react-calendar {
-  width: 410px;
-  background: #fff;
-  border: none;
-  border-radius: 25px;
-  border: 1px solid #fff;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
-  padding: 8px;
-  line-height: 1.125em;
-}
-
-.react-calendar--doubleView .react-calendar__viewContainer {
-  display: flex;
-  margin: -0.5em;
-}
-
-.react-calendar--doubleView .react-calendar__viewContainer > * {
-  width: 50%;
-  margin: 0.5em;
-}
-
-.react-calendar button:enabled:hover {
-  cursor: pointer;
-}
-
-.react-calendar__navigation {
-  display: flex;
-  height: 50px;
-  margin-bottom: 1em;
-}
-
-.react-calendar__month-view__weekdays__weekday {
-  padding: 0.5em;
-}
-
-.react-calendar__month-view__weekdays {
-  text-align: center;
-  text-transform: uppercase;
-  font-size: 0.75em;
-}
-
-.react-calendar--doubleView {
-  width: 800px;
-}
-
-.react-calendar__month-view {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-.react-calendar__tile {
-  height: 50px;
-  width: 50px;
-}
-
-.react-calendar__tile:disabled {
-  background-color: #fff;
-  color: #bebebe;
-}
-
-.react-calendar__month-view__days__day--weekend {
-  color: #000;
-}
-
-.react-calendar__month-view__days__day {
-  color: #000;
-}
-
-.react-calendar__month-view__days__day--neighboringMonth {
-  visibility: hidden;
-}
-
-.react-calendar__tile:enabled:hover,
-.react-calendar__tile:enabled:focus {
-  border-radius: 50%;
-  border: 1px solid;
-  border-color: #000;
-  background: #fff;
-  color: #000;
-}
-
-.react-calendar__tile--now {
-  background: #fff;
-  color: #000;
-}
-
-.react-calendar__tile--now:enabled:hover,
-.react-calendar__tile--now:enabled:focus {
-  border-radius: 50%;
-  border: 1px solid;
-  border-color: #000;
-  background: #fff;
-  color: #000;
-}
-
-.react-calendar__tile--hasActive:enabled:hover,
-.react-calendar__tile--hasActive:enabled:focus {
-  background: #f8f8fa;
-}
-
-.react-calendar__tile--active {
-  background: #000;
-  border-radius: 50%;
-  color: #fff;
-}
-
-.react-calendar__tile--rangeEnd.react-calendar__tile--active:enabled:hover,
-.react-calendar__tile--rangeEnd.react-calendar__tile--active:enabled:focus,
-.react-calendar__tile--rangeEnd:enabled {
-  border-top-right-radius: 50%;
-  border-bottom-right-radius: 50%;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border: 1px solid;
-  border-color: #000;
-  background: #000;
-  color: #fff;
-}
-
-.react-calendar__tile--rangeStart.react-calendar__tile--active:enabled:hover,
-.react-calendar__tile--rangeStart.react-calendar__tile--active:enabled:focus,
-.react-calendar__tile--rangeStart:enabled {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 50%;
-  border-bottom-left-radius: 50%;
-  border: 1px solid;
-  border-color: #000;
-  background: #000;
-  color: #fff;
-}
-
-.react-calendar--selectRange .react-calendar__tile--hover {
-  background-color: #dfdfe1;
-}
-
-.react-calendar--selectRange .react-calendar__tile--rangeStart {
-  background-color: #000000;
-  color: #fff;
-}
-
-.react-calendar__tile--range {
-  background: #dfdfe1;
-  color: #000;
-  border-radius: 0;
-}
-
-.react-calendar__tile--rangeStart {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 50%;
-  border-bottom-left-radius: 50%;
-  background: #000;
-  color: #fff;
-}
-
-.react-calendar__tile--rangeEnd {
-  border-top-right-radius: 50%;
-  border-bottom-right-radius: 50%;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  background: #000;
-  color: #fff;
-}
-
-.react-calendar__navigation__prev-button {
-  background: #fff;
-}
-
-.react-calendar__navigation__next-button {
-  background: #fff;
-}
-
-.react-calendar__navigation__prev2-button {
-  display: none;
-}
-
-.react-calendar__navigation__next2-button {
-  display: none;
-}
-
-.react-calendar__navigation__label__labelText {
-  color: #000000;
-}
-
-.react-calendar__navigation {
-  height: 50px;
-}
-
-.react-calendar__navigation button {
-  color: #000;
-  width: 50px;
-  background: none;
-  font-size: 16px;
-}
-.react-calendar__navigation button:enabled:hover,
-.react-calendar__navigation button:enabled:focus {
-  background-color: #bebebe;
-  color: black;
-  border-radius: 50%;
-}
-
-.react-calendar__navigation button:disabled {
-  background: #fff;
-  color: #bebebe;
-}
-
-abbr[title] {
-  text-decoration: none;
-}
-
-.react-calendar__navigation__label__divider {
-  display: none;
-}
-
-.react-calendar__navigation__label {
-  padding-top: 20px;
-  display: flex;
-  flex-grow: 1;
-  justify-content: space-between;
-}
-
-.react-calendar__navigation__label__labelText--from {
-  margin-left: 80px;
-}
-
-.react-calendar__navigation__label__labelText--to {
-  margin-right: 100px;
-}
-
-button.react-calendar__tile.react-calendar__tile--active.react-calendar__tile--range.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd.react-calendar__tile--rangeBothEnds.react-calendar__tile--hover.react-calendar__tile--hoverStart.react-calendar__tile--hoverEnd.react-calendar__tile--hoverBothEnds.react-calendar__month-view__days__day.react-calendar__month-view__days__day--weekend {
-  background-color: #000;
-}

package/src/components/Card/Card.stories.tsx

@@ -1,14 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Card } from '.';
-
-const meta = {
-  title: 'V2Components/Card',
-  component: Card,
-  args: {},
-} satisfies Meta<typeof Card>;
-export default meta;
-
-type Story = StoryObj<typeof Card>;
-
-export const Default: Story = {};

package/src/components/Card/index.tsx

@@ -1,39 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react';
-
-import clsx from 'clsx';
-
-interface AnchorAttributes
-  extends Partial<Pick<JSX.IntrinsicElements['a'], 'href' | 'target'>> {}
-
-const CardComponent = forwardRef<
-  HTMLAnchorElement,
-  HTMLAttributes<HTMLDivElement> & { href: string; target: string }
->(({ className, href, target, children, ...props }, ref) => {
-  let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'> = 'div';
-  let attributes: AnchorAttributes = {};
-
-  if (Boolean(href) || Boolean(target)) {
-    Tag = 'a';
-    attributes = { href, target, ...props };
-  }
-  return (
-    <Tag
-      className={clsx(
-        'grid grid-cols-1 rounded-xl bg-white p-4 drop-shadow',
-        {
-          'hover:cursor-pointer': href,
-        },
-        className,
-      )}
-      {...attributes}
-    >
-      {children}
-    </Tag>
-  );
-});
-
-CardComponent.displayName = 'Card';
-
-const Card = Object.assign(CardComponent);
-
-export { Card };

package/src/components/Carousel/Carousel.stories.tsx

@@ -1,44 +0,0 @@
-import { ImageCard } from '@components/ImageCard';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Carousel } from '.';
-
-const meta = {
-  title: 'V2Components/Carousel',
-  component: Carousel,
-  args: {
-    perView: 4,
-    spacing: 16,
-    loop: true,
-    children: [
-      <Carousel.Content>
-        <Carousel.Arrow />
-        <Carousel.Slides>
-          {[...Array(5)].map((_, i) => (
-            <ImageCard className="keen-slider__slide">
-              <ImageCard.Image src={`https://picsum.photos/10${i}/100`} />
-              <ImageCard.Content>
-                <ImageCard.Title>This is a title</ImageCard.Title>
-                <ImageCard.Subtitle>This is a subtitle</ImageCard.Subtitle>
-                <ImageCard.Text>
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                  Eaque, est iusto. Veniam ullam impedit expedita perferendis
-                  cumque culpa saepe magni velit quia nemo suscipit, reiciendis
-                  ad libero, voluptate incidunt fugiat?
-                </ImageCard.Text>
-              </ImageCard.Content>
-            </ImageCard>
-          ))}
-        </Carousel.Slides>
-        <Carousel.Arrow rightArrow />
-      </Carousel.Content>,
-      <Carousel.Dots />,
-    ],
-  },
-} satisfies Meta<typeof Carousel>;
-
-export default meta;
-
-type Story = StoryObj<typeof Carousel>;
-
-export const Default: Story = {};