ctms-common-components 1.0.1

package/src/stories/Button.stories.js

@@ -0,0 +1,45 @@
+import { Button } from '../components/Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered'
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' }
+  }
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button'
+  }
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button'
+  }
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button'
+  }
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button'
+  }
+};

package/src/stories/PoojaCard.stories.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import PoojaCard from '../components/PoojaCard';
+
+export default {
+  title: 'Components/PoojaCard',
+  component: PoojaCard,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['saffron', 'maroon', 'navy']
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large']
+    },
+    showButton: {
+      control: 'boolean'
+    }
+  }
+};
+
+export const Default = {
+  args: {
+    title: 'Card Title',
+    subtitle: 'Subtitle Text',
+    duration: '30 min',
+    priest: 'Person Name',
+    amount: 500,
+    slots: 8,
+    variant: 'maroon',
+    size: 'medium',
+    badge: 'Popular',
+    buttonText: 'Book Now',
+    showButton: true,
+    image: 'https://cdn-icons-png.flaticon.com/512/4359/4359963.png'
+  }
+};
+
+export const Small = {
+  args: {
+    title: 'Card Title',
+    subtitle: 'Subtitle Text',
+    duration: '15 min',
+    priest: 'User',
+    amount: 250,
+    slots: 5,
+    variant: 'saffron',
+    size: 'small',
+    badge: 'New',
+    buttonText: 'View',
+    showButton: true,
+    image: 'https://cdn-icons-png.flaticon.com/512/4359/4359963.png'
+  }
+};
+
+export const Large = {
+  args: {
+    title: 'Card Title',
+    subtitle: 'Subtitle Text',
+    duration: '45 min',
+    priest: 'Member',
+    amount: 1500,
+    slots: 12,
+    variant: 'navy',
+    size: 'large',
+    badge: 'Featured',
+    buttonText: 'Reserve',
+    showButton: true,
+    image: 'https://cdn-icons-png.flaticon.com/512/4359/4359963.png'
+  }
+};
+
+export const WithoutButton = {
+  args: {
+    title: 'Card Title',
+    subtitle: 'Subtitle Text',
+    duration: '20 min',
+    priest: 'Admin',
+    amount: 700,
+    slots: 3,
+    variant: 'maroon',
+    size: 'medium',
+    badge: 'Limited',
+    showButton: false,
+    image: 'https://cdn-icons-png.flaticon.com/512/4359/4359963.png'
+  }
+};
+
+export const Playground = {
+  args: {
+    title: 'Dynamic Title',
+    subtitle: 'Dynamic Subtitle',
+    duration: '60 min',
+    priest: 'Custom User',
+    amount: 999,
+    slots: 10,
+    variant: 'saffron',
+    size: 'medium',
+    badge: 'Trending',
+    buttonText: 'Continue',
+    showButton: true,
+    image: 'https://cdn-icons-png.flaticon.com/512/4359/4359963.png'
+  }
+};

package/src/stories/StatusCard.stories.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import StatusCard from '../components//StatusCard';
+
+export default {
+  title: 'Components/StatusCard',
+  component: StatusCard,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['maroon', 'saffron', 'navy']
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large']
+    }
+  }
+};
+
+const Template = (args) => <StatusCard {...args} />;
+
+export const MaroonSmall = Template.bind({});
+MaroonSmall.args = {
+  code: 'A-044',
+  label: 'Current',
+  color: 'maroon',
+  size: 'small'
+};
+
+export const SaffronMedium = Template.bind({});
+SaffronMedium.args = {
+  code: 'B-210',
+  label: 'Pending',
+  color: 'saffron',
+  size: 'medium'
+};
+
+export const NavyLarge = Template.bind({});
+NavyLarge.args = {
+  code: 'C-999',
+  label: 'Completed',
+  color: 'navy',
+  size: 'large'
+};
+
+export const Playground = Template.bind({});
+Playground.args = {
+  code: 'D-101',
+  label: 'Active',
+  color: 'maroon',
+  size: 'medium'
+};

package/src/stories/TokenCard.stories.jsx

