Merge pull request #4284 from grommet/add-more-stories

Add more storybook stories

aries-core/package.json

@@ -25,6 +25,7 @@
     "del": "^6.1.1",
     "dotenv": "^8.2.0",
     "fs-extra": "^11.1.0",
+    "react-syntax-highlighter": "^15.6.1",
     "simple-git": "^3.15.1",
     "storybook": "^8.3.6",
     "webpack": "^5.75.0",

aries-core/src/stories/codeBlocks.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+/* eslint-disable max-len */
+import { CodeBlockExample } from 'aries-site/src/examples/templates/code-blocks/CodeBlocks';
+
+export const CodeBlock = () => <CodeBlockExample />;
+
+export default {
+  title: 'Code Blocks',
+};

aries-core/src/stories/dashboards.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+/* eslint-disable max-len */
+import { DashboardExample } from 'aries-site/src/examples/templates/dashboards/DashboardExample';
+import { ThreeColumnDashboard } from 'aries-site/src/examples/templates/dashboards';
+import { TwoColumnDashboard } from 'aries-site/src/examples/templates/dashboards/TwoColumnDashboard';
+
+export const Dashboard = () => <DashboardExample />;
+export const ThreeColumn = () => <ThreeColumnDashboard />;
+export const TwoColumn = () => <TwoColumnDashboard />;
+
+export default {
+  title: 'Dashboards',
+};

aries-core/src/stories/dataTableCustomization.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+/* eslint-disable max-len */
+import { ColumnSettingsExample } from 'aries-site/src/examples/templates/table-customization/components/ColumnSettingsExample';
+import { TableCustomizationExample } from 'aries-site/src/examples/templates/table-customization/components/TableCustomizationExample';
+
+export const ColumnSettings = () => <ColumnSettingsExample />;
+export const TableCustomization = () => <TableCustomizationExample />;
+
+export default {
+  title: 'DataTable Customization',
+};

aries-core/src/stories/emptyState.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+/* eslint-disable max-len */
+import { ActionEmptyState } from 'aries-site/src/examples/templates/empty-state/ActionEmptyState';
+import { CardEmptyState } from 'aries-site/src/examples/templates/empty-state/CardEmptyState';
+import { EmptyStateExample } from 'aries-site/src/examples/templates/empty-state/EmptyStateExample';
+import { ErrorManagementEmptyState } from 'aries-site/src/examples/templates/empty-state/ErrorManagementEmptyState';
+import { LayerEmptyState } from 'aries-site/src/examples/templates/empty-state/LayerEmptyState';
+import { PageEmptyState } from 'aries-site/src/examples/templates/empty-state/PageEmptyState';
+
+export const Action = () => <ActionEmptyState />;
+export const Card = () => <CardEmptyState />;
+export const EmptyState = () => <EmptyStateExample />;
+export const ErrorManagement = () => <ErrorManagementEmptyState />;
+export const Layer = () => <LayerEmptyState />;
+export const Page = () => <PageEmptyState />;
+
+export default {
+  title: 'Empty State',
+};

aries-core/src/stories/globalNotifications.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+/* eslint-disable max-len */
+import { BannerContentLayoutExample } from 'aries-site/src/examples/templates/global-banner-notifications/BannerContentLayoutExample';
+import { BannerNotificationCritical } from 'aries-site/src/examples/templates/global-banner-notifications/Examples/BannerNotificationCritical';
+import { BannerNotificationCriticalClose } from 'aries-site/src/examples/templates/global-banner-notifications/Examples/BannerNotificationCriticalClose';
+import { BannerNotificationInfo } from 'aries-site/src/examples/templates/global-banner-notifications/Examples/BannerNotificationInfo';
+import { BannerNotificationWarning } from 'aries-site/src/examples/templates/global-banner-notifications/Examples/BannerNotificationWarning';
+import { BannerNotificationWarningClose } from 'aries-site/src/examples/templates/global-banner-notifications/Examples/BannerNotificationWarningClose';
+
+export const ContentLayout = () => <BannerContentLayoutExample />;
+export const Critical = () => <BannerNotificationCritical />;
+export const CriticalClose = () => <BannerNotificationCriticalClose />;
+export const Info = () => <BannerNotificationInfo />;
+export const Warning = () => <BannerNotificationWarning />;
+export const WarningClose = () => <BannerNotificationWarningClose />;
+
+export default {
+  title: 'Global Notifications',
+};

