function TextStylingComponent({ onAddStyle, onResetStyles, stylesApplied }) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#E6E6E6] p-2", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF6262] text-white p-2 m-1", onClick: ()=>onAddStyle('bold'), __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Bold"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FAC710] text-white p-2 m-1", onClick: ()=>onAddStyle('italic'), __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Italic"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FEF445] text-white p-2 m-1", onClick: ()=>onAddStyle('underline'), __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Underline"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#61C28E] text-white p-2 m-1", onClick: ()=>onAddStyle('strike'), __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Strike"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#12CDD4] text-white p-2 m-1", onClick: ()=>onAddStyle('monospace'), __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Monospace")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#E6E6E6] p-2", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#2CBAE7] text-white p-2 m-1", onClick: ()=>onAddStyle('bold'), __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Bold"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#414BB2] text-white p-2 m-1", onClick: ()=>onAddStyle('h1'), __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "H1"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#E6E6E6] text-white p-2 m-1", onClick: ()=>onAddStyle('h2'), __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "H2"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#F6DBA8] text-white p-2 m-1", onClick: ()=>onAddStyle('ordered_list'), __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Ordered List"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1A1A1A] text-white p-2 m-1", onClick: ()=>onAddStyle('bullet_list'), __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Bullet List"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#E6E6E6] text-white p-2 m-1", onClick: ()=>onAddStyle('check_list'), __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Check List"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#F6DBA8] text-white p-2 m-1", onClick: onResetStyles, __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Reset All")), /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-[#E6E6E6]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#E6E6E6] p-2 m-1 text-[#1A1A1A]", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Button 1"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#F6DBA8] p-2 m-1 text-[#1A1A1A]", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Button 2"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1A1A1A] p-2 m-1 text-white", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Button 3")), /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Styles Applied: ", stylesApplied))); } function TextStylingComponentStory() { const [styles, setStyles] = React.useState([]); const addStyle = (style)=>{ setStyles((prevStyles)=>{ const newStyles = [ ...prevStyles, style ]; return newStyles.filter((value, index, self)=>self.indexOf(value) === index); }); }; const resetStyles = ()=>{ setStyles([]); }; const styleString = styles.join(','); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TextStylingComponent, { onAddStyle: addStyle, onResetStyles: resetStyles, stylesApplied: styleString, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); } function TextStylingComponentsInTypeScript({ onStyleChange }) { const addStyle = (style)=>()=>{ onStyleChange(style); }; const resetStyles = ()=>{ onStyleChange('reset'); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#E6E6E6] p-2", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF6262] text-white p-2 m-1", onClick: addStyle('bold'), __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Bold"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FAC710] text-white p-2 m-1", onClick: addStyle('italic'), __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Italic"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FEF445] text-white p-2 m-1", onClick: addStyle('underline'), __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Underline"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#61C28E] text-white p-2 m-1", onClick: addStyle('strike'), __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Strike"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#12CDD4] text-white p-2 m-1", onClick: addStyle('monospace'), __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Monospace")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#E6E6E6] p-2", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#2CBAE7] text-white p-2 m-1", onClick: addStyle('bold'), __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Bold"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#414BB2] text-white p-2 m-1", onClick: addStyle('h1'), __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "H1"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#E6E6E6] text-white p-2 m-1", onClick: addStyle('h2'), __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "H2"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#F6DBA8] text-white p-2 m-1", onClick: addStyle('ordered_list'), __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Ordered List"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1A1A1A] text-white p-2 m-1", onClick: addStyle('bullet_list'), __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Bullet List"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#E6E6E6] text-white p-2 m-1", onClick: addStyle('check_list'), __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Check List"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#F6DBA8] text-white p-2 m-1", onClick: resetStyles, __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Reset All")), /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-[#E6E6E6]", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#E6E6E6] p-2 m-1 text-[#1A1A1A]", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Button 1"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#F6DBA8] p-2 m-1 text-[#1A1A1A]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Button 2"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#1A1A1A] p-2 m-1 text-white", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Button 3")))); } function TextStylingComponentsInTypeScriptStory() { const handleStyleChange = (style)=>{ console.log(`Style changed: ${style}`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TextStylingComponentsInTypeScript, { onStyleChange: handleStyleChange, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this })); } function MainComponent() { const [styles, setStyles] = React.useState([]); const handleStyleChange = (style)=>{ if (style === 'reset') { setStyles([]); } else { setStyles((prevStyles)=>[ ...new Set([ ...prevStyles, style ]) ]); } }; const styleString = styles.join(','); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(TextStylingComponent, { onAddStyle: handleStyleChange, onResetStyles: ()=>handleStyleChange('reset'), stylesApplied: styleString, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TextStylingComponentsInTypeScript, { onStyleChange: handleStyleChange, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); }