react-jupiter 6.0.0-beta.2 → 6.0.0-beta.4

package/src/components/icon/index.js

@@ -1,116 +0,0 @@
-// @flow
-
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-import * as HeroIcons from '@heroicons/react/24/outline';
-import * as HeroIconsSolid from '@heroicons/react/24/solid';
-
-type Props = {
-  name: string,
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number,
-  color?: string,
-  className?: string,
-  style?: Object,
-  onClick?: (SyntheticMouseEvent<HTMLDivElement>) => void,
-  variant?: 'outline' | 'solid',
-}
-
-const Icon = ({ 
-  name, 
-  size = 'md', 
-  color,
-  className,
-  style,
-  onClick,
-  variant = 'outline',
-  ...rest 
-}: Props) => {
-  // Map old size values to new size values in pixels
-  const getSizeInPixels = () => {
-    switch (size) {
-      case 'xs':
-        return 12;
-      case 'sm':
-        return 16;
-      case 'md':
-        return 20;
-      case 'lg':
-        return 24;
-      case 'xl':
-        return 32;
-      case '2xl':
-        return 40;
-      default:
-        // If it's already a number, return it directly
-        return typeof size === 'number' ? size : 20;
-    }
-  };
-
-  // Map old color values to new color tokens
-  const getColor = () => {
-    switch (color) {
-      case 'white':
-        return 'white';
-      case 'black':
-        return '#000000';
-      case 'gray':
-        return '#6B7280'; // gray-500
-      case 'darkGray':
-        return '#374151'; // gray-700
-      case 'darkBlue':
-        return '#6941C6'; // primary-700
-      case 'red':
-        return '#EF4444'; // error-500
-      case 'green':
-        return '#10B981'; // success-500
-      case 'yellow':
-        return '#F59E0B'; // warning-500
-      case 'blue':
-        return '#3B82F6'; // info-500
-      default:
-        // If it's not a known color name, pass it through as a custom color
-        return color;
-    }
-  };
-
-  // Get the appropriate Heroicon component
-  const getHeroIcon = () => {
-    const iconName = name
-      .split('-')
-      .map((part, index) => index === 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part.charAt(0).toUpperCase() + part.slice(1))
-      .join('') + 'Icon';
-    const icons = variant === 'solid' ? HeroIconsSolid : HeroIcons;
-    console.log(iconName, icons[iconName]);
-    return icons[iconName];
-  };
-
-  // Apply styles and colors
-  const iconSize = getSizeInPixels();
-  const iconColor = getColor();
-  
-  const iconStyle = {
-    ...style,
-    color: iconColor,
-    width: iconSize,
-    height: iconSize
-  };
-
-  const HeroIcon = getHeroIcon();
-  if (!HeroIcon) {
-    console.log(`Icon "${HeroIcon}" not found in Heroicons`);
-    return null;
-  }
-  
-  return (
-    <div 
-      className={twMerge('inline-block', className)}
-      onClick={onClick}
-      aria-hidden="true"
-      {...rest}
-    >
-      <HeroIcon style={iconStyle} />
-    </div>
-  );
-};
-
-export default Icon; 

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import Icon from './index';
-
-export default {
-  title: 'Components/Icon',
-  component: Icon,
-  argTypes: {
-    name: {
-      control: 'text',
-      description: 'Name of the icon to display',
-    },
-    size: {
-      control: 'select',
-      options: ['2xl', 'xl', 'lg', 'md', 'sm', 'xs'],
-      description: 'Size of the icon',
-    },
-  },
-};
-
-const Template = (args) => <Icon {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  name: 'academic-cap',
-  size: 'md',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  name: 'academic-cap',
-  size: 'sm',
-};
-
-export const Medium = Template.bind({});
-Medium.args = {
-  name: 'academic-cap',
-  size: 'md',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  name: 'academic-cap',
-  size: 'lg',
-};

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

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import { getColorFromName } from '../utils/theme';
-
-const StyledIcon = styled.i`
-  font-size: ${({ theme, size }) => `${theme.size[size]}px`};
-  color: ${({ theme, IconColor }) => getColorFromName(theme, IconColor)};
-  margin: ${({
-    theme, size, stickyLeft, stickyRight, marginRight, marginLeft,
-  }) => `0 ${marginRight || (stickyRight ? 0 : theme.marginSize[size])}px 0 ${marginLeft || (stickyLeft ? 0 : theme.marginSize[size])}px`};
-`;
-
-export default StyledIcon;

