Skip to content

Commit

Permalink
22079: Added additional PropertyLabels and Icons, MINOR (#34)
Browse files Browse the repository at this point in the history
  • Loading branch information
lancegliser authored Dec 19, 2024
1 parent 8811147 commit 8f3c6c4
Show file tree
Hide file tree
Showing 21 changed files with 206 additions and 10 deletions.
6 changes: 6 additions & 0 deletions src/components/DataDisplay/PropertyLabels/FeatureLabel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { FC } from "react";
import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";

export const FeatureLabel: FC<Omit<PropertyLabelProps, "property">> = (
props,
) => <PropertyLabel {...props} property={"feature"} />;
6 changes: 6 additions & 0 deletions src/components/DataDisplay/PropertyLabels/FeaturesLabel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { FC } from "react";
import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";

export const FeaturesLabel: FC<Omit<PropertyLabelProps, "property">> = (
props,
) => <PropertyLabel {...props} property={"features"} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { FC } from "react";
import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";

export const LastTrainingDurationLabel: FC<
Omit<PropertyLabelProps, "property">
> = (props) => <PropertyLabel {...props} property={"lastTrainingDuration"} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { FC } from "react";
import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";

export const LastTrainingEndedLabel: FC<
Omit<PropertyLabelProps, "property">
> = (props) => <PropertyLabel {...props} property={"lastTrainingEnded"} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { FC } from "react";
import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";

export const LastTrainingStartedLabel: FC<
Omit<PropertyLabelProps, "property">
> = (props) => <PropertyLabel {...props} property={"lastTrainingStarted"} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { FC } from "react";
import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";

export const NumberOfCasesLabel: FC<Omit<PropertyLabelProps, "property">> = (
props,
) => <PropertyLabel {...props} property={"numberOfCases"} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { FC } from "react";
import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";

export const NumberOfFeaturesLabel: FC<Omit<PropertyLabelProps, "property">> = (
props,
) => <PropertyLabel {...props} property={"numberOfFeatures"} />;
15 changes: 15 additions & 0 deletions src/components/DataDisplay/PropertyLabels/PropertyLabel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { ComponentProps, FC } from "react";
import { useTranslation } from "react-i18next";
import { EnginePropertyLabelsI18nBundle as i18n } from "./i18n";

export type PropertyLabelProps = ComponentProps<"span"> & {
property: keyof typeof i18n.strings;
};
export const PropertyLabel: FC<PropertyLabelProps> = ({
property,
...props
}) => {
const { t } = useTranslation(i18n.namespace);

return <span {...props}>{t(i18n.strings[property])}</span>;
};
6 changes: 6 additions & 0 deletions src/components/DataDisplay/PropertyLabels/SourceLabel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { FC } from "react";
import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";

export const SourceLabel: FC<Omit<PropertyLabelProps, "property">> = (
props,
) => <PropertyLabel {...props} property={"source"} />;
6 changes: 6 additions & 0 deletions src/components/DataDisplay/PropertyLabels/SourceTypeLabel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { FC } from "react";
import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";

export const SourceTypeLabel: FC<Omit<PropertyLabelProps, "property">> = (
props,
) => <PropertyLabel {...props} property={"sourceType"} />;
6 changes: 6 additions & 0 deletions src/components/DataDisplay/PropertyLabels/TimeSeriesLabel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { FC } from "react";
import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";

export const TimeSeriesLabel: FC<Omit<PropertyLabelProps, "property">> = (
props,
) => <PropertyLabel {...props} property={"timeSeries"} />;
28 changes: 28 additions & 0 deletions src/components/DataDisplay/PropertyLabels/i18n.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import {
getStringsForI18nBundleFromResource,
I18nBundle,
} from "@howso/ui-internationalization-utils";
import { Languages } from "../../../constants";

const namespace = "EnginePropertyLabels";

const en = {
feature: "Feature",
features: "Features",
lastTrainingStarted: "Last trained started",
lastTrainingEnded: "Last training end",
lastTrainingDuration: "Last training duration",
numberOfFeatures: "Number of features",
numberOfCases: "Number of cases",
sourceType: "Source type",
source: "Source",
timeSeries: "Time series",
};

type Resource = typeof en;

export const EnginePropertyLabelsI18nBundle: I18nBundle<Languages, Resource> = {
namespace,
resources: { en },
strings: getStringsForI18nBundleFromResource<Resource>(en),
};
53 changes: 53 additions & 0 deletions src/components/DataDisplay/PropertyLabels/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import type { Meta, StoryObj } from "@storybook/react";
import {
FeatureLabel,
FeaturesLabel,
LastTrainingDurationLabel,
LastTrainingEndedLabel,
LastTrainingStartedLabel,
NumberOfCasesLabel,
NumberOfFeaturesLabel,
PropertyLabelProps,
SourceLabel,
SourceTypeLabel,
TimeSeriesLabel,
} from ".";

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta: Meta<PropertyLabelProps> = {
title: "Components/DataDisplay/PropertyLabels",
// 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: {
className: "",
},
};

export default meta;
type Story = StoryObj<PropertyLabelProps>;

