shared-uicomponents-library 1.1.14 → 1.1.15

package/dist/types/components/Timeline/GeneralTimeline.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GeneralTimelineProps } from './GeneralTimeline.types';
+declare const GeneralTimeline: React.FC<GeneralTimelineProps>;
+export default GeneralTimeline;

package/dist/types/components/Timeline/GeneralTimeline.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./GeneralTimeline.types").GeneralTimelineProps>;
+    tags: string[];
+};
+export default meta;
+export declare const GeneralTimelineStory: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, import("./GeneralTimeline.types").GeneralTimelineProps>;
+export declare const GeneralTimelineStoryWithLineHeight: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-5617c98e").R, import("./GeneralTimeline.types").GeneralTimelineProps>;

package/dist/types/components/Timeline/GeneralTimeline.styles.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const StyledTimelineContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledTimelineItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledTimelineText: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledIndicatorContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledTimelineIndicator: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    filled?: boolean | undefined;
+}, {}, {}>;
+export declare const StyledTimelineLine: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    height?: number | undefined;
+}, {}, {}>;

package/dist/types/components/Timeline/GeneralTimeline.types.d.ts

@@ -0,0 +1,8 @@
+export interface TimelineItemProps {
+    text: string;
+    filled?: boolean;
+}
+export interface GeneralTimelineProps {
+    items: TimelineItemProps[];
+    lineHeight?: number;
+}

package/dist/types/components/Timeline/index.d.ts

@@ -0,0 +1 @@
+export { default as GeneralTimeline } from './GeneralTimeline';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shared-uicomponents-library",
-  "version": "1.1.14",
+  "version": "1.1.15",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -9,6 +9,7 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.7",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-image": "^3.0.3",

package/src/components/Timeline/GeneralTimeline.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import GeneralTimeline from './GeneralTimeline';
+
+const meta = {
+  title: 'UI/Timeline',
+  component: GeneralTimeline,
+  tags: ['autodocs'],
+} satisfies Meta<typeof GeneralTimeline>;
+
+export default meta;
+
+const TimelineTemplate: StoryFn<typeof GeneralTimeline> = (args) => (
+  <GeneralTimeline {...args} />
+);
+
+export const GeneralTimelineStory = TimelineTemplate.bind({});
+GeneralTimelineStory.args = {
+  items: [
+    {
+      text: 'ben',
+      filled: true,
+    },
+    {
+      text: 'ben1',
+      filled: false,
+    },
+    {
+      text: 'ben2',
+      filled: false,
+    },
+  ],
+};
+
+export const GeneralTimelineStoryWithLineHeight = TimelineTemplate.bind({});
+GeneralTimelineStoryWithLineHeight.args = {
+  lineHeight: 40,
+  items: [
+    {
+      text: 'ben',
+      filled: true,
+    },
+    {
+      text: 'ben1',
+      filled: false,
+    },
+    {
+      text: 'ben2',
+      filled: false,
+    },
+  ],
+};

package/src/components/Timeline/GeneralTimeline.styles.tsx

@@ -0,0 +1,49 @@
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+export const StyledTimelineContainer = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'end',
+  position: 'relative',
+});
+
+export const StyledTimelineItem = styled(Box)({
+  display: 'flex',
+  flexDirection: 'row',
+  position: 'relative',
+});
+
+export const StyledTimelineText = styled(Box)(({ theme }) => ({
+  textAlign: 'right',
+  paddingRight: 8,
+  ...theme.typography.label_medium_regular_lh_s_desktop,
+  fontFamily: 'SimplerPro_Leumi',
+}));
+
+export const StyledIndicatorContainer = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  position: 'relative',
+  flexShrink: 0,
+});
+
+export const StyledTimelineIndicator = styled(Box)<{ filled?: boolean }>(
+  ({ theme, filled }) => ({
+    width: 15,
+    height: 15,
+    borderRadius: '50%',
+    backgroundColor: filled ? theme.palette.icon.main_1 : 'transparent',
+    border: `1px solid ${theme.palette.icon.main_1}`,
+    zIndex: 1,
+  }),
+);
+
+export const StyledTimelineLine = styled(Box)<{ height?: number }>(
+  ({ theme, height }) => ({
+    width: 1.5,
+    backgroundColor: theme.palette.baseBlack.black_6,
+    height: height || 20,
+  }),
+);

package/src/components/Timeline/GeneralTimeline.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { getCustomTheme } from 'assets/theme';
+
+import {
+  StyledTimelineContainer,
+  StyledTimelineItem,
+  StyledTimelineText,
+  StyledTimelineIndicator,
+  StyledTimelineLine,
+  StyledIndicatorContainer,
+} from './GeneralTimeline.styles';
+import { GeneralTimelineProps } from './GeneralTimeline.types';
+
+const GeneralTimeline: React.FC<GeneralTimelineProps> = ({
+  items,
+  lineHeight,
+}) => {
+  return (
+    <MuiThemeProvider theme={getCustomTheme()}>
+      <StyledTimelineContainer>
+        {items.map((item, index) => (
+          <StyledTimelineItem key={index}>
+            <StyledTimelineText>{item.text}</StyledTimelineText>
+            <StyledIndicatorContainer>
+              <StyledTimelineIndicator filled={item.filled} />
+              {index !== items.length - 1 && <StyledTimelineLine height={lineHeight} />}
+            </StyledIndicatorContainer>
+          </StyledTimelineItem>
+        ))}
+      </StyledTimelineContainer>
+    </MuiThemeProvider>
+  );
+};
+
+export default GeneralTimeline;

package/src/components/Timeline/GeneralTimeline.types.ts

@@ -0,0 +1,9 @@
+export interface TimelineItemProps {
+  text: string;
+  filled?: boolean;
+}
+
+export interface GeneralTimelineProps {
+  items: TimelineItemProps[];
+  lineHeight?: number;
+}

package/src/components/Timeline/index.ts

@@ -0,0 +1 @@
+export { default as GeneralTimeline } from './GeneralTimeline';