react-jupiter 6.0.0-beta.1 → 6.0.0-beta.10

package/src/components/button/index.js

@@ -1,209 +0,0 @@
-// @flow
-
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-import Icon from '../icon';
-import { colorMap, sizes } from './theme';
-
-type Props = {
-  // Old API props
-  styleType?: 'primary' | 'secondary' | 'tertiary',
-  mainColor?: 'red' | 'blue' | 'green' | 'yellow' | 'darkBlue' | 'gray',
-  size?: 'xs' | 'sm' | 'md' | 'lg',
-  icon?: string,
-  iconPosition?: 'left' | 'right',
-  wide?: boolean,
-  disabled?: boolean,
-  type?: 'button' | 'submit' | 'reset' | 'anchor',
-  linkTo?: string,
-  renderLink?: (React.Node) => React.Node,
-  // New API props
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning',
-  htmlType?: 'button' | 'submit' | 'reset',
-  isLoading?: boolean,
-  loadingText?: string,
-  linkTarget?: '_self' | '_blank',
-  className?: string,
-  onClick?: (SyntheticMouseEvent<HTMLButtonElement>) => void,
-  'aria-label'?: string,
-  children?: React.Node,
-}
-
-const base = 'inline-flex items-center justify-center border box-border rounded font-semibold transition-all duration-250 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.98]';
-
-// Style type templates
-const getStyleClasses = (styleType, color) => {
-  const colorClasses = {
-    darkBlue: {
-      primary: 'bg-main border-main text-white hover:bg-secondary active:bg-opacity-80 focus-visible:ring-main',
-      secondary: 'bg-transparent border-main text-main hover:bg-opacity-10 active:bg-opacity-20 focus-visible:ring-main',
-      tertiary: 'bg-transparent border-transparent text-main hover:bg-opacity-10 active:bg-opacity-20 focus-visible:ring-main'
-    },
-    red: {
-      primary: 'bg-red-600 border-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-600',
-      secondary: 'bg-transparent border-red-600 text-red-600 hover:bg-red-50 active:bg-red-100 focus-visible:ring-red-600',
-      tertiary: 'bg-transparent border-transparent text-red-600 hover:bg-red-50 active:bg-red-100 focus-visible:ring-red-600'
-    },
-    green: {
-      primary: 'bg-green-600 border-green-600 text-white hover:bg-green-700 active:bg-green-800 focus-visible:ring-green-600',
-      secondary: 'bg-transparent border-green-600 text-green-600 hover:bg-green-50 active:bg-green-100 focus-visible:ring-green-600',
-      tertiary: 'bg-transparent border-transparent text-green-600 hover:bg-green-50 active:bg-green-100 focus-visible:ring-green-600'
-    },
-    yellow: {
-      primary: 'bg-yellow-600 border-yellow-600 text-white hover:bg-yellow-700 active:bg-yellow-800 focus-visible:ring-yellow-600',
-      secondary: 'bg-transparent border-yellow-600 text-yellow-600 hover:bg-yellow-50 active:bg-yellow-100 focus-visible:ring-yellow-600',
-      tertiary: 'bg-transparent border-transparent text-yellow-600 hover:bg-yellow-50 active:bg-yellow-100 focus-visible:ring-yellow-600'
-    },
-    blue: {
-      primary: 'bg-sky-600 border-sky-600 text-white hover:bg-sky-700 active:bg-sky-800 focus-visible:ring-sky-600',
-      secondary: 'bg-transparent border-sky-600 text-sky-600 hover:bg-sky-50 active:bg-sky-100 focus-visible:ring-sky-600',
-      tertiary: 'bg-transparent border-transparent text-sky-600 hover:bg-sky-50 active:bg-sky-100 focus-visible:ring-sky-600'
-    },
-    gray: {
-      primary: 'bg-gray-600 border-gray-600 text-white hover:bg-gray-700 active:bg-gray-800 focus-visible:ring-gray-600',
-      secondary: 'bg-transparent border-gray-600 text-gray-600 hover:bg-gray-50 active:bg-gray-100 focus-visible:ring-gray-600',
-      tertiary: 'bg-transparent border-transparent text-gray-600 hover:bg-gray-50 active:bg-gray-100 focus-visible:ring-gray-600'
-    }
-  };
-
-  return colorClasses[color]?.[styleType] || colorClasses.darkBlue.primary;
-};
-
-// Color mapping
-const colorToVariant = {
-  red: 'danger',
-  blue: 'blue',
-  green: 'primary',
-  yellow: 'warning',
-  darkBlue: 'primary',
-  gray: 'gray',
-};
-
-// Map old icon names to Heroicons
-const iconMap = {
-  'warning': 'ExclamationTriangleIcon',
-  'arrow-down-on-square': 'ArrowDownTrayIcon',
-  'bell-alert': 'BellAlertIcon',
-  'help': 'QuestionMarkCircleIcon',
-  'watch-later': 'ClockIcon',
-  'loading': 'ArrowPathIcon',
-};
-
-const iconSizeMap = {
-  xs: 'sm',
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-};
-
-const Button = ({
-  // Old API props
-  styleType = 'primary',
-  mainColor = 'darkBlue',
-  size = 'md',
-  icon = null,
-  iconPosition = 'left',
-  wide = false,
-  disabled = false,
-  type = 'button',
-  linkTo = null,
-  renderLink = null,
-  // New API props
-  variant,
-  htmlType,
-  isLoading = false,
-  loadingText = 'صبر کنید...',
-  linkTarget = '_self',
-  children,
-  className = '',
-  onClick,
-  'aria-label': ariaLabel,
-  ...rest
-} :Props) => {
-  const mappedVariant = variant || (mainColor ? colorToVariant[mainColor] : styleType);
-  const mappedHtmlType = htmlType || (type === 'anchor' ? undefined : type);
-  const isDisabled = disabled || isLoading;
-  const isIconOnly = icon && !children;
-
-  const styleClasses = getStyleClasses(styleType, mainColor);
-
-  const mergedClasses = twMerge(
-    base,
-    sizes[size],
-    styleClasses,
-    wide ? 'w-full' : '',
-    isIconOnly ? 'p-2' : '',
-    className,
-  );
-
-  const buttonContent = (
-    <>
-      {isLoading && (
-        <Icon
-          name="loading"
-          size={iconSizeMap[size]}
-          className="animate-spin mr-2"
-        />
-      )}
-      {!isLoading && icon && iconPosition === 'left' && (
-        <Icon
-          name={icon}
-          size={iconSizeMap[size]}
-          className={children ? 'mr-2' : ''}
-        />
-      )}
-      {isLoading ? loadingText : children}
-      {!isLoading && icon && iconPosition === 'right' && (
-        <Icon
-          name={icon}
-          size={iconSizeMap[size]}
-          className={children ? 'ml-2' : ''}
-        />
-      )}
-    </>
-  );
-
-  const commonButtonProps = {
-    type: linkTo || renderLink ? undefined : mappedHtmlType,
-    className: mergedClasses,
-    disabled: isDisabled,
-    onClick: !isDisabled ? onClick : undefined,
-    'aria-disabled': isDisabled,
-    'aria-busy': isLoading,
-    'aria-label': isIconOnly ? ariaLabel || icon : undefined,
-    ...rest,
-  };
-
-  if (!isDisabled && renderLink) {
-    return renderLink(
-      <button {...commonButtonProps} type="button">
-        {buttonContent}
-      </button>
-    );
-  }
-
-  if (!isDisabled && linkTo) {
-    return (
-      <a
-        href={linkTo}
-        target={linkTarget}
-        className={mergedClasses}
-        role="button"
-        aria-disabled={isDisabled}
-        aria-busy={isLoading}
-        aria-label={isIconOnly ? ariaLabel || icon : undefined}
-        {...rest}
-      >
-        {buttonContent}
-      </a>
-    );
-  }
-
-  return (
-    <button {...commonButtonProps}>
-      {buttonContent}
-    </button>
-  );
-};
-
-export default Button;

