2025-04-18 - single spa

2025-04-18T06:34:50Z

Pack:

2025-04-18 - single spa

2025-04-18T06:32:53Z

Pack:

2025-04-18 - single spa

2025-04-18T06:32:33Z

Pack:

=Install=

==

==Global Install==
*install in shell only one time when never install single-spa in Local computer before.

npm install -g create-single-spa

==Install single-spa project==
npx create-single-spa

===Organization name===
*izaraFrontends

===Project name===
*<your repository name> eg. table-config

=Open port & Run script =
*start root-config
npm start
*start other micro-frontend
npm start -- --port 9001(set port)

=Root-config=

[[Category:Working documents| 2025-04-18]]
[[Category:Working documents - Creating 2025-04-18 - single spa| 2025-04-18]]

2025-04-18 - single spa

2025-04-18T06:13:31Z

Pack:

2025-04-18 - single spa

2025-04-18T06:08:18Z

Pack:

2025-04-18 - frontend responsive

2025-04-18T03:11:24Z

Pack:

=Concept=
*Provide window size to children component by useContext
*component will receive width, height, size of usinge window
*component choose output jsx to return follow window size from useConText

[[Category:Working documents| 2025-04-18]]
[[Category:Working documents - frontend responsive| 2025-04-18]]

2025-04-18T00:30:52Z

Pack:

2025-04-12- translation

2025-04-18T00:29:53Z

Pack:

Pack:

= styled-components concept=

===StyleTag Name Format===

* use "Izara" + html tag + "Style"
* html tag = same tag with styled.tag
<syntaxhighlight lang="JavaScript">
const IzaraInputStyle = styled.input
</syntaxhighlight>

===StyleTag Syntax===
<syntaxhighlight lang="JavaScript">
export const IzaraTextSpanStyle = styled.span`
${(props) => createComponent(props)}
`;
</syntaxhighlight>

=function=

==createComponent==
===Parameter===
===themeStyle=== (object)(can be undefined)
*object from userStyles get from userDetail in store after login, It store styletag as key and css as value
eg.
<syntaxhighlight lang="JavaScript">

themeStyle = {
styles: {
"componentXNavbar": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(204, 214, 166); transition: 0.3s; z-index: 5; height: 35px;",
"navbar": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(199, 242, 164); transition: 0.3s; z-index: 5; height: 35px;",
"specificInThisCOmpnonentBuyingNavbar": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(223, 232, 204); transition: 0.3s; z-index: 5; 35px;",
"tabulation_buyingNavbar_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(223, 232, 204); transition: 0.3s; z-index: 5; height: 35px;",
"tabulation_buyingNavbar_navbar_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(204, 214, 166); transition: 0.3s; z-index: 5; height: 35px;",
"tabulation_datatype": "width: auto; flex-direction: row; padding: 5px; padding-right: 10px; background: rgb(199, 242, 164); transition: 0.3s; z-index: 5; height: 35px;"
}
};
</syntaxhighlight>

===styletags=== (array)(can be undefined)
*list of use styletag create from createStyleTags function
eg.
<syntaxhighlight lang="JavaScript">
["tabulation_ComplexFilter_filterData_section_dataType_sort","tabulation_ComplexFilter_section_dataType_sort","tabulation_section_dataType_sort"]
</syntaxhighlight>

===overwritecssstyles=== (string)(can be undefined)
Css value obtained from the objectConfig followed by the style tag as a key.

===function process===
*use styleTags to get CssStyle from themeStyle and themeStylesDefault
*themeStylesDefault is object from local create by dev,It store styletag as key and css as value like themeStyle object
*create usingCss style by mixed cssStyle from styleTags with cssStyle from overwritecssstyles
===return result===
type string
<syntaxhighlight lang="JavaScript">
color: blue;
margin: 0px 3px;
background-color: transparent;
transition: 0.3s;
font-size: 17px;
display: flex;
align-items: center;
:hover{
opacity: 0.6;
color: #B3DBD8 ;
}
color: red;

</syntaxhighlight>
* About CSS, if the same property exists, such as in the CSS example above, with two color properties, the CSS will cause the bottom line property to overwrite the top line property. In the example, red overwrites blue.

==createStyleTags==
===Parameter===
===createCssPrefixs=== (array)(requried)
*List of string create by createCssPrefixs function store at least 1 item but not more than 3 item
===createCssSuffix=== (string)(requried)
*A string generated by the createCssSuffix function that indicates where this cssStyle will be applied on the page, such as rows, cells, or table.
Conditions can be added after the "_" to further specify or describe the style, such as color, row range, or column range.
===return result===
type array
<syntaxhighlight lang="JavaScript">
["tabulation_serviceTag_objectType_section_dataType_sort","tabulation_objectType_section_dataType_sort","tabulation_section_dataType_sort"]
</syntaxhighlight>

==createCssPrefixs==
===Parameter===
===defaultPrefix=== (string)(requried)
Specifies which objectConfig is using this cssStyle. eg. menuOutput, tableConfig, sitePageConfig, tableOutput.
===cssPrefixes=== (array)(can be undefined)
*List of ObjTypes must have 2 items, fist index is serviceTag second is objectType.
===return result===
type array
<syntaxhighlight lang="JavaScript">
//if not have cssPrefixes
["tableConfig"]
//have cssPrefixes
["tableConfig", "serviceTag", "objectType"]
</syntaxhighlight>

==createCssSuffix==
===Parameter===
===defaultSuffix=== (string)(requried)
*Specifies where this cssStyle will be applied on the page, such as rows, cells, or tables.
===localSuffix=== (string)(can be undefined)
*Specify or further explain defaultSuffix. A string can be a single word or a combination of words, and each word must be separated by "_". eg. "background_blue", "rowSpan_2"
===return result===
type string
<syntaxhighlight lang="JavaScript">
//if not have localSuffix
"row"
//have localSuffix
"row_rowSpan_2"
</syntaxhighlight>

[[Category:Working documents| 2025-04-08]]
[[Category:Working documents - Frontend Styles| 2025-04-08]]

2025-04-12- translation

2025-04-17T02:19:34Z

Pack:

2025-04-15T00:59:36Z

Pack:

=Translation Microfrontend=
==function==

==S3==
*Store translations of each language in their respective directory.
===S3 tree===
/translations-language
/locales
/{language_name}
-{namespace_name}.json

===.json file===
* key = reference word
* value = translated word
<syntaxhighlight lang="Json">
{
"greeting": "Hello",
"text": "Thank you for visiting our website.",
"language": "Language",
"Hi": "What's up",
"Hello": "greeting from translation"
}
</syntaxhighlight>

===Object link===
*format
"https://translations-language.s3.us-east-2.amazonaws.com/locales/{{lng}}/{{ns}}.json"
*example
"https://translations-language.s3.us-east-2.amazonaws.com/locales/en/buying.json"

=Translation NPM Library=