Kreu la Elektilon

kliento/src/elementoj/Elektilo/Elektilo.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Elektilo from "./Elektilo";
+
+export default {
+  title: "Elementoj/Elektilo",
+  component: Elektilo,
+  argTypes: {
+    aktuala: {
+      options: [ '', 'Adaptable', 'Articulate', 'Rugged', 'Genteel' ],
+      control: { type: 'radio' },
+    },
+  },
+} as ComponentMeta<typeof Elektilo>;
+
+export const ElektilRakonto: ComponentStory<typeof Elektilo> = ({ aktuala }) => <Elektilo elektoj={[
+  "Adaptable",
+  "Articulate",
+  "Rugged",
+  "Genteel",
+]} aktuala={aktuala} />;

kliento/src/elementoj/Elektilo/Elektilo.tsx

@@ -0,0 +1,14 @@
+interface Ecoj {
+  elektoj: string[];
+  aktuala?: string;
+};
+
+const Elektilo = ({ elektoj, aktuala }: Ecoj) => <select>
+  <option selected={!aktuala}></option>
+  {elektoj.map((elekto) => <option selected={aktuala === elekto} value={elekto}>{elekto}</option>)}
+</select>;
+
+
+const bildigu = ( ecoj: Ecoj ) => <Elektilo {...ecoj} />;
+
+export default bildigu;

kliento/src/paĝoj/RolulKreilo/RolulKreilo.stories.tsx

@@ -27,5 +27,10 @@ const fokusoj = [
   "Is Always Watching",
 ];
 
-export const RolulKreilaRakonto = () => <RolulKreilo rolulo={{}} priaĵoj={priaĵoj} tipoj={tipoj} fokusoj={fokusoj} />
+export const RolulKreilaRakonto = () => <RolulKreilo rolulo={{
+  nomo: "Opal",
+    priaĵo: "Adaptable",
+    tipo: "Jack",
+    fokuso: "Commands a Starship",
+  }} priaĵoj={priaĵoj} tipoj={tipoj} fokusoj={fokusoj} />
 

kliento/src/paĝoj/RolulKreilo/RolulKreilo.tsx

@@ -1,4 +1,5 @@
-import styled from "styled-components"
+import styled from "styled-components";
+import Elektilo from "../../elementoj/Elektilo/Elektilo";
 
 interface RolulaŜablono {
   nomo?: string;
@@ -17,21 +18,11 @@ interface FrazaKreilaEcoj {
   fokusoj: string[];
 }
 
-interface ElektEcoj {
-  elektoj: string[];
-  aktuala?: string;
-};
-
-const Elekto = ({ elektoj, aktuala }: ElektEcoj) => <select>
-  <option selected={!aktuala}></option>
-  {elektoj.map((elekto) => <option selected={aktuala === elekto} value={elekto}>{elekto}</option>)}
-</select>;
-
 const FrazaKreilo = ( { priaĵo, priaĵoj, tipo, tipoj, fokuso, fokusoj }: FrazaKreilaEcoj) => <div>
-  <Elekto elektoj={priaĵoj} aktuala={priaĵo} />
-  <Elekto elektoj={tipoj} aktuala={tipo} />
+  <Elektilo elektoj={priaĵoj} aktuala={priaĵo} />
+  <Elektilo elektoj={tipoj} aktuala={tipo} />
   who
-  <Elekto elektoj={fokusoj} aktuala={fokuso} />
+  <Elektilo elektoj={fokusoj} aktuala={fokuso} />
 </div>;
 
 interface RolulKreilaEcoj {