trepur_components 2.3.2 → 2.3.4

package/archive/Button/style.module.css

@@ -0,0 +1,76 @@
+.classList {
+  @apply transform border-2 text-sm duration-500;
+  @apply inline-block text-center;
+}
+
+.classList:focus {
+  @apply outline;
+}
+
+.loading {
+  @apply absolute left-2/4 top-1/4 -ml-2;
+}
+
+.social {
+  @apply px-1 py-1;
+}
+
+.icon {
+  @apply px-3;
+}
+
+.default {
+  @apply px-8;
+}
+
+.padding {
+  @apply py-3;
+}
+
+.primary {
+  @apply border-secondary bg-primary text-secondary outline-primary;
+}
+
+.primaryNotDisabled:hover {
+  @apply border-primary bg-secondary text-primary;
+}
+
+.primaryNotDisabled:focus:hover {
+  @apply border-primary bg-secondary text-primary;
+}
+
+.secondary {
+  @apply border-primary bg-secondary text-primary outline-secondary;
+}
+
+.secondaryNotDisabled:hover {
+  @apply border-secondary bg-primary text-secondary;
+}
+
+.secondaryNotDisabled:focus:hover {
+  @apply border-primary bg-primary text-secondary;
+}
+
+.tertiary {
+  @apply border-secondary bg-secondary text-secondary outline-tertiary;
+}
+
+.tertiaryNotDisabled:hover {
+  @apply border-tertiary bg-secondary text-tertiary;
+}
+
+.tertiaryNotDisabled:focus:hover {
+  @apply border-secondary bg-secondary text-tertiary;
+}
+
+.disabled {
+  @apply opacity-50;
+}
+
+.rounded {
+  @apply rounded-lg;
+}
+
+.notRounded {
+  @apply rounded-none;
+}

package/archive/Calendar/Calendar.stories.tsx

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Calendar from '.';
+
+const meta = {
+  title: 'Components/Calendar',
+  component: Calendar,
+  argTypes: {
+    ...idAndClassName,
+
+    useRange: {
+      type: { name: 'boolean', required: false },
+      description: 'Toggles the ability to select a range of dates',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+      defaultValue: 'false',
+    },
+    showDoubleView: {
+      type: { name: 'boolean', required: false },
+      description: 'Toggles the 2 month mode',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+      defaultValue: 'true',
+    },
+    showNavigation: {
+      type: { name: 'boolean', required: false },
+      description: 'Toggles the navigation at the top of the calendar',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+      defaultValue: 'true',
+    },
+    minDetail: {
+      type: { name: 'string', required: false },
+      description: 'The detail in whuch you with the calendar to show',
+      table: {
+        defaultValue: { summary: 'month' },
+      },
+      defaultValue: 'month',
+    },
+    minDate: {
+      type: { name: 'date', required: false },
+      description: 'The minimum date to show as available on the calendar',
+      table: {
+        defaultValue: { summary: new Date() },
+      },
+      defaultValue: new Date(),
+    },
+    maxDate: {
+      type: { name: 'date', required: false },
+      description: 'The maximum date to show as available on the calendar',
+      table: {
+        defaultValue: {
+          summary: new Date(
+            new Date().setFullYear(new Date().getFullYear() + 1),
+          ),
+        },
+      },
+      defaultValue: new Date(
+        new Date().setFullYear(new Date().getFullYear() + 1),
+      ),
+    },
+    disabledDates: {
+      type: { name: 'array', required: false },
+      description: 'An array of dates as strings to grey out on the component',
+      table: {
+        defaultValue: { summary: [] },
+      },
+      defaultValue: [],
+    },
+  },
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Calendar/index.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+
+import classNames from 'classnames';
+import Calendar from 'react-calendar';
+
+import './style.css';
+
+export type Detail = 'month' | 'year' | 'decade' | 'century';
+export interface Props {
+  id?: string;
+  className?: string;
+
+  onChange?: () => void;
+  useRange?: boolean;
+  minDetail?: Detail;
+  minDate?: Date;
+  maxDate?: Date;
+  showNavigation?: true;
+  disabledDates?: string[];
+  showDoubleView?: boolean;
+}
+
+const CalendarComponent: React.FC<Props> = ({
+  id = 'sdfghj',
+  className,
+  onChange,
+
+  useRange = false,
+  minDetail = 'month',
+  minDate = new Date(),
+  maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
+  showNavigation = true,
+  disabledDates = [],
+  showDoubleView = true,
+}: Props): JSX.Element => {
+  const [today, setToday] = useState(new Date());
+
+  const calculateDisabledDates = (date: any, disabledDates: any): boolean => {
+    const formattedDate = new Intl.DateTimeFormat('en-gb', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    }).format(date?.date);
+
+    return disabledDates.includes(formattedDate);
+  };
+
+  return (
+    <div id={id} className={classNames(className, 'theme-local')}>
+      <Calendar
+        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: any) =>
+          calculateDisabledDates(date, disabledDates)
+        }
+      />
+    </div>
+  );
+};
+
+export default CalendarComponent;

