@mmb-digital/ds-lilly 0.11.13 → 0.11.14

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/Icon/_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/.husky/common.sh

@@ -0,0 +1,8 @@
+command_exists () {
+  command -v "$1" >/dev/null 2>&1
+}
+
+# Workaround for Windows 10, Git Bash and Yarn
+if command_exists winpty && test -t 1; then
+  exec < /dev/tty
+fi

package/.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+yarn sort-package-json
+yarn check:c

package/.husky/pre-push

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+yarn check:p

package/.huskyrc

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

package/.nvmrc

@@ -0,0 +1 @@
+v18.17.0

package/.prettierrc.js

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

package/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  },
+  stories: ['../docs/**/*.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../docs/assets'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-mdx-gfm',
+    'storybook-dark-mode',
+    '@storybook/addon-interactions'
+  ],
+  features: {
+    legacyMdx1: true
+  }
+}
+
+export default config

package/.storybook/preview.ts

@@ -0,0 +1,37 @@
+import { DocsPage, DocsContainer } from '@storybook/addon-docs'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { themes } from '@storybook/theming'
+
+export const parameters = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  },
+  layout: 'fullscreen',
+  darkMode: {
+    current: 'light',
+    dark: themes.normal,
+    light: {
+      ...themes.normal,
+      brandImage: 'https://www.moneta.cz/documents/20143/3348658/moneta-logo.svg/bb49eb5a-eee0-77e1-32b9-fa93855af13b',
+      brandTitle: 'MONETA LILLY'
+    },
+    stylePreview: true,
+    classTarget: 'body'
+  },
+  options: {
+    showPanel: true,
+    panelPosition: 'bottom'
+  },
+  docs: {
+    container: DocsContainer,
+    page: DocsPage
+  },
+  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,7 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  }
+}

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'
+    }
+  }
+})

package/docs/Colors.stories.mdx

