add storybook

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
 }

.storybook/main.ts

@@ -0,0 +1,49 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    'storybook-addon-jotai',
+    "@storybook/addon-styling-webpack",
+    ({
+      name: "@storybook/addon-styling-webpack",
+
+      options: {
+        rules: [{
+      test: /\.css$/,
+      sideEffects: true,
+      use: [
+          require.resolve("style-loader"),
+          {
+              loader: require.resolve("css-loader"),
+              options: {
+
+                  importLoaders: 1,
+              },
+          },{
+    loader: require.resolve("postcss-loader"),
+    options: {
+    implementation: require.resolve("postcss"),
+    },
+    },
+      ],
+    },],
+      }
+    })
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,18 @@
+import type { Preview } from "@storybook/react";
+
+import '../app/globals.css'; // replace with the name of your tailwind css file
+
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -10,3 +10,19 @@ https://github.com/jaroslaw-weber/typabook/assets/9774233/5ac9de93-f3c9-4c29-914
 
 available at:
 https://jaroslaw-weber.github.io/typabook/
+
+
+# how to run on local
+
+```
+npm run dev
+```
+
+# component preview
+
+now it's possible to preview some components with storybook!
+
+run 
+```
+npm run storybook
+```

app/components/Letter.tsx

@@ -55,7 +55,7 @@ function getLetterClasses(
   return result.join(" ");
 }
 
-export function Letter(p:{letter: SingleLetter, progress: number}) {
+export default function Letter(p:{letter: SingleLetter, progress: number}) {
   const {letter, progress}= p
   const [typingAnimation] = useAtom(typingAnimationAtom);
   const [caretType] = useAtom(caretTypeAtom);

app/components/PageChangeButtons.tsx

@@ -13,7 +13,7 @@ import {
   faStepBackward,
 } from "@fortawesome/free-solid-svg-icons";
 
-export function PageChangeButtons() {
+export default function PageChangeButtons() {
   const [userInput, setUserInput] = useAtom(userInputAtom);
   const [wordsPerPage, setWordsPerPage] = useAtom(wordsPerPageAtom);
   const [maxProgress] = useAtom(maxProgressAtom);

app/components/Text.tsx

@@ -1,5 +1,5 @@
 import { useAtom } from "jotai";
-import { Letter } from "./Letter";
+import  Letter  from "./Letter";
 import { pagesAtom, playPageChangeAnimationAtom, progressAtom } from "../state";
 import { SingleWord } from "../types/SingleWord";
 import { getCurrentPage } from "../utils/bookUtils";
@@ -14,7 +14,7 @@ function getWordClasses(word: SingleWord) {
   return result.join(" ");
 }
 
-export function Text() {
+export default function Text() {
   const [progress] = useAtom(progressAtom);
   const [pages] = useAtom(pagesAtom);
   const [playPageChangeAnimation] = useAtom(playPageChangeAnimationAtom);

app/components/progress/Progress.tsx

@@ -0,0 +1,50 @@
+import { useAtom } from "jotai";
+import { accuracyAtom, maxProgressAtom, progressAtom } from "../../state";
+
+export default function Progress() {
+  const [progress] = useAtom(progressAtom);
+  const [maxProgress] = useAtom(maxProgressAtom);
+  const [accuracy] = useAtom(accuracyAtom);
+
+  const percentage = ((progress / maxProgress) * 100).toFixed(2);
+  const percentageDisplay = `${percentage}%`;
+  const progressPercentWidget = (
+    <div className="stat">
+      <div className="stat-figure text-primary"></div>
+      <div className="stat-title">Progress</div>
+      <div className="stat-value text-primary">{percentageDisplay}</div>
+    </div>
+  );
+  const letters = (
+    <div className="stat">
+      <div className="stat-figure text-secondary"></div>
+      <div className="stat-title">Letters typed</div>
+      <div className="stat-value text-secondary">{progress}</div>
+    </div>
+  );
+
+  const accuracyComponent = (
+    <div className="stat">
+      <div className="stat-figure text-secondary"></div>
+      <div className="stat-title">Accuracy</div>
+      <div className="stat-value text-secondary">{accuracy}%</div>
+    </div>
+  );
+  const progressBar = (
+    <progress
+      className="progress progress-primary w-full h-4"
+      value={progress}
+      max={maxProgress}
+    ></progress>
+  );
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      <div className="flex gap-2">
+        {letters}
+        {progressPercentWidget}
+        {accuracyComponent}
+      </div>
+      {progressBar}
+    </div>
+  );
+}

app/pages/HomePage.tsx

@@ -1,11 +1,9 @@
 import { useAtom } from "jotai";
 import { Ui } from "../Ui";
-import Progress from "../components/Progress";
-import { Text } from "../components/Text";
-import TypingInput from "../components/TypingInput";
+import Progress from "../components/progress/Progress";
+import Text from "../components/Text";
 import { currentUiAtom } from "../state";
-import { PageChangeButtons } from "../components/PageChangeButtons";
-import Upload from "../components/Upload";
+import PageChangeButtons  from "../components/PageChangeButtons";
 
 export default function HomePage() {
   const [currentUi] = useAtom(currentUiAtom);