package/src/components/icon/index.test.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import 'jest-styled-components';
-
-import findByTestAtrr from '../utils/test';
-import Icon from './index';
-import theme from './theme';
-
-const setupShallow = (props = {}) => (
-  shallow(<Icon name={props.icon} {...props} />)
-);
-
-const setupMount = (props = {}) => (
-  mount(<Icon name={props.icon} {...props} />)
-);
-
-describe('Icons Tests', () => {
-  it('should not render component when name prop is undefined', () => {
-    const component = setupShallow();
-    const Icon = findByTestAtrr(component, 'icon');
-    expect(Icon.length).toBe(0);
-  });
-
-  it('should render icon component', () => {
-    const component = setupShallow({ name: 'watch-later' });
-    const wrapper = findByTestAtrr(component, 'icon');
-    expect(wrapper.length).toBe(1);
-  });
-
-  it('should render icon component with medium size', () => {
-    const component = setupMount({ name: 'watch-later' });
-    const Icon = findByTestAtrr(component, 'icon');
-    expect(Icon).toHaveStyleRule('font-size', `${theme.size.md}px`);
-  });
-
-  it('should render icon component with large size', () => {
-    const component = setupMount({ name: 'watch-later', size: 'lg' });
-    const Icon = findByTestAtrr(component, 'icon');
-    expect(Icon).toHaveStyleRule('font-size', `${theme.size.lg}px`);
-  });
-
-  it('should render icon component with small size', () => {
-    const component = setupMount({ name: 'watch-later', size: 'sm' });
-    const Icon = findByTestAtrr(component, 'icon');
-    expect(Icon).toHaveStyleRule('font-size', `${theme.size.sm}px`);
-  });
-
-  it('should render gray icon component with small size', () => {
-    const component = setupMount({ name: 'watch-later', size: 'sm', color: 'gray' });
-    const Icon = findByTestAtrr(component, 'icon');
-    expect(Icon).toHaveStyleRule('font-size', `${theme.size.sm}px`);
-    expect(Icon).toHaveStyleRule('color', `${theme.colors.gray800}`);
-  });
-
-  it('should render sticky left and sticky right icon', () => {
-    const component = setupMount({ name: 'watch-later', stickyLeft: true, stickyRight: true });
-    const Icon = findByTestAtrr(component, 'icon');
-    expect(Icon).toHaveStyleRule('margin', '0 0px 0 0px');
-  });
-
-  it('should render sticky right icon', () => {
-    const component = setupMount({ name: 'watch-later', stickyRight: true });
-    const Icon = findByTestAtrr(component, 'icon');
-    expect(Icon).toHaveStyleRule('margin', `0 0px 0 ${theme.marginSize.md}px`);
-  });
-});

package/src/components/icon/theme.js

@@ -1,23 +0,0 @@
-import defaultTheme from '../themes';
-
-const iconTheme = {
-  size: {
-    xxlg: 48,
-    xlg: 32,
-    lg: 24,
-    md: 20,
-    sm: 16,
-    xs: 12,
-  },
-  marginSize: {
-    xxlg: 18,
-    xlg: 16,
-    lg: 12,
-    md: 10,
-    sm: 8,
-  },
-  colors: defaultTheme.colors,
-  defaultColor: defaultTheme.colors.riverBedDark,
-};
-
-export default iconTheme;

