@gyramais/gyra-design 0.1.0

package/src/components/Filter/index.css

@@ -0,0 +1,81 @@
+.gyramais-filter .gyramais-filter-filters-container {
+  @apply
+    w-[360px]
+}
+
+.gyramais-filter .gyramais-filter-button-container {
+  @apply
+    relative
+    w-fit;
+}
+
+.gyramais-filter .gyramais-filter-button {
+  @apply
+    !px-2
+    !py-1
+    !text-xs
+    !rounded-[24px]
+    !border-[var(--primary-button-color)]
+    !font-medium;
+}
+.gyramais-filter .gyramais-filter-button.gyramais-button-white {
+  @apply
+    text-[var(--primary-button-color)];
+}
+
+.gyramais-filter .gyramais-button-icon-container {
+  @apply
+    !mr-1;
+}
+
+.gyramais-filter .gyramais-filter-button-icon {
+  @apply
+    !text-base;
+}
+
+.gyramais-filter .gyramais-filter-filters-count {
+  @apply
+    absolute
+    z-10
+    -right-[4px]
+    -top-[4px]
+    flex
+    items-center
+    justify-center
+    min-w-[16px]
+    min-h-[16px]
+    w-4
+    h-4
+    rounded-full
+    bg-[var(--primary-button-color)]
+    text-[var(--primary-button-text-color)]
+    text-[10px]
+    cursor-default;
+}
+
+.gyramais-filter .gyramais-filter-label {
+  @apply
+    font-semibold
+    leading-5
+    text-[var(--primary-button-color)]
+}
+
+.gyramais-filter .gyramais-filter-switch-area {
+  @apply
+    flex
+    justify-end
+}
+
+.gyramais-filter .gyramais-input {
+  @apply
+    !min-h-fit
+    !py-3
+    !rounded-[16px];
+}
+
+.gyramais-filter .gyramais-filter-filters-footer {
+  @apply
+    flex
+    items-center
+    justify-end
+}

package/src/components/Filter/index.ts

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

package/src/components/Form/Form.tsx

@@ -0,0 +1,11 @@
+import {
+  Form,
+  useForm,
+} from '../../shadcn/form'
+import FormItem from './Item'
+
+export {
+  Form,
+  FormItem,
+  useForm,
+};

package/src/components/Form/Item.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  FormItem, FormControl, FormMessage, FormField
+} from '../../shadcn/form'
+import './index.css';
+
+type FormItemProps = {
+  id?: string;
+  className?: string;
+  children: React.ReactElement;
+  control?: any
+  name: string
+}
+
+const Item = ({
+  children, control, name
+}: FormItemProps) => (
+  <FormField
+    control={control}
+    name={name}
+    defaultValue=""
+    render={({ field }) => (
+      <FormItem>
+        <FormControl>
+          {React.cloneElement(children, { ...children.props, ...field })}
+        </FormControl>
+        <FormMessage id="gyramais-form-message" />
+      </FormItem>
+    )}
+  />
+)
+
+export default Item;

package/src/components/Form/index.css

@@ -0,0 +1,4 @@
+#gyramais-form-message {
+  @apply
+    text-[var(--danger-color)]
+}

package/src/components/Form/index.ts

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

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { HoverCard } from "./HoverCard";
+import { Tag } from '../Tag';
+
+const meta: Meta<typeof HoverCard> = {
+  title: "Library/Components/HoverCard",
+  component: HoverCard,
+  parameters: {
+    layout: 'padded',
+  },
+  render: ({ children, content, side, sideOffset, visible }) => (
+    <div className="w-full h-[260px] flex items-center justify-center">
+      <HoverCard
+        side={side}
+        sideOffset={sideOffset}
+        visible={visible}
+        content={content}
+      >
+        {children}
+      </HoverCard>
+    </div>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof HoverCard>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    side: 'bottom',
+    sideOffset: 8,
+    visible: undefined,
+    content: (
+      <div>
+        Informação qualquer
+      </div>
+    ),
+    children: (
+      <Tag>
+        Coloca o mouse aqui
+      </Tag>
+    ),
+  },
+}

