diff --git a/404.html b/404.html index 97b95f40..4c668ead 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ Page Not Found | React Native Styled System - + diff --git a/assets/js/0012fc6f.e8e19f46.js b/assets/js/0012fc6f.927bde47.js similarity index 77% rename from assets/js/0012fc6f.e8e19f46.js rename to assets/js/0012fc6f.927bde47.js index ed3b62a8..a002ef06 100644 --- a/assets/js/0012fc6f.e8e19f46.js +++ b/assets/js/0012fc6f.927bde47.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[287],{8237:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>a,frontMatter:()=>r,metadata:()=>l,toc:()=>d});var s=n(4848),i=n(8453);const r={sidebar_position:3.5,title:"Text & Typography"},o="Text & Typography",l={id:"usage/text",title:"Text & Typography",description:"The useSx hook takes an option as the second argument, and there is styleType there.",source:"@site/docs/usage/text.mdx",sourceDirName:"usage",slug:"/usage/text",permalink:"/react-native-styled-system/docs/usage/text",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/usage/text.mdx",tags:[],version:"current",sidebarPosition:3.5,frontMatter:{sidebar_position:3.5,title:"Text & Typography"},sidebar:"tutorialSidebar",previous:{title:"Component",permalink:"/react-native-styled-system/docs/usage/component"},next:{title:"Pass styles and parsing priorities",permalink:"/react-native-styled-system/docs/usage/style-parsing"}},c={},d=[{value:"Define theme typographies",id:"define-theme-typographies",level:2},{value:"Create styled Text component",id:"create-styled-text-component",level:2},{value:"Use it!",id:"use-it",level:2}];function p(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"text--typography",children:"Text & Typography"}),"\n",(0,s.jsxs)(t.p,{children:["The useSx hook takes an option as the second argument, and there is ",(0,s.jsx)(t.code,{children:"styleType"})," there."]}),"\n",(0,s.jsxs)(t.p,{children:["If you set it to ",(0,s.jsx)(t.code,{children:"TextStyle"}),", you can apply the style of ",(0,s.jsx)(t.code,{children:"TextStyle"})," in addition to all the styles included in ",(0,s.jsx)(t.code,{children:"ViewStyle"}),"."]}),"\n",(0,s.jsxs)(t.admonition,{type:"info",children:[(0,s.jsxs)(t.p,{children:["For TypeScript users, the ",(0,s.jsx)(t.code,{children:"TextSxProps"})," type exists."]}),(0,s.jsxs)(t.p,{children:["This is text version of ",(0,s.jsx)(t.code,{children:"SxProps"}),". It includes all kinds of properties in SxProps and text properties."]})]}),"\n",(0,s.jsx)(t.h2,{id:"define-theme-typographies",children:"Define theme typographies"}),"\n",(0,s.jsxs)(t.p,{children:["We can set our typographies in theme from ",(0,s.jsx)(t.code,{children:"ThemedDict"})," passing to ",(0,s.jsx)(t.code,{children:"StyledSystemProvider"}),"."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",children:"const AppTheme = {\n /* ... */\n typography: {\n title: { fontSize: 18, textAlign: 'center', /* ... */ }\n }\n}\n\nexport default AppTheme;\n"})}),"\n",(0,s.jsx)(t.p,{children:"In typography value, the supported properties are followings."}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"fontFamily"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"fontSize"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"fontWeight"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"lineHeight"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"letterSpacing"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"textAlign"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"fontStyle"})}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"create-styled-text-component",children:"Create styled Text component"}),"\n",(0,s.jsx)(t.p,{children:"We can define our new Text component like this."}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",metastring:"title='Txt.tsx'",children:"import { Text, TextProps } from 'react-native';\nimport { TextSxProps, useSx } from 'react-native-themed-styled-system';\n\ntype TxtProps = {} & TextSxProps & TextProps;\nconst Txt = (props: TxtProps) => {\n const { getStyle, filteredProps } = useSx(props, { styleType: 'TextStyle' });\n return ;\n};\n\nexport { Txt };\nexport type { TxtProps };\n"})}),"\n",(0,s.jsx)(t.h2,{id:"use-it",children:"Use it!"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",children:"\n \n React Native\n \n\n"})})]})}function a(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var s=n(6540);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[287],{8237:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>a,frontMatter:()=>r,metadata:()=>l,toc:()=>d});var s=n(4848),i=n(8453);const r={sidebar_position:3.5,title:"Text & Typography"},o="Text & Typography",l={id:"usage/text",title:"Text & Typography",description:"The useSx hook takes an option as the second argument, and there is styleType there.",source:"@site/docs/usage/text.mdx",sourceDirName:"usage",slug:"/usage/text",permalink:"/react-native-styled-system/docs/usage/text",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/usage/text.mdx",tags:[],version:"current",sidebarPosition:3.5,frontMatter:{sidebar_position:3.5,title:"Text & Typography"},sidebar:"tutorialSidebar",previous:{title:"Component",permalink:"/react-native-styled-system/docs/usage/component"},next:{title:"Pass styles and parsing priorities",permalink:"/react-native-styled-system/docs/usage/style-parsing"}},c={},d=[{value:"Define theme typographies",id:"define-theme-typographies",level:2},{value:"Create styled Text component",id:"create-styled-text-component",level:2},{value:"Use it!",id:"use-it",level:2}];function p(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"text--typography",children:"Text & Typography"}),"\n",(0,s.jsxs)(t.p,{children:["The useSx hook takes an option as the second argument, and there is ",(0,s.jsx)(t.code,{children:"styleType"})," there."]}),"\n",(0,s.jsxs)(t.p,{children:["If you set it to ",(0,s.jsx)(t.code,{children:"TextStyle"}),", you can apply the style of ",(0,s.jsx)(t.code,{children:"TextStyle"})," in addition to all the styles included in ",(0,s.jsx)(t.code,{children:"ViewStyle"}),"."]}),"\n",(0,s.jsxs)(t.admonition,{type:"info",children:[(0,s.jsxs)(t.p,{children:["For TypeScript users, the ",(0,s.jsx)(t.code,{children:"TextSxProps"})," type exists."]}),(0,s.jsxs)(t.p,{children:["This is text version of ",(0,s.jsx)(t.code,{children:"SxProps"}),". It includes all kinds of properties in SxProps and text properties."]})]}),"\n",(0,s.jsx)(t.h2,{id:"define-theme-typographies",children:"Define theme typographies"}),"\n",(0,s.jsxs)(t.p,{children:["We can set our typographies in theme from ",(0,s.jsx)(t.code,{children:"ThemedDict"})," passing to ",(0,s.jsx)(t.code,{children:"StyledSystemProvider"}),"."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",children:"const AppTheme = {\n /* ... */\n typography: {\n title: { fontSize: 18, textAlign: 'center', /* ... */ }\n }\n}\n\nexport default AppTheme;\n"})}),"\n",(0,s.jsx)(t.p,{children:"In typography value, the supported properties are followings."}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"fontFamily"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"fontSize"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"fontWeight"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"lineHeight"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"letterSpacing"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"textAlign"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.code,{children:"fontStyle"})}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"create-styled-text-component",children:"Create styled Text component"}),"\n",(0,s.jsx)(t.p,{children:"We can define our new Text component like this."}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",metastring:"title='Txt.tsx'",children:"import { Text, TextProps } from 'react-native';\nimport { TextSxProps, useSx } from '@react-native-styled-system/core';\n\ntype TxtProps = {} & TextSxProps & TextProps;\nconst Txt = (props: TxtProps) => {\n const { getStyle, filteredProps } = useSx(props, { styleType: 'TextStyle' });\n return ;\n};\n\nexport { Txt };\nexport type { TxtProps };\n"})}),"\n",(0,s.jsx)(t.h2,{id:"use-it",children:"Use it!"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",children:"\n \n React Native\n \n\n"})})]})}function a(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var s=n(6540);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1df93b7f.7f533c7b.js b/assets/js/1df93b7f.7f533c7b.js deleted file mode 100644 index 1eb61ec6..00000000 --- a/assets/js/1df93b7f.7f533c7b.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[4583],{8198:(e,t,s)=>{s.r(t),s.d(t,{default:()=>c});var i=s(8774),n=s(4586),l=s(1107),a=s(781),r=s(4164);const o={heroBanner:"heroBanner_qdFl",buttons:"buttons_AeoN"};var d=s(4848);function c(){const{siteConfig:e}=(0,n.A)();return(0,d.jsx)(a.A,{title:`${e.title}`,description:"Mimic styled-system for React Native",children:(0,d.jsx)("main",{style:{flex:1,justifyContent:"center",display:"flex",flexDirection:"column"},children:(0,d.jsxs)("div",{className:(0,r.A)(o.heroBanner,"container"),style:{paddingBottom:"120px"},children:[(0,d.jsx)("img",{src:"img/logo.svg",width:64,height:64,alt:"logo"}),(0,d.jsx)(l.A,{as:"h1",className:"hero__title",children:e.title}),(0,d.jsx)("p",{className:"hero__subtitle",children:e.tagline}),(0,d.jsx)("div",{className:o.buttons,children:(0,d.jsx)(i.A,{className:"button button--secondary button--lg",to:"/docs/intro",children:"Getting Started \u23f1\ufe0f"})}),(0,d.jsx)("img",{src:"img/main_code.png",width:400,alt:"main_code",style:{marginTop:40,borderRadius:4,boxShadow:"0px 0px 24px #eee2"}}),(0,d.jsx)("div",{style:{marginTop:24},children:(0,d.jsx)("code",{style:{borderWidth:1,padding:5,whiteSpace:"pre-wrap"},children:"npm install react-native-themed-styled-system"})})]})})})}}}]); \ No newline at end of file diff --git a/assets/js/1df93b7f.adc5a1dc.js b/assets/js/1df93b7f.adc5a1dc.js new file mode 100644 index 00000000..c48fc97c --- /dev/null +++ b/assets/js/1df93b7f.adc5a1dc.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[4583],{8198:(e,t,s)=>{s.r(t),s.d(t,{default:()=>d});var i=s(8774),n=s(4586),l=s(1107),r=s(781),a=s(4164);const o={heroBanner:"heroBanner_qdFl",buttons:"buttons_AeoN"};var c=s(4848);function d(){const{siteConfig:e}=(0,n.A)();return(0,c.jsx)(r.A,{title:`${e.title}`,description:"Mimic styled-system for React Native",children:(0,c.jsx)("main",{style:{flex:1,justifyContent:"center",display:"flex",flexDirection:"column"},children:(0,c.jsxs)("div",{className:(0,a.A)(o.heroBanner,"container"),style:{paddingBottom:"120px"},children:[(0,c.jsx)("img",{src:"img/logo.svg",width:64,height:64,alt:"logo"}),(0,c.jsx)(l.A,{as:"h1",className:"hero__title",children:e.title}),(0,c.jsx)("p",{className:"hero__subtitle",children:e.tagline}),(0,c.jsx)("div",{className:o.buttons,children:(0,c.jsx)(i.A,{className:"button button--secondary button--lg",to:"/docs/intro",children:"Getting Started \u23f1\ufe0f"})}),(0,c.jsx)("img",{src:"img/main_code.png",width:400,alt:"main_code",style:{marginTop:40,borderRadius:4,boxShadow:"0px 0px 24px #eee2"}}),(0,c.jsx)("div",{style:{marginTop:24},children:(0,c.jsx)("code",{style:{borderWidth:1,padding:5,whiteSpace:"pre-wrap"},children:"npm install @react-native-styled-system/core"})})]})})})}}}]); \ No newline at end of file diff --git a/assets/js/26f20861.5f4dfa73.js b/assets/js/26f20861.8558d24c.js similarity index 55% rename from assets/js/26f20861.5f4dfa73.js rename to assets/js/26f20861.8558d24c.js index b6fe836f..29dfabe6 100644 --- a/assets/js/26f20861.5f4dfa73.js +++ b/assets/js/26f20861.8558d24c.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[7872],{2292:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>c,toc:()=>l});var o=n(4848),r=n(8453);const s={sidebar_position:5},i="StyledButton",c={id:"example-components/styled-button",title:"StyledButton",description:"",source:"@site/docs/example-components/styled-button.mdx",sourceDirName:"example-components",slug:"/example-components/styled-button",permalink:"/react-native-styled-system/docs/example-components/styled-button",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/example-components/styled-button.mdx",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"StyledImage",permalink:"/react-native-styled-system/docs/example-components/styled-image"}},a={},l=[];function p(t){const e={code:"code",h1:"h1",pre:"pre",...(0,r.R)(),...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{id:"styledbutton",children:"StyledButton"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-tsx",metastring:"title='StyledButton.tsx'",children:"import type { PropsWithChildren, Ref } from 'react';\nimport React, { forwardRef } from 'react';\nimport type { TouchableOpacityProps } from 'react-native';\nimport { TouchableOpacity } from 'react-native';\nimport type { SxProps } from 'react-native-themed-styled-system';\nimport { useSx } from 'react-native-themed-styled-system';\n\nimport { Txt } from './Txt';\n\ntype StyledButtonProps = PropsWithChildren;\n\nconst StyledButton = forwardRef((props: StyledButtonProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n\n const { title, ...rest } = filteredProps;\n\n return (\n \n {title}\n \n );\n});\n\nexport { StyledButton };\nexport type { StyledButtonProps };\n"})})]})}function d(t={}){const{wrapper:e}={...(0,r.R)(),...t.components};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(p,{...t})}):p(t)}},8453:(t,e,n)=>{n.d(e,{R:()=>i,x:()=>c});var o=n(6540);const r={},s=o.createContext(r);function i(t){const e=o.useContext(s);return o.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function c(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(r):t.components||r:i(t.components),o.createElement(s.Provider,{value:e},t.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[7872],{2292:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>i,default:()=>d,frontMatter:()=>s,metadata:()=>c,toc:()=>l});var o=n(4848),r=n(8453);const s={sidebar_position:5},i="StyledButton",c={id:"example-components/styled-button",title:"StyledButton",description:"",source:"@site/docs/example-components/styled-button.mdx",sourceDirName:"example-components",slug:"/example-components/styled-button",permalink:"/react-native-styled-system/docs/example-components/styled-button",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/example-components/styled-button.mdx",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"StyledImage",permalink:"/react-native-styled-system/docs/example-components/styled-image"}},a={},l=[];function p(t){const e={code:"code",h1:"h1",pre:"pre",...(0,r.R)(),...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{id:"styledbutton",children:"StyledButton"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-tsx",metastring:"title='StyledButton.tsx'",children:"import type { PropsWithChildren, Ref } from 'react';\nimport React, { forwardRef } from 'react';\nimport type { TouchableOpacityProps } from 'react-native';\nimport { TouchableOpacity } from 'react-native';\nimport type { SxProps } from '@react-native-styled-system/core';\nimport { useSx } from '@react-native-styled-system/core';\n\nimport { Txt } from './Txt';\n\ntype StyledButtonProps = PropsWithChildren;\n\nconst StyledButton = forwardRef((props: StyledButtonProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n\n const { title, ...rest } = filteredProps;\n\n return (\n \n {title}\n \n );\n});\n\nexport { StyledButton };\nexport type { StyledButtonProps };\n"})})]})}function d(t={}){const{wrapper:e}={...(0,r.R)(),...t.components};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(p,{...t})}):p(t)}},8453:(t,e,n)=>{n.d(e,{R:()=>i,x:()=>c});var o=n(6540);const r={},s=o.createContext(r);function i(t){const e=o.useContext(s);return o.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function c(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(r):t.components||r:i(t.components),o.createElement(s.Provider,{value:e},t.children)}}}]); \ No newline at end of file diff --git a/assets/js/3f77e242.bcd96e96.js b/assets/js/3f77e242.bcd96e96.js new file mode 100644 index 00000000..23d67530 --- /dev/null +++ b/assets/js/3f77e242.bcd96e96.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[4713],{4863:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>p,frontMatter:()=>i,metadata:()=>l,toc:()=>d});var o=t(4848),s=t(8453);const i={sidebar_position:3,title:"Component"},r="Component",l={id:"usage/component",title:"Component",description:"React Native Styled System does not create basic components internally.",source:"@site/docs/usage/component.mdx",sourceDirName:"usage",slug:"/usage/component",permalink:"/react-native-styled-system/docs/usage/component",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/usage/component.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"Component"},sidebar:"tutorialSidebar",previous:{title:"Configuration",permalink:"/react-native-styled-system/docs/usage/configuration"},next:{title:"Text & Typography",permalink:"/react-native-styled-system/docs/usage/text"}},c={},d=[{value:"StyledView example",id:"styledview-example",level:2},{value:"Example of refactoring an existing component",id:"example-of-refactoring-an-existing-component",level:2},{value:"Example without Props destruction",id:"example-without-props-destruction",level:2}];function a(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"component",children:"Component"}),"\n",(0,o.jsx)(n.p,{children:"React Native Styled System does not create basic components internally."}),"\n",(0,o.jsx)(n.p,{children:"Instead, you can define the components that will use your theme directly with a simple and extensible API."}),"\n",(0,o.jsx)(n.p,{children:"The mainly used APIs are as follows."}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.code,{children:"useSx(hook)"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.code,{children:"SxProps(type)"})}),"\n"]}),"\n",(0,o.jsxs)(n.h2,{id:"styledview-example",children:[(0,o.jsx)(n.code,{children:"StyledView"})," example"]}),"\n",(0,o.jsxs)(n.p,{children:["Let\u2019s create a component that can use React Native\u2019s ",(0,o.jsx)(n.code,{children:"View"})," component like a Styled System."]}),"\n",(0,o.jsxs)(n.p,{children:["How to use the completed ",(0,o.jsx)(n.code,{children:"StyledView"})," component is as follows."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{src:"https://raw.githubusercontent.com/mym0404/image-archive/master/202403131245340.png",alt:"image.png"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"\n \n \n \n \n \n\n"})}),"\n",(0,o.jsx)(n.p,{children:"It can be defined as follows:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="StyledView.tsx"',children:"import { forwardRef, Ref, PropsWithChildren } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { SxProps, useSx } from '@react-native-styled-system/core';\n\ntype StyledViewProps = PropsWithChildren;\nconst StyledView = forwardRef((props: StyledViewProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n return ;\n});\n\nexport { StyledView };\nexport type { StyledViewProps };\n"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"useSx"})," is responsible for receiving ",(0,o.jsx)(n.code,{children:"SxProps"})," and converting it to ",(0,o.jsx)(n.code,{children:"ViewStyle"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["You can call the ",(0,o.jsx)(n.code,{children:"getStyle"})," function returned by ",(0,o.jsx)(n.code,{children:"useSx"})," and pass it to the ",(0,o.jsx)(n.code,{children:"style"})," prop of the desired view."]}),"\n",(0,o.jsxs)(n.admonition,{type:"warning",children:[(0,o.jsxs)(n.p,{children:["The prop type of a component containing the ",(0,o.jsx)(n.code,{children:"SxProps"})," type includes all the keys included in ",(0,o.jsx)(n.code,{children:"SxProps"}),"."]}),(0,o.jsxs)(n.p,{children:["Therefore, if all props from the parent are passed through object destruction like in the existing ",(0,o.jsx)(n.code,{children:"{...props}"}),", the keys do not overlap.\nYou need to be careful not to do so."]}),(0,o.jsxs)(n.p,{children:["Also, when using ",(0,o.jsx)(n.code,{children:"props"})," as is, it must always come before ",(0,o.jsx)(n.code,{children:"style"})," so as not to overwrite the ",(0,o.jsx)(n.code,{children:"style"})," of ",(0,o.jsx)(n.code,{children:"getStyle()"}),"."]}),(0,o.jsxs)(n.p,{children:["To prevent this, you can use ",(0,o.jsx)(n.code,{children:"filteredProps"})," in the return value of ",(0,o.jsx)(n.code,{children:"useSx"}),"."]}),(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"filteredProps"})," represents a new prop that filters all style-related fields such as ",(0,o.jsx)(n.code,{children:"style"}),", ",(0,o.jsx)(n.code,{children:"sx"}),", ",(0,o.jsx)(n.code,{children:"w"}),", and ",(0,o.jsx)(n.code,{children:"width"}),"."]})]}),"\n",(0,o.jsx)(n.h2,{id:"example-of-refactoring-an-existing-component",children:"Example of refactoring an existing component"}),"\n",(0,o.jsx)(n.p,{children:"Let's look at how to refactor existing components as follows."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n};\nconst ExistComponent = ({\n style,\n title,\n body,\n}: Props) => {\n return (\n \n...\n"})}),"\n",(0,o.jsx)(n.p,{children:"This changes to:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n//highlight-next-line\n} & SxProps;\nconst ScreenErrorFallback = (props: Props) => {\n//highlight-next-line\n const { title, body } = props;\n//highlight-next-line\n const { getStyle } = useSx(props);\n const getSxStyle = useSxStyle();\n return (\n \n"})}),"\n",(0,o.jsx)(n.p,{children:"There are a few things to keep in mind."}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"useSx"})," includes ",(0,o.jsx)(n.code,{children:"props.style"})," in the automatically created style output.\nThere is no need to add ",(0,o.jsx)(n.code,{children:"style"})," as a prop to ",(0,o.jsx)(n.code,{children:"style"})," of ",(0,o.jsx)(n.code,{children:"View"}),"."]}),"\n",(0,o.jsxs)(n.li,{children:["Always pass all ",(0,o.jsx)(n.code,{children:"props"})," objects themselves to ",(0,o.jsx)(n.code,{children:"useSx"})," to avoid missing any properties. ",(0,o.jsx)(n.code,{children:"useSx"}),"\nProperties that are not used internally are ignored and not changed."]}),"\n",(0,o.jsxs)(n.li,{children:["Fixed style overwriting ",(0,o.jsx)(n.code,{children:"props"})," can be applied with ",(0,o.jsx)(n.code,{children:"getSxStyle"}),"."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"center"})," is a shortcut for ",(0,o.jsx)(n.code,{children:"justifyContent: center"}),", ",(0,o.jsx)(n.code,{children:"alignItems: center"}),"."]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"example-without-props-destruction",children:"Example without Props destruction"}),"\n",(0,o.jsxs)(n.p,{children:["If you need a style object that can control multiple views in a component's props or do not want props destruction,\nYou can define a component using the ",(0,o.jsx)(n.code,{children:"sx"})," prop as follows."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",metastring:'title="StyledScrollView.tsx"',children:"import { PropsWithChildren, forwardRef, Ref } from 'react';\nimport { ScrollViewProps, ScrollView } from 'react-native';\nimport { SxProps, useSx } from '@react-native-styled-system/core';\n\ntype StyledScrollViewProps = PropsWithChildren<\n {\n contentContainerSx?: SxProps;\n } & Omit &\n SxProps\n>;\nconst StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);\n return (\n \n );\n});\n\nexport { StyledScrollView };\nexport type { StyledScrollViewProps };\n"})}),"\n",(0,o.jsxs)(n.p,{children:["This is a redefinition of ",(0,o.jsx)(n.code,{children:"ScrollView"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["In addition to ",(0,o.jsx)(n.code,{children:"style"}),", ",(0,o.jsx)(n.code,{children:"ScrollView"})," has one more style prop called ",(0,o.jsx)(n.code,{children:"contentContainerStyle"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["Therefore, it is accepted as a field called ",(0,o.jsx)(n.code,{children:"contentContainerSx"})," as a ",(0,o.jsx)(n.code,{children:"SxProps"})," type, and the ",(0,o.jsx)(n.code,{children:"contentContainerStyle"})," of the original ",(0,o.jsx)(n.code,{children:"ScrollViewProps"})," is created using ",(0,o.jsx)(n.code,{children:"Omit"}),".\nBe prepared for any possible bugs."]}),"\n",(0,o.jsx)(n.admonition,{type:"info",children:(0,o.jsxs)(n.p,{children:["I still feel like there is a lot of code that needs to be written in this example, so I recommend improving it to a simpler Helper API.\nWe also plan to support several props of ",(0,o.jsx)(n.code,{children:"ScrollView"})," separately."]})})]})}function p(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>l});var o=t(6540);const s={},i=o.createContext(s);function r(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3f77e242.f00ed186.js b/assets/js/3f77e242.f00ed186.js deleted file mode 100644 index 944e276c..00000000 --- a/assets/js/3f77e242.f00ed186.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[4713],{4863:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>p,frontMatter:()=>i,metadata:()=>l,toc:()=>d});var s=t(4848),o=t(8453);const i={sidebar_position:3,title:"Component"},r="Component",l={id:"usage/component",title:"Component",description:"React Native Styled System does not create basic components internally.",source:"@site/docs/usage/component.mdx",sourceDirName:"usage",slug:"/usage/component",permalink:"/react-native-styled-system/docs/usage/component",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/usage/component.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"Component"},sidebar:"tutorialSidebar",previous:{title:"Configuration",permalink:"/react-native-styled-system/docs/usage/configuration"},next:{title:"Text & Typography",permalink:"/react-native-styled-system/docs/usage/text"}},c={},d=[{value:"StyledView example",id:"styledview-example",level:2},{value:"Example of refactoring an existing component",id:"example-of-refactoring-an-existing-component",level:2},{value:"Example without Props destruction",id:"example-without-props-destruction",level:2}];function a(e){const n={admonition:"admonition",code:"code",h1:"h1",h2:"h2",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h1,{id:"component",children:"Component"}),"\n",(0,s.jsx)(n.p,{children:"React Native Styled System does not create basic components internally."}),"\n",(0,s.jsx)(n.p,{children:"Instead, you can define the components that will use your theme directly with a simple and extensible API."}),"\n",(0,s.jsx)(n.p,{children:"The mainly used APIs are as follows."}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"useSx(hook)"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"SxProps(type)"})}),"\n"]}),"\n",(0,s.jsxs)(n.h2,{id:"styledview-example",children:[(0,s.jsx)(n.code,{children:"StyledView"})," example"]}),"\n",(0,s.jsxs)(n.p,{children:["Let\u2019s create a component that can use React Native\u2019s ",(0,s.jsx)(n.code,{children:"View"})," component like a Styled System."]}),"\n",(0,s.jsxs)(n.p,{children:["How to use the completed ",(0,s.jsx)(n.code,{children:"StyledView"})," component is as follows."]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{src:"https://raw.githubusercontent.com/mym0404/image-archive/master/202403131245340.png",alt:"image.png"})}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"\n \n \n \n \n \n\n"})}),"\n",(0,s.jsx)(n.p,{children:"It can be defined as follows:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="StyledView.tsx"',children:"import { forwardRef, Ref, PropsWithChildren } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { SxProps, useSx } from 'react-native-themed-styled-system';\n\ntype StyledViewProps = PropsWithChildren;\nconst StyledView = forwardRef((props: StyledViewProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n return ;\n});\n\nexport { StyledView };\nexport type { StyledViewProps };\n"})}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"useSx"})," is responsible for receiving ",(0,s.jsx)(n.code,{children:"SxProps"})," and converting it to ",(0,s.jsx)(n.code,{children:"ViewStyle"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["You can call the ",(0,s.jsx)(n.code,{children:"getStyle"})," function returned by ",(0,s.jsx)(n.code,{children:"useSx"})," and pass it to the ",(0,s.jsx)(n.code,{children:"style"})," prop of the desired view."]}),"\n",(0,s.jsxs)(n.admonition,{type:"warning",children:[(0,s.jsxs)(n.p,{children:["The prop type of a component containing the ",(0,s.jsx)(n.code,{children:"SxProps"})," type includes all the keys included in ",(0,s.jsx)(n.code,{children:"SxProps"}),"."]}),(0,s.jsxs)(n.p,{children:["Therefore, if all props from the parent are passed through object destruction like in the existing ",(0,s.jsx)(n.code,{children:"{...props}"}),", the keys do not overlap.\nYou need to be careful not to do so."]}),(0,s.jsxs)(n.p,{children:["Also, when using ",(0,s.jsx)(n.code,{children:"props"})," as is, it must always come before ",(0,s.jsx)(n.code,{children:"style"})," so as not to overwrite the ",(0,s.jsx)(n.code,{children:"style"})," of ",(0,s.jsx)(n.code,{children:"getStyle()"}),"."]}),(0,s.jsxs)(n.p,{children:["To prevent this, you can use ",(0,s.jsx)(n.code,{children:"filteredProps"})," in the return value of ",(0,s.jsx)(n.code,{children:"useSx"}),"."]}),(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"filteredProps"})," represents a new prop that filters all style-related fields such as ",(0,s.jsx)(n.code,{children:"style"}),", ",(0,s.jsx)(n.code,{children:"sx"}),", ",(0,s.jsx)(n.code,{children:"w"}),", and ",(0,s.jsx)(n.code,{children:"width"}),"."]})]}),"\n",(0,s.jsx)(n.h2,{id:"example-of-refactoring-an-existing-component",children:"Example of refactoring an existing component"}),"\n",(0,s.jsx)(n.p,{children:"Let's look at how to refactor existing components as follows."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n};\nconst ExistComponent = ({\n style,\n title,\n body,\n}: Props) => {\n return (\n \n...\n"})}),"\n",(0,s.jsx)(n.p,{children:"This changes to:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"type Props = {\n style?: StyleProp;\n title?: string;\n body?: string;\n//highlight-next-line\n} & SxProps;\nconst ScreenErrorFallback = (props: Props) => {\n//highlight-next-line\n const { title, body } = props;\n//highlight-next-line\n const { getStyle } = useSx(props);\n const getSxStyle = useSxStyle();\n return (\n \n"})}),"\n",(0,s.jsx)(n.p,{children:"There are a few things to keep in mind."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"useSx"})," includes ",(0,s.jsx)(n.code,{children:"props.style"})," in the automatically created style output.\nThere is no need to add ",(0,s.jsx)(n.code,{children:"style"})," as a prop to ",(0,s.jsx)(n.code,{children:"style"})," of ",(0,s.jsx)(n.code,{children:"View"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:["Always pass all ",(0,s.jsx)(n.code,{children:"props"})," objects themselves to ",(0,s.jsx)(n.code,{children:"useSx"})," to avoid missing any properties. ",(0,s.jsx)(n.code,{children:"useSx"}),"\nProperties that are not used internally are ignored and not changed."]}),"\n",(0,s.jsxs)(n.li,{children:["Fixed style overwriting ",(0,s.jsx)(n.code,{children:"props"})," can be applied with ",(0,s.jsx)(n.code,{children:"getSxStyle"}),"."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"center"})," is a shortcut for ",(0,s.jsx)(n.code,{children:"justifyContent: center"}),", ",(0,s.jsx)(n.code,{children:"alignItems: center"}),"."]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"example-without-props-destruction",children:"Example without Props destruction"}),"\n",(0,s.jsxs)(n.p,{children:["If you need a style object that can control multiple views in a component's props or do not want props destruction,\nYou can define a component using the ",(0,s.jsx)(n.code,{children:"sx"})," prop as follows."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",metastring:'title="StyledScrollView.tsx"',children:"import { PropsWithChildren, forwardRef, Ref } from 'react';\nimport { ScrollViewProps, ScrollView } from 'react-native';\nimport { SxProps, useSx } from 'react-native-themed-styled-system';\n\ntype StyledScrollViewProps = PropsWithChildren<\n {\n contentContainerSx?: SxProps;\n } & Omit &\n SxProps\n>;\nconst StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);\n return (\n \n );\n});\n\nexport { StyledScrollView };\nexport type { StyledScrollViewProps };\n"})}),"\n",(0,s.jsxs)(n.p,{children:["This is a redefinition of ",(0,s.jsx)(n.code,{children:"ScrollView"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["In addition to ",(0,s.jsx)(n.code,{children:"style"}),", ",(0,s.jsx)(n.code,{children:"ScrollView"})," has one more style prop called ",(0,s.jsx)(n.code,{children:"contentContainerStyle"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["Therefore, it is accepted as a field called ",(0,s.jsx)(n.code,{children:"contentContainerSx"})," as a ",(0,s.jsx)(n.code,{children:"SxProps"})," type, and the ",(0,s.jsx)(n.code,{children:"contentContainerStyle"})," of the original ",(0,s.jsx)(n.code,{children:"ScrollViewProps"})," is created using ",(0,s.jsx)(n.code,{children:"Omit"}),".\nBe prepared for any possible bugs."]}),"\n",(0,s.jsx)(n.admonition,{type:"info",children:(0,s.jsxs)(n.p,{children:["I still feel like there is a lot of code that needs to be written in this example, so I recommend improving it to a simpler Helper API.\nWe also plan to support several props of ",(0,s.jsx)(n.code,{children:"ScrollView"})," separately."]})})]})}function p(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>l});var s=t(6540);const o={},i=s.createContext(o);function r(e){const n=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/456f6c74.732ab452.js b/assets/js/456f6c74.732ab452.js new file mode 100644 index 00000000..590ab0bb --- /dev/null +++ b/assets/js/456f6c74.732ab452.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[1958],{6343:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>m,frontMatter:()=>o,metadata:()=>i,toc:()=>d});var a=n(4848),r=n(8453),s=n(1470),l=n(9365);const o={sidebar_position:1},u="Installiation",i={id:"usage/install",title:"Installiation",description:"Installiation step",source:"@site/docs/usage/install.mdx",sourceDirName:"usage",slug:"/usage/install",permalink:"/react-native-styled-system/docs/usage/install",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/usage/install.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Usage",permalink:"/react-native-styled-system/docs/category/usage"},next:{title:"Configuration",permalink:"/react-native-styled-system/docs/usage/configuration"}},c={},d=[];function p(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h1,{id:"installiation",children:"Installiation"}),"\n",(0,a.jsx)(t.p,{children:"Installiation step"}),"\n",(0,a.jsxs)(s.A,{children:[(0,a.jsx)(l.A,{value:"npm",label:"npm",default:!0,children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-sh",children:"npm install @react-native-styled-system/core\n"})})}),(0,a.jsx)(l.A,{value:"yarn",label:"yarn",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-sh",children:"yarn add @react-native-styled-system/core\n"})})})]})]})}function m(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var a=n(4164);const r={tabItem:"tabItem_Ymn6"};var s=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>j});var a=n(6540),r=n(4164),s=n(3104),l=n(6347),o=n(205),u=n(7485),i=n(1682),c=n(9466);function d(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,a.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:a,default:r}}=e;return{value:t,label:n,attributes:a,default:r}}))}(n);return function(e){const t=(0,i.X)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,u.aZ)(s),(0,a.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(r.location.search);t.set(s,e),r.replace({...r.location,search:t.toString()})}),[s,r])]}function b(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,s=p(e),[l,u]=(0,a.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const a=n.find((e=>e.default))??n[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:t,tabValues:s}))),[i,d]=f({queryString:n,groupId:r}),[b,h]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,s]=(0,c.Dv)(n);return[r,(0,a.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:r}),v=(()=>{const e=i??b;return m({value:e,tabValues:s})?e:null})();(0,o.A)((()=>{v&&u(v)}),[v]);return{selectedValue:l,selectValue:(0,a.useCallback)((e=>{if(!m({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);u(e),d(e),h(e)}),[d,h,s]),tabValues:s}}var h=n(2303);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=n(4848);function y(e){let{className:t,block:n,selectedValue:a,selectValue:l,tabValues:o}=e;const u=[],{blockElementScrollPositionUntilNextRender:i}=(0,s.a_)(),c=e=>{const t=e.currentTarget,n=u.indexOf(t),r=o[n].value;r!==a&&(i(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=u.indexOf(e.currentTarget)+1;t=u[n]??u[0];break}case"ArrowLeft":{const n=u.indexOf(e.currentTarget)-1;t=u[n]??u[u.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:s}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:a===t?0:-1,"aria-selected":a===t,ref:e=>u.push(e),onKeyDown:d,onClick:c,...s,className:(0,r.A)("tabs__item",v.tabItem,s?.className,{"tabs__item--active":a===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const s=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===r));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function w(e){const t=b(e);return(0,g.jsxs)("div",{className:(0,r.A)("tabs-container",v.tabList),children:[(0,g.jsx)(y,{...e,...t}),(0,g.jsx)(x,{...e,...t})]})}function j(e){const t=(0,h.A)();return(0,g.jsx)(w,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var a=n(6540);const r={},s=a.createContext(r);function l(e){const t=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),a.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/456f6c74.c5f7cad6.js b/assets/js/456f6c74.c5f7cad6.js deleted file mode 100644 index d2c75492..00000000 --- a/assets/js/456f6c74.c5f7cad6.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[1958],{6343:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>p,frontMatter:()=>o,metadata:()=>i,toc:()=>d});var a=n(4848),r=n(8453),s=n(1470),l=n(9365);const o={sidebar_position:1},u="Installiation",i={id:"usage/install",title:"Installiation",description:"Installiation step",source:"@site/docs/usage/install.mdx",sourceDirName:"usage",slug:"/usage/install",permalink:"/react-native-styled-system/docs/usage/install",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/usage/install.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Usage",permalink:"/react-native-styled-system/docs/category/usage"},next:{title:"Configuration",permalink:"/react-native-styled-system/docs/usage/configuration"}},c={},d=[];function m(e){const t={code:"code",h1:"h1",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h1,{id:"installiation",children:"Installiation"}),"\n",(0,a.jsx)(t.p,{children:"Installiation step"}),"\n",(0,a.jsxs)(s.A,{children:[(0,a.jsx)(l.A,{value:"npm",label:"npm",default:!0,children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-sh",children:"npm install react-native-themed-styled-system\n"})})}),(0,a.jsx)(l.A,{value:"yarn",label:"yarn",children:(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-sh",children:"yarn add react-native-themed-styled-system\n"})})})]})]})}function p(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var a=n(4164);const r={tabItem:"tabItem_Ymn6"};var s=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.A)(r.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>j});var a=n(6540),r=n(4164),s=n(3104),l=n(6347),o=n(205),u=n(7485),i=n(1682),c=n(9466);function d(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function m(e){const{values:t,children:n}=e;return(0,a.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:a,default:r}}=e;return{value:t,label:n,attributes:a,default:r}}))}(n);return function(e){const t=(0,i.X)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function f(e){let{queryString:t=!1,groupId:n}=e;const r=(0,l.W6)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,u.aZ)(s),(0,a.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(r.location.search);t.set(s,e),r.replace({...r.location,search:t.toString()})}),[s,r])]}function h(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,s=m(e),[l,u]=(0,a.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const a=n.find((e=>e.default))??n[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:t,tabValues:s}))),[i,d]=f({queryString:n,groupId:r}),[h,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,s]=(0,c.Dv)(n);return[r,(0,a.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:r}),v=(()=>{const e=i??h;return p({value:e,tabValues:s})?e:null})();(0,o.A)((()=>{v&&u(v)}),[v]);return{selectedValue:l,selectValue:(0,a.useCallback)((e=>{if(!p({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);u(e),d(e),b(e)}),[d,b,s]),tabValues:s}}var b=n(2303);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=n(4848);function y(e){let{className:t,block:n,selectedValue:a,selectValue:l,tabValues:o}=e;const u=[],{blockElementScrollPositionUntilNextRender:i}=(0,s.a_)(),c=e=>{const t=e.currentTarget,n=u.indexOf(t),r=o[n].value;r!==a&&(i(t),l(r))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=u.indexOf(e.currentTarget)+1;t=u[n]??u[0];break}case"ArrowLeft":{const n=u.indexOf(e.currentTarget)-1;t=u[n]??u[u.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:s}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:a===t?0:-1,"aria-selected":a===t,ref:e=>u.push(e),onKeyDown:d,onClick:c,...s,className:(0,r.A)("tabs__item",v.tabItem,s?.className,{"tabs__item--active":a===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const s=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===r));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function w(e){const t=h(e);return(0,g.jsxs)("div",{className:(0,r.A)("tabs-container",v.tabList),children:[(0,g.jsx)(y,{...e,...t}),(0,g.jsx)(x,{...e,...t})]})}function j(e){const t=(0,b.A)();return(0,g.jsx)(w,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>o});var a=n(6540);const r={},s=a.createContext(r);function l(e){const t=a.useContext(s);return a.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),a.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7c4bd0f8.28ea651f.js b/assets/js/7c4bd0f8.a7dac0fa.js similarity index 60% rename from assets/js/7c4bd0f8.28ea651f.js rename to assets/js/7c4bd0f8.a7dac0fa.js index 22976637..dfeb1459 100644 --- a/assets/js/7c4bd0f8.28ea651f.js +++ b/assets/js/7c4bd0f8.a7dac0fa.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[6985],{3614:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>m,frontMatter:()=>r,metadata:()=>c,toc:()=>a});var s=n(4848),o=n(8453);const r={sidebar_position:3,title:"Txt"},i=void 0,c={id:"example-components/txt",title:"Txt",description:"",source:"@site/docs/example-components/txt.mdx",sourceDirName:"example-components",slug:"/example-components/txt",permalink:"/react-native-styled-system/docs/example-components/txt",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/example-components/txt.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"Txt"},sidebar:"tutorialSidebar",previous:{title:"StyledScrollView",permalink:"/react-native-styled-system/docs/example-components/styled-scroll-view"},next:{title:"StyledImage",permalink:"/react-native-styled-system/docs/example-components/styled-image"}},p={},a=[];function l(e){const t={code:"code",pre:"pre",...(0,o.R)(),...e.components};return(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",metastring:"title='Txt.tsx'",children:"import { Text, TextProps } from 'react-native';\nimport { TextSxProps, useSx } from 'react-native-themed-styled-system';\n\ntype TxtProps = {} & TextSxProps & TextProps;\nconst Txt = (props: TxtProps) => {\n const { getStyle, filteredProps } = useSx(props, { styleType: 'TextStyle' });\n return ;\n};\n\nexport { Txt };\nexport type { TxtProps };\n"})})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[6985],{3614:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>i,default:()=>m,frontMatter:()=>r,metadata:()=>c,toc:()=>a});var s=n(4848),o=n(8453);const r={sidebar_position:3,title:"Txt"},i=void 0,c={id:"example-components/txt",title:"Txt",description:"",source:"@site/docs/example-components/txt.mdx",sourceDirName:"example-components",slug:"/example-components/txt",permalink:"/react-native-styled-system/docs/example-components/txt",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/example-components/txt.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"Txt"},sidebar:"tutorialSidebar",previous:{title:"StyledScrollView",permalink:"/react-native-styled-system/docs/example-components/styled-scroll-view"},next:{title:"StyledImage",permalink:"/react-native-styled-system/docs/example-components/styled-image"}},p={},a=[];function l(e){const t={code:"code",pre:"pre",...(0,o.R)(),...e.components};return(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",metastring:"title='Txt.tsx'",children:"import { Text, TextProps } from 'react-native';\nimport { TextSxProps, useSx } from '@react-native-styled-system/core';\n\ntype TxtProps = {} & TextSxProps & TextProps;\nconst Txt = (props: TxtProps) => {\n const { getStyle, filteredProps } = useSx(props, { styleType: 'TextStyle' });\n return ;\n};\n\nexport { Txt };\nexport type { TxtProps };\n"})})}function m(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>c});var s=n(6540);const o={},r=s.createContext(o);function i(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9d7ed022.bed6f356.js b/assets/js/9d7ed022.bed6f356.js deleted file mode 100644 index 98158b2b..00000000 --- a/assets/js/9d7ed022.bed6f356.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[5104],{3473:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>o,default:()=>h,frontMatter:()=>i,metadata:()=>c,toc:()=>d});var r=n(4848),a=n(8453),s=n(1470),l=n(9365);const i={sidebar_position:7,title:"TypeScript"},o="TypeScript",c={id:"usage/typescript",title:"TypeScript",description:"React Native Styled System aims for type-safe use.",source:"@site/docs/usage/typescript.mdx",sourceDirName:"usage",slug:"/usage/typescript",permalink:"/react-native-styled-system/docs/usage/typescript",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/usage/typescript.mdx",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7,title:"TypeScript"},sidebar:"tutorialSidebar",previous:{title:"Pass styles and parsing priorities",permalink:"/react-native-styled-system/docs/usage/style-parsing"},next:{title:"Advanced",permalink:"/react-native-styled-system/docs/category/advanced"}},u={},d=[{value:"How it works",id:"how-it-works",level:2}];function p(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"typescript",children:"TypeScript"}),"\n",(0,r.jsx)(t.p,{children:"React Native Styled System aims for type-safe use."}),"\n",(0,r.jsxs)(t.p,{children:["Please enter the path to the module where ",(0,r.jsx)(t.code,{children:"ThemedDict"})," is ",(0,r.jsx)(t.code,{children:"default exported"})," as an argument to the command."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-shell",children:"react-native-themed-styled-system src/AppTheme.ts\n"})}),"\n",(0,r.jsxs)(t.p,{children:["More convenient use is possible with ",(0,r.jsx)(t.code,{children:"scripts"})," in ",(0,r.jsx)(t.code,{children:"package.json"}),"."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n ...\n "scripts": {\n "theme:gen": "react-native-themed-styled-system src/AppTheme.ts"\n }\n}\n'})}),"\n",(0,r.jsxs)(s.A,{children:[(0,r.jsx)(l.A,{value:"npm",label:"npm",default:!0,children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-sh",children:"npm run theme:gen\n"})})}),(0,r.jsx)(l.A,{value:"yarn",label:"yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-sh",children:"yarn theme:gen\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsx)(t.p,{children:"When changing the version of a package or installing a new one, you must always execute the type creation command."}),(0,r.jsxs)(t.p,{children:["We recommend using the ",(0,r.jsx)(t.code,{children:"postinstall"})," script so that it can operate without problems in CI as follows."]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n "postinstall": "yarn theme:gen"\n}\n'})})]}),"\n",(0,r.jsx)(t.h2,{id:"how-it-works",children:"How it works"}),"\n",(0,r.jsxs)(t.p,{children:["used internally in the package\nFile in the path ",(0,r.jsx)(t.code,{children:"node_modules/react-native-themed-styled-system/lib/typescript/@types/ThemedTypings.d.ts"}),"\nRegenerate it yourself."]}),"\n",(0,r.jsx)(t.p,{children:"Then it is created as follows:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="node_modules/react-native-themed-styled-system/lib/typescript/@types/ThemedTypings.d.ts"',children:"import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';\n\nexport interface ThemedTypings {\n colors:\n | (ColorsValue & {})\n | 'white'\n | 'black'\n | 'transparent'\n | 'gray50'\n /* ... */\n | 'blue900';\n radii: (RadiiValue & {}) | (`${number}` & {}) | (`${any}px` & {}) | '1' | '2' | 'sm' | 'md';\n sizes:\n | (SizesValue & {})\n | (`${number}` & {})\n | (`${any}px` & {})\n | '0'\n /* ... */\n | 'px'\n | '0.5';\n space:\n | (SpaceValue & {})\n | (`${number}` & {})\n | (`${any}px` & {})\n | '0'\n /* ... */\n | '0.5'\n | '-0.5';\n typography: 'h1';\n}\n\n"})})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const a={tabItem:"tabItem_Ymn6"};var s=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.A)(a.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),a=n(4164),s=n(3104),l=n(6347),i=n(205),o=n(7485),c=n(1682),u=n(9466);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:a}}=e;return{value:t,label:n,attributes:r,default:a}}))}(n);return function(e){const t=(0,c.X)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const a=(0,l.W6)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(s),(0,r.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(a.location.search);t.set(s,e),a.replace({...a.location,search:t.toString()})}),[s,a])]}function y(e){const{defaultValue:t,queryString:n=!1,groupId:a}=e,s=p(e),[l,o]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:s}))),[c,d]=m({queryString:n,groupId:a}),[y,f]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[a,s]=(0,u.Dv)(n);return[a,(0,r.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:a}),b=(()=>{const e=c??y;return h({value:e,tabValues:s})?e:null})();(0,i.A)((()=>{b&&o(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!h({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),f(e)}),[d,f,s]),tabValues:s}}var f=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=n(4848);function v(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,s.a_)(),u=e=>{const t=e.currentTarget,n=o.indexOf(t),a=i[n].value;a!==r&&(c(t),l(a))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:s}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>o.push(e),onKeyDown:d,onClick:u,...s,className:(0,a.A)("tabs__item",b.tabItem,s?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const s=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function j(e){const t=y(e);return(0,g.jsxs)("div",{className:(0,a.A)("tabs-container",b.tabList),children:[(0,g.jsx)(v,{...e,...t}),(0,g.jsx)(x,{...e,...t})]})}function w(e){const t=(0,f.A)();return(0,g.jsx)(j,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var r=n(6540);const a={},s=r.createContext(a);function l(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/9d7ed022.fd70fef4.js b/assets/js/9d7ed022.fd70fef4.js new file mode 100644 index 00000000..18831fd5 --- /dev/null +++ b/assets/js/9d7ed022.fd70fef4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[5104],{3473:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>o,default:()=>h,frontMatter:()=>i,metadata:()=>c,toc:()=>d});var r=n(4848),a=n(8453),s=n(1470),l=n(9365);const i={sidebar_position:7,title:"TypeScript"},o="TypeScript",c={id:"usage/typescript",title:"TypeScript",description:"React Native Styled System aims for type-safe use.",source:"@site/docs/usage/typescript.mdx",sourceDirName:"usage",slug:"/usage/typescript",permalink:"/react-native-styled-system/docs/usage/typescript",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/usage/typescript.mdx",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7,title:"TypeScript"},sidebar:"tutorialSidebar",previous:{title:"Pass styles and parsing priorities",permalink:"/react-native-styled-system/docs/usage/style-parsing"},next:{title:"Advanced",permalink:"/react-native-styled-system/docs/category/advanced"}},u={},d=[{value:"How it works",id:"how-it-works",level:2}];function p(e){const t={admonition:"admonition",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"typescript",children:"TypeScript"}),"\n",(0,r.jsx)(t.p,{children:"React Native Styled System aims for type-safe use."}),"\n",(0,r.jsxs)(t.p,{children:["Please enter the path to the module where ",(0,r.jsx)(t.code,{children:"ThemedDict"})," is ",(0,r.jsx)(t.code,{children:"default exported"})," as an argument to the command."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-shell",children:"@react-native-styled-system/core src/AppTheme.ts\n"})}),"\n",(0,r.jsxs)(t.p,{children:["More convenient use is possible with ",(0,r.jsx)(t.code,{children:"scripts"})," in ",(0,r.jsx)(t.code,{children:"package.json"}),"."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n ...\n "scripts": {\n "theme:gen": "@react-native-styled-system/core src/AppTheme.ts"\n }\n}\n'})}),"\n",(0,r.jsxs)(s.A,{children:[(0,r.jsx)(l.A,{value:"npm",label:"npm",default:!0,children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-sh",children:"npm run theme:gen\n"})})}),(0,r.jsx)(l.A,{value:"yarn",label:"yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-sh",children:"yarn theme:gen\n"})})})]}),"\n",(0,r.jsxs)(t.admonition,{type:"tip",children:[(0,r.jsx)(t.p,{children:"When changing the version of a package or installing a new one, you must always execute the type creation command."}),(0,r.jsxs)(t.p,{children:["We recommend using the ",(0,r.jsx)(t.code,{children:"postinstall"})," script so that it can operate without problems in CI as follows."]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-json",metastring:'title="package.json"',children:'{\n "postinstall": "yarn theme:gen"\n}\n'})})]}),"\n",(0,r.jsx)(t.h2,{id:"how-it-works",children:"How it works"}),"\n",(0,r.jsxs)(t.p,{children:["used internally in the package\nFile in the path ",(0,r.jsx)(t.code,{children:"node_modules/@react-native-styled-system/core/lib/typescript/@types/ThemedTypings.d.ts"}),"\nRegenerate it yourself."]}),"\n",(0,r.jsx)(t.p,{children:"Then it is created as follows:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="node_modules/@react-native-styled-system/core/lib/typescript/@types/ThemedTypings.d.ts"',children:"import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';\n\nexport interface ThemedTypings {\n colors:\n | (ColorsValue & {})\n | 'white'\n | 'black'\n | 'transparent'\n | 'gray50'\n /* ... */\n | 'blue900';\n radii: (RadiiValue & {}) | (`${number}` & {}) | (`${any}px` & {}) | '1' | '2' | 'sm' | 'md';\n sizes:\n | (SizesValue & {})\n | (`${number}` & {})\n | (`${any}px` & {})\n | '0'\n /* ... */\n | 'px'\n | '0.5';\n space:\n | (SpaceValue & {})\n | (`${number}` & {})\n | (`${any}px` & {})\n | '0'\n /* ... */\n | '0.5'\n | '-0.5';\n typography: 'h1';\n}\n\n"})})]})}function h(e={}){const{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},9365:(e,t,n)=>{n.d(t,{A:()=>l});n(6540);var r=n(4164);const a={tabItem:"tabItem_Ymn6"};var s=n(4848);function l(e){let{children:t,hidden:n,className:l}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.A)(a.tabItem,l),hidden:n,children:t})}},1470:(e,t,n)=>{n.d(t,{A:()=>w});var r=n(6540),a=n(4164),s=n(3104),l=n(6347),i=n(205),o=n(7485),c=n(1682),u=n(9466);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:a}}=e;return{value:t,label:n,attributes:r,default:a}}))}(n);return function(e){const t=(0,c.X)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function h(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const a=(0,l.W6)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,o.aZ)(s),(0,r.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(a.location.search);t.set(s,e),a.replace({...a.location,search:t.toString()})}),[s,a])]}function y(e){const{defaultValue:t,queryString:n=!1,groupId:a}=e,s=p(e),[l,o]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:s}))),[c,d]=m({queryString:n,groupId:a}),[y,f]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[a,s]=(0,u.Dv)(n);return[a,(0,r.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:a}),b=(()=>{const e=c??y;return h({value:e,tabValues:s})?e:null})();(0,i.A)((()=>{b&&o(b)}),[b]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!h({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);o(e),d(e),f(e)}),[d,f,s]),tabValues:s}}var f=n(2303);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=n(4848);function v(e){let{className:t,block:n,selectedValue:r,selectValue:l,tabValues:i}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,s.a_)(),u=e=>{const t=e.currentTarget,n=o.indexOf(t),a=i[n].value;a!==r&&(c(t),l(a))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.A)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:s}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>o.push(e),onKeyDown:d,onClick:u,...s,className:(0,a.A)("tabs__item",b.tabItem,s?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const s=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function j(e){const t=y(e);return(0,g.jsxs)("div",{className:(0,a.A)("tabs-container",b.tabList),children:[(0,g.jsx)(v,{...e,...t}),(0,g.jsx)(x,{...e,...t})]})}function w(e){const t=(0,f.A)();return(0,g.jsx)(j,{...e,children:d(e.children)},String(t))}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var r=n(6540);const a={},s=r.createContext(a);function l(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d18133cd.51c20242.js b/assets/js/d18133cd.ad65f7b1.js similarity index 53% rename from assets/js/d18133cd.51c20242.js rename to assets/js/d18133cd.ad65f7b1.js index f93d371f..372f081b 100644 --- a/assets/js/d18133cd.51c20242.js +++ b/assets/js/d18133cd.ad65f7b1.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[3824],{7377:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>s,metadata:()=>i,toc:()=>a});var o=n(4848),r=n(8453);const s={sidebar_position:2,title:"StyledScrollView"},l=void 0,i={id:"example-components/styled-scroll-view",title:"StyledScrollView",description:"",source:"@site/docs/example-components/styled-scroll-view.mdx",sourceDirName:"example-components",slug:"/example-components/styled-scroll-view",permalink:"/react-native-styled-system/docs/example-components/styled-scroll-view",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/example-components/styled-scroll-view.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2,title:"StyledScrollView"},sidebar:"tutorialSidebar",previous:{title:"StyledView",permalink:"/react-native-styled-system/docs/example-components/styled-view"},next:{title:"Txt",permalink:"/react-native-styled-system/docs/example-components/txt"}},c={},a=[];function p(e){const t={code:"code",pre:"pre",...(0,r.R)(),...e.components};return(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:"title='StyledScrollView.tsx'",children:"import { PropsWithChildren, forwardRef, Ref } from 'react';\nimport { ScrollViewProps, ScrollView } from 'react-native';\nimport { SxProps, useSx } from 'react-native-themed-styled-system';\n\ntype StyledScrollViewProps = PropsWithChildren<\n {\n contentContainerSx?: SxProps;\n } & Omit &\n SxProps\n>;\nconst StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);\n return (\n \n );\n});\n\nexport { StyledScrollView };\nexport type { StyledScrollViewProps };\n"})})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var o=n(6540);const r={},s=o.createContext(r);function l(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[3824],{7377:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>d,frontMatter:()=>s,metadata:()=>i,toc:()=>a});var o=n(4848),r=n(8453);const s={sidebar_position:2,title:"StyledScrollView"},l=void 0,i={id:"example-components/styled-scroll-view",title:"StyledScrollView",description:"",source:"@site/docs/example-components/styled-scroll-view.mdx",sourceDirName:"example-components",slug:"/example-components/styled-scroll-view",permalink:"/react-native-styled-system/docs/example-components/styled-scroll-view",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/example-components/styled-scroll-view.mdx",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2,title:"StyledScrollView"},sidebar:"tutorialSidebar",previous:{title:"StyledView",permalink:"/react-native-styled-system/docs/example-components/styled-view"},next:{title:"Txt",permalink:"/react-native-styled-system/docs/example-components/txt"}},c={},a=[];function p(e){const t={code:"code",pre:"pre",...(0,r.R)(),...e.components};return(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:"title='StyledScrollView.tsx'",children:"import { PropsWithChildren, forwardRef, Ref } from 'react';\nimport { ScrollViewProps, ScrollView } from 'react-native';\nimport { SxProps, useSx } from '@react-native-styled-system/core';\n\ntype StyledScrollViewProps = PropsWithChildren<\n {\n contentContainerSx?: SxProps;\n } & Omit &\n SxProps\n>;\nconst StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);\n return (\n \n );\n});\n\nexport { StyledScrollView };\nexport type { StyledScrollViewProps };\n"})})}function d(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>l,x:()=>i});var o=n(6540);const r={},s=o.createContext(r);function l(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/e0acf095.f0f4aef2.js b/assets/js/e0acf095.d09d6f56.js similarity index 61% rename from assets/js/e0acf095.f0f4aef2.js rename to assets/js/e0acf095.d09d6f56.js index a3b799b0..a015e0db 100644 --- a/assets/js/e0acf095.f0f4aef2.js +++ b/assets/js/e0acf095.d09d6f56.js @@ -1 +1 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[6840],{3403:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>l,toc:()=>p});var o=n(4848),s=n(8453);const r={sidebar_position:1,title:"StyledView"},i=void 0,l={id:"example-components/styled-view",title:"StyledView",description:"",source:"@site/docs/example-components/styled-view.mdx",sourceDirName:"example-components",slug:"/example-components/styled-view",permalink:"/react-native-styled-system/docs/example-components/styled-view",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/example-components/styled-view.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1,title:"StyledView"},sidebar:"tutorialSidebar",previous:{title:"Example Components",permalink:"/react-native-styled-system/docs/category/example-components"},next:{title:"StyledScrollView",permalink:"/react-native-styled-system/docs/example-components/styled-scroll-view"}},c={},p=[];function a(e){const t={code:"code",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:"title='StyledView.tsx'",children:"import { forwardRef, Ref, PropsWithChildren } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { SxProps, useSx } from 'react-native-themed-styled-system';\n\ntype StyledViewProps = PropsWithChildren;\nconst StyledView = forwardRef((props: StyledViewProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n return ;\n});\n\nexport { StyledView };\nexport type { StyledViewProps };\n"})})}function d(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>l});var o=n(6540);const s={},r=o.createContext(s);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[6840],{3403:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>r,metadata:()=>l,toc:()=>p});var o=n(4848),s=n(8453);const r={sidebar_position:1,title:"StyledView"},i=void 0,l={id:"example-components/styled-view",title:"StyledView",description:"",source:"@site/docs/example-components/styled-view.mdx",sourceDirName:"example-components",slug:"/example-components/styled-view",permalink:"/react-native-styled-system/docs/example-components/styled-view",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/example-components/styled-view.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1,title:"StyledView"},sidebar:"tutorialSidebar",previous:{title:"Example Components",permalink:"/react-native-styled-system/docs/category/example-components"},next:{title:"StyledScrollView",permalink:"/react-native-styled-system/docs/example-components/styled-scroll-view"}},c={},p=[];function a(e){const t={code:"code",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:"title='StyledView.tsx'",children:"import { forwardRef, Ref, PropsWithChildren } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { SxProps, useSx } from '@react-native-styled-system/core';\n\ntype StyledViewProps = PropsWithChildren;\nconst StyledView = forwardRef((props: StyledViewProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n return ;\n});\n\nexport { StyledView };\nexport type { StyledViewProps };\n"})})}function d(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>i,x:()=>l});var o=n(6540);const s={},r=o.createContext(s);function i(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ecba3baa.84206564.js b/assets/js/ecba3baa.84206564.js new file mode 100644 index 00000000..c22a976d --- /dev/null +++ b/assets/js/ecba3baa.84206564.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[5049],{9269:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>a,default:()=>p,frontMatter:()=>o,metadata:()=>i,toc:()=>c});var r=n(4848),s=n(8453);const o={sidebar_position:4},a="StyledImage",i={id:"example-components/styled-image",title:"StyledImage",description:"",source:"@site/docs/example-components/styled-image.mdx",sourceDirName:"example-components",slug:"/example-components/styled-image",permalink:"/react-native-styled-system/docs/example-components/styled-image",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/example-components/styled-image.mdx",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Txt",permalink:"/react-native-styled-system/docs/example-components/txt"},next:{title:"StyledButton",permalink:"/react-native-styled-system/docs/example-components/styled-button"}},m={},c=[];function l(e){const t={code:"code",h1:"h1",pre:"pre",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{id:"styledimage",children:"StyledImage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:"title='StyledImage.tsx'",children:"import type { PropsWithChildren, Ref } from 'react';\nimport React, { forwardRef } from 'react';\nimport type { ImageProps, ImageStyle } from 'react-native';\nimport { Image } from 'react-native';\nimport type { SxProps } from '@react-native-styled-system/core';\nimport { useSx } from '@react-native-styled-system/core';\n\ntype StyledImageProps = PropsWithChildren;\n\nconst StyledImage = forwardRef((props: StyledImageProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n\n return ;\n});\n\nexport { StyledImage };\nexport type { StyledImageProps };\n"})})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>i});var r=n(6540);const s={},o=r.createContext(s);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/ecba3baa.e6dc0ac5.js b/assets/js/ecba3baa.e6dc0ac5.js deleted file mode 100644 index 43e0d190..00000000 --- a/assets/js/ecba3baa.e6dc0ac5.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkmy_website=self.webpackChunkmy_website||[]).push([[5049],{9269:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>i,contentTitle:()=>a,default:()=>c,frontMatter:()=>o,metadata:()=>m,toc:()=>l});var s=n(4848),r=n(8453);const o={sidebar_position:4},a="StyledImage",m={id:"example-components/styled-image",title:"StyledImage",description:"",source:"@site/docs/example-components/styled-image.mdx",sourceDirName:"example-components",slug:"/example-components/styled-image",permalink:"/react-native-styled-system/docs/example-components/styled-image",draft:!1,unlisted:!1,editUrl:"https://github.com/mj-studio-library/react-native-styled-system/tree/main/doc/docs/example-components/styled-image.mdx",tags:[],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Txt",permalink:"/react-native-styled-system/docs/example-components/txt"},next:{title:"StyledButton",permalink:"/react-native-styled-system/docs/example-components/styled-button"}},i={},l=[];function p(e){const t={code:"code",h1:"h1",pre:"pre",...(0,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"styledimage",children:"StyledImage"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-tsx",metastring:"title='StyledImage.tsx'",children:"import type { PropsWithChildren, Ref } from 'react';\nimport React, { forwardRef } from 'react';\nimport type { ImageProps, ImageStyle } from 'react-native';\nimport { Image } from 'react-native';\nimport type { SxProps } from 'react-native-themed-styled-system';\nimport { useSx } from 'react-native-themed-styled-system';\n\ntype StyledImageProps = PropsWithChildren;\n\nconst StyledImage = forwardRef((props: StyledImageProps, ref: Ref) => {\n const { getStyle, filteredProps } = useSx(props);\n\n return ;\n});\n\nexport { StyledImage };\nexport type { StyledImageProps };\n"})})]})}function c(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>a,x:()=>m});var s=n(6540);const r={},o=s.createContext(r);function a(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function m(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.8f674af3.js b/assets/js/runtime~main.01058979.js similarity index 91% rename from assets/js/runtime~main.8f674af3.js rename to assets/js/runtime~main.01058979.js index 15817d49..1721a110 100644 --- a/assets/js/runtime~main.8f674af3.js +++ b/assets/js/runtime~main.01058979.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,f,t,c,r={},b={};function d(e){var a=b[e];if(void 0!==a)return a.exports;var f=b[e]={id:e,loaded:!1,exports:{}};return r[e].call(f.exports,f,f.exports,d),f.loaded=!0,f.exports}d.m=r,d.c=b,e=[],d.O=(a,f,t,c)=>{if(!f){var r=1/0;for(i=0;i=c)&&Object.keys(d.O).every((e=>d.O[e](f[o])))?f.splice(o--,1):(b=!1,c0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[f,t,c]},d.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return d.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var c=Object.create(null);d.r(c);var r={};a=a||[null,f({}),f([]),f(f)];for(var b=2&t&&e;"object"==typeof b&&!~a.indexOf(b);b=f(b))Object.getOwnPropertyNames(b).forEach((a=>r[a]=()=>e[a]));return r.default=()=>e,d.d(c,r),c},d.d=(e,a)=>{for(var f in a)d.o(a,f)&&!d.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((a,f)=>(d.f[f](e,a),a)),[])),d.u=e=>"assets/js/"+({109:"490f117b",181:"8179186b",210:"d3412f58",287:"0012fc6f",322:"8e361a16",644:"6da8d679",664:"a0ae11a7",914:"1806c852",1109:"7f3f08e5",1138:"b240f726",1153:"b3b39bbe",1282:"d290f38e",1405:"ce6b1508",1580:"a5ee1a38",1958:"456f6c74",1972:"73664a40",2213:"93eabb04",2285:"c2cf6db2",2711:"9e4087bc",2762:"69dc3596",3249:"ccc49370",3471:"b9d8b179",3637:"489a8646",3694:"8717b14a",3824:"d18133cd",3854:"dfd14b97",4134:"393be207",4583:"1df93b7f",4656:"c84e8b96",4713:"3f77e242",4813:"6875c492",5049:"ecba3baa",5094:"70680c56",5104:"9d7ed022",5557:"d9f32620",6018:"f4f34a3a",6061:"1f391b9e",6532:"8bc1f667",6840:"e0acf095",6903:"f8409a7e",6969:"14eb3368",6985:"7c4bd0f8",7098:"a7bd4aaa",7316:"8b9508ed",7472:"814f3328",7643:"a6aa9e1f",7872:"26f20861",8136:"69d47c55",8209:"01a85c17",8401:"17896441",8581:"935f2afb",8609:"925b3f96",8737:"7661071f",8837:"329ec17f",9048:"a94703ab",9325:"59362658",9328:"e273c56f",9594:"0d8bbc11",9647:"5e95c892",9768:"2670b7fe",9851:"d80de2af"}[e]||e)+"."+{109:"fc1d6bb5",181:"c5c96ead",210:"2cb2b129",287:"e8e19f46",322:"20d9373b",644:"5eb72267",664:"3da77a24",914:"a43942bf",1109:"25bbbd82",1138:"1f80a8d4",1153:"5507198e",1282:"54e387d4",1405:"c3654b6c",1580:"6ddb625a",1958:"c5f7cad6",1972:"86cad248",2213:"12347dce",2237:"9f327e60",2285:"1ad24996",2711:"dfabb06b",2762:"a3e63ae4",3249:"e7a3b8d3",3471:"64b37ac0",3637:"ed4a9756",3694:"2385bde0",3824:"51c20242",3854:"38dd965b",4134:"8a4cb9d5",4583:"7f533c7b",4656:"5e39846c",4713:"f00ed186",4813:"ebebfc27",5049:"e6dc0ac5",5094:"4196beca",5104:"bed6f356",5533:"c717b762",5557:"43b98f4a",6018:"992b83c1",6061:"df3efc6a",6532:"0fbf2e4b",6840:"f0f4aef2",6903:"2847af06",6969:"4279be9b",6985:"28ea651f",7098:"ad7f231a",7316:"baa8df25",7472:"57a737d2",7643:"249e747a",7872:"5f4dfa73",8136:"836867f7",8209:"deb72329",8401:"307e8fbe",8581:"3c76929f",8609:"0adf63ab",8737:"32410eeb",8747:"a256fe95",8837:"80651d03",9048:"4183e27f",9325:"7280a542",9328:"7049f874",9594:"67a601da",9647:"d2840d6b",9768:"491e7bfd",9851:"3ddc0956"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),t={},c="my-website:",d.l=(e,a,f,r)=>{if(t[e])t[e].push(a);else{var b,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{b.onerror=b.onload=null,clearTimeout(s);var c=t[e];if(delete t[e],b.parentNode&&b.parentNode.removeChild(b),c&&c.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:b}),12e4);b.onerror=l.bind(null,b.onerror),b.onload=l.bind(null,b.onload),o&&document.head.appendChild(b)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/react-native-styled-system/",d.gca=function(e){return e={17896441:"8401",59362658:"9325","490f117b":"109","8179186b":"181",d3412f58:"210","0012fc6f":"287","8e361a16":"322","6da8d679":"644",a0ae11a7:"664","1806c852":"914","7f3f08e5":"1109",b240f726:"1138",b3b39bbe:"1153",d290f38e:"1282",ce6b1508:"1405",a5ee1a38:"1580","456f6c74":"1958","73664a40":"1972","93eabb04":"2213",c2cf6db2:"2285","9e4087bc":"2711","69dc3596":"2762",ccc49370:"3249",b9d8b179:"3471","489a8646":"3637","8717b14a":"3694",d18133cd:"3824",dfd14b97:"3854","393be207":"4134","1df93b7f":"4583",c84e8b96:"4656","3f77e242":"4713","6875c492":"4813",ecba3baa:"5049","70680c56":"5094","9d7ed022":"5104",d9f32620:"5557",f4f34a3a:"6018","1f391b9e":"6061","8bc1f667":"6532",e0acf095:"6840",f8409a7e:"6903","14eb3368":"6969","7c4bd0f8":"6985",a7bd4aaa:"7098","8b9508ed":"7316","814f3328":"7472",a6aa9e1f:"7643","26f20861":"7872","69d47c55":"8136","01a85c17":"8209","935f2afb":"8581","925b3f96":"8609","7661071f":"8737","329ec17f":"8837",a94703ab:"9048",e273c56f:"9328","0d8bbc11":"9594","5e95c892":"9647","2670b7fe":"9768",d80de2af:"9851"}[e]||e,d.p+d.u(e)},(()=>{var e={5354:0,1869:0};d.f.j=(a,f)=>{var t=d.o(e,a)?e[a]:void 0;if(0!==t)if(t)f.push(t[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var c=new Promise(((f,c)=>t=e[a]=[f,c]));f.push(t[2]=c);var r=d.p+d.u(a),b=new Error;d.l(r,(f=>{if(d.o(e,a)&&(0!==(t=e[a])&&(e[a]=void 0),t)){var c=f&&("load"===f.type?"missing":f.type),r=f&&f.target&&f.target.src;b.message="Loading chunk "+a+" failed.\n("+c+": "+r+")",b.name="ChunkLoadError",b.type=c,b.request=r,t[1](b)}}),"chunk-"+a,a)}},d.O.j=a=>0===e[a];var a=(a,f)=>{var t,c,r=f[0],b=f[1],o=f[2],n=0;if(r.some((a=>0!==e[a]))){for(t in b)d.o(b,t)&&(d.m[t]=b[t]);if(o)var i=o(d)}for(a&&a(f);n{"use strict";var e,a,f,t,c,r={},b={};function d(e){var a=b[e];if(void 0!==a)return a.exports;var f=b[e]={id:e,loaded:!1,exports:{}};return r[e].call(f.exports,f,f.exports,d),f.loaded=!0,f.exports}d.m=r,d.c=b,e=[],d.O=(a,f,t,c)=>{if(!f){var r=1/0;for(i=0;i=c)&&Object.keys(d.O).every((e=>d.O[e](f[o])))?f.splice(o--,1):(b=!1,c0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[f,t,c]},d.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return d.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var c=Object.create(null);d.r(c);var r={};a=a||[null,f({}),f([]),f(f)];for(var b=2&t&&e;"object"==typeof b&&!~a.indexOf(b);b=f(b))Object.getOwnPropertyNames(b).forEach((a=>r[a]=()=>e[a]));return r.default=()=>e,d.d(c,r),c},d.d=(e,a)=>{for(var f in a)d.o(a,f)&&!d.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((a,f)=>(d.f[f](e,a),a)),[])),d.u=e=>"assets/js/"+({109:"490f117b",181:"8179186b",210:"d3412f58",287:"0012fc6f",322:"8e361a16",644:"6da8d679",664:"a0ae11a7",914:"1806c852",1109:"7f3f08e5",1138:"b240f726",1153:"b3b39bbe",1282:"d290f38e",1405:"ce6b1508",1580:"a5ee1a38",1958:"456f6c74",1972:"73664a40",2213:"93eabb04",2285:"c2cf6db2",2711:"9e4087bc",2762:"69dc3596",3249:"ccc49370",3471:"b9d8b179",3637:"489a8646",3694:"8717b14a",3824:"d18133cd",3854:"dfd14b97",4134:"393be207",4583:"1df93b7f",4656:"c84e8b96",4713:"3f77e242",4813:"6875c492",5049:"ecba3baa",5094:"70680c56",5104:"9d7ed022",5557:"d9f32620",6018:"f4f34a3a",6061:"1f391b9e",6532:"8bc1f667",6840:"e0acf095",6903:"f8409a7e",6969:"14eb3368",6985:"7c4bd0f8",7098:"a7bd4aaa",7316:"8b9508ed",7472:"814f3328",7643:"a6aa9e1f",7872:"26f20861",8136:"69d47c55",8209:"01a85c17",8401:"17896441",8581:"935f2afb",8609:"925b3f96",8737:"7661071f",8837:"329ec17f",9048:"a94703ab",9325:"59362658",9328:"e273c56f",9594:"0d8bbc11",9647:"5e95c892",9768:"2670b7fe",9851:"d80de2af"}[e]||e)+"."+{109:"fc1d6bb5",181:"c5c96ead",210:"2cb2b129",287:"927bde47",322:"20d9373b",644:"5eb72267",664:"3da77a24",914:"a43942bf",1109:"25bbbd82",1138:"1f80a8d4",1153:"5507198e",1282:"54e387d4",1405:"c3654b6c",1580:"6ddb625a",1958:"732ab452",1972:"86cad248",2213:"12347dce",2237:"9f327e60",2285:"1ad24996",2711:"dfabb06b",2762:"a3e63ae4",3249:"e7a3b8d3",3471:"64b37ac0",3637:"ed4a9756",3694:"2385bde0",3824:"ad65f7b1",3854:"38dd965b",4134:"8a4cb9d5",4583:"adc5a1dc",4656:"5e39846c",4713:"bcd96e96",4813:"ebebfc27",5049:"84206564",5094:"4196beca",5104:"fd70fef4",5533:"c717b762",5557:"43b98f4a",6018:"992b83c1",6061:"df3efc6a",6532:"0fbf2e4b",6840:"d09d6f56",6903:"2847af06",6969:"4279be9b",6985:"a7dac0fa",7098:"ad7f231a",7316:"baa8df25",7472:"57a737d2",7643:"249e747a",7872:"8558d24c",8136:"836867f7",8209:"deb72329",8401:"307e8fbe",8581:"3c76929f",8609:"0adf63ab",8737:"32410eeb",8747:"a256fe95",8837:"80651d03",9048:"4183e27f",9325:"7280a542",9328:"7049f874",9594:"67a601da",9647:"d2840d6b",9768:"491e7bfd",9851:"3ddc0956"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),t={},c="my-website:",d.l=(e,a,f,r)=>{if(t[e])t[e].push(a);else{var b,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{b.onerror=b.onload=null,clearTimeout(s);var c=t[e];if(delete t[e],b.parentNode&&b.parentNode.removeChild(b),c&&c.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:b}),12e4);b.onerror=l.bind(null,b.onerror),b.onload=l.bind(null,b.onload),o&&document.head.appendChild(b)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/react-native-styled-system/",d.gca=function(e){return e={17896441:"8401",59362658:"9325","490f117b":"109","8179186b":"181",d3412f58:"210","0012fc6f":"287","8e361a16":"322","6da8d679":"644",a0ae11a7:"664","1806c852":"914","7f3f08e5":"1109",b240f726:"1138",b3b39bbe:"1153",d290f38e:"1282",ce6b1508:"1405",a5ee1a38:"1580","456f6c74":"1958","73664a40":"1972","93eabb04":"2213",c2cf6db2:"2285","9e4087bc":"2711","69dc3596":"2762",ccc49370:"3249",b9d8b179:"3471","489a8646":"3637","8717b14a":"3694",d18133cd:"3824",dfd14b97:"3854","393be207":"4134","1df93b7f":"4583",c84e8b96:"4656","3f77e242":"4713","6875c492":"4813",ecba3baa:"5049","70680c56":"5094","9d7ed022":"5104",d9f32620:"5557",f4f34a3a:"6018","1f391b9e":"6061","8bc1f667":"6532",e0acf095:"6840",f8409a7e:"6903","14eb3368":"6969","7c4bd0f8":"6985",a7bd4aaa:"7098","8b9508ed":"7316","814f3328":"7472",a6aa9e1f:"7643","26f20861":"7872","69d47c55":"8136","01a85c17":"8209","935f2afb":"8581","925b3f96":"8609","7661071f":"8737","329ec17f":"8837",a94703ab:"9048",e273c56f:"9328","0d8bbc11":"9594","5e95c892":"9647","2670b7fe":"9768",d80de2af:"9851"}[e]||e,d.p+d.u(e)},(()=>{var e={5354:0,1869:0};d.f.j=(a,f)=>{var t=d.o(e,a)?e[a]:void 0;if(0!==t)if(t)f.push(t[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var c=new Promise(((f,c)=>t=e[a]=[f,c]));f.push(t[2]=c);var r=d.p+d.u(a),b=new Error;d.l(r,(f=>{if(d.o(e,a)&&(0!==(t=e[a])&&(e[a]=void 0),t)){var c=f&&("load"===f.type?"missing":f.type),r=f&&f.target&&f.target.src;b.message="Loading chunk "+a+" failed.\n("+c+": "+r+")",b.name="ChunkLoadError",b.type=c,b.request=r,t[1](b)}}),"chunk-"+a,a)}},d.O.j=a=>0===e[a];var a=(a,f)=>{var t,c,r=f[0],b=f[1],o=f[2],n=0;if(r.some((a=>0!==e[a]))){for(t in b)d.o(b,t)&&(d.m[t]=b[t]);if(o)var i=o(d)}for(a&&a(f);n Archive | React Native Styled System - + diff --git a/blog/first-blog-post/index.html b/blog/first-blog-post/index.html index 81a3824f..31b256f7 100644 --- a/blog/first-blog-post/index.html +++ b/blog/first-blog-post/index.html @@ -5,7 +5,7 @@ First Blog Post | React Native Styled System - + diff --git a/blog/index.html b/blog/index.html index 5d64ff16..b92d8140 100644 --- a/blog/index.html +++ b/blog/index.html @@ -5,7 +5,7 @@ Blog | React Native Styled System - + diff --git a/blog/long-blog-post/index.html b/blog/long-blog-post/index.html index 714ca25c..845e21cc 100644 --- a/blog/long-blog-post/index.html +++ b/blog/long-blog-post/index.html @@ -5,7 +5,7 @@ Long Blog Post | React Native Styled System - + diff --git a/blog/mdx-blog-post/index.html b/blog/mdx-blog-post/index.html index 1d0f7799..f3e99489 100644 --- a/blog/mdx-blog-post/index.html +++ b/blog/mdx-blog-post/index.html @@ -5,7 +5,7 @@ MDX Blog Post | React Native Styled System - + diff --git a/blog/tags/docusaurus/index.html b/blog/tags/docusaurus/index.html index e3a1214c..165f92cd 100644 --- a/blog/tags/docusaurus/index.html +++ b/blog/tags/docusaurus/index.html @@ -5,7 +5,7 @@ 4 posts tagged with "docusaurus" | React Native Styled System - + diff --git a/blog/tags/facebook/index.html b/blog/tags/facebook/index.html index d433bc83..ac7f6f9e 100644 --- a/blog/tags/facebook/index.html +++ b/blog/tags/facebook/index.html @@ -5,7 +5,7 @@ One post tagged with "facebook" | React Native Styled System - + diff --git a/blog/tags/hello/index.html b/blog/tags/hello/index.html index 5338d7c1..d8a07568 100644 --- a/blog/tags/hello/index.html +++ b/blog/tags/hello/index.html @@ -5,7 +5,7 @@ 2 posts tagged with "hello" | React Native Styled System - + diff --git a/blog/tags/hola/index.html b/blog/tags/hola/index.html index 4b3e55d3..3f2efe6a 100644 --- a/blog/tags/hola/index.html +++ b/blog/tags/hola/index.html @@ -5,7 +5,7 @@ One post tagged with "hola" | React Native Styled System - + diff --git a/blog/tags/index.html b/blog/tags/index.html index c0fb3cd9..5ba5dd84 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -5,7 +5,7 @@ Tags | React Native Styled System - + diff --git a/blog/welcome/index.html b/blog/welcome/index.html index 46d4ec2e..4d7b53e0 100644 --- a/blog/welcome/index.html +++ b/blog/welcome/index.html @@ -5,7 +5,7 @@ Welcome | React Native Styled System - + diff --git a/docs/advanced/get-token-value/index.html b/docs/advanced/get-token-value/index.html index 708c576e..f24224e5 100644 --- a/docs/advanced/get-token-value/index.html +++ b/docs/advanced/get-token-value/index.html @@ -5,7 +5,7 @@ Get token value with useSxTokens | React Native Styled System - + diff --git a/docs/advanced/global-theme-value/index.html b/docs/advanced/global-theme-value/index.html index 73cbf2c5..46758825 100644 --- a/docs/advanced/global-theme-value/index.html +++ b/docs/advanced/global-theme-value/index.html @@ -5,7 +5,7 @@ Get Theme value in global | React Native Styled System - + diff --git a/docs/api-references/useSx/index.html b/docs/api-references/useSx/index.html index c9a5b83f..a8528faf 100644 --- a/docs/api-references/useSx/index.html +++ b/docs/api-references/useSx/index.html @@ -5,7 +5,7 @@ useSx | React Native Styled System - + diff --git a/docs/api-references/useSxStyle/index.html b/docs/api-references/useSxStyle/index.html index 2b443c6b..6a8c9810 100644 --- a/docs/api-references/useSxStyle/index.html +++ b/docs/api-references/useSxStyle/index.html @@ -5,7 +5,7 @@ useSxStyle | React Native Styled System - + diff --git a/docs/api-references/useSxTokens/index.html b/docs/api-references/useSxTokens/index.html index 3807d177..5374609e 100644 --- a/docs/api-references/useSxTokens/index.html +++ b/docs/api-references/useSxTokens/index.html @@ -5,7 +5,7 @@ useSxTokens | React Native Styled System - + diff --git a/docs/category/advanced/index.html b/docs/category/advanced/index.html index c3673d9d..147dcb80 100644 --- a/docs/category/advanced/index.html +++ b/docs/category/advanced/index.html @@ -5,7 +5,7 @@ Advanced | React Native Styled System - + diff --git a/docs/category/api/index.html b/docs/category/api/index.html index 85bccc2c..3be1b842 100644 --- a/docs/category/api/index.html +++ b/docs/category/api/index.html @@ -5,7 +5,7 @@ API | React Native Styled System - + diff --git a/docs/category/example-components/index.html b/docs/category/example-components/index.html index 365a2225..43c30f64 100644 --- a/docs/category/example-components/index.html +++ b/docs/category/example-components/index.html @@ -5,7 +5,7 @@ Example Components | React Native Styled System - + diff --git a/docs/category/references/index.html b/docs/category/references/index.html index 70ef44e0..cf3860ba 100644 --- a/docs/category/references/index.html +++ b/docs/category/references/index.html @@ -5,7 +5,7 @@ References | React Native Styled System - + diff --git a/docs/category/usage/index.html b/docs/category/usage/index.html index fca602c6..28745e5e 100644 --- a/docs/category/usage/index.html +++ b/docs/category/usage/index.html @@ -5,7 +5,7 @@ Usage | React Native Styled System - + diff --git a/docs/example-components/styled-button/index.html b/docs/example-components/styled-button/index.html index 2008f344..88b3abd5 100644 --- a/docs/example-components/styled-button/index.html +++ b/docs/example-components/styled-button/index.html @@ -5,11 +5,11 @@ StyledButton | React Native Styled System - +

StyledButton

-
StyledButton.tsx
import type { PropsWithChildren, Ref } from 'react';
import React, { forwardRef } from 'react';
import type { TouchableOpacityProps } from 'react-native';
import { TouchableOpacity } from 'react-native';
import type { SxProps } from 'react-native-themed-styled-system';
import { useSx } from 'react-native-themed-styled-system';

import { Txt } from './Txt';

type StyledButtonProps = PropsWithChildren<TouchableOpacityProps & SxProps & { title: string }>;

const StyledButton = forwardRef((props: StyledButtonProps, ref: Ref<TouchableOpacity>) => {
  const { getStyle, filteredProps } = useSx(props);

  const { title, ...rest } = filteredProps;

  return (
    <TouchableOpacity accessibilityRole={'button'} ref={ref} style={getStyle()} {...rest}>
      <Txt>{title}</Txt>
    </TouchableOpacity>
  );
});

export { StyledButton };
export type { StyledButtonProps };
+
StyledButton.tsx
import type { PropsWithChildren, Ref } from 'react';
import React, { forwardRef } from 'react';
import type { TouchableOpacityProps } from 'react-native';
import { TouchableOpacity } from 'react-native';
import type { SxProps } from '@react-native-styled-system/core';
import { useSx } from '@react-native-styled-system/core';

import { Txt } from './Txt';

type StyledButtonProps = PropsWithChildren<TouchableOpacityProps & SxProps & { title: string }>;

const StyledButton = forwardRef((props: StyledButtonProps, ref: Ref<TouchableOpacity>) => {
  const { getStyle, filteredProps } = useSx(props);

  const { title, ...rest } = filteredProps;

  return (
    <TouchableOpacity accessibilityRole={'button'} ref={ref} style={getStyle()} {...rest}>
      <Txt>{title}</Txt>
    </TouchableOpacity>
  );
});

export { StyledButton };
export type { StyledButtonProps };
\ No newline at end of file diff --git a/docs/example-components/styled-image/index.html b/docs/example-components/styled-image/index.html index ee8201a7..ac248904 100644 --- a/docs/example-components/styled-image/index.html +++ b/docs/example-components/styled-image/index.html @@ -5,11 +5,11 @@ StyledImage | React Native Styled System - +

StyledImage

-
StyledImage.tsx
import type { PropsWithChildren, Ref } from 'react';
import React, { forwardRef } from 'react';
import type { ImageProps, ImageStyle } from 'react-native';
import { Image } from 'react-native';
import type { SxProps } from 'react-native-themed-styled-system';
import { useSx } from 'react-native-themed-styled-system';

type StyledImageProps = PropsWithChildren<ImageProps & SxProps>;

const StyledImage = forwardRef((props: StyledImageProps, ref: Ref<Image>) => {
  const { getStyle, filteredProps } = useSx<ImageStyle>(props);

  return <Image ref={ref} style={getStyle()} {...filteredProps} />;
});

export { StyledImage };
export type { StyledImageProps };
+
StyledImage.tsx
import type { PropsWithChildren, Ref } from 'react';
import React, { forwardRef } from 'react';
import type { ImageProps, ImageStyle } from 'react-native';
import { Image } from 'react-native';
import type { SxProps } from '@react-native-styled-system/core';
import { useSx } from '@react-native-styled-system/core';

type StyledImageProps = PropsWithChildren<ImageProps & SxProps>;

const StyledImage = forwardRef((props: StyledImageProps, ref: Ref<Image>) => {
  const { getStyle, filteredProps } = useSx<ImageStyle>(props);

  return <Image ref={ref} style={getStyle()} {...filteredProps} />;
});

export { StyledImage };
export type { StyledImageProps };
\ No newline at end of file diff --git a/docs/example-components/styled-scroll-view/index.html b/docs/example-components/styled-scroll-view/index.html index ba30b76e..861f57e4 100644 --- a/docs/example-components/styled-scroll-view/index.html +++ b/docs/example-components/styled-scroll-view/index.html @@ -5,10 +5,10 @@ StyledScrollView | React Native Styled System - + -

StyledScrollView

StyledScrollView.tsx
import { PropsWithChildren, forwardRef, Ref } from 'react';
import { ScrollViewProps, ScrollView } from 'react-native';
import { SxProps, useSx } from 'react-native-themed-styled-system';

type StyledScrollViewProps = PropsWithChildren<
  {
    contentContainerSx?: SxProps;
  } & Omit<ScrollViewProps, 'contentContainerStyle'> &
    SxProps
>;
const StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref<ScrollView>) => {
  const { getStyle, filteredProps } = useSx(props);
  const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);
  return (
    <ScrollView ref={ref} style={getStyle()} contentContainerStyle={contentContainerStyle()} {...filteredProps} />
  );
});