package/src/components/index.js

@@ -1,75 +0,0 @@
-import Grid from './grid';
-import Spacing from './spacing';
-import utils from './utils';
-import Typography from './typography';
-import ShowDate from './show-date';
-import Avatar from './avatar';
-import Icon from './icon';
-import Button from './button';
-import TitledAvatar from './titled-avatar';
-import NumericSummeryReport from './numeric-summery-report';
-import Card from './card';
-import ProductProperties from './product-properties';
-import Cover from './cover';
-import Form from './form';
-import Display from './display';
-import Responsive from './responsive';
-import ProductOwner from './product-owner';
-import FileItem from './file-item';
-import Modal from './modal';
-import ProductMenu from './product-menu';
-import Table from './table';
-import Tab from './tabs';
-import defaultTheme from './themes';
-
-const { colors } = defaultTheme;
-
-export { default as Grid } from './grid';
-export { default as Spacing } from './spacing';
-export { default as utils } from './utils';
-export { default as Typography } from './typography';
-export { default as ShowDate } from './show-date';
-export { default as Avatar } from './avatar';
-export { default as Icon } from './icon';
-export { default as Button } from './button';
-export { default as TitledAvatar } from './titled-avatar';
-export { default as NumericSummeryReport } from './numeric-summery-report';
-export { default as Card } from './card';
-export { default as ProductProperties } from './product-properties';
-export { default as Cover } from './cover';
-export { default as Form } from './form';
-export { default as FormV7 } from './form-v7';
-export { default as Responsive } from './responsive';
-export { default as ProductOwner } from './product-owner';
-export { default as FileItem } from './file-item';
-export { default as Modal } from './modal';
-export { default as ProductMenu } from './product-menu';
-export { default as Table } from './table';
-export { default as Tab } from './tabs';
-export { colors as jupiterColors };
-export { default as Display } from './display';
-
-export default {
-  Grid,
-  Spacing,
-  utils,
-  Typography,
-  ShowDate,
-  Avatar,
-  Icon,
-  Button,
-  TitledAvatar,
-  NumericSummeryReport,
-  Card,
-  ProductProperties,
-  Cover,
-  Form,
-  Responsive,
-  ProductOwner,
-  FileItem,
-  Modal,
-  ProductMenu,
-  Table,
-  Tab,
-  Display,
-};

package/src/components/modal/index.js

@@ -1,100 +0,0 @@
-import React from 'react';
-import Modal from 'react-modal';
-import GlobalStyle from '../globalStyle';
-import { StyledIcon, StyledWrapper } from './index.style';
-import Icon from '../icon';
-
-type Props = {
-  children: * => Node,
-  isOpen: boolean,
-  hasCloseButton?: boolean,
-  disabledClose?: boolean,
-  onRequestClose?: () => void,
-  onAfterOpen?: () => void,
-  modalWidth?: string,
-  modalWidthMobile?: string,
-  fullHeight?: boolean,
-  className?: String,
-}
-
-// bind modal to the body of the app
-Modal.setAppElement('body');
-
-function JupiterModal({
-  onRequestClose = () => {},
-  onAfterOpen = () => {},
-  hasCloseButton = true,
-  disabledClose = false,
-  modalWidth = '80%',
-  modalWidthMobile = '100%',
-  fullHeight = false,
-  isOpen,
-  className = '',
-  children,
-}: Props) {
-  const customStyles = {
-    overlay: {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: 'rgba(0, 0, 0, 0.75)',
-      zIndex: 99,
-    },
-    content: {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      right: 'auto',
-      bottom: 'auto',
-      marginRight: '-50%',
-      transform: 'translate(-50%, -50%)',
-      maxWidth: '990px',
-      padding: '20px',
-      backgroundColor: 'white',
-      height: fullHeight ? '100%' : 'auto',
-      display: 'flex',
-      flexDirection: 'column',
-      pointerEvents: 'auto',
-      backgroundClip: 'padding-box',
-      border: '1px solid rgba(0,0,0,.2)',
-      borderRadius: '.2rem',
-    },
-  };
-  return (
-    <Modal
-      isOpen={isOpen}
-      onAfterOpen={onAfterOpen}
-      onRequestClose={onRequestClose}
-      shouldCloseOnOverlayClick={!disabledClose}
-      overlayClassName="modal"
-      className={`content ${className}`}
-      style={customStyles}
-    >
-      <GlobalStyle />
-      <StyledWrapper>
-        {(!disabledClose && hasCloseButton) && (
-          <StyledIcon onClick={onRequestClose} aria-hidden="true">
-            <Icon name="close" size="md" />
-          </StyledIcon>
-        )}
-        {children}
-      </StyledWrapper>
-      <style>
-        {`
-          .content {
-            width: ${modalWidth};
-          }
-          @media(max-width: 767px){
-            .content {
-              width: ${modalWidthMobile};
-            }
-          }
-        `}
-      </style>
-    </Modal>
-  );
-}
-
-export default JupiterModal;

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

