react-jupiter 5.11.34 → 6.0.0-beta.1

package/src/components/icon/index.js

@@ -0,0 +1,116 @@
+// @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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,28 @@
+// @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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,22 @@
+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);
+  });
+});