package/src/components/HoverCard/HoverCard.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import {
+  HoverCard as PrimitiveHoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../../shadcn/hover-card";
+
+type HoverCardProps = {
+  id?: string;
+  className?: string;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+  sideOffset?: number;
+  visible?: boolean;
+  content: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+const HoverCard = ({
+  id,
+  className,
+  align,
+  side,
+  sideOffset = 8,
+  visible,
+  content,
+  children,
+}: HoverCardProps) => {
+  return (
+    <PrimitiveHoverCard openDelay={100} closeDelay={100} open={visible}>
+      <HoverCardTrigger className="gyramais-hover-card-trigger">
+        {children}
+      </HoverCardTrigger>
+
+      <HoverCardContent
+        id={id}
+        className={classNames(
+          'gyramais-hover-card-content',
+          className,
+        )}
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        {content}
+      </HoverCardContent>
+    </PrimitiveHoverCard>
+  );
+};
+
+export { HoverCard };

package/src/components/HoverCard/index.css

@@ -0,0 +1,15 @@
+.gyramais-hover-card-trigger {
+  @apply
+    block
+    w-fit
+    no-underline;
+}
+
+.gyramais-hover-card-content {
+  @apply
+    w-fit
+    bg-white
+    border-[var(--border-color)]
+    shadow-xl
+    rounded-[20px];
+}

package/src/components/HoverCard/index.ts

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

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Icon } from "./Icon";
+
+const meta: Meta<typeof Icon> = {
+  title: "Library/Components/Icon",
+  component: Icon,
+  parameters: {
+    layout: 'centered',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    width: '56',
+    height: 'auto',
+  },
+}

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type IconProps = {
+  id?: string;
+  className?: string;
+  width?: number | string;
+  height?: number | string;
+}
+
+const Icon = ({
+  id,
+  className,
+  width,
+  height,
+}: IconProps) => {
+  return (
+    <img
+      id={id}
+      className={classNames(
+        'gyramais-icon',
+        className,
+      )}
+      style={{
+        width,
+        height,
+      }}
+      width={width}
+      height={height}
+      alt="Icone"
+    />
+  );
+};
+
+export { Icon };

package/src/components/Icon/index.css

@@ -0,0 +1,3 @@
+.gyramais-icon {
+  content: var(--icon-url);
+}

package/src/components/Icon/index.ts

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

package/src/components/IconDisplay/IconDisplay.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconDisplay } from "./IconDisplay";
+
+import PersonIcon from '@mui/icons-material/Person';
+
+const meta: Meta<typeof IconDisplay> = {
+  title: "Library/Components/IconDisplay",
+  component: IconDisplay,
+  parameters: {
+    layout: 'centered',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof IconDisplay>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    icon: (
+      <PersonIcon />
+    ),
+  },
+}

package/src/components/IconDisplay/IconDisplay.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+
+type IconDisplayProps = {
+  id?: string;
+  className?: string;
+  icon?: React.ReactNode;
+}
+
+const IconDisplay = ({
+  id,
+  className,
+  icon,
+}: IconDisplayProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-icon-display",
+        className,
+      )}
+    >
+      {icon}
+    </div>
+  );
+};
+
+export { IconDisplay };

package/src/components/IconDisplay/index.css

@@ -0,0 +1,18 @@
+.gyramais-icon-display {
+  @apply
+    h-10
+    w-10
+    min-h-10
+    min-w-10
+    flex
+    items-center
+    justify-center
+    bg-[var(--dark-button-color)]
+    rounded-[8px]
+    text-[var(--primary-button-color)]
+}
+
+.gyramais-icon-display svg {
+  @apply
+    text-[24px]
+}

package/src/components/IconDisplay/index.ts

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

package/src/components/Information/Information.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Information } from "./Information";
+
+const meta: Meta<typeof Information> = {
+  title: "Library/Components/Information",
+  component: Information,
+  parameters: {
+    layout: 'centered',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Information>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    label: 'Título',
+    children: (
+      'Informação qualquer'
+    ),
+  },
+}

