Added TraineeDefineIcon

package.json

@@ -37,7 +37,7 @@
   "peerDependencies": {
     "@hookform/error-message": "^2.0.1",
     "@howso/openapi-client": "^2.0.1",
-    "@howso/react-tailwind-flowbite-components": "^5.4.0",
+    "@howso/react-tailwind-flowbite-components": "file:../react-tailwind-flowbite-components/howso-react-tailwind-flowbite-components-0.0.0.tgz",
     "jotai": "^2.8.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -54,7 +54,7 @@
     "@fontsource/inter": "^5.0.5",
     "@hookform/error-message": "^2.0.1",
     "@howso/openapi-client": "^2.0.1",
-    "@howso/react-tailwind-flowbite-components": "^5.4.0",
+    "@howso/react-tailwind-flowbite-components": "file:../react-tailwind-flowbite-components/howso-react-tailwind-flowbite-components-0.0.0.tgz",
     "@howso/ui-internationalization-utils": "^1.0.2",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^8.1.10",

src/components/Icons/MapDependentFeatureAttributesIcon.tsx

@@ -2,8 +2,6 @@ import type { FC } from "react";
 import { type IconBaseProps } from "react-icons";
 import { HiMap } from "react-icons/hi";
 
-export const MapDependentFeatureAttributesIcon: FC<IconBaseProps> = function (
-  props,
-) {
-  return <HiMap {...props} />;
-};
+export const MapDependentFeatureAttributesIcon: FC<IconBaseProps> = (props) => (
+  <HiMap {...props} />
+);

src/components/Icons/TraineeDefineIcon.tsx

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import { type IconBaseProps } from "react-icons";
+import { HiAdjustments } from "react-icons/hi";
+
+export const TraineeDefineIcon: FC<IconBaseProps> = (props) => (
+  <HiAdjustments {...props} />
+);

src/components/Icons/TraineeTrainIcon.tsx

@@ -1,16 +1,14 @@
 import type { FC } from "react";
 import { IconBase, type IconBaseProps } from "react-icons";
 
-export const TraineeTrainIcon: FC<IconBaseProps> = function (props) {
-  return (
-    <IconBase fill="none" viewBox="0 0 20 18" {...props}>
-      <path
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M11.484 6.166 13 4h6m0 0-3-3m3 3-3 3M1 14h5l1.577-2.253M1 4h5l7 10h6m0 0-3 3m3-3-3-3"
-      />
-    </IconBase>
-  );
-};
+export const TraineeTrainIcon: FC<IconBaseProps> = (props) => (
+  <IconBase fill="none" viewBox="0 0 20 18" {...props}>
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M11.484 6.166 13 4h6m0 0-3-3m3 3-3 3M1 14h5l1.577-2.253M1 4h5l7 10h6m0 0-3 3m3-3-3-3"
+    />
+  </IconBase>
+);

src/components/Icons/icons.stories.tsx

@@ -1,7 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { FC, ReactNode } from "react";
 import { IconBaseProps } from "react-icons";
-import { MapDependentFeatureAttributesIcon, TraineeTrainIcon } from ".";
+import {
+  MapDependentFeatureAttributesIcon,
+  TraineeDefineIcon,
+  TraineeLoadIcon,
+  TraineeTrainIcon,
+} from ".";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<IconBaseProps> = {
@@ -21,6 +26,14 @@ const meta: Meta<IconBaseProps> = {
         label={"MapDependentFeatureAttributesIcon"}
         Icon={<MapDependentFeatureAttributesIcon {...args} />}
       />
+      <IconWithLabel
+        label={"TraineeLoadIcon"}
+        Icon={<TraineeLoadIcon {...args} />}
+      />
+      <IconWithLabel
+        label={"TraineeDefineIcon"}
+        Icon={<TraineeDefineIcon {...args} />}
+      />
       <IconWithLabel
         label={"TraineeTrainIcon"}
         Icon={<TraineeTrainIcon {...args} />}

src/components/Icons/index.ts

@@ -1,2 +1,4 @@
 export * from "./MapDependentFeatureAttributesIcon";
+export * from "./TraineeDefineIcon";
+export * from "./TraineeLoadIcon";
 export * from "./TraineeTrainIcon";

src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.i18n.ts

@@ -0,0 +1,31 @@
+import { Languages } from "@/constants";
+import {
+  getStringsForI18nBundleFromResource,
+  type I18nBundle,
+} from "@howso/ui-internationalization-utils";
+
+const namespace = "TraineeCreationStepper";
+
+const en = {
+  load: {
+    title: "Load",
+    description: "Load and review source data",
+  },
+  define: {
+    title: "Define",
+    description: "Infer and describe features",
+  },
+  train: {
+    title: "Train",
+    description: "Tain and analyze data",
+  },
+};
+
+type Resource = typeof en;
+
+export const TraineeCreationStepperI18nBundle: I18nBundle<Languages, Resource> =
+  {
+    namespace,
+    resources: { en },
+    strings: getStringsForI18nBundleFromResource<Resource>(en),
+  };

src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TraineeCreationStepper } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof TraineeCreationStepper> = {
+  component: TraineeCreationStepper,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ["autodocs"],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+  },
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+  args: {
+    vertical: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TraineeCreationStepper>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {},
+};
+
+export const Vertical: Story = {
+  args: {
+    vertical: true,
+  },
+};

src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.tsx

@@ -0,0 +1,102 @@
+import { TraineeDefineIcon, TraineeTrainIcon } from "@/components";
+import {
+  DatabaseIcon,
+  Stepper,
+  type StepperProps,
+} from "@howso/react-tailwind-flowbite-components";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { TraineeCreationStepperI18nBundle as i18n } from "./TraineeCreationStepper.i18n";
+
+export type TraineeCreationStepperProps = Pick<
+  StepperProps,
+  "vertical" | "step" | "marginBottom"
+> & {};
+const TraineeCreationStepperComponent: FC<TraineeCreationStepperProps> = ({
+  ...props
+}) => {
+  const { t } = useTranslation(i18n.namespace);
+
+  return (
+    <Stepper steps={3} {...props}>
+      <Stepper.Item
+        className={TraineeCreationStepper.classes.item}
+        position={0}
+      >
+        <Stepper.Icon>
+          <DatabaseIcon className={TraineeCreationStepper.classes.icon} />
+        </Stepper.Icon>
+        <Stepper.Content>
+          <Stepper.Content.Heading
+            className={TraineeCreationStepper.classes.heading}
+          >
+            {t(i18n.strings.load.title)}
+          </Stepper.Content.Heading>
+          <Stepper.Content.Description
+            className={TraineeCreationStepper.classes.description}
+          >
+            {t(i18n.strings.load.description)}
+          </Stepper.Content.Description>
+        </Stepper.Content>
+      </Stepper.Item>
+
+      <Stepper.Spacer />
+
+      <Stepper.Item
+        className={TraineeCreationStepper.classes.item}
+        position={1}
+      >
+        <Stepper.Icon>
+          <TraineeDefineIcon className={TraineeCreationStepper.classes.icon} />
+        </Stepper.Icon>
+        <Stepper.Content>
+          <Stepper.Content.Heading
+            className={TraineeCreationStepper.classes.heading}
+          >
+            {t(i18n.strings.define.title)}
+          </Stepper.Content.Heading>
+          <Stepper.Content.Description
+            className={TraineeCreationStepper.classes.description}
+          >
+            {t(i18n.strings.define.description)}
+          </Stepper.Content.Description>
+        </Stepper.Content>
+      </Stepper.Item>
+
+      <Stepper.Spacer />
+
+      <Stepper.Item
+        className={TraineeCreationStepper.classes.item}
+        position={2}
+      >
+        <Stepper.Icon>
+          <TraineeTrainIcon className={TraineeCreationStepper.classes.icon} />
+        </Stepper.Icon>
+        <Stepper.Content>
+          <Stepper.Content.Heading
+            className={TraineeCreationStepper.classes.heading}
+          >
+            {t(i18n.strings.train.title)}
+          </Stepper.Content.Heading>
+          <Stepper.Content.Description
+            className={TraineeCreationStepper.classes.description}
+          >
+            {t(i18n.strings.train.description)}
+          </Stepper.Content.Description>
+        </Stepper.Content>
+      </Stepper.Item>
+    </Stepper>
+  );
+};
+
+export const TraineeCreationStepper = Object.assign(
+  TraineeCreationStepperComponent,
+  {
+    classes: {
+      item: "basis-1/3 sm:basis-auto",
+      icon: "",
+      heading: "",
+      description: "hidden md:block",
+    },
+  },
+);

src/components/Trainee/TraineeCreationStepper/index.ts

@@ -0,0 +1,2 @@
+export * from "./TraineeCreationStepper";
+export * from "./TraineeCreationStepper.i18n";

src/components/Trainee/index.ts

@@ -0,0 +1,9 @@
+import { type Languages } from "@/constants";
+import { type I18nBundle } from "@howso/ui-internationalization-utils";
+import { TraineeCreationStepperI18nBundle } from "./TraineeCreationStepper";
+
+export * from "./TraineeCreationStepper";
+
+export const TraineeI18nBundles: I18nBundle<Languages, any>[] = [
+  TraineeCreationStepperI18nBundle,
+];

src/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./FeatureAttributes";
 export * from "./Icons";
+export * from "./Trainee";

src/index.ts

@@ -1,12 +1,14 @@
 import { I18nBundle } from "@howso/ui-internationalization-utils";
-import { Languages } from "./constants";
+import { TraineeI18nBundles } from "./components";
 import { FeatureAttributesI18nBundles } from "./components/FeatureAttributes";
+import { Languages } from "./constants";
 
-export * from "./constants";
 export * from "./components";
+export * from "./constants";
 export * from "./hooks";
 export * from "./utils";
 
 export const I18nBundles: I18nBundle<Languages, any>[] = [
   ...FeatureAttributesI18nBundles,
+  ...TraineeI18nBundles,
 ];