Updating stories

package.json

@@ -34,6 +34,7 @@
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
+    "chromatic": "^11.5.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",

src/stories/basic-grid/basic-example.css

@@ -28,3 +28,7 @@
   stroke-linecap: round;
   stroke-linejoin: round;
 }
+
+h1 {
+  font-family: sans-serif;
+}

src/stories/basic-grid/basic-example.stories.tsx

@@ -1,30 +1,22 @@
 import React from "react"
-import { ComponentStory, ComponentMeta } from "@storybook/react"
-import { HexGrid, Layout, Hexagon, GridGenerator } from "../.."
+import type { Meta, StoryFn } from "@storybook/react"
+import { HexGrid, Layout, Hexagon, GridGenerator, Hex } from "../.."
 import "./basic-example.css"
-import { css, jsx } from "@emotion/react"
 
 export default {
   title: "Basic",
   component: Hexagon,
-} as ComponentMeta<typeof Hexagon>
+} as Meta<typeof Hexagon>
 
-const hexagons = GridGenerator.parallelogram(-2, 3, -2, 1)
+//parallelogram: q1 -> q2, r1 -> r2
+const hexagons: Hex[] = GridGenerator.parallelogram(0, 1, 0, 1)
 
-const Template: ComponentStory<typeof Hexagon> = (args, { argTypes }) => {
+const Template: StoryFn<typeof Hexagon> = () => {
   return (
-    <div
-      className="basic-example "
-      css={css`
-        margin: 0;
-        padding: 1em;
-        font-family: sans-serif;
-        background: #f0f0f0;
-      `}
-    >
+    <div className="basic-example">
       <h1>Basic example of HexGrid usage.</h1>
-      <HexGrid width={1200} height={1000}>
-        <Layout size={{ x: 7, y: 7 }}>
+      <HexGrid>
+        <Layout>
           {hexagons.map((hex, i) => (
             <Hexagon key={i} q={hex.q} r={hex.r} s={hex.s} />
           ))}
@@ -34,4 +26,4 @@ const Template: ComponentStory<typeof Hexagon> = (args, { argTypes }) => {
   )
 }
 
-export const Default = Template.bind({})
+export const Default: StoryFn<typeof Hexagon> = Template.bind({})

src/stories/components/hexagon.stories.tsx

@@ -1,26 +1,32 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react"
+import React from "react"
+import type { Meta, StoryFn } from "@storybook/react"
 import { Hexagon, HexGrid, Layout } from "../.."
 import { COLORS } from "../colors"
 
 export default {
   title: "Components/Hexagon",
   component: Hexagon,
-} as ComponentMeta<typeof Hexagon>
+} as Meta<typeof Hexagon>
 
-const Template: ComponentStory<typeof Hexagon> = (args) => (
-  <HexGrid
-    style={{
-      border: `2px solid ${COLORS.gray[7]}`,
-      background: COLORS.gray[2],
-    }}
-    width="100%"
-    height={400}
-  >
-    <Layout>
-      {/* the hexagon is rendered at the q,r,s coordinates. In this case in the origin (0,0) in the svg space */}
-      <Hexagon r={0} q={0} s={0} style={{ fill: COLORS.dark[3] }} />
-    </Layout>
-  </HexGrid>
-)
+const Template: StoryFn<typeof Hexagon> = () => {
+  return (
+    <div>
+      <h1>Basic example of hexagon coordinates usage</h1>
+      <HexGrid
+        style={{
+          border: `2px solid ${COLORS.gray[7]}`,
+          background: COLORS.gray[2],
+        }}
+        width="100%"
+        height={400}
+      >
+        <Layout>
+          {/* the hexagon is rendered at the q,r,s coordinates. In this case in the origin (0,0) in the svg space */}
+          <Hexagon r={0} q={0} s={0} style={{ fill: COLORS.dark[3] }} />
+        </Layout>
+      </HexGrid>
+    </div>
+  )
+}
 
-export const Basic: ComponentStory<typeof Hexagon> = Template.bind({})
+export const Basic: StoryFn<typeof Hexagon> = Template.bind({})

src/stories/components/hexgrid.stories.tsx

@@ -1,34 +1,42 @@
-import { ComponentMeta } from "@storybook/react"
-import { HexGrid } from "../.."
+import React from "react"
+import { Meta, StoryFn } from "@storybook/react"
+import { HexGrid, Hexagon } from "../.."
 import { COLORS } from "../colors"
 
 export default {
   title: "Components/HexGrid",
   component: HexGrid,
-} as ComponentMeta<typeof HexGrid>
+} as Meta<typeof HexGrid>
 
