Merge pull request #1 from bethinkpl/IT-3548_config_dev_dependecies

.eslintrc.js

@@ -0,0 +1,111 @@
+module.exports = {
+	plugins: ['import', '@typescript-eslint'],
+	extends: ['eslint:recommended', 'plugin:vue/recommended', 'prettier', 'prettier/vue'],
+	env: {
+		browser: true,
+		node: true,
+		es6: true,
+		amd: true,
+		jest: true,
+	},
+	parser: 'vue-eslint-parser',
+	parserOptions: {
+		ecmaVersion: 2018,
+		sourceType: 'module',
+		parser: '@typescript-eslint/parser',
+	},
+	rules: {
+		'key-spacing': ['error', { afterColon: true }],
+		'keyword-spacing': ['error'],
+		'linebreak-style': ['error', 'unix'],
+		'no-unused-vars': 'off',
+		'object-curly-spacing': ['error', 'always'],
+		'object-shorthand': ['error', 'always'],
+		'quote-props': ['error', 'as-needed'],
+		yoda: ['error', 'never', { exceptRange: true }],
+		'brace-style': [
+			'error',
+			'1tbs',
+			{
+				allowSingleLine: true,
+			},
+		],
+		// https://eslint.org/docs/rules/dot-notation#allowpattern
+		'dot-notation': [
+			'error',
+			{
+				allowPattern: '^[a-z]+(_[a-z]+)+$',
+			},
+		],
+		'@typescript-eslint/no-loss-of-precision': 'error',
+		'no-template-curly-in-string': 'error',
+		'no-eval': 'error',
+		'no-sequences': 'error',
+		'no-throw-literal': 'error',
+		'no-void': 'error',
+		// @typescript-eslint/parser doesn't work well with import/no-relative-parent-imports
+		// https://github.com/benmosher/eslint-plugin-import/issues/1610
+		'no-else-return': ['error', { allowElseIf: false }],
+
+		// typescript
+		'@typescript-eslint/adjacent-overload-signatures': ['error'],
+		'@typescript-eslint/array-type': ['error', { default: 'generic' }],
+		'@typescript-eslint/ban-tslint-comment': ['error'],
+		'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+		'@typescript-eslint/no-empty-interface': 'error',
+		'@typescript-eslint/no-this-alias': 'error',
+		'@typescript-eslint/no-extra-non-null-assertion': 'error',
+		'@typescript-eslint/no-misused-new': 'error',
+		'@typescript-eslint/prefer-as-const': 'error',
+		'@typescript-eslint/no-non-null-assertion': 'error',
+
+		// Plugins
+		'import/no-restricted-imports': 0,
+		'import/no-relative-parent-imports': 0,
+		'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+		'vue/attributes-order': ['error'],
+		'vue/component-tags-order': [
+			'error',
+			{
+				order: ['template', 'style', 'script'],
+			},
+		],
+		'vue/keyword-spacing': ['error'],
+		// We use v-html a lot
+		'vue/no-v-html': ['off'],
+		// The two below don't seem useful
+		'vue/singleline-html-element-content-newline': ['off'],
+		'vue/multiline-html-element-content-newline': ['off'],
+
+		'vue/no-useless-mustaches': 'error',
+		'vue/no-useless-v-bind': 'error',
+		'vue/padding-line-between-blocks': 'error',
+		'vue/require-direct-export': 'error',
+		'vue/v-on-function-call': 'error',
+		'vue/require-name-property': 'error',
+		'vue/match-component-file-name': [
+			'error',
+			{
+				extensions: ['vue'],
+			},
+		],
+		'vue/no-empty-component-block': 'error',
+		'vue/no-multiple-objects-in-class': 'error',
+		'vue/no-potential-component-option-typo': 'error',
+		'vue/no-static-inline-styles': 'error',
+		'vue/no-template-target-blank': [
+			'error',
+			{
+				allowReferrer: true,
+			},
+		],
+		'vue/v-for-delimiter-style': 'error',
+		'vue/no-unregistered-components': [
+			'error',
+			{
+				ignorePatterns: ['router-link', 'router-view'],
+			},
+		],
+	},
+};
+

