@arkyn/components 3.0.1-beta.12 → 3.0.1-beta.17

package/documentation/src/components/examples.input.tsx

@@ -0,0 +1,256 @@
+import { Input } from "@components";
+import {
+  Calendar,
+  Clock,
+  DollarSign,
+  Eye,
+  EyeOff,
+  Globe,
+  Hash,
+  Lock,
+  Mail,
+  MapPin,
+  Percent,
+  Phone,
+  Search,
+  User,
+  XCircle,
+} from "lucide-react";
+
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+
+function InputExamples() {
+  return (
+    <Box title="Input">
+      <Row>
+        <Input
+          name="variant-solid"
+          placeholder="Variant solid (default)"
+          label="Solid variant:"
+        />
+        <Input
+          name="variant-outline"
+          placeholder="Variant outline"
+          label="Outline variant:"
+          variant="outline"
+        />
+        <Input
+          name="variant-underline"
+          placeholder="Variant underline"
+          label="Underline variant:"
+          variant="underline"
+        />
+      </Row>
+
+      <Row>
+        <Input
+          name="size-md"
+          placeholder="Size md (default)"
+          label="Medium size:"
+        />
+        <Input
+          name="size-lg"
+          placeholder="Size lg"
+          label="Large size:"
+          size="lg"
+        />
+      </Row>
+
+      <Row>
+        <Input
+          name="left-icon"
+          placeholder="With left icon"
+          label="Left icon:"
+          leftIcon={Search}
+        />
+        <Input
+          name="right-icon"
+          placeholder="With right icon"
+          label="Right icon:"
+          rightIcon={Eye}
+        />
+        <Input
+          name="both-icons"
+          placeholder="With both icons"
+          label="Both icons:"
+          leftIcon={User}
+          rightIcon={Lock}
+        />
+      </Row>
+
+      <Row>
+        <Input
+          name="prefix"
+          placeholder="example"
+          label="With prefix:"
+          prefix="https://"
+        />
+        <Input
+          name="suffix"
+          placeholder="website"
+          label="With suffix:"
+          suffix=".com"
+        />
+        <Input
+          name="prefix-suffix"
+          placeholder="amount"
+          label="Prefix and suffix:"
+          prefix="$"
+          suffix=".00"
+        />
+      </Row>
+
+      <Row>
+        <Input
+          name="loading-left"
+          placeholder="Loading..."
+          label="Loading (left):"
+          isLoading
+        />
+        <Input
+          name="loading-right"
+          placeholder="Loading..."
+          label="Loading (right):"
+          rightIcon={Search}
+          isLoading
+        />
+      </Row>
+
+      <Row>
+        <Input
+          name="email"
+          type="email"
+          placeholder="your@email.com"
+          label="Email:"
+          leftIcon={Mail}
+        />
+        <Input
+          name="password"
+          type="password"
+          placeholder="Password"
+          label="Password:"
+          leftIcon={Lock}
+          rightIcon={EyeOff}
+        />
+        <Input
+          name="tel"
+          type="tel"
+          placeholder="(11) 99999-9999"
+          label="Phone:"
+          leftIcon={Phone}
+        />
+      </Row>
+
+      <Row>
+        <Input
+          name="disabled"
+          placeholder="Disabled input"
+          label="Disabled:"
+          disabled
+        />
+        <Input
+          name="readonly"
+          placeholder="Read only input"
+          label="Read only:"
+          readOnly
+          value="Cannot edit"
+        />
+      </Row>
+
+      <Row>
+        <Input
+          name="required"
+          placeholder="Required field"
+          label="Required field:"
+          showAsterisk
+          required
+        />
+        <Input
+          name="error"
+          leftIcon={XCircle}
+          placeholder="Field with error"
+          label="With error:"
+          errorMessage="This field is required"
+        />
+      </Row>
+
+      <Row>
+        <Input
+          name="search"
+          type="search"
+          placeholder="Search..."
+          label="Search:"
+          leftIcon={Search}
+        />
+        <Input
+          name="url"
+          type="url"
+          placeholder="https://example.com"
+          label="Website:"
+          leftIcon={Globe}
+        />
+        <Input
+          name="number"
+          type="number"
+          placeholder="123"
+          label="Number:"
+          leftIcon={Hash}
+        />
+      </Row>
+
+      <Row>
+        <Input name="date" type="date" label="Date:" leftIcon={Calendar} />
+        <Input name="time" type="time" label="Time:" leftIcon={Clock} />
+        <Input
+          name="datetime-local"
+          type="datetime-local"
+          label="Date and Time:"
+          leftIcon={Calendar}
+        />
+      </Row>
+
+      <Row>
+        <Input
+          name="price"
+          type="number"
+          placeholder="0.00"
+          label="Price:"
+          prefix="$"
+          rightIcon={DollarSign}
+          variant="outline"
+          size="lg"
+        />
+
+        <Input
+          name="percentage"
+          type="number"
+          placeholder="0"
+          label="Percentage:"
+          suffix="%"
+          rightIcon={Percent}
+          variant="underline"
+        />
+      </Row>
+
+      <Row>
+        <Input
+          name="address"
+          placeholder="Street address"
+          label="Address:"
+          leftIcon={MapPin}
+          variant="outline"
+        />
+        <Input
+          name="postalCode"
+          placeholder="12345-678"
+          label="ZIP Code:"
+          leftIcon={MapPin}
+          maxLength={9}
+        />
+      </Row>
+    </Box>
+  );
+}
+
+export { InputExamples };

