@mmb-digital/design-system-web 0.1.0

package/jest.config.ts

@@ -0,0 +1,197 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+import type { Config } from 'jest';
+
+const config: Config = {
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
+
+  // Stop running tests after `n` failures
+  // bail: 0,
+
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "C:\\Users\\543832212\\AppData\\Local\\Temp\\jest",
+
+  // Automatically clear mock calls, instances, contexts and results before every test
+  // clearMocks: false,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  // collectCoverage: false,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  // collectCoverageFrom: undefined,
+
+  // The directory where Jest should output its coverage files
+  // coverageDirectory: undefined,
+
+  // An array of regexp pattern strings used to skip coverage collection
+  // coveragePathIgnorePatterns: [
+  //   "\\\\node_modules\\\\"
+  // ],
+
+  // Indicates which provider should be used to instrument code for coverage
+  // coverageProvider: "babel",
+
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
+
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: undefined,
+
+  // A path to a custom dependency extractor
+  // dependencyExtractor: undefined,
+
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
+
+  // The default configuration for fake timers
+  // fakeTimers: {
+  //   "enableGlobally": false
+  // },
+
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
+
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: undefined,
+
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: undefined,
+
+  // A set of global variables that need to be available in all test environments
+  // globals: {},
+
+  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+  // maxWorkers: "50%",
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  moduleDirectories: ['node_modules', '<rootDir>/src'],
+
+  // An array of file extensions your modules use
+  // moduleFileExtensions: [
+  //   "js",
+  //   "mjs",
+  //   "cjs",
+  //   "jsx",
+  //   "ts",
+  //   "tsx",
+  //   "json",
+  //   "node"
+  // ],
+
+  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
+
+  // Activates notifications for test results
+  // notify: false,
+
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
+
+  // A preset that is used as a base for Jest's configuration
+  // preset: undefined,
+
+  // Run tests from one or more projects
+  // projects: undefined,
+
+  // Use this configuration option to add custom reporters to Jest
+  // reporters: undefined,
+
+  // Automatically reset mock state before every test
+  // resetMocks: false,
+
+  // Reset the module registry before running each individual test
+  // resetModules: false,
+
+  // A path to a custom resolver
+  // resolver: undefined,
+
+  // Automatically restore mock state and implementation before every test
+  // restoreMocks: false,
+
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: undefined,
+
+  // A list of paths to directories that Jest should use to search for files in
+  roots: ['<rootDir>/src'],
+
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  // setupFilesAfterEnv: [],
+
+  // The number of seconds after which a test is considered as slow and reported as such in the results.
+  // slowTestThreshold: 5,
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
+
+  // The test environment that will be used for testing
+  testEnvironment: 'jsdom',
+
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
+
+  // Adds a location field to test results
+  // testLocationInResults: false,
+
+  // The glob patterns Jest uses to detect test files
+  // testMatch: [
+  //   "**/__tests__/**/*.[jt]s?(x)",
+  //   "**/?(*.)+(spec|test).[tj]s?(x)"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  // testPathIgnorePatterns: [
+  //   "\\\\node_modules\\\\"
+  // ],
+
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
+
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: undefined,
+
+  // This option allows use of a custom test runner
+  // testRunner: "jest-circus/runner",
+
+  // A map from regular expressions to paths to transformers
+  // transform: undefined,
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  // transformIgnorePatterns: [
+  //   "\\\\node_modules\\\\",
+  //   "\\.pnp\\.[^\\\\]+$"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+  // unmockedModulePathPatterns: undefined,
+
+  // Indicates whether each individual test should be reported during the run
+  // verbose: undefined,
+
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+};
+
+export default config;

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@mmb-digital/design-system-web",
+  "version": "0.1.0",
+  "description": "MMB design-system-web",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "repository": "https://bitbucket.lb.mbid.cz/scm/react/design-system-web.git",
+  "author": "Kasman, Samuel (MONETA,consultant) <samuel.kasman@moneta.cz>",
+  "license": "UNLICENSED",
+  "private": false,
+  "engines": {
+    "node": ">=16.20 <17"
+  },
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs",
+    "l": "yarn eslint src",
+    "lint:fix": "yarn eslint --fix",
+    "lf": "yarn lint:fix",
+    "prettier": "./node_modules/.bin/prettier --check \"src/**/*.tsx\" \"src/**/*.ts\"",
+    "p": "yarn prettier",
+    "prettier:fix": "yarn prettier --write",
+    "pf": "yarn prettier:fix",
+    "tsc": "./node_modules/.bin/tsc -p ./tsconfig.json --strict",
+    "storybook": "storybook dev -p 6006",
+    "sb": "yarn storybook",
+    "build-storybook": "storybook build",
+    "stylelint": "stylelint \"./src/**/*.ts\" \"./src/**/*.tsx\"",
+    "sl": "yarn stylelint",
+    "jest": "jest",
+    "j": "yarn jest",
+    "jest:watch": "jest --watch",
+    "jw": "yarn jest:watch"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "7.23.9",
+    "@babel/preset-react": "7.23.3",
+    "@babel/preset-typescript": "7.23.3",
+    "@rollup/plugin-commonjs": "25.0.7",
+    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-typescript": "11.1.6",
+    "@storybook/addon-essentials": "7.6.12",
+    "@storybook/addon-interactions": "7.6.12",
+    "@storybook/addon-links": "7.6.12",
+    "@storybook/blocks": "7.6.12",
+    "@storybook/react": "7.6.12",
+    "@storybook/react-webpack5": "7.6.12",
+    "@storybook/testing-library": "0.0.14-next.2",
+    "@testing-library/jest-dom": "6.4.0",
+    "@testing-library/react": "14.2.0",
+    "@testing-library/user-event": "14.5.2",
+    "@types/base-64": "1.0.2",
+    "@types/jest": "29.5.11",
+    "@types/react": "18.2.48",
+    "@types/styled-components": "5.1.34",
+    "@typescript-eslint/eslint-plugin": "6.20.0",
+    "@typescript-eslint/parser": "6.20.0",
+    "babel-plugin-styled-components": "2.1.4",
+    "base-64": "1.0.0",
+    "eslint": "8.56.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-sort-destructure-keys": "1.5.0",
+    "eslint-plugin-storybook": "0.6.15",
+    "eslint-plugin-typescript-sort-keys": "3.1.0",
+    "eslint-plugin-unicorn": "51.0.1",
+    "husky": "8.0.3",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "lint-staged": "14.0.1",
+    "postcss-styled-syntax": "0.6.4",
+    "prettier": "3.2.4",
+    "prop-types": "15.8.1",
+    "rc-slider": "10.5.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "3.29.4",
+    "rollup-plugin-dts": "6.1.0",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-terser": "7.0.2",
+    "storybook": "7.6.12",
+    "styled-components": "6.1.8",
+    "stylelint": "15.11.0",
+    "stylelint-config-recess-order": "4.4.0",
+    "stylelint-config-standard": "34.0.0",
+    "ts-node": "10.9.2",
+    "typescript": "5.3.3"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
+  "lint-staged": {
+    "*.{js,ts}": "l",
+    "*.{css,scss}": "sl"
+  }
+}

package/readme.md

@@ -0,0 +1,39 @@
+design-system-web (react components library)
+
+Prerequisities:
+
+- node v16.20.2
+- yarn v1.22.19
+
+Startup:
+
+- checkout repo
+
+- run in command prompt:
+  "set HTTP_PROXY=http://{USER_SSO}:{SSO_PASSWORD}@wsa.lb.mbid.cz:8008"
+  "set HTTPS_PROXY=http://{USER_SSO}:{SSO_PASSWORD}@wsa.lb.mbid.cz:8008"
+  "set NO_PROXY=sourcerepos,artifactory,rhproxy,bitbucket,.ux.mbid.cz,.lb.mbid.cz,.mbid.cz"
+  "set NODE_OPTIONS=--max-old-space-size=8192"
+  "set Path={NODE_PATH};%Path%"
+
+- "yarn"
+
+Scripts:
+
+- fix lint errors
+  "yarn lint:fix"
+
+- fix prettier errors
+  "yarn prettier:fix"
+
+- storybook dev
+  "yarn storybook"
+
+- storybook build
+  "yarn storybook:build"
+
+- run jest tests
+  "yarn test"
+
+- rollup bundle
+  "yarn build"

package/rollup.config.js

@@ -0,0 +1,33 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import dts from 'rollup-plugin-dts';
+import { terser } from 'rollup-plugin-terser';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+
+const packageJson = require('./package.json');
+
+export default [
+	{
+		input: 'src/index.ts',
+		output: [
+			{
+				file: packageJson.main,
+				format: 'cjs',
+				sourcemap: true,
+			},
+			{
+				file: packageJson.module,
+				format: 'esm',
+				sourcemap: true,
+			},
+		],
+		plugins: [peerDepsExternal(), resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' }), terser()],
+		external: ['react', 'react-dom', 'styled-components'],
+	},
+	{
+		input: 'src/index.ts',
+		output: [{ file: 'dist/types.d.ts', format: 'es' }],
+		plugins: [dts.default()],
+	},
+];

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

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

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,162 @@
+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

@@ -0,0 +1,25 @@
+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();
+	});
+});