@@ -1,86 +0,0 @@
-import React, { useState } from 'react';
-
-import { action } from '@storybook/addon-actions';
-import Modal from './index';
-
-export default {
-  title: 'Modal',
-  component: Modal,
-  
-  argTypes: {
-    modalWidth: {
-      control: 'text',
-      defaultValue: '30%',
-    },
-    modalWidthMobile: {
-      control: 'text',
-      defaultValue: '80%',
-    },
-    hasCloseButton: {
-      control: 'boolean',
-      defaultValue: true,
-    },
-    disabledClose: {
-      control: 'boolean',
-      defaultValue: false,
-    },
-    isOpen: {
-      control: 'boolean',
-      defaultValue: true,
-    },
-    onRequestClose: {
-      action: 'onRequestClose',
-    },
-    onAfterOpen: {
-      action: 'onAfterOpen',
-    },
-  },
-};
-
-const Template = (args) => {
-  const [show, setShow] = useState(false);
-  return (
-    <div>
-      <button type="button" onClick={() => setShow(true)}>نمایش مودال</button>
-      <div>
-        <article>
-          <p>لورم ایپسوم متن ساختگی</p>
-        </article>
-      </div>
-      <Modal {...args} isOpen={show} onRequestClose={() => setShow(false)}>
-        <h1>سلام</h1>
-        <p>این یک نمونه است</p>
-      </Modal>
-    </div>
-  );
-};
-
-export const Minimal = Template.bind({});
-Minimal.args = {
-  modalWidth: '30%',
-  modalWidthMobile: '80%',
-  hasCloseButton: true,
-  disabledClose: false,
-};
-
-export const FullOptions = Template.bind({});
-FullOptions.args = {
-  modalWidth: '100px',
-  modalWidthMobile: '80%',
-  hasCloseButton: true,
-  disabledClose: false,
-  onRequestClose: action('trigger what you want to do in onRequestClose function'),
-  onAfterOpen: action('trigger what you want to do in onAfterOpen function'),
-};
-
-export const WithoutCloseButton = Template.bind({});
-WithoutCloseButton.args = {
-  ...Minimal.args,
-  hasCloseButton: false,
-};
-
-export const DisabledClose = Template.bind({});
-DisabledClose.args = {
-  ...Minimal.args,
-  disabledClose: true,
-};

package/src/components/modal/index.style.js