package/documentation/src/components/examples.maskedInput.tsx

@@ -0,0 +1,274 @@
+import { MaskedInput } from "@components";
+import {
+  Calendar,
+  Clock,
+  CreditCard,
+  FileText,
+  Hash,
+  IdCard,
+  MapPin,
+  Phone,
+  User,
+  XCircle,
+} from "lucide-react";
+
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+
+function MaskedInputExamples() {
+  return (
+    <Box title="MaskedInput">
+      <Row>
+        <MaskedInput
+          name="variant-solid"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="Solid variant (default):"
+        />
+        <MaskedInput
+          name="variant-outline"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="Outline variant:"
+          variant="outline"
+        />
+        <MaskedInput
+          name="variant-underline"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="Underline variant:"
+          variant="underline"
+        />
+      </Row>
+
+      <Row>
+        <MaskedInput
+          name="size-md"
+          mask="(__)_____-____"
+          replacement={{ _: /\d/ }}
+          placeholder="(11)99999-9999"
+          label="Medium size (default):"
+        />
+        <MaskedInput
+          name="size-lg"
+          mask="(__)_____-____"
+          replacement={{ _: /\d/ }}
+          placeholder="(11)99999-9999"
+          label="Large size:"
+          size="lg"
+        />
+      </Row>
+
+      <Row>
+        <MaskedInput
+          name="cpf"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="CPF:"
+          leftIcon={User}
+        />
+        <MaskedInput
+          name="cnpj"
+          mask="__.___.___/____-__"
+          replacement={{ _: /\d/ }}
+          placeholder="00.000.000/0000-00"
+          label="CNPJ:"
+          leftIcon={FileText}
+        />
+        <MaskedInput
+          name="rg"
+          mask="__.___.__-_"
+          replacement={{ _: /\d/ }}
+          placeholder="00.000.00-0"
+          label="RG:"
+          leftIcon={IdCard}
+        />
+      </Row>
+
+      <Row>
+        <MaskedInput
+          name="phone"
+          mask="(__)_____-____"
+          replacement={{ _: /\d/ }}
+          placeholder="(11)99999-9999"
+          label="Telefone:"
+          leftIcon={Phone}
+        />
+        <MaskedInput
+          name="cep"
+          mask="_____-___"
+          replacement={{ _: /\d/ }}
+          placeholder="00000-000"
+          label="CEP:"
+          leftIcon={MapPin}
+        />
+        <MaskedInput
+          name="credit-card"
+          mask="____ ____ ____ ____"
+          replacement={{ _: /\d/ }}
+          placeholder="0000 0000 0000 0000"
+          label="Cartão de Crédito:"
+          leftIcon={CreditCard}
+        />
+      </Row>
+
+      <Row>
+        <MaskedInput
+          name="date"
+          mask="__/__/____"
+          replacement={{ _: /\d/ }}
+          placeholder="dd/mm/yyyy"
+          label="Data:"
+          leftIcon={Calendar}
+        />
+        <MaskedInput
+          name="time"
+          mask="__:__"
+          replacement={{ _: /\d/ }}
+          placeholder="00:00"
+          label="Horário:"
+          leftIcon={Clock}
+        />
+        <MaskedInput
+          name="currency"
+          mask="R$ ___.__,__"
+          replacement={{ _: /\d/ }}
+          placeholder="R$ 000.00,00"
+          label="Moeda:"
+          prefix="R$"
+        />
+      </Row>
+
+      <Row>
+        <MaskedInput
+          name="prefix-suffix"
+          mask="_____-___"
+          replacement={{ _: /\d/ }}
+          placeholder="00000-000"
+          label="Prefix e Suffix:"
+          prefix="CEP:"
+          suffix="-BR"
+        />
+        <MaskedInput
+          name="show-mask"
+          mask="(__)_____-____"
+          replacement={{ _: /\d/ }}
+          placeholder="(11)99999-9999"
+          label="Show mask:"
+          showMask
+          leftIcon={Phone}
+        />
+      </Row>
+
+      <Row>
+        <MaskedInput
+          name="loading"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="Loading:"
+          isLoading
+        />
+        <MaskedInput
+          name="loading-right"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="Loading (right icon):"
+          rightIcon={Hash}
+          isLoading
+        />
+      </Row>
+
+      <Row>
+        <MaskedInput
+          name="disabled"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="Disabled:"
+          disabled
+        />
+        <MaskedInput
+          name="readonly"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="Read only:"
+          readOnly
+          defaultValue="123.456.789-00"
+        />
+      </Row>
+
+      <Row>
+        <MaskedInput
+          name="required"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="Required field:"
+          showAsterisk
+          required
+        />
+        <MaskedInput
+          name="error"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="With error:"
+          leftIcon={XCircle}
+          errorMessage="CPF inválido"
+        />
+      </Row>
+
+      <Row>
+        <MaskedInput
+          name="separate"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="Separate:"
+          separate
+          leftIcon={User}
+        />
+        <MaskedInput
+          name="custom-pattern"
+          mask="___-###-___"
+          replacement={{ _: /\d/, "#": /[A-Z]/ }}
+          placeholder="000-ABC-000"
+          label="Custom pattern:"
+          leftIcon={Hash}
+        />
+      </Row>
+
+      <Row>
+        <MaskedInput
+          name="advanced-cpf"
+          mask="___.___.___-__"
+          replacement={{ _: /\d/ }}
+          placeholder="000.000.000-00"
+          label="CPF completo:"
+          leftIcon={User}
+          variant="outline"
+          size="lg"
+          showMask
+        />
+        <MaskedInput
+          name="advanced-phone"
+          mask="(__)_____-____"
+          replacement={{ _: /\d/ }}
+          placeholder="(11)99999-9999"
+          label="Telefone completo:"
+          leftIcon={Phone}
+          variant="underline"
+        />
+      </Row>
+    </Box>
+  );
+}
+
+export { MaskedInputExamples };

package/documentation/src/components/examples.modal.tsx

@@ -0,0 +1,31 @@
+import { Button, ModalContainer, ModalFooter, ModalHeader } from "@components";
+import { useState } from "react";
+
+import { Box } from "../ui/box";
+import { Row } from "../ui/row";
+
+function ModalExamples() {
+  const [modal, setModal] = useState(false);
+
+  return (
+    <Box title="Modal">
+      <Row>
+        <Button onClick={() => setModal(true)}>Open modal</Button>
+
+        <ModalContainer isVisible={modal} makeInvisible={() => setModal(false)}>
+          <ModalHeader>Modal</ModalHeader>
+          <p style={{ padding: "16px", minWidth: "400px" }}>
+            This is the content of the right drawer.
+          </p>
+          <ModalFooter>
+            <Button scheme="danger" onClick={() => setModal(false)}>
+              Close modal
+            </Button>
+          </ModalFooter>
+        </ModalContainer>
+      </Row>
+    </Box>
+  );
+}
+
+export { ModalExamples };