@mmb-digital/design-system-web 0.1.4 → 0.1.5

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default (1)" />
+  </state>
+</component>

package/.idea/design-system-web_2023-02-07.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,7 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/design-system-web_2023-02-07.iml" filepath="$PROJECT_DIR$/.idea/design-system-web_2023-02-07.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/php.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MessDetectorOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCodeSnifferOptionsConfiguration">
+    <option name="highlightLevel" value="WARNING" />
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PhpStanOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PsalmOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+</project>

package/.idea/prettier.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmb-digital/design-system-web",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "MMB design-system-web",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/@types/json.d.ts

@@ -1,5 +0,0 @@
-declare module '*.json' {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const value: any;
-	export default value;
-}

package/src/@types/styledComponentCssProps.d.ts

@@ -1,11 +0,0 @@
-import { CSSProp } from 'styled-components';
-
-import { theme } from '@/style/styledComponents/theme';
-
-type CustomTheme = typeof theme;
-
-declare module 'react' {
-	interface Attributes {
-		css?: CSSProp<CustomTheme>;
-	}
-}

package/src/@types/styledComponentTheme.d.ts

@@ -1,9 +0,0 @@
-import 'styled-components';
-
-import { theme } from '@/style/styledComponents/theme';
-
-type CustomTheme = typeof theme;
-
-declare module 'styled-components' {
-	export interface DefaultTheme extends CustomTheme {}
-}

package/src/components/button/button.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Button from './button';
-import { ButtonSize, ButtonStyle, ButtonType, Props } from './button.types';
-import React from 'react';
-import { SystemIcon } from '@/icons/systemIcon';
-
-const meta = {
-	title: 'Button',
-	component: Button,
-	parameters: {},
-	tags: ['autodocs'],
-	argTypes: {},
-	decorators: [
-		(story) => {
-			return <>{story()}</>;
-		},
-	],
-} satisfies Meta<typeof Button>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultStyle: ButtonStyle = ButtonStyle.PRIMARY;
-const defaultSize: ButtonSize = ButtonSize.MD;
-const defaultChildren = 'button';
-
-const defaultProps: Props = {
-	buttonStyle: defaultStyle,
-	size: defaultSize,
-	children: defaultChildren,
-};
-
-export const Default: Story = {
-	args: {
-		children: 'button',
-		buttonStyle: ButtonStyle.PRIMARY,
-		size: ButtonSize.MD,
-		disabled: false,
-		displayOnlyIcon: false,
-		iconLeft: <SystemIcon />,
-		iconRight: <SystemIcon />,
-		type: ButtonType.BUTTON,
-	},
-	argTypes: {
-		buttonStyle: {
-			type: {
-				name: 'enum',
-				value: Object.values(ButtonStyle),
-			},
-		},
-		size: {
-			type: {
-				name: 'enum',
-				value: Object.values(ButtonSize),
-			},
-		},
-		displayOnlyIcon: {
-			type: {
-				name: 'boolean',
-			},
-		},
-		disabled: {
-			type: {
-				name: 'boolean',
-			},
-		},
-	},
-};
-
-export const TypeButton: Story = {
-	args: {
-		...defaultProps,
-	},
-};
-
-export const TypePrimary: Story = {
-	args: { children: 'Primary button', buttonStyle: ButtonStyle.PRIMARY, size: defaultSize },
-};
-
-export const TypeSecondary: Story = {
-	args: { children: 'Secondary button', buttonStyle: ButtonStyle.SECONDARY, size: defaultSize },
-};
-
-export const TypeTertiary: Story = {
-	args: { children: 'Tertiary button', buttonStyle: ButtonStyle.TERTIARY, size: defaultSize },
-};
-
-export const WithOnClick: Story = {
-	args: {
-		...defaultProps,
-		onClick: () => {
-			console.log('onClick');
-		},
-	},
-};

package/src/components/button/button.styles.ts

