story(Material) all stories

.storybook/preview.js

@@ -48,7 +48,7 @@ export const parameters = {
  [
  'Mantine',
  'Chakra UI',
- 'Material UI (WIP)',
+ 'Material UI',
  'Semantic UI (WIP)',
  'Bootstrap UI (WIP)',
  'Ant Design (WIP)',

.storybook/stories/Themes/Libraries/chakra-ui/showreel.js

@@ -269,9 +269,9 @@ const Component = () => {
  <IconButton
  aria-label="edit"
  icon={<FaPen />}
- variant="outline"
+ size="xs"
+ variant="ghost"
  colorScheme="teal"
- style={{ backgroundColor: '#ffffff' }}
  onClick={() => setDrawerId(item.id)}
  />
  </div>
@@ -387,7 +387,7 @@ const Component = () => {
  onClick={() => pagination.fns.onSetPage(pagination.state.page - 1)}
  />
 
- {pagination.state.getPages(data.nodes).map((_, index) => (
+ {pagination.state.getPages(modifiedNodes).map((_, index) => (
  <Button
  key={index}
  colorScheme="teal"
@@ -711,9 +711,9 @@ const Component = () => {
  <IconButton
  aria-label="edit"
  icon={<FaPen />}
- variant="outline"
+ size="xs"
+ variant="ghost"
  colorScheme="teal"
- style={{ backgroundColor: '#ffffff' }}
  onClick={() => setDrawerId(item.id)}
  />
  </div>
@@ -829,7 +829,7 @@ const Component = () => {
  onClick={() => pagination.fns.onSetPage(pagination.state.page - 1)}
  />
 
- {pagination.state.getPages(data.nodes).map((_, index) => (
+ {pagination.state.getPages(modifiedNodes).map((_, index) => (
  <Button
  key={index}
  colorScheme="teal"

.storybook/stories/Themes/Libraries/mantine/showreel.js

@@ -245,7 +245,7 @@ const Component = () => {
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
  <span>{item.nodes?.length}</span>
  <ActionIcon
- variant="filled"
+ variant="hover"
  color="blue"
  component="button"
  onClick={() => setDrawerId(item.id)}
@@ -285,7 +285,7 @@ const Component = () => {
  <Checkbox label="Tree" checked />
  </div>
  <div>
- <Checkbox label="Drawer" checked />
+ <Checkbox label="Drawer on Edit" checked />
  </div>
  <div>
  <Checkbox label="Pagination" checked />
@@ -385,13 +385,7 @@ import {
  Space,
  Pagination,
 } from '@mantine/core';
-import {
- FaPen,
- FaSearch,
- FaChevronRight,
- FaChevronDown,
- FaChevronUp,
-} from 'react-icons/fa';
+import { FaPen, FaSearch, FaChevronRight, FaChevronDown, FaChevronUp } from 'react-icons/fa';
 
 import { nodes } from '../../../data';
 
@@ -612,7 +606,7 @@ const Component = () => {
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
  <span>{item.nodes?.length}</span>
  <ActionIcon
- variant="filled"
+ variant="hover"
  color="blue"
  component="button"
  onClick={() => setDrawerId(item.id)}
@@ -652,7 +646,7 @@ const Component = () => {
  <Checkbox label="Tree" checked />
  </div>
  <div>
- <Checkbox label="Drawer" checked />
+ <Checkbox label="Drawer on Edit" checked />
  </div>
  <div>
  <Checkbox label="Pagination" checked />

.storybook/stories/Themes/Libraries/material-ui/base.js

@@ -0,0 +1,95 @@
+import * as React from 'react';
+
+import { CompactTable } from '@table-library/react-table-library/compact';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/material-ui';
+
+import { DocumentationSee } from '../../../documentation';
+import { nodes } from '../../../data';
+
+const key = 'Base';
+
+const Component = () => {
+ const data = { nodes };
+
+ const materialTheme = getTheme(DEFAULT_OPTIONS);
+ const theme = useTheme(materialTheme);
+
+ const COLUMNS = [
+ { label: 'Task', renderCell: (item) => item.name },
+ {
+ label: 'Deadline',
+ renderCell: (item) =>
+ item.deadline.toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ }),
+ },
+ { label: 'Type', renderCell: (item) => item.type },
+ {
+ label: 'Complete',
+ renderCell: (item) => item.isComplete.toString(),
+ },
+ { label: 'Tasks', renderCell: (item) => item.nodes?.length },
+ ];
+
+ return (
+ <>
+ <CompactTable columns={COLUMNS} data={data} theme={theme} />
+
+ <br />
+ <DocumentationSee noLink anchor={'Features'} />
+ </>
+ );
+};
+
+const code = `
+import * as React from 'react';
+
+import { CompactTable } from '@table-library/react-table-library/compact';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/material-ui';
+
+import { DocumentationSee } from '../../../documentation';
+import { nodes } from '../../../data';
+
+const key = 'Base';
+
+const Component = () => {
+ const data = { nodes };
+
+ const materialTheme = getTheme(DEFAULT_OPTIONS);
+ const theme = useTheme(materialTheme);
+
+ const COLUMNS = [
+ { label: 'Task', renderCell: (item) => item.name },
+ {
+ label: 'Deadline',
+ renderCell: (item) =>
+ item.deadline.toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ }),
+ },
+ { label: 'Type', renderCell: (item) => item.type },
+ {
+ label: 'Complete',
+ renderCell: (item) => item.isComplete.toString(),
+ },
+ { label: 'Tasks', renderCell: (item) => item.nodes?.length },
+ ];
+
+ return (
+ <>
+ <CompactTable columns={COLUMNS} data={data} theme={theme} />
+
+ <br />
+ <DocumentationSee noLink anchor={'Features'} />
+ </>
+ );
+};
+`;
+
+export { key, Component, code };