trepur_components 2.3.8 → 2.3.10

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,75 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Card } from '.';
-
-const meta = {
-  title: 'Components/Card',
-  component: Card,
-  argTypes: {
-    ...idAndClassName,
-    imageProps: {
-      description: '',
-      table: {},
-    },
-    videoProps: {
-      description: '',
-      table: {},
-    },
-    title: {
-      description: 'The title to display on the component',
-      table: {},
-    },
-    subTitle: {
-      description: 'The subtitle to display on the component',
-      table: {},
-    },
-    description: {
-      description: 'The description to display on the component',
-      table: {},
-    },
-    href: {
-      description:
-        'The link to send the user to when clicking on the component',
-      table: {},
-    },
-    target: {
-      type: { name: 'string', required: false },
-      options: ['_blank', '_self'],
-      description: '',
-      table: {
-        type: { summary: '_blank' },
-        defaultValue: { summary: '_blank' },
-      },
-      defaultValue: '_blank',
-      control: { type: 'radio' },
-    },
-    buttonProps: {
-      description: '',
-      table: {},
-    }
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-    },
-    title: 'This is a title',
-    subTitle: 'This is a subtitle',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium.',
-    href: '/',
-    buttonProps: {
-      children: 'Button Text',
-      disabled: false,
-      hoverText: 'buttonHoverText',
-      href: '/',
-      rounded: true,
-    }
-  }
-} satisfies Meta<typeof Card>;
-
-export default meta;
-
-type Story = StoryObj<typeof Card>;
-
-export const Default: Story = {};

package/src/components/Card/index.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-
-import { Button, type Props as buttonProps } from '@components/Button';
-import { type Props as imageProps } from '@components/Image';
-import { Video, type Props as videoProps } from '@components/Video';
-
-interface AnchorAttributes
-  extends Partial<
-    Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
-  > {}
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  imageProps?: imageProps;
-  videoProps?: videoProps;
-  subTitle?: string;
-  description?: string;
-  href?: string;
-  target?: string;
-  buttonProps?: buttonProps;
-}
-
-export const Card = ({
-  id,
-  className,
-  imageProps,
-  videoProps,
-  title,
-  subTitle,
-  description,
-  href,
-  target,
-  buttonProps,
-}: Props) => {
-  let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'> = 'div';
-  let attributes: AnchorAttributes = {};
-
-  if (Boolean(href) || Boolean(target)) {
-    Tag = 'a';
-    attributes = { href, title, target };
-  }
-
-  const shouldDisplayButton =
-    buttonProps?.children !== undefined &&
-    (buttonProps.href !== undefined || buttonProps.onClick !== undefined) &&
-    Tag === 'div';
-
-  return (
-    <Tag
-      id={id}
-      className={`${className} flex max-w-96 flex-col overflow-hidden rounded-lg shadow-xl`}
-      {...attributes}
-    >
-      <div>
-        {videoProps?.mp4File !== undefined ||
-        videoProps?.webmFile !== undefined ||
-        videoProps?.ogvFile !== undefined ? (
-          <Video {...videoProps} />
-        ) : (
-          imageProps !== undefined && (
-            <img
-              className="w-full"
-              title={`${title?.replace(/\s/g, '-') ?? 'a'}-logo`}
-              alt={
-                title !== undefined
-                  ? `${title?.replace(/\s/g, '-')}-image`
-                  : 'image'
-              }
-              {...imageProps}
-            />
-          )
-        )}
-      </div>
-      <div className="p-2">
-        <div>
-          {title !== undefined && (
-            <h3 className="text-md font-regular">{title}</h3>
-          )}
-          {subTitle !== undefined && (
-            <h4 className="text-sm font-regular text-ink">{subTitle}</h4>
-          )}
-        </div>
-        <div>
-          {description !== undefined && (
-            <p className="flex-1 pb-6 text-sm font-light">{description}</p>
-          )}
-          {shouldDisplayButton && (
-            <Button {...buttonProps}>{buttonProps?.children}</Button>
-          )}
-        </div>
-      </div>
-    </Tag>
-  );
-}

package/src/components/CardWithTopImage/CardWithTopImage.stories.tsx

@@ -1,50 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { CardWithTopImage } from '.';
-
-const meta = {
-  title: 'Components/Card With Top Image',
-  component: CardWithTopImage,
-  argTypes: {
-    ...idAndClassName,
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The child elements to show in the component',
-      table: {
-        type: {
-          summary: 'Array',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    },
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image on the component',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    }
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-      roundedFull: true,
-      width: 4,
-      height: 4,
-    },
-    children: [
-      <p key="1">This is a child</p>,
-      <p key="2">This is another child</p>,
-    ]
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CardWithTopImage>;
-
-export const Default: Story = {};

package/src/components/CardWithTopImage/index.tsx

@@ -1,35 +0,0 @@
-import { Image, type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children?: any;
-  imageProps?: imageProps;
-}
-
-export const CardWithTopImage = ({
-  id,
-  className,
-  children,
-  imageProps,
-}: Props) => {
-  const src = imageProps?.src !== undefined ? imageProps.src : '';
-  const cardClassList = classNames(className, 'max-w-[500px]');
-  return (
-    <div
-      style={{
-        filter: 'drop-shadow(0 4px 8px rgb(154, 154, 154))',
-      }}
-      id={id}
-      className={cardClassList}
-    >
-      <div className="mx-auto max-w-max rounded-full bg-white p-4">
-        <Image src={src} {...imageProps} />
-      </div>
-      <div className="-mt-12 h-auto bg-white px-4 pb-16 pt-12 text-black">
-        {children}
-      </div>
-    </div>
-  );
-}