@@ -1,162 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { ButtonSize, ButtonStyle, Props } from './button.types';
-
-export const ButtonStyled = styled.button<Partial<Props>>`
-	/* common styles */
-	display: flex;
-	flex-shrink: 0;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-
-	/* type specific styles */
-	${({ buttonStyle }) => {
-		switch (buttonStyle) {
-			case ButtonStyle.PRIMARY:
-				return css`
-					color: ${({ theme }) => theme.colors.fg.neutral.white.light};
-					background-color: ${({ theme }) => theme.colors.bg.brand.bold.light};
-					border: 1px solid ${({ theme }) => theme.colors.border.brand.bold.light};
-
-					&:hover {
-						background-color: ${({ theme }) => theme.colors.bg.brand.bold.hover.light};
-					}
-
-					&:focus {
-						box-shadow: ${({ theme }) => theme.colors.shadow.buttonFocus};
-					}
-
-					&:active {
-						background-color: ${({ theme }) => theme.colors.bg.brand.bold.pressed.light};
-					}
-
-					&:disabled {
-						color: ${({ theme }) => theme.colors.fg.disabled.light};
-						background-color: ${({ theme }) => theme.colors.bg.disabled.light};
-						border: 1px solid ${({ theme }) => theme.colors.bg.disabled.light};
-					}
-				`;
-			case ButtonStyle.SECONDARY:
-				return css`
-					color: ${({ theme }) => theme.colors.fg.neutral.subtle.light};
-					background-color: ${({ theme }) => theme.colors.bg.neutral.white.light};
-					border: 1px solid ${({ theme }) => theme.colors.border.neutral.subtle.light};
-
-					&:hover {
-						background-color: ${({ theme }) => theme.colors.bg.brand.default.light};
-						border: 2px solid ${({ theme }) => theme.colors.border.brand.subtle.light};
-					}
-
-					&:focus {
-						box-shadow: ${({ theme }) => theme.colors.shadow.buttonFocus};
-					}
-
-					&:active {
-						background-color: ${({ theme }) => theme.colors.bg.brand.default.pressed.light};
-						border: 2px solid ${({ theme }) => theme.colors.border.brand.subtle.light};
-					}
-
-					&:disabled {
-						color: ${({ theme }) => theme.colors.fg.disabled.light};
-						background-color: ${({ theme }) => theme.colors.bg.neutral.white.light};
-						border: 1px solid ${({ theme }) => theme.colors.bg.disabled.light};
-					}
-				`;
-			case ButtonStyle.TERTIARY:
-				return css`
-					color: ${({ theme }) => theme.colors.fg.neutral.subtle.light};
-					background-color: ${({ theme }) => theme.colors.bg.neutral.white.light};
-					border: none;
-
-					&:hover {
-						background-color: ${({ theme }) => theme.colors.bg.brand.default.light};
-					}
-
-					&:focus {
-						box-shadow: ${({ theme }) => theme.colors.shadow.buttonFocus};
-					}
-
-					&:active {
-						background-color: ${({ theme }) => theme.colors.bg.brand.default.pressed.light};
-					}
-
-					&:disabled {
-						color: ${({ theme }) => theme.colors.fg.disabled.light};
-						background-color: ${({ theme }) => theme.colors.bg.neutral.white.light};
-					}
-				`;
-			default:
-				return '';
-		}
-	}}
-
-	/* size specific styles */
-	${({ size }) => {
-		switch (size) {
-			case ButtonSize.XS:
-				return css`
-					gap: ${({ theme }) => theme.spacing.xxs};
-					min-height: ${({ theme }) => theme.spacing.xl};
-					padding: ${({ theme }) => theme.spacing.xxs} ${({ theme }) => theme.spacing.xs};
-					font-size: ${({ theme }) => theme.font.size.body.xs};
-					font-weight: ${({ theme }) => theme.font.weight.medium};
-					line-height: ${({ theme }) => theme.font.lineHeight.body.xs};
-					letter-spacing: ${({ theme }) => theme.font.letterSpacing.body.md};
-					border-radius: ${({ theme }) => theme.borderRadius.xxs};
-				`;
-			case ButtonSize.SM:
-				return css`
-					gap: ${({ theme }) => theme.spacing.xxs};
-					min-height: ${({ theme }) => theme.spacing.xl};
-					padding: ${({ theme }) => theme.spacing.xxs} ${({ theme }) => theme.spacing.xs};
-					font-size: ${({ theme }) => theme.font.size.body.sm};
-					font-weight: ${({ theme }) => theme.font.weight.medium};
-					line-height: ${({ theme }) => theme.font.lineHeight.body.sm};
-					letter-spacing: ${({ theme }) => theme.font.letterSpacing.body.md};
-					border-radius: ${({ theme }) => theme.borderRadius.xxs};
-				`;
-			case ButtonSize.MD:
-				return css`
-					gap: ${({ theme }) => theme.spacing.xxs};
-					min-height: ${({ theme }) => theme.spacing.xxl};
-					padding: ${({ theme }) => theme.spacing.xs} ${({ theme }) => theme.spacing.sm};
-					font-size: ${({ theme }) => theme.font.size.body.sm};
-					font-weight: ${({ theme }) => theme.font.weight.medium};
-					line-height: ${({ theme }) => theme.font.lineHeight.body.sm};
-					letter-spacing: ${({ theme }) => theme.font.letterSpacing.body.md};
-					border-radius: ${({ theme }) => theme.borderRadius.xs};
-				`;
-			case ButtonSize.XL:
-				return css`
-					gap: ${({ theme }) => theme.spacing.xs};
-					min-height: ${({ theme }) => theme.spacing.xxxl};
-					padding: ${({ theme }) => theme.spacing.sm};
-					font-size: ${({ theme }) => theme.font.size.body.md};
-					font-weight: ${({ theme }) => theme.font.weight.medium};
-					line-height: ${({ theme }) => theme.font.lineHeight.body.md};
-					border-radius: ${({ theme }) => theme.borderRadius.xs};
-				`;
-			case ButtonSize.XXL:
-				return css`
-					gap: ${({ theme }) => theme.spacing.sm};
-					min-height: ${({ theme }) => theme.spacing.xxxxl};
-					padding: ${({ theme }) => theme.spacing.md} ${({ theme }) => theme.spacing.xl};
-					font-size: ${({ theme }) => theme.font.size.body.lg};
-					font-weight: ${({ theme }) => theme.font.weight.medium};
-					line-height: ${({ theme }) => theme.font.lineHeight.body.lg};
-					border-radius: ${({ theme }) => theme.borderRadius.sm};
-				`;
-			default:
-				return css`
-					border-radius: ${({ theme }) => theme.borderRadius.xxs};
-				`;
-		}
-	}}
-`;
-
-export const IconWrapperStyled = styled.div<Partial<Props>>`
-	display: flex;
-	align-items: center;
-	height: 100%;
-`;

