Checkboxes

.gitignore

@@ -1,4 +1,3 @@
-.storybook
 *.iml
 *.log
 .doc/
@@ -26,6 +25,7 @@ node_modules
 .cache
 dist
 *.css
+!src/stories/default.css
 build
 lib
 /coverage

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/stories/**/*.stories.(mdx|js)'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/preset-typescript', '@storybook/addon-docs'],
+};

.storybook/preview.js

@@ -0,0 +1,6 @@
+import { addParameters } from '@storybook/react';
+import { DocsPage } from '@storybook/addon-docs/blocks';
+
+addParameters({
+  docs: { page: DocsPage },
+})

package.json

@@ -41,28 +41,40 @@
     "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js",
     "test": "father test",
     "gh-pages": "npm run build && father doc deploy",
-    "now-build": "npm run build"
+    "now-build": "npm run build",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-docs": "^5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addons": "^5.3.18",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "^5.3.18",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "@types/warning": "^3.0.0",
+    "babel-loader": "^8.1.0",
     "css-animation": "^1.2.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.0.0",
     "father": "^2.25.0-alpha.1",
+    "fork-ts-checker-webpack-plugin": "^4.1.3",
     "less": "^3.11.1",
     "np": "^6.0.0",
     "rc-dialog": "^7.3.1",
     "rc-tooltip": "4.x",
     "rc-trigger": "^4.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
+    "ts-loader": "^7.0.1",
     "typescript": "^3.5.2"
   },
   "dependencies": {

src/stories/Checkboxes.stories.js

@@ -0,0 +1,170 @@
+import React from 'react';
+
+import Tree from '../Tree';
+
+import './default.css';
+
+export default {
+  title: 'Checkboxes',
+}
+
+/**
+ * Test
+ */
+export const Basic = () => (
+  <>
+    <Tree
+      checkable
+      defaultExpandAll
+      treeData={[
+        {
+          key: '1',
+          title: '/Users/Sites/project/',
+          children: [
+            {
+              key: '2',
+              title: '/folder',
+              children: [
+                {
+                  key: '3',
+                  title: '/file.js',
+                },
+              ],
+            },
+            {
+              key: '4',
+              title: '/folder2',
+              children: [
+                {
+                  key: '5',
+                  title: '/file2.js',
+                },
+              ],
+            },
+          ],
+        },
+      ]}
+    />
+  </>
+);
+
+
+export const checkingIndividual = () => (
+  <Tree
+    checkable
+    defaultExpandAll
+    checkStrictly
+    treeData={[
+      {
+        key: '1',
+        title: '/Users/Sites/project/',
+        children: [
+          {
+            key: '2',
+            title: '/folder',
+            children: [
+              {
+                key: '3',
+                title: '/file.js',
+              },
+            ],
+          },
+          {
+            key: '4',
+            title: '/folder2',
+            children: [
+              {
+                key: '5',
+                title: '/file2.js',
+              },
+            ],
+          },
+        ],
+      },
+    ]}
+  />
+);
+
+checkingIndividual.story = {
+  parameters: {
+    docs: {
+      storyDescription: `
+Notice how if you click on \`file.js\` the parents don't get checked
+        `,
+    },
+  },
+}
+
+export const checkingParents = () => (
+  <>
+    Example 1:
+    <Tree
+      checkable
+      defaultExpandAll
+      treeData={[
+        {
+          key: '1',
+          title: '/Users/Sites/project/',
+          children: [
+            {
+              key: '2',
+              title: '/folder',
+              children: [
+                {
+                  key: '3',
+                  title: '/file.js',
+                },
+              ],
+            },
+          ],
+        },
+      ]}
+    />
+
+    Example 2:
+    <Tree
+      checkable
+      defaultExpandAll
+      treeData={[
+        {
+          key: '1',
+          title: '/Users/Sites/project/',
+          children: [
+            {
+              key: '2',
+              title: '/folder',
+              children: [
+                {
+                  key: '3',
+                  title: '/file.js',
+                },
+              ],
+            },
+            {
+              key: '4',
+              title: '/folder2',
+              children: [
+                {
+                  key: '5',
+                  title: '/file2.js',
+                },
+              ],
+            },
+          ],
+        },
+      ]}
+    />
+
+  </>
+)
+
+checkingParents.story = {
+  parameters: {
+    docs: {
+      storyDescription: `
+Notice how if you check \`file.js\` all the parents get checked recursively because all their children are checked.
+However in the second example if you check \`file.js\` they only get half checked because \`file2.js\` is unchecked
+        `,
+    },
+  },
+}

src/stories/mockData.js

@@ -0,0 +1,18 @@
+export default [
+  {
+    key: "1",
+    title: "/Users/Sites/project/",
+    children: [
+      {
+        key: "2",
+        title: "/folder",
+        children: [
+          {
+            key: "3",
+            title: "/file.js",
+          },
+        ],
+      },
+    ],
+  },
+]

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "commonjs",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "."
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts"
+  ],
+  "types": ["typePatches"]
+}