react-jupiter 5.12.0 → 6.0.0-beta.2

package/src/components/progress-bar/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ProgressBar as Bar, Names, Numbers } from './index.styles';
+import { toPersianNumber } from '../utils/numbers';
+import Icon from '../icon';
+
+const ProgressBar = ({ width, labels, points }) => {
+  const percentWidth = (width * 100) / points.colleague;
+
+  return (
+    <>
+      <Names points={points}>
+        {labels.map((label, key) => (
+          <span key={key}>
+            {label}
+            <Icon name="arrow-drop-down" size="sm" />
+          </span>
+        ))}
+      </Names>
+      <Bar width={percentWidth}>
+        <div className="filled">
+          <span>
+            امتیاز شما:
+            {toPersianNumber(width, {})}
+          </span>
+        </div>
+      </Bar>
+      <Numbers points={points}>
+        <span>۰</span>
+        <span>{toPersianNumber(points.partner)}</span>
+        <span>{toPersianNumber(points.colleague)}</span>
+      </Numbers>
+    </>
+  );
+};
+
+ProgressBar.propTypes = {
+  width: PropTypes.number.isRequired,
+  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  points: PropTypes.instanceOf({
+    partner: PropTypes.number,
+    colleague: PropTypes.number,
+  }).isRequired,
+};
+
+export default ProgressBar;

package/src/components/progress-bar/index.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import ProgressBar from './index';
+
+export default {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  argTypes: {
+    width: {
+      control: 'number',
+      description: 'Current progress value',
+    },
+    labels: {
+      control: 'array',
+      description: 'Labels for different thresholds',
+    },
+    points: {
+      control: 'object',
+      description: 'Object containing partner and colleague threshold points',
+    },
+  },
+};
+
+const Template = (args) => <ProgressBar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  width: 50,
+  labels: ['Label 1', 'Label 2'],
+  points: {
+    partner: 75,
+    colleague: 100,
+  },
+};

package/src/components/progress-bar/index.styles.js

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+import defaultTheme from '../themes';
+
+export const ProgressBar = styled.div`
+    background-color: rgb(167, 167, 167);
+    color: rgb(68, 68, 68);
+    height: 20px;
+    border-radius: 16px;
+
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+    & div.filled {
+        min-width: 50px;
+        max-width: 100%;
+        width: ${(props) => props.width}%;
+        height: 20px;
+        background: rgb(80, 89, 117);
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        @media only screen and (min-width: ${defaultTheme.breakpoints.sm}px) {
+            font-size: 15px;
+        }
+        @media only screen and (max-width: ${defaultTheme.breakpoints.sm - 1}px) {
+            font-size: 8px;
+        }
+        font-weight: bold;
+        color: #fff;
+        justify-content: center;
+        float: right;
+      }
+    }
+`;
+
+export const Names = styled.div`
+    display: flex;
+    justify-content: space-between;
+    direction: rtl;
+    position: relative;
+    width: 100%;
+    font-family: 'IranSharp';
+    & span > i {
+        display: block;
+    }
+    & span:first-child {
+        position: relative;
+        right: ${(props) => ((props.points.partner * 100) / props.points.colleague) - 2}%;
+    }
+`;
+
+export const Numbers = styled.div`
+    display: flex;
+    justify-content: space-between;
+    direction: rtl;
+    font-family: 'IranSharp';
+    position: relative;
+    & span:nth-child(2) {
+        position: absolute;
+        right: ${(props) => (props.points.partner * 100) / props.points.colleague}%
+    }
+`;

