@licklist/design 0.44.485-dev.67 → 0.44.485-dev.7

package/src/radio-card/RadioCard.tsx

@@ -1,49 +0,0 @@
-import clsx from "clsx";
-import React, { ReactNode } from "react";
-import { Form } from "react-bootstrap";
-import { FormCheckInputProps } from "react-bootstrap/esm/FormCheckInput";
-import { Path, RegisterOptions, useFormContext } from "react-hook-form";
-
-export type RadioCardProps<FormModel> = {
-  label: string;
-  description: ReactNode;
-  name: Path<FormModel>;
-  value: string;
-  rules: RegisterOptions<FormModel>;
-  inputProps?: FormCheckInputProps;
-};
-
-export const RadioCard = <FormModel,>({
-  label,
-  description,
-  name,
-  value,
-  rules,
-  inputProps,
-}: RadioCardProps<FormModel>) => {
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext<FormModel>();
-
-  const isInvalid = !!errors[name as string] || inputProps?.isInvalid;
-
-  return (
-    <Form.Check className={clsx("radio-card", isInvalid && "invalid")}>
-      <Form.Check.Label>
-        <div className="radio-card-controls">
-          <Form.Check.Input
-            type="radio"
-            isInvalid={isInvalid}
-            value={value}
-            {...register(name, rules)}
-            {...inputProps}
-          />
-          <span>{label}</span>
-        </div>
-
-        <p className="radio-card-description">{description}</p>
-      </Form.Check.Label>
-    </Form.Check>
-  );
-};

package/src/radio-card/index.ts

@@ -1 +0,0 @@
-export { RadioCard } from "./RadioCard";

package/src/sorting-select/SortingSelect.stories.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { SortingSelect, SortingSelectProps } from "./SortingSelect";
-
-export default {
-  title: "SortingSelect",
-} as Meta;
-
-export const Default: Story<SortingSelectProps> = (props) => {
-  return <SortingSelect {...props} />;
-};
-
-Default.args = {
-  onSortingChange: () => null,
-};

package/src/sorting-select/SortingSelect.tsx

@@ -1,79 +0,0 @@
-import React, { useEffect, useState } from "react";
-import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
-import { Form, FormGroupProps } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import {
-  SORT_DIRECTION_ASC,
-  SORT_DIRECTION_NEWEST,
-  SORT_DIRECTION_DESC,
-  SORT_KEY_NAME,
-  SORT_KEY_CREATED_AT,
-} from "@licklist/core/dist/Config";
-
-export type SortingSelectProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  formGroupProps?: FormGroupProps & Record<string, any>;
-  defaultSortKey?: string;
-  defaultSortDirection?: string;
-  onSortingChange?: (url: URLSearchParams) => void;
-};
-
-export const SortingSelect = ({
-  formGroupProps,
-  defaultSortKey = SORT_KEY_NAME,
-  defaultSortDirection = SORT_DIRECTION_ASC,
-  onSortingChange,
-}: SortingSelectProps) => {
-  const { t } = useTranslation("Design");
-  const [controlValue, setControlValue] = useState(SORT_DIRECTION_ASC);
-  const searchParams = useQuery();
-
-  const { sortKey = defaultSortKey, sortDirection = defaultSortDirection } =
-    Object.fromEntries(searchParams);
-
-  const onSortingValueChange = ({ target: { value } }) => {
-    setControlValue(value);
-
-    const nextSortDirection =
-      value === SORT_DIRECTION_NEWEST ? SORT_DIRECTION_DESC : value;
-
-    const nextSortKey =
-      value === SORT_DIRECTION_NEWEST ? SORT_KEY_CREATED_AT : sortKey;
-
-    const nextSearchParams = new URLSearchParams(searchParams);
-
-    nextSearchParams.set("sortDirection", nextSortDirection);
-    nextSearchParams.set("sortKey", nextSortKey);
-
-    onSortingChange(nextSearchParams);
-  };
-
-  useEffect(() => {
-    if (sortKey === SORT_KEY_CREATED_AT) {
-      setControlValue(SORT_DIRECTION_NEWEST);
-      return;
-    }
-
-    setControlValue(sortDirection);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sortKey, sortDirection]);
-
-  return (
-    <Form.Group className="d-flex align-items-center p-0" {...formGroupProps}>
-      <Form.Label className="text-nowrap mr-4 mb-0">
-        {t("App:sortBy")}:
-      </Form.Label>
-      <Form.Control
-        as="select"
-        data-testid="sorting-select"
-        onChange={onSortingValueChange}
-        custom
-        value={controlValue}
-      >
-        <option value={SORT_DIRECTION_ASC}>A-Z</option>
-        <option value={SORT_DIRECTION_DESC}>Z-A</option>
-        <option value={SORT_DIRECTION_NEWEST}>{t("newestOnTop")}</option>
-      </Form.Control>
-    </Form.Group>
-  );
-};

