@mmb-digital/ds-lilly 1.0.0-alpha.82 → 1.0.0-alpha.84

package/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

package/.editorconfig

@@ -0,0 +1,10 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true

package/.eslintrc

@@ -0,0 +1,70 @@
+{
+  "ignorePatterns": ["scripts/", "dist/", "src/components/Components/Avatar/_parts_"],
+  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
+  "extends": [
+    "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    "plugin:prettier/recommended", // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    "plugin:mdx/recommended",
+    "plugin:react-hooks/recommended" // Enables checking rules of hooks
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
+    "sourceType": "module" // Allows for the use of imports
+  },
+  "plugins": [
+    "simple-import-sort",
+    "unused-imports",
+    "sort-destructure-keys",
+    "sort-keys-fix",
+    "import",
+    "no-only-tests"
+  ],
+  "rules": {
+    "react/jsx-fragments": ["warn", "element"],
+    "react/jsx-key": "off",
+    "react/jsx-sort-props": [
+      "error",
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "shorthandLast": false,
+        "ignoreCase": false,
+        "noSortAlphabetically": false,
+        "reservedFirst": true
+      }
+    ],
+    "no-only-tests/no-only-tests": "error",
+    "simple-import-sort/imports": 1,
+    "sort-destructure-keys/sort-destructure-keys": 1,
+    "no-alert": "warn",
+    "no-console": "warn",
+    "import/no-duplicates": ["error", { "considerQueryString": true }],
+    "no-unused-vars": "off",
+    "no-unused-imports": "off",
+    "unused-imports/no-unused-imports": 2,
+    "unused-imports/no-unused-vars": 1,
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "linebreak-style": ["warn", "unix"],
+    "@typescript-eslint/no-namespace": "off"
+  },
+  "overrides": [
+    {
+      "files": ["dist/types/**"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    },
+    {
+      "files": ["*.tsx"],
+      "rules": {
+        "mdx/no-unused-expressions": "off"
+      }
+    }
+  ],
+  "settings": {
+    "react": {
+      "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+    }
+  }
+}

package/.huskyrc

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "yarn check:c"
+  }
+}

package/.nvmrc

@@ -0,0 +1 @@
+v20.12.2

package/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    semi: false,
+    trailingComma: 'none',
+    singleQuote: true,
+    printWidth: 120,
+    tabWidth: 2,
+  }

package/.storybook/DocsContainer.tsx

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren, useEffect, useState } from 'react'
+import { DocsContainer as BaseContainer, DocsContainerProps as BaseContainerProps } from '@storybook/blocks'
+import { themes } from '@storybook/theming'
+import { addons } from '@storybook/preview-api'
+
+const DARK_MODE_EVENT_NAME = 'DARK_MODE'
+
+export const DocsContainer = ({ children, ...props }: PropsWithChildren<BaseContainerProps>) => {
+  const [isDark, setIsDark] = useState(document.body.classList.contains('dark'))
+
+  useEffect(() => {
+    const chan = addons.getChannel()
+    chan.on(DARK_MODE_EVENT_NAME, setIsDark)
+    return () => chan.off(DARK_MODE_EVENT_NAME, setIsDark)
+  }, [])
+
+  return (
+    <BaseContainer
+      {...props}
+      theme={isDark ? themes.dark : themes.light}
+    >
+      {children}
+    </BaseContainer>
+  )
+}

package/.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+import { mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  },
+  stories: ['../docs/Intro.stories.tsx', '../docs/**/*.tsx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../docs/assets'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    'storybook-dark-mode',
+    '@storybook/addon-designs'
+    // 'storybook-addon-css-user-preferences'
+  ],
+  docs: {
+    autodocs: true,
+    defaultName: 'Dokumentace',
+  }
+}
+
+export default config

package/.storybook/manager.ts

@@ -0,0 +1,34 @@
+import { addons } from '@storybook/manager-api'
+import { create } from '@storybook/theming/create'
+// import { themes } from '@storybook/theming'
+
+const lightTheme = create({
+  base: 'light',
+  brandTitle: 'moneta storybook',
+  brandImage: 'https://www.moneta.cz/documents/20143/3348658/moneta-logo.svg/bb49eb5a-eee0-77e1-32b9-fa93855af13b',
+  brandUrl: 'https://moneta.cz',
+  brandTarget: '_blank',
+  fontBase:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
+  fontCode: 'monospace'
+})
+
+const darkTheme = create({
+  base: 'dark',
+  brandTitle: 'moneta storybook',
+  brandImage: 'https://www.moneta.cz/documents/20143/3348658/moneta-logo.svg/bb49eb5a-eee0-77e1-32b9-fa93855af13b',
+  brandUrl: 'https://moneta.cz',
+  brandTarget: '_blank',
+  fontBase:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
+  fontCode: 'monospace',
+  appBg: 'black',
+  appContentBg: 'black'
+})
+
+// addons.setConfig({
+//   theme: lightTheme
+// })
+// addons.setConfig({
+//   theme: darkTheme
+// })

