Fix infrastractural problems

- Commit VSCode settings to enable Prettier on ts and tsx files
- Fix missing declarations in Storybook files that caused the develop script
to fail
- Add @gitgraph/core as a direct dependency of @gitgraph/stories
- Fix tsconfig typo
- Add sleep to storybook script to fix async issues caused by @gitgraph/core
not available

Author: andreasonny83

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "search.exclude": {
+        "**/node_modules": true,
+        "**/dist": true,
+        "**/coverage": true
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

package.json

@@ -24,7 +24,7 @@
     "lerna": "lerna",
     "build": "lerna run build --scope=@gitgraph/{core,react,js,node} --stream",
     "watch": "lerna run watch --stream",
-    "storybook": "lerna run storybook --stream",
+    "storybook": "sleep 3 && lerna run storybook --stream",
     "develop": "concurrently npm:watch npm:storybook",
     "website": "lerna run start --scope=@gitgraph/website --stream",
     "deploy:website": "lerna run deploy --scope=@gitgraph/website --stream",

packages/stories/.storybook/tsconfig.json

@@ -17,6 +17,7 @@
     "build": "build-storybook"
   },
   "dependencies": {
+    "@gitgraph/core": "1.4.5",
     "@gitgraph/js": "1.3.5",
     "@gitgraph/react": "1.5.4"
   },

packages/stories/package.json

@@ -25,7 +25,7 @@ const withoutBranchLabels = templateExtend(TemplateName.Metro, {
   branch: { label: { display: false } },
 });
 
-const renderSax: CommitOptions["renderDot"] = (commit) =>
+const renderSax: CommitOptions["renderDot"] = (commit: any) =>
   createSvg({
     height: 30,
     width: 30,
@@ -49,7 +49,7 @@ const renderSax: CommitOptions["renderDot"] = (commit) =>
     ],
   });
 
-const renderLongMessage: CommitOptions["renderMessage"] = (commit) => {
+const renderLongMessage: CommitOptions["renderMessage"] = (commit: any) => {
   return createG({
     translate: { x: 0, y: commit.style.dot.size },
     children: [
@@ -79,7 +79,7 @@ storiesOf("gitgraph-js/6. Custom renders", module)
   .add("with render dot", () => (
     <GraphContainer>
       {(graphContainer) => {
-        const renderDot: CommitOptions["renderDot"] = (commit) =>
+        const renderDot: CommitOptions["renderDot"] = (commit: any) =>
           renderSax(commit);
 
         const gitgraph = createGitgraph(graphContainer, {
@@ -110,7 +110,7 @@ storiesOf("gitgraph-js/6. Custom renders", module)
   .add("with render tooltip", () => (
     <GraphContainer>
       {(graphContainer) => {
-        const renderTooltip: CommitOptions["renderTooltip"] = (commit) => {
+        const renderTooltip: CommitOptions["renderTooltip"] = (commit: any) => {
           const commitSize = commit.style.dot.size * 2;
 
           return createG({
@@ -156,7 +156,7 @@ storiesOf("gitgraph-js/6. Custom renders", module)
   .add("with render message", () => (
     <GraphContainer>
       {(graphContainer) => {
-        const renderMessage: CommitOptions["renderMessage"] = (commit) => {
+        const renderMessage: CommitOptions["renderMessage"] = (commit: any) => {
           return createText({
             translate: { x: 0, y: commit.style.dot.size },
             fill: commit.style.dot.color,
@@ -243,7 +243,7 @@ storiesOf("gitgraph-js/6. Custom renders", module)
     </GraphContainer>
   ))
   .add("with render branch label", () => {
-    const renderLabel: BranchOptions["renderLabel"] = (branch) => {
+    const renderLabel: BranchOptions["renderLabel"] = (branch: any) => {
       return createText({
         content: `🎷 ${branch.name}`,
         fill: branch.style.label.color,
@@ -278,7 +278,7 @@ storiesOf("gitgraph-js/6. Custom renders", module)
     );
   })
   .add("with render tag", () => {
-    const renderTag: TagOptions["render"] = (name, style) => {
+    const renderTag: TagOptions["render"] = (name: any, style: any) => {
       return createText({
         content: `🎷 ${name}`,
         font: style.font,

packages/stories/src/gitgraph-js/6-custom-renders.stories.tsx

@@ -19,7 +19,7 @@ const withoutBranchLabels = templateExtend(TemplateName.Metro, {
 
 storiesOf("gitgraph-react/6. Custom renders", module)
   .add("with render dot", () => {
-    const renderDot: CommitOptions["renderDot"] = (commit) => (
+    const renderDot: CommitOptions["renderDot"] = (commit: any) => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 71.84 75.33"
@@ -59,7 +59,7 @@ storiesOf("gitgraph-react/6. Custom renders", module)
     );
   })
   .add("with render tooltip", () => {
-    const renderTooltip: CommitOptions["renderTooltip"] = (commit) => {
+    const renderTooltip: CommitOptions["renderTooltip"] = (commit: any) => {
       const commitSize = commit.style.dot.size * 2;
       return (
         <g transform={`translate(${commitSize + 10}, ${commitSize / 2})`}>
@@ -113,7 +113,7 @@ storiesOf("gitgraph-react/6. Custom renders", module)
     );
   })
   .add("with render message", () => {
-    const renderMessage: CommitOptions["renderMessage"] = (commit) => {
+    const renderMessage: CommitOptions["renderMessage"] = (commit: any) => {
       return (
         <text
           y={commit.style.dot.size}
@@ -151,7 +151,7 @@ storiesOf("gitgraph-react/6. Custom renders", module)
     );
   })
   .add("with render message (long)", () => {
-    const renderMessage: CommitOptions["renderMessage"] = (commit) => {
+    const renderMessage: CommitOptions["renderMessage"] = (commit: any) => {
       return (
         <g transform={`translate(0, ${commit.style.dot.size})`}>
           <text fill={commit.style.dot.color} alignmentBaseline="central">
@@ -197,7 +197,7 @@ storiesOf("gitgraph-react/6. Custom renders", module)
     );
   })
   .add("with render message (long & reverse orientation)", () => {
-    const renderMessage: CommitOptions["renderMessage"] = (commit) => {
+    const renderMessage: CommitOptions["renderMessage"] = (commit: any) => {
       return (
         <g transform={`translate(0, ${commit.style.dot.size})`}>
           <text fill={commit.style.dot.color} alignmentBaseline="central">
@@ -248,7 +248,7 @@ storiesOf("gitgraph-react/6. Custom renders", module)
     );
   })
   .add("with render branch label", () => {
-    const renderLabel: BranchOptions["renderLabel"] = (branch) => {
+    const renderLabel: BranchOptions["renderLabel"] = (branch: any) => {
       return (
         <text
           alignmentBaseline="middle"
@@ -281,7 +281,7 @@ storiesOf("gitgraph-react/6. Custom renders", module)
     );
   })
   .add("with render tag", () => {
-    const renderTag: TagOptions["render"] = (name, style) => {
+    const renderTag: TagOptions["render"] = (name: any, style: any) => {
       return (
         <text style={{ font: style.font }} fill={style.bgColor} y={6}>
           🎷 {name}

packages/stories/src/gitgraph-react/6-custom-renders.stories.tsx

@@ -17,7 +17,7 @@
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,
-    "moduleResolution": "node",
+    "moduleResolution": "node"
   },
   "include": ["src/**/*"]
 }