empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 00:45:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

update storybook to work with webpack 5 and move babelrc into its own file out of package.json (#11499)

Browse Source
This commit is contained in:
Gabriel Hernandez 2023-05-03 17:50:17 +01:00 committed by GitHub
parent 757335aa29
commit 546225ed35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 3396 additions and 3670 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
.babelrc.json Normal file
View File

@ -0,0 +1,54 @@
{
"presets": [
[
"@babel/preset-env",
{
"targets": "defaults",
"useBuiltIns": "usage",
"corejs": "3.8"
}
],
"@babel/preset-react",
"@babel/preset-typescript"
],
"env": {
"dev": {
"presets": [
"react-hmre"
]
},
"test": {
"presets": [
"@babel/preset-typescript"
]
}
},
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
"@babel/plugin-proposal-optional-chaining",
[
"@babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-do-expressions",
"@babel/plugin-proposal-function-bind"
]
}

32
.eslintrc.js
View File

@ -1,5 +1,4 @@
var path = require("path");
module.exports = {
extends: [
"airbnb",
@ -8,6 +7,7 @@ module.exports = {
"plugin:@typescript-eslint/recommended",
"plugin:cypress/recommended",
"plugin:prettier/recommended",
"plugin:storybook/recommended",
],
parser: "@typescript-eslint/parser",
plugins: ["jest", "react", "@typescript-eslint"],
@ -33,14 +33,28 @@ module.exports = {
"react/no-multi-comp": 0,
"react/no-unused-prop-types": [
1,
{ customValidators: [], skipShapeProps: true },
{
customValidators: [],
skipShapeProps: true,
},
],
"react/require-default-props": 0,
// TODO set default props and enable this check
"react/jsx-filename-extension": [
1,
{
extensions: [".jsx", ".tsx"],
},
],
"react/require-default-props": 0, // TODO set default props and enable this check
"react/jsx-filename-extension": [1, { extensions: [".jsx", ".tsx"] }],
"react-hooks/exhaustive-deps": 1,
"no-param-reassign": 0,
"new-cap": 0,
"import/no-unresolved": [2, { caseSensitive: false }],
"import/no-unresolved": [
2,
{
caseSensitive: false,
},
],
"linebreak-style": 0,
"import/no-named-as-default": "off",
"import/no-named-as-default-member": "off",
@ -48,24 +62,20 @@ module.exports = {
"import/no-extraneous-dependencies": 0,
"no-underscore-dangle": 0,
"jsx-a11y/no-static-element-interactions": "off",
// note you must disable the base rule as it can report incorrect errors. more info here:
// https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"],
// turn off and override to not run this on js and jsx files. More info here:
// https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/explicit-module-boundary-types.md#configuring-in-a-mixed-jsts-codebase
"@typescript-eslint/explicit-module-boundary-types": "off",
// Most of the js modules written by us need to be rewritten into TS. Until then
// we use ts-ignore comment to ignore the error TS gives us from not having those modules
// declared (TS7016). This is done on purpose as there is not time to rewrite everything in TS.
"@typescript-eslint/ban-ts-comment": "off",
"no-shadow": "off", // replaced by ts-eslint rule below
"no-shadow": "off",
// replaced by ts-eslint rule below
"@typescript-eslint/no-shadow": "error",
// There is a bug with these rules in our version of jsx-a11y plugin (5.1.1)
// To upgrade our version of the plugin we would need to make more changes
// with eslint-config-airbnb, so we will just turn off for now.

41
.storybook/main.js
View File

@ -1,41 +0,0 @@
const path = require("path");
const bourbon = require("node-bourbon").includePaths;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const globImporter = require("node-sass-glob-importer");
module.exports = {
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "./",
hmr: process.env.NODE_ENV === "development",
},
},
{ loader: "css-loader" },
{ loader: "postcss-loader" },
{
loader: "sass-loader",
options: {
sourceMap: true,
includePaths: [bourbon],
importer: globImporter(),
},
},
],
});
config.plugins.push(new MiniCssExtractPlugin({ filename: "[name].css" }));
config.resolve.modules.push(path.resolve(__dirname, "../frontend"));
return config;
},
stories: [
"../frontend/components/**/*.stories.mdx",
"../frontend/components/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
};

74
.storybook/main.ts Normal file
View File

