starting storybook

src/components/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react"
+}

src/components/.storybook/preview.js

@@ -0,0 +1,16 @@
+// Bootstrap 4 and fontawesome 5 required for components css
+import "bootstrap/dist/css/bootstrap.min.css";
+import "@fortawesome/fontawesome-free/css/all.css";
+// Plus some custom CSS
+// TODO: this should be exported with the npm package!
+import "../../App.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

src/components/package.json

@@ -18,7 +18,9 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "echo \"build from repo root\""
+    "build": "echo \"build from repo root\"",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "author": "lingdocs.com",
   "license": "MIT",
@@ -32,7 +34,17 @@
     "react-select": "^5.4.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack4": "^6.5.16",
+    "@storybook/manager-webpack4": "^6.5.16",
+    "@storybook/react": "^6.5.16",
+    "@storybook/testing-library": "^0.0.13",
     "@types/pbf": "^3.0.2",
+    "babel-loader": "^8.3.0",
     "fs-extra": "^10.1.0"
   }
 }

src/components/src/Examples.tsx

@@ -31,6 +31,7 @@ function Examples(props: ({
     opts: T.TextOptions,
     lineHeight?: 0 | 1 | 2 | 3 | 4,
 }) {
+    console.log({ props });
     const examples = "children" in props ? props.children : props.ex;
     const Example = ({ children: text }: { children: PsStringWSub }) => (
         <div className={props.lineHeight !== undefined ? `mb-${props.lineHeight}` : `mt-1 mb-3`}>

src/components/src/stories/Examples.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import opts from "../../../lib/src/default-text-options";
+import Examples from "../Examples";
+import { Story } from "@storybook/react";
+
+type ExamplesProps = Parameters<typeof Examples>[0];
+
+export default {
+    title: "Examples",
+    component: Examples,
+};
+
+const Template: Story<ExamplesProps> = (args) => <div>
+    <p>Before example</p>
+    <Examples {...args} />
+    <p>After Example</p>
+</div>;
+
+export const Basic = Template.bind({});
+Basic.args = {
+    opts: opts,
+    ex: [
+        { p: "زه کور ته ځم", f: "zu kor ta dzum", e: "I'm going home" },
+        { p: "مونږ کور ته ځو", f: "moonG kor ta dzoo", e: "We're going home" },
+    ],
+};

src/components/src/stories/Introduction.stories.mdx

@@ -0,0 +1 @@
+Storybook introduction

vocab/nouns-adjs/adverbs.js

@@ -11,7 +11,6 @@ module.exports = [
 { ts: 1527822788, e: `tonight, this evening` }, // بېګاته - begáata
 { ts: 1527812183, e: `aware of, thinking of` }, // ورپام - wărpaam
 { ts: 1527814711, e: `soon, very soon, shortly` }, // لنډ پر لنډه - lanD par lanDa
-{ ts: 1527821930, e: `impromptu, without preparation` }, // بالبدیهه - bilbadeehá
 { ts: 1527814164, e: `this side, on this side` }, // دېخوا - dekhwaa
 { ts: 1527815160, e: `yesterday` }, // پرون - paroon
 { ts: 1623688539364, e: `nasal (speaking through the nose)` }, // ګانګوړ - gaangóR, gaangwÚR

vocab/nouns-adjs/basic-unisex.js

@@ -81,7 +81,6 @@ module.exports = [
     { ts: 1609780006604, e: "fruitful" }, // زرخېز - zarkhéz
     { ts: 1527817116, e: "green, flourishing" }, // زرغون - zarghoon
     { ts: 1527814026, e: "golden" }, // زرین - zareen
-    { ts: 1567594312839, e: "brave" }, // زړه ور - zuRawár
     { ts: 1527815848, e: "committed" }, // ژمن - jzman
     { ts: 1527813498, e: "light" }, // سپک - spuk
     { ts: 1578329248464, e: "white" }, // سپین - speen

vocab/nouns-adjs/ee-fem.js

@@ -12,7 +12,6 @@ module.exports = [
     { ts: 1527818402, e: "championship; courage" }, // اتلولي - atalwalée
     { ts: 1527814060, e: "ease" }, // اساني - asaanee
     { ts: 1527821293, e: "preparation, readiness, planning" }, // امادګي - amaadagee
-    { ts: 1527819502, e: "kingship, kingdom, rule, throne, authority" }, // باچهي - baachahee
     { ts: 1527820035, e: "dominion, holding sway over someone" }, // باداري - baadaaree
     { ts: 1527817732, e: "misfortune, difficulty" }, // بدبختي - badbakhtee
     { ts: 1588786872582, e: "shame, disrepute, dishonour" }, // بدنامي - badnaamee

vocab/verbs/simple-trans.js

@@ -33,7 +33,7 @@ module.exports = [
 	1527821498, // ټکول - to knock, pound, crush, grind, hammer
 	1527818537, // ځړول - to hang, to suspend, to lower down, to let down
 	1527813046, // ځنډول - to delay, to postpone, to hold back, to detain
-	1527813755, // ځورول - to bother, irritate, torture, distress, vex, grind on
+	1527820418, // ځورول - to bother, irritate, torture, distress, vex, grind on
 	1527814586, // چلول - to drive, operate, handle, put forward, circulate
 	1527816564, // چیچل - to bite, chew, grind (teeth), clench (teeth), sting
 	1527812790, // خوړل - to eat, to bite