package/src/components/responsive/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useMediaQuery } from 'react-responsive';
+
+const Responsive = (props) => {
+  const { option, children } = props;
+  const { isDefault } = option;
+  const generateQueryObject = () => {
+    const { greaterThan, lessThan } = option;
+    let query;
+    if (greaterThan !== undefined && lessThan !== undefined) {
+      query = { minWidth: greaterThan, maxWidth: lessThan };
+    } else if (greaterThan !== undefined) {
+      query = { minWidth: greaterThan };
+    } else {
+      query = { maxWidth: lessThan };
+    }
+    return query;
+  };
+
+  const screen = useMediaQuery(generateQueryObject());
+  return ((isDefault || screen) && <>{children}</>);
+};
+
+Responsive.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.string,
+  ]).isRequired,
+  option: PropTypes.shape({
+    lessThan: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    greaterThan: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    isDefault: PropTypes.bool,
+  }).isRequired,
+};
+
+export default Responsive;

package/src/components/show-date/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '../typography';
+import { convertToJalaali } from '../utils/date';
+import { englishNumberToPersianInString } from '../utils/numbers';
+
+const ShowDate = ({ fontSize = 12, color = 'default', date }) => (
+  <Text size={fontSize} color={color} data-test="show-date">
+    {englishNumberToPersianInString(convertToJalaali(date, 'dddd jD jMMMM jYYYY ساعت HH:mm'))}
+  </Text>
+);
+
+ShowDate.propTypes = {
+  date: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]).isRequired,
+  fontSize: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  color: PropTypes.oneOf(['default', 'red', 'green', 'blue', 'yellow', 'white', 'darkBlue', 'gray']),
+};
+
+export default ShowDate;

package/src/components/show-date/index.stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import ShowDate from './index';
+
+export default {
+  title: 'Components/ShowDate',
+  component: ShowDate,
+  argTypes: {
+    date: {
+      control: 'date',
+      description: 'Date to display',
+    },
+    format: {
+      control: 'text',
+      description: 'Date format string',
+    },
+    fontSize: {
+      control: 'number',
+      description: 'Font size in pixels',
+    },
+    color: {
+      control: 'color',
+      description: 'Text color',
+    },
+  },
+};
+
+const Template = (args) => <ShowDate {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  date: new Date('2024-03-10'),
+  format: 'YYYY-MM-DD',
+  fontSize: 16,
+  color: '#000000',
+};
+
+export const CustomFormat = Template.bind({});
+CustomFormat.args = {
+  date: new Date('2024-03-10'),
+  format: 'MMM DD, YYYY',
+  fontSize: 16,
+  color: '#000000',
+};
+
+export const CustomStyle = Template.bind({});
+CustomStyle.args = {
+  date: new Date('2024-03-10'),
+  format: 'YYYY-MM-DD',
+  fontSize: 24,
+  color: '#2196F3',
+};

package/src/components/show-date/index.style.js

@@ -0,0 +1 @@
+

package/src/components/show-date/index.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import 'jest-styled-components';
+
+import ShowDate from './index';
+import findByTestAtrr from '../utils/test';
+
+const setupShallow = (props = {}) => (
+  shallow(
+    <ShowDate
+      date={props.date}
+      dateFormat={props.dateFormat}
+      {...props}
+    />,
+  )
+);
+
+describe('ShowDate component', () => {
+  it('should render correctly', () => {
+    const component = setupShallow({ date: new Date() });
+    const DateBookmark = findByTestAtrr(component, 'show-date');
+    expect(DateBookmark.length).toBe(1);
+  });
+});

package/src/components/spacing/core.js

