@itcase/storybook-config 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# ITCase Storybook Config
+
+

package/config/addonReact.js

@@ -0,0 +1,29 @@
+const ADDONS_REACT = [
+  "@storybook/addon-webpack5-compiler-swc",
+  "@storybook/addon-essentials",
+  "@storybook/addon-themes",
+  "@storybook/addon-interactions",
+  {
+    name: "@storybook/addon-styling-webpack",
+    options: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            "style-loader",
+            {
+              loader: "css-loader",
+              options: { importLoaders: 1 },
+            },
+            {
+              loader: "postcss-loader",
+              options: { implementation: require.resolve("postcss") },
+            },
+          ],
+        },
+      ],
+    },
+  },
+];
+
+export { ADDONS_REACT }

package/config/addonsNextJs.js

@@ -0,0 +1,8 @@
+const ADDONS_NEXTJS = [
+  '@storybook/addon-links',
+  '@storybook/addon-essentials',
+  '@storybook/addon-interactions',
+  '@itcase/storybook-addon-auth',
+]
+
+export { ADDONS_NEXTJS }

package/config/appearance.js

@@ -0,0 +1 @@
+import '../../src/config/appearance'

package/config/authorization.js

@@ -0,0 +1,9 @@
+import { USERS } from './users'
+
+const AUTHORIZATION = {
+    values: USERS,
+    signInUrl: `${process.env.REST_BASE_URL}/rest/sign-in/`,
+    profileUrl: `${process.env.REST_BASE_URL}/rest/profile/`,
+}
+
+export { AUTHORIZATION }

package/config/backgrounds.js

@@ -0,0 +1,16 @@
+const BACKGROUNDS = {
+  default: {
+    name: 'Default',
+    value: '#fff',
+  },
+  light: {
+    name: 'Light',
+    value: '#fff',
+  },
+  dark: {
+    name: 'Dark',
+    value: '#000000',
+  },
+}
+
+export { BACKGROUNDS }

package/config/frameworkNextJs.js

@@ -0,0 +1,5 @@
+const FRAMEWORK_NEXTJS = {
+  framework: "@storybook/nextjs",
+};
+
+export { FRAMEWORK_NEXTJS };

package/config/frameworkReact.js

@@ -0,0 +1,21 @@
+const FRAMEWORK_REACT = {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+    swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+}
+
+export { FRAMEWORK_REACT }

package/config/index.js

@@ -0,0 +1,13 @@
+import { AUTHORIZATION } from './authorization'
+import { ADDONS_NEXTJS } from './addonsNextJs'
+import { ADDONS_REACT } from './addonReact'
+import { FRAMEWORK_NEXTJS } from './frameworkNextJs'
+import { FRAMEWORK_REACT } from './frameworkReact'
+import { BACKGROUNDS } from './backgrounds'
+import { MAIN_CONFIG } from './mainConfig'
+import { REFS } from './refs'
+import { STATIC_DIRS_REACT } from './staticDirsReact'
+import { STATIC_DIRS_NEXTJS } from './staticDirsNextJs'
+import { VIEWPORTS } from './viewports'
+
+export { AUTHORIZATION, ADDONS_NEXTJS, STATIC_DIRS_REACT, STATIC_DIRS_NEXTJS, FRAMEWORK_NEXTJS, FRAMEWORK_REACT, ADDONS_REACT, BACKGROUNDS, MAIN_CONFIG, REFS, VIEWPORTS }

package/config/mainConfig.js

@@ -0,0 +1,28 @@
+const MAIN_CONFIG = {
+  core: {
+    disableTelemetry: true,
+  },
+  features: {
+    backgroundsStoryGlobals: true,
+    viewportStoryGlobals: true,
+  },
+  webpackFinal: async (config) => {
+    const imageRule = config.module?.rules?.find((rule) => {
+      const test = rule.test
+      if (!test) {
+        return false
+      }
+      return test.test('.svg')
+    })
+
+    imageRule.exclude = /\.svg$/
+
+    config.module?.rules?.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    })
+    return config
+  },
+}
+
+export { MAIN_CONFIG }