export { StyledScrollView };
export type { StyledScrollViewProps };
+

StyledScrollView

StyledScrollView.tsx
import { PropsWithChildren, forwardRef, Ref } from 'react';
import { ScrollViewProps, ScrollView } from 'react-native';
import { SxProps, useSx } from '@react-native-styled-system/core';

type StyledScrollViewProps = PropsWithChildren<
  {
    contentContainerSx?: SxProps;
  } & Omit<ScrollViewProps, 'contentContainerStyle'> &
    SxProps
>;
const StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref<ScrollView>) => {
  const { getStyle, filteredProps } = useSx(props);
  const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);
  return (
    <ScrollView ref={ref} style={getStyle()} contentContainerStyle={contentContainerStyle()} {...filteredProps} />
  );
});

export { StyledScrollView };
export type { StyledScrollViewProps };
\ No newline at end of file diff --git a/docs/example-components/styled-view/index.html b/docs/example-components/styled-view/index.html index 99d83acc..5c17d7eb 100644 --- a/docs/example-components/styled-view/index.html +++ b/docs/example-components/styled-view/index.html @@ -5,10 +5,10 @@ StyledView | React Native Styled System - + -

StyledView

StyledView.tsx
import { forwardRef, Ref, PropsWithChildren } from 'react';
import { View, ViewProps } from 'react-native';
import { SxProps, useSx } from 'react-native-themed-styled-system';

