fix: fix change folder, name (#926)

* fix: fix change folder, name

* docs: add parallax demo

* fix: fix camel case name

* chore: remove console log

Author: daybrush

debug/state-api/index.html renamed to debug/reactive/index.html

@@ -129,8 +129,8 @@
           renderOnlyVisible: true,
           // circular: true
         });
-        const { connectFlickingStateApi } = Flicking;
-        const reactiveObj = connectFlickingStateApi(flicking);
+        const { connectFlickingReactiveAPI } = Flicking;
+        const reactiveObj = connectFlickingReactiveAPI(flicking);
         const {
           isReachStart,
           isReachEnd,

docs/docusaurus.config.js

@@ -1,5 +1,5 @@
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
-
+const path = require("path");
 const isDev = process.env.NODE_ENV === "development";
 
 /** @type {import('@docusaurus/types').Config} */
@@ -14,7 +14,24 @@ module.exports = {
   projectName: "naver.github.io",
   trailingSlash: false,
   organizationName: "naver",
-  plugins: ["docusaurus-plugin-sass"],
+  plugins: [
+    "docusaurus-plugin-sass",
+    () => {
+      return {
+        name: "custom-webpack-alias",
+        configureWebpack: (config, isServer, utils) => {
+          return {
+            resolve: {
+              alias: {
+                react: path.resolve(__dirname, "./node_modules/react"),
+                "react-dom": path.resolve(__dirname, "./node_modules/react-dom"),
+              }
+            }
+          };
+        }
+      };
+    }
+  ],
   themeConfig: {
     navbar: {
       logo: {

docs/package-lock.json

@@ -11,13 +11,19 @@
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids"
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "postinstall": "yarn link:react-flicking && yarn link:flicking && yarn link:docs",
+    "link:flicking": "cd ../ && npm link",
+    "link:react-flicking": "cd ../packages/react-flicking && npm link @egjs/flicking && npm link",
+    "link:docs": "npm link @egjs/react-flicking"
+
   },
   "dependencies": {
     "@docusaurus/core": "2.4.3",
     "@docusaurus/preset-classic": "2.4.3",
     "@egjs/flicking-plugins": "^4.6.0",
-    "@egjs/react-flicking": "^4.13.0",
+    "@egjs/flicking": "*",
+    "@egjs/react-flicking": "*",
     "@egjs/react-grid": "^1.1.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
@@ -31,6 +37,10 @@
     "react-tabs": "^3.2.2",
     "react-toggle": "^4.1.2"
   },
+  "overrides": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -47,6 +57,8 @@
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-proposal-decorators": "^7.13.15",
     "@types/react": "^17.0.19",
-    "remark-breaks": "^2.0.2"
+    "remark-breaks": "^2.0.2",
+    "tslib": "^2.2.0",
+    "typescript": "4.8.4"
   }
 }

docs/package.json

@@ -189,3 +189,31 @@ article a {
   margin-right: 0px;
   margin-left: 0px;
 }
+
+
+
+
+.skelton-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  justify-content: center;
+  align-items: flex-start;
+}
+.skeleton-bar {
+  height: 10px;
+  border-radius: 5px;
+  background: white;
+}
+.skeleton-bar-size1 {
+  width: 100px;
+}
+.skeleton-bar-size2 {
+  width: 120px;
+}
+.skeleton-bar-size3 {
+  width: 160px;
+}
+.skeleton-bar-size4 {
+  width: 200px;
+}

docs/src/css/custom.css

@@ -0,0 +1,42 @@
+import React from "react";
+import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
+
+export default () => {
+  const flickingRef = React.createRef<Flicking>();
+  const {
+    indexProgress
+  } = useFlickingReactiveAPI(flickingRef);
+
+  return (
+    <Flicking ref={flickingRef}>
+      {[0, 1, 2, 3, 4].map((index) => {
+
+        const childProgress = index - indexProgress;
+        const opacity = Math.min(Math.max(1 - Math.abs(childProgress), 0), 1);
+
+        return <div className={"flicking-panel skelton-panel has-background-primary is-size-1"}>
+          <span className="skeleton-bar skeleton-bar-size4" style={{
+            transform: `translate(${childProgress * 180}px)`,
+            opacity
+          }}></span>
+          <span className="skeleton-bar skeleton-bar-size1" style={{
+            transform: `translate(${childProgress * 160}px)`,
+            opacity
+          }}></span>
+          <span className="skeleton-bar skeleton-bar-size3" style={{
+            transform: `translate(${childProgress * 140}px)`,
+            opacity
+          }}></span>
+          <span className="skeleton-bar skeleton-bar-size2" style={{
+            transform: `translate(${childProgress * 120}px)`,
+            opacity
+          }}></span>
+          <span className="skeleton-bar skeleton-bar-size3" style={{
+            transform: `translate(${childProgress * 100}px)`,
+            opacity
+          }}></span>
+        </div>;
+      })}
+    </Flicking>
+  );
+};

docs/src/demo/reactive/Parallax.tsx

@@ -13,6 +13,7 @@ import CFCTabs from "@site/src/component/CFCTabs"
 import Columns from "@site/src/component/Columns";
 import ColumnItem from "@site/src/component/ColumnItem";
 import AutoInit from "@site/src/demo/AutoInit";
+import Parallax from "@site/src/demo/reactive/Parallax";
 import Pagination from '@mui/material/Pagination';
 import LinearProgress from '@mui/material/LinearProgress';
 import Tabs from "@theme/Tabs";
@@ -414,16 +415,13 @@ module.exports = {
 </Tabs>
 
 
-### Fade
-> `.indexedProgress`를 이용하여 각 Panel의 Fade를 만들 수 있습니다.
+### Parallax
+> `.indexProgress`를 이용하여 각 Panel의 Parallax 효과를를 만들 수 있습니다.
 
 <Columns>
   <ColumnItem is={12} className="is-flex is-flex-direction-column is-align-items-center">
- <Flicking align={{ camera: "20%", panel: "40px" }}>
-    { Panels(4) }
-  </Flicking>
-  <Pagination page={1} count={10} />
-</ColumnItem>
+    <Parallax />
+  </ColumnItem>
 </Columns>
 
 

docs/src/pages/Reactive.mdx

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true,
+    "importHelpers": true,
+    "experimentalDecorators": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "react",
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ]
+}