.github/dependabot.yml

@@ -0,0 +1,9 @@
+# This file configures dependabot that tries to keep our dependencies secure and up-to-date
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+version: 2
+updates:
+  # Maintain JavaScript dependencies
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"

.github/workflows/ci.yml

@@ -0,0 +1,35 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  test-frontend:
+    name: Frontend tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Insert auth font awesome auth token
+        run: echo "@fortawesome:registry=https://npm.fontawesome.com/" > .npmrc && echo "//npm.fontawesome.com/:_authToken=${{ secrets.FONT_AWESOME_AUTH_TOKEN }}" >> .npmrc
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: '14.15'
+      - name: Install dependencies
+        run: yarn install --pure-lockfile
+      - name: TypeScript check
+        run: yarn ts:check
+      - name: Run unit tests
+        run: yarn test
+      - name: Lint TS/JS/Vue files
+        run: yarn lint:scripts
+      - name: Lint styles
+        run: yarn lint:styles
+      - name: Prettier check
+        run: yarn format:check
+      - name: Build storybook
+        run: yarn storybook:build

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+.idea
+.DS_store
+yarn-error.log
+.eslintcache
+.stylelintcache
+.npmrc
+public

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "tabWidth": 4,
+  "useTabs": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "htmlWhitespaceSensitivity": "strict",
+  "printWidth": 100
+}

.storybook/main.js

@@ -0,0 +1,59 @@
+const path = require('path');
+
+module.exports = {
+	stories: ['../lib/**/*.stories.@(js|mdx)'],
+	addons: [
+		'@storybook/addon-docs',
+		'@storybook/addon-controls',
+		'@storybook/addon-storysource',
+		'@storybook/addon-viewport',
+	],
+	webpackFinal: async (config) => {
+		// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+		// You can change the configuration based on that.
+		// 'PRODUCTION' is used when building the static version of storybook.
+
+		// // Storybook provides file-loader rule for svg. We have to disable it to make vue-svg-loader working
+		let fileLoaderRule = config.module.rules.find(
+			(r) =>
+				// it can be another rule with file loader
+				// we should get only svg related
+				r.test &&
+				r.test.toString().includes('svg') &&
+				// file-loader might be resolved to js file path so "endsWith" is not reliable enough
+				r.loader &&
+				r.loader.includes('file-loader'),
+		);
+		fileLoaderRule.test = new RegExp(
+			fileLoaderRule.test.source.replace('svg|', ''),
+			fileLoaderRule.test.flags,
+		);
+
+		// Make whatever fine-grained changes you need
+		config.module.rules.push(
+			{
+				test: /\.scss$/,
+				use: [
+					'style-loader',
+					'css-loader',
+					{
+						loader: 'sass-loader',
+						options: {
+							implementation: require('sass'),
+						},
+					},
+				],
+				include: path.resolve(__dirname, '../../'),
+			},
+			{
+				test: /\.svg$/,
+				use: ['vue-svg-loader'],
+			},
+		);
+
+		// config.resolve.alias.lib = path.resolve(__dirname, '../lib');
+		config.resolve.alias['design-system'] = path.resolve(__dirname, '..');
+
+		return config;
+	},
+};

.storybook/manager.js

@@ -0,0 +1,5 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+	showRoots: true,
+});

.storybook/preview.js

