@pautena/react-design-system 0.4.3 → 0.4.4

package/src/components/value-displays/value-content/value-content.stories.tsx

@@ -5,7 +5,7 @@ import { Typography } from "@mui/material";
 import React from "react";
 
 export default {
-  title: "Value displays/ValueContent",
+  title: "Components/Value displays/ValueContent",
   component: ValueContent,
   decorators: [withContainer({ width: 200 })],
   parameters: {

package/src/components/value-displays/value-content/value-content.tsx

@@ -1,6 +1,5 @@
 import { Box, Tooltip, Typography } from "@mui/material";
-import React, { PropsWithChildren } from "react";
-import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+import React from "react";
 
 export const getValueContentLabelId = (label: string): string =>
   `label-${label.replace(/ /g, "-")}`;

package/src/components/value-displays/value-datetime/value-datetime.stories.tsx

@@ -3,7 +3,7 @@ import { ValueDatetime } from "./value-datetime";
 import { createTemplate, withContainer } from "../../../storybook";
 
 export default {
-  title: "Value displays/ValueDate",
+  title: "Components/Value displays/ValueDatetime",
   component: ValueDatetime,
   decorators: [withContainer({ width: 200 })],
   parameters: {

package/src/components/value-displays/value-datetime/value-datetime.tsx

@@ -1,4 +1,4 @@
-import { Box, Tooltip, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import React from "react";
 import { format } from "date-fns";
 import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";

package/src/components/value-displays/value-displays.stories.mdx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Value displays/Introduction" />
+
+# Value Displays
+
+<ul>
+  <li><LinkTo kind="Components/Value displays/GroupValueCard">GroupValueCard</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueBoolean">ValueBoolean</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueCard">ValueCard</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueContent">ValueContent</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueDatetime">ValueDatetime</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueImage">ValueImage</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueText">ValueText</LinkTo></li>
+</ul>

package/src/components/value-displays/value-image/value-image.stories.tsx

@@ -4,7 +4,7 @@ import { createTemplate, withContainer } from "../../../storybook";
 import workInProgressImg from "../../../stories/assets/work-in-progress.jpg";
 
 export default {
-  title: "Value displays/ValueImage",
+  title: "Components/Value displays/ValueImage",
   component: ValueImage,
   decorators: [withContainer({ width: 200 })],
   parameters: {

package/src/components/value-displays/value-image/value-image.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "~/tests/testing-library";
 import { ValueImage } from "./value-image";
-import workInProgressImg from "~/stories/assets/work-in-progress.jpg";
+import workInProgressImg from "../../../stories/assets/work-in-progress.jpg";
 
 describe("ValueImage", () => {
   const renderComponent = () => {

package/src/components/value-displays/value-text/value-text.stories.tsx

@@ -3,7 +3,7 @@ import { ValueText } from "./value-text";
 import { createTemplate, withContainer } from "../../../storybook";
 
 export default {
-  title: "Value displays/ValueText",
+  title: "Components/Value displays/ValueText",
   component: ValueText,
   decorators: [withContainer({ width: 200 })],
   parameters: {

package/src/generators/generators.stories.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Generators/Introduction" />
+
+# Generators
+
+<ul>
+  <li><LinkTo kind="Generators/ModelForm">ModelForm</LinkTo></li>
+  <li><LinkTo kind="Generators/ModelRouter/DummyModelRouter">ModelRouter</LinkTo></li>
+  <li><LinkTo kind="Generators/ObjectDetails">ObjectDetails</LinkTo></li>
+  <li><LinkTo kind="Generators/TableList">TableList</LinkTo></li>
+</ul>

package/src/generators/index.ts

@@ -2,3 +2,4 @@ export * from "./object-details";
 export * from "./model-router";
 export * from "./generators.model";
 export * from "./model-form";
+export * from "./table-list";

package/src/generators/model-router/screens/list-screen.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Content, Header, HeaderAction, TableList, TableRowOption } from "~/components";
+import { Content, Header, HeaderAction } from "~/components";
+import { TableList, TableRowOption } from "../../table-list";
 import { BasicModelInstance } from "../../generators.model";
 import { useNotifyWhenValueChanges } from "~/providers";
 import { HeaderLayout } from "../../../layouts";

package/src/generators/model-router/stories/model-router.stories.tsx

@@ -218,7 +218,7 @@ export const InternalModelRouter = () => {
 };
 
 export default {
-  title: "Generators/ModelRouter",
+  title: "Generators/ModelRouter/DummyModelRouter",
   component: DummyModelRouter,
   decorators: [withMemoryRouter(), withNotificationCenter, withLocalizationProvider],
   parameters: {

package/src/{components → generators}/table-list/table-list.stories.tsx

@@ -9,7 +9,7 @@ import { BasicModelInstance } from "~/generators";
 const maxColumns = 3;
 
 export default {
-  title: "Tables/TableList",
+  title: "Generators/TableList",
   component: TableList,
   parameters: {
     layout: "fullscreen",

package/src/{components → generators}/table-list/table-list.test.tsx

@@ -3,8 +3,8 @@ import { render } from "~/tests/testing-library";
 import { screen } from "@testing-library/react";
 import userEvents from "@testing-library/user-event";
 import { TableRowOption, TableList } from "./table-list";
-import { HeadCell } from "../table/enhanced-table";
-import { BasicModelInstance } from "../../generators";
+import { HeadCell } from "../../components/tables/enhanced-table";
+import { BasicModelInstance } from "..";
 import { expectProgressIndicator } from "~/tests/assertions";
 
 const columns: HeadCell<BasicModelInstance>[] = [

package/src/{components → generators}/table-list/table-list.tsx

@@ -1,8 +1,8 @@
 import { TableRow, TableCell, IconButton, MenuItem, Menu } from "@mui/material";
 import React from "react";
-import { EnhancedTable, HeadCell, Order } from "../table/enhanced-table";
+import { EnhancedTable, HeadCell, Order } from "../../components/tables/enhanced-table";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-import { BasicModelInstance } from "../../generators/generators.model";
+import { BasicModelInstance } from "../generators.model";
 
 const OptionsId = "__options";
 

package/src/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.stories.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { AppBarWithDrawerLayout } from "./app-bar-with-drawer-layout";
-import { ContentPlaceholder } from "~/tests/components";
-import { mockNav } from "../../components/drawer/drawer.mock";
-import { MiniAppBar } from "../../components/app-bar";
-import { DrawerContent, MiniDrawer } from "../../components";
+import { mockNav } from "../../components/drawers/drawer/drawer.mock";
+import { MiniAppBar } from "../../components/app-bars/app-bar";
+import { ContentPlaceholder, DrawerContent, MiniDrawer } from "../../components";
 import { withMemoryRouter } from "~/storybook";
 
 export default {

package/src/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import { styled } from "@mui/material/styles";
-import { AppBarElement } from "../../components/app-bar";
-import { DrawerElement } from "../../components/drawer";
+import { AppBarElement } from "../../components/app-bars/app-bar";
+import { DrawerElement } from "../../components/drawers/drawer";
 import { Box } from "@mui/material";
-import { DrawerProvider } from "../../components/drawer/drawer.provider";
+import { DrawerProvider } from "../../components/drawers/drawer/drawer.provider";
 
 const DrawerHeader = styled("div")(({ theme }) => ({
   display: "flex",

package/src/layouts/header-layout/header-layout.stories.tsx

@@ -3,12 +3,11 @@ import { ComponentMeta } from "@storybook/react";
 import { createTemplate } from "../../storybook";
 import { HeaderLayout, HeaderLayoutProps } from "./header-layout";
 import { withMemoryRouter } from "~/storybook";
-import { SkeletonGrid } from "../../tests/components";
 import { withFullHeight } from "../../storybook";
-import { Content, Header, HeaderProps, HeaderTab, TableList, TabPanel } from "../../components";
+import { Content, Header, HeaderProps, HeaderTab, SkeletonGrid, TabPanel } from "../../components";
 import { Box, Typography } from "@mui/material";
 import { useDemoData } from "@mui/x-data-grid-generator";
-import { ModelForm, ObjectDetails } from "../../generators";
+import { ModelForm, ObjectDetails, TableList } from "../../generators";
 import { mockModel, createModelInstance } from "../../generators/generators.mock";
 import { action } from "@storybook/addon-actions";
 import { DataGrid } from "@mui/x-data-grid";
@@ -153,14 +152,16 @@ Form.args = {
 };
 
 const DataTableContent = () => {
-  const { data } = useDemoData({
+  const {
+    data: { rows, columns },
+  } = useDemoData({
     dataSet: "Commodity",
     rowLength: 100,
     maxColumns: 7,
     editable: true,
   });
 
-  return <DataGrid rows={data.rows} columns={data.columns} pagination sx={{ height: 400 }} />;
+  return <DataGrid rows={rows} columns={columns as any} pagination sx={{ height: 400 }} />;
 };
 
 export const DataTable = Template.bind({});

package/src/layouts/header-layout/header-layout.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import React from "react";
 import { ContentElement, HeaderElement } from "../../components";
-import { LoadingArea } from "../../components/loading-area";
+import { LoadingArea } from "../../components/feedback/loading-area";
 import { TabProvider } from "../../providers";
 
 export interface HeaderLayoutProps {

package/src/layouts/layouts.stories.mdx

@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Layouts/Introduction" />
+
+## Layouts
+
+<ul>
+  <li><LinkTo kind="Layouts/AppBarWithDrawer">AppBarWithDrawer</LinkTo></li>
+  <li><LinkTo kind="Layouts/HeaderLayout">HeaderLayout</LinkTo></li>
+</ul>

package/src/providers/notification-center/notification-center.stories.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { NotificationCenterProvider } from "./notification-center.provider";
 import { useNotificationCenter } from "./notification-center.context";
-import { ContentPlaceholder } from "~/tests/components";
 import { Button, Box } from "@mui/material";
+import { ContentPlaceholder } from "~/components";
 
 const DummyError = {
   title: "Internal Server error",
@@ -11,7 +11,7 @@ const DummyError = {
 };
 
 export default {
-  title: "Providers/NotificationCenter",
+  title: "Components/Feedback/NotificationCenter",
   component: ContentPlaceholder,
   decorators: [
     (Story) => (

package/src/stories/Introduction.stories.mdx

@@ -1,201 +1,26 @@
 import { Meta } from '@storybook/addon-docs';
-import Colors from './assets/colors.svg';
-import StackAlt from './assets/stackalt.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
+import LinkTo from '@storybook/addon-links/react';
+import {hrefTo} from '@storybook/addon-links';
 import WorkInProgress from './assets/work-in-progress.jpg'
 
 <Meta title="Introduction" />
 
-<style>
-  {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 900;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
-
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-      row-gap: 10px;
-      margin-bottom: 16px;
-    }
-
-    @media (min-width: 620px) {
-      .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
-      }
-    }
-
-    .link-item {
-      display: block;
-      padding: 20px 30px 20px 15px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
-
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
-
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
-
-    .link-item span {
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
-
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
-    }
-
-    .wip-img {
-      margin-bottom: 16px;
-    }
-  `}
-</style>
-
 # Welcome to @pautena/react-desgin-system!
 
-Welcome to ```@pautena/react-desgin-system```, the Desgin System with a bunch of components and layouts that
-that I use to create my personal projects.
-
 **WORK IN PROGRESS**
 
 <img src={WorkInProgress} width="200" height="180" class="wip-img"/>
 
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Getting started</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Components</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Layouts</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Generator</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-## Getting started
-
-This project is available as an [npm package](https://www.npmjs.com/package/@pautena/react-design-system).
-
-npm:
-
-```bash
-npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/lab @mui/material @mui/x-data-grid react-dom react-router-dom
-```
-
-yarn:
-
-```bash
-npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/lab @mui/material @mui/x-data-grid react-dom react-router-dom
-```
-
-Now you are going to be able to import the components and use it in your React project.
-
-```javascript
-import { AppBarWithDrawerLayout } from "@pautena/react-design-system";
-```
+Welcome to ```@pautena/react-desgin-system```, the Desgin System with a bunch of components and layouts that
+that I use to create my personal projects.
 
 
+<ul>
+  <li><LinkTo kind="Getting Started">Getting Started</LinkTo></li>
+  <li><LinkTo kind="Components" story="Introduction">Components</LinkTo></li>
+  <li><LinkTo kind="Layouts" story="Introduction">Layouts</LinkTo></li>
+  <li><LinkTo kind="Generators" story="Introduction">Generators</LinkTo></li>
+</ul>
 
 # Source code
 

package/src/stories/getting-started.stories.mdx

@@ -0,0 +1,23 @@
+<Meta title="Getting Started" />
+
+## Getting started
+
+This project is available as an [npm package](https://www.npmjs.com/package/@pautena/react-design-system).
+
+npm:
+
+```bash
+npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/lab @mui/material @mui/x-data-grid react-dom react-router-dom
+```
+
+yarn:
+
+```bash
+npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/lab @mui/material @mui/x-data-grid react-dom react-router-dom
+```
+
+Now you are going to be able to import the components and use it in your React project.
+
+```javascript
+import { AppBarWithDrawerLayout } from "@pautena/react-design-system";
+```

package/src/tests/datatable-placeholder/datatable-placeholder.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { DatatablePlaceholder } from "./datatable-placeholder";
+
+export default {
+  title: "Components/Placeholders/DatatablePlaceholder",
+  component: DatatablePlaceholder,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof DatatablePlaceholder>;
+
+const Template = createTemplate(DatatablePlaceholder);
+
+export const Default = Template.bind({});

package/src/tests/datatable-placeholder/datatable-placeholder.tsx

@@ -0,0 +1,40 @@
+import { Box } from "@mui/material";
+import { DataGrid } from "@mui/x-data-grid";
+import { useDemoData } from "@mui/x-data-grid-generator";
+import React from "react";
+
+export interface DatatablePlaceholderProps {
+  rowLength?: number;
+  maxColumns?: number;
+  dataSet?: "Commodity" | "Employee";
+  height?: number;
+}
+
+export const DatatablePlaceholder = ({
+  rowLength = 1000,
+  maxColumns = 10,
+  height = 400,
+  dataSet = "Commodity",
+}: DatatablePlaceholderProps) => {
+  const {
+    data: { rows, columns },
+  } = useDemoData({
+    dataSet,
+    rowLength,
+    maxColumns,
+  });
+
+  return (
+    <Box sx={{ height, width: 1 }}>
+      <DataGrid
+        rows={rows}
+        columns={columns as any}
+        pageSize={5}
+        rowsPerPageOptions={[5]}
+        checkboxSelection
+        disableSelectionOnClick
+        experimentalFeatures={{ newEditingApi: true }}
+      />
+    </Box>
+  );
+};

package/src/tests/datatable-placeholder/index.ts

@@ -0,0 +1 @@
+export * from "./datatable-placeholder";

package/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}

package/src/components/drawer-section/drawer-section.tsx

@@ -1,40 +0,0 @@
-import { List, ListSubheader } from "@mui/material";
-import React from "react";
-import { DrawerItem } from "../drawer-item";
-import { NavItem } from "../drawer/drawer.types";
-
-export interface DrawerSectionProps {
-  /**
-   * Section title
-   */
-  title?: string;
-  /**
-   * List of items of that section
-   */
-  items: NavItem[];
-}
-
-/**
- * Render a group of items inside the drawer
- * with an optional title
- */
-export const DrawerSection = ({ title, items }: DrawerSectionProps) => {
-  return (
-    <>
-      {title && <ListSubheader role="heading">{title}</ListSubheader>}
-      <List>
-        {items.map(({ id, text, icon, avatar, label, bullet, href }) => (
-          <DrawerItem
-            key={id}
-            text={text}
-            icon={icon}
-            avatar={avatar}
-            label={label}
-            bullet={bullet}
-            href={href}
-          />
-        ))}
-      </List>
-    </>
-  );
-};