@@ -0,0 +1,106 @@
+import styled from 'styled-components';
+
+// Helper to add units if needed
+const addPxIfNeeded = (value) => (typeof value === 'number' ? `${value}px` : value);
+
+export const _m = (values, theme) => {
+  if (!values || !theme?.spacing) return ''; // Check theme.spacing exists
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return ''; // Handle missing key
+  return `margin: ${addPxIfNeeded(spacingValue)};`;
+};
+
+export const _mx = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  const formattedValue = addPxIfNeeded(spacingValue);
+  return `margin-left: ${formattedValue}; margin-right: ${formattedValue};`;
+};
+
+export const _my = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  const formattedValue = addPxIfNeeded(spacingValue);
+  return `margin-top: ${formattedValue}; margin-bottom: ${formattedValue};`;
+};
+
+export const _mt = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  return `margin-top: ${addPxIfNeeded(spacingValue)};`;
+};
+
+export const _mr = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  return `margin-right: ${addPxIfNeeded(spacingValue)};`;
+};
+
+export const _mb = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  return `margin-bottom: ${addPxIfNeeded(spacingValue)};`;
+};
+
+export const _ml = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  return `margin-left: ${addPxIfNeeded(spacingValue)};`;
+};
+
+export const _p = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  return `padding: ${addPxIfNeeded(spacingValue)};`;
+};
+
+export const _px = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  const formattedValue = addPxIfNeeded(spacingValue);
+  return `padding-left: ${formattedValue}; padding-right: ${formattedValue};`;
+};
+
+export const _py = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  const formattedValue = addPxIfNeeded(spacingValue);
+  return `padding-top: ${formattedValue}; padding-bottom: ${formattedValue};`;
+};
+
+export const _pt = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  return `padding-top: ${addPxIfNeeded(spacingValue)};`;
+};
+
+export const _pr = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  return `padding-right: ${addPxIfNeeded(spacingValue)};`;
+};
+
+export const _pb = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  return `padding-bottom: ${addPxIfNeeded(spacingValue)};`;
+};
+
+export const _pl = (values, theme) => {
+  if (!values || !theme?.spacing) return '';
+  const spacingValue = theme.spacing[values];
+  if (spacingValue === undefined) return '';
+  return `padding-left: ${addPxIfNeeded(spacingValue)};`;
+}; 

package/src/components/spacing/index.js

@@ -0,0 +1,10 @@
+import Margin from './margin';
+import Padding from './padding';
+
+export { default as Margin } from './margin';
+export { default as Padding } from './padding';
+
+export default {
+  Margin,
+  Padding,
+};

package/src/components/spacing/margin/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { _m, _mx, _my, _mt, _mr, _mb, _ml } from '../core';
+import { ThemeProvider } from 'styled-components';
+import defaultTheme from '../../themes';
+
+export const Margin = styled.div`
+  ${({ inline }) => inline && 'display: inline-block;'}
+  ${({ all, theme }) => _m(all, theme)}
+  ${({ horizontal, theme }) => _mx(horizontal, theme)} 
+  ${({ vertical, theme }) => _my(vertical, theme)} 
+  ${({ top, theme }) => _mt(top, theme)} 
+  ${({ right, theme }) => _mr(right, theme)} 
+  ${({ bottom, theme }) => _mb(bottom, theme)} 
+  ${({ left, theme }) => _ml(left, theme)} 
+`;
+
+Margin.displayName = 'Margin';
+
+const Margined = (props) => (
+  <ThemeProvider theme={defaultTheme}>
+    <Margin {...props} />
+  </ThemeProvider>
+);
+
+export default Margined;

package/src/components/spacing/padding/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { _p, _px, _py, _pt, _pr, _pb, _pl } from '../core';
+import { ThemeProvider } from 'styled-components';
+import defaultTheme from '../../themes';
+
+export const Padding = styled.div`
+  ${({ inline }) => inline && 'display: inline-block;'}
+  ${({ all, theme }) => _p(all, theme)}
+  ${({ horizontal, theme }) => _px(horizontal, theme)} 
+  ${({ vertical, theme }) => _py(vertical, theme)} 
+  ${({ top, theme }) => _pt(top, theme)} 
+  ${({ right, theme }) => _pr(right, theme)} 
+  ${({ bottom, theme }) => _pb(bottom, theme)} 
+  ${({ left, theme }) => _pl(left, theme)} 
+`;
+
+Padding.displayName = 'Padding';
+
+const Paddinged = (props) => (
+  <ThemeProvider theme={defaultTheme}>
+    <Padding {...props} />
+  </ThemeProvider>
+);
+
+export default Paddinged;

package/src/components/storybook.css

