From 1077b5aba70588dd06448ae051fd46861669f8cd Mon Sep 17 00:00:00 2001 From: SerhiiTsybulskyi Date: Wed, 15 May 2024 14:24:51 +0300 Subject: [PATCH] add stories to foundation blocks --- docs/blocks/administration/Profile.story.tsx | 34 +- docs/blocks/foundation/DoesNotExist.tsx | 232 --- docs/blocks/foundation/EmptyState.mdx | 341 +---- .../{NoResults.tsx => EmptyState.story.tsx} | 110 +- docs/blocks/foundation/LostPage.tsx | 167 --- docs/blocks/foundation/MissingInfo.tsx | 60 - docs/blocks/foundation/NotFound.mdx | 525 +------ docs/blocks/foundation/NotFound.story.tsx | 1267 +++++++++++++++++ docs/blocks/foundation/NotFound.tsx | 56 - docs/blocks/foundation/NothingToDisplay.tsx | 49 - .../{Support.tsx => Support.story.tsx} | 16 +- 11 files changed, 1425 insertions(+), 1432 deletions(-) delete mode 100644 docs/blocks/foundation/DoesNotExist.tsx rename docs/blocks/foundation/{NoResults.tsx => EmptyState.story.tsx} (66%) delete mode 100644 docs/blocks/foundation/LostPage.tsx delete mode 100644 docs/blocks/foundation/MissingInfo.tsx create mode 100644 docs/blocks/foundation/NotFound.story.tsx delete mode 100644 docs/blocks/foundation/NotFound.tsx delete mode 100644 docs/blocks/foundation/NothingToDisplay.tsx rename docs/blocks/foundation/{Support.tsx => Support.story.tsx} (91%) diff --git a/docs/blocks/administration/Profile.story.tsx b/docs/blocks/administration/Profile.story.tsx index 0ddf7eb1..180f9899 100644 --- a/docs/blocks/administration/Profile.story.tsx +++ b/docs/blocks/administration/Profile.story.tsx @@ -6,7 +6,37 @@ import { Button } from '../../../src/elements/Button'; import { Card, Divider, Stack } from '../../../src/layout'; import { Input } from '../../../src/form/Input'; import { Avatar } from '../../../src/elements/Avatar'; -import logo from '../../assets/reaviz.svg'; + +const LogoIcon = ({ className }) => ( + + + + + + + + + + + +); export default { title: 'Blocks/Administration/Profile' @@ -20,7 +50,7 @@ export const Profile = () => ( > - Logo +

Reablocks

github.com/reaviz

diff --git a/docs/blocks/foundation/DoesNotExist.tsx b/docs/blocks/foundation/DoesNotExist.tsx deleted file mode 100644 index 4caeb6e4..00000000 --- a/docs/blocks/foundation/DoesNotExist.tsx +++ /dev/null @@ -1,232 +0,0 @@ -import React from 'react'; -import { Button } from '../../../src/elements/Button'; -import { Chip } from '../../../src/elements/Chip'; -import { Divider } from '../../../src/layout/Divider'; -import { MotionGroup } from '../../../src/layout/Motion/MotionGroup'; -import { MotionItem } from '../../../src/layout/Motion/MotionItem'; -import { PageTitle } from '../../../src/typography'; -import { Stack } from '../../../src/layout/Stack'; - -export const DoesNotExist = () => ( -
- - - - - - - - - - - - - - - - - - - - - - - - - } - > - 404 - - - This page does not exist - - - Sorry, we couldn't find the page you're looking for. - - -
- - - - - - Documentation - - Learn how to integrate our tools with your app. - - -
- - - -
- - - - - - - - - - APIs - - Explore all API references - - -
- - - -
- - - - - - - - - - Guide - - Easy-to-follow installation guides. - - -
- - - -
- - - - - - - - - - Blog - - Read our latest news. - - -
- - - -
- -
- - - - -
-); diff --git a/docs/blocks/foundation/EmptyState.mdx b/docs/blocks/foundation/EmptyState.mdx index 545466d0..f1228489 100644 --- a/docs/blocks/foundation/EmptyState.mdx +++ b/docs/blocks/foundation/EmptyState.mdx @@ -1,8 +1,5 @@ -import { Meta, Unstyled } from '@storybook/addon-docs'; -import { NoResults } from './NoResults'; -import { MissingInfo } from './MissingInfo' -import { NothingToDisplay } from './NothingToDisplay' -import { Tabs, TabPanel, TabList, Tab } from '../../../src/layout/Tabs'; +import { Canvas, Meta, Unstyled } from '@storybook/addon-docs'; +import * as EmptyStateStories from './EmptyState.story'; @@ -10,336 +7,8 @@ import { Tabs, TabPanel, TabList, Tab } from '../../../src/layout/Tabs'; The Empty State blocks are useful when a component has no data to display. This is a common scenario when a user has just signed up or has not yet created any content. - - - - - Demo - - - Code - - - -
- -
- - -```tsx -import React, { FC } from 'react'; -import { motion } from 'framer-motion'; -import { Card, Divider } from 'reablocks' + -export const NoResults: FC = () => ( - - -
- No Results Found - - There are no results matching your search criteria. Try adjusting your - filters or search terms to find what you're looking for. - -
- - - - - -
- Documentation -
- - Learn how to integrate our tools with your app. - -
-
- - - - - - - - - - - -
- API's -
- - Explore all API references. - -
-
- - - - - - - - - - - -
- Guide -
- - Easy-to-follow installation guides. - -
-
- - - - - - - - - - - -
- Blog -
- - Read our latest news. - -
-
- - - - - - - -); -``` - - - -
- - - - - Demo - - - Code - - - -
- -
- - -```tsx -import React, { FC } from 'react'; -import { motion } from 'framer-motion'; -import { Button, Card, Input } from 'reablocks' + -export const MissingInfo: FC = () => ( - - - Missing Info - - Oops! It seems like something is missing. Try adjusting your search - criteria or check back later. - - - - - } - fullWidth - containerClassname="max-w-[400px]" - placeholder="Search our site..." - /> - - - -); -``` - - - -
- - - - - Demo - - - Code - - - -
- -
- - -```tsx -import React, { FC } from 'react'; -import { motion } from 'framer-motion'; -import { Button, Card } from 'reablocks' - -export const NothingToDisplay: FC = () => ( - - - - - - Nothing to display - - We couldn't find any data to show here. Try refining your search or come - back later to see if there's anything new. - - - - -); - -``` - - - \ No newline at end of file + diff --git a/docs/blocks/foundation/NoResults.tsx b/docs/blocks/foundation/EmptyState.story.tsx similarity index 66% rename from docs/blocks/foundation/NoResults.tsx rename to docs/blocks/foundation/EmptyState.story.tsx index 8b27ea21..46297c15 100644 --- a/docs/blocks/foundation/NoResults.tsx +++ b/docs/blocks/foundation/EmptyState.story.tsx @@ -1,10 +1,14 @@ -import React, { FC } from 'react'; +import React from 'react'; import { motion } from 'framer-motion'; +import { Card, Divider } from '../../../src/layout'; +import { Button } from '../../../src/elements/Button'; +import { Input } from '../../../src/form/Input'; -import { Card } from '../../../src/layout/Card'; -import { Divider } from '../../../src/layout/Divider'; +export default { + title: 'Blocks/Foundation/Empty State' +}; -export const NoResults: FC = () => ( +export const NoResults = () => ( ( ); + +export const MissingInfo = () => ( + + + Missing Info + + Oops! It seems like something is missing. Try adjusting your search + criteria or check back later. + + + + + } + fullWidth + containerClassname="max-w-[400px]" + placeholder="Search our site..." + /> + + + +); + +export const NothingToDisplay = () => ( + + + + + + Nothing to display + + We couldn't find any data to show here. Try refining your search or come + back later to see if there's anything new. + + + + +); diff --git a/docs/blocks/foundation/LostPage.tsx b/docs/blocks/foundation/LostPage.tsx deleted file mode 100644 index 644fcee9..00000000 --- a/docs/blocks/foundation/LostPage.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import React from 'react'; -import { Button } from '../../../src/elements/Button'; -import { Card } from '../../../src/layout/Card'; -import { Chip } from '../../../src/elements/Chip'; -import { Divider } from '../../../src/layout/Divider'; -import { MotionGroup } from '../../../src/layout/Motion/MotionGroup'; -import { MotionItem } from '../../../src/layout/Motion/MotionItem'; - -import gridPattern from '../../assets/grid.svg'; - -export const LostPage = () => ( -
-
- -
-
- - 404 Error - -
-
- We lost this page -
-
- Let's find a better place for you to go. -
- - - - -
- - - -
- Documentation - - Learn how to integrate our tools. - -
- - Start learning - - - - -
- - - - - -
- - - -
- Guide - - Easy-to-follow installation guides. - -
- - Start learning - - - - -
- - - - - -
- - - -
- Blog - - Read our latest news. - -
- - View latest post - - - - -
- - - - -
-
-
-); diff --git a/docs/blocks/foundation/MissingInfo.tsx b/docs/blocks/foundation/MissingInfo.tsx deleted file mode 100644 index e40f011e..00000000 --- a/docs/blocks/foundation/MissingInfo.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React, { FC } from 'react'; -import { motion } from 'framer-motion'; - -import { Card } from '../../../src/layout/Card'; -import { Input } from '../../../src/form/Input'; -import { Button } from '../../../src/elements/Button'; - -export const MissingInfo: FC = () => ( - - - Missing Info - - Oops! It seems like something is missing. Try adjusting your search - criteria or check back later. - - - - - } - fullWidth - containerClassname="max-w-[400px]" - placeholder="Search our site..." - /> - - - -); diff --git a/docs/blocks/foundation/NotFound.mdx b/docs/blocks/foundation/NotFound.mdx index 4bf8d709..f918d063 100644 --- a/docs/blocks/foundation/NotFound.mdx +++ b/docs/blocks/foundation/NotFound.mdx @@ -1,8 +1,5 @@ -import { Meta, Unstyled } from '@storybook/addon-docs'; -import { NotFound } from './NotFound'; -import { DoesNotExist } from './DoesNotExist'; -import { LostPage } from './LostPage'; -import { Tabs, TabPanel, TabList, Tab } from '../../../src/layout/Tabs'; +import { Canvas, Meta, Unstyled } from '@storybook/addon-docs'; +import * as NotFoundStories from './NotFound.story'; @@ -11,520 +8,8 @@ import { Tabs, TabPanel, TabList, Tab } from '../../../src/layout/Tabs'; The Not Found block provides a way to provide the user with feedback that something is wrong or when a user tries to access a page they do not have access to. - - - - - Demo - - - Code - - - -
- -
- - -```tsx -import React from 'react'; -import { Input, Button } from 'reablocks'; + -export const NotFound = () => ( -
-
-
- 404 -
-
-
-
-
- We lost this page -
-
- The page you are looking for doesnt exist or has been moved. -
- - - - - - - - - - - } - /> -
- -
-
-
-
-); -``` - - - -
- - - - - Demo - - - Code - - - -
- -
- - -```tsx -import React from 'react'; -import { - Button, - Chip, - Divider, - MotionGroup, - MotionItem, - PageTitle, - Stack -} from 'reablocks'; + -export const DoesNotExist = () => ( -
- - - - - - - - - - - - - - - - - - - - - - - - - } - > - 404 - - - This page does not exist - - - Sorry, we couldn't find the page you're looking for. - - -
- - - - - - Documentation - - Learn how to integrate our tools with your app. - - -
- - - -
- - - - - - - - - - APIs - - Explore all API references - - -
- - - -
- - - - - - - - - - Guide - - Easy-to-follow installation guides. - - -
- - - -
- - - - - - - - - - Blog - - Read our latest news. - - -
- - - -
- -
- - - - -
-); -``` - - - -
- - - - - Demo - - - Code - - - -
- -
- - -```tsx -import React from 'react'; -import { Button, Card, Chip, Divider, MotionGroup, MotionItem } from 'reablocks'; - -import gridPattern from '../../assets/grid.svg'; - -export const LostPage = () => ( -
-
- -
-
- - 404 Error - -
-
- We lost this page -
-
- Let's find a better place for you to go. -
- - - - -
- - - -
- Documentation - - Learn how to integrate our tools. - -
- - Start learning - - - - -
- - - - - -
- - - -
- Guide - - Easy-to-follow installation guides. - -
- - Start learning - - - - -
- - - - - -
- - - -
- Blog - - Read our latest news. - -
- - View latest post - - - - -
- - - - -
-
-
-); -``` - - - -``` + diff --git a/docs/blocks/foundation/NotFound.story.tsx b/docs/blocks/foundation/NotFound.story.tsx new file mode 100644 index 00000000..b077cebc --- /dev/null +++ b/docs/blocks/foundation/NotFound.story.tsx @@ -0,0 +1,1267 @@ +import React from 'react'; +import { + Card, + Divider, + MotionGroup, + MotionItem, + Stack +} from '../../../src/layout'; +import { Button } from '../../../src/elements/Button'; +import { Input } from '../../../src/form/Input'; +import { PageTitle } from '../../../src/typography'; +import { Chip } from '../../../src/elements/Chip'; + +export default { + title: 'Blocks/Foundation/Not Found' +}; + +const GridPatternIcon = ({ className }) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export const NotFound = () => ( +
+
+
+ 404 +
+
+
+
+
+ We lost this page +
+
+ The page you are looking for doesnt exist or has been moved. +
+ + + + + + + + + + + } + /> +
+ +
+
+
+
+); + +export const DoesNotExist = () => ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + } + > + 404 + + + This page does not exist + + + Sorry, we couldn't find the page you're looking for. + + +
+ + + + + + Documentation + + Learn how to integrate our tools with your app. + + +
+ + + +
+ + + + + + + + + + APIs + + Explore all API references + + +
+ + + +
+ + + + + + + + + + Guide + + Easy-to-follow installation guides. + + +
+ + + +
+ + + + + + + + + + Blog + + Read our latest news. + + +
+ + + +
+ +
+ + + + +
+); + +export const LostPage = () => ( +
+
+ +
+
+ + 404 Error + +
+
+ We lost this page +
+
+ Let's find a better place for you to go. +
+ + + + +
+ + + +
+ Documentation + + Learn how to integrate our tools. + +
+ + Start learning + + + + +
+ + + + + +
+ + + +
+ Guide + + Easy-to-follow installation guides. + +
+ + Start learning + + + + +
+ + + + + +
+ + + +
+ Blog + + Read our latest news. + +
+ + View latest post + + + + +
+ + + + +
+
+
+); diff --git a/docs/blocks/foundation/NotFound.tsx b/docs/blocks/foundation/NotFound.tsx deleted file mode 100644 index 0086a55b..00000000 --- a/docs/blocks/foundation/NotFound.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { Input } from '../../../src/form/Input'; -import { Button } from '../../../src/elements/Button'; - -export const NotFound = () => ( -
-
-
- 404 -
-
-
-
-
- We lost this page -
-
- The page you are looking for doesnt exist or has been moved. -
- - - - - - - - - - - } - /> -
- -
-
-
-
-); diff --git a/docs/blocks/foundation/NothingToDisplay.tsx b/docs/blocks/foundation/NothingToDisplay.tsx deleted file mode 100644 index f1d188c3..00000000 --- a/docs/blocks/foundation/NothingToDisplay.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { FC } from 'react'; -import { motion } from 'framer-motion'; - -import { Card } from '../../../src/layout/Card'; -import { Button } from '../../../src/elements/Button'; - -export const NothingToDisplay: FC = () => ( - - - - - - Nothing to display - - We couldn't find any data to show here. Try refining your search or come - back later to see if there's anything new. - - - - -); diff --git a/docs/blocks/foundation/Support.tsx b/docs/blocks/foundation/Support.story.tsx similarity index 91% rename from docs/blocks/foundation/Support.tsx rename to docs/blocks/foundation/Support.story.tsx index 6154857e..4041731f 100644 --- a/docs/blocks/foundation/Support.tsx +++ b/docs/blocks/foundation/Support.story.tsx @@ -1,10 +1,14 @@ -import { Input } from '../../../src/form/Input'; -import { Button } from '../../../src/elements/Button'; -import { Card } from '../../../src/layout/Card'; -import { Block } from '../../../src/layout/Block'; -import { useForm, Controller } from 'react-hook-form'; +import React from 'react'; import { motion } from 'framer-motion'; -import { Textarea } from '../../../src/form'; +import { Controller, useForm } from 'react-hook-form'; + +import { Block, Card } from '../../../src/layout'; +import { Input, Textarea } from '../../../src/form'; +import { Button } from '../../../src/elements/Button'; + +export default { + title: 'Blocks/Foundation/Support' +}; export const Support = () => { const {