Feature/emotion

.eslintrc.js

@@ -15,6 +15,8 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
-		'@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/camelcase': 'off',
+    // 'react/forbid-component-props': [1, { forbid: ['style'] }],
+    // 'react/forbid-dom-props': [1, { forbid: ['style'] }],
   },
-};
+}

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true,
+    "source.organizeImports": false,
     "source.fixAll": true
   },
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],

src/webview/render.ts

@@ -66,10 +66,12 @@ async function render(panel: vscode.WebviewPanel, rootPath: string) {
   cspMeta.httpEquiv = 'Content-Security-Policy'
   cspMeta.content =
     [
+      `default-src 'self'`,
+      `connect-src https: http:`,
       `font-src ${panel.webview.cspSource} http: https: data:`,
       `img-src ${panel.webview.cspSource} https:`,
       `script-src ${nonces.map(nonce => `'nonce-${nonce}'`).join(' ')} data:`,
-      `style-src ${panel.webview.cspSource} https:`,
+      `style-src ${panel.webview.cspSource} https: 'self' 'unsafe-inline'`,
     ].join('; ') + ';'
   document.head.appendChild(cspMeta)
 

web-app/.storybook/webpack.config.js

@@ -1,20 +1,38 @@
 const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 // see typescript setup
 // https://storybook.js.org/docs/configurations/typescript-config/
 module.exports = ({ config }) => {
   config.module.rules.push({
     test: /\.scss$/,
-    use: ['style-loader', 'css-loader', 'sass-loader'],
+    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
     include: path.resolve(__dirname, '../'),
   })
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     loader: require.resolve('babel-loader'),
     options: {
-      presets: [['react-app', { flow: false, typescript: true }]],
+      plugins: [
+        [
+          'babel-plugin-import',
+          {
+            libraryName: '@alifd/next',
+            style: true,
+          },
+        ],
+      ],
+      presets: [
+        // react-app
+        ['react-app', { flow: false, typescript: true }],
+        // allow emotion css prop on html
+        ['@emotion/babel-preset-css-prop'],
+      ],
     },
   })
+
+  config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }))
+
   config.resolve.extensions.push('.ts', '.tsx')
 
   config.resolve.modules = ['node_modules', path.resolve(__dirname, '../src')]

web-app/.vscode/settings.json

@@ -11,9 +11,20 @@
     },
     // styles
     "workbench.colorCustomizations": {
-      "activityBar.background": "#000000",
+      "activityBar.background": "#1a1a1a",
+      "activityBar.activeBorder": "#606020",
+      "activityBar.foreground": "#e7e7e7",
+      "activityBar.inactiveForeground": "#e7e7e799",
+      "activityBarBadge.background": "#606020",
+      "activityBarBadge.foreground": "#e7e7e7",
       "titleBar.activeBackground": "#000000",
-      "titleBar.activeForeground": "#FFFFFF"
-    }
+      "titleBar.inactiveBackground": "#00000099",
+      "titleBar.activeForeground": "#e7e7e7",
+      "titleBar.inactiveForeground": "#e7e7e799",
+      "statusBar.background": "#000000",
+      "statusBarItem.hoverBackground": "#1a1a1a",
+      "statusBar.foreground": "#e7e7e7"
+    },
+    "peacock.color": "#000000"
   }
 

web-app/config-overrides.js

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path')
+const { addBabelPreset, addBabelPlugin, addWebpackModuleRule } = require('customize-cra')
+
+module.exports = function override(config) {
+  addWebpackModuleRule({
+    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+    use: [
+      {
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: 'fonts/',
+        },
+      },
+    ],
+  })(config)
+
+  // load @alifd/next component css
+  addBabelPlugin([
+    'babel-plugin-import',
+    {
+      libraryName: '@alifd/next',
+      style: true,
+    },
+  ])(config)
+
+  // setup emotion styles
+  addBabelPreset('@emotion/babel-preset-css-prop')(config)
+
+  return config
+}