@@ -0,0 +1,75 @@
+import TokenCard from '../components/TokenCard';
+
+export default {
+  title: 'Components/TokenCard',
+  component: TokenCard,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['saffron', 'maroon', 'cream', 'navy', 'teal']
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large']
+    }
+  }
+};
+
+export const Maroon = {
+  args: {
+    token: 'A-045',
+    status: 'Waiting',
+    waitingCount: 12,
+    estimatedTime: '18 min',
+    variant: 'maroon',
+    size: 'medium'
+  }
+};
+
+export const Saffron = {
+  args: {
+    token: 'B-102',
+    status: 'Active',
+    waitingCount: 4,
+    estimatedTime: '5 min',
+    variant: 'saffron',
+    size: 'medium'
+  }
+};
+
+export const Cream = {
+  args: {
+    token: 'C-301',
+    status: 'Pending',
+    waitingCount: 8,
+    estimatedTime: '10 min',
+    variant: 'cream',
+    size: 'medium'
+  }
+};
+
+export const Navy = {
+  args: {
+    token: 'D-777',
+    status: 'Processing',
+    waitingCount: 20,
+    estimatedTime: '30 min',
+    variant: 'navy',
+    size: 'medium'
+  }
+};
+
+export const Teal = {
+  args: {
+    token: 'E-555',
+    status: 'Confirmed',
+    waitingCount: 2,
+    estimatedTime: '2 min',
+    variant: 'teal',
+    size: 'medium'
+  }
+};

package/src/theme/README.md