type StyledViewProps = PropsWithChildren<ViewProps & SxProps>;
const StyledView = forwardRef((props: StyledViewProps, ref: Ref<View>) => {
  const { getStyle, filteredProps } = useSx(props);
  return <View ref={ref} style={getStyle()} {...filteredProps} />;
});

export { StyledView };
export type { StyledViewProps };
+

StyledView

StyledView.tsx
import { forwardRef, Ref, PropsWithChildren } from 'react';
import { View, ViewProps } from 'react-native';
import { SxProps, useSx } from '@react-native-styled-system/core';

type StyledViewProps = PropsWithChildren<ViewProps & SxProps>;
const StyledView = forwardRef((props: StyledViewProps, ref: Ref<View>) => {
  const { getStyle, filteredProps } = useSx(props);
  return <View ref={ref} style={getStyle()} {...filteredProps} />;
});

export { StyledView };
export type { StyledViewProps };
\ No newline at end of file diff --git a/docs/example-components/txt/index.html b/docs/example-components/txt/index.html index 09bc80f6..54c08c65 100644 --- a/docs/example-components/txt/index.html +++ b/docs/example-components/txt/index.html @@ -5,10 +5,10 @@ Txt | React Native Styled System - + -

Txt

Txt.tsx
import { Text, TextProps } from 'react-native';
import { TextSxProps, useSx } from 'react-native-themed-styled-system';

