import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as s}from"./index-BeeV6X6A.js";import{M as r}from"./index-DLgQDw3r.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-Cf-Lpz6Y.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function o(i){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",...s(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{}),`
`,e.jsx(n.h1,{id:"code-styling-guidelines",children:"Code Styling Guidelines"}),`
`,e.jsx(n.h2,{id:"prop-naming",children:"Prop Naming"}),`
`,e.jsx(n.p,{children:"We define every prop explicitly, rather than extending the full array of MUI props, to ensure that Odyssey components only include the features we’ve explicitly defined."}),`
`,e.jsx(n.p,{children:"We derive state from functionality whenever possible."}),`
`,e.jsx(n.h3,{id:"callbacks",children:"Callbacks"}),`
`,e.jsxs(n.p,{children:["All events have an ",e.jsx(n.code,{children:"on"})," prefix. Events are named as ",e.jsx(n.code,{children:"on[EVENT_NAME]"}),", with the event in present-tense (such as ",e.jsx(n.code,{children:"onClick"}),", ",e.jsx(n.code,{children:"onRemove"}),", etc)."]}),`
`,e.jsxs(n.p,{children:["In MUI, the Chip component includes separate props for ",e.jsx(n.code,{children:"clickable"})," and ",e.jsx(n.code,{children:"onClick"}),". For Odyssey Tag, we’ve simplified this to only ",e.jsx(n.code,{children:"onClick"})," — if ",e.jsx(n.code,{children:"onClick"})," is defined, we know the tag is ",e.jsx(n.code,{children:"cliackble"}),". If it isn’t defined, we know it isn’t. No need for two separate props."]}),`
`,e.jsx(n.h3,{id:"booleans",children:"Booleans"}),`
`,e.jsxs(n.p,{children:["Booleans are named as ",e.jsx(n.code,{children:"isBoolean"})," or ",e.jsx(n.code,{children:"hasBoolean"}),", such as ",e.jsx(n.code,{children:"isDisabled"}),", ",e.jsx(n.code,{children:"isVisible"}),", or ",e.jsx(n.code,{children:"hasError"}),". This is different from MUI, which uses the simple boolean name (",e.jsx(n.code,{children:"disabled"})," or ",e.jsx(n.code,{children:"visible"}),")."]}),`
`,e.jsx(n.h3,{id:"terminology-delete-versus-remove",children:"Terminology: Delete versus Remove"}),`
`,e.jsx(n.p,{children:"We have deliberately different meanings for “Delete” and “Remove”."}),`
`,e.jsx(n.p,{children:"We use Delete for an action that makes an object permanently inaccessible, such as deleting data from a database."}),`
`,e.jsx(n.p,{children:"We use Remove for an action that removes a reference to an object, or for temporary removal, such as removing a tag from a list (assuming the tag is still available to be added to future lists)."})]})}function u(i={}){const{wrapper:n}={...s(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(o,{...i})}):o(i)}export{u as default};