@@ -0,0 +1,23 @@
+# Chakra UI Theme
+
+This is a Chakra UI theme generated with [Hypertheme Editor](https://hyperthe.me).
+
+## Usage
+Put the entire directory inside the `src/` folder of your project.
+
+Use it in inside your ChakraProvider
+```tsx
+import * as React from 'react'
+import { ChakraProvider } from '@chakra-ui/react'
+import theme from './theme'
+
+function App() {
+  return (
+    <ChakraProvider theme={theme}>
+      ...rest of code
+    </ChakraProvider>
+  )
+}
+
+export default App
+```

package/src/theme/components/button.js

@@ -0,0 +1,42 @@
+import colors from '../foundations/colors';
+
+const commonButtonStyle = {
+  bg: 'secondary.500',
+  color: 'white',
+  borderRadius: '8px',
+  padding: '12px 40px',
+  height: 'max-content',
+  border: `1px solid ${colors.secondary[500]}`,
+  boxShadow: `0px 9px 21px -14px ${colors.gray[300]}`
+};
+
+export default {
+  baseStyle: {
+    fontSize: '16px'
+  },
+  variants: {
+    secondary: {
+      ...commonButtonStyle
+    },
+    secondary_outline: {
+      ...commonButtonStyle,
+      bg: 'white',
+      color: 'secondary.500',
+      _hover: 'secondary.500',
+      _active: 'secondary.500'
+    },
+    primary: {
+      ...commonButtonStyle,
+      bg: 'primary.500',
+      border: `1px solid ${colors.primary[300]}`
+    },
+    primary_outline: {
+      ...commonButtonStyle,
+      bg: 'white',
+      color: 'primary.500',
+      _hover: 'primary.500',
+      _active: 'primary.500',
+      border: `1px solid ${colors.primary[300]}`
+    }
+  }
+};

package/src/theme/components/checkbox.js

@@ -0,0 +1,20 @@
+const component = {
+  baseStyle: {
+    control: {
+      borderColor: 'secondary.500',
+      _checked: {
+        bg: 'secondary.500',
+        borderColor: 'secondary.500',
+        _hover: {
+          bg: 'secondary.500',
+          borderColor: 'transparent'
+        }
+      },
+      borderWidth: '2px'
+    }
+  }
+};
+
+const style = {};
+
+export default { component, style };

package/src/theme/components/index.js

@@ -0,0 +1,27 @@
+import button from './button';
+import checkbox from './checkbox';
+import TimelineStyle from '../../custom-components/timeline/TimelineStyle';
+import AccordionStyle from '../../custom-components/accordion-view/AccordionStyle';
+import RadioStyles from '../../custom-components/RadioButton/RadioStyles';
+import TabVariant from '../../custom-components/custom-tabs/variant';
+import { alertTheme } from '../../custom-components/Toaster';
+
+const componentStyles = {
+  components: {
+    Button: button,
+    Checkbox: checkbox.component,
+    Accordion: AccordionStyle.component,
+    Tabs: TabVariant,
+    Radio: RadioStyles.component,
+    Alert: alertTheme
+  },
+
+  styles: {
+    global: {
+      ...TimelineStyle.style,
+
+    }
+  }
+};
+
+export default componentStyles;

package/src/theme/foundations/blur.js

@@ -0,0 +1,12 @@
+const blur = {
+  none: '0',
+  sm: '4px',
+  base: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '24px',
+  '2xl': '40px',
+  '3xl': '64px'
+};
+
+export default blur;

package/src/theme/foundations/borders.js

@@ -0,0 +1,9 @@
+const borders = {
+  none: 0,
+  '1px': '1px solid',
+  '2px': '2px solid',
+  '4px': '4px solid',
+  '8px': '8px solid'
+};
+
+export default borders;

package/src/theme/foundations/breakpoints.js

@@ -0,0 +1,10 @@
+const breakpoints = {
+  base: '0em',
+  sm: '30em',
+  md: '48em',
+  lg: '62em',
+  xl: '80em',
+  '2xl': '96em'
+};
+
+export default breakpoints;

package/src/theme/foundations/colors.js

@@ -0,0 +1,196 @@
+const colors = {
+  transparent: 'transparent',
+  current: 'currentColor',
+  black: '#000000',
+  white: '#FFFFFF',
+  containerColor: '#E7EFF5',
+  whiteAlpha: {
+    50: 'rgba(255, 255, 255, 0.04)',
+    100: 'rgba(255, 255, 255, 0.06)',
+    200: 'rgba(255, 255, 255, 0.08)',
+    300: 'rgba(255, 255, 255, 0.16)',
+    400: 'rgba(255, 255, 255, 0.24)',
+    500: 'rgba(255, 255, 255, 0.36)',
+    600: 'rgba(255, 255, 255, 0.48)',
+    700: 'rgba(255, 255, 255, 0.64)',
+    800: 'rgba(255, 255, 255, 0.80)',
+    900: 'rgba(255, 255, 255, 0.92)'
+  },
+  blackAlpha: {
+    50: 'rgba(0, 0, 0, 0.04)',
+    100: 'rgba(0, 0, 0, 0.06)',
+    200: 'rgba(0, 0, 0, 0.08)',
+    300: 'rgba(0, 0, 0, 0.16)',
+    400: 'rgba(0, 0, 0, 0.24)',
+    500: 'rgba(0, 0, 0, 0.36)',
+    600: 'rgba(0, 0, 0, 0.48)',
+    700: 'rgba(0, 0, 0, 0.64)',
+    800: 'rgba(0, 0, 0, 0.80)',
+    900: 'rgba(0, 0, 0, 0.92)',
+    1000: 'rgba(69, 69, 69, 0.60)'
+  },
+  gray: {
+    10: '#9AA6AD',
+    30: '#FDFDFD',
+    50: '#F9FAFA',
+    80: '#F5F5F5',
+    90: '#BDBDBD',
+    100: '#E8ECEE',
+    200: '#E2E8F0',
+    300: '#CBD5E0',
+    400: '#A0AEC0',
+    500: '#718096',
+    600: '#4A5568',
+    700: '#2D3748',
+    800: '#454545',
+    900: '#171923',
+    1000: '#bfc3c8'
+  },
+  red: {
+    50: '#FFF5F5',
+    100: '#FED7D7',
+    200: '#FEB2B2',
+    300: '#FC8181',
+    400: '#F56565',
+    500: '#E53E3E',
+    600: '#C53030',
+    700: '#9B2C2C',
+    800: '#822727',
+    900: '#63171B'
+  },
+  orange: {
+    50: '#FFFAF0',
+    100: '#FEEBC8',
+    200: '#FBD38D',
+    300: '#F6AD55',
+    400: '#ED8936',
+    500: '#DD6B20',
+    600: '#C05621',
+    700: '#9C4221',
+    800: '#7B341E',
+    900: '#652B19'
+  },
+  yellow: {
+    50: '#FFFFF0',
+    100: '#FEFCBF',
+    200: '#FAF089',
+    300: '#F6E05E',
+    400: '#ECC94B',
+    500: '#D69E2E',
+    600: '#B7791F',
+    700: '#975A16',
+    800: '#744210',
+    900: '#5F370E'
+  },
+  green: {
+    50: '#F0FFF4',
+    100: '#C6F6D5',
+    200: '#9AE6B4',
+    300: '#68D391',
+    400: '#48BB78',
+    500: '#38A169',
+    600: '#2F855A',
+    700: '#276749',
+    800: '#22543D',
+    900: '#1C4532'
+  },
+  teal: {
+    50: '#E6FFFA',
+    100: '#B2F5EA',
+    200: '#81E6D9',
+    300: '#4FD1C5',
+    400: '#38B2AC',
+    500: '#319795',
+    600: '#2C7A7B',
+    700: '#285E61',
+    800: '#234E52',
+    900: '#1D4044'
+  },
+  blue: {
+    30: '#E7EFF5',
+    50: '#ebf8ff',
+    100: '#bee3f8',
+    200: '#90cdf4',
+    300: '#63b3ed',
+    400: '#4299e1',
+    500: '#3182ce',
+    600: '#2b6cb0',
+    700: '#2c5282',
+    800: '#2a4365',
+    900: '#1A365D'
+  },
+  cyan: {
+    50: '#EDFDFD',
+    100: '#C4F1F9',
+    200: '#9DECF9',
+    300: '#76E4F7',
+    400: '#0BC5EA',
+    500: '#00B5D8',
+    600: '#00A3C4',
+    700: '#0987A0',
+    800: '#086F83',
+    900: '#065666'
+  },
+  purple: {
+    50: '#FAF5FF',
+    100: '#E9D8FD',
+    200: '#D6BCFA',
+    300: '#B794F4',
+    400: '#9F7AEA',
+    500: '#805AD5',
+    600: '#6B46C1',
+    700: '#553C9A',
+    800: '#44337A',
+    900: '#322659'
+  },
+  pink: {
+    50: '#FFF5F7',
+    100: '#FED7E2',
+    200: '#FBB6CE',
+    300: '#F687B3',
+    400: '#ED64A6',
+    500: '#D53F8C',
+    600: '#B83280',
+    700: '#97266D',
+    800: '#702459',
+    900: '#521B41'
+  },
+  primary: {
+    50: '#a0e8ff',
+    100: '#6ddbff',
+    200: '#53d5ff',
+    300: '#39ceff',
+    400: '#20c8ff',
+    500: '#00B2EC',
+    600: '#008cb9',
+    700: '#0078a0',
+    800: '#006586',
+    900: '#003f53'
+  },
+  secondary: {
+    50: '#facddf',
+    100: '#f59fc2',
+    200: '#f288b3',
+    300: '#f071a4',
+    400: '#ed5a95',
+    500: '#E82C78',
+    600: '#cb165f',
+    700: '#b41454',
+    800: '#9d114a',
+    900: '#6f0c34'
+  },
+  tertiary: {
+    50: '#4583f1',
+    100: '#1663ee',
+    200: '#1059da',
+    300: '#0e4fc2',
+    400: '#0c45ab',
+    500: '#09327B',
+    600: '#061f4b',
+    700: '#041534',
+    800: '#020b1c',
+    900: '#000000'
+  }
+};
+
+export default colors;

package/src/theme/foundations/index.js

@@ -0,0 +1,27 @@
+import borders from './borders';
+import breakpoints from './breakpoints';
+import colors from './colors';
+import radii from './radius';
+import shadows from './shadows';
+import sizes from './sizes';
+import spacing from './spacing';
+import transition from './transition';
+import typography from './typography';
+import zIndices from './z-index';
+import blur from './blur';
+
+const foundations = {
+  breakpoints,
+  zIndices,
+  radii,
+  blur,
+  colors,
+  ...typography,
+  sizes,
+  shadows,
+  space: spacing,
+  borders,
+  transition
+};
+
+export default foundations;

package/src/theme/foundations/radius.js

@@ -0,0 +1,13 @@
+const radii = {
+  none: '0',
+  sm: '0.125rem',
+  base: '0.25rem',
+  md: '0.375rem',
+  lg: '0.5rem',
+  xl: '0.75rem',
+  '2xl': '1rem',
+  '3xl': '1.5rem',
+  full: '9999px'
+};
+
+export default radii;

package/src/theme/foundations/shadows.js

@@ -0,0 +1,16 @@
+const shadows = {
+  xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+  outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
+  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+  none: 'none',
+  'dark-lg': 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px',
+  largeSoft: 'rgba(60, 64, 67, 0.15) 0px 2px 10px 6px;'
+};
+
+export default shadows;