@@ -0,0 +1,112 @@
+import { Canvas, Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
+
+<Meta title="Docs/Colors" />
+
+# Colors
+
+### Red palette
+
+<ColorPalette>
+  <ColorItem subtitle="redLightest" title="Red Lightest" colors={['#ffe9ea']} />
+  <ColorItem subtitle="redNormal" title="Red Normal" colors={['#ed1c23']} />
+  <ColorItem subtitle="redDark" title="Red Dark" colors={['#d61a1f']} />
+  <ColorItem subtitle="redDarker" title="Red Darker" colors={['#cb1017']} />
+  <ColorItem subtitle="redHover" title="Red Hover" colors={['#d61a1f']} />
+  <ColorItem subtitle="redActive" title="Red Active" colors={['#cb1017']} />
+</ColorPalette>
+
+### Green palette
+
+<ColorPalette>
+  <ColorItem title="Green Lightest" subtitle="greenLightest" colors={['#e9ffef']} />
+  <ColorItem title="Green Normal" subtitle="greenNormal" colors={['#3fb360']} />
+  <ColorItem title="Green Dark" subtitle="greenDark" colors={['#33914d']} />
+  <ColorItem title="Green Darker" subtitle="greenDarker" colors={['#297541']} />
+  <ColorItem title="Green Darkest" subtitle="greenDarkest" colors={['#174225']} />
+  <ColorItem title="Green Hover" subtitle="greenHover" colors={['#33914d']} />
+  <ColorItem title="Green Active" subtitle="greenActive" colors={['#297541']} />
+</ColorPalette>
+
+### Orange palette
+
+<ColorPalette>
+  <ColorItem title="Orange Lightest" subtitle="orangeLightest" colors={['#fff6df']} />
+  <ColorItem title="Orange Normal" subtitle="orangeNormal" colors={['#ff9100']} />
+  <ColorItem title="Orange Dark" subtitle="orangeDark" colors={['#ce7600']} />
+  <ColorItem title="Orange Darker" subtitle="orangeDarker" colors={['#b46805']} />
+  <ColorItem title="Orange Hover" subtitle="orangeHover" colors={['#ce7600']} />
+  <ColorItem title="Orange Active" subtitle="orangeActive" colors={['#b46805']} />
+</ColorPalette>
+
+### Blue palette
+
+<ColorPalette>
+  <ColorItem title="Blue Lightest" subtitle="blueLightest" colors={['#e4e7f5']} />
+  <ColorItem title="Blue Lighter" subtitle="blueLighter" colors={['#9c97b9']} />
+  <ColorItem title="Blue Light" subtitle="blueLight" colors={['#665e91']} />
+  <ColorItem title="Blue Normal" subtitle="primaryNormal" colors={['#554c85']} />
+  <ColorItem title="Blue Dark" subtitle="blueDark" colors={['#403677']} />
+  <ColorItem title="Blue Darker" subtitle="blueDarker" colors={['#140757']} />
+  <ColorItem title="Blue Darkest" subtitle="blueDarkest" colors={['#0f0541']} />
+  <ColorItem title="Blue Hover" subtitle="blueHover" colors={['#665e91']} />
+  <ColorItem title="Blue Active" subtitle="blueDarkest" colors={['#403677']} />
+</ColorPalette>
+
+### Cloud palette
+
+<ColorPalette>
+  <ColorItem title="Cloud Lightest" subtitle="cloudLightest" colors={['#f0f4f6']} />
+  <ColorItem title="Cloud Lighter" subtitle="cloudLighter" colors={['#e7e6ee']} />
+  <ColorItem title="Cloud Light" subtitle="cloudLight" colors={['#d0cddd']} />
+  <ColorItem title="Cloud Normal" subtitle="cloudNormal" colors={['#bbb9c7']} />
+  <ColorItem title="Cloud Dark" subtitle="cloudDark" colors={['#9a98ae']} />
+  <ColorItem title="Cloud Darker" subtitle="cloudDarker" colors={['#78768d']} />
+  <ColorItem title="Cloud Hover" subtitle="cloudHover" colors={['#9a98ae']} />
+  <ColorItem title="Cloud Active" subtitle="cloudActive" colors={['#78768d']} />
+</ColorPalette>
+
+### Cherry palette
+
+<ColorPalette>
+  <ColorItem title="Cherry Lightest" subtitle="cherryLightest" colors={['#f5e7ed']} />
+  <ColorItem title="Cherry Lighter" subtitle="cherryLighter" colors={['#c97498']} />
+  <ColorItem title="Cherry Light" subtitle="cherryLight" colors={['#b74676']} />
+  <ColorItem title="Cherry Normal" subtitle="cherryNormal" colors={['#a51854']} />
+  <ColorItem title="Cherry Dark" subtitle="cherryDark" colors={['#95164c']} />
+  <ColorItem title="Cherry Darker" subtitle="cherryDarker" colors={['#761040']} />
+  <ColorItem title="Cherry Darkest" subtitle="cherryDarkest" colors={['#640e36']} />
+  <ColorItem title="Cherry Hover" subtitle="cherryHover" colors={['#95164c']} />
+  <ColorItem title="Cherry Active" subtitle="cherryActive" colors={['#761040']} />
+</ColorPalette>
+
+### Grey palette
+
+<ColorPalette>
+  <ColorItem title="Grey Lightest" subtitle="greyLightest" colors={['#f5f5f5']} />
+  <ColorItem title="Grey Lighter" subtitle="greyLighter" colors={['#e9ecef']} />
+  <ColorItem title="Grey Light" subtitle="greyLight" colors={['#d9d9db']} />
+  <ColorItem title="Grey Normal" subtitle="greyNormal" colors={['#a3a1a8']} />
+  <ColorItem title="Grey Dark" subtitle="greyDark" colors={['#737373']} />
+  <ColorItem title="Grey Darker" subtitle="greyDarker" colors={['#222']} />
+  <ColorItem title="Grey Darkest" subtitle="greyDarkest" colors={['#191919']} />
+  <ColorItem title="Grey Hover" subtitle="greyHover" colors={['#737373']} />
+  <ColorItem title="Grey Active" subtitle="greyActive" colors={['#222']} />
+</ColorPalette>
+
+### Category palette
+
+<ColorPalette>
+  <ColorItem title="Category Yellow" subtitle="categoryYellow" colors={['#ffd200']} />
+  <ColorItem title="Category Orange" subtitle="categoryOrange" colors={['#fa9646']} />
+  <ColorItem title="Category Pink" subtitle="categoryPink" colors={['#b74676']} />
+  <ColorItem title="Category Cherry" subtitle="categoryCherry" colors={['#a51854']} />
+  <ColorItem title="Category Violet" subtitle="categoryViolet" colors={['#966ebe']} />
+  <ColorItem title="Category OceanBlue" subtitle="categoryOceanBlue" colors={['#3c64c8']} />
+  <ColorItem title="Category SkyBlue" subtitle="categorySkyBlue" colors={['#aad2f0']} />
+  <ColorItem title="Category MidnightBlue" subtitle="categoryMidnightBlue" colors={['#3d4552']} />
+  <ColorItem title="Category SemiBlue" subtitle="categorySemiBlue" colors={['#d0cddd']} />
+  <ColorItem title="Category Torquise" subtitle="categoryTorquise" colors={['#64bed2']} />
+  <ColorItem title="Category MintGreen" subtitle="categoryMintGreen" colors={['#6c9']} />
+  <ColorItem title="Category ForestGreen" subtitle="categoryForestGreen" colors={['#50825a']} />
+  <ColorItem title="Category OliveGreen" subtitle="categoryOliveGreen" colors={['#c2cc8f']} />
+</ColorPalette>