@wishket/design-system 0.1.0 → 0.2.0

package/dist/Components/Atoms/Box/Box.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
-declare const Box: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import { PropsWithChildren } from 'react';
+interface BoxProps extends PropsWithChildren {
+    className?: string;
+    [key: string]: any;
+}
+declare const Box: <T>({ children, className, ...rest }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 export default Box;

package/dist/Components/Atoms/Button/Button.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from './Button.types';
+declare const Button: ({ type, ref, disabled, children, className, onClick, size, variant, rounded, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/Components/Atoms/Button/Button.parts.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from './Button.types';
+export declare const ButtonContainer: ({ rounded, size, variant, children, className, disabled, onClick, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Atoms/Button/Button.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Button from '.';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/Components/Atoms/Button/Button.types.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef } from 'react';
+type ButtonSizeType = 'sm' | 'md' | 'lg';
+type ButtonVariantType = 'default' | 'solid' | 'outlined';
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+    size?: ButtonSizeType;
+    variant?: ButtonVariantType;
+    rounded?: boolean;
+}
+export {};

package/dist/Components/Atoms/Button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from './Button';
+export default Button;

package/dist/Components/Atoms/Checkbox/Checkbox.types.d.ts

@@ -1,9 +1,13 @@
 import { ChangeEvent } from 'react';
 import { CheckboxStatus } from '../../../types';
-export interface CheckboxContainerProps extends CheckboxStatus {
+export interface CheckboxButtonProps extends CheckboxStatus {
     type?: 'box' | 'circle';
+    className?: string;
+}
+export interface CheckMarkProps {
+    checked: boolean;
 }
-export interface CheckboxProps extends CheckboxContainerProps {
+export interface CheckboxProps extends CheckboxButtonProps {
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     className?: string;
     [key: string]: any;

package/dist/Components/Atoms/Typography/Typography.d.ts

@@ -1,3 +1,3 @@
 import { TypographyProps } from './Typography.types';
-declare const Typography: ({ children, variant, align, weight, color, testId, className, ...rest }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+declare const Typography: ({ children, variant, className, ...rest }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
 export default Typography;

package/dist/Components/Atoms/Typography/Typography.types.d.ts

@@ -1,20 +1,7 @@
-import { ReactNode } from 'react';
-import { ThemeColors, TypographyVariants } from '../../..';
-export type Aligns = 'left' | 'right' | 'center';
-export type Weights = 'bold' | 'medium' | 'regular' | 'light';
-export declare enum WeightsEnum {
-    bold = 700,
-    medium = 500,
-    regular = 400,
-    light = 300
-}
-export interface TypographyProps {
+import { PropsWithChildren } from 'react';
+export type TypographyVariants = 'title1' | 'title2' | 'title3' | 'subTitle1' | 'subTitle2' | 'body1' | 'body2' | 'body3' | 'caption1' | 'caption2';
+export interface TypographyProps extends PropsWithChildren {
     variant: TypographyVariants;
-    children: ReactNode;
-    weight?: Weights;
-    align?: Aligns;
-    color?: ThemeColors;
-    testId?: string;
     className?: string;
     [key: string]: any;
 }

package/dist/Components/Atoms/index.d.ts

@@ -2,3 +2,4 @@ export { default as Typography } from './Typography';
 export { default as Checkbox } from './Checkbox';
 export { default as Box } from './Box';
 export { default as ProductIcon } from './ProductIcon';
+export { default as Button } from './Button';

package/dist/Components/Molecules/CheckboxCard/CheckboxCard.d.ts

@@ -1,2 +1,3 @@
 import { CheckboxCardProps } from './CheckboxCard.types';
-export default function CheckboxCard(props: CheckboxCardProps): import("react/jsx-runtime").JSX.Element;
+declare const CheckboxCard: ({ disabled, checked, isError, onChange, isWide, className, iconName, title, description, testId, }: CheckboxCardProps) => import("react/jsx-runtime").JSX.Element;
+export default CheckboxCard;

package/dist/Components/Molecules/CheckboxCard/CheckboxCard.parts.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxCardContainerProps, CheckboxCardIconProps, StyledCheckboxProps, TitleContainerProps } from './CheckboxCard.types';
+export declare const CheckboxCardContainer: ({ children, isWide, checked, isError, isHover, disabled, className, ...rest }: CheckboxCardContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TitleContainer: ({ isWide, children }: TitleContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledCheckbox: ({ isWide, className, ...rest }: StyledCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxCardIcon: ({ iconName, disabled, }: CheckboxCardIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Molecules/CheckboxCard/CheckboxCard.types.d.ts

@@ -1,6 +1,7 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, PropsWithChildren, ReactNode } from 'react';
 import { CheckboxStatus } from '../../../types';
 import { ProductIconName } from '../../Atoms/ProductIcon/ProductIcon.types';
+import { CheckboxProps } from '../../Atoms/Checkbox/Checkbox.types';
 export interface CheckboxCardProps extends CheckboxStatus {
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     className?: string;
@@ -8,4 +9,22 @@ export interface CheckboxCardProps extends CheckboxStatus {
     isWide?: boolean;
     title: string;
     description?: string;
+    testId?: string;
+}
+export interface CheckboxCardContainerProps extends CheckboxStatus {
+    isWide?: boolean;
+    className?: string;
+    children: ReactNode;
+    onMouseOver: () => void;
+    onMouseOut: () => void;
+}
+export interface CheckboxCardIconProps {
+    iconName: ProductIconName;
+    disabled: boolean;
+}
+export interface StyledCheckboxProps extends CheckboxProps {
+    isWide: boolean;
+}
+export interface TitleContainerProps extends PropsWithChildren {
+    isWide: boolean;
 }

package/dist/Components/Molecules/CheckboxCard/index.d.ts

@@ -0,0 +1,2 @@
+import CheckboxCard from './CheckboxCard';
+export default CheckboxCard;

package/dist/Components/Molecules/CheckboxCard/useCheckboxCard.d.ts

@@ -0,0 +1,14 @@
+import { ChangeEvent } from 'react';
+interface useCheckboxCardProps {
+    checked: boolean;
+    disabled: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+declare const useCheckboxCard: ({ checked, disabled, onChange, }: useCheckboxCardProps) => {
+    isHover: boolean;
+    isChecked: boolean;
+    handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    hoverListItemContainer: () => void;
+    unhoverListItemContainer: () => void;
+};
+export default useCheckboxCard;

package/dist/Components/Molecules/CheckboxList/CheckboxList.d.ts

@@ -1,3 +1,3 @@
 import { CheckboxListProps } from './CheckboxList.types';
-declare const CheckboxList: ({ data, className, ...rest }: CheckboxListProps) => import("react/jsx-runtime").JSX.Element;
+declare const CheckboxList: ({ data, className, testId }: CheckboxListProps) => import("react/jsx-runtime").JSX.Element;
 export default CheckboxList;

package/dist/Components/Molecules/GridLayout/GridLayout.d.ts

@@ -1,3 +1,3 @@
 import { GridLayoutProps } from './GridLayout.types';
-declare const GridLayout: ({ children, className, gridTemplateAreas, ...rest }: GridLayoutProps) => import("react/jsx-runtime").JSX.Element;
+declare const GridLayout: ({ children, gridTemplateAreaClass, testId, }: GridLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export default GridLayout;

package/dist/Components/Molecules/GridLayout/GridLayout.types.d.ts

@@ -1,10 +1,5 @@
 import { PropsWithChildren } from 'react';
 export interface GridLayoutProps extends PropsWithChildren {
-    gridTemplateAreas?: {
-        mobile: string;
-        tablet: string;
-        desktop: string;
-    };
-    className?: string;
-    [key: string]: any;
+    gridTemplateAreaClass?: string;
+    testId?: string;
 }

package/dist/Components/Molecules/index.d.ts

@@ -1,2 +1,3 @@
 export { default as GridLayout } from './GridLayout';
 export { default as CheckboxList } from './CheckboxList';
+export { default as CheckboxCard } from './CheckboxCard';

package/dist/config/tailwind.config.js

@@ -0,0 +1,168 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: [
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/Components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/styles/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    screens: {
+      'mobile': '360px',
+      'tablet': '720px',
+      'desktop': '980px',
+    },
+    extend: {
+      gridAutoColumns: {
+        '1fr': '1fr',
+      },
+      spacing: {
+        'container':'1200px',
+      },
+      colors: {
+        'w-cyan-10': '#F2FCFF',
+        'w-cyan-50': '#E8FAFF',
+        'w-cyan-100': '#BFEDFA',
+        'w-cyan-200': '#ABE3F2',
+        'w-cyan-300': '#80C7DE',
+        'w-cyan-400': '#5DB6D4',
+        'w-cyan-500': '#3BA3C7',
+        'w-cyan-600': '#369CC2',
+        'w-cyan-700': '#3391BA',
+        'w-cyan-800': '#308AB3',
+        'w-cyan-900': '#2E82AB',
+        'w-indigo-10': '#F5F9FF',
+        'w-indigo-50': '#E3EDFA',
+        'w-indigo-100': '#CCDBED',
+        'w-indigo-200': '#A6BFDE',
+        'w-indigo-300': '#7DA3CC',
+        'w-indigo-400': '#5487BA',
+        'w-indigo-500': '#2E6BAA',
+        'w-indigo-600': '#26619E',
+        'w-indigo-700': '#1F578C',
+        'w-indigo-800': '#1A4D80',
+        'w-indigo-900': '#144570',
+        'w-red-10': '#FFF5F5',
+        'w-red-50': '#FFE8E8',
+        'w-red-100': '#FFC9C9',
+        'w-red-200': '#ED9191',
+        'w-red-300': '#ED6666',
+        'w-red-400': '#EB3F3F',
+        'w-red-500': '#E52929',
+        'w-red-600': '#DB2121',
+        'w-red-700': '#D11519',
+        'w-red-800': '#C70006',
+        'w-red-900': '#BF0006',
+        'w-orange-10': '#FFF9F5',
+        'w-orange-50': '#FFF0E8',
+        'w-orange-100': '#FFD6BF',
+        'w-orange-200': '#FFBB99',
+        'w-orange-300': '#FFA070',
+        'w-orange-400': '#FF8547',
+        'w-orange-500': '#FF6B21',
+        'w-orange-600': '#F4611D',
+        'w-orange-700': '#E65918',
+        'w-orange-800': '#DB5314',
+        'w-orange-900': '#D14B0F',
+        'w-yellow-10': '#FFFDF5',
+        'w-yellow-50': '#FFF9E0',
+        'w-yellow-100': '#FFEEB8',
+        'w-yellow-200': '#FFE491',
+        'w-yellow-300': '#FFDA6A',
+        'w-yellow-400': '#FFD043',
+        'w-yellow-500': '#FFC61C',
+        'w-yellow-600': '#FFB012',
+        'w-yellow-700': '#F79E0F',
+        'w-yellow-800': '#F79205',
+        'w-yellow-900': '#F28A05',
+        'w-green-10': '#F5FFFC',
+        'w-green-50': '#EBFFF9',
+        'w-green-100': '#C4EDE1',
+        'w-green-200': '#93DBC6',
+        'w-green-300': '#63C9AB',
+        'w-green-400': '#30B891',
+        'w-green-500': '#00A878',
+        'w-green-600': '#009C6F',
+        'w-green-700': '#009168',
+        'w-green-800': '#008761',
+        'w-green-900': '#007D59',
+        'w-bluegray-10': '#F7FAFC',
+        'w-bluegray-50': '#E6EBF0',
+        'w-bluegray-100': '#CCD1D6',
+        'w-bluegray-200': '#A1A6AD',
+        'w-bluegray-300': '#787D85',
+        'w-bluegray-400': '#4D525C',
+        'w-bluegray-500': '#383D47',
+        'w-bluegray-600': '#242933',
+        'w-bluegray-700': '#1C2029',
+        'w-bluegray-800': '#14171F',
+        'w-bluegray-900': '#0D0F14',
+        'w-gray-10': '#FAFAFA',
+        'w-gray-50': '#F5F5F5',
+        'w-gray-100': '#EEEEEE',
+        'w-gray-200': '#E0E0E0',
+        'w-gray-300': '#BDBDBD',
+        'w-gray-400': '#9E9E9E',
+        'w-gray-500': '#757575',
+        'w-gray-600': '#616161',
+        'w-gray-700': '#424242',
+        'w-gray-800': '#313131',
+        'w-gray-900': '#212121',
+        'w-violet-10': '#FAF6FF',
+        'w-violet-50': '#F2E8FC',
+        'w-violet-100': '#D6C1FA',
+        'w-violet-200': '#BB98F7',
+        'w-violet-300': '#9E6BF5',
+        'w-violet-400': '#8646F2',
+        'w-violet-500': '#6B16EE',
+        'w-violet-600': '#5A00DB',
+        'w-violet-700': '#400EC0',
+        'w-violet-800': '#3200AC',
+        'w-violet-900': '#110394',
+        'w-black': '#000000',
+        'w-white': '#ffffff',
+        'w-primary': '#3BA3C7',
+        'w-secondary': '#2E6BAA',
+        'y-primary': '#6B16EE',
+      },
+      backgroundImage: {
+        'gradient-cyan-0': "linear-gradient(0deg, #5db6d4 0%, #369cc2 100%)",
+        'gradient-violet-0': "linear-gradient(0deg, #8e2de2 0%, #5a00db 100%)",
+        'gradient-indigo-0': "linear-gradient(0deg, #5487ba 0%, #26619e 100%)",
+        'gradient-cyan-30': "linear-gradient(30deg, #5db6d4 0%, #369cc2 100%)",
+        'gradient-violet-30': "linear-gradient(30deg, #8e2de2 0%, #5a00db 100%)",
+        'gradient-indigo-30': "linear-gradient(30deg, #5487ba 0%, #26619e 100%)",
+        'gradient-cyan-45': "linear-gradient(45deg, #5db6d4 0%, #369cc2 100%)",
+        'gradient-violet-45': "linear-gradient(45deg, #8e2de2 0%, #5a00db 100%)",
+        'gradient-indigo-45': "linear-gradient(45deg, #5487ba 0%, #26619e 100%)",
+        'gradient-cyan-60': "linear-gradient(60deg, #5db6d4 0%, #369cc2 100%)",
+        'gradient-violet-60': "linear-gradient(60deg, #8e2de2 0%, #5a00db 100%)",
+        'gradient-indigo-60': "linear-gradient(60deg, #5487ba 0%, #26619e 100%)",
+        'gradient-cyan-90': "linear-gradient(90deg, #5db6d4 0%, #369cc2 100%)",
+        'gradient-violet-90': "linear-gradient(90deg, #8e2de2 0%, #5a00db 100%)",
+        'gradient-indigo-90': "linear-gradient(90deg, #5487ba 0%, #26619e 100%)",
+      },
+      gridTemplateAreas: {
+        'default-mobile': ['content content content content'],
+        'default-tablet': [
+          'content content content content content content content content',
+        ],
+        'default-desktop': [
+          'content content content content content content content content content content content content',
+        ],
+        'checkbox-list-item-container':['checkbox label',' . description']
+      },
+      gridTemplateRows: {
+        'checkbox-list-item-container': 'min-content min-content',
+      },
+      gridTemplateColumns: {
+        'checkbox-list-item-container': '18px min-content',
+      },
+    },
+  },
+  plugins: [require('@savvywombat/tailwindcss-grid-areas')],
+  variants: {
+    gridTemplateAreas: ['responsive'],
+  },
+}
+

package/dist/index.d.ts

@@ -1,8 +1,2 @@
 export * from './Components/Atoms';
 export * from './Components/Molecules';
-export * from './Components/Common';
-export * from './styles';
-export * from './variants';
-export { css, keyframes, useTheme } from '@emotion/react';
-export type { Theme } from '@emotion/react';
-export { default as styled } from '@emotion/styled';