-export const Basic = () => (
-  // the HexGrid is just a wrapper around a normal svg element. The viewBox is defaults to "-50 -50 100 100"
-  <HexGrid
-    style={{
-      border: `2px solid ${COLORS.gray[7]}`,
-      background: COLORS.gray[2],
-    }}
-    width={"100%"}
-    height={"50vh"}
-  >
-    {/* Normal svg elements can be placed as normal */}
-    <circle
-      cx="0"
-      cy="0"
-      r="10"
-      stroke={COLORS.gray[7]}
-      fill={COLORS.gray[3]}
-    />
-  </HexGrid>
+export const Basic: StoryFn<typeof Hexagon> = () => (
+  <div>
+    <h1 style={{ fontFamily: "sans-serif" }}>
+      HexGrid is just a wrapper around a normal svg element. The viewBox
+      defaults to "-50 -50 100 100"
+    </h1>
+    <HexGrid
+      style={{
+        border: `2px solid ${COLORS.gray[7]}`,
+        background: COLORS.gray[2],
+      }}
+      width={"100%"}
+      height={"50vh"}
+    >
+      {/* Normal svg elements can be placed as normal */}
+      <circle
+        cx="0"
+        cy="0"
+        r="10"
+        stroke={COLORS.gray[7]}
+        fill={COLORS.gray[3]}
+      />
+    </HexGrid>
+  </div>
 )
 
 export const WithSeveralSvgComponents = () => (
+  <div>
+    <h1 style={{ fontFamily: "sans-serif" }}>SVG elements can be placed as normal inside a HexGrid</h1>
   <HexGrid
     style={{
       border: `2px solid ${COLORS.gray[7]}`,
@@ -69,4 +77,5 @@ export const WithSeveralSvgComponents = () => (
       Some text...
     </text>
   </HexGrid>
+</div>
 )

src/stories/components/layout.stories.tsx

@@ -1,14 +1,17 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react"
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react"
 import { Hexagon, HexGrid, Layout } from "../.."
 import Point from "../../models/Point"
 import { COLORS } from "../colors"
 
 export default {
   title: "Components/Layout",
   component: Layout,
-} as ComponentMeta<typeof Layout>
+} as Meta<typeof Layout>
 
-const Template: ComponentStory<typeof Layout> = (args) => (
+const Template: StoryFn<typeof Layout> = (args) => (
+  <div>
+    <h1 style={{fontFamily: "sans-serif"}}>SVG elements and hexagons can be mixed inside of a Layout</h1>
   <HexGrid
     style={{
       border: `2px solid ${COLORS.gray[7]}`,
@@ -33,9 +36,10 @@ const Template: ComponentStory<typeof Layout> = (args) => (
       <Hexagon r={3} q={-4} s={3} />
     </Layout>
   </HexGrid>
+</div>
 )
 
-export const Basic: ComponentStory<typeof Layout> = Template.bind({})
+export const Basic: StoryFn<typeof Layout> = Template.bind({})
 Basic.args = {
   spacing: 1.1,
   size: new Point(5, 5),

src/stories/components/path.stories.tsx

@@ -1,5 +1,5 @@
-import { css } from "@emotion/react"
-import { ComponentMeta, ComponentStory } from "@storybook/react"
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react"
 import { GridGenerator, Hex, Hexagon, HexGrid, Layout, Path } from "../.."
 import { COLORS } from "../colors"
 
@@ -8,11 +8,11 @@ type PathType = typeof Path
 export default {
   title: "Components/Path",
   component: Path,
-} as ComponentMeta<PathType>
+} as Meta<PathType>
 
 const hexas = GridGenerator.hexagon(10)
 
-const Template: ComponentStory<PathType> = (args) => (
+const Template: StoryFn<PathType> = (args) => (
   <HexGrid
     style={{
       border: `4px solid ${COLORS.gray[8]}`,
@@ -25,9 +25,7 @@ const Template: ComponentStory<PathType> = (args) => (
       <>
         {hexas.map(({ q, r, s }) => (
           <Hexagon
-            css={css`
-              fill: ${COLORS.dark[2]};
-            `}
+            fill={COLORS.dark[2]}
             onClick={() => console.log("clicked", { q, r, s })}
             q={q}
             r={r}
@@ -36,21 +34,27 @@ const Template: ComponentStory<PathType> = (args) => (
         ))}
       </>
       <Path
-        css={css`
-          fill: none;
-          stroke: ${COLORS.blue[8]};
-          stroke-width: 0.1em;
-          stroke-linecap: round;
-          stroke-linejoin: round;
-        `}
+        strokeWidth="0.1em"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         {...args}
       />
     </Layout>
   </HexGrid>
 )
 
-export const Basic: ComponentStory<PathType> = Template.bind({})
+export const Basic: StoryFn<PathType> = Template.bind({})
 Basic.args = {
   start: new Hex(5, -3, -2),
   end: new Hex(-5, 1, 4),
 }
+
+/*
+css={css`
+  fill: none;
+  stroke: ${COLORS.blue[8]};
+  stroke-width: 0.1em;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+`}
+*/

tsconfig.json

@@ -20,7 +20,7 @@
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "module": "ESNext",
     "target": "ES6",
@@ -29,6 +29,6 @@
     // "jsxImportSource": "@emotion/react",
     "types": ["node", "jest"]
   },
-  "include": ["src"],
-  "exclude": ["**/*.stories.tsx"]
+  "include": ["src"]
+  //"exclude": ["**/*.stories.tsx"]
 }