type TxtProps = {} & TextSxProps & TextProps;
const Txt = (props: TxtProps) => {
  const { getStyle, filteredProps } = useSx(props, { styleType: 'TextStyle' });
  return <Text style={getStyle()} {...filteredProps} />;
};

export { Txt };
export type { TxtProps };
+

Txt

Txt.tsx
import { Text, TextProps } from 'react-native';
import { TextSxProps, useSx } from '@react-native-styled-system/core';

type TxtProps = {} & TextSxProps & TextProps;
const Txt = (props: TxtProps) => {
  const { getStyle, filteredProps } = useSx(props, { styleType: 'TextStyle' });
  return <Text style={getStyle()} {...filteredProps} />;
};

export { Txt };
export type { TxtProps };
\ No newline at end of file diff --git a/docs/intro/index.html b/docs/intro/index.html index e1590099..84c2f414 100644 --- a/docs/intro/index.html +++ b/docs/intro/index.html @@ -5,7 +5,7 @@ Getting Started | React Native Styled System - + diff --git a/docs/references/sx-props/index.html b/docs/references/sx-props/index.html index 853c7173..bfc04a8f 100644 --- a/docs/references/sx-props/index.html +++ b/docs/references/sx-props/index.html @@ -5,7 +5,7 @@ SxProps References | React Native Styled System - + diff --git a/docs/references/token/index.html b/docs/references/token/index.html index d9b6d2ca..91dbc838 100644 --- a/docs/references/token/index.html +++ b/docs/references/token/index.html @@ -5,7 +5,7 @@ Theme Token References | React Native Styled System - + diff --git a/docs/usage/component/index.html b/docs/usage/component/index.html index 3ed85dde..57c30a39 100644 --- a/docs/usage/component/index.html +++ b/docs/usage/component/index.html @@ -5,7 +5,7 @@ Component | React Native Styled System - + @@ -23,7 +23,7 @@

