Skip to content

Commit

Permalink
Improve NavSpaces breakpoints, add absolutely placed children to Rich…
Browse files Browse the repository at this point in the history
…TextEdtior
  • Loading branch information
tom-leamon committed Apr 28, 2024
1 parent 2c6994b commit 07e0213
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 39 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"publishConfig": {
"registry": "https://registry.npmjs.org"
},
"version": "1.0.109",
"version": "1.0.110",
"description": "Formation is a comprehensive component library powered by React, Styled Components, and CSS variables for creating apps and websites that demand responsive, unified cross-platform experiences.",
"resolutions": {
"string-width": "^4",
Expand Down
29 changes: 17 additions & 12 deletions src/components/NavSpaces/NavSpaces.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,11 @@ export const NavSpaces = React.memo(({
disableTablet,
sidebarWidth
}: Props) => {
const { isDesktop, isTablet, isMobile } = useBreakpoint()
const { isTablet, isDesktop } = useBreakpoint({
desktop: { minWidth: 1224 },
tablet: { minWidth: 768, maxWidth: 1223 },
mobile: { maxWidth: 767 }
})

interface ViewProps {
children: React.ReactNode,
Expand Down Expand Up @@ -229,17 +233,17 @@ export const NavSpaces = React.memo(({
}
</View>

<S.MainContent>
<S.SecondPage>
<S.Scroll
numberOfNavBars={0}
>
{
secondPage
}
</S.Scroll>
</S.MainContent>
</S.SecondPage>

<S.SecondaryContent>
<S.ThirdPage>
<S.Scroll
numberOfNavBars={0}
subtractBorder={true}
Expand All @@ -248,7 +252,7 @@ export const NavSpaces = React.memo(({
thirdPage
}
</S.Scroll>
</S.SecondaryContent>
</S.ThirdPage>
</S.Container>
</>)
}
Expand Down Expand Up @@ -282,23 +286,24 @@ const S = {
display: flex;
position: relative;
`,
MainContent: styled.div`
SecondPage: styled.div`
width: var(100vw - 640px);
display: flex;
flex-grow: 1;
position: relative;
`,
SecondaryContent: styled.div`
max-width: 320px;
ThirdPage: styled.div`
display: flex;
flex-wrap: wrap;
position: relative;
border-left: 1px solid var(--F_Surface);
min-width: 320px;
@media (min-width: 1400px) {
min-width: 600px;
max-width: 600px;
width: 380px;
max-width: 380px;
@media (min-width: 1600px) {
width: 500px;
max-width: 500px;
}
`,
PagePlaceholder: styled.div<{
Expand Down
2 changes: 1 addition & 1 deletion src/components/NavSpaces/SpacesSidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ interface Props {
spaces: Space[],
onClickIndex: (index: number) => void,
activeSpaceIndex: number,
children: React.ReactNode
children?: React.ReactNode
}

export const SpacesSidebar = memo(({
Expand Down
30 changes: 28 additions & 2 deletions src/components/RichTextEditor/RichTextEditor.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react'
import { Gap, RichTextEditor, TextArea } from '../../internal'
import { Button, Gap, RichTextEditor, TextArea } from '../../internal'
import styled from 'styled-components'

export default {
Expand Down Expand Up @@ -70,6 +70,33 @@ Minimal.args = {
minimal: true
}

export const Children = ExpandTemplate.bind({})
Children.args = {
pl: 1,
pr: 3.25,
outline: true,
minimal: true,
children: <Button
icon='arrow-up'
iconPrefix='fas'
circle
minimal
/>
}

export const ChildrenMinimal = ExpandTemplate.bind({})
ChildrenMinimal.args = {
pl: 1,
pr: 3.25,
outline: true,
children: <Button
icon='arrow-up'
iconPrefix='fas'
circle
minimal
/>
}

export const MinimalPlaceholder = ExpandTemplate.bind({})
MinimalPlaceholder.args = {
px: 1,
Expand Down Expand Up @@ -110,7 +137,6 @@ Placeholder.args = {
placeholder: true
};


const S = {
FullScreenContainer: styled.div`
height: 100vh;
Expand Down
53 changes: 41 additions & 12 deletions src/components/RichTextEditor/RichTextEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,32 @@ import { IconPrefix } from '@fortawesome/fontawesome-common-types'
interface RichTextEditorProps {
value: string
onChange: (value: string) => void
px?: number
outline?: boolean
iconPrefix?: IconPrefix
autoFocus?: boolean
minimal?: boolean
onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void
placeholder?: string
p?: number,
pb?: number,
pt?: number,
pr?: number,
pl?: number,
px?: number,
py?: number,
children?: React.ReactNode
}
export const RichTextEditor: FC<RichTextEditorProps> = ({
value,
onChange,
px,
outline,
iconPrefix,
autoFocus,
minimal,
onKeyDown,
placeholder
placeholder,
children,
...rest
}) => {
const [loaded, setLoaded] = useState(false)
const quillRef = useRef(null)
Expand Down Expand Up @@ -275,14 +283,16 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({

return (
<S.RichTextEditor
px={px || 0}
outline={outline}
onClick={focus}
{...rest}
>
<StyleHTML>
{!minimal && (
<CustomToolbar handlers={handlers} />
)}
{
!minimal && (
<CustomToolbar handlers={handlers} />
)
}
<ReactQuill
ref={quillRef}
value={value}
Expand All @@ -304,15 +314,26 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
{ placeholder }
</S.Placeholder>
}
<S.Absolute minimal={minimal}>
{
children
}
</S.Absolute>
</S.RichTextEditor>
)
}

const calculatePadding = (props : any) => {
let pt = props.pt ?? props.py ?? props.p ?? 0
let pr = props.pr ?? props.px ?? props.p ?? 0
let pb = props.pb ?? props.py ?? props.p ?? 0
let pl = props.pl ?? props.px ?? props.p ?? 0

return `${pt}rem ${pr}rem ${pb}rem ${pl}rem`
}

const S = {
RichTextEditor: styled.div<{
px: number,
outline?: boolean
}>`
RichTextEditor: styled.div<Partial<RichTextEditorProps>>`
position: relative;
display: flex;
width: 100%;
Expand All @@ -324,7 +345,7 @@ const S = {
height: 100%;
}
.ql-editor {
padding: ${props => `0 ${props.px}rem !important`};
padding: ${props => calculatePadding(props)};
}
.ql-toolbar {
padding: ${props => `0 ${props.px}rem !important`};
Expand All @@ -349,6 +370,14 @@ const S = {
}
`}
`,
Absolute: styled.div<{
minimal?: boolean
}>`
position: absolute;
right: 0;
top: 0;
top: ${props => props.minimal ? '0' : '24px'};
`,
Toolbar: styled.div`
width: calc(100% - 1.5rem);
border-bottom: 1px solid var(--F_Surface_2);
Expand Down
1 change: 0 additions & 1 deletion src/components/StyleHTML/StyleHTML.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export const StyleHTML = ({ children }: Props) => {
children
}
</S.StyleHTML>

)
}

Expand Down
30 changes: 20 additions & 10 deletions src/hooks/useBreakpoint.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,34 @@
import { useMediaQuery } from 'react-responsive'

/**
* A hook that returns the current breakpoint based on the device's width.
* A custom hook that allows for specifying custom breakpoints for mobile, tablet, and desktop devices.
* Users can override default breakpoints to better suit their application's responsive design needs.
* @param {object} customBreakpoints - An object containing the custom breakpoint values for mobile, tablet, and desktop.
* @see {@link https://www.npmjs.com/package/react-responsive|react-responsive}.
* @function
* @returns {{ isMobile: boolean, isTablet: boolean, isDesktop: boolean }} An object containing three boolean values indicating if the current device is a mobile, tablet, or desktop.
* @returns {{ isMobile: boolean, isTablet: boolean, isDesktop: boolean }} An object with boolean values indicating device type.
*
* Example:
* Example usage:
* ```js
* const { isMobile, isTablet, isDesktop } = useBreakpoint();
* const { isMobile, isTablet, isDesktop } = useBreakpoint({
* desktop: { minWidth: 1024 },
* tablet: { minWidth: 768, maxWidth: 1023 },
* mobile: { maxWidth: 767 }
* })
*
* if (isMobile) {
* // ... Render mobile-specific component
* if (isDesktop) {
* // Render desktop-specific component
* }
* ```
*/
export const useBreakpoint = () => {
const isDesktop = useMediaQuery({ minWidth: 956 })
const isTablet = useMediaQuery({ minWidth: 621, maxWidth: 955 })
const isMobile = useMediaQuery({ maxWidth: 620 })
export const useBreakpoint = ({
desktop = { minWidth: 1024 },
tablet = { minWidth: 621, maxWidth: 955 },
mobile = { maxWidth: 620 }
} = {}) => {
const isDesktop = useMediaQuery({ minWidth: desktop.minWidth })
const isTablet = useMediaQuery({ minWidth: tablet.minWidth, maxWidth: tablet.maxWidth })
const isMobile = useMediaQuery({ maxWidth: mobile.maxWidth })

return {
isMobile,
Expand Down

0 comments on commit 07e0213

Please sign in to comment.