package/src/components/button/index.stories.js

@@ -1,304 +0,0 @@
-import React from 'react';
-import Button from './index';
-// import '../storybook.css';
-import { Text } from '../typography';
-
-export default {
-  title: 'Button',
-  component: Button,
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'xs'],
-      defaultValue: 'md',
-    },
-    icon: {
-      control: 'select',
-      options: ['warning', 'arrow-down-on-square', 'bell-alert', 'help'],
-      defaultValue: undefined,
-    },
-    wide: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    disabled: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    styleType: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary'],
-      defaultValue: 'primary',
-    },
-    mainColor: {
-      control: 'select',
-      options: ['red', 'blue', 'green', 'yellow', 'darkBlue', 'gray'],
-      defaultValue: 'blue',
-    },
-    children: {
-      control: 'text',
-      defaultValue: 'متن زیبای داخل دکمه',
-    },
-  },
-};
-
-const Template = (args) => <Button {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  size: 'md',
-  styleType: 'primary',
-  mainColor: 'blue',
-  children: 'متن زیبای داخل دکمه',
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  icon: 'watch-later',
-  children: 'دکمه‌ با آیکون',
-};
-
-export const WithSpecificWidth = Template.bind({});
-WithSpecificWidth.args = {
-  icon: 'watch-later',
-  width: '184px',
-  children: 'دکمه‌ با آیکون',
-};
-
-export const WideButton = Template.bind({});
-WideButton.args = {
-  wide: true,
-  children: 'دکمه‌ی تمام عرض',
-};
-
-export const ExtraSmall = Template.bind({});
-ExtraSmall.args = {
-  size: 'xs',
-  children: 'دکمه‌ی خیلی کوچک',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'sm',
-  children: 'دکمه‌ی کوچک',
-};
-
-export const Medium = Template.bind({});
-Medium.args = {
-  size: 'md',
-  children: 'دکمه‌ی متوسط',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'lg',
-  children: 'دکمه‌ی بزرگ',
-};
-
-export const ExtraSmallWithIcon = Template.bind({});
-ExtraSmallWithIcon.args = {
-  size: 'xs',
-  icon: 'watch-later',
-  children: 'دکمه‌ی خیلی کوچک با آیکون',
-};
-
-export const SmallWithIcon = Template.bind({});
-SmallWithIcon.args = {
-  size: 'sm',
-  icon: 'watch-later',
-  children: 'دکمه‌ی کوچک با آیکون',
-};
-
-export const MediumWithIcon = Template.bind({});
-MediumWithIcon.args = {
-  size: 'md',
-  icon: 'watch-later',
-  children: 'دکمه‌ی متوسط با آیکون',
-};
-
-export const LargeWithIcon = Template.bind({});
-LargeWithIcon.args = {
-  size: 'lg',
-  icon: 'watch-later',
-  children: 'دکمه‌ی بزرگ با آیکون',
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  styleType: 'primary',
-  children: 'دکمه‌ی دیفالت اولیه',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  styleType: 'secondary',
-  children: 'دکمه‌ی دیفالت ثانویه',
-};
-
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  styleType: 'tertiary',
-  children: 'دکمه‌ی دیفالت ثالثیه',
-};
-
-export const PrimaryDisabled = Template.bind({});
-PrimaryDisabled.args = {
-  disabled: true,
-  children: 'دکمه‌ی دیفالت غیر فعال',
-};
-
-export const SecondaryDisabled = Template.bind({});
-SecondaryDisabled.args = {
-  styleType: 'secondary',
-  disabled: true,
-  children: 'دکمه‌ی دیفالت ثانویه غیر فعال',
-};
-
-export const TertiaryDisabled = Template.bind({});
-TertiaryDisabled.args = {
-  styleType: 'tertiary',
-  disabled: true,
-  children: 'دکمه‌ی دیفالت ثالثیه غیر فعال',
-};
-
-export const RedPrimary = Template.bind({});
-RedPrimary.args = {
-  styleType: 'primary',
-  mainColor: 'red',
-  children: 'دکمه‌ی قرمز اولیه',
-};
-
-export const RedSecondary = Template.bind({});
-RedSecondary.args = {
-  styleType: 'secondary',
-  mainColor: 'red',
-  children: 'دکمه‌ی قرمز ثانویه',
-};
-
-export const RedPrimaryDisabled = Template.bind({});
-RedPrimaryDisabled.args = {
-  mainColor: 'red',
-  disabled: true,
-  children: 'دکمه‌ی قرمز اولیه غیر فعال',
-};
-
-export const RedSecondaryDisabled = Template.bind({});
-RedSecondaryDisabled.args = {
-  styleType: 'secondary',
-  mainColor: 'red',
-  disabled: true,
-  children: 'دکمه‌ی قرمز ثانویه غیر فعال',
-};
-
-export const BluePrimary = Template.bind({});
-BluePrimary.args = {
-  styleType: 'primary',
-  mainColor: 'blue',
-  children: 'دکمه‌ی آبی اولیه',
-};
-
-export const BlueSecondary = Template.bind({});
-BlueSecondary.args = {
-  styleType: 'secondary',
-  mainColor: 'blue',
-  children: 'دکمه‌ی آبی ثانویه',
-};
-
-export const BluePrimaryDisabled = Template.bind({});
-BluePrimaryDisabled.args = {
-  mainColor: 'blue',
-  disabled: true,
-  children: 'دکمه‌ی آبی اولیه غیر فعال',
-};
-
-export const BlueSecondaryDisabled = Template.bind({});
-BlueSecondaryDisabled.args = {
-  styleType: 'secondary',
-  mainColor: 'blue',
-  disabled: true,
-  children: 'دکمه‌ی آبیه ثانویه غیر فعال',
-};
-
-export const GrayPrimary = Template.bind({});
-GrayPrimary.args = {
-  styleType: 'primary',
-  mainColor: 'gray',
-  icon: 'watch-later',
-  children: 'دکمه‌ی خاکستری اولیه',
-};
-
-export const GreenPrimary = Template.bind({});
-GreenPrimary.args = {
-  styleType: 'primary',
-  mainColor: 'green',
-  children: 'دکمه‌ی سبز اولیه',
-};
-
-export const GreenSecondary = Template.bind({});
-GreenSecondary.args = {
-  styleType: 'secondary',
-  mainColor: 'green',
-  children: 'دکمه‌ی سبز ثانویه',
-};
-
-export const GreenPrimaryDisabled = Template.bind({});
-GreenPrimaryDisabled.args = {
-  mainColor: 'green',
-  disabled: true,
-  children: 'دکمه‌ی سبز اولیه غیر فعال',
-};
-
-export const GreenSecondaryDisabled = Template.bind({});
-GreenSecondaryDisabled.args = {
-  styleType: 'secondary',
-  mainColor: 'green',
-  disabled: true,
-  children: 'دکمه‌ی سبز ثانویه غیر فعال',
-};
-
-export const YellowPrimary = Template.bind({});
-YellowPrimary.args = {
-  styleType: 'primary',
-  mainColor: 'yellow',
-  children: 'دکمه‌ی زرد اولیه',
-};
-
-export const YellowSecondary = Template.bind({});
-YellowSecondary.args = {
-  styleType: 'secondary',
-  mainColor: 'yellow',
-  children: 'دکمه‌ی زرد ثانویه',
-};
-
-export const YellowPrimaryDisabled = Template.bind({});
-YellowPrimaryDisabled.args = {
-  mainColor: 'yellow',
-  disabled: true,
-  children: 'دکمه‌ی زرد اولیه غیر فعال',
-};
-
-export const YellowSecondaryDisabled = Template.bind({});
-YellowSecondaryDisabled.args = {
-  styleType: 'secondary',
-  mainColor: 'yellow',
-  disabled: true,
-  children: 'دکمه‌ی زرد ثانویه غیر فعال',
-};
-
-export const LinkButton = Template.bind({});
-LinkButton.args = {
-  renderLink: (element) => <a href="http://google.com">{element}</a>,
-  children: 'لینک به گوگل',
-};
-
-export const ExternalLinkButton = Template.bind({});
-ExternalLinkButton.args = {
-  linkTo: 'http://google.com',
-  children: 'لینک به گوگل',
-};
-
-export const WithReactNodeChildren = Template.bind({});
-WithReactNodeChildren.args = {
-  size: 'md',
-  children: <Text color="white">این یک متن  تستی است</Text>,
-};