Sty

image.png

<StyledView w={48} h={48}>
  <StyledView w={'100%'} h={24} radius={12} bg={'red500'} t={0} />
  <StyledView w={24} h={24} radius={12} bg={'blue400'} pos={'absolute'} t={0} r={'-24'} />
  <StyledView w={24} h={24} radius={12} bg={'yellow300'} pos={'absolute'} b={0} r={-24} />
  <StyledView w={24} h={24} radius={12} bg={'violet400'} pos={'absolute'} b={0} r={'-48'} />
  <StyledView w={24} h={24} radius={12} bg={'violet50'} pos={'absolute'} b={0} l={'sidePadding'} />
</StyledView>

It can be defined as follows:

-
StyledView.tsx
import { forwardRef, Ref, PropsWithChildren } from 'react';
import { View, ViewProps } from 'react-native';
import { SxProps, useSx } from 'react-native-themed-styled-system';

type StyledViewProps = PropsWithChildren<ViewProps & SxProps>;
const StyledView = forwardRef((props: StyledViewProps, ref: Ref<View>) => {
  const { getStyle, filteredProps } = useSx(props);
  return <View ref={ref} style={getStyle()} {...filteredProps} />;
});

export { StyledView };
export type { StyledViewProps };
+
StyledView.tsx
import { forwardRef, Ref, PropsWithChildren } from 'react';
import { View, ViewProps } from 'react-native';
import { SxProps, useSx } from '@react-native-styled-system/core';

