Skip to content

Commit

Permalink
fixed storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
@JustFly1984
JustFly1984 committed Apr 24, 2022
1 parent 22009a3 commit b7a7de8
Show file tree
Hide file tree
Showing 9 changed files with 1,756 additions and 557 deletions.
0 packages/react-google-maps-api/.eslintignore → .eslintignore
View file
File renamed without changes.
0 packages/react-google-maps-api/.eslintrc.js → .eslintrc.js
View file
File renamed without changes.
251 changes: 250 additions & 1 deletion .storybook/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,93 @@
const webpack = require('webpack')
const path = require('path')
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

const babelOptions = {
sourceType: 'unambiguous',
presets: [
[
'@babel/preset-env',
{
shippedProposals: true,
loose: true,
},
],
[
'@babel/preset-typescript',
{
isTSX: true,
allExtensions: true,
onlyRemoveTypeImports: false,
optimizeConstEnums: true,
},
],
['@babel/preset-react', { runtime: 'automatic' }],
],
plugins: [
'react-require',
[
'@babel/plugin-transform-typescript',
{
allowDeclareFields: true,
}
],
'@babel/plugin-syntax-jsx',
'@babel/plugin-transform-shorthand-properties',
'@babel/plugin-transform-block-scoping',
'@babel/plugin-syntax-typescript',
[
'@babel/plugin-proposal-decorators',
{
legacy: true,
},
],
[
'@babel/plugin-proposal-class-properties',
{
loose: true,
},
],
[
'@babel/plugin-proposal-private-methods',
{
loose: true,
},
],
'@babel/plugin-proposal-export-default-from',
'@babel/plugin-syntax-dynamic-import',
[
'@babel/plugin-proposal-object-rest-spread',
{
loose: true,
useBuiltIns: true,
},
],
'@babel/plugin-transform-react-jsx',
'@babel/plugin-transform-classes',
'@babel/plugin-transform-arrow-functions',
'@babel/plugin-transform-parameters',
'@babel/plugin-transform-destructuring',
'@babel/plugin-transform-spread',
'@babel/plugin-transform-for-of',
'babel-plugin-macros',
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator',
[
'babel-plugin-polyfill-corejs3',
{
method: 'usage-global',
absoluteImports: 'core-js',
version: '3.18.3',
},
],
],
}

module.exports = {
reactOptions: {
fastRefresh: true,
},
"stories": [
"../packages/react-google-maps-api/**/*.stories.mdx",
"../packages/react-google-maps-api/**/*.stories.@(js|jsx|ts|tsx)",
Expand All @@ -9,10 +98,170 @@ module.exports = {
"@storybook/addon-links",
"@storybook/addon-essentials"
],
plugins: [
require('postcss-flexbugs-fixes'),
require('autoprefixer')({
flexbox: 'no-2009',
}),
],
framework: '@storybook/react',
core: {
builder: 'webpack5',
},
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
tsconfigPath: '../tsconfig.json',
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) => {
return prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
},
},
},
webpackFinal: (config) => {
config.resolve.alias['@react-google-maps/api'] = require.resolve('../packages/react-google-maps-api/src/index.ts');
config.resolve.alias['@react-google-maps/infobox'] = require.resolve('../packages/react-google-maps-api-infobox/src/index.ts');
config.resolve.alias['@react-google-maps/marker-clusterer'] = require.resolve('../packages/react-google-maps-api-marker-clusterer/src/index.ts');

config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin(),
]

config.resolve.extensions = [
'.mjs',
'.ts',
'.tsx',
'.js',
'.jsx',
'.cssm',
'.mdx',
]

config.plugins.push(
new webpack.EnvironmentPlugin({
UNION_ASSETS_ENV: 'qa',
UNION_DEPLOYMENT_ENV: 'qa',
UNION_MEMBERSHIP_API_KEY: 'XoZzhopt2zto6auTSbIN9j2irh11mCv5',
GDS_API_KEY:
'a904707cc252249b61e393dcd5b5ea130f2f532c97f26f5ee4fa11026032556d',
GUEST_ENV: 'qa',
WEDDING_API_KEY: 'LStE27uk91EQW95k5arx1D7VG0IVm18T',
BOOKINGS_API_SOURCE: 'guest-api',
SEGMENT_WRITE_KEY: '5niwjgxx8r',
SEGMENT_PRODUCT: 'Guest Shared Component',
WWS_GRAPHQL_API_KEY: '9S0scH6dss5QOzcrFuAHw95VQBa1sgoC7xDGQnpn',
WWS_GRAPHQL_ENDPOINT: 'https://qa-graphql.guests.theknot.com/graphql',
})
)

// Remove css-loader rule from storybook so it doesn't conflict with a-css-loader
config.module.rules = config.module.rules.filter(
(rule) =>
!(
rule.use &&
rule.use.find(({ loader }) => loader && loader.includes('css-loader'))
)
)

// Temp fix for monorepo issue: https://github.com/storybooks/storybook/issues/3346
config.module.rules = config.module.rules.filter(
(rule) =>
!(
rule.use &&
rule.use.length &&
rule.use.find(({ loader }) => loader === 'babel-loader')
)
)

config.module.rules.push({
test: /\.(ts|tsx)$/,
include: path.resolve('./'),
use: [
{
loader: 'babel-loader',
options: babelOptions,
},
],
exclude: /(node_modules|dist)/,
})

