@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/Countdown/Countdown.jsx

@@ -0,0 +1,97 @@
+import classNames from 'classnames'
+import styles from './Countdown.module.css'
+
+const padZero = (num) => String(num).padStart(2, '0')
+
+export const Countdown = ({
+  i18n = { _: (text) => text },
+  show = true,
+  days = 0,
+  hours = 0,
+  minutes = 0,
+  seconds = 0,
+  ended = false,
+  loading = false,
+  theme = 'default',
+  variant = 'lg',
+  className,
+  showDays = true,
+}) => {
+  if (!show || ended) {
+    return null
+  }
+
+  const themeClass = {
+    [styles.white]: theme === 'white',
+    [styles.gray]: theme === 'gray',
+    [styles.default]: theme === 'default',
+    [styles.sm]: variant === 'sm',
+    [styles.md]: variant === 'md',
+    [styles.lg]: variant === 'lg',
+  }
+
+  if (loading) {
+    return (
+      <div className={classNames(styles.skeletonBox, themeClass, className)}>
+        <div className={styles.skeleton} />
+      </div>
+    )
+  }
+
+  return (
+    <div className={classNames(styles.clock, className)}>
+      {showDays && days > 0 && (
+        <>
+          <div
+            className={classNames(styles.column, themeClass, {
+              [styles.days]: days > 0,
+            })}
+          >
+            <p className={classNames(styles.labelBig, themeClass)}>
+              {padZero(days)}
+            </p>
+            <p className={classNames(styles.labelSmall, themeClass)}>
+              {i18n._('Days')}
+            </p>
+          </div>
+          <p className={classNames(styles.colon, themeClass)}>:</p>
+        </>
+      )}
+
+      <div className={classNames(styles.column, themeClass)}>
+        <p className={classNames(styles.labelBig, themeClass)}>
+          {padZero(hours)}
+        </p>
+        <p className={classNames(styles.labelSmall, themeClass)}>
+          {i18n._('Hours')}
+        </p>
+      </div>
+      <p className={classNames(styles.colon, themeClass)}>:</p>
+
+      <div className={classNames(styles.column, themeClass)}>
+        <p className={classNames(styles.labelBig, themeClass)}>
+          {padZero(minutes)}
+        </p>
+        <p className={classNames(styles.labelSmall, themeClass)}>
+          {i18n._('Minutes')}
+        </p>
+      </div>
+      {(days <= 0 || !showDays) && (
+        <p className={classNames(styles.colon, themeClass)}>:</p>
+      )}
+
+      {(days <= 0 || !showDays) && (
+        <div className={classNames(styles.column, themeClass)}>
+          <p className={classNames(styles.labelBig, themeClass)}>
+            {padZero(seconds)}
+          </p>
+          <p className={classNames(styles.labelSmall, themeClass)}>
+            {i18n._('Sec')}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+Countdown.displayName = 'Countdown'

package/src/components/Countdown/Countdown.module.css

@@ -0,0 +1,206 @@
+
+.clock {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.column {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+
+.column.sm {
+  height: 49px;
+}
+
+.column.md {
+  height: 60px;
+}
+
+.column.lg {
+  height: 72px;
+}
+
+.labelBig {
+  line-height: 1;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+  margin: 0;
+}
+
+.labelBig.gray {
+  color: var(--neutral-alpha-11);
+  background-color: var(--neutral-alpha-5);
+}
+
+.labelBig.white {
+  color: #737373;
+  background-color: #ffffff;
+}
+
+.labelBig.default {
+  color: var(--neutral-alpha-11);
+  background-color: transparent;
+}
+
+.labelBig.sm {
+  font-size: 24px;
+  padding: 4px;
+  width: 44px;
+  font-weight: 500;
+}
+
+.labelBig.md {
+  font-size: 40px;
+  padding: 4px 0px 2px 0;
+  width: 49px;
+}
+
+.labelBig.lg {
+  font-size: 40px;
+  padding: 6px 0;
+  width: 59px;
+}
+
+.labelSmall {
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
+.labelSmall.gray,
+.labelSmall.default {
+  color: var(--neutral-alpha-11);
+}
+
+.labelSmall.white {
+  color: #737373;
+}
+
+.labelSmall.sm {
+  font-weight: 500;
+}
+
+.labelSmall.md {
+  font-weight: 400;
+}
+
+.labelSmall.lg {
+  font-weight: 400;
+}
+
+.colon {
+  color: var(--neutral-alpha-11);
+  animation: tick 1s steps(1, end) 0s infinite;
+  margin: 0;
+  align-self: flex-start;
+}
+
+.colon.gray {
+  color: var(--neutral-alpha-11);
+}
+
+.colon.white {
+  color: #737373;
+}
+
+.colon.sm {
+  font-size: 24px;
+  line-height: 1.2;
+}
+
+.colon.md {
+  font-size: 40px;
+  line-height: 1.1;
+}
+
+.colon.lg {
+  font-size: 40px;
+  line-height: 1.1;
+}
+
+@keyframes tick {
+  from {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.skeletonBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.skeletonBox.white {
+  max-width: 162px;
+  width: 100%;
+}
+
+.skeletonBox.white .skeleton {
+  background: linear-gradient(90deg, #d5d5d5 4.69%, #a1a1a1 100%);
+  animation: skeleton_animate 1s infinite;
+}
+
+.skeleton {
+  width: 200px;
+  height: 60px;
+  background: linear-gradient(
+    90deg,
+    var(--gray-3) 25%,
+    var(--gray-4) 50%,
+    var(--gray-3) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton_animate 1.5s ease-in-out infinite;
+  border-radius: 8px;
+}
+
+.skeletonBox.lg .skeleton {
+  height: 72px;
+  width: 250px;
+}
+
+.skeletonBox.md .skeleton {
+  height: 60px;
+  width: 200px;
+}
+
+.skeletonBox.sm .skeleton {
+  height: 49px;
+  width: 150px;
+}
+
+@keyframes skeleton_animate {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}

package/src/components/Countdown/Countdown.stories.jsx

@@ -0,0 +1,108 @@
+import { Countdown } from './Countdown'
+import { Flex } from '@radix-ui/themes'
+import { useState, useEffect } from 'react'
+
+export default {
+  title: 'Components/Countdown',
+  component: Countdown,
+  tags: ['autodocs'],
+  argTypes: {
+    show: { control: 'boolean' },
+    days: { control: 'number' },
+    hours: { control: 'number' },
+    minutes: { control: 'number' },
+    seconds: { control: 'number' },
+    ended: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    theme: {
+      control: 'select',
+      options: ['default', 'white', 'gray'],
+    },
+    variant: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    showDays: { control: 'boolean' },
+  },
+}
+
+const withFlexContainer = (Story) => (
+  <Flex justify="center" align="center" style={{ padding: '40px' }}>
+    <Story />
+  </Flex>
+)
+
+export const Default = {
+  render: (args) => {
+    const [timeLeft, setTimeLeft] = useState({
+      days: args.days,
+      hours: args.hours,
+      minutes: args.minutes,
+      seconds: args.seconds,
+    })
+
+    useEffect(() => {
+      setTimeLeft({
+        days: args.days,
+        hours: args.hours,
+        minutes: args.minutes,
+        seconds: args.seconds,
+      })
+    }, [args.days, args.hours, args.minutes, args.seconds])
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setTimeLeft((prev) => {
+          let { days, hours, minutes, seconds } = prev
+
+          if (seconds > 0) {
+            seconds--
+          } else if (minutes > 0) {
+            minutes--
+            seconds = 59
+          } else if (hours > 0) {
+            hours--
+            minutes = 59
+            seconds = 59
+          } else if (days > 0) {
+            days--
+            hours = 23
+            minutes = 59
+            seconds = 59
+          } else {
+            clearInterval(interval)
+            return prev
+          }
+
+          return { days, hours, minutes, seconds }
+        })
+      }, 1000)
+
+      return () => clearInterval(interval)
+    }, [])
+
+    return (
+      <Flex justify="center" align="center" style={{ padding: '40px' }}>
+        <Countdown
+          {...args}
+          days={timeLeft.days}
+          hours={timeLeft.hours}
+          minutes={timeLeft.minutes}
+          seconds={timeLeft.seconds}
+        />
+      </Flex>
+    )
+  },
+  args: {
+    show: true,
+    days: 2,
+    hours: 14,
+    minutes: 32,
+    seconds: 45,
+    ended: false,
+    loading: false,
+    theme: 'default',
+    variant: 'lg',
+    showDays: true,
+  },
+}

package/src/components/DataTable/DataTable.jsx

@@ -0,0 +1,300 @@
+import React, { useState, useCallback, useMemo } from 'react'
+import {
+  Flex,
+  Table,
+  Checkbox,
+  Text,
+  ProductsBrandPattern,
+  DropdownMenu,
+} from '../../index'
+import { ArrowUpIcon, ArrowDownIcon, DotsVertical2Icon } from '../../icons'
+import styles from './DataTable.module.css'
+import classNames from 'classnames'
+
+const toUpperCase = (str) => (typeof str === 'string' ? str.toUpperCase() : str)
+
+const DataRow = React.memo(function DataRow({
+  row,
+  columns,
+  isSelected,
+  sortedKey,
+  hasDropdownOptions,
+  onRowClick,
+  onSelectRow,
+  renderProjectCell,
+  renderDataCell,
+}) {
+  return (
+    <Table.Row
+      className={classNames({ [styles.rowSelected]: isSelected })}
+      onClick={() => onRowClick?.(row)}
+      style={
+        isSelected ? { '--row-bg': 'var(--aqua-dark-alpha-2)' } : undefined
+      }
+    >
+      <Table.Cell
+        className={styles.selectColumn}
+        data-column-id="select"
+        data-sorted="false"
+      >
+        <Checkbox
+          size="1"
+          checked={isSelected}
+          onClick={(e) => e.stopPropagation()}
+          onCheckedChange={(value) => onSelectRow?.(row.id, value === true)}
+          className={classNames(styles.checkboxCell, {
+            [styles.showCheckboxCell]: isSelected,
+          })}
+        />
+      </Table.Cell>
+
+      {columns.map((column, index) => (
+        <Table.Cell
+          key={column.id}
+          className={classNames(
+            styles.projectCell,
+            index === 0 ? styles.columnProject : styles.dataColumn,
+            { [styles.sortedColumn]: sortedKey === column.id },
+          )}
+          data-column-id={column.id}
+          data-sorted={sortedKey === column.id}
+        >
+          {index === 0
+            ? renderProjectCell(row)
+            : renderDataCell(row, column, index)}
+        </Table.Cell>
+      ))}
+
+      {hasDropdownOptions && (
+        <Table.Cell
+          className={classNames(styles.projectCell, styles.dropdownColumn)}
+          data-column-id="actions"
+        >
+          {row.dropdownOptions?.length ? (
+            <DropdownMenu
+              trigger={
+                <Flex
+                  className={styles.dropdownTriggerWrapper}
+                  aria-label={`More options for ${row.title}`}
+                >
+                  <Flex className={styles.dropdownTriggerWrapperIcon}>
+                    <DotsVertical2Icon />
+                  </Flex>
+                </Flex>
+              }
+              options={row.dropdownOptions}
+              side="bottom"
+              align="end"
+            />
+          ) : null}
+        </Table.Cell>
+      )}
+    </Table.Row>
+  )
+})
+
+export const DataTable = ({
+  className,
+  columns,
+  data,
+  selectedRowIds = [],
+  onClick,
+  renderHeaderActions,
+  sorting,
+  onSort,
+  onSelectAll,
+  onSelectRow,
+  stickyOffset = 0,
+  ...props
+}) => {
+  const [isHeaderHovering, setIsHeaderHovering] = useState(false)
+
+  const sortedKey = sorting?.field
+
+  const selectedSet = useMemo(() => new Set(selectedRowIds), [selectedRowIds])
+
+  const isRowSelected = useCallback((id) => selectedSet.has(id), [selectedSet])
+
+  const selectedCount = selectedRowIds.length
+  const total = data?.length ?? 0
+
+  const anyRowChecked = selectedCount > 0
+  const allRowsChecked = total > 0 && selectedCount === total
+
+  const hasDropdownOptions = useMemo(
+    () => data?.some((row) => row.dropdownOptions?.length),
+    [data],
+  )
+
+  const handleSortClick = useCallback(
+    (columnId) => {
+      const isActive = sorting?.field === columnId
+      const nextDirection =
+        isActive && sorting?.sort === 'ASC' ? 'DESC' : 'ASC'
+
+      onSort?.(columnId, nextDirection)
+    },
+    [onSort, sorting],
+  )
+
+  const handleRowClick = useCallback(
+    (row) => {
+      onClick?.(row)
+    },
+    [onClick],
+  )
+
+  const renderProjectCell = useCallback((row) => {
+    return (
+      <Flex align="center" gap="3">
+        {row.thumb ? (
+          <img
+            src={row.thumb}
+            alt={row.title}
+            width={48}
+            height={48}
+            className={styles.thumb}
+          />
+        ) : (
+          <ProductsBrandPattern
+            id={row.id}
+            size={48}
+            className={styles.thumb}
+          />
+        )}
+
+        <Flex direction="column" style={{ minWidth: 0, flex: 1 }}>
+          <Text size="2" className={styles.titleText}>
+            {row.title}
+          </Text>
+          <Text size="1" className={styles.artistText}>
+            {row.artist}
+          </Text>
+        </Flex>
+      </Flex>
+    )
+  }, [])
+
+  const renderDataCell = useCallback((row, column, index) => {
+    const baseValue = row?.[column.id] ?? row?.[`${column.id}Formatted`]
+    const value =
+      column.render?.({ row, value: baseValue, column, index }) ?? baseValue
+
+    const isPrimitive =
+      typeof value === 'string' || typeof value === 'number' || value == null
+
+    return isPrimitive ? (
+      <Text size="2" className={styles.cellText}>
+        {value}
+      </Text>
+    ) : (
+      value
+    )
+  }, [])
+
+  const { style, ...restProps } = props
+  const stickyOffsetValue =
+    typeof stickyOffset === 'number' ? `${stickyOffset}px` : stickyOffset
+
+  return (
+    <Table.Root
+      className={classNames(styles.DataTable, className)}
+      size="1"
+      style={{
+        '--datatable-sticky-offset': stickyOffsetValue,
+        ...style,
+      }}
+      {...restProps}
+    >
+      <Table.Header
+        onMouseEnter={() => setIsHeaderHovering(true)}
+        onMouseLeave={() => setIsHeaderHovering(false)}
+      >
+        <Table.Row className={styles.headerRow}>
+          <Table.Cell
+            className={classNames(styles.checkboxCell, styles.selectColumn, {
+              [styles.showCheckboxHeader]: isHeaderHovering || anyRowChecked,
+            })}
+          >
+            <Checkbox
+              size="1"
+              checked={allRowsChecked}
+              onCheckedChange={(value) => onSelectAll?.(value === true)}
+              {...(anyRowChecked && !allRowsChecked
+                ? { checked: 'indeterminate' }
+                : {})}
+            />
+          </Table.Cell>
+
+          {columns.map((column, index) => (
+            <Table.ColumnHeaderCell
+              key={column.id}
+              className={classNames(styles.columnHeaderCell, {
+                [styles.columnProject]: index === 0,
+                [styles.dataColumn]: index !== 0,
+                [styles.sortedColumn]: toUpperCase(sortedKey) === toUpperCase(column.id),
+              })}
+            >
+              <Flex align="center" gap="3" height="24px">
+                {index === 0 ? (
+                  <Text size="2" className={styles.headerTextFirst}>
+                    {column.label}
+                  </Text>
+                ) : (
+                  <button
+                    type="button"
+                    className={styles.sortButton}
+                    onClick={() => handleSortClick(column.id)}
+                  >
+                    <Text size="2">{column.label}</Text>
+                    {sortedKey === column.id &&
+                      (sorting?.sort === 'DESC' ? (
+                        <ArrowUpIcon width={16} height={16} />
+                      ) : (
+                        <ArrowDownIcon width={16} height={16} />
+                      ))}
+                  </button>
+                )}
+
+                {index === 0 && renderHeaderActions && (
+                  <Flex gap="2" className={styles.headerActions}>
+                    {renderHeaderActions({
+                      selectedCount,
+                      total,
+                      anySelected: anyRowChecked,
+                      allSelected: allRowsChecked,
+                    })}
+                  </Flex>
+                )}
+              </Flex>
+            </Table.ColumnHeaderCell>
+          ))}
+          {hasDropdownOptions && (
+            <Table.ColumnHeaderCell
+              className={styles.dropdownColumn}
+            ></Table.ColumnHeaderCell>
+          )}
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        {data.map((row) => (
+          <DataRow
+            key={row.id}
+            row={row}
+            columns={columns}
+            isSelected={isRowSelected(row.id)}
+            sortedKey={sortedKey}
+            hasDropdownOptions={hasDropdownOptions}
+            onRowClick={handleRowClick}
+            onSelectRow={onSelectRow}
+            renderProjectCell={renderProjectCell}
+            renderDataCell={renderDataCell}
+          />
+        ))}
+      </Table.Body>
+    </Table.Root>
+  )
+}
+
+DataTable.displayName = 'DataTable'