type StyledViewProps = PropsWithChildren<ViewProps & SxProps>;
const StyledView = forwardRef((props: StyledViewProps, ref: Ref<View>) => {
  const { getStyle, filteredProps } = useSx(props);
  return <View ref={ref} style={getStyle()} {...filteredProps} />;
});

export { StyledView };
export type { StyledViewProps };

useSx is responsible for receiving SxProps and converting it to ViewStyle.

You can call the getStyle function returned by useSx and pass it to the style prop of the desired view.

warning

The prop type of a component containing the SxProps type includes all the keys included in SxProps.

Therefore, if all props from the parent are passed through object destruction like in the existing {...props}, the keys do not overlap. @@ -45,7 +45,7 @@

Example without Props destruction​

If you need a style object that can control multiple views in a component's props or do not want props destruction, You can define a component using the sx prop as follows.

-
StyledScrollView.tsx
import { PropsWithChildren, forwardRef, Ref } from 'react';
import { ScrollViewProps, ScrollView } from 'react-native';
import { SxProps, useSx } from 'react-native-themed-styled-system';

type StyledScrollViewProps = PropsWithChildren<
  {
    contentContainerSx?: SxProps;
  } & Omit<ScrollViewProps, 'contentContainerStyle'> &
    SxProps
>;
const StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref<ScrollView>) => {
  const { getStyle, filteredProps } = useSx(props);
  const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);
  return (
    <ScrollView ref={ref} style={getStyle()} contentContainerStyle={contentContainerStyle()} {...filteredProps} />
  );
});

