diff --git a/package-lock.json b/package-lock.json index 850c551..b552363 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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", @@ -65,7 +65,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", @@ -3034,10 +3034,11 @@ } }, "node_modules/@howso/react-tailwind-flowbite-components": { - "version": "5.4.0", - "resolved": "https://dpbuild.jfrog.io/artifactory/api/npm/npm-virtual/@howso/react-tailwind-flowbite-components/-/@howso/react-tailwind-flowbite-components-5.4.0.tgz", - "integrity": "sha512-Wk6BxN/gbAPtQ7V37U02nTr8E50hWQqz5NpvHp+Qab3pbmzo8JGyjVl/uvfhK8pnvhqbrUF8j6B3TTiXVdXPyw==", + "version": "0.0.0", + "resolved": "file:../react-tailwind-flowbite-components/howso-react-tailwind-flowbite-components-0.0.0.tgz", + "integrity": "sha512-B+C7A8rJxadker60C2V4fs2SMW0mi/ijlb1dJPYqM8jNR+KbjvUja8BDyH/mZMLK4ADFp2lS+CXdFw2+Dk4ZOA==", "dev": true, + "license": "ISC", "dependencies": { "minidenticons": "^4.2.1" }, diff --git a/package.json b/package.json index 014700d..19c52df 100644 --- a/package.json +++ b/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", diff --git a/src/components/Icons/MapDependentFeatureAttributesIcon.tsx b/src/components/Icons/MapDependentFeatureAttributesIcon.tsx index 276fa32..66d84f5 100644 --- a/src/components/Icons/MapDependentFeatureAttributesIcon.tsx +++ b/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 = function ( - props, -) { - return ; -}; +export const MapDependentFeatureAttributesIcon: FC = (props) => ( + +); diff --git a/src/components/Icons/TraineeDefineIcon.tsx b/src/components/Icons/TraineeDefineIcon.tsx new file mode 100644 index 0000000..f666137 --- /dev/null +++ b/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 = (props) => ( + +); diff --git a/src/components/Icons/TraineeTrainIcon.tsx b/src/components/Icons/TraineeTrainIcon.tsx index e8020d3..9cc9651 100644 --- a/src/components/Icons/TraineeTrainIcon.tsx +++ b/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 = function (props) { - return ( - - - - ); -}; +export const TraineeTrainIcon: FC = (props) => ( + + + +); diff --git a/src/components/Icons/icons.stories.tsx b/src/components/Icons/icons.stories.tsx index 90ac8dc..f0853a5 100644 --- a/src/components/Icons/icons.stories.tsx +++ b/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 = { @@ -21,6 +26,14 @@ const meta: Meta = { label={"MapDependentFeatureAttributesIcon"} Icon={} /> + } + /> + } + /> } diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts index 4fc652a..754912e 100644 --- a/src/components/Icons/index.ts +++ b/src/components/Icons/index.ts @@ -1,2 +1,4 @@ export * from "./MapDependentFeatureAttributesIcon"; +export * from "./TraineeDefineIcon"; +export * from "./TraineeLoadIcon"; export * from "./TraineeTrainIcon"; diff --git a/src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.i18n.ts b/src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.i18n.ts new file mode 100644 index 0000000..91f2f05 --- /dev/null +++ b/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 = + { + namespace, + resources: { en }, + strings: getStringsForI18nBundleFromResource(en), + }; diff --git a/src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.stories.tsx b/src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.stories.tsx new file mode 100644 index 0000000..385655e --- /dev/null +++ b/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 = { + 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; + +// 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, + }, +}; diff --git a/src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.tsx b/src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.tsx new file mode 100644 index 0000000..6618d0b --- /dev/null +++ b/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 = ({ + ...props +}) => { + const { t } = useTranslation(i18n.namespace); + + return ( + + + + + + + + {t(i18n.strings.load.title)} + + + {t(i18n.strings.load.description)} + + + + + + + + + + + + + {t(i18n.strings.define.title)} + + + {t(i18n.strings.define.description)} + + + + + + + + + + + + + {t(i18n.strings.train.title)} + + + {t(i18n.strings.train.description)} + + + + + ); +}; + +export const TraineeCreationStepper = Object.assign( + TraineeCreationStepperComponent, + { + classes: { + item: "basis-1/3 sm:basis-auto", + icon: "", + heading: "", + description: "hidden md:block", + }, + }, +); diff --git a/src/components/Trainee/TraineeCreationStepper/index.ts b/src/components/Trainee/TraineeCreationStepper/index.ts new file mode 100644 index 0000000..f941e32 --- /dev/null +++ b/src/components/Trainee/TraineeCreationStepper/index.ts @@ -0,0 +1,2 @@ +export * from "./TraineeCreationStepper"; +export * from "./TraineeCreationStepper.i18n"; diff --git a/src/components/Trainee/index.ts b/src/components/Trainee/index.ts new file mode 100644 index 0000000..140a804 --- /dev/null +++ b/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[] = [ + TraineeCreationStepperI18nBundle, +]; diff --git a/src/components/index.ts b/src/components/index.ts index 6572e7b..929f200 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,3 @@ export * from "./FeatureAttributes"; export * from "./Icons"; +export * from "./Trainee"; diff --git a/src/index.ts b/src/index.ts index d8c916c..43b0bdc 100644 --- a/src/index.ts +++ b/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[] = [ ...FeatureAttributesI18nBundles, + ...TraineeI18nBundles, ];