@ -0,0 +1,74 @@
const path = require("path");
const bourbon = require("node-bourbon").includePaths;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const globImporter = require("node-sass-glob-importer");
import type { StorybookConfig } from "@storybook/react-webpack5";
const config: StorybookConfig = {
webpackFinal: async (config) => {
config.module?.rules?.push({
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "./",
},
},
{
loader: "css-loader",
},
{
loader: "postcss-loader",
},
{
loader: "sass-loader",
options: {
sourceMap: true,
sassOptions: {
includePaths: bourbon,
importer: globImporter(),
},
},
},
],
});
config.plugins?.push(
new MiniCssExtractPlugin({
filename: "[name].css",
})
);
config.resolve?.modules?.push(path.resolve(__dirname, "../frontend"));
return config;
},
stories: [
"../frontend/components/**/*.stories.mdx",
"../frontend/components/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-mdx-gfm",
"@storybook/addon-a11y",
],
typescript: {
check: false,
reactDocgen: "react-docgen-typescript",
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) =>
prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
shouldRemoveUndefinedFromOptional: true,
},
},
framework: {
name: "@storybook/react-webpack5",
options: {},
},
docs: {
autodocs: true,
},
};
export default config;

6
frontend/components/forms/fields/AutoSizeInputField/AutoSizeInputField.stories.tsx
View File

@ -1,5 +1,5 @@
import React, { KeyboardEvent } from "react";
import { Meta, Story } from "@storybook/react";
import { Meta, StoryFn } from "@storybook/react";
import { noop } from "lodash";
import AutoSizeInputField from ".";
@ -23,7 +23,7 @@ interface IAutoSizeInputFieldProps {
export default {
component: AutoSizeInputField,
title: "Components/FormFields/Input",
title: "Components/FormFields/Input/AutoSizeInputField",
args: {
autofocus: false,
disabled: false,
@ -43,7 +43,7 @@ export default {
},
} as Meta;
const Template: Story<IAutoSizeInputFieldProps> = (props) => (
const Template: StoryFn<IAutoSizeInputFieldProps> = (props) => (
<AutoSizeInputField {...props} />
);

78
package.json
View File

@ -13,8 +13,8 @@
"e2e-cli": "cypress run",
"e2e-cli:free": "yarn cypress run --config-file cypress/cypress-free.json",
"e2e-cli:premium": "yarn cypress run --config-file cypress/cypress-premium.json",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"dependencies": {
"ace-builds": "1.4.12",
@ -58,59 +58,6 @@
"uuid": "8.3.2",
"when": "3.7.8"
},
"babel": {
"presets": [
[
"@babel/preset-env",
{
"targets": "defaults",
"useBuiltIns": "usage",
"corejs": "3.8"
}
],
"@babel/preset-react"
],
"env": {
"dev": {
"presets": [
"react-hmre"
]
},
"test": {
"presets": [
"@babel/preset-typescript"
]
}
},
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
"@babel/plugin-proposal-optional-chaining",
[
"@babel/plugin-proposal-pipeline-operator",
{
"proposal": "minimal"
}
],
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-do-expressions",
"@babel/plugin-proposal-function-bind"
]
},
"devDependencies": {
"@babel/cli": "7.17.6",
"@babel/core": "7.18.10",
@ -130,13 +77,16 @@
"@babel/plugin-proposal-throw-expressions": "7.16.7",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-syntax-import-meta": "7.10.4",
"@babel/preset-env": "7.16.11",
"@babel/preset-react": "7.16.7",
"@babel/preset-typescript": "7.16.7",
"@storybook/addon-actions": "6.5.0-alpha.48",
"@storybook/addon-essentials": "6.5.0-alpha.48",
"@storybook/addon-links": "6.5.0-alpha.48",
"@storybook/react": "6.5.0-alpha.48",
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.5",
"@storybook/addon-a11y": "^7.0.7",
"@storybook/addon-actions": "7.0.7",
"@storybook/addon-essentials": "7.0.7",
"@storybook/addon-links": "7.0.7",
"@storybook/addon-mdx-gfm": "7.0.7",
"@storybook/react": "7.0.7",
"@storybook/react-webpack5": "7.0.7",
"@testing-library/cypress": "8.0.2",
"@testing-library/jest-dom": "5.16.2",
"@testing-library/react": "12.1.4",
@ -168,6 +118,7 @@
"babel-eslint": "9.0.0",
"babel-jest": "29.2.0",
"babel-loader": "8.2.3",
"babel-plugin-dynamic-import-node": "^2.3.3",
"bourbon": "5.1.0",
"classnames": "2.2.5",
"css-loader": "6.7.3",
@ -185,6 +136,7 @@
"eslint-plugin-prettier": "3.4.1",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-react-hooks": "4.3.0",
"eslint-plugin-storybook": "^0.6.11",
"expect": "1.20.2",
"fork-ts-checker-webpack-plugin": "6.5.0",
"html-webpack-plugin": "5.5.0",
@ -202,8 +154,10 @@
"node-sass-glob-importer": "5.3.2",
"postcss-loader": "3.0.0",
"prettier": "2.2.1",
"react-docgen-typescript-plugin": "^1.0.5",
"regenerator-runtime": "0.13.9",
"sass-loader": "13.2.2",
"storybook": "7.0.7",
"trace-unhandled": "2.0.1",
"ts-loader": "6.2.2",
"ts-node": "10.7.0",

6781
yarn.lock
View File

File diff suppressed because it is too large Load Diff