ccontrols / component-controls Goto Github PK

Failed to compile.
./node_modules/@component-controls/base-integration/dist/store.js
Module not found: Can't resolve 'component-controls-bundle' in '/mnt/c/wsl/audience/client/node_modules/@component-controls/base-integration/dist'

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const path = require('path')
const fs = require('fs')
const CracoLessPlugin = require('craco-less')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const sharedFiles = fs.readdirSync(path.resolve(__dirname, '..', 'shared'))

const {
  withComponentControls
} = require('@component-controls/react-router-integration/webpack-build')

const publicFolder = process.env.PUBLIC_PATH || 'public'
const publicPath = path.join(__dirname, publicFolder)
const distFolder = process.env.BUILD_PATH || 'build'
const distPath = path.join(__dirname, distFolder)

process.env.REACT_APP_ENV = process.env.NODE_ENV || 'development'
process.env.PUBLIC_URL = '/'

const config = {
  devServer: {
    contentBase: publicPath,
    historyApiFallback: true,
    open: true,
    hot: true
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#97d700' },
            javascriptEnabled: true
          }
        }
      }
    }
  ],
  webpack: {
    plugins: {
      add: [
        new HtmlWebpackPlugin({
          template: 'public/index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
      ]
    },
    configure: (webpackConfig) => {
      if (process.env.RUN_ANALYZER) {
        webpackConfig.plugins.push(new BundleAnalyzerPlugin())
      }

      webpackConfig.devtool = 'inline-source-map'

      // Remove multiple different bn.js in bundle
      webpackConfig.resolve.alias['bn.js'] = path.resolve(
        __dirname,
        'node_modules/bn.js'
      )

      webpackConfig.output = {
        path: distPath,
        publicPath: '/',
        jsonpFunction: 'wpJson'
      }

      webpackConfig.entry = './src/index.js'

      webpackConfig.resolve.extensions = ['.js']

      return webpackConfig
    }
  }
}

module.exports = withComponentControls({
  config,
  options: { configPath: '.config', distFolder: publicFolder }
})

// .storybook/src/stories/test.stories.tsx

import React from "react";

export default {
  title: "Storybook Controls",
};

export const controlsStory = ({ disabled, text }) => (
  <button disabled={disabled}>
    {text}
  </button>
);

controlsStory.story = {
  controls: {
    disabled: { type: 'boolean', value: false },
    text: { type: 'text', value: 'Hello Storybook' },
  }
}

module.exports = {
  addons: ['@storybook/addon-docs', '@component-controls/storybook'],
}


// .storybook/config.js

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.tsx
configure(require.context('./src/stories', true, /\.stories\.tsx?$/), module);


// .storybook/main.js
module.exports = {
  addons: ['@storybook/addon-docs', '@component-controls/storybook'],
}



// .storybook/webpack.config.js

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [require.resolve('babel-preset-react-app')],
    },
  });

  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};