-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a80adde
commit c353d06
Showing
116 changed files
with
5,065 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
src/components/FeatureAttributes/FeatureAttributeSample/FeatureAttributeSample.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { FeatureAttributeSample } from "./FeatureAttributeSample"; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export | ||
| const meta: Meta<typeof FeatureAttributeSample> = { | ||
| component: FeatureAttributeSample, | ||
| // 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: {}, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof FeatureAttributeSample>; | ||
|
|
||
| // 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: { | ||
| attributes: { | ||
| data_type: "string", | ||
| sample: "The United Kingdom of Great Britain and Northern Ireland", | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const JSON: Story = { | ||
| args: { | ||
| attributes: { | ||
| data_type: "json", | ||
| sample: `{ | ||
| height: "6\\"2'", | ||
| weight: "174 lbs" | ||
| }`, | ||
| }, | ||
| }, | ||
| }; |
80 changes: 80 additions & 0 deletions
80
src/components/FeatureAttributes/FeatureAttributeSample/FeatureAttributeSample.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { FeatureAttributes } from "@howso/openapi-client"; | ||
| import { useDefaultTranslation } from "@/hooks/useDefaultTranslation"; | ||
| import { Modal } from "flowbite-react"; | ||
| import { FC, useState } from "react"; | ||
|
|
||
| export type FeatureAttributeSampleProps = { | ||
| attributes: Pick<FeatureAttributes, "data_type" | "sample">; | ||
| }; | ||
| export const FeatureAttributeSample: FC<FeatureAttributeSampleProps> = ({ | ||
| attributes, | ||
| }) => { | ||
| console.info("attributes", attributes); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const openModal = () => { | ||
| setIsOpen(true); | ||
| }; | ||
| const closeModal = () => { | ||
| setIsOpen(false); | ||
| }; | ||
|
|
||
| switch (true) { | ||
| case attributes.data_type === "json": | ||
| case attributes.data_type === "yaml": | ||
| return ( | ||
| <> | ||
| <button onClick={openModal} className="max-w-full"> | ||
| <code> | ||
| {typeof attributes.sample === "string" | ||
| ? // CSS will handle the dynamic truncation, this is just DOM length protection | ||
| attributes.sample.substring(0, 500) | ||
| : JSON.stringify(attributes.sample)} | ||
| </code> | ||
| </button> | ||
| {isOpen && ( | ||
| <FeatureAttributeSampleModal | ||
| attributes={attributes} | ||
| onClose={closeModal} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| case attributes.sample === null: | ||
| return <code className="text-red-500 dark:text-red-700">null</code>; | ||
| case attributes.data_type === "boolean": | ||
| return ( | ||
| <code className="text-blue-500 dark:text-blue-700"> | ||
| {attributes.sample} | ||
| </code> | ||
| ); | ||
| case attributes.data_type === "amalgam": | ||
| case attributes.data_type === "string": | ||
| case attributes.data_type === "string_mixable": | ||
| case attributes.data_type === "formatted_date_time": | ||
| return <code>"{attributes.sample}"</code>; | ||
| default: | ||
| return <code>{attributes.sample}</code>; | ||
| } | ||
| }; | ||
|
|
||
| const FeatureAttributeSampleModal: FC< | ||
| FeatureAttributeSampleProps & { onClose: () => void } | ||
| > = ({ attributes, onClose }) => { | ||
| const { t } = useDefaultTranslation(); | ||
| return ( | ||
| <Modal show onClose={onClose} dismissible> | ||
| <Modal.Header> | ||
| {t("FeatureAttributes.FeatureAttributeSample.modal.title")} | ||
| </Modal.Header> | ||
| <Modal.Body> | ||
| <pre> | ||
| <code> | ||
| {typeof attributes.sample === "string" | ||
| ? attributes.sample | ||
| : JSON.stringify(attributes.sample)} | ||
| </code> | ||
| </pre> | ||
| </Modal.Body> | ||
| </Modal> | ||
| ); | ||
| }; |
1 change: 1 addition & 0 deletions
1
src/components/FeatureAttributes/FeatureAttributeSample/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./FeatureAttributeSample"; |
Oops, something went wrong.