package/src/components/Information/Information.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import classNames from "classnames";
+import "./index.css";
+import { Tooltip } from "../Tooltip";
+
+type InformationProps = {
+  id?: string;
+  className?: string;
+  label?: React.ReactNode | string;
+  children?: React.ReactNode | string;
+}
+
+const Information = ({
+  id,
+  className,
+  label,
+  children,
+}: InformationProps) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        "gyramais-information",
+        className,
+      )}
+    >
+      <div className="gyramais-information-label">
+        {label}
+      </div>
+
+      <div className="gyramais-information-content">
+        {typeof children === 'string' ? (
+          <Tooltip
+            content={children}
+            align="start"
+            side="bottom"
+          >
+            {children || '-'}
+          </Tooltip>
+        ) : (
+          <>
+            {children || '-'}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { Information };

package/src/components/Information/index.css

@@ -0,0 +1,34 @@
+.gyramais-information {
+  @apply
+    w-full;
+  }
+  
+.gyramais-information .gyramais-information-label {
+  @apply
+    text-sm
+    text-black
+    font-light
+    leading-[16.8px]
+    mb-1;
+}
+
+.gyramais-information .gyramais-information-content {
+  @apply
+    text-base
+    text-[#212227]
+    font-semibold
+    leading-[16px]
+    text-ellipsis
+    whitespace-nowrap
+    overflow-hidden
+    w-full;
+}
+
+.gyramais-information .gyramais-tooltip-trigger {
+  @apply
+    text-ellipsis
+    whitespace-nowrap
+    overflow-hidden
+    w-full
+    text-left;
+}

package/src/components/Information/index.ts

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

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+
+const meta: Meta<typeof Input> = {
+  title: "Library/Components/Input",
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    id: '',
+    className: '',
+    name: '',
+    type: 'text',
+    disabled: false,
+    placeholder: 'Placeholder',
+  },
+}
+
+export const Masked: Story = {
+  args: {
+    id: '',
+    className: '',
+    name: '',
+    type: 'text',
+    disabled: false,
+    placeholder: 'CPF',
+    guide: false,
+    mask: [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/],
+  },
+}

package/src/components/Input/Input.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import "./index.css";
+
+import MaskedInput, { Mask } from 'react-text-mask'
+
+type InputProps = {
+  id?: string;
+  className?: string;
+  name?: string;
+  type?: 'text' | 'password';
+  disabled?: boolean;
+  placeholder?: string;
+  value?: any;
+  mask?: Mask | ((value: string) => Mask);
+  guide?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const Input = React.forwardRef(({
+  id,
+  className,
+  name,
+  type = 'text',
+  disabled,
+  placeholder,
+  value,
+  mask,
+  guide = false,
+  onChange,
+}: InputProps, ref) => {
+  const [hasValue, setHasValue] = useState(false);
+
+  useEffect(() => setHasValue(!!value), [value]);
+
+  return (
+    <div className="gyramais-input-controller">
+      {placeholder && (
+        <div
+          className={classNames(
+            'gyramais-input-placeholder',
+            hasValue ? 'gyramais-input-with-value' : '',
+            disabled ? 'gyramais-input-placeholder-disabled' : '',
+          )}
+        >
+          {placeholder}
+        </div>
+      )}
+
+      {mask ? (
+        <MaskedInput
+          id={id}
+          className={classNames(
+            "gyramais-input",
+            className,
+          )}
+          name={name}
+          type={type}
+          disabled={disabled}
+          value={value}
+          onChange={(e) => {
+            setHasValue(!!e.target.value);
+  
+            onChange?.(e);
+          }}
+          mask={mask || false}
+          guide={guide}
+        />
+      ) : (
+        <input
+          id={id}
+          className={classNames(
+            "gyramais-input",
+            className,
+          )}
+          name={name}
+          type={type}
+          disabled={disabled}
+          value={value}
+          onChange={(e) => {
+            setHasValue(!!e.target.value);
+
+            onChange?.(e);
+          }}
+        />
+      )}
+    </div>
+  );
+});
+
+export { Input };