config.module.rules.push({
// 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate
// the docs page from the markdown
test: /\.(stories|story)\.mdx$/,
use: [
{
// Need to add babel-loader as dependency: `yarn add -D babel-loader`
loader: require.resolve('babel-loader'),
// may or may not need this line depending on your app's setup
options: babelOptions,
},
{
loader: '@mdx-js/loader',
options: {
compilers: [createCompiler({})],
},
},
],
})
// 2b. Run `source-loader` on story files to show their source code
// automatically in `DocsPage` or the `Source` doc block.
config.module.rules.push({
test: /\.(stories|story)\.[tj]sx?$/,
loader: require.resolve('@storybook/source-loader'),
exclude: [/node_modules/],
enforce: 'pre',
})

config.module.rules.push({
test: /\.jsx?$/,
include: path.resolve('./'),
exclude: /(node_modules|dist)/,
use: [
{
loader: 'babel-loader',
options: babelOptions,
},
],
})

config.module.rules.push({
test: /\.s?css$/,
use: 'style-loader',
})

config.module.rules.push({
test: /\.scss$/,
use: 'sass-loader',
})

config.module.rules.push({
test: /\.scss$/,
use: [
{
loader: 'sass-loader',
},
],
})

// exclude svg from existing rule
const fileLoaderRule = config.module.rules.find((rule) =>
rule.test.test('.svg')
)

fileLoaderRule.exclude = /\.svg$/

config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack', 'url-loader'],
}) // necessary for storybook components to import other storybook components

config.resolve.alias = {}

return config;
},
}

}
55 changes: 46 additions & 9 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,36 @@
},
"devDependencies": {
"@babel/core": "7.17.9",
"@babel/plugin-proposal-class-properties": "7.16.7",
"@babel/plugin-proposal-decorators": "7.17.9",
"@babel/plugin-proposal-export-default-from": "7.16.7",
"@babel/plugin-proposal-nullish-coalescing-operator": "7.16.7",
"@babel/plugin-proposal-object-rest-spread": "7.17.3",
"@babel/plugin-proposal-optional-chaining": "7.16.7",
"@babel/plugin-proposal-private-methods": "7.16.11",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-syntax-jsx": "^7.16.7",
"@babel/plugin-syntax-typescript": "7.16.7",
"@babel/plugin-transform-arrow-functions": "7.16.7",
"@babel/plugin-transform-classes": "7.16.7",
"@babel/plugin-transform-destructuring": "7.17.7",
"@babel/plugin-transform-for-of": "7.16.7",
"@babel/plugin-transform-parameters": "7.16.7",
"@babel/plugin-transform-react-jsx": "7.17.3",
"@babel/plugin-transform-spread": "7.16.7",
"@babel/plugin-transform-typescript": "^7.16.8",
"@babel/preset-env": "7.16.11",
"@babel/preset-react": "7.16.7",
"@babel/preset-typescript": "7.16.7",
"@googlemaps/react-wrapper": "1.1.31",
"@storybook/addon-actions": "6.5.0-alpha.63",
"@storybook/addon-essentials": "6.5.0-alpha.63",
"@storybook/addon-links": "6.5.0-alpha.63",
"@storybook/react": "6.5.0-alpha.63",
"@mdx-js/loader": "1.6.22",
"@storybook/addon-actions": "6.5.0-alpha.64",
"@storybook/addon-essentials": "6.5.0-alpha.64",
"@storybook/addon-links": "6.5.0-alpha.64",
"@storybook/builder-webpack5": "6.5.0-alpha.64",
"@storybook/manager-webpack5": "6.5.0-alpha.64",
"@storybook/react": "6.5.0-alpha.64",
"@svgr/webpack": "^6.2.1",
"@types/google.maps": "3.48.5",
"@types/invariant": "2.2.35",
"@types/jest": "27.4.1",
Expand All @@ -67,7 +92,12 @@
"@typescript/lib-dom": "npm:@types/web",
"acorn": "8.7.0",
"acorn-jsx": "5.3.2",
"babel-loader": "8.2.4",
"autoprefixer": "10.4.4",
"babel-loader": "8.2.5",
"babel-plugin-macros": "3.1.0",
"babel-plugin-polyfill-corejs3": "0.5.2",
"babel-plugin-react-require": "3.1.3",
"css-module-builder": "1.0.10",
"eslint": "8.13.0",
"eslint-config-prettier": "8.5.0",
"eslint-config-standard": "17.0.0-0",
Expand Down Expand Up @@ -98,17 +128,24 @@
"eslint-plugin-react-perf": "3.3.1",
"eslint-plugin-security-node": "1.1.1",
"eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
"fork-ts-checker-webpack-plugin": "7.2.6",
"husky": "7.0.4",
"jest": "27.5.1",
"jest-specific-snapshot": "^5.0.0",
"jest-specific-snapshot": "5.0.0",
"lerna": "4.0.0",
"lint-staged": "12.3.8",
"postcss": "8.4.12",
"postcss-flexbugs-fixes": "5.0.2",
"prettier": "2.6.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"require-from-string": "^2.0.2",
"react": "18.0.0",
"react-dom": "18.0.0",
"require-from-string": "2.0.2",
"sass-loader": "12.6.0",
"source-map-explorer": "2.5.2",
"ts-jest": "27.1.4",
"tsconfig-paths-webpack-plugin": "3.5.2",
"typescript": "4.7.0-dev.20220408",
"url-loader": "^4.1.1",
"webpack": "5.72.0"
},
"husky": {
Expand Down
13 changes: 0 additions & 13 deletions packages/react-google-maps-api/.editorconfig
View file

This file was deleted.

Loading

0 comments on commit b7a7de8

Please sign in to comment.