@@ -1,40 +0,0 @@
-import styled from 'styled-components';
-import { isMobile } from '../utils/detectMobile';
-
-export const StyledIcon = styled.span`
-  cursor: pointer;
-  position: absolute;
-  right: 0;
-  top: 8px;
-  z-index: 999;
-`;
-
-export const StyledWrapper = styled.div`
-  width: 100%;
-  min-height: 300px;
-  box-sizing: border-box;
-`;
-
-export function customModalStyles(
-  borderRadius, overlayBackground, width, widthMobile, shadow, fullHeight,
-) {
-  return {
-    content: {
-      top: '50%',
-      left: '50%',
-      right: 'auto',
-      bottom: 'auto',
-      transform: 'translate(-50%, -50%)',
-      borderRadius: `${borderRadius}px`,
-      border: '0',
-      padding: isMobile ? '50px 0' : '0',
-      margin: '0',
-      width: isMobile ? widthMobile : width,
-      boxShadow: `0 0 ${shadow.blur}px ${shadow.spread}px rgba(0, 0, 0, ${shadow.opacity})`,
-      height: fullHeight ? '100%' : 'auto',
-    },
-    overlay: {
-      background: overlayBackground,
-    },
-  };
-}

package/src/components/modal/theme.js

@@ -1,11 +0,0 @@
-import defaultTheme from '../themes';
-
-const theme = {
-  borderRadius: defaultTheme.borderRadius.low,
-  overlayColor: defaultTheme.colors.gray800,
-  white: defaultTheme.colors.white,
-  defaultColor: defaultTheme.colors.riverBedDark,
-  modalShadow: defaultTheme.shadows[5],
-};
-
-export default theme;

package/src/components/numeric-summery-report/index.js

@@ -1,28 +0,0 @@
-// @flow
-
-import React from 'react';
-import GlobalStyle from '../globalStyle';
-import { Text } from '../typography';
-import { toPersianNumber } from '../utils/numbers';
-import { ListContainer, ListItem } from './index.style';
-
-type Props = {
-  data: [],
-  textColor?: string,
-}
-
-const NumericSummeryReport = ({ data, textColor = 'gray' }: Props) => (
-  <>
-    <GlobalStyle />
-    <ListContainer data-test="numeric-summery-report">
-      {data.map((report) => (
-        <ListItem key={report.id}>
-          <Text size="12" color={textColor}>{report.title}</Text>
-          <Text size="16" bold>{toPersianNumber(report.count, {})}</Text>
-        </ListItem>
-      ))}
-    </ListContainer>
-  </>
-);
-
-export default NumericSummeryReport;

package/src/components/numeric-summery-report/index.stories.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import NumericSummeryReport from './index';
-
-export default {
-  title: 'Components/NumericSummeryReport',
-  component: NumericSummeryReport,
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Title of the report',
-    },
-    value: {
-      control: 'number',
-      description: 'Numeric value to display',
-    },
-    textColor: {
-      control: 'color',
-      description: 'Color of the text',
-    },
-  },
-};
-
-const Template = (args) => <NumericSummeryReport {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Total Users',
-  value: 1234,
-  textColor: '#000000',
-};
-
-export const WithColor = Template.bind({});
-WithColor.args = {
-  title: 'Active Users',
-  value: 567,
-  textColor: '#2196F3',
-};

package/src/components/numeric-summery-report/index.style.js

@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-export const ListContainer = styled.ul`
-  display: flex;
-  height: 57px;
-  width: 100%;
-  align-items: center;
-  justify-content: space-around;
-`;
-
-export const ListItem = styled.li`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;

package/src/components/numeric-summery-report/index.test.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import findByTestAtrr from '../utils/test';
-import NumericSummeryReport from './index';
-
-const setupShallow = (props = {}) => (
-  shallow(<NumericSummeryReport data={props.data} {...props} />)
-);
-
-describe('Numeric Summery Report', () => {
-  it('should render correctly', () => {
-    const component = setupShallow({
-      data: [
-        { id: 1, title: 'برگزار شده', count: 12 },
-        { id: 2, title: 'فعال', count: 2 },
-        { id: 3, title: 'دنبال کننده‌ها', count: 346 },
-      ],
-    });
-    const NumericSummeryReport = findByTestAtrr(component, 'numeric-summery-report');
-    expect(NumericSummeryReport.length).toBe(1);
-  });
-});