Big Refactoring; Updates; 2D-Matrix; Dashboard; Prepare dnd (YeonV#64)

* update + prepare dnd

* 2D Virtual

* Remove defaultProps

* fix yarn & eslint madness.

* fix storybook

* .

* add move selected group in matrix functions

* dnd elements

* auto-generate dummy for gaps

* utilize flip parameter for matrix to segments translation

* Extend Dashboard with Status and Actions

* cleanup

* enable dnd for single pixels; update ui

* update virtuals segments on save

* madness

* .

* linting

* linting

* .

* .

* .

---------

Co-authored-by: Yeon Vinzenz Varapragasam <[email protected]>

.gitignore

@@ -37,3 +37,4 @@ extraResources/*
 .yarn_cache/*
 
 BladeTools.pfx
+storybook.log

.prettierrc

@@ -1,5 +1,6 @@
 {
     "singleQuote": true,
     "semi": false,
-    "trailingComma": "none"
+    "trailingComma": "none",
+    "endOfLine": "auto"
 }

.storybook/main.ts

@@ -1,14 +1,24 @@
 module.exports = {
-  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-create-react-app", "@storybook/addon-mdx-gfm"],
-  "framework": {
-    name: "@storybook/react-webpack5",
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-mdx-gfm'
+  ],
+
+  framework: {
+    name: '@storybook/react-webpack5',
     options: {}
   },
+
   core: {
     disableTelemetry: true
   },
-  docs: {
-    autodocs: true
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
   }
-};
+}

.storybook/manager.ts

@@ -1,11 +1,11 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/addons'
 // import { themes } from '@storybook/theming';
-import storyTheme from './storyTheme';
+import storyTheme from './storyTheme'
 
 addons.setConfig({
   theme: storyTheme,
   toolbar: {
-    zoom: { hidden: true },
+    zoom: { hidden: true }
   },
-  panelPosition: 'right',
-});
+  panelPosition: 'right'
+})

.storybook/preview.tsx

@@ -1,36 +1,44 @@
-import React from 'react';
-import { ThemeProvider } from '@mui/styles';
-import { BladeDarkTheme } from '../src/themes/AppThemes';
-import storyTheme from './storyTheme';
+import React from 'react'
+import { ThemeProvider } from '@mui/styles'
+// import { fn } from '@storybook/test'
+import { BladeDarkTheme } from '../src/themes/AppThemes'
+import storyTheme from './storyTheme'
 import './globals.css'
 
 export const decorators = [
   (Story: any) => (
     <ThemeProvider theme={BladeDarkTheme}>
-        <Story />
+      <Story />
     </ThemeProvider>
   )
-];
+]
 
 export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: [ 'BladeBook', ['Introduction', 'Getting Started', 'App Structure', 'Guides'], 'UI Components',['Default', 'Examples', 'Components',['*', 'Color'] ], 'Api'],
-    },
+      order: [
+        'BladeBook',
+        ['Introduction', 'Getting Started', 'App Structure', 'Guides'],
+        'UI Components',
+        ['Default', 'Examples', 'Components', ['*', 'Color']],
+        'Api'
+      ]
+    }
   },
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  // actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color|stroke|currentColor)$/i,
-      date: /Date$/,
-    },
+      date: /Date$/
+    }
   },
   docs: {
     theme: storyTheme,
     source: {
       type: 'dynamic',
-      excludeDecorators: true,
-    },
-  },
-};
+      excludeDecorators: true
+    }
+  }
+}
+export const tags = ['autodocs']

.storybook/storyTheme.ts

@@ -1,8 +1,10 @@
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming'
 
 export default create({
   base: 'dark',
+  // eslint-disable-next-line prettier/prettier
   brandTitle: 'Blade\'s Storybook',
   brandUrl: 'https://yeonv.com',
-  brandImage: 'https://user-images.githubusercontent.com/28861537/119760144-c5126680-bea9-11eb-991a-c08eedbc5929.png',
-});
+  brandImage:
+    'https://user-images.githubusercontent.com/28861537/119760144-c5126680-bea9-11eb-991a-c08eedbc5929.png'
+})

eslint.config.mjs

@@ -0,0 +1,103 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import prettier from 'eslint-plugin-prettier'
+import tsParser from '@typescript-eslint/parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all
+})
+
+export default [
+  {
+    ignores: ['**/build/*', '**/*.js', '**/*.jsx', 'extraResources/**']
+  },
+  ...compat.extends(
+    'standard',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended'
+  ),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      'prettier/prettier': prettier
+    },
+
+    languageOptions: {
+      parser: tsParser
+    },
+
+    settings: {
+      'import/parsers': {
+        '@typescript-eslint/parser': ['.ts', '.tsx']
+      },
+
+      'import/resolver': {
+        typescript: {},
+
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx']
+        }
+      },
+
+      'typescript.format.semicolons': 'remove',
+      'javascriptscript.format.semicolons': 'remove'
+    },
+    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+    rules: {
+      'no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_'
+        }
+      ],
+      'react-hooks/rules-of-hooks': 'warn',
+      'react-hooks/exhaustive-deps': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_'
+        }
+      ],
+      quotes: [2, 'single'],
+      'max-len': [
+        'error',
+        {
+          code: 900,
+          ignoreComments: true,
+          ignoreUrls: true,
+          ignoreStrings: true
+        }
+      ],
+      'object-curly-newline': 'off',
+      'comma-dangle': 'off',
+      'import/no-named-as-default': 0,
+      'import/no-named-as-default-member': 0,
+      'import/no-amd': 0,
+      'import/no-mutable-exports': 0,
+      'import/newline-after-import': 0,
+      'no-nested-ternary': 0,
+      'import/extensions': 0,
+      'import/first': 0,
+      '@typescript-eslint/indent': [2, 2],
+      'react/react-in-jsx-scope': 'off',
+      'react/function-component-definition': [0],
+      'react/jsx-props-no-spreading': 0,
+      'react/require-default-props': 'off',
+      'react/prop-types': 'off',
+      'no-plusplus': 0,
+      semi: ['error', 'never'],
+      camelcase: 0,
+      'react/no-array-index-key': 0,
+      '@typescript-eslint/no-explicit-any': 0,
+      '@prettier/trailing-comma': 0,
+      'jsx-a11y/label-has-associated-control': 0
+    }
+  }
+]