@boxcustodia/library 2.0.0-alpha.18 → 2.0.0-alpha.19

package/src/__doc__/Types.mdx

@@ -1,252 +0,0 @@
-import {
-  Canvas,
-  ColorItem,
-  ColorPalette,
-  Meta,
-  Source,
-} from "@storybook/addon-docs/blocks";
-import { BorderRadius } from "./Examples";
-
-<Meta title="Documentation/Types" />
-
-# Types
-
-## Extender interfaces de componentes
-
-```ts
-// Se puede inferir utilizando la utilidad ComponentProps
-import { Input } from "../../components";
-type InputProps = ComponentProps<typeof Input>;
-```
-
-## Generic types
-
-### GenericObject
-
-Interfaz de objeto genérico
-
-```ts
-// Definición
-type GenericObject<T = any> = { [key: string]: T };
-
-const myObj: GenericObject = {
-  test: "TEST",
-};
-
-const myObj: GenericObject<number> = {
-  test: "TEST", // TS-Error
-  prop: 4,
-};
-```
-
-### Nullable
-
-Permite manejar valores que pueden ser null
-
-```ts
-// Definición
-type Nullable<T> = T | null;
-
-const [myState, setMyState] = useState<Nullable<number>>(null);
-setState(4);
-```
-
-### Maybe
-
-Permite manejar valores que pueden ser undefined o null
-
-```ts
-// Definición
-type Maybe<T> = T | undefined | null;
-
-interface APIResponse {
-  data: Maybe<string>; // string | undefined | null
-  error: Maybe<string>; // string | undefined | null
-}
-```
-
-### State
-
-Interfaz de hook `useState`
-
-```ts
-// Definición
-type SetState<T> = Dispatch<SetStateAction<T>>;
-type State<T> = [T, SetState<T>];
-
-interface MyComponentProps {
-  value: string;
-  setValue: SetState<string>;
-  otherState: State<boolean>;
-}
-
-function MyComponent({ value, setValue, otherState }: MyComponentProps) {
-   ...
-}
-```
-
-### ClassName
-
-interfaz simple para clases
-
-```ts
-// Definición
-type ClassName = string | undefined;
-
-interface MyComponentProps {
-    className: ClassName
-    ...
-}
-```
-
-### ID
-
-interfaz para ids
-
-```ts
-// Definición
-type ID = string | number;
-
-interface User {
-  id: ID;
-}
-```
-
-### OverrideProps
-
-Interfaz que sobrescribe las propiedades de un componente por la interfaz que se pase
-
-```ts
-// Definición
-type OverrideProps<T, TOverridden> = Omit<T, keyof TOverridden> & TOverridden;
-
-type InputExtension = ComponentProps<"input">;
-type MyCustomProps = { onChange: (value: string) => any };
-type MyComponentProps = OverrideProps<InputExtension, MyCustomProps>; // onChange: (value: string) => any
-```
-
-### SafeOmit
-
-Permite hacer omit de ciertas propiedades de una interfaz brindando autocompletado
-
-```ts
-// Definición
-type SafeOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-
-interface User {
-  name: string;
-  email: string;
-  age: number;
-  gender?: string;
-}
-
-type UserMetadata = Omit<User, "age" | "gender">;
-```
-
-### AtLeastOne
-
-Define un array que debe contener al menos 1 elemento
-
-```ts
-// Definición
-type AtLeastOne<T> = [T, ...T[]];
-
-const myArray: AtLeastOne<number> = []; // ❌ TS-ERROR
-const myArray: AtLeastOne<number> = [1]; // ✅
-```
-
-### Loose
-
-Autocompletado de ciertas opciones con la posibilidad de pasar cualquier string
-
-```ts
-// Definición
-type Loose<T> = T | (string & {});
-
-type Size = "xs" | "md" | "xl";
-type LooseSize = Loose<Size>;
-
-// Autocompleta 'xs', 'md' y 'xl'
-// Permite cualquier string
-const IconSizes: LooseSize[] = ["xs", "md", "xl", "10px", "100px"];
-```
-
-### Controllable
-
-Interfaz que sobrescribe las propiedades de un HTMLElement para hacerlo controlado
-
-```ts
-// Definición
-type Controllable<C, T extends {}> = OverrideProps<
-  HTMLProps<C>,
-  ControllableState<T>
->;
-
-// ❌ sin usar interfaz
-interface TabsProps
-  extends Omit<
-    HTMLProps<HTMLDivElement>,
-    "value" | "defaultValue" | "onChange"
-  > {
-  value?: string;
-  onChange?: (tab: string) => void;
-  defaultValue?: string;
-}
-
-// ✅ usando interfaz
-type TabsProps = Controllable<HTMLDivElement, string>;
-```
-
-### ArrayUnion
-
-Obtiene una unión de todos los elementos de un array
-
-```ts
-// Definición
-type ArrayUnion<V, T extends ReadonlyArray<V>> = T[number];
-
-const routes = ["dashboard", "login", "settings"] as const;
-type Route = ArrayUnion<string, typeof routes>; // "dashboard" | "login" | "settings"
-```
-
-### ValuesUnion
-
-Obtiene una unión de todos los valores de un objeto
-
-Las claves se pueden obtener con `keyof T`
-
-```ts
-// Definición
-type ValuesUnion<T extends Record<string, any>> = T[keyof T];
-
-const methods = {
-  GET: "get",
-  POST: "post",
-} as const;
-
-type Method = ValuesUnion<typeof methods>; // "get" | "post"
-```
-
-### Entity
-
-Representa una entidad en una base de datos
-
-```ts
-// Definición
-export type BaseEntity = {
-  id: string;
-  createdAt: number;
-};
-
-export type Entity<T> = {
-  [K in keyof T]: T[K];
-} & BaseEntity;
-
-// Uso
-type User = Entity<{
-  firstName: string;
-  lastName: string;
-  email: string;
-  role: "ADMIN" | "USER";
-}>;
-```