-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* starting * WIP: Adding Header in scrap production process UI impl Server store & get * production scrap with header * update Server: bump express 4.18.2 to 4.19.2 bump express-session 1.17.3 to 1.18.0 bump winston 3.11.0 to 3.13.0 bump yaml 2.3.4 to 2.4.1 Client: bump @tabler/icons-webfont 2.40.0 to 2.47.0 bump react-intl 6.5.2 to 6.6.5 bump react-router-dom 6.18.0 to 6.22.3 bump storybook 7.6.15 to 7.6.17 * httpheader component will be reused for actions * fix * V1.5.0 ---------
- Loading branch information
Showing
34 changed files
with
2,882 additions
and
1,871 deletions.
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
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
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
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
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
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,19 @@ | ||
| @import "../app/css/root.scss"; | ||
| .HttpHeader { | ||
| .content { | ||
| display: flex; | ||
| flex-direction: row; | ||
| column-gap: 1rem; | ||
| .inputgeneric::placeholder { | ||
| color: #8c6cb1; | ||
| font-weight: bold; | ||
| font-size: 0.7rem; | ||
| } | ||
| .headerhttpkey { | ||
| width: 8rem !important; | ||
| } | ||
| .headerhttpvalue { | ||
| flex-grow: 1; | ||
| } | ||
| } | ||
| } |
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,52 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| // import { useArgs } from "@storybook/preview-api"; | ||
|
|
||
| import { HttpHeader } from "./HttpHeader"; | ||
| import { | ||
| reactRouterParameters, | ||
| withRouter, | ||
| } from "storybook-addon-react-router-v6"; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export | ||
| const meta = { | ||
| title: "NewComponent/HttpHeader", | ||
| component: HttpHeader, | ||
| decorators: [withRouter], | ||
| parameters: { | ||
| // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout | ||
| layout: "fullscreen", | ||
| reactRouter: reactRouterParameters({ | ||
| location: { path: "/" }, | ||
| }), | ||
| }, | ||
| // 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: {}, | ||
| } satisfies Meta<typeof HttpHeader>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| // If you need to keep state in storybook, you also could use the app redux store | ||
| // const Component = ({ ...args }) => { | ||
| // const [, setArgs] = useArgs(); | ||
| // const onChange = (value: string) => { | ||
| // // Call the provided callback | ||
| // // This is used for the Actions tab | ||
| // args.onChange?.(value); | ||
| // | ||
| // // Update the arg in Storybook | ||
| // setArgs({ value }); | ||
| // }; | ||
| // return <HttpHeader {...args} onChange={onChange} />; | ||
| // }; | ||
| export const Primary: Story = { | ||
| args: { | ||
| handleOnChange: () => {}, | ||
| headerkey: "", | ||
| headervalue: "", | ||
| }, | ||
| // if you need to get a specific render see SelectArs component... | ||
| // render: (args) => Component(args), | ||
| }; |
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,61 @@ | ||
| /** | ||
| * @author DHENRY for mytinydc.com | ||
| * @license AGPL3 | ||
| */ | ||
|
|
||
| import { useIntl } from "react-intl"; | ||
|
|
||
| import "./HttpHeader.scss"; | ||
| import { FieldSet } from "./FieldSet"; | ||
| import InputGeneric from "./InputGeneric"; | ||
| import { UptodateFormFields } from "../../../src/Global.types"; | ||
| interface HttpHeaderProps { | ||
| handleOnChange: (key: UptodateFormFields, value: string | string[]) => void; | ||
| headerkey: string; | ||
| headervalue: string; | ||
| } | ||
| export const HttpHeader = ({ | ||
| handleOnChange, | ||
| headerkey, | ||
| headervalue, | ||
| }: HttpHeaderProps) => { | ||
| const intl = useIntl(); | ||
|
|
||
| return ( | ||
| <FieldSet | ||
| legend={intl.formatMessage({ id: "HTTP Header" })} | ||
| className="HttpHeader" | ||
| toolTipContent={`${intl.formatMessage({ | ||
| id: "(Optional) HTTP Header, use when authentication with token is needed", | ||
| })} | ||
| ${intl.formatMessage({ id: "eg" })}: | ||
| - ${intl.formatMessage({ | ||
| id: "Attribut: Authorization ; value: Bearer myauthtoken", | ||
| })} | ||
| - ${intl.formatMessage({ | ||
| id: "Attribut: X-Auth ; value: myauthtoken", | ||
| })} | ||
| `} | ||
| > | ||
| <InputGeneric | ||
| className="headerhttpkey" | ||
| value={headerkey} | ||
| placeholder={intl.formatMessage({ id: "HTTP header attribut" })} | ||
| title={intl.formatMessage({ id: "HTTP header attribut" })} | ||
| onChange={(value: string) => handleOnChange("headerkey", value)} | ||
| /> | ||
| <InputGeneric | ||
| className="headerhttpvalue" | ||
| placeholder={intl.formatMessage({ | ||
| id: "HTTP header attribute value", | ||
| })} | ||
| title={intl.formatMessage({ | ||
| id: "HTTP header attribute value", | ||
| })} | ||
| value={headervalue} | ||
| onChange={(value: string) => handleOnChange("headervalue", value)} | ||
| /> | ||
| </FieldSet> | ||
| ); | ||
| }; |
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,27 @@ | ||
| @import "../app/css/root.scss"; | ||
| .IconWithTooltip { | ||
| .tooltip { | ||
| position: absolute; | ||
| z-index: 9999; /* Set a high z-index value */ | ||
| background-color: #fff; | ||
| border: 1px solid #ccc; | ||
| padding: 5px; | ||
| border-radius: 4px; | ||
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
| display: flex; | ||
| flex-direction: column; | ||
| .tooltiptitle { | ||
| border-bottom: 1px solid #ccc; | ||
| margin: 0.5rem; | ||
| align-self: center; | ||
| } | ||
| .tooltipbody { | ||
| margin: 1rem; | ||
| font-weight: normal; | ||
| } | ||
| } | ||
| i { | ||
| font-size: 1.2rem; | ||
| color: rgb(91, 159, 185); | ||
| } | ||
| } |
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,51 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| // import { useArgs } from "@storybook/preview-api"; | ||
|
|
||
| import { IconWithTooltip } from "./IconWithTooltip"; | ||
| import { | ||
| reactRouterParameters, | ||
| withRouter, | ||
| } from "storybook-addon-react-router-v6"; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export | ||
| const meta = { | ||
| title: "NewComponent/IconWithTooltip", | ||
| component: IconWithTooltip, | ||
| decorators: [withRouter], | ||
| parameters: { | ||
| // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout | ||
| layout: "fullscreen", | ||
| reactRouter: reactRouterParameters({ | ||
| location: { path: "/" }, | ||
| }), | ||
| }, | ||
| // 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: {}, | ||
| } satisfies Meta<typeof IconWithTooltip>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| // If you need to keep state in storybook, you also could use the app redux store | ||
| // const Component = ({ ...args }) => { | ||
| // const [, setArgs] = useArgs(); | ||
| // const onChange = (value: string) => { | ||
| // // Call the provided callback | ||
| // // This is used for the Actions tab | ||
| // args.onChange?.(value); | ||
| // | ||
| // // Update the arg in Storybook | ||
| // setArgs({ value }); | ||
| // }; | ||
| // return <IconWithTooltip {...args} onChange={onChange} />; | ||
| // }; | ||
| export const Primary: Story = { | ||
| args: { | ||
| icon: "help", | ||
| tooltipContent: "test", | ||
| }, | ||
| // if you need to get a specific render see SelectArs component... | ||
| // render: (args) => Component(args), | ||
| }; |
Oops, something went wrong.