wip

V3.md

@@ -0,0 +1,50 @@
+## Breaking
+
+- Remove dependency on `@doc-tools/transform`
+  `@doc-tools/transform` js and css should be attached directly to final projects
+
+
+### ErrorPage
+- Removed `lang` prop
+
+### Feedback
+- Removed `lang` prop
+- Removed `singlePage` prop
+- Pick `dislikeVariants` from i18n by default
+
+### Contributors
+- Removed `lang` prop
+
+### MiniToc
+- Removed `lang` prop
+- MiniToc returns `null` on empty headings. (Previously it render useless title)
+
+### SettingsControl
+- Removed `lang` prop
+
+### PdfControl
+- Removed `lang` prop
+- Wrapped by react `memo`
+
+### SinglePageControl
+- Removed `lang` prop
+- Wrapped by react `memo`
+
+### FullScreenControl
+- Removed `lang` prop
+- Wrapped by react `memo`
+
+### EditButton
+- Removed `lang` prop
+- Wrapped by react `memo`
+
+### SearchPage
+- Removed `lang` prop
+
+### SearchBar
+- Removed `lang` prop
+- Wrapped by react `memo`
+
+### SearchItem
+- Removed `lang` prop
+- Wrapped by react `memo`

demo/.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": []
+}

demo/.storybook/main.js

@@ -0,0 +1,49 @@
+// import {join, dirname} from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+// function getAbsolutePath(value) {
+//     return dirname(require.resolve(join(value, 'package.json')));
+// }
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        {
+            name: '@storybook/addon-styling',
+            options: {
+                sass: {
+                    implementation: require("sass"),
+                },
+            }
+        },
+        '@storybook/addon-onboarding',
+        '@storybook/addon-interactions',
+
+    ],
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+    async webpackFinal(config, { configType }) {
+        config.module.rules.push({
+            test: /\.svg$/,
+            type: 'javascript/auto',
+            use: ['@svgr/webpack'],
+        });
+
+        config.module.rules.forEach(rule => console.log(rule.test, rule.use));
+
+        return config;
+    }
+};
+
+export default config;

demo/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+    parameters: {
+        actions: {argTypesRegex: '^on[A-Z].*'},
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+    },
+};
+
+export default preview;

demo/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@doc-tools/components-demo",
+  "private": true,
+  "license": "MIT",
+  "version": "1.0.0",
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-react": "^7.22.5",
+    "@doc-tools/transform": "^3.10.2",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling-webpack": "^0.0.3",
+    "@storybook/blocks": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@storybook/testing-library": "^0.2.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.4.0"
+  },
+  "dependencies": {
+    "@babel/preset-typescript": "^7.22.11",
+    "@doc-tools/components": "^2.8.3",
+    "@storybook/addon-styling": "^1.3.7",
+    "@svgr/webpack": "^8.1.0",
+    "css-loader": "^6.8.1",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2"
+  }
+}

demo/src/Components/DocLeadingPage/index.tsx

@@ -0,0 +1,38 @@
+import React, {useState} from 'react';
+import cn from 'bem-cn-lite';
+import {DocLeadingPage, DocLeadingPageData, DEFAULT_SETTINGS} from '@doc-tools/components';
+import Header from '../Header/Header';
+import {getIsMobile} from '../../controls/settings';
+import getLangControl from '../../controls/lang';
+import pageContent from './page.json';
+
+const layoutBlock = cn('Layout');
+
+const DocLeadingPageDemo = () => {
+    const langValue = getLangControl();
+    const isMobile = getIsMobile();
+    const router = {pathname: '/docs/compute'};
+
+    const [fullScreen, onChangeFullScreen] = useState(DEFAULT_SETTINGS.fullScreen);
+    const [lang, onChangeLang] = useState(langValue);
+
+    return (
+        <div className={isMobile === 'true' ? 'mobile' : 'desktop'}>
+            <Header
+                lang={lang}
+                fullScreen={fullScreen}
+                onChangeFullScreen={onChangeFullScreen}
+                onChangeLang={onChangeLang}
+            />
+            <div className={layoutBlock('content')}>
+                <DocLeadingPage
+                    {...(pageContent as DocLeadingPageData)}
+                    lang={lang}
+                    router={router}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default DocLeadingPageDemo;