@@ -0,0 +1,82 @@
+import 'design-system/lib/styles/_normalize.scss';
+import 'design-system/lib/styles/fonts.scss';
+import 'design-system/lib/styles/storybook.scss';
+// import 'lib/styles/settings/_typography.scss';
+import 'design-system/lib/styles/theme-varaibles.scss';
+// import 'lib/styles/atoms/_buttons.scss';
+// import 'lib/styles/atoms/_icons.scss';
+
+import { initialize } from 'design-system/lib/js/icons/fontawesome';
+
+const customViewports = {
+	mobile: {
+		name: 'Breakpoint mobile',
+		styles: {
+			height: '568px',
+			width: '320px',
+		},
+		type: 'mobile',
+	},
+	breakpointS: {
+		name: 'breakpointS',
+		styles: {
+			height: '1024px',
+			width: '760px',
+		},
+		type: 'tablet',
+	},
+	breakpointM: {
+		name: 'breakpointM',
+		styles: {
+			height: '1024px',
+			width: '980px',
+		},
+		type: 'desktop',
+	},
+	breakpointL: {
+		name: 'breakpointL',
+		styles: {
+			height: '1024px',
+			width: '1280px',
+		},
+		type: 'desktop',
+	},
+	mobile1: {
+		name: 'Small mobile',
+		styles: {
+			height: '568px',
+			width: '320px',
+		},
+		type: 'mobile',
+	},
+	iphonexr: {
+		name: 'iPhone XR',
+		styles: {
+			height: '896px',
+			width: '414px',
+		},
+		type: 'mobile',
+	},
+	ipad: {
+		name: 'iPad',
+		styles: {
+			height: '1024px',
+			width: '768px',
+		},
+		type: 'tablet',
+	},
+	ipad12p: {
+		name: 'iPad Pro 12.9-in',
+		styles: {
+			height: '1366px',
+			width: '1024px',
+		},
+		type: 'tablet',
+	},
+};
+
+export const parameters = {
+	viewport: { viewports: customViewports },
+};
+
+initialize();

README.md

@@ -0,0 +1,10 @@
+# Bethink design system
+
+### Setup
+
+DS requires access to font-awesome PRO. Add `.npmrc` file to root catalog. File should looks like:
+
+```
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=<TOKEN>
+```

jest.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+	verbose: true,
+	preset: '@vue/cli-plugin-unit-jest/presets/typescript',
+	testEnvironment: 'jsdom',
+	moduleNameMapper: {
+		'^design-system/lib/(.*)$': '<rootDir>/lib/$1',
+		'^design-system/styles/(.*)$': '<rootDir>/lib/styles/$1',
+		'^design-system/images/(.*)$': '<rootDir>/lib/images/$1',
+		'vue-ripple-directive': '<rootDir>/lib/js/tests/emptyModule.ts',
+	},
+	testMatch: ['<rootDir>/lib/js/**/*.spec.ts'],
+	transform: {
+		'^.+\\.js$': 'babel-jest',
+		'^.+\\.ts$': 'ts-jest',
+		'.*\\.(vue)$': 'vue-jest',
+		'^.+\\.scss': '<rootDir>/lib/js/tests/emptyTransformer.ts',
+		'^.+\\.svg$': '<rootDir>/lib/js/tests/emptyTransformer.ts',
+	},
+	moduleFileExtensions: ['js', 'vue', 'json', 'ts'],
+	setupFilesAfterEnv: ['<rootDir>/lib/js/typings.d.ts', '<rootDir>/lib/js/tests/globals.ts'],
+	globals: {
+		'ts-jest': {
+			tsconfig: './tsconfig.json',
+			isolatedModules: true,
+		},
+	},
+};

src/js/atoms/BadgeScore.vue → lib/js/atoms/BadgeScore.vue

@@ -16,9 +16,9 @@
 </template>
 
 <style scoped lang="scss">
-@import 'resources/assets/styles/styleguide/settings/spacings';
-@import 'resources/assets/styles/styleguide/settings/typography';
-@import 'resources/assets/styles/styleguide/settings/colors';
+@import 'lib/styles/settings/spacings';
+@import 'lib/styles/settings/typography';
+@import 'lib/styles/settings/colors';
 
 $badge-score-width: 74px;
 $small-badge-score-width: 48px;

src/js/atoms/Button.stories.mdx → lib/js/atoms/Button.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
-import WnlButton, { BUTTON_SIZES, BUTTON_TYPES, BUTTON_COLORS, BUTTON_STATES, BUTTON_RADIUSES, BUTTON_ELEVATIONS, ICONS } from 'js/components/global/styleguide/atoms/Button';
+import WnlButton, { BUTTON_SIZES, BUTTON_TYPES, BUTTON_COLORS, BUTTON_STATES, BUTTON_RADIUSES, BUTTON_ELEVATIONS, ICONS } from 'design-system/lib/js/atoms/Button';
 
 <Meta title='atoms/Button' component={WnlButton} />