package/src/components/button/button.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-
-import { ButtonSize, ButtonStyle, ButtonType } from './button.types';
-import Button from './button';
-import StyledComponentsThemeProvider from '@/provider/styledComponents/theme/styledComponentsThemeProvider';
-
-describe('Running Test for Button', () => {
-	test('Check Button Disabled', () => {
-		render(
-			<StyledComponentsThemeProvider>
-				<Button
-					buttonStyle={ButtonStyle.PRIMARY}
-					disabled={true}
-					size={ButtonSize.MD}
-					type={ButtonType.BUTTON}
-				>
-					Button
-				</Button>
-			</StyledComponentsThemeProvider>,
-		);
-		expect(screen.getByRole('button', { name: 'Button' })).toBeDisabled();
-	});
-});

package/src/components/button/button.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import React, { FC } from 'react';
-
-import { ButtonStyled, IconWrapperStyled } from './button.styles';
-import { ButtonType, Props } from './button.types';
-
-const Button: FC<Props> = (props) => {
-	const { buttonStyle, children, disabled = false, displayOnlyIcon = false, iconLeft, iconRight, onClick, size, type = ButtonType.BUTTON } = props;
-
-	return (
-		<ButtonStyled
-			buttonStyle={buttonStyle}
-			disabled={disabled}
-			displayOnlyIcon={displayOnlyIcon}
-			size={size}
-			type={type}
-			onClick={onClick}
-		>
-			{iconLeft !== undefined && <IconWrapperStyled size={size}>{iconLeft}</IconWrapperStyled>}
-			{!displayOnlyIcon && (
-				<>
-					{children}
-					{iconRight !== undefined && <IconWrapperStyled size={size}>{iconRight}</IconWrapperStyled>}
-				</>
-			)}
-		</ButtonStyled>
-	);
-};
-
-export default Button;

package/src/components/button/button.types.ts

@@ -1,33 +0,0 @@
-import { ReactNode } from 'react';
-
-export enum ButtonStyle {
-	PRIMARY = 'primary',
-	SECONDARY = 'secondary',
-	TERTIARY = 'tertiary',
-}
-
-export enum ButtonSize {
-	MD = 'md',
-	SM = 'sm',
-	XL = 'xl',
-	XS = 'xs',
-	XXL = 'xxl',
-}
-
-export enum ButtonType {
-	BUTTON = 'button',
-	RESET = 'reset',
-	SUBMIT = 'submit',
-}
-
-export interface Props {
-	buttonStyle: ButtonStyle;
-	children: ReactNode;
-	disabled?: boolean;
-	displayOnlyIcon?: boolean;
-	iconLeft?: ReactNode;
-	iconRight?: ReactNode;
-	onClick?: () => void;
-	size: ButtonSize;
-	type?: ButtonType;
-}

package/src/components/button/index.ts

@@ -1,3 +0,0 @@
-import Button from './button';
-
-export { Button };

package/src/components/form/hint/formHint.style.ts

@@ -1,10 +0,0 @@
-import { css } from 'styled-components';
-
-export const hint = css`
-	display: inline;
-	font-size: ${({ theme }) => theme.font.size.body.sm};
-	line-height: ${({ theme }) => theme.font.lineHeight.body.sm};
-	font-weight: ${({ theme }) => theme.font.weight.normal};
-	letter-spacing: ${({ theme }) => theme.font.letterSpacing.body.md};
-	color: ${({ theme }) => theme.colors.fg.neutral.subtle.light};
-`;

package/src/components/form/hint/formHint.tsx

