Merge pull request #1382 from p3ol/refactor/typescript

♻️ refactor: typescript

.eslintrc.js

@@ -3,6 +3,7 @@ const WARN = 1;
 
 module.exports = {
   extends: ['@poool/eslint-config-react'],
+  parser: '@typescript-eslint/parser',
   rules: {
     'react/prop-types': OFF,
     'react/jsx-uses-react': OFF,
@@ -11,16 +12,16 @@ module.exports = {
     'n/no-callback-literal': OFF,
   },
   overrides: [{
-    files: ['packages/**/*.test.js', 'packages/**/tests/**/*.js'],
+    files: [
+      'packages/**/*.test.js',
+      'packages/**/*.test.tsx',
+      'packages/**/*.test.ts',
+    ],
     env: {
       jest: true,
     },
-    rules: {
-      'import/order': OFF,
-    },
   }, {
     files: ['packages/**/*.{ts,tsx}'],
-    parser: '@typescript-eslint/parser',
     globals: {
       JSX: 'readonly',
       React: 'readonly',

.github/workflows/ci.yml

@@ -40,7 +40,7 @@ jobs:
       - name: Test
         run: yarn test
       - name: Codecov upload
-        uses: codecov/codecov-action@v4.0.1
+        uses: codecov/codecov-action@v4.4.1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
   build:

.github/workflows/gh-pages.yml

@@ -28,7 +28,7 @@ jobs:
           node-version: 20
           cache: yarn
       - name: Setup Pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v5
       - name: Install and build
         run: |
           yarn install

.storybook/main.ts

@@ -0,0 +1,124 @@
+import path from 'node:path';
+
+import type { RuleSetRule } from 'webpack';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import { styles } from '@ckeditor/ckeditor5-dev-utils';
+
+const config: StorybookConfig = {
+  stories: [
+    '../packages/react/lib/index.stories.{js,tsx}',
+    '../packages/*/lib/**/*.stories.{js,tsx}',
+  ],
+  addons: [
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-themes',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.sass$/,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: [
+                      'autoprefixer',
+                      'tailwindcss',
+                    ],
+                  },
+                },
+              },
+              'sass-loader',
+            ],
+          },
+        ],
+      },
+    },
+    '@storybook/addon-webpack5-compiler-swc',
+  ],
+  framework: '@storybook/react-webpack5',
+  webpackFinal: config => {
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      '@oakjs/core': path.resolve('./packages/core/lib'),
+      '@oakjs/react': path.resolve('./packages/react/lib'),
+      '@oakjs/ckeditor5-build-custom': path.resolve('./packages/ckeditor5-build-custom/lib'),
+      '@poool/oak/lib': path.resolve('./packages/oak/lib'),
+      '@poool/oak': path.resolve('./packages/oak/lib')
+    };
+
+    // CKEditor config
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+    config.module.rules.push({
+      test: /@ckeditor\/(.+)\.svg$/,
+      type: 'asset/source',
+    });
+
+    // @ts-ignore webpack is weird bro
+    const cssRule: RuleSetRule = config.module.rules.find((r => (
+        r && (r as RuleSetRule).test &&
+        (r as RuleSetRule).test?.toString() === '/\\.css$/'
+    ))) || ({} as RuleSetRule);
+    cssRule.exclude = /@ckeditor/;
+
+    config.module.rules.push({
+      test: /@ckeditor\/(.+)\.css$/,
+      exclude: /addon-/,
+      use: [
+        {
+          loader: 'style-loader',
+          options: {
+            injectType: 'singletonStyleTag',
+            attributes: {
+              'data-cke': true,
+            },
+          },
+        },
+        'css-loader',
+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: styles.getPostCssConfig({
+              themeImporter: {
+                themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
+              },
+              minify: true,
+            }),
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
+  swc: config => ({
+    ...config,
+    jsc: {
+      ...config.jsc,
+      transform: {
+        ...config.jsc?.transform,
+        react: {
+          ...config.jsc?.transform?.react,
+          runtime: 'automatic',
+        },
+      },
+      parser: {
+        ...config.jsc?.parser,
+        syntax: 'typescript',
+        tsx: true,
+        jsx: true,
+      },
+    },
+  }),
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1 @@
+import './index.sass';