diff --git a/front_end_portserver/src/components/main/cardInstrument/CardInstrument.tsx b/front_end_portserver/src/components/main/cardInstrument/CardInstrument.tsx new file mode 100644 index 0000000..69f2679 --- /dev/null +++ b/front_end_portserver/src/components/main/cardInstrument/CardInstrument.tsx @@ -0,0 +1,80 @@ +import '../../../../app/global.css' +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from "@/components/ui/card" +import { Rs232PropertyView } from './Rs232PropertyView'; +import { IpClientPropertyView } from './IpClientPropertyView'; +import { IpServerPropertyView } from './IpServerPropertyView'; +import { RowIndicatorv1 } from './Rowindicatorv1'; + +interface CardProps { + titleAlat?: string, + type?: string, + lampu?: boolean, + online?: boolean, + onClick?: () => void; +} + +/** + * Primary UI component for user interaction + */ +export const CardInstrument = ({ + ...props +}: CardProps) => { + return ( + <> + + + +
+
+ {props.titleAlat} + +
+
+ + + +
+
+ + + + {/* ROW 1 & 2 START */} + + {/* ROW 1 & 2 END */} + + {/* ROW 3 */} + { + props.type == 'rs232' ? () : '' + } + + { + props.type == 'ipclient' ? () : '' + } + + { + props.type == 'ipserver' ? () : '' + } + + + + + + ); +}; diff --git a/front_end_portserver/src/components/main/cardInstrument/IpClientPropertyView.tsx b/front_end_portserver/src/components/main/cardInstrument/IpClientPropertyView.tsx new file mode 100644 index 0000000..9420bad --- /dev/null +++ b/front_end_portserver/src/components/main/cardInstrument/IpClientPropertyView.tsx @@ -0,0 +1,26 @@ +import '../../../../app/global.css' +import { RowLabelValue } from './RowLabelValue'; + +interface IpClientPropertyViewProps { + type?: string, + onClick?: () => void; +} + +export const IpClientPropertyView = ({ + ...props +}: IpClientPropertyViewProps) => { + return ( + <> + {/* IpClient START */} + + + {/* IpClient END */} + + ); +}; diff --git a/front_end_portserver/src/components/main/cardInstrument/IpServerPropertyView.tsx b/front_end_portserver/src/components/main/cardInstrument/IpServerPropertyView.tsx new file mode 100644 index 0000000..b001445 --- /dev/null +++ b/front_end_portserver/src/components/main/cardInstrument/IpServerPropertyView.tsx @@ -0,0 +1,22 @@ +import '../../../../app/global.css' +import { RowLabelValue } from './RowLabelValue'; + +interface IpServerPropertyViewProps { + type?: string, + onClick?: () => void; +} + +export const IpServerPropertyView = ({ + ...props +}: IpServerPropertyViewProps) => { + return ( + <> + {/* IpServer START */} + + {/* IpServer END */} + + ); +}; diff --git a/front_end_portserver/src/components/main/cardInstrument/RowIndicatorv1.tsx b/front_end_portserver/src/components/main/cardInstrument/RowIndicatorv1.tsx new file mode 100644 index 0000000..f3e96e3 --- /dev/null +++ b/front_end_portserver/src/components/main/cardInstrument/RowIndicatorv1.tsx @@ -0,0 +1,42 @@ +import '../../../../app/global.css' +import { StatusTransferv1 } from './StatusTransferv1'; +import { StatusOnlinev1 } from './Statusonlinev1'; +import { TypeCardv1 } from './Typecardv1'; + +interface RowIndicatorv1Props { + lampu?: boolean, + type?: string; + online?: boolean; + onClick?: () => void; +} + +/** + * Primary UI component for user interaction + */ +export const RowIndicatorv1 = ({ + ...props +}: RowIndicatorv1Props) => { + return ( + <> +
+ {/* LAMP START */} + + {/* LAMP END */} + + {/* Type Badge START*/} + + {/* Type Badge END */} + + {/* ONLINE / OFFLINE START */} + + {/* ONLINE / OFFLINE END */} +
+ + ); +}; diff --git a/front_end_portserver/src/components/main/cardInstrument/RowLabelValue.tsx b/front_end_portserver/src/components/main/cardInstrument/RowLabelValue.tsx new file mode 100644 index 0000000..2a18773 --- /dev/null +++ b/front_end_portserver/src/components/main/cardInstrument/RowLabelValue.tsx @@ -0,0 +1,29 @@ +import '../../../../app/global.css' + +interface RowLabelValueProps { + label: string; + value: string; + onClick?: () => void; +} + +/** + * Primary UI component for user interaction + */ +export const RowLabelValue = ({ + ...props +}: RowLabelValueProps) => { + return ( + <> +
+
+ + {props.label} + +
+
+ {props.value} +
+
+ + ); +}; diff --git a/front_end_portserver/src/components/main/cardInstrument/Rs232PropertyView.tsx b/front_end_portserver/src/components/main/cardInstrument/Rs232PropertyView.tsx new file mode 100644 index 0000000..cde7c41 --- /dev/null +++ b/front_end_portserver/src/components/main/cardInstrument/Rs232PropertyView.tsx @@ -0,0 +1,40 @@ +import '../../../../app/global.css' +import { RowLabelValue } from './RowLabelValue'; + +interface Rs232PropertyViewProps { + type?: string, + onClick?: () => void; +} + +export const Rs232PropertyView = ({ + ...props +}: Rs232PropertyViewProps) => { + return ( + <> + {/* RS232 START */} + + + + + + + + + + + {/* RS232 END */} + + ); +}; diff --git a/front_end_portserver/src/components/main/cardInstrument/StatusCardv1.tsx b/front_end_portserver/src/components/main/cardInstrument/StatusCardv1.tsx new file mode 100644 index 0000000..56dd4c2 --- /dev/null +++ b/front_end_portserver/src/components/main/cardInstrument/StatusCardv1.tsx @@ -0,0 +1,34 @@ +import '../../../../app/global.css' +import { StatusTransferv1 } from './StatusTransferv1'; +import { StatusOnlinev1 } from './Statusonlinev1'; + +interface StatusCardProps { + isOnline?: boolean; + isTransferCard?:boolean; + onClick?: () => void; +} + +/** + * Primary UI component for user interaction + */ +export const StatusCardv1 = ({ + ...props +}: StatusCardProps) => { + return ( + <> +
+ {/* LAMP START */} + + {/* LAMP END */} + + {/* ONLINE / OFFLINE START */} + + {/* ONLINE / OFFLINE END */} +
+ + ); +}; diff --git a/front_end_portserver/src/components/main/cardInstrument/StatusOnlinev1.tsx b/front_end_portserver/src/components/main/cardInstrument/StatusOnlinev1.tsx new file mode 100644 index 0000000..59aafeb --- /dev/null +++ b/front_end_portserver/src/components/main/cardInstrument/StatusOnlinev1.tsx @@ -0,0 +1,44 @@ +import '../../../../app/global.css' + +interface StatusOnlinev1Props { + isOnlineCard?: boolean, + onClick?: () => void; +} + +/** + * Primary UI component for user interaction + */ +export const StatusOnlinev1 = ({ + ...props +}: StatusOnlinev1Props) => { + return ( + <> + {/* ONLINE/OFFLINE START */} + { + props.isOnlineCard == true + ? ( + <> +
+
+
+ + + +
+ + + ) + : <> +
+
+
+ + + +
+ + } + {/* ONLINE/OFFLINE END */} + + ); +}; diff --git a/front_end_portserver/src/components/main/cardInstrument/StatusTransferv1.tsx b/front_end_portserver/src/components/main/cardInstrument/StatusTransferv1.tsx new file mode 100644 index 0000000..d5d2b80 --- /dev/null +++ b/front_end_portserver/src/components/main/cardInstrument/StatusTransferv1.tsx @@ -0,0 +1,41 @@ +import '../../../../app/global.css' + +interface StatusTransferv1Props { + isTransferCard?: boolean, + onClick?: () => void; +} + +/** + * Primary UI component for user interaction + */ +export const StatusTransferv1 = ({ + ...props +}: StatusTransferv1Props) => { + return ( + <> + {/* TRANSFER CARD START */} + { + props.isTransferCard == true + ? ( + <> +
+ + + + + + + + + + +
+ + + ) + :
+ } + {/* TRANSFER CARD END */} + + ); +}; diff --git a/front_end_portserver/src/components/main/cardInstrument/TypeCardv1.tsx b/front_end_portserver/src/components/main/cardInstrument/TypeCardv1.tsx new file mode 100644 index 0000000..db9f29d --- /dev/null +++ b/front_end_portserver/src/components/main/cardInstrument/TypeCardv1.tsx @@ -0,0 +1,22 @@ +import '../../../../app/global.css' +import { Badge } from "@/components/ui/badge" + +interface TypeCardv1Props { + titleType?: string; + onClick?: () => void; +} + +/** + * Primary UI component for user interaction + */ +export const TypeCardv1 = ({ + ...props +}: TypeCardv1Props) => { + return ( + <> + + {props.titleType} + + + ); +}; diff --git a/front_end_portserver/src/components/ui/badge.tsx b/front_end_portserver/src/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/front_end_portserver/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/front_end_portserver/src/components/ui/card.tsx b/front_end_portserver/src/components/ui/card.tsx new file mode 100644 index 0000000..afa13ec --- /dev/null +++ b/front_end_portserver/src/components/ui/card.tsx @@ -0,0 +1,79 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const Card = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +Card.displayName = "Card" + +const CardHeader = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardHeader.displayName = "CardHeader" + +const CardTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardTitle.displayName = "CardTitle" + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardDescription.displayName = "CardDescription" + +const CardContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)) +CardContent.displayName = "CardContent" + +const CardFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +CardFooter.displayName = "CardFooter" + +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/front_end_portserver/src/stories/Header.stories.ts b/front_end_portserver/src/stories/Header.stories.ts deleted file mode 100644 index 458391a..0000000 --- a/front_end_portserver/src/stories/Header.stories.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { Header } from './Header'; - -const meta = { - title: 'Example/Header', - component: Header, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs - tags: ['autodocs'], - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen', - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - user: { - name: 'Jane Doe', - }, - }, -}; - -export const LoggedOut: Story = {}; diff --git a/front_end_portserver/src/stories/Page.stories.ts b/front_end_portserver/src/stories/Page.stories.ts deleted file mode 100644 index 69852a2..0000000 --- a/front_end_portserver/src/stories/Page.stories.ts +++ /dev/null @@ -1,29 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { within, userEvent } from '@storybook/testing-library'; - -import { Page } from './Page'; - -const meta = { - title: 'Example/Page', - component: Page, - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen', - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedOut: Story = {}; - -// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing -export const LoggedIn: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { - name: /Log in/i, - }); - await userEvent.click(loginButton); - }, -}; diff --git a/front_end_portserver/src/stories/cardInstrument/CardInstrument.stories.ts b/front_end_portserver/src/stories/cardInstrument/CardInstrument.stories.ts new file mode 100644 index 0000000..d543ae7 --- /dev/null +++ b/front_end_portserver/src/stories/cardInstrument/CardInstrument.stories.ts @@ -0,0 +1,110 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { CardInstrument } from '../../components/main/cardInstrument/CardInstrument'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: 'Component/Main/Card', + component: CardInstrument, + parameters: { + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ['autodocs'], + argTypes: { + // backgroundColor: { control: 'color' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// Rs 232 Cobas Online NoTransfer +export const rs232CobasOnlineNoTransfer: Story = { + args: { + titleAlat: 'COBAS 800', + type: 'rs232', + lampu: true, + online: true + }, +}; + +// Rs 232 Cobas Online Transfer +export const rs232CobasOnlineTransfer: Story = { + args: { + titleAlat: 'COBAS 800', + type: 'rs232', + lampu: false, + online: true + }, +}; + +// Rs 232 Cobas Offline Transfer +export const rs232CobasOfflineTransfer: Story = { + args: { + titleAlat: 'COBAS 800', + type: 'rs232', + lampu: false, + online: false + }, +}; + +// Ipclient Mindray Online No Transfer +export const ipclientMindrayBC800OnlineNoTransfer: Story = { + args: { + titleAlat: 'Mindray BC800', + type: 'ipclient', + lampu: true, + online: true + }, +}; + +// Ipclient Mindray Online Transfer +export const ipclientMindrayBC800OnlineTransfer: Story = { + args: { + titleAlat: 'Mindray BC800', + type: 'ipclient', + lampu: false, + online: true + }, +}; + +// Ip Client Offline Transfer +export const ipclientMindrayBC800OfflineTransfer: Story = { + args: { + titleAlat: 'Mindray BC800', + type: 'ipclient', + lampu: false, + online: false + }, +}; + +// Ip Server Mindray Online No Transfer +export const ipserverMindrayBC240OnlineNoTransfer: Story = { + args: { + titleAlat: 'Mindray BC240', + type: 'ipserver', + lampu: true, + online: true + }, +}; + +// Ip Server Mindray Online Transfer +export const ipserverMindrayBC240OnlineTransfer: Story = { + args: { + titleAlat: 'Mindray BC240', + type: 'ipserver', + lampu: false, + online: true + }, +}; + +// Ip Server Offline Transfer +export const ipserverMindrayBC240OfflineTransfer: Story = { + args: { + titleAlat: 'Mindray BC240', + type: 'ipserver', + lampu: false, + online: false + }, +}; diff --git a/front_end_portserver/src/stories/cardInstrument/IpClientPropertyView.stories.ts b/front_end_portserver/src/stories/cardInstrument/IpClientPropertyView.stories.ts new file mode 100644 index 0000000..ee1e37a --- /dev/null +++ b/front_end_portserver/src/stories/cardInstrument/IpClientPropertyView.stories.ts @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { IpClientPropertyView } from '../../components/main/cardInstrument/IpClientPropertyView'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: 'Component/Main/Ipclient', + component: IpClientPropertyView, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + // backgroundColor: { control: 'color' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Ipclient: Story = { + args: { + type:'' + }, +}; \ No newline at end of file diff --git a/front_end_portserver/src/stories/cardInstrument/IpServerPropertyView.stories.ts b/front_end_portserver/src/stories/cardInstrument/IpServerPropertyView.stories.ts new file mode 100644 index 0000000..81b0303 --- /dev/null +++ b/front_end_portserver/src/stories/cardInstrument/IpServerPropertyView.stories.ts @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { IpServerPropertyView } from '../../components/main/cardInstrument/IpServerPropertyView'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: 'Component/Main/Ipserver', + component: IpServerPropertyView, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + // backgroundColor: { control: 'color' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Ipclient: Story = { + args: { + type:'' + }, +}; \ No newline at end of file diff --git a/front_end_portserver/src/stories/cardInstrument/RowLabelValue.stories.ts b/front_end_portserver/src/stories/cardInstrument/RowLabelValue.stories.ts new file mode 100644 index 0000000..eff6223 --- /dev/null +++ b/front_end_portserver/src/stories/cardInstrument/RowLabelValue.stories.ts @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { RowLabelValue } from '../../components/main/cardInstrument/RowLabelValue'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: 'Component/Main/Row Label Value', + component: RowLabelValue, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + // backgroundColor: { control: 'color' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Initial: Story = { + args: { + label:'', + value:'' + }, +}; \ No newline at end of file diff --git a/front_end_portserver/src/stories/cardInstrument/Rowindicatorv1.stories.ts b/front_end_portserver/src/stories/cardInstrument/Rowindicatorv1.stories.ts new file mode 100644 index 0000000..dd0e9c9 --- /dev/null +++ b/front_end_portserver/src/stories/cardInstrument/Rowindicatorv1.stories.ts @@ -0,0 +1,28 @@ +import { RowIndicatorv1 } from '@/components/main/cardInstrument/Rowindicatorv1'; +import type { Meta, StoryObj } from '@storybook/react'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: 'Component/Main/Row Indicator', + component: RowIndicatorv1, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + // backgroundColor: { control: 'color' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Initial: Story = { + args: { + type:'' + }, +}; \ No newline at end of file diff --git a/front_end_portserver/src/stories/cardInstrument/Rs232PropertyView.stories.ts b/front_end_portserver/src/stories/cardInstrument/Rs232PropertyView.stories.ts new file mode 100644 index 0000000..ea4af68 --- /dev/null +++ b/front_end_portserver/src/stories/cardInstrument/Rs232PropertyView.stories.ts @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Rs232PropertyView } from '../../components/main/cardInstrument/Rs232PropertyView'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: 'Component/Main/Rs232', + component: Rs232PropertyView, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + // backgroundColor: { control: 'color' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Rs232: Story = { + args: { + type:'' + }, +}; \ No newline at end of file diff --git a/front_end_portserver/src/stories/cardInstrument/StatusCardv1.stories.ts b/front_end_portserver/src/stories/cardInstrument/StatusCardv1.stories.ts new file mode 100644 index 0000000..cb90574 --- /dev/null +++ b/front_end_portserver/src/stories/cardInstrument/StatusCardv1.stories.ts @@ -0,0 +1,28 @@ +import { StatusCardv1 } from '@/components/main/cardInstrument/Statuscardv1'; +import type { Meta, StoryObj } from '@storybook/react'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: 'Component/Main/Status card', + component: StatusCardv1, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + // backgroundColor: { control: 'color' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Initial: Story = { + args: { + isOnline:false + }, +}; \ No newline at end of file diff --git a/front_end_portserver/src/stories/cardv1/Cardv1.stories.ts b/front_end_portserver/src/stories/cardInstrument/StatusOnlinev1.stories.ts similarity index 63% rename from front_end_portserver/src/stories/cardv1/Cardv1.stories.ts rename to front_end_portserver/src/stories/cardInstrument/StatusOnlinev1.stories.ts index 06082d7..ade2d28 100644 --- a/front_end_portserver/src/stories/cardv1/Cardv1.stories.ts +++ b/front_end_portserver/src/stories/cardInstrument/StatusOnlinev1.stories.ts @@ -1,11 +1,10 @@ +import { StatusOnlinev1 } from '@/components/main/cardInstrument/Statusonlinev1'; import type { Meta, StoryObj } from '@storybook/react'; -import { Cardv1 } from './Cardv1'; - // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export const meta = { - title: 'Example/Card', - component: Cardv1, + title: 'Component/Main/Status Online', + component: StatusOnlinev1, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout layout: 'centered', @@ -14,37 +13,22 @@ const meta = { tags: ['autodocs'], // More on argTypes: https://storybook.js.org/docs/react/api/argtypes argTypes: { - backgroundColor: { control: 'color' }, + // backgroundColor: { control: 'color' }, }, -} satisfies Meta; +} satisfies Meta; export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Primary: Story = { +export const StatusOnline: Story = { args: { - primary: true, - label: 'Button', + isOnlineCard:true }, }; -export const Secondary: Story = { +export const StatusOffline: Story = { args: { - label: 'Button', + isOnlineCard:false }, -}; - -export const Large: Story = { - args: { - size: 'large', - label: 'Button', - }, -}; - -export const Small: Story = { - args: { - size: 'small', - label: 'Button', - }, -}; +}; \ No newline at end of file diff --git a/front_end_portserver/src/stories/Button.stories.ts b/front_end_portserver/src/stories/cardInstrument/StatusTransferv1.stories.ts similarity index 61% rename from front_end_portserver/src/stories/Button.stories.ts rename to front_end_portserver/src/stories/cardInstrument/StatusTransferv1.stories.ts index 7a68cbf..40fa118 100644 --- a/front_end_portserver/src/stories/Button.stories.ts +++ b/front_end_portserver/src/stories/cardInstrument/StatusTransferv1.stories.ts @@ -1,11 +1,10 @@ +import { StatusTransferv1 } from '@/components/main/cardInstrument/StatusTransferv1'; import type { Meta, StoryObj } from '@storybook/react'; -import { Button } from './Button'; - // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export const meta = { - title: 'Example/Button', - component: Button, + title: 'Component/Main/Status Transfer', + component: StatusTransferv1, parameters: { // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout layout: 'centered', @@ -14,37 +13,22 @@ const meta = { tags: ['autodocs'], // More on argTypes: https://storybook.js.org/docs/react/api/argtypes argTypes: { - backgroundColor: { control: 'color' }, + // backgroundColor: { control: 'color' }, }, -} satisfies Meta; +} satisfies Meta; export default meta; type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Primary: Story = { +export const StatusTransferTrue: Story = { args: { - primary: true, - label: 'Button', + isTransferCard:true }, }; -export const Secondary: Story = { - args: { - label: 'Button', - }, -}; - -export const Large: Story = { - args: { - size: 'large', - label: 'Button', - }, -}; - -export const Small: Story = { - args: { - size: 'small', - label: 'Button', - }, -}; +export const StatusTransferFalse: Story = { + args: { + isTransferCard:false + }, + }; \ No newline at end of file diff --git a/front_end_portserver/src/stories/cardInstrument/TypeCardv1.stories.ts b/front_end_portserver/src/stories/cardInstrument/TypeCardv1.stories.ts new file mode 100644 index 0000000..f67cb49 --- /dev/null +++ b/front_end_portserver/src/stories/cardInstrument/TypeCardv1.stories.ts @@ -0,0 +1,29 @@ + +import { TypeCardv1 } from '@/components/main/cardInstrument/Typecardv1'; +import type { Meta, StoryObj } from '@storybook/react'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: 'Component/Main/Type Card', + component: TypeCardv1, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + // backgroundColor: { control: 'color' }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Initial: Story = { + args: { + titleType:'' + }, +}; \ No newline at end of file diff --git a/front_end_portserver/src/stories/cardv1/Cardv1.tsx b/front_end_portserver/src/stories/cardv1/Cardv1.tsx deleted file mode 100644 index 3efcaab..0000000 --- a/front_end_portserver/src/stories/cardv1/Cardv1.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import '../../../app/global.css' -import { Button } from "@/components/ui/button" - -interface CardProps { - /** - * Is this the principal call to action on the page? - */ - primary?: boolean; - /** - * What background color to use - */ - backgroundColor?: string; - /** - * How large should the button be? - */ - size?: 'small' | 'medium' | 'large'; - /** - * Button contents - */ - label: string; - /** - * Optional click handler - */ - onClick?: () => void; -} - -/** - * Primary UI component for user interaction - */ -export const Cardv1 = ({ - primary = false, - size = 'medium', - backgroundColor, - label, - ...props -}: CardProps) => { - return ( - - ); -};