@@ -1,13 +0,0 @@
-//TODO: this is mock
-
-import React from 'react';
-import { Props } from '@/components/form/hint/formHint.types';
-import { hint } from '@/components/form/hint/formHint.style';
-
-const FormHint: React.FC<Props> = (props) => {
-	const { children } = props;
-
-	return <span css={[hint]}>{children}</span>;
-};
-
-export default FormHint;

package/src/components/form/hint/formHint.types.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export interface Props {
-	readonly children: React.ReactNode;
-}

package/src/components/slider/slider/slider.stories.tsx

@@ -1,176 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, Parameters, StoryObj } from '@storybook/react';
-import Slider from '@/components/slider/slider/slider';
-import { MinMaxLabels, Props, SliderSteps, SliderStepType } from '@/components/slider/slider/slider.types';
-
-interface SliderParameters extends Parameters {
-	defaultValue: number;
-}
-
-const defaultValueParamName = 'defaultValue';
-
-const defaultMin = 100;
-const defaultMax = 1000;
-const defaultMinMaxLabels: MinMaxLabels = {
-	min: `${defaultMin} Kč`,
-	max: `${defaultMax} Kč`,
-};
-const argTypeMinMaxLabels = {
-	default: defaultMinMaxLabels,
-	undefined: undefined,
-};
-
-const meta = {
-	title: 'Slider/Slider',
-	component: Slider,
-	parameters: {},
-	tags: ['autodocs'],
-	argTypes: {
-		stepType: {
-			type: {
-				name: 'enum',
-				value: Object.values(SliderStepType),
-			},
-		},
-		value: {
-			table: {
-				disable: true,
-			},
-		},
-		onChange: {
-			table: {
-				disable: true,
-			},
-		},
-		disable: {
-			type: {
-				name: 'boolean',
-			},
-		},
-		minMaxLabels: {
-			defaultValue: argTypeMinMaxLabels.default,
-			options: Object.keys(argTypeMinMaxLabels),
-			mapping: argTypeMinMaxLabels,
-			control: {
-				type: 'radio',
-			},
-		},
-	},
-	decorators: [
-		(story, context) => {
-			const { args, parameters } = context;
-			const params: SliderParameters = parameters as SliderParameters;
-
-			const [value, setValue] = useState<number>(params[defaultValueParamName]);
-
-			return (
-				<>
-					{story({
-						args: {
-							...args,
-							value: value,
-							onChange: setValue,
-						},
-					})}
-					<span
-						style={{
-							fontSize: 32,
-						}}
-					>
-						{value.toLocaleString('cs-CZ')}
-					</span>
-				</>
-			);
-		},
-	],
-} satisfies Meta<typeof Slider>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultSteps: SliderSteps = {
-	baseStep: 2,
-	breakpointList: [
-		{
-			step: 50,
-			bottomBreakpoint: 500,
-		},
-	],
-};
-
-const defaultOnFinalChange = (value: number) => {
-	console.log('defaultOnFinalChange', value);
-};
-
-const defaultProps: Props = {
-	steps: defaultSteps,
-	min: defaultMin,
-	max: defaultMax,
-	onFinalChange: defaultOnFinalChange,
-	stepType: SliderStepType.DEFAULT,
-	// is overwritten in the decorator
-	onChange: () => {
-		console.log('mock');
-	},
-	value: Number.NaN, // is overwritten in the decorator
-	minMaxLabels: defaultMinMaxLabels,
-};
-
-export const Default: Story = {
-	args: {
-		...defaultProps,
-	},
-	parameters: ((): SliderParameters => {
-		return {
-			defaultValue: 200,
-		};
-	})(),
-};
-
-export const LinearVisualSteps: Story = {
-	args: {
-		...defaultProps,
-		stepType: SliderStepType.LINEAR_VISUAL_STEP,
-	},
-	parameters: ((): SliderParameters => {
-		return {
-			defaultValue: 200,
-		};
-	})(),
-};
-
-export const AirBankMortgage: Story = {
-	args: {
-		...defaultProps,
-		stepType: SliderStepType.LINEAR_VISUAL_STEP,
-		min: 334_000,
-		max: 38_000_000,
-		steps: {
-			baseStep: 16_000,
-			breakpointList: [
-				{
-					step: 25_000,
-					bottomBreakpoint: 350_000,
-				},
-				{
-					step: 50_000,
-					bottomBreakpoint: 1_500_000,
-				},
-				{
-					step: 100_000,
-					bottomBreakpoint: 2_500_000,
-				},
-				{
-					step: 2_500_000,
-					bottomBreakpoint: 10_000_000,
-				},
-			],
-		},
-	},
-	parameters: ((): SliderParameters => {
-		return {
-			defaultValue: 3_000_000,
-		};
-	})(),
-};