Add button & icons (#6)

* Add Button Component

* Clean up and fix lint

* Fix iconShare

* Export ButtonProps

* 0.1.6-dev.0

* Add memo and remove listener

* Fix lint situation

* Clean up styles and add hooks

* Remove memo

* 0.1.6

packages/stems/.eslintrc.js

@@ -8,6 +8,8 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:jest/recommended',
     'plugin:react/recommended',
+    'prettier/react',
+    'prettier-standard/prettier-file',
   ],
   globals: {
     Atomics: 'readonly',
@@ -25,15 +27,43 @@ module.exports = {
     'react',
     'react-hooks',
     '@typescript-eslint',
-    'jest'
+    'jest',
   ],
   rules: {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/member-delimiter-style': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-this-alias': 'off',
+
+    'no-use-before-define': 'off',
+    'camelcase': 'off',
+    'no-unused-vars': 'off',
+    'func-call-spacing': 'off',
+    'semi': ['error', 'never'],
     'no-undef': 'off',
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    'no-empty': 'off',
+    'arrow-parens': 'off',
+    'padded-blocks': 'off',
+
+    'jest/expect-expect': 'off',
+
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+
+    'react/display-name': 'off',
+    'react/prop-types': 'off',
+
+    'prettier/prettier': 'error',
+
+    'space-before-function-paren': 'off',
+    'generator-star-spacing': 'off'
   }
-}
+}

packages/stems/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  ...require('prettier-config-standard'),
+  jsxBracketSameLine: false,
+  jsxSingleQuote: true
+}

packages/stems/.storybook/webpack.config.js

@@ -8,6 +8,9 @@ module.exports = ({ config }) => {
       },
       {
         loader: require.resolve('react-docgen-typescript-loader'),
+        options: {
+          shouldExtractLiteralValuesFromEnum: true
+        }
       }
     ],
   });
@@ -30,6 +33,20 @@ module.exports = ({ config }) => {
       }
     ]
   });
+
+  // Typescript
   config.resolve.extensions.push('.ts', '.tsx');
+
+  // SVGR
+  const assetRule = config.module.rules.find(({ test }) => test.test('.svg'));
+  const assetLoader = {
+    loader: assetRule.loader,
+    options: assetRule.options || assetRule.query,
+  };
+  config.module.rules.unshift({
+    test: /\.svg$/,
+    use: ['@svgr/webpack', assetLoader],
+  });
+
   return config;
 };

packages/stems/.svgo.yml

@@ -0,0 +1,73 @@
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+  - removeDoctype
+  - removeXMLProcInst
+  - removeComments
+  - removeMetadata
+  - removeXMLNS
+  - removeEditorsNSData
+  - cleanupAttrs
+  - inlineStyles
+  - minifyStyles
+  - convertStyleToAttrs
+  - cleanupIDs
+  - prefixIds
+  - removeRasterImages
+  - removeUselessDefs
+  - cleanupNumericValues
+  - cleanupListOfValues
+  - convertColors
+  - removeUnknownsAndDefaults
+  - removeNonInheritableGroupAttrs
+  - removeUselessStrokeAndFill
+  - removeViewBox: false
+  - cleanupEnableBackground
+  - removeHiddenElems
+  - removeEmptyText
+  - convertShapeToPath: false
+  - convertEllipseToCircle
+  - moveElemsAttrsToGroup
+  - moveGroupAttrsToElems
+  - collapseGroups
+  - convertPathData
+  - convertTransform
+  - removeEmptyAttrs
+  - removeEmptyContainers
+  - mergePaths
+  - removeUnusedNS
+  - sortAttrs
+  - sortDefsChildren
+  - removeTitle
+  - removeDesc
+  - removeDimensions
+  - removeAttrs
+  - removeAttributesBySelector
+  - removeElementsByAttr
+  - addClassesToSVGElement
+  - removeStyleElement
+  - removeScriptElement
+  - addAttributesToSVGElement
+  - removeOffCanvasPaths
+  - reusePaths
+
+# configure the indent (default 4 spaces) used by `--pretty` here:
+#
+# @see https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options
+#
+# js2svg:
+#  pretty: true
+#  indent: '  '

packages/stems/example/src/App.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
 
 const App = () => {
-  return (
-    <div>
-      Audius Stems
-    </div>
-  )
+  return <div>Audius Stems</div>
 }
 
 export default App