package/config/preview.css

@@ -0,0 +1,23 @@
+.sb-main-centered {
+  & #storybook-root {
+    min-height: 100%;
+    align-items: center;
+  }
+}
+
+.sb-main-fullscreen {
+  height: auto;
+}
+
+#storybook-root {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.docs-story {
+  padding: 40px;
+  display: flex;
+  justify-content: center;
+}

package/config/refs.js

@@ -0,0 +1,14 @@
+const REFS = {
+  'itcase-storybook': {
+    expanded: false,
+    title: 'Introduction',
+    url: 'https://itcase.pro/storybook/',
+  },
+  'itcase-ui': {
+    expanded: false,
+    title: 'ITCase UI',
+    url: 'https://itcase.pro/ui/',
+  },
+}
+
+export { REFS }

package/config/staticDirsNextJs.js

@@ -0,0 +1,6 @@
+const STATIC_DIRS_NEXTJS = [
+  '../public',
+  // { from: '../src/appearance/', to: 'src/appearance/' },
+  // { from: '../public/img', to: 'img/' },
+]
+export { STATIC_DIRS_NEXTJS }

package/config/staticDirsReact.js

@@ -0,0 +1,4 @@
+const STATIC_DIRS_REACT = [
+  '../public'
+]
+export { STATIC_DIRS_REACT }

package/config/users.js

@@ -0,0 +1,10 @@
+import { DEFAULT_USERS } from '@itcase/storybook-addon-auth/defaults'
+
+const USERS = {
+  user: { name: 'User', token: process.env.USER_AUTH_TOKEN, color: '#777777' },
+  manager: { name: 'Manager', token: process.env.MANAGER_AUTH_TOKEN, color: '#D80E4F' },
+  admin: { name: 'Admin', token: process.env.ADMIN_AUTH_TOKEN, color: '#1EA5FC' },
+  ...DEFAULT_USERS,
+}
+
+export { USERS }

package/config/viewports.js

@@ -0,0 +1,22 @@
+import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+const VIEWPORTS = {
+  desktop: {
+    name: 'Desktop',
+    styles: {
+      width: '1440px',
+      height: '100%',
+    },
+  },
+  mobile: {
+    name: 'Mobile',
+    styles: {
+      width: '375px',
+      height: '667px',
+    },
+  },
+  ...INITIAL_VIEWPORTS,
+  ...MINIMAL_VIEWPORTS,
+}
+
+export { VIEWPORTS }

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@itcase/storybook-config",
+  "version": "1.0.0",
+  "author": "ITCase",
+  "description": "Code style linter configuration presets",
+  "engines": {
+    "node": ">=20.12.0"
+  },
+  "scripts": {
+    "prepare": "husky",
+    "storybook-react": "storybook dev -p 6006 --config-dir .storybook-react",
+    "storybook-next-js": "storybook dev -p 6006 -c .storybook-next-js",
+    "semantic-release": "semantic-release"
+  },
+  "type": "module",
+  "license": "MIT",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ITCase/itcase-storybook-config.git"
+  },
+  "main": "config/index.js",
+  "files": [
+    "README.md",
+    "config"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "msw": {
+    "workerDirectory": "public"
+  },
+  "dependencies": {
+    "@itcase/storybook-addon-auth": "^1.0.3",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-controls": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/addon-viewport": "^8.4.7",
+    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/nextjs": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "http-proxy-middleware": "^3.0.3",
+    "msw": "^2.7.0",
+    "msw-storybook-addon": "^2.0.4"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@itcase/common": "^1.2.17",
+    "@itcase/lint": "^1.0.35",
+    "@itcase/ui": "^1.3.12",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/release-notes-generator": "14.0.3",
+    "conventional-changelog-conventionalcommits": "^8.0.0",
+    "eslint": "9.17.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.3.0",
+    "msw-storybook-addon": "^2.0.4",
+    "prettier": "^3.4.2",
+    "semantic-release": "^24.2.1",
+    "storybook": "^8.4.7",
+    "stylelint": "^16.12.0",
+    "typescript": "^5.7.3"
+  }
+}