merge with upstream

.editorconfig

@@ -0,0 +1,20 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 120
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.yml]
+indent_size = 2

.eslintignore

@@ -0,0 +1,11 @@
+.eslintrc.js
+.prettierrc.js
+.stylelintrc.js
+babel.config.js
+jest.config.js
+postcss.config.js
+tailwind.config.js
+**/*.d.ts
+app/javascript/gql/generated.ts
+app/javascript/shared/i18n.ts
+config/**/*.js

.eslintrc.js

@@ -0,0 +1,64 @@
+module.exports = {
+  globals: {
+    I18n: 'readonly',
+    google: 'readonly',
+    global: 'readonly',
+    YT: 'readonly',
+    betterplaceOverlayConfig: 'readonly',
+    dataLayer: 'readonly',
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: './tsconfig.json',
+  },
+  root: true,
+  plugins: ['@typescript-eslint', 'react', 'prettier'],
+  env: {
+    browser: true,
+
+    node: true,
+    es6: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    'import/no-unassigned-import': 0,
+    'import/no-named-as-default-member': 0,
+    'import/order': 0,
+    'react/prop-types': 0,
+    'no-empty': ['error', { allowEmptyCatch: true }],
+    '@typescript-eslint/explicit-module-boundary-types': 0,
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        extendDefaults: true,
+        types: {
+          '{}': false,
+        },
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'all',
+        ignoreRestSiblings: true,
+        varsIgnorePattern: '^[_A-Z]',
+        argsIgnorePattern: '^_*',
+        caughtErrors: 'none',
+      },
+    ],
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+  },
+}

.prettierignore

@@ -0,0 +1,6 @@
+dist/**/*
+node_modules
+coverage
+.history
+app/javascript/gql/generated.ts
+app/javascript/shared/i18n.ts

.prettierrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  arrowParens: 'always',
+  printWidth: 120,
+  quoteProps: 'consistent',
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  endOfLine: 'lf',
+  overrides: [
+    {
+      files: ['*.json', '*.yml', '*.md'],
+      options: {
+        tabWidth: 2,
+      },
+    },
+  ],
+}

package.json

@@ -42,9 +42,12 @@
     "@storybook/testing-library": "^0.0.9",
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "@vitejs/plugin-react": "^1.0.7",
     "babel-loader": "^8.2.4",
     "storybook-addon-designs": "^6.2.1",
+    "eslint": "^8.13.0",
     "typescript": "^4.5.4",
     "vite": "^2.9.0",
     "vite-plugin-dts": "^1.0.5"

src/lib/components/sample.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React from 'react'
 
-type SampleProps = { foo: string };
-export const Sample = ({ foo }: SampleProps) => <div>{foo}</div>;
+type SampleProps = { foo: string }
+export const Sample = ({ foo }: SampleProps) => <div>{foo}qweqweqweqweqweqw</div>
+// whatever

src/stories/Button.tsx

@@ -1,48 +1,42 @@
-import React from 'react';
-import './button.css';
+import React from 'react'
+import './button.css'
 
 interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
-  primary?: boolean;
+  primary?: boolean
   /**
    * What background color to use
    */
-  backgroundColor?: string;
+  backgroundColor?: string
   /**
    * How large should the button be?
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large'
   /**
    * Button contents
    */
-  label: string;
+  label: string
   /**
    * Optional click handler
    */
-  onClick?: () => void;
+  onClick?: () => void
 }
 
 /**
  * Primary UI component for user interaction
  */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
   return (
     <button
       type="button"
       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
       style={{ backgroundColor }}
       {...props}
     >
-      {label}
+      {label + 'ooo'}
     </button>
-  );
-};
+  )
+}

tsconfig.node.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "composite": true,
     "module": "esnext",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]
 }

vite.config.ts

@@ -13,19 +13,19 @@ export default defineConfig({
   ],
   build: {
     lib: {
-      entry: path.resolve(__dirname, "src/lib/index.ts"),
-      name: "BetterplaceDesignSystem",
-      formats: ["es", "umd"],
-      fileName: format => `betterplace-design-system.${format}.js`,
+      entry: path.resolve(__dirname, 'src/lib/index.ts'),
+      name: 'BetterplaceDesignSystem',
+      formats: ['es', 'umd'],
+      fileName: (format) => `betterplace-design-system.${format}.js`,
     },
     rollupOptions: {
-      external: ["react", "react-dom"],
+      external: ['react', 'react-dom'],
       output: {
         globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
+          'react': 'React',
+          'react-dom': 'ReactDOM',
         },
       },
     },
   },
-});
+})