@@ -0,0 +1,54 @@
+/* add fonts for storybook */
+@font-face {
+  font-family: 'IranSharp';
+  font-style: normal;
+  font-weight: bold;
+  src:
+    url('../docs/assets/fonts/iransharp_bold_web.woff2') format("woff2"),
+    url('../docs/assets/fonts/iransharp_bold_web.woff') format("woff");
+}
+@font-face {
+  font-family: 'IranSharp';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    url('../docs/assets/fonts/iransharp_regular_web.woff2') format("woff2"),
+    url('../docs/assets/fonts/iransharp_regular_web.woff') format("woff");
+}
+@font-face {
+  font-family: 'Jupiterico';
+  font-style: normal;
+  font-weight: normal;
+  font-display: swap;
+  src: url('../docs/assets/fonts/icomoon.woff') format("woff");
+}
+
+@font-face {
+  font-family: 'JupiterfilesImgs';
+  font-style: normal;
+  font-weight: normal;
+  font-display: swap;
+  src: url('../docs/assets/fonts/filesImgs.woff') format("woff");
+}
+
+body {
+  direction: rtl;
+}
+
+* {
+  outline: none;
+}
+
+ul, li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+};
+
+/* show-info page should be ltr and show-info button doesnt cover the main component page*/
+.info__overlay {
+  direction: ltr;
+}
+.sb-show-main {
+	margin-top: 35px;
+}

package/src/components/table/actionCell.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import Button from '../button';
+import { ActionCellContainer, ActionsContainer } from './index.style';
+
+type Props = {
+  callToActions: [{
+    props?: {},
+    text: string,
+  }]
+};
+
+function ActionCell({ callToActions }: Props) {
+  return (
+    <td>
+      <ActionCellContainer>
+        <Button
+          {...callToActions[0].props}
+          htmlType="button"
+          mainColor="blue"
+          styleType="secondary"
+          size="sm"
+          wide
+        >
+          {callToActions[0].text}
+        </Button>
+
+        {callToActions.length > 1 && (
+          <>
+            <ActionsContainer>
+              {callToActions.map((item, index) => {
+                if (index === 0) {
+                  return null;
+                }
+                return (
+                  <Button
+                    key={item.text}
+                    {...item.props}
+                    htmlType="button"
+                    mainColor="blue"
+                    styleType="tertiary"
+                    size="sm"
+                    wide
+                  >
+                    {item.text}
+                  </Button>
+                );
+              })}
+            </ActionsContainer>
+
+          </>
+        )}
+      </ActionCellContainer>
+    </td>
+  );
+}
+
+export default ActionCell;

package/src/components/table/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import TableHeaderRow from './tableHeaderRow';
+import TableRow from './tableRow';
+import GlobalStyle from '../globalStyle';
+import { TableContainer } from './index.style';
+import theme from './theme';
+
+type Props = {
+  columns: [
+    {
+      key: string,
+      label: string,
+      dataType: 'text' | 'action' | 'node',
+    }
+  ],
+  data: [
+    {
+      key: string,
+    },
+  ],
+};
+
+function Table(props: Props) {
+  const { columns, data } = props;
+  const actionColumnIndexNumber = columns.findIndex((columnItem) => columnItem.dataType === 'action');
+  const hasActionColumn = !(actionColumnIndexNumber === -1);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <TableContainer
+        isResponsiveView={(window && window.innerWidth < 768)}
+        data-test="jupiter-table"
+        actionColumnNumber={hasActionColumn ? actionColumnIndexNumber + 1 : null}
+      >
+        <table>
+          <thead>
+            <TableHeaderRow columns={columns} />
+          </thead>
+          <tbody>
+            {data.map((rowItem) => (
+              <TableRow
+                key={rowItem.key}
+                rowItem={rowItem}
+                columns={columns}
+              />
+            ))}
+          </tbody>
+        </table>
+      </TableContainer>
+    </ThemeProvider>
+  );
+}
+
+export default Table;