@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/Grid/GridPatterns.stories.tsx

@@ -1,420 +0,0 @@
-import * as React from 'react';
-
-import {ClickableCard} from '../Card';
-import {ICON_SIZE, ICON_TYPE, SemanticIcon} from '../Icon';
-import {Menu} from '../Menu';
-import {SearchInput} from '../SearchInput';
-import {SubTitleMedium, SubTitleSmall} from '../Text';
-
-import {Col, Row} from './Grid';
-
-import css from './GridPatterns.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Layout/Grid Patterns',
-  component: [Row, Col],
-  parameters: {
-    docs: {
-      subtitle: 'Common Layout Patterns Using Grid Components',
-      description: {
-        component: `
-\`\`\`js
-import { Row, Col } from "@spaced-out/ui-design-system/lib/components/Grid";
-\`\`\`
-
-You can use the Grid component to create various layout patterns for your application. This collection showcases common patterns and use cases.
-
-
-### Usage
-
-
-\`\`\`jsx
-const CardGridWithMenu = () => (
-  <div className={styles.layoutContainer}>
-    <Row className={css.gridRowContainer}>
-      <Col className={styles.leftPortion} span={2}>
-        <Menu
-          options={menuOptions}
-          selectedKeys={[selectedOption]}
-          onSelect={handleMenuSelect}
-          size="small"
-        />
-      </Col>
-      <Col className={styles.rightPortion} span={10}>
-        <div className={styles.contentContainer}>
-          <SearchInput
-            placeholder="Search items"
-            onChange={handleSearch}
-            value={searchText}
-            onClear={handleClear}
-          />
-          <GridWithCards productList={productList} />
-        </div>
-      </Col>
-    </Row>
-  </div>
-);
-
-const GridWithCards = ({productList}) =>
-  productList.map((product) => {
-    const dashboardCount = product.dashboards.length ?? 0;
-    const productNameWithDashboardCount = \`\${product.name} (\${dashboardCount})\`;
-    return (
-      <div key={product.name} className={css.productContainer}>
-        <SubTitleSmall className={css.productHeader}>
-          {productNameWithDashboardCount}
-        </SubTitleSmall>
-        <Row className={css.productCardContainer} gridType="autoFill">
-          {product.dashboards.map((dashboard) => (
-            <Col key={dashboard.name} className={css.productCard}>
-              <DashboardCard
-                iconName={dashboard.icon}
-                dashboard={dashboard}
-                productName={dashboard.name}
-              />
-            </Col>
-          ))}
-        </Row>
-      </div>
-    );
-  });
-
-const DashboardCard = ({iconName, dashboard, onClick}) => (
-  <div className={css.dashboardCard}>
-    <ClickableCard
-      classNames={{
-        wrapper: css.dashBoardCardFluid,
-      }}
-      onClick={() => onClick?.(dashboard)}
-    >
-      <div className={css.cardItemsContainer}>
-        <SemanticIcon
-          name={iconName}
-          size={ICON_SIZE.large}
-          type={ICON_TYPE.solid}
-        />
-        <SubTitleMedium>{dashboard.name}</SubTitleMedium>
-      </div>
-    </ClickableCard>
-  </div>
-);
-\`\`\`
-
-\`\`\`css
-.gridRowContainer {
-  padding: spaceNone;
-}
-
-.productContainer {
-  display: flex;
-  flex-flow: column;
-  gap: spaceXSmall;
-  margin-bottom: spaceMedium;
-}
-
-.productHeader {
-  margin-bottom: spaceXSmall;
-}
-
-.productCardContainer {
-  grid-template-columns: repeat(auto-fill, minmax(size320, 1fr));
-  padding: unset;
-}
-
-.productCard {
-  grid-column: auto / span 1;
-}
-
-.dashBoardCardFluid {
-  min-width: size240;
-  width: sizeFluid;
-  position: relative;
-}
-
-.cardItemsContainer {
-  display: flex;
-  gap: spaceMedium;
-}
-
-.layoutContainer {
-  display: flex;
-  flex-direction: column;
-  gap: spaceMedium;
-  width: sizeFluid;
-}
-
-
-.dashboardCard {
-  min-width: size240;
-  width: sizeFluid;
-  position: relative;
-}
-
-.leftPortion {
-  width: size300;
-  align-items: flex-start;
-  padding: spaceMedium spaceNone spaceMedium spaceMedium;
-  box-sizing: content-box;
-  overflow-y: auto;
-  padding: spaceNone;
-}
-
-.rightPortion {
-  align-items: flex-start;
-  overflow: auto;
-  padding: spaceMedium spaceMedium spaceMedium spaceNone;
-  height: calc(sizeFullViewportHeight - size40);
-  padding: spaceNone;
-}
-
-.productCatalogContainer {
-  display: flex;
-  flex-flow: column;
-  gap: spaceMedium;
-  overflow: auto;
-  padding: spaceXSmall;
-  width: sizeFluid;
-}
-
-.searchInput {
-  width: calc(size320 + spaceMedium);
-}
-
-.productListSelectionContainer {
-  padding: spaceMedium;
-  width: size300;
-  min-width: size300;
-  max-height: unset;
-  height: -moz-fit-content;
-  height: fit-content;
-  z-index: unset;
-  box-shadow: unset;
-}
-
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-const productCatalogListData = [
-  {
-    dashboards: [
-      {
-        icon: 'gauge',
-        name: 'Performance',
-      },
-      {
-        icon: 'hand-holding-dollar',
-        name: 'Talent Engagement ROI',
-      },
-    ],
-
-    icon: 'gauge',
-    name: 'Performance',
-  },
-  {
-    dashboards: [
-      {
-        icon: 'bullseye-pointer',
-        name: 'Overview',
-      },
-      {
-        icon: 'truck',
-        name: 'Delivery History',
-      },
-      {
-        icon: 'link',
-        name: 'External Link Clicks (Old)',
-      },
-      {
-        icon: 'handshake-angle',
-        name: 'Engagement and Deliverability',
-      },
-      {
-        icon: 'link',
-        name: 'External Link Clicks',
-      },
-    ],
-
-    icon: 'bullseye-pointer',
-    name: 'Journey',
-  },
-  {
-    dashboards: [
-      {
-        icon: 'handshake-angle',
-        name: 'Engagement and Deliverability',
-      },
-    ],
-
-    icon: 'bullseye-pointer',
-    name: 'Workflow',
-  },
-  {
-    dashboards: [
-      {
-        icon: 'comment-lines',
-        name: 'Responses',
-      },
-      {
-        icon: 'flag-pennant',
-        name: 'Flagged Responses',
-      },
-      {
-        icon: 'hundred-points',
-        name: 'NPS Overview',
-      },
-      {
-        icon: 'block-question',
-        name: 'Surveys and NPS',
-      },
-    ],
-
-    icon: 'block-question',
-    name: 'Survey and NPS',
-  },
-];
-
-const menuOptions = productCatalogListData.map((item) => ({
-  iconLeft: item.icon,
-  label: item.name,
-  key: item.name.toLowerCase(),
-}));
-
-export const _CardGrid = () => (<GridWithCards productList={productCatalogListData} />);
-
-export const _CardGridWithMenu = () => {
-  const [searchText, setSearchText] = React.useState('');
-  const [productList, setProductList] = React.useState(productCatalogListData);
-
-  const [selectedProductOption, setSelectedProductOption] =
-    React.useState('showAll');
-
-  // @ts-ignore - TS2322 - Type 'MenuOption' is not assignable to type 'MenuOption'.
-  const onMenuSelect = (option: MenuOption) => {
-    setSearchText('');
-    if (option.key === 'showAll') {
-      setProductList(productCatalogListData);
-    } else {
-      const filteredList = productCatalogListData.filter(
-        (item) => item.name.toLowerCase() === option.label?.toLowerCase(),
-      );
-      setProductList(filteredList);
-    }
-    setSelectedProductOption(option.key);
-  };
-
-  const handleOnSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setSearchText(value);
-    const filteredList = productCatalogListData
-      .map((item) => {
-        const filteredDashboards = item.dashboards.filter((dashboard) =>
-          dashboard.name
-            .trim()
-            .toLowerCase()
-            .includes(value.trim().toLowerCase()),
-        );
-        return {
-          ...item,
-          dashboards: filteredDashboards,
-        };
-      })
-      .filter((item) => item.dashboards.length > 0);
-
-    setProductList(filteredList);
-  };
-
-  const handleClear = () => {
-    setSearchText('');
-    setProductList(productCatalogListData);
-  };
-
-  return (
-    <Row className={css.gridRowContainer}>
-      <Col className={css.leftPortion} span={2}>
-        <Menu
-          onSelect={onMenuSelect}
-          options={[
-            {
-              iconLeft: 'grid-horizontal',
-              iconLeftType: 'solid',
-              label: 'Show All',
-              key: 'showAll',
-            },
-            ...menuOptions,
-          ]}
-          selectedKeys={[selectedProductOption]}
-          classNames={{wrapper: css.productListSelectionContainer}}
-          size="small"
-        />
-      </Col>
-      <Col className={css.rightPortion} span={10}>
-        <div className={css.productCatalogContainer}>
-          <SearchInput
-            placeholder="Search for dashboard"
-            onChange={handleOnSearch}
-            value={searchText}
-            onClear={handleClear}
-            classNames={{wrapper: css.searchInput}}
-          />
-          <GridWithCards productList={productList} />
-        </div>
-      </Col>
-    </Row>
-  );
-};
-// @ts-ignore - TS7031 - Binding element 'productList' implicitly has an 'any' type.
-const GridWithCards = ({productList}) =>
-// @ts-ignore - TS7006 - Parameter 'product' implicitly has an 'any' type.
-  productList.map((product) => {
-    const dashboardCount = product.dashboards.length ?? 0;
-    const productNameWithDashboardCount = `${product.name} (${dashboardCount})`;
-    return (
-      <div key={product.name} className={css.productContainer}>
-        <SubTitleSmall className={css.productHeader}>
-          {productNameWithDashboardCount}
-        </SubTitleSmall>
-        <Row className={css.productCardContainer} gridType="autoFill">
-{ /* @ts-ignore - TS7006 - Parameter 'dashboard' implicitly has an 'any' type. */}
-          {product.dashboards.map((dashboard) => (
-            <Col key={`${dashboard.name}`} className={css.productCard}>
-              <DashboardCard
-                iconName={dashboard.icon}
-                dashboard={dashboard}
-// @ts-ignore - TS2322 - Type '{ iconName: any; dashboard: any; productName: any; }' is not assignable to type 'IntrinsicAttributes & { iconName: any; dashboard: any; onClick: any; }'.
-                productName={dashboard.name}
-              />
-            </Col>
-          ))}
-        </Row>
-      </div>
-    );
-  });
-
-// @ts-ignore - TS7031 - Binding element 'iconName' implicitly has an 'any' type. | TS7031 - Binding element 'dashboard' implicitly has an 'any' type. | TS7031 - Binding element 'onClick' implicitly has an 'any' type.
-const DashboardCard = ({iconName, dashboard, onClick}) => (
-  <div className={css.dashboardCard}>
-    <ClickableCard
-      classNames={{
-        wrapper: css.dashBoardCardFluid,
-      }}
-      onClick={() => onClick?.(dashboard)}
-    >
-      <div className={css.cardItemsContainer}>
-        <SemanticIcon
-          name={iconName}
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type '"small" | "large" | "medium" | undefined'.
-          size={ICON_SIZE.large}
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type '"regular" | "solid" | "duotone" | "brands" | undefined'.
-          type={ICON_TYPE.solid}
-        />
-        <SubTitleMedium>{dashboard.name}</SubTitleMedium>
-      </div>
-    </ClickableCard>
-  </div>
-);

package/lib/components/Grid/Row.stories.tsx

@@ -1,135 +0,0 @@
-import * as React from 'react';
-
-import {size125} from '../../styles/variables/_size';
-import {BodySmall} from '../Text';
-
-import type {RowProps} from './Grid';
-import {Col, Row} from './Grid';
-
-import css from './Grid.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Layout/Grid/Row',
-  component: [Row],
-  argTypes: {
-    className: {
-      description: 'External className to be applied on Row',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Grid component',
-      description: {
-        component: `
-\`\`\`js
-import { Row } from "@spaced-out/ui-design-system/lib/components/Grid";
-\`\`\`js
-In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.
-Establish a set of column in the horizontal space defined by row (abbreviated col).
-Row component will be the outer space definer and Col will be child to Row. Row will take the width of the container and divide the space horizontally in 12 spans (for medium).
-The child Cols can take space of one or more span or can have offset(empty space) of one of more span.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Grid/Grid.jsx',
-    },
-  },
-};
-
-export const _Row = (args: RowProps) => (<Row className={css.rowContainer} {...args}>
-  <Col className={css.sampleBox} span={2}>
-    <BodySmall color="inversePrimary">Hello 1</BodySmall>
-  </Col>
-  <Col className={css.sampleBox} span={3}>
-    <BodySmall color="inversePrimary">Hello 2</BodySmall>
-  </Col>
-  <Col className={css.sampleBox} offset={1}>
-    <BodySmall color="inversePrimary">Hello 3</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 4</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 5</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 6</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 7</BodySmall>
-  </Col>
-  <Col className={css.sampleBox} span={2}>
-    <BodySmall color="inversePrimary">Hello 8</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 9</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 10</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 11</BodySmall>
-  </Col>
-  <Col className={css.sampleBox}>
-    <BodySmall color="inversePrimary">Hello 12</BodySmall>
-  </Col>
-  <Col className={css.sampleBox} span={3}>
-    <BodySmall color="inversePrimary">Hello 13</BodySmall>
-  </Col>
-</Row>);
-
-export const _ResponsiveRow = (args: RowProps) => (<Row className={css.responsiveRowContainer} {...args}>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 1</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 2</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 3</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 4</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 5</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 6</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 7</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 8</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 9</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 10</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 11</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 12</BodySmall>
-  </Col>
-  <Col className={css.responsiveSampleBox}>
-    <BodySmall color="inversePrimary">Hello 13</BodySmall>
-  </Col>
-</Row>);
-
-_ResponsiveRow.args = {
-  gridType: 'autoFill',
-  repeatTracks: `minmax(${size125}, 1fr)`,
-};