package/src/sorting-select/index.ts

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

package/src/striped-static-table/StripedStaticTable.stories.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import {
-  StripedStaticTable,
-  StripedStaticTableProps,
-} from "./StripedStaticTable";
-
-export default {
-  title: "StripedStaticTable",
-  component: StripedStaticTable,
-} as Meta;
-
-export const Default: Story<StripedStaticTableProps> = (args) => {
-  return <StripedStaticTable {...args} />;
-};
-
-Default.args = {
-  columns: [
-    { key: "name", label: "" },
-    { key: "quantity", label: "" },
-    { key: "total", label: "" },
-  ],
-  data: [
-    [
-      {
-        key: 1,
-        name: "test category",
-        quantity: "Qty",
-        total: "Total",
-      },
-      {
-        key: 2,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 4,
-        name: "total per category",
-        quantity: "2/16",
-        total: "160",
-      },
-    ],
-    [
-      {
-        key: 1,
-        name: "test category",
-        quantity: "Qty",
-        total: "Total",
-      },
-      {
-        key: 2,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 5,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 4,
-        name: "total per category",
-        quantity: "2/16",
-        total: "160",
-      },
-    ],
-  ],
-};

package/src/striped-static-table/StripedStaticTable.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-
-import { StaticTableProps, StaticTable, StaticTableData } from "../table";
-
-export type StripedStaticTableProps = Omit<StaticTableProps, "data"> & {
-  data: StaticTableData[][];
-};
-
-export const StripedStaticTable = ({
-  columns,
-  className = "",
-  data,
-  ...props
-}: StripedStaticTableProps) => {
-  const styledData = data
-    .map(
-      (section) =>
-        section.map((row, rowIndex, array) => {
-          const { length } = array;
-
-          return Object.fromEntries(
-            Object.entries(row).map(([key, value]) => {
-              if (key === "key") {
-                return [key, value];
-              }
-
-              // make first row blue and bold
-              if (rowIndex === 0) {
-                return [
-                  key,
-                  <div key={key} className="bold header-row">
-                    {value}
-                  </div>,
-                ];
-              }
-
-              // make last row bold
-              if (rowIndex === length - 1) {
-                return [
-                  key,
-                  <div key={key} className="bold">
-                    {value}
-                  </div>,
-                ];
-              }
-
-              return [key, value];
-            })
-          );
-        }) as StaticTableData[]
-    )
-    .flat();
-
-  return (
-    <StaticTable
-      columns={columns}
-      data={styledData}
-      className={`striped-static-table ${className}`}
-      displayHeader={false}
-      {...props}
-    />
-  );
-};

package/src/striped-static-table/index.ts

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

package/src/styles/striped-static-table/_index.scss

@@ -1,33 +0,0 @@
-table.striped-static-table {
-  tbody {
-    tr {
-      border-bottom: 1px solid $gray-500;
-      td {
-        text-transform: capitalize;
-
-        &:nth-child(2),
-        &:nth-child(3) {
-          text-align: right;
-        }
-        &:nth-child(2) {
-          width: 20%;
-        }
-        &:nth-child(3) {
-          width: 35%;
-        }
-      }
-
-      td:has(div.header-row) {
-        background-color: #d8ecf7;
-      }
-
-      &:first-child {
-        border-top: 1px solid $gray-500;
-      }
-    }
-  }
-
-  .bold {
-    font-weight: 600;
-  }
-}