package/src/components/button/index.styles.js

@@ -1,104 +0,0 @@
-import styled from 'styled-components';
-import Icon from '../icon';
-import { getColorFromName, getHoverColorFromName, getFocusColorFromName } from '../utils/theme';
-
-export const BaseButton = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: ${({ width, wide }) => (width ? `${width}` : wide ? '100%' : 'auto')};
-  height: ${({ height }) => (height ? `${height}` : 'auto')};
-  min-width: ${({ size, theme, width }) => (width ? `${width}` : `${theme.size[size].minWidth}px`)};
-  min-height: ${({ size, theme, height }) => (height ? `${height}` : `${theme.size[size].height}px`)};
-
-  padding: ${({ size, theme }) => theme.size[size].padding};
-  box-sizing: border-box;
-
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? '0.25' : '1')};
-  border-radius: ${({ theme }) => `${theme.borderRadius}px`};
-
-  margin: ${({
-    marginRight, marginLeft,
-  }) => `0 ${marginRight || 0}px 0 ${marginLeft || 0}px`};
-
-  &[data-styletype="primary"] {
-    border: none;
-    background: ${({ theme, mainColor }) => getColorFromName(theme, mainColor)};
-    
-    &:hover { 
-      transition: all 0.25s;
-      background: ${({ theme, mainColor, disabled }) => (!disabled ? getHoverColorFromName(theme, mainColor) : getColorFromName(theme, mainColor))};
-    }
-    &:active {
-      transition: all 0.25s;
-      background: ${({ theme, mainColor, disabled }) => (!disabled ? getFocusColorFromName(theme, mainColor) : getColorFromName(theme, mainColor))};
-    }
-  }
-  
-  &[data-styletype="secondary"] {
-    border: 1px solid ${({ theme, mainColor }) => getColorFromName(theme, mainColor)};
-    background: transparent;
-
-    &:hover { 
-      border-color: ${({ theme, disabled, mainColor }) => (!disabled ? 'transparent' : getColorFromName(theme, mainColor))};
-      transition: all 0.25s;
-      background: ${({ theme, mainColor, disabled }) => (!disabled ? getColorFromName(theme, mainColor) : 'transparent')};
-      * {
-        transition: all 0.25s;
-        color: ${({ theme, mainColor, disabled }) => (!disabled ? theme.colors.white : getColorFromName(theme, mainColor))};
-      }
-    }
-    &:active {
-      border-color: ${({ theme, disabled, mainColor }) => (!disabled ? 'transparent' : getColorFromName(theme, mainColor))};
-      background: ${({ theme, mainColor, disabled }) => (!disabled ? getFocusColorFromName(theme, mainColor) : 'transparent')};
-      * {
-        transition: all 0.25s;
-        color: ${({ theme, mainColor, disabled }) => (!disabled ? theme.colors.white : getColorFromName(theme, mainColor))};
-      }
-    }
-  }
-
-  &[data-styletype="tertiary"] {
-    border: none;
-    background: transparent;
-
-    &:hover { 
-      * {
-        transition: all 0.25s;
-        color: ${({ theme }) => theme.colors.darkBlue400};
-      }
-    }
-    &:active {
-      * {
-        transition: all 0.25s;
-        color: ${({ theme }) => theme.colors.darkBlue800};
-      }
-    }
-
-  }
-`;
-
-export const StyledIcon = styled(Icon)`
-  margin-right: 0;
-`;
-
-export const ExternalLink = styled.a`
-  color: ${({ theme, color }) => getColorFromName(theme, color)};
-  text-decoration: none;
-  &:hover {
-    text-decoration: none;
-  }
-  &:visited {
-    color: ${({ theme, color }) => getColorFromName(theme, color)};
-    text-decoration: none;
-  }
-`;
-
-export const InternalLink = styled.div`
-  a {
-    color: ${({ theme, color }) => getColorFromName(theme, color)};
-    text-decoration: none;
-  }
-`;

package/src/components/button/theme.js

@@ -1,60 +0,0 @@
-import defaultTheme from '../themes';
-
-const theme = {
-  colors: defaultTheme.colors,
-  borderRadius: defaultTheme.borderRadius.low,
-};
-const sizes = {
-  xs: 'px-2 py-1 text-xs min-h-[24px]',
-  sm: 'px-3 py-1 text-xs min-h-[32px]',
-  md: 'px-4 py-2 text-sm min-h-[40px]',
-  lg: 'px-6 py-3 text-base min-h-[48px]',
-};
-
-// Color mapping to Tailwind colors
-const colorMap = {
-  red: {
-    base: 'red-600',
-    hover: 'red-700',
-    active: 'red-800',
-    light: 'red-50',
-    lighter: 'red-100',
-  },
-  blue: {
-    base: 'secondary',
-    hover: 'secondary/90',
-    active: 'secondary/80',
-    light: 'secondary/10',
-    lighter: 'secondary/20',
-  },
-  green: {
-    base: 'green-600',
-    hover: 'green-700',
-    active: 'green-800',
-    light: 'green-50',
-    lighter: 'green-100',
-  },
-  yellow: {
-    base: 'yellow-500',
-    hover: 'yellow-600',
-    active: 'yellow-700',
-    light: 'yellow-50',
-    lighter: 'yellow-100',
-  },
-  darkBlue: {
-    base: 'main',
-    hover: 'main/90',
-    active: 'main/80',
-    light: 'main/10',
-    lighter: 'main/20',
-  },
-  gray: {
-    base: 'gray-600',
-    hover: 'gray-700',
-    active: 'gray-800',
-    light: 'gray-50',
-    lighter: 'gray-100',
-  },
-};
-
-export { theme, colorMap, sizes };

package/src/components/button/utils.js

@@ -1,12 +0,0 @@
-function setFontColor(styleType, mainColor) {
-  switch (styleType) {
-    case 'secondary':
-      return mainColor;
-    case 'tertiary':
-      return 'darkBlue';
-    default:
-      return 'white';
-  }
-}
-
-export default setFontColor;