package/archive/Calendar/style.css

@@ -0,0 +1,233 @@
+.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/archive/Card/Card.stories.tsx

@@ -0,0 +1,75 @@
+import { Meta, 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,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Card/index.tsx

@@ -0,0 +1,102 @@
+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';
+import classNames from 'classnames';
+
+
+
+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;
+}
+
+const Card: React.FC<Props> = ({
+  id,
+  className,
+  imageProps,
+  videoProps,
+  title,
+  subTitle,
+  description,
+  href,
+  target,
+  buttonProps,
+}: Props): JSX.Element => {
+  const cardTitleClasses = classNames(style.title);
+  const cardSubTitleClassList = classNames(style.subtitle);
+  const cardDescriptionClassList = classNames(style.description);
+  const classList = classNames(className, style.classList, 'theme-local');
+  const imageClassList = classNames(style.imageClassList);
+  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={classList} {...attributes}>
+      <div>
+        {videoProps?.mp4File !== undefined ||
+        videoProps?.webmFile !== undefined ||
+        videoProps?.ogvFile !== undefined ? (
+          <Video {...videoProps} />
+        ) : (
+          imageProps !== undefined && (
+            <img
+              className={imageClassList}
+              title={`${title?.replace(/\s/g, '-') ?? 'a'}-logo`}
+              alt={
+                title !== undefined
+                  ? `${title?.replace(/\s/g, '-')}-image`
+                  : 'image'
+              }
+              {...imageProps}
+            />
+          )
+        )}
+      </div>
+      <div className={style.contentWrapper}>
+        <div className={style.movingContent}>
+          {title !== undefined && <h3 className={cardTitleClasses}>{title}</h3>}
+          {subTitle !== undefined && (
+            <h4 className={cardSubTitleClassList}>{subTitle}</h4>
+          )}
+        </div>
+        <div className={style.staticContent}>
+          {description !== undefined && (
+            <p className={cardDescriptionClassList}>{description}</p>
+          )}
+          {shouldDisplayButton && (
+            <Button className={style.buttonClassList} {...buttonProps}>
+              {buttonProps?.children}
+            </Button>
+          )}
+        </div>
+      </div>
+    </Tag>
+  );
+};
+
+export default Card;

package/archive/Card/style.module.css

@@ -0,0 +1,75 @@
+.classList {
+  @apply flex flex-col;
+  @apply rounded-lg;
+  @apply shadow-xl;
+}
+
+a .classList:hover {
+  @apply cursor-pointer;
+}
+
+.classList:hover .movingContent {
+  @apply -mt-8;
+  @apply transition-all duration-300;
+}
+
+.classList:hover .staticContent {
+  @apply mt-8;
+  @apply transition-all duration-300;
+}
+
+.classList:focus {
+  @apply border-2 border-primary;
+  border-radius: 10px;
+}
+
+.classList:focus .movingContent {
+  @apply -mt-8;
+  @apply transition-all duration-300;
+}
+
+.classList:focus .staticContent {
+  @apply mt-8;
+  @apply transition-all duration-300;
+}
+
+.imageClassList {
+  @apply h-full w-full object-cover;
+  @apply h-64 overflow-hidden object-cover;
+  @apply rounded-t-lg;
+  height: 256px;
+}
+
+.contentWrapper {
+  @apply flex flex-col items-stretch justify-between;
+  height: calc(100% - 256px);
+}
+
+.movingContent {
+  @apply bg-white;
+  @apply mt-0 px-6 pt-6;
+  @apply rounded-b-lg;
+  @apply transition-all duration-300;
+}
+
+.staticContent {
+  @apply h-full p-6;
+  @apply transition-all duration-300;
+  @apply flex flex-col items-stretch justify-between;
+}
+
+.title {
+  @apply text-md font-regular;
+}
+
+.subtitle {
+  @apply text-sm font-regular text-ink;
+}
+
+.description {
+  @apply flex-1 pb-6 text-sm font-light;
+}
+
+.buttonClassList {
+  @apply w-full;
+}