package/.storybook/preview.tsx

@@ -0,0 +1,72 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { Controls, Description, Stories, Subtitle, Title } from '@storybook/blocks'
+import { ThemeProvider, ensure, themes } from '@storybook/theming'
+import { addons } from '@storybook/preview-api'
+
+import { Preview, StoryContext, StoryFn } from '@storybook/react'
+import React, { useEffect, useState } from 'react'
+import { useDarkMode } from 'storybook-dark-mode'
+import { BrowserRouter } from 'react-router-dom'
+import { DocsContainer } from './DocsContainer'
+
+const DARK_MODE_EVENT_NAME = 'DARK_MODE'
+
+const ThemeDecorator = (Story: StoryFn, context: StoryContext) => {
+  const [isDark, setIsDark] = useState(document.body.classList.contains('dark'))
+
+  useEffect(() => {
+    const chan = addons.getChannel()
+    chan.on(DARK_MODE_EVENT_NAME, setIsDark)
+    return () => chan.off(DARK_MODE_EVENT_NAME, setIsDark)
+  }, [])
+  const theme = ensure(isDark ? themes.dark : themes.light)
+  useEffect(() => {
+    document.getElementsByTagName('body')[0].style.backgroundColor = theme.background.app
+  }, [theme])
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Story {...context} />
+    </ThemeProvider>
+  )
+}
+
+export const decorators = [
+  ThemeDecorator,
+  (Story) => (
+    <BrowserRouter>
+      <Story />
+    </BrowserRouter>
+  )
+]
+
+export const parameters: Preview['parameters'] = {
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+      boolean: /is.*$/
+    }
+  },
+  docs: {
+    container: DocsContainer,
+    page: () => (
+      <>
+        <Title />
+        <Subtitle />
+        <Description />
+        <Controls />
+        <Stories />
+      </>
+    )
+  },
+  darkMode: {
+    dark: { ...themes.dark },
+    light: { ...themes.light },
+    stylePreview: true,
+    darkClass: 'dark'
+  },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS
+  }
+}

package/.stylelintrc

@@ -0,0 +1,16 @@
+{
+  'extends': 'stylelint-config-sass-guidelines',
+  'plugins': ['@namics/stylelint-bem'],
+  'rules':
+    {
+      'max-nesting-depth': null,
+      'property-no-vendor-prefix': null,
+      'scss/dollar-variable-pattern': null,
+      'selector-class-pattern': null,
+      'selector-no-qualifying-type': null,
+      'scss/at-mixin-pattern': null,
+      'order/order':
+        [['custom-properties', 'dollar-variables', 'declarations', 'rules']],
+    },
+  'ignoreFiles': ['src/scss/component/_dateTime.scss', 'src/scss/form/**'],
+}

package/.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  },
+  "github.copilot.enable": {
+    "*": true,
+    "yaml": false,
+    "plaintext": false,
+    "markdown": false,
+    "scminput": false
+  }
+}

package/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/README.md

@@ -0,0 +1,10 @@
+# Design system Lilly
+
+## How to versioning
+
+We are using [Semver](https://www.npmjs.com/package/semver) **MAJOR.MINOR.PATCH[-SUFFIX]**:
+
+* **MAJOR** - incompatible API changes
+* **MINOR** - add functionality (backwards-compatible)
+* **PATCH** - bug fixes (backwards-compatible)
+* **-SUFFIX** - pre-release or for testing purposes only

package/cypress/plugins/index.ts

@@ -0,0 +1,30 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+import { devServer } from '@cypress/vite-dev-server'
+import react from '@vitejs/plugin-react'
+
+module.exports = (on, config) => {
+  if (config.testingType === 'component') {
+    // eslint-disable-next-line
+    on('dev-server:start', (options: any) => {
+      return devServer({
+        ...options,
+        viteConfig: {
+          plugins: [react()]
+        },
+        framework: 'react'
+      })
+    })
+  }
+}

package/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en-gb">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>test</title>
+  </head>
+  <body>
+    <div id="__cy_root" data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts

@@ -0,0 +1,41 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+import 'cypress-react-selector'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+import { mount } from 'cypress/react'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  export namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+      // eslint-disable-next-line
+      react(component: string, props?: Record<string, any>, state?: Record<string, any>): Chainable<Element>
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

package/cypress/support/e2e.ts

@@ -0,0 +1,18 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+import 'cypress-react-selector'

package/cypress/support/index.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+import 'cypress-react-selector'

package/cypress.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  env: {
+    'cypress-react-selector': {
+      root: '#__cy_root'
+    }
+  },
+  component: {
+    video: false,
+    specPattern: 'src/**/*.test.{js,ts,jsx,tsx}',
+    devServer: {
+      framework: 'react',
+      bundler: 'vite'
+    }
+  }
+})