aries-core/src/stories/inlineNotifications.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+/* eslint-disable max-len */
+import { FormValidation } from 'aries-site/src/examples/templates/inline-notifications/InlineFormValidation';
+import { InlineNotificationExample } from 'aries-site/src/examples/templates/inline-notifications/InlineNotificationExample';
+import { PageBannerExample } from 'aries-site/src/examples/templates/inline-notifications/PageBannerExample';
+import { PromotionExample } from 'aries-site/src/examples/templates/inline-notifications/PromotionExample';
+import { StatusUpdateExample } from 'aries-site/src/examples/templates/inline-notifications/StatusUpdateExample';
+
+export const InlineFormValidation = () => <FormValidation />;
+export const InlineNotification = () => <InlineNotificationExample />;
+export const PageBanner = () => <PageBannerExample />;
+export const Promotion = () => <PromotionExample />;
+export const StatusUpdate = () => <StatusUpdateExample />;
+
+export default {
+  title: 'Inline Notifications',
+};

aries-core/src/stories/lists.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+/* eslint-disable max-len */
+import { ListIconIdentifierExample } from 'aries-site/src/examples/templates/list-views/ListIconIdentifierExample';
+import { ListImageIdentifierExample } from 'aries-site/src/examples/templates/list-views/ListImageIdentifierExample';
+import { ListNameDescriptionOptionExample } from 'aries-site/src/examples/templates/list-views/ListNameDescriptionOptionExample';
+import { ListNameExample } from 'aries-site/src/examples/templates/list-views/ListNameExample';
+import { ListNameOptionActionExample } from 'aries-site/src/examples/templates/list-views/ListNameOptionActionExample';
+import { ListOrderExample } from 'aries-site/src/examples/templates/list-views/ListOrderExample';
+import { ListScreenExample } from 'aries-site/src/examples/templates/list-views/ListScreenExample';
+
+export const IconIdentifier = () => <ListIconIdentifierExample />;
+export const ImageIdentifier = () => <ListImageIdentifierExample />;
+export const NameDescriptionOption = () => <ListNameDescriptionOptionExample />;
+export const Name = () => <ListNameExample />;
+export const NameOptionAction = () => <ListNameOptionActionExample />;
+export const Order = () => <ListOrderExample />;
+export const Screen = () => <ListScreenExample />;
+
+export default {
+  title: 'Lists',
+};

aries-core/src/stories/managingChildObjects.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+/* eslint-disable max-len */
+import { CreateCluster } from 'aries-site/src/examples/templates/forms/managing-child-objects/CreateCluster';
+import { CreateRole } from 'aries-site/src/examples/templates/forms/managing-child-objects/CreateRole';
+import { EditRole } from 'aries-site/src/examples/templates/forms/managing-child-objects/EditRole';
+
+export const OptionalChildren = () => <CreateRole />;
+export const RequiredChildren = () => <CreateCluster />;
+export const RemoveAllAction = () => <EditRole />;
+
+export default {
+  title: 'Managing Child Objects',
+};

aries-core/src/stories/popover.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+/* eslint-disable max-len */
+import { PopoverInlineExample } from 'aries-site/src/examples/templates/popover/PopoverInlineExample';
+import { PopoverSimpleExample } from 'aries-site/src/examples/templates/popover/PopoverSimpleExample';
+
+export const PopoverInline = () => <PopoverInlineExample />;
+export const PopoverSimple = () => <PopoverSimpleExample />;
+
+export default {
+  title: 'Popover',
+};

aries-core/src/stories/wizard.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+/* eslint-disable max-len */
+import { TwoColumnWizardExample } from 'aries-site/src/examples/templates/wizard/TwoColumnWizardExample';
+import { WizardValidationExample } from 'aries-site/src/examples/templates/wizard/WizardValidationExample';
+
+export const TwoColumnWizard = () => <TwoColumnWizardExample />;
+export const WizardValidation = () => <WizardValidationExample />;
+
+export default {
+  title: 'Wizard',
+};

yarn.lock

@@ -11569,7 +11569,7 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react-syntax-highlighter@^15.5.0:
+react-syntax-highlighter@^15.5.0, react-syntax-highlighter@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.6.1.tgz#fa567cb0a9f96be7bbccf2c13a3c4b5657d9543e"
   integrity sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==