diff --git a/packages/components/package.json b/packages/components/package.json index 3822172f7..ea3e20adb 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -77,7 +77,6 @@ "dayjs": "^1.10.7", "immutability-helper": "^3.1.1", "lodash": "^4.17.21", - "macy": "^2.5.1", "namor": "^2.0.3", "prop-types": "^15.7.2", "react-beautiful-dnd": "^13.1.0", diff --git a/packages/components/src/layout/Masonry/Masonry.js b/packages/components/src/layout/Masonry/Masonry.js deleted file mode 100644 index 003303197..000000000 --- a/packages/components/src/layout/Masonry/Masonry.js +++ /dev/null @@ -1,88 +0,0 @@ -import React, { useRef, useMemo, useEffect } from 'react'; -import PropTypes from 'prop-types'; -import Macy from 'macy'; -import { Box } from '../Box'; -import { MasonryStyles } from './Masonry.styles'; - -export const MASONRY_DEFAULT_PROPS = { - margin: 10, - breakAt: { - 1200: 4, - 940: 3, - 520: 2, - 360: 1, - }, - fullWidth: true, -}; -export const MASONRY_PROP_TYPES = { - margin: PropTypes.number, - /** Indicated the columns number at centain breakpoint */ - breakAt: PropTypes.object, -}; - -export const useMasonry = (containerRef, options, childCount) => { - const macyRef = useRef(); - - useEffect(() => { - const macyOptions = { - container: containerRef.current, - ...options, - }; - - macyRef.current = Macy(macyOptions); - - return () => { - macyRef.current.remove(); - }; - }, [options, containerRef]); - - useEffect(() => { - macyRef.current.reInit(); - }, [childCount]); - - return { macy: macyRef.current }; -}; - -const Masonry = ({ children, className, margin, breakAt, fullWidth }) => { - const containerRef = useRef(); - const childCount = React.Children.count(children); - const { macy } = useMasonry(containerRef, { margin, breakAt }, childCount); - - const { classes, cx } = MasonryStyles({ fullWidth }, { name: 'Masonry' }); - - const childrenWithProps = useMemo( - () => - React.Children.map(children, (child) => { - // Checking isValidElement is the safe way - if (React.isValidElement(child)) { - const { className, ...rest } = child.props; - - if (child.type === React.Fragment) { - return ; - } else { - return ( - - ); - } - } - return child; - }), - [children] - ); - - return ( - - {childrenWithProps} - - ); -}; - -Masonry.defaultProps = MASONRY_DEFAULT_PROPS; -Masonry.propTypes = MASONRY_PROP_TYPES; - -export { Masonry }; diff --git a/packages/components/src/layout/Masonry/Masonry.mdx b/packages/components/src/layout/Masonry/Masonry.mdx deleted file mode 100644 index d41bda131..000000000 --- a/packages/components/src/layout/Masonry/Masonry.mdx +++ /dev/null @@ -1,69 +0,0 @@ -import { Story, Props, Source, Preview } from '@storybook/addon-docs'; -import * as stories from './Masonry.stories.js'; -import { Masonry } from './Masonry.js'; -import { Box } from '@mantine/core'; -import { Paper } from '../../layout'; -import { Text } from '../../typography'; -import { ThemeProvider } from './../../ThemeProvider'; - -# Masonry - -[Source code](https://github.com/leemonade/bubbles/tree/main/packages/components/src/layout/Masonry/Masonry.js) - -## Table of Contents - - - - -- [Overview](#overview) -- [Component API](#component-api) -- [Feedback](#feedback) - -## Overview - -Masonry is a component to display an array of elements. - -Provide the `breakAt` prop to control the amount of elements for each row, like this: - -```js -breakAt: { - 1200: 4, - 940: 3, - 520: 2, - 360: 1, -}, -``` - -Masonry also accepts a `margin` prop to control the gap between elements. - - - Default margin - - {[0, 1, 2, 3, 4, 5, 6, 7].map((item, index) => ( - - {item + 1} - - ))} - - 30 margin - - {[0, 1, 2, 3, 4, 5, 6, 7].map((item, index) => ( - - {item + 1} - - ))} - - - -## Component API - - - - - - - -## Feedback - -Help us improve this component by providing feedback, asking questions on Slack, or updating this file on -[GitHub](https://github.com/leemonade/bubbles/edit/main/packages/components/src/layout/Masonry/Masonry.mdx) diff --git a/packages/components/src/layout/Masonry/Masonry.stories.js b/packages/components/src/layout/Masonry/Masonry.stories.js deleted file mode 100644 index 0c8859aeb..000000000 --- a/packages/components/src/layout/Masonry/Masonry.stories.js +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useState, useMemo, useEffect } from 'react'; -import { Paper } from '../Paper'; -import { Text } from '../../typography'; -import { Masonry, MASONRY_DEFAULT_PROPS } from './Masonry'; -import mdx from './Masonry.mdx'; - -export default { - title: 'Atoms/Layout/Masonry', - parameters: { - component: Masonry, - docs: { - page: mdx, - }, - design: { - type: 'figma', - // url: 'https://www.figma.com/file/kcSXz3QZFByFDTumNgzPpV/?node-id=2962%3A31342', - }, - }, - argTypes: { - // myBooleanProp: { control: { type: 'boolean' } }, - // mySelectProp: { options: ['Hello', 'World'], control: { type: 'select' } }, - }, -}; - -const Template = ({ test_nchildren, ...props }) => { - const [list, setList] = useState([...Array(test_nchildren).keys()]); - - useEffect(() => setList([...Array(test_nchildren).keys()]), [test_nchildren]); - - return ( - - - {list.map((item, index) => ( - - {item + 1} - - ))} - - - ); -}; - -export const Playground = Template.bind({}); - -Playground.args = { - // myBooleanProp: false, - // mySelectProp: 'Hello' - ...MASONRY_DEFAULT_PROPS, - test_nchildren: 10, -}; diff --git a/packages/components/src/layout/Masonry/Masonry.styles.js b/packages/components/src/layout/Masonry/Masonry.styles.js deleted file mode 100644 index c7f288892..000000000 --- a/packages/components/src/layout/Masonry/Masonry.styles.js +++ /dev/null @@ -1,13 +0,0 @@ -import { createStyles } from '@mantine/styles'; - -export const MasonryStyles = createStyles((theme, { fullWidth }) => { - return { - root: { - position: 'relative', - width: fullWidth && '100%', - }, - item: { - // transition: 'all .3s ease-out', - }, - }; -}); diff --git a/packages/components/src/layout/Masonry/index.js b/packages/components/src/layout/Masonry/index.js deleted file mode 100644 index 429c7735c..000000000 --- a/packages/components/src/layout/Masonry/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './Masonry'; diff --git a/packages/components/src/layout/index.js b/packages/components/src/layout/index.js index 0c05defef..9e4771182 100644 --- a/packages/components/src/layout/index.js +++ b/packages/components/src/layout/index.js @@ -4,7 +4,6 @@ export * from './ContextContainer'; export * from './ContentLegible'; export * from './PageContainer'; export * from './PageHeader'; -export * from './Masonry'; export * from './Divider'; export * from './Stack'; export * from './Paper'; diff --git a/scripts/link.js b/scripts/link.js index 3432a5bb6..b316da813 100644 --- a/scripts/link.js +++ b/scripts/link.js @@ -43,7 +43,7 @@ async function main() { console.log(' --- RUN THE FOLLOWING COMMAND IN YOUR PROJECT ---'); console.log(); - console.log(`yarn link @bubbles-ui/${result.join(' @bubbles-ui/')}`); + console.log(`yarn link @bubbles-ui/${result.join(' @bubbles-ui/')}`); console.log(); console.log(); }