export { StyledScrollView };
export type { StyledScrollViewProps };
+
StyledScrollView.tsx
import { PropsWithChildren, forwardRef, Ref } from 'react';
import { ScrollViewProps, ScrollView } from 'react-native';
import { SxProps, useSx } from '@react-native-styled-system/core';

type StyledScrollViewProps = PropsWithChildren<
  {
    contentContainerSx?: SxProps;
  } & Omit<ScrollViewProps, 'contentContainerStyle'> &
    SxProps
>;
const StyledScrollView = forwardRef((props: StyledScrollViewProps, ref: Ref<ScrollView>) => {
  const { getStyle, filteredProps } = useSx(props);
  const { getStyle: contentContainerStyle } = useSx(props.contentContainerSx);
  return (
    <ScrollView ref={ref} style={getStyle()} contentContainerStyle={contentContainerStyle()} {...filteredProps} />
  );
});

export { StyledScrollView };
export type { StyledScrollViewProps };

This is a redefinition of ScrollView.

In addition to style, ScrollView has one more style prop called contentContainerStyle.

Therefore, it is accepted as a field called contentContainerSx as a SxProps type, and the contentContainerStyle of the original ScrollViewProps is created using Omit. diff --git a/docs/usage/configuration/index.html b/docs/usage/configuration/index.html index eeb0dcbd..c39170c3 100644 --- a/docs/usage/configuration/index.html +++ b/docs/usage/configuration/index.html @@ -5,7 +5,7 @@ Configuration | React Native Styled System - + diff --git a/docs/usage/install/index.html b/docs/usage/install/index.html index 5ecb499b..65f6a4c2 100644 --- a/docs/usage/install/index.html +++ b/docs/usage/install/index.html @@ -5,12 +5,12 @@ Installiation | React Native Styled System - +

Installiation

Installiation step

-
npm install react-native-themed-styled-system
+
npm install @react-native-styled-system/core
\ No newline at end of file diff --git a/docs/usage/style-parsing/index.html b/docs/usage/style-parsing/index.html index 2b7aacaa..160225f4 100644 --- a/docs/usage/style-parsing/index.html +++ b/docs/usage/style-parsing/index.html @@ -5,7 +5,7 @@ Pass styles and parsing priorities | React Native Styled System - + diff --git a/docs/usage/text/index.html b/docs/usage/text/index.html index bf7b5bb5..fbb45da1 100644 --- a/docs/usage/text/index.html +++ b/docs/usage/text/index.html @@ -5,7 +5,7 @@ Text & Typography | React Native Styled System - + @@ -28,7 +28,7 @@

De

Create styled Text component​

We can define our new Text component like this.

-
Txt.tsx
import { Text, TextProps } from 'react-native';
import { TextSxProps, useSx } from 'react-native-themed-styled-system';

type TxtProps = {} & TextSxProps & TextProps;
const Txt = (props: TxtProps) => {
  const { getStyle, filteredProps } = useSx(props, { styleType: 'TextStyle' });
  return <Text style={getStyle()} {...filteredProps} />;
};

export { Txt };
export type { TxtProps };
+
Txt.tsx
import { Text, TextProps } from 'react-native';
import { TextSxProps, useSx } from '@react-native-styled-system/core';

type TxtProps = {} & TextSxProps & TextProps;
const Txt = (props: TxtProps) => {
  const { getStyle, filteredProps } = useSx(props, { styleType: 'TextStyle' });
  return <Text style={getStyle()} {...filteredProps} />;
};

export { Txt };
export type { TxtProps };

Use it!​

<Box p={8} radius={'lg'}>
  <Txt mt={4} t={'title'}>
    React Native
  </Txt>
</Box>
diff --git a/docs/usage/typescript/index.html b/docs/usage/typescript/index.html index ab1f4b5e..3b60aa85 100644 --- a/docs/usage/typescript/index.html +++ b/docs/usage/typescript/index.html @@ -5,23 +5,23 @@ TypeScript | React Native Styled System - +

TypeScript

React Native Styled System aims for type-safe use.

Please enter the path to the module where ThemedDict is default exported as an argument to the command.

-
react-native-themed-styled-system src/AppTheme.ts
+
@react-native-styled-system/core src/AppTheme.ts

More convenient use is possible with scripts in package.json.

-
package.json
{
  ...
  "scripts": {
    "theme:gen": "react-native-themed-styled-system src/AppTheme.ts"
  }
}
+
package.json
{
  ...
  "scripts": {
    "theme:gen": "@react-native-styled-system/core src/AppTheme.ts"
  }
}
npm run theme:gen
tip

When changing the version of a package or installing a new one, you must always execute the type creation command.

We recommend using the postinstall script so that it can operate without problems in CI as follows.

package.json
{
  "postinstall": "yarn theme:gen"
}

How it works​

used internally in the package -File in the path node_modules/react-native-themed-styled-system/lib/typescript/@types/ThemedTypings.d.ts +File in the path node_modules/@react-native-styled-system/core/lib/typescript/@types/ThemedTypings.d.ts Regenerate it yourself.

Then it is created as follows:

-
node_modules/react-native-themed-styled-system/lib/typescript/@types/ThemedTypings.d.ts
import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';

export interface ThemedTypings {
  colors:
    | (ColorsValue & {})
    | 'white'
    | 'black'
    | 'transparent'
    | 'gray50'
    /* ... */
    | 'blue900';
  radii: (RadiiValue & {}) | (`${number}` & {}) | (`${any}px` & {}) | '1' | '2' | 'sm' | 'md';
  sizes:
    | (SizesValue & {})
    | (`${number}` & {})
    | (`${any}px` & {})
    | '0'
    /* ... */
    | 'px'
    | '0.5';
  space:
    | (SpaceValue & {})
    | (`${number}` & {})
    | (`${any}px` & {})
    | '0'
    /* ... */
    | '0.5'
    | '-0.5';
  typography: 'h1';
}

+
node_modules/@react-native-styled-system/core/lib/typescript/@types/ThemedTypings.d.ts
import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';

export interface ThemedTypings {
  colors:
    | (ColorsValue & {})
    | 'white'
    | 'black'
    | 'transparent'
    | 'gray50'
    /* ... */
    | 'blue900';
  radii: (RadiiValue & {}) | (`${number}` & {}) | (`${any}px` & {}) | '1' | '2' | 'sm' | 'md';
  sizes:
    | (SizesValue & {})
    | (`${number}` & {})
    | (`${any}px` & {})
    | '0'
    /* ... */
    | 'px'
    | '0.5';
  space:
    | (SpaceValue & {})
    | (`${number}` & {})
    | (`${any}px` & {})
    | '0'
    /* ... */
    | '0.5'
    | '-0.5';
  typography: 'h1';
}

\ No newline at end of file diff --git a/index.html b/index.html index 944d78be..64b710d3 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,10 @@ React Native Styled System | React Native Styled System - + -
logo

React Native Styled System

styled-system mimic for React Native

Getting Started ⏱️
main_code
npm install react-native-themed-styled-system
+
logo

React Native Styled System

styled-system mimic for React Native

Getting Started ⏱️
main_code
npm install @react-native-styled-system/core
\ No newline at end of file diff --git a/markdown-page/index.html b/markdown-page/index.html index 36bb3182..ab8cce90 100644 --- a/markdown-page/index.html +++ b/markdown-page/index.html @@ -5,7 +5,7 @@ Markdown page example | React Native Styled System - +