// 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: {},
render: (args) => (
<div className="flex flex-col gap-1">
<FeatureLabel {...args} />
<FeaturesLabel {...args} />
<LastTrainingStartedLabel {...args} />
<LastTrainingEndedLabel {...args} />
<LastTrainingDurationLabel {...args} />
<NumberOfCasesLabel {...args} />
<NumberOfFeaturesLabel {...args} />
<SourceLabel {...args} />
<SourceTypeLabel {...args} />
<TimeSeriesLabel {...args} />
</div>
),
};
12 changes: 12 additions & 0 deletions src/components/DataDisplay/PropertyLabels/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export * from ".//LastTrainingDurationLabel";
export * from "./FeatureLabel";
export * from "./FeaturesLabel";
export * from "./i18n";
export * from "./LastTrainingEndedLabel";
export * from "./LastTrainingStartedLabel";
export * from "./NumberOfCasesLabel";
export * from "./NumberOfFeaturesLabel";
export * from "./PropertyLabel";
export * from "./SourceLabel";
export * from "./SourceTypeLabel";
export * from "./TimeSeriesLabel";
9 changes: 9 additions & 0 deletions src/components/DataDisplay/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Languages } from "@howso/react-tailwind-flowbite-components";
import { I18nBundle } from "@howso/ui-internationalization-utils";
import { EnginePropertyLabelsI18nBundle } from "./PropertyLabels";

export * from "./PropertyLabels";

export const DataDisplayI18nBundles: I18nBundle<Languages, any>[] = [
EnginePropertyLabelsI18nBundle,
];
7 changes: 7 additions & 0 deletions src/components/Icons/InsightsIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { FC } from "react";
import { type IconBaseProps } from "react-icons";
import { HiLightBulb } from "react-icons/hi";

export const InsightsIcon: FC<IconBaseProps> = (props) => (
<HiLightBulb {...props} />
);
7 changes: 7 additions & 0 deletions src/components/Icons/SynthesisIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { FC } from "react";
import { type IconBaseProps } from "react-icons";
import { HiDocumentDuplicate } from "react-icons/hi";

export const SynthesisIcon: FC<IconBaseProps> = (props) => (
<HiDocumentDuplicate {...props} />
);
19 changes: 10 additions & 9 deletions src/components/Icons/icons.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import type { Meta, StoryObj } from "@storybook/react";
import { FC, ReactNode } from "react";
import { IconBaseProps } from "react-icons";
import {
InsightsIcon,
MapDependentFeatureAttributesIcon,
ProjectsIcon,
SynthesisIcon,
TraineeDefineIcon,
TraineeIcon,
TraineeLoadIcon,
Expand All @@ -26,28 +28,27 @@ const meta: Meta<IconBaseProps> = {
<div className="flex gap-4">
<Section title="Action">
<IconWithLabel
label={"MapDependentFeatureAttributesIcon"}
label={"MapDependentFeatureAttributes"}
Icon={<MapDependentFeatureAttributesIcon {...args} />}
/>
<IconWithLabel
label={"TraineeLoadIcon"}
label={"TraineeLoad"}
Icon={<TraineeLoadIcon {...args} />}
/>
<IconWithLabel
label={"TraineeDefineIcon"}
label={"TraineeDefine"}
Icon={<TraineeDefineIcon {...args} />}
/>
<IconWithLabel
label={"TraineeTrainIcon"}
label={"TraineeTrain"}
Icon={<TraineeTrainIcon {...args} />}
/>
</Section>
<Section title="Concepts">
<IconWithLabel
label={"ProjectsIcon"}
Icon={<ProjectsIcon {...args} />}
/>
<IconWithLabel label={"TraineeIcon"} Icon={<TraineeIcon {...args} />} />
<IconWithLabel label={"Insights"} Icon={<InsightsIcon {...args} />} />
<IconWithLabel label={"Projects"} Icon={<ProjectsIcon {...args} />} />
<IconWithLabel label={"Synthesis"} Icon={<SynthesisIcon {...args} />} />
<IconWithLabel label={"Trainee"} Icon={<TraineeIcon {...args} />} />
</Section>
</div>
),
Expand Down
2 changes: 2 additions & 0 deletions src/components/Icons/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
export * from "./InsightsIcon";
export * from "./MapDependentFeatureAttributesIcon";
export * from "./ProjectsIcon";
export * from "./SynthesisIcon";
export * from "./TraineeDefineIcon";
export * from "./TraineeIcon";
export * from "./TraineeLoadIcon";
Expand Down
1 change: 1 addition & 0 deletions src/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from "./DataDisplay";
export * from "./FeatureAttributes";
export * from "./Icons";
export * from "./Trainee";
3 changes: 2 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { I18nBundle } from "@howso/ui-internationalization-utils";
import { TraineeI18nBundles } from "./components";
import { DataDisplayI18nBundles, TraineeI18nBundles } from "./components";
import { FeatureAttributesI18nBundles } from "./components/FeatureAttributes";
import { Languages } from "./constants";

Expand All @@ -9,6 +9,7 @@ export * from "./hooks";
export * from "./utils";

export const I18nBundles: I18nBundle<Languages, any>[] = [
...DataDisplayI18nBundles,
...FeatureAttributesI18nBundles,
...TraineeI18nBundles,
];

0 comments on commit 8f3c6c4

Please sign in to comment.