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

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/dist/jest.config.d.ts

@@ -0,0 +1,7 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+import type { Config } from 'jest';
+declare const config: Config;
+export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmb-digital/design-system-web",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "MMB design-system-web",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -79,7 +79,6 @@
     "rollup-plugin-dts": "6.1.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-typescript2": "0.36.0",
     "storybook": "7.6.12",
     "styled-components": "6.1.8",
     "stylelint": "15.11.0",

package/rollup.config.js

@@ -1,8 +1,7 @@
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
-// import typescript from 'rollup-plugin-typescript2';
-import dts from 'rollup-plugin-dts';
+// import dts from 'rollup-plugin-dts';
 import { terser } from 'rollup-plugin-terser';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
@@ -32,7 +31,6 @@ export default [
 		],
 		external: ['react', 'react-dom', 'styled-components'],
 	},
-
 	// {
 	// 	input: 'src/index.ts',
 	// 	output: [{ file: 'dist/types.d.ts', format: 'es' }],

package/tsconfig.json

@@ -9,8 +9,7 @@
     "declaration": true,
     "declarationDir": "dist",
     "sourceMap": true,
-//    "outDir": "dist",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "emitDeclarationOnly": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,

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;
-}