Remove unused icons and types from components package and refactor table to RN
Some checks failed
forgejo/Procyon/procyon/pipeline/head There was a failure building this commit

This commit is contained in:
Roman Jaroš 2024-06-08 08:16:17 +00:00
parent 44c0123657
commit f4c849058d
73 changed files with 598 additions and 1260 deletions

View file

@ -3,10 +3,10 @@ import styled from '@emotion/native';
import { MenuIcon } from 'lucide-react-native';
import { View } from 'react-native';
import { Modals } from '@procyon/components/Modal/components/Modals';
import { Modals } from '@procyon/components/Modal/Modals';
import { Toasters } from '@procyon/components/Toaster';
import { ToastersProps } from '@procyon/components/Toaster/components/Toasters';
import { useOnResize } from '@procyon/hooks/useOnResize';
import { ToastersProps } from '@procyon/components/Toaster/Toasters';
import { useScreenDimensions } from '@procyon/hooks/useScreenDimensions';
import { mQ } from '@procyon/styles/mq';
export type AppLayoutProps = {
@ -31,7 +31,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
const enabledSideNav = !!SideNav;
const enabledTopNav = !!TopNav || !!UserNav;
useOnResize();
useScreenDimensions();
const [sideCollapsed, setSideCollapsed] = useState(false);
const [topCollapsed, setTopCollapsed] = useState(true);

View file

@ -6,7 +6,6 @@ import { Button } from '@procyon/components/Button';
import { ButtonGroup } from '@procyon/components/ButtonGroup';
import { AngleDownIcon } from '@procyon/components/Icons/AngleDown';
import { AngleUpIcon } from '@procyon/components/Icons/AngleUp';
import { SizeEnum } from '@procyon/types/enums';
export type DropdownButtons = {
onClose: () => void;

View file

@ -2,7 +2,7 @@ import React, { FC, ReactNode } from 'react';
import { StyleProp, View, ViewStyle } from 'react-native';
import { createStyleSheet, useStyles } from 'react-native-unistyles';
import { GridContext } from '../context';
import { GridContext } from './context';
export type GridBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

View file

@ -2,8 +2,8 @@ import React, { FC, useContext } from 'react';
import styled from '@emotion/native';
import { StyleProp, ViewStyle } from 'react-native';
import { GridBreakpoints } from '@procyon/components/Grid/components/Grid';
import { GridContext } from '@procyon/components/Grid/context';
import { GridBreakpoints } from '@procyon/components/Grid/Grid';
import { mQ } from '@procyon/styles/mq';
export type GridColProps = {

View file

@ -1,3 +1,3 @@
export { Grid } from './components/Grid';
export { GridRow } from './components/GridRow';
export { GridCol } from './components/GridCol';
export { Grid } from './Grid';
export { GridRow } from './GridRow';
export { GridCol } from './GridCol';

View file

@ -1,9 +0,0 @@
export enum GridSizeEnum {
lg = 'lg',
md = 'md',
sm = 'sm',
xl = 'xl',
xs = 'xs',
}
export const { xs, xl, sm, md, lg } = GridSizeEnum;

View file

@ -1,11 +0,0 @@
// icon:angle-down | Fontawesome https://fontawesome.com/ | Fontawesome
import * as React from 'react';
import Svg, { Path } from 'react-native-svg';
export function AngleDownIcon(props: React.ComponentProps<typeof Svg>) {
return (
<Svg viewBox="0 0 448 512" fill="currentColor" height="20px" width="20px" {...props}>
<Path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
</Svg>
);
}

View file

@ -1,14 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
import Svg from 'react-native-svg';
export function AngleLeftIcon(props: React.ComponentProps<typeof Svg>) {
return (
<Svg viewBox="0 0 448 512" fill="currentColor" height="20px" width="20px" {...props}>
<path
fillRule="evenodd"
d="M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
/>
</Svg>
);
}

View file

@ -1,14 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
import Svg from 'react-native-svg';
export function AngleRightIcon(props: React.ComponentProps<typeof Svg>) {
return (
<Svg viewBox="0 0 448 512" fill="currentColor" height="20px" width="20px" {...props}>
<path
fillRule="evenodd"
d="M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708z"
/>
</Svg>
);
}

View file

@ -1,11 +0,0 @@
// icon:angle-up | Fontawesome https://fontawesome.com/ | Fontawesome
import * as React from 'react';
import Svg, { Path } from 'react-native-svg';
export function AngleUpIcon(props: React.ComponentProps<typeof Svg>) {
return (
<Svg viewBox="0 0 448 512" fill="currentColor" height="20px" width="20px" {...props}>
<Path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z" />
</Svg>
);
}

View file

@ -1,11 +0,0 @@
// icon:backspace | Typicons https://www.s-ings.com/typicons/ | Stephen Hutchings
import * as React from 'react';
import Svg, { Path } from 'react-native-svg';
export function BackspaceIcon(props: React.ComponentProps<typeof Svg>) {
return (
<Svg viewBox="0 0 24 24" fill="currentColor" height="20px" width="20px" {...props}>
<Path d="M19.5 5h-10c-1.266 0-2.834.807-3.57 1.837L3.32 10.49l-1.199 1.679c-.121.175-.122.492.003.664l1.188 1.664 2.619 3.667C6.666 19.193 8.233 20 9.5 20h10c1.379 0 2.5-1.122 2.5-2.5v-10C22 6.122 20.879 5 19.5 5zm-2.293 9.793a.999.999 0 11-1.414 1.414L13.5 13.914l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414l2.293-2.293-2.293-2.293a.999.999 0 111.414-1.414l2.293 2.293 2.293-2.293a.999.999 0 111.414 1.414L14.914 12.5l2.293 2.293z" />
</Svg>
);
}

View file

@ -1,20 +0,0 @@
/* eslint-disable max-len */
import * as React from 'react';
export function BuildingStoreIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
height="1em"
width="1em"
{...props}>
<path stroke="none" d="M0 0h24v24H0z" />
<path d="M3 21h18M3 7v1a3 3 0 006 0V7m0 1a3 3 0 006 0V7m0 1a3 3 0 006 0V7H3l2-4h14l2 4M5 21V10.85M19 21V10.85M9 21v-4a2 2 0 012-2h2a2 2 0 012 2v4" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
// icon:button-cursor | Material Design Icons https://materialdesignicons.com/ | Austin Andrews
import * as React from 'react';
export function ButtonCursorIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M18.1 15.3c-.1.1-.3.2-.4.3l-2.4.4 1.7 3.6c.2.4 0 .8-.4 1l-2.8 1.3c-.1.1-.2.1-.3.1-.3 0-.6-.2-.7-.4L11.2 18l-1.9 1.5c-.1.1-.3.2-.5.2-.4 0-.8-.3-.8-.8V7.5c0-.5.3-.8.8-.8.2 0 .4.1.5.2l8.7 7.4c.3.2.4.7.1 1M6 12H4V4h16v8h-1.6l2.2 1.9c.8-.3 1.3-1 1.3-1.9V4c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h2v-2z" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function CheckCircleIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 1024 1024" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" />
</svg>
);
}

View file

@ -1,11 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function CheckSquareIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M14 1a1 1 0 011 1v12a1 1 0 01-1 1H2a1 1 0 01-1-1V2a1 1 0 011-1h12zM2 0a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2H2z" />
<path d="M10.97 4.97a.75.75 0 011.071 1.05l-3.992 4.99a.75.75 0 01-1.08.02L4.324 8.384a.75.75 0 111.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 01.02-.022z" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
/* eslint-disable max-len */
import * as React from 'react';
export function CircleIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth={2} />
</svg>
);
}

View file

@ -1,9 +0,0 @@
import * as React from 'react';
export function CircleFillIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<circle cx="12" cy="12" r="10" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
// icon:clock-time-five-outline | Material Design Icons https://materialdesignicons.com/ | Austin Andrews
import * as React from 'react';
export function ClockTimeIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M12 20c4.4 0 8-3.6 8-8s-3.6-8-8-8-8 3.6-8 8 3.6 8 8 8m0-18c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2m3.3 14.2L14 17l-3-5.2V7h1.5v4.4l2.8 4.8z" />
</svg>
);
}

View file

@ -1,17 +0,0 @@
import * as React from 'react';
import Svg, { G, Path } from 'react-native-svg';
export function CrossIcon(props: React.ComponentProps<typeof Svg>) {
return (
<Svg viewBox="0 0 21 21" fill="currentColor" height="20px" width="20px" {...props}>
<G
fill="none"
fillRule="evenodd"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round">
<Path d="M5.5 15.5l10-10M15.5 15.5l-10-10z" />
</G>
</Svg>
);
}

View file

@ -1,10 +0,0 @@
// icon:bxs-dashboard | Boxicons https://boxicons.com/ | Atisa
import * as React from 'react';
export function DashboardIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M4 13h6a1 1 0 001-1V4a1 1 0 00-1-1H4a1 1 0 00-1 1v8a1 1 0 001 1zm-1 7a1 1 0 001 1h6a1 1 0 001-1v-4a1 1 0 00-1-1H4a1 1 0 00-1 1v4zm10 0a1 1 0 001 1h6a1 1 0 001-1v-7a1 1 0 00-1-1h-6a1 1 0 00-1 1v7zm1-10h6a1 1 0 001-1V4a1 1 0 00-1-1h-6a1 1 0 00-1 1v5a1 1 0 001 1z" />
</svg>
);
}

View file

@ -1,25 +0,0 @@
// icon:checkmark-done-circle-outline | Ionicons https://ionicons.com/ | Ionic Framework
import * as React from 'react';
import Svg, { Path } from 'react-native-svg';
export function CheckmarkDoneCircleOutlineIcon(props: React.ComponentProps<typeof Svg>) {
return (
<Svg viewBox="0 0 512 512" fill="currentColor" height="20px" width="20px" {...props}>
<Path
fill="none"
stroke="currentColor"
strokeMiterlimit={10}
strokeWidth={32}
d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
/>
<Path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={32}
d="M368 192L256.13 320l-47.95-48M191.95 320L144 272M305.71 192l-51.55 59"
/>
</Svg>
);
}

View file

@ -1,10 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function ErrorIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M16.707 2.293A.996.996 0 0016 2H8a.996.996 0 00-.707.293l-5 5A.996.996 0 002 8v8c0 .266.105.52.293.707l5 5A.996.996 0 008 22h8c.266 0 .52-.105.707-.293l5-5A.996.996 0 0022 16V8a.996.996 0 00-.293-.707l-5-5zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z" />
</svg>
);
}

View file

@ -1,13 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function ExclamationTriangleIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg fill="currentColor" viewBox="0 0 17 16" height="1em" width="1em" {...props}>
<path
fillRule="evenodd"
d="M8.982 1.566a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 00-.9.995l.35 3.507a.552.552 0 001.1 0l.35-3.507A.905.905 0 008 5zm.002 6a1 1 0 100 2 1 1 0 000-2z"
/>
</svg>
);
}

View file

@ -1,11 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function ExternalIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M15.5 2.25a.75.75 0 01.75-.75h5.5a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0V4.06l-6.22 6.22a.75.75 0 11-1.06-1.06L19.94 3h-3.69a.75.75 0 01-.75-.75z" />
<path d="M2.5 4.25c0-.966.784-1.75 1.75-1.75h8.5a.75.75 0 010 1.5h-8.5a.25.25 0 00-.25.25v15.5c0 .138.112.25.25.25h15.5a.25.25 0 00.25-.25v-8.5a.75.75 0 011.5 0v8.5a1.75 1.75 0 01-1.75 1.75H4.25a1.75 1.75 0 01-1.75-1.75V4.25z" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
// icon:bxs-file-blank | Boxicons https://boxicons.com/ | Atisa
import * as React from 'react';
export function FileIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M6 2a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6H6zm8 7h-1V4l5 5h-4z" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
// icon:bxs-folder | Boxicons https://boxicons.com/ | Atisa
import * as React from 'react';
export function FolderIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M20 5h-9.586L8.707 3.293A.997.997 0 008 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V7c0-1.103-.897-2-2-2z" />
</svg>
);
}

View file

@ -1,13 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function HappyMessageIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 64 64" fill="currentColor" height="1em" width="1em" {...props}>
<g fill="none" stroke="currentColor" strokeMiterlimit={10} strokeWidth={2}>
<path d="M24 30a8 8 0 0016 0M18 20h2M46 20h-2" />
<path d="M32 47h31V5H1v42h17v12z" />
</g>
</svg>
);
}

View file

@ -1,10 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function InfoCircleIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 512 512" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M256 56C145.72 56 56 145.72 56 256s89.72 200 200 200 200-89.72 200-200S366.28 56 256 56zm0 82a26 26 0 11-26 26 26 26 0 0126-26zm48 226h-88a16 16 0 010-32h28v-88h-16a16 16 0 010-32h32a16 16 0 0116 16v104h28a16 16 0 010 32z" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
/* eslint-disable max-len */
import * as React from 'react';
export function MenuIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z" />
</svg>
);
}

View file

@ -1,20 +0,0 @@
// icon:pointer | Lucide https://lucide.dev/ | Lucide
import * as React from 'react';
export function PointerIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
viewBox="0 0 24 24"
height="1em"
width="1em"
{...props}>
<path d="M22 14a8 8 0 01-8 8M18 11v-1a2 2 0 00-2-2v0a2 2 0 00-2 2v0M14 10V9a2 2 0 00-2-2v0a2 2 0 00-2 2v1M10 9.5V4a2 2 0 00-2-2v0a2 2 0 00-2 2v10" />
<path d="M18 11a2 2 0 114 0v3a8 8 0 01-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 012.83-2.82L7 15" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function RightFromBracketIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 512 512" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M160 96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96C43 32 0 75 0 128v256c0 53 43 96 96 96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32-14.3-32-32V128c0-17.7 14.3-32 32-32h64zm344.5 177.4c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6S320 110.5 320 120v72H192c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32h128v72c0 9.6 5.7 18.2 14.5 22s19 2 26-4.6l144-136z" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function RightToBracketIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 512 512" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M352 96h64c17.7 0 32 14.3 32 32v256c0 17.7-14.3 32-32 32h-64c-17.7 0-32 14.3-32 32s14.3 32 32 32h64c53 0 96-43 96-96V128c0-53-43-96-96-96h-64c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-7.5 177.4c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6S160 110.5 160 120v72H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32h128v72c0 9.6 5.7 18.2 14.5 22s19 2 26-4.6l144-136z" />
</svg>
);
}

View file

@ -1,11 +0,0 @@
// icon:settings-2-fill | Remix Icon https://remixicon.com/ | Remix Design
import * as React from 'react';
export function SettingsIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path fill="none" d="M0 0h24v24H0z" />
<path d="M8.686 4l2.607-2.607a1 1 0 011.414 0L15.314 4H19a1 1 0 011 1v3.686l2.607 2.607a1 1 0 010 1.414L20 15.314V19a1 1 0 01-1 1h-3.686l-2.607 2.607a1 1 0 01-1.414 0L8.686 20H5a1 1 0 01-1-1v-3.686l-2.607-2.607a1 1 0 010-1.414L4 8.686V5a1 1 0 011-1h3.686zM12 15a3 3 0 100-6 3 3 0 000 6z" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function SquareIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M14 1a1 1 0 011 1v12a1 1 0 01-1 1H2a1 1 0 01-1-1V2a1 1 0 011-1h12zM2 0a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2H2z" />
</svg>
);
}

View file

@ -1,33 +0,0 @@
/* eslint-disable max-len */
import React from 'react';
export function TodayIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 512 512" fill="currentColor" height="1em" width="1em" {...props}>
<path
fill="none"
stroke="currentColor"
strokeLinejoin="round"
strokeWidth={32}
d="M96 80 H416 A48 48 0 0 1 464 128 V416 A48 48 0 0 1 416 464 H96 A48 48 0 0 1 48 416 V128 A48 48 0 0 1 96 80 z"
/>
<path d="M397.82 80H114.18C77.69 80 48 110.15 48 147.2V192h8c0-16 24-32 40-32h320c16 0 40 16 40 32h8v-44.8c0-37.05-29.69-67.2-66.18-67.2z" />
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={32}
d="M128 48v32M384 48v32"
/>
<path d="M124.57 208 H195.43 A28.57 28.57 0 0 1 224 236.57 V307.43 A28.57 28.57 0 0 1 195.43 336 H124.57 A28.57 28.57 0 0 1 96 307.43 V236.57 A28.57 28.57 0 0 1 124.57 208 z" />
<path
fill="none"
stroke="currentColor"
strokeLinejoin="round"
strokeWidth={32}
d="M464 256v-48a48.14 48.14 0 00-48-48H96a48.14 48.14 0 00-48 48v48"
/>
</svg>
);
}

View file

@ -1,15 +0,0 @@
import * as React from 'react';
import Svg, { Path } from 'react-native-svg';
export function TrashIcon(props: React.ComponentProps<typeof Svg>) {
return (
<Svg viewBox="0 0 24 24" fill="currentColor" height="20px" width="20px" {...props}>
<Path
fillRule="evenodd"
d="M16 1.75V3h5.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H8V1.75C8 .784 8.784 0 9.75 0h4.5C15.216 0 16 .784 16 1.75zm-6.5 0a.25.25 0 01.25-.25h4.5a.25.25 0 01.25.25V3h-5V1.75z"
/>
<Path d="M4.997 6.178a.75.75 0 10-1.493.144L4.916 20.92a1.75 1.75 0 001.742 1.58h10.684a1.75 1.75 0 001.742-1.581l1.413-14.597a.75.75 0 00-1.494-.144l-1.412 14.596a.25.25 0 01-.249.226H6.658a.25.25 0 01-.249-.226L4.997 6.178z" />
<Path d="M9.206 7.501a.75.75 0 01.793.705l.5 8.5A.75.75 0 119 16.794l-.5-8.5a.75.75 0 01.705-.793zm6.293.793A.75.75 0 1014 8.206l-.5 8.5a.75.75 0 001.498.088l.5-8.5z" />
</Svg>
);
}

View file

@ -1,10 +0,0 @@
/* eslint-disable max-len */
import * as React from 'react';
export function UserIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M12 2C6.579 2 2 6.579 2 12s4.579 10 10 10 10-4.579 10-10S17.421 2 12 2zm0 5c1.727 0 3 1.272 3 3s-1.273 3-3 3c-1.726 0-3-1.272-3-3s1.274-3 3-3zm-5.106 9.772c.897-1.32 2.393-2.2 4.106-2.2h2c1.714 0 3.209.88 4.106 2.2C15.828 18.14 14.015 19 12 19s-3.828-.86-5.106-2.228z" />
</svg>
);
}

View file

@ -1,10 +0,0 @@
/* eslint-disable max-len */
import * as React from 'react';
export function UserTieIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em" {...props}>
<path d="M12 3c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4m4 10.54c0 1.06-.28 3.53-2.19 6.29L13 15l.94-1.88c-.62-.07-1.27-.12-1.94-.12s-1.32.05-1.94.12L11 15l-.81 4.83C8.28 17.07 8 14.6 8 13.54c-2.39.7-4 1.96-4 3.46v4h16v-4c0-1.5-1.6-2.76-4-3.46z" />
</svg>
);
}

View file

@ -2,8 +2,6 @@ import React, { ReactNode } from 'react';
import { StyleProp, Text, TextStyle } from 'react-native';
import { createStyleSheet, useStyles } from 'react-native-unistyles';
import { SizeEnum } from '@procyon/types/enums';
export type LabelProps = {
children: ReactNode;
disabled?: boolean;

View file

@ -2,7 +2,7 @@ import React, { Children, FC, isValidElement, ReactNode } from 'react';
import { ScrollView, StyleProp, ViewStyle } from 'react-native';
import { createStyleSheet, useStyles } from 'react-native-unistyles';
import { ListItemValue } from '@procyon/components/List/ListItem';
import { ListItemValue } from '@procyon/components/ListItem';
export type ListProps = {
children: ReactNode;

View file

@ -1,2 +0,0 @@
export { List, ListProps } from './List';
export { ListItem, ListItemProps, ListItemValue } from './ListItem';

View file

@ -4,7 +4,7 @@ import { useAnimatedRef } from 'react-native-reanimated';
import { createStyleSheet, useStyles } from 'react-native-unistyles';
import Values from 'values.js';
import { ListProps } from '@procyon/components/List/List';
import { ListProps } from '@procyon/components/List';
import { RippleEffect } from '@procyon/components/RippleEffect';
import { isDark } from '@procyon/utils/color';

View file

@ -1,109 +1,48 @@
import React, { FC, ReactNode } from 'react';
import { StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native';
import { createStyleSheet, useStyles } from 'react-native-unistyles';
import { StatusEnum } from '@procyon/types/enums';
import { CheckCircleIcon } from './Icons/CheckCircle';
import { ErrorIcon } from './Icons/ExclamationCircle';
import { ExclamationTriangleIcon } from './Icons/ExclamationTriangle';
import { InfoCircleIcon } from './Icons/InfoCircle';
import styled from '@emotion/native';
export type MessageProps = {
children?: ReactNode;
status: StatusEnum;
style?: {
container?: StyleProp<ViewStyle>;
left?: StyleProp<ViewStyle>;
right?: StyleProp<ViewStyle>;
text?: StyleProp<TextStyle>;
title?: StyleProp<TextStyle>;
};
color: 'primary' | 'secondary' | 'positive' | 'negative' | 'base';
title?: string;
};
export const Message: FC<MessageProps> = ({
status = StatusEnum.none,
title,
children,
}) => {
const { styles } = useStyles(styleSheet, {
status,
});
export const Message: FC<MessageProps> = ({ color = 'base', title, children }) => {
return (
<View style={[styles.procyon_message_container()]} aria-label="message">
<View style={[styles.procyon_message_left()]}>
{status === StatusEnum.info && <InfoCircleIcon />}
{status === StatusEnum.success && <CheckCircleIcon />}
{status === StatusEnum.warning && <ExclamationTriangleIcon />}
{status === StatusEnum.error && <ErrorIcon />}
{status === StatusEnum.none && <InfoCircleIcon />}
</View>
<View style={[styles.procyon_message_right]}>
{title && <Text style={[styles.procyon_message_title]}>{title}</Text>}
{children && <Text style={[styles.procyon_message_text]}>{children}</Text>}
</View>
</View>
<MessageContainer aria-label="message" color={color}>
{title && <MessageTitle color={color}>{title}</MessageTitle>}
<MessageText>{children}</MessageText>
</MessageContainer>
);
};
const styleSheet = createStyleSheet((theme) => {
const MessageContainer = styled.View<{
color: MessageProps['color'];
}>(({ theme, color }) => {
return {
procyon_message_container: () => {
const variantForStatus = (status: StatusEnum) => ({
borderColor: theme.components.message[status].border,
backgroundColor: theme.components.message[status].background,
});
return {
padding: theme.spacing.sm,
display: 'flex',
flexDirection: 'row',
backgroundColor: theme.palette[color!].light,
borderRadius: theme.rounded.sm,
borderWidth: 1,
borderRadius: theme.spacing.md,
marginBottom: 10,
variants: {
status: {
[StatusEnum.none]: variantForStatus(StatusEnum.none),
[StatusEnum.info]: variantForStatus(StatusEnum.info),
[StatusEnum.success]: variantForStatus(StatusEnum.success),
[StatusEnum.warning]: variantForStatus(StatusEnum.warning),
[StatusEnum.error]: variantForStatus(StatusEnum.error),
},
},
};
},
procyon_message_left: () => {
const variantForStatus = (status: StatusEnum) => ({
color: theme.components.message[status].color,
});
return {
borderColor: theme.palette[color!].dark,
padding: theme.spacing.md,
fontSize: theme.fontSize.xl,
variants: {
status: {
[StatusEnum.none]: variantForStatus(StatusEnum.none),
[StatusEnum.info]: variantForStatus(StatusEnum.info),
[StatusEnum.success]: variantForStatus(StatusEnum.success),
[StatusEnum.warning]: variantForStatus(StatusEnum.warning),
[StatusEnum.error]: variantForStatus(StatusEnum.error),
},
},
};
},
procyon_message_right: {
padding: theme.spacing.md,
justifyContent: 'center',
flex: 'auto' as any,
},
procyon_message_title: {
fontFamily: theme.fontFamily,
fontSize: theme.fontSize.lg,
marginBottom: 10,
},
procyon_message_text: {
fontFamily: theme.fontFamily,
fontSize: theme.fontSize.sm,
},
minWidth: 200,
};
});
const MessageTitle = styled.Text<{
color: MessageProps['color'];
}>(({ theme, color }) => {
return {
fontFamily: theme.fontFamily,
fontSize: theme.fontSize.lg,
color: theme.palette[color!].dark,
marginBottom: theme.spacing.sm,
};
});
const MessageText = styled.Text(({ theme }) => {
return {
fontFamily: theme.fontFamily,
fontSize: theme.fontSize.md,
};
});

View file

@ -5,7 +5,7 @@ import Values from 'values.js';
import { isNilOrEmpty } from '@procyon/utils/isNilOrEmpty';
import { ModalId, useModal } from '../context';
import { ModalId, useModal } from './context';
export const Modals = () => {
const [, , { modals, opened, closeModal }] = useModal();

View file

@ -1 +1 @@
export { Modals } from './components/Modals';
export { Modals } from './Modals';

View file

@ -1,4 +1,5 @@
import React, { FC, ReactNode, useEffect } from 'react';
import { useTheme } from '@emotion/react';
import { StyleProp, View, ViewStyle } from 'react-native';
import Animated, {
useAnimatedStyle,
@ -7,7 +8,6 @@ import Animated, {
withSequence,
withTiming,
} from 'react-native-reanimated';
import { useStyles } from 'react-native-unistyles';
export type PlaceholderProps = {
active: boolean;
@ -19,7 +19,7 @@ export type PlaceholderProps = {
};
export const Skeleton: FC<PlaceholderProps> = ({ active, children, layout, style }) => {
const { theme } = useStyles();
const theme = useTheme();
const opacity = useSharedValue(1);
@ -55,7 +55,7 @@ export const Skeleton: FC<PlaceholderProps> = ({ active, children, layout, style
key={key}
style={[
{
backgroundColor: theme.components.skeleton.animation.background,
backgroundColor: theme.palette.base.main,
borderRadius: theme.spacing.md,
...style,
},

View file

@ -0,0 +1,102 @@
import React, { FC } from 'react';
import styled from '@emotion/native';
import { useTheme } from '@emotion/react';
import Values from 'values.js';
import { Grid, GridCol, GridRow } from '@procyon/components/Grid';
import { GridProps } from '@procyon/components/Grid/Grid';
export type TableProps = {
cols: FC<any>[];
colsCount: GridProps['cols'];
nthHighlight?: boolean;
rows: FC<any>[][];
};
export const Table: FC<TableProps> = ({ cols, rows, nthHighlight = true, colsCount }) => {
const theme = useTheme();
return (
<TableContainer cols={colsCount ?? { xs: cols.length }}>
<TableRow nthHighlight={false}>
{cols.map((Col, i) => (
<Col
key={i}
cols={{ xs: 1 }}
style={{
...(i === 0 && {
borderTopLeftRadius: theme.rounded.md - 1,
}),
...(i === cols.length - 1 && {
borderTopRightRadius: theme.rounded.md - 1,
}),
}}
/>
))}
</TableRow>
{rows.map((row, r) => {
return (
<TableRow
key={r}
nthHighlight={nthHighlight && (r + 1) % 2 === 0}
style={{
...(r === rows.length - 1 && {
borderBottomLeftRadius: theme.rounded.md - 1,
borderBottomRightRadius: theme.rounded.md - 1,
}),
}}>
{row.map((Cell, c) => (
<Cell key={c} cols={{ sm: 1 }} />
))}
</TableRow>
);
})}
</TableContainer>
);
};
const TableContainer = styled(Grid)(({ theme }) => {
return {
borderWidth: 1,
borderColor: theme.palette.primary.dark,
borderRadius: theme.rounded.md,
};
});
const TableRow = styled(GridRow)<{
nthHighlight: TableProps['nthHighlight'];
}>(({ nthHighlight, theme }) => {
return {
backgroundColor: nthHighlight
? new Values(theme.palette.base.main).tint(20).rgbString()
: 'transparent',
};
});
export const TableHead = styled(GridCol)(({ theme }) => {
return {
backgroundColor: theme.palette.primary.dark,
justifyContent: 'center',
padding: theme.spacing.md,
};
});
export const TableCell = styled(GridCol)(({ theme }) => {
return {
justifyContent: 'center',
padding: theme.spacing.md,
};
});
export const TableText = styled.Text<{
head?: boolean;
}>(({ theme, head }) => {
return {
...(head
? {
color: theme.palette.primary.light,
}
: {
color: theme.palette.text.main,
}),
};
});

View file

@ -1,45 +0,0 @@
import React, { FC, useMemo } from 'react';
import clsx from 'clsx';
import type { TableRow as TableRowType } from '../types';
import { TableCol } from '../types';
import { TableCell } from './TableCell';
import { TableHead } from './TableHead';
import TableRow from './TableRow';
export type TableProps = {
className?: string;
cols: TableCol;
nthStyle?: boolean;
rows: TableRowType[];
};
export const Table: FC<TableProps> = ({ cols, rows, nthStyle = true, className }) => {
const body = useMemo(() => {
if (!rows) {
return null;
}
return rows.map((row, i) => (
<TableRow nthStyle={nthStyle} key={i} className={row.className}>
{Object.keys(cols.data).map((cell) => (
<TableCell key={cell} title={cols.data[cell].value} className={row.data[cell].className}>
{row.data[cell].value}
</TableCell>
))}
</TableRow>
));
}, [cols.data, rows, nthStyle]);
return (
<div className={clsx('tablek', className)}>
<div className="tablek-head-row">
{Object.keys(cols.data).map((c) => (
<TableHead key={c} className={cols.className}>
{cols.data[c].value}
</TableHead>
))}
</div>
{body}
</div>
);
};

View file

@ -1,16 +0,0 @@
import React, { FC, ReactNode } from 'react';
import clsx from 'clsx';
export type TableCellProps = {
children?: ReactNode;
className?: string;
title?: ReactNode;
};
export const TableCell: FC<TableCellProps> = ({ children, className, title }) => {
return (
<div className={clsx('tablek-cell sm-m:block', className)} data-title={title}>
{children}
</div>
);
};

View file

@ -1,11 +0,0 @@
import React, { ReactNode } from 'react';
import clsx from 'clsx';
export type TableHeadProps = {
children?: ReactNode;
className?: string;
};
export const TableHead: React.FC<TableHeadProps> = ({ children, className }) => {
return <div className={clsx('tablek-head-cell', className)}>{children}</div>;
};

View file

@ -1,26 +0,0 @@
import React from 'react';
import clsx from 'clsx';
type IProps = {
children: React.ReactElement[];
className?: string;
nthStyle?: boolean;
};
const TableRow = ({ nthStyle, children, className }: IProps) => {
return (
<div
className={clsx(
'tablek-row',
{
'tablek-row--nth-style': nthStyle,
},
className
)}
>
{children}
</div>
);
};
export default TableRow;

View file

@ -1 +0,0 @@
export { Table, TableProps } from './components/Table';

View file

@ -1,21 +0,0 @@
import { ReactNode } from 'react';
type TableCell = {
className?: string;
component?: ReactNode;
value?: string | number;
};
export type TableCol = {
className?: string;
data: {
[key: string]: TableCell;
};
};
export type TableRow = {
className?: string;
data: {
[key: string]: TableCell;
};
};

View file

@ -15,7 +15,6 @@ import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventType
import { createStyleSheet, useStyles } from 'react-native-unistyles';
import { FieldMessage } from '@procyon/components/FieldMessage';
import { SizeEnum } from '@procyon/types/enums';
import { InputElementType } from '@procyon/types/form';
import { Masked } from '@procyon/utils/imask';
@ -65,7 +64,7 @@ export const TextField: React.FC<TextFieldProps> = (props) => {
message,
style,
readonly,
size = SizeEnum.md,
size = 'md',
secret,
loading,
} = props;

View file

@ -0,0 +1,148 @@
import React, { FC } from 'react';
import styled from '@emotion/native';
import { ButtonProps } from '@procyon/components/Button';
import { isNilOrEmpty } from '@procyon/utils/isNilOrEmpty';
import { Message } from '../Message';
import { useToaster } from './hooks';
export type ToastersProps = {
position:
| 'bottomCenter'
| 'bottomLeft'
| 'bottomRight'
| 'leftCenter'
| 'rightCenter'
| 'topCenter'
| 'topLeft'
| 'topRight';
};
export const Toasters: FC<ToastersProps> = ({ position }) => {
const { toasters } = useToaster();
if (isNilOrEmpty(toasters)) {
return null;
}
return (
<ToastersContainer position={position}>
{Object.keys(toasters).map((toasterId) => {
const toaster = toasters[toasterId];
return (
<Message key={toasterId} color={toaster.color} title={toaster.title}>
{toaster.message}
</Message>
);
})}
</ToastersContainer>
);
};
const ToastersContainer = styled.View<{
position: ToastersProps['position'];
}>(
() => {
return {
position: 'absolute',
};
},
({ position }) => {
switch (position) {
case 'topLeft':
return {
top: 5,
left: 5,
};
case 'topCenter':
return {
top: 5,
left: '50%',
transform: [
{
translateX: '-50%',
translateY: '0',
} as any,
],
};
case 'topRight':
return {
top: 5,
right: 5,
};
case 'bottomLeft':
return {
bottom: 5,
left: 5,
};
case 'bottomCenter':
return {
bottom: 5,
left: '50%',
transform: [
{
translateX: '-50%',
translateY: '0',
} as any,
],
};
case 'bottomRight':
return {
bottom: 5,
right: 5,
};
case 'rightCenter': {
return {
top: '50%',
transform: [
{
translateY: '-50%',
translateX: '0',
} as any,
],
right: 5,
};
}
case 'leftCenter': {
return {
top: '50%',
transform: [
{
translateY: '-50%',
translateX: '0',
} as any,
],
left: 5,
};
}
default: {
return {};
}
}
},
);
const ButtonText = styled.Text<{
color: ButtonProps['color'];
size: ButtonProps['size'];
variant: ButtonProps['variant'];
}>(
({ theme, size }) => ({
fontFamily: theme.fontFamily,
padding: theme.spacing[size!] + 2,
fontSize: theme.fontSize[size!],
fontWeight: 'normal',
userSelect: 'none',
textTransform: 'uppercase',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: 4,
}),
() => {
return {
position: 'absolute',
};
},
);

View file

@ -1,112 +0,0 @@
import React, { FC } from 'react';
import { View } from 'react-native';
import { createStyleSheet, useStyles } from 'react-native-unistyles';
import { isNilOrEmpty } from '@procyon/utils/isNilOrEmpty';
import { Message } from '../../Message';
import { useToaster } from '../hooks';
export type ToastersProps = {
position:
| 'bottomCenter'
| 'bottomLeft'
| 'bottomRight'
| 'leftCenter'
| 'rightCenter'
| 'topCenter'
| 'topLeft'
| 'topRight';
};
export const Toasters: FC<ToastersProps> = ({ position }) => {
const { toasters } = useToaster();
const { styles } = useStyles(styleSheet, {
position,
});
if (isNilOrEmpty(toasters)) {
return null;
}
return (
<View style={[styles.procyon_toasters_container]}>
{Object.keys(toasters).map((toasterId) => {
const toaster = toasters[toasterId];
return (
<Message key={toasterId} status={toaster.status} title={toaster.title}>
{toaster.message}
</Message>
);
})}
</View>
);
};
const styleSheet = createStyleSheet(() => ({
procyon_toasters_container: {
position: 'absolute',
zIndex: 10,
variants: {
position: {
topLeft: {
top: 5,
left: 5,
},
topCenter: {
top: 5,
left: '50%',
transform: [
{
translateX: -50,
translateY: 0,
},
],
},
topRight: {
top: 5,
right: 5,
},
rightCenter: {
top: '50%',
transform: [
{
translateY: -50,
translateX: 0,
},
],
right: 5,
},
bottomRight: {
bottom: 5,
right: 5,
},
bottomCenter: {
bottom: 5,
left: '50%',
transform: [
{
translateX: -50,
translateY: 0,
},
],
},
bottomLeft: {
bottom: 5,
left: 5,
},
leftCenter: {
top: '50%',
transform: [
{
translateY: -50,
translateX: 0,
},
],
left: 5,
},
},
},
},
}));

View file

@ -1,12 +1,10 @@
import React, { createContext, FC, ReactNode, useEffect, useMemo, useState } from 'react';
import { omit } from 'ramda';
import { StatusEnum } from '@procyon/types/enums';
export type Toaster = {
color: 'primary' | 'secondary' | 'positive' | 'negative' | 'base';
id: string;
message: string;
status: StatusEnum;
timeout?: number;
title?: string;
};

View file

@ -1 +1 @@
export { Toasters } from './components/Toasters';
export { Toasters } from './Toasters';

View file

@ -1,46 +1,51 @@
import React, { FC } from 'react';
import { StyleProp, Text, TextStyle, View } from 'react-native';
import { useStyles } from 'react-native-unistyles';
import styled from '@emotion/native';
import { SizeEnum } from '@procyon/types/enums';
export type SectionProps = {
export type TypographyProps = {
children: any;
size?: SizeEnum;
style?: {
message?: StyleProp<TextStyle>;
title?: StyleProp<TextStyle>;
};
title?: string;
size?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'text';
};
export const Typography: FC<SectionProps> = ({
title,
children,
style,
size = SizeEnum.md,
}) => {
const { theme } = useStyles();
return (
<View>
<Text
style={[
{
fontSize: theme.fontSize[size],
fontFamily: theme.fontFamily,
...(children
? {
marginBottom: theme.spacing.sm,
}
: {}),
},
style?.title,
]}>
{title}
</Text>
<Text style={[{ fontFamily: theme.fontFamily }, style?.message]}>
{children && children}
</Text>
</View>
);
export const Typography: FC<TypographyProps> = ({ children, size = 'h5' }) => {
return <TypographyText size={size}>{children}</TypographyText>;
};
const TypographyText = styled.Text<{
size: TypographyProps['size'];
}>(({ size, theme }) => {
switch (size) {
case 'h1': {
return {
fontSize: theme.fontSize['xxxl'],
};
}
case 'h2': {
return {
fontSize: theme.fontSize['xxl'],
};
}
case 'h3': {
return {
fontSize: theme.fontSize['xl'],
};
}
case 'h4': {
return {
fontSize: theme.fontSize['lg'],
};
}
case 'h5': {
return {
fontSize: theme.fontSize['md'],
};
}
case 'text': {
return {
fontSize: theme.fontSize['sm'],
};
}
default: {
return {};
}
}
});

View file

@ -1,18 +0,0 @@
import { useEffect, useState } from 'react';
import { debounceAfter } from '@procyon/utils/debounce';
export const useOnResize = () => {
const [toggle, setToggle] = useState(false);
const handleResize = debounceAfter(() => {
setToggle(!toggle);
}, 100);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [toggle]);
return null;
};

View file

@ -0,0 +1,22 @@
import { useEffect, useState } from 'react';
import { Dimensions } from 'react-native';
export function useScreenDimensions(): { height: number; width: number } {
const initialDimensions = Dimensions.get('screen');
const [width, setWidth] = useState(initialDimensions.width);
const [height, setHeight] = useState(initialDimensions.height);
const handleChange = ({ screen }) => {
setWidth(screen.width);
setHeight(screen.height);
};
useEffect(() => {
const sub = Dimensions.addEventListener('change', handleChange);
return () => {
sub.remove();
};
}, []);
return { width, height };
}

View file

@ -1,16 +0,0 @@
import { useLayoutEffect, useState } from 'react';
const useWindowSize = () => {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
};
export default useWindowSize;

View file

@ -17,6 +17,8 @@ export const procyonBaseTheme = {
md: 16,
lg: 22,
xl: 26,
xxl: 32,
xxxl: 38,
},
breakpoints: {
xs: 0,

View file

@ -47,154 +47,4 @@ export const procyonLightTheme = {
dark: new Values(COLORS.text).shade(10).rgbString(),
},
},
components: {
skeleton: {
animation: {
background: palette.gray['200'],
},
},
button: {
blank: {
color: '#000',
border: palette.gray['200'],
background: '#fff',
},
none: {
color: palette.gray['500'],
border: palette.gray['200'],
background: '#fff',
},
info: {
color: '#fff',
border: palette.azure['500'],
background: palette.azure['400'],
},
success: {
color: '#fff',
border: palette.submarine['500'],
background: palette.submarine['400'],
},
warning: {
color: '#000',
border: palette.tangerine['500'],
background: palette.tangerine['400'],
},
error: {
color: '#fff',
border: palette.cerise['500'],
background: palette.cerise['400'],
},
disabled: {
color: palette.gray['200'],
border: palette.gray['200'],
background: palette.gray['100'],
},
},
field: {
label: {
color: palette.gray['500'],
background: '#fff',
},
input: {
color: palette.gray['900'],
border: palette.gray['300'],
background: '#fff',
},
icon: {
color: palette.gray['500'],
},
radioButton: {
active: {
color: '#000',
background: palette.purple['200'],
border: palette.purple['300'],
},
},
none: {
background: palette.gray['200'],
border: palette.gray['300'],
},
info: {
background: palette.azure['400'],
border: palette.azure['500'],
},
success: {
background: palette.submarine['400'],
border: palette.submarine['500'],
},
warning: {
background: palette.tangerine['400'],
border: palette.tangerine['500'],
},
error: {
background: palette.cerise['400'],
border: palette.cerise['500'],
},
disabled: {
color: palette.gray['300'],
background: palette.gray['100'],
},
},
message: {
none: {
color: palette.gray['400'],
border: palette.gray['200'],
background: palette.gray['100'],
},
info: {
color: palette.azure['400'],
border: palette.azure['200'],
background: palette.azure['100'],
},
success: {
color: palette.submarine['400'],
border: palette.submarine['200'],
background: palette.submarine['100'],
},
warning: {
color: palette.tangerine['400'],
border: palette.tangerine['200'],
background: palette.tangerine['100'],
},
error: {
color: palette.cerise['400'],
border: palette.cerise['200'],
background: palette.cerise['100'],
},
},
list: {
container: {
border: palette.gray['300'],
background: 'white',
},
item: {
background: 'white',
border: palette.gray['200'],
},
odd: {
background: palette.gray['50'],
},
},
modal: {
container: {
background: '#fff',
none: {
border: palette.purple['300'],
},
info: {
border: palette.azure['300'],
},
success: {
border: palette.submarine['300'],
},
warning: {
border: palette.tangerine['300'],
},
error: {
border: palette.cerise['300'],
},
},
},
},
} as const;

View file

@ -5,19 +5,3 @@ export enum StatusEnum {
success = 'success',
warning = 'warning',
}
export enum SizeEnum {
lg = 'lg',
md = 'md',
sm = 'sm',
xl = 'xl',
}
export enum DirectionEnum {
bottom = 'b',
left = 'l',
right = 'r',
top = 't',
x = 'x',
y = 'y',
}

View file

@ -1,8 +1,8 @@
import React from 'react';
import { Button } from '@procyon/components/Button';
import { Grid, GridSizeEnum } from '@procyon/components/Grid/components/Grid';
import { GridCol } from '@procyon/components/Grid/components/GridCol';
import { Grid, GridSizeEnum } from '@procyon/components/Grid/Grid';
import { GridCol } from '@procyon/components/Grid/GridCol';
import { Skeleton } from '@procyon/components/Skeleton';
import { StatusEnum } from '@procyon/types/enums';

View file

@ -1,7 +1,6 @@
import type { StoryObj } from '@storybook/react';
import { Message } from '@procyon/components/Message';
import { StatusEnum } from '@procyon/types/enums';
type Story = StoryObj<typeof Message>;
@ -9,49 +8,49 @@ export default {
parameters: {
docs: {
description: {
component: "`import Message from '@procyon/components/Message';`"
}
}
component: "`import Message from '@procyon/components/Message';`",
},
},
},
tags: ['autodocs'],
component: Message
component: Message,
};
export const Default: Story = {
args: {
children: 'Default message',
status: StatusEnum.none
}
color: 'base',
},
};
export const Success: Story = {
export const Primary: Story = {
args: {
title: 'Success message',
children: 'Message body',
status: StatusEnum.success
}
title: 'Just the message',
children: 'Message content',
color: 'primary',
},
};
export const Info: Story = {
export const Secondary: Story = {
args: {
title: 'Info message',
children: 'Message body',
status: StatusEnum.info
}
title: 'Just the message',
children: 'Message content',
color: 'secondary',
},
};
export const Warning: Story = {
export const Positive: Story = {
args: {
title: 'Warning message',
children: 'Message body',
status: StatusEnum.warning
}
title: 'Just the message',
children: 'Message content',
color: 'positive',
},
};
export const Error: Story = {
export const Negative: Story = {
args: {
title: 'Error message',
children: 'Message body',
status: StatusEnum.error
}
title: 'Just the message',
children: 'Message content',
color: 'negative',
},
};

View file

@ -1,8 +1,9 @@
import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import { SettingsIcon } from 'lucide-react-native';
import { AngleRightIcon } from '@procyon/components/Icons/AngleRight';
import { Table } from '@procyon/components/Table';
import { Table, TableCell, TableHead, TableText } from '@procyon/components/Table';
type Story = StoryObj<typeof Table>;
@ -11,194 +12,164 @@ export default {
parameters: {
docs: {
description: {
component: "`import { Table } from '@procyon/components/Table';`"
}
}
component: "`import { Table } from '@procyon/components/Table';`",
},
tags: ['autodocs']
},
},
tags: ['autodocs'],
} as Meta<typeof Table>;
export const Default: Story = {
args: {
cols: {
data: {
company: { value: 'Company' },
contact: { value: 'Contact' },
country: { value: 'Country' },
action: { value: '' }
}
colsCount: {
xs: 5,
},
cols: [
(props) => (
<TableHead
{...props}
cols={{
xs: 2,
}}
key={1}>
<TableText head>Company</TableText>
</TableHead>
),
(props) => (
<TableHead {...props} key={2}>
<TableText head>Contact</TableText>
</TableHead>
),
(props) => (
<TableHead {...props} key={3}>
<TableText head>Country</TableText>
</TableHead>
),
(props) => (
<TableHead {...props} key={4}>
<TableText head>
<SettingsIcon strokeWidth={1} />
</TableText>
</TableHead>
),
],
rows: [
{
data: {
company: { value: 'Centro comercial Moctezuma' },
contact: { value: 'Francisco Chang' },
country: { value: 'Mexico' },
action: { component: <AngleRightIcon /> }
}
[
(props) => (
<TableCell
{...props}
cols={{
xs: 2,
}}
key={1}>
<TableText>Centro comer. Moctezuma</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={2}>
<TableText>Francisco Chang</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={3}>
<TableText>Mexico</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={4}>
<TableText>
<AngleRightIcon />
</TableText>
</TableCell>
),
],
[
(props) => (
<TableCell
{...props}
cols={{
xs: 2,
}}
key={5}>
<TableText>Alfreds Futterkiste</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={6}>
<TableText>Maria Anders</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={7}>
<TableText>German</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={8}>
<TableText>
<AngleRightIcon />
</TableText>
</TableCell>
),
],
[
(props) => (
<TableCell
{...props}
cols={{
xs: 2,
}}
key={9}>
<TableText>Centro comer. Moctezuma</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={10}>
<TableText>Francisco Chang</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={11}>
<TableText>Mexico</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={12}>
<TableText>
<AngleRightIcon />
</TableText>
</TableCell>
),
],
[
(props) => (
<TableCell
{...props}
cols={{
xs: 2,
}}
key={13}>
<TableText>Alfreds Futterkiste</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={14}>
<TableText>Maria Anders</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={15}>
<TableText>Germany</TableText>
</TableCell>
),
(props) => (
<TableCell {...props} key={16}>
<TableText>
<AngleRightIcon />
</TableText>
</TableCell>
),
],
],
},
{
data: {
company: { value: 'Alfreds Futterkiste' },
contact: { value: 'Maria Anders' },
country: { value: 'Germany' },
action: { component: <AngleRightIcon /> }
}
},
{
data: {
company: { value: 'Centro comercial Moctezuma' },
contact: { value: 'Francisco Chang' },
country: { value: 'Mexico' },
action: { component: <AngleRightIcon /> }
}
},
{
data: {
company: { value: 'Alfreds Futterkiste' },
contact: { value: 'Maria Anders' },
country: { value: 'Germany' },
action: { component: <AngleRightIcon /> }
}
},
{
data: {
company: { value: 'Centro comercial Moctezuma' },
contact: { value: 'Francisco Chang' },
country: { value: 'Mexico' },
action: { component: <AngleRightIcon /> }
}
}
]
}
};
export const Withoutnth: Story = {
args: {
nthStyle: false,
cols: {
data: {
company: { value: 'Company' },
contact: { value: 'Contact' },
country: { value: 'Country' },
action: { value: '' }
}
},
rows: [
{
data: {
company: { value: 'Alfreds Futterkiste' },
contact: { value: 'Maria Anders' },
country: { value: 'Germany' },
action: { component: <AngleRightIcon /> }
}
},
{
data: {
company: { value: 'Centro comercial Moctezuma' },
contact: { value: 'Francisco Chang' },
country: { value: 'Mexico' },
action: { component: <AngleRightIcon /> }
}
}
]
}
};
export const WithClass: Story = {
args: {
className: 'w-1/2',
cols: {
data: {
company: { value: 'Company' },
contact: { value: 'Contact' },
country: { value: 'Country' },
action: { value: '' }
}
},
rows: [
{
data: {
company: { value: 'Alfreds Futterkiste' },
contact: { value: 'Maria Anders' },
country: { value: 'Germany' },
action: { component: <AngleRightIcon /> }
}
},
{
data: {
company: { value: 'Centro comercial Moctezuma' },
contact: { value: 'Francisco Chang' },
country: { value: 'Mexico' },
action: { component: <AngleRightIcon /> }
}
}
]
}
};
export const WithSpecificClassForRow: Story = {
args: {
nthStyle: false,
cols: {
data: {
company: { value: 'Company' },
contact: { value: 'Contact' },
country: { value: 'Country' },
action: { value: '' }
}
},
rows: [
{
className: 'bg-purple-300',
data: {
company: { value: 'Alfreds Futterkiste' },
contact: { value: 'Maria Anders' },
country: { value: 'Germany' },
action: { component: <AngleRightIcon /> }
}
},
{
className: 'bg-green-300',
data: {
company: { value: 'Centro comercial Moctezuma' },
contact: { value: 'Francisco Chang' },
country: { value: 'Mexico' },
action: { component: <AngleRightIcon /> }
}
}
]
}
};
export const WithSpecificClassForCell: Story = {
args: {
nthStyle: false,
cols: {
data: {
company: { value: 'Company' },
contact: { value: 'Contact' },
country: { value: 'Country' },
action: { value: '' }
}
},
rows: [
{
data: {
company: { value: 'Alfreds Futterkiste', className: 'bg-purple-300' },
contact: { value: 'Maria Anders' },
country: { value: 'Germany' },
action: { component: <AngleRightIcon /> }
}
},
{
data: {
company: { value: 'Centro comercial Moctezuma' },
contact: { value: 'Francisco Chang' },
country: { value: 'Mexico' },
action: { component: <AngleRightIcon /> }
}
}
]
}
};

View file

@ -1,12 +1,11 @@
import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import { View } from 'react-native';
import { Button } from '@procyon/components/Button';
import { Toasters } from '@procyon/components/Toaster';
import { ToastersPosition } from '@procyon/components/Toaster/components/Toasters';
import { showToaster, ToasterWrapper } from '@procyon/components/Toaster/context';
import { useToaster } from '@procyon/components/Toaster/hooks';
import { StatusEnum } from '@procyon/types/enums';
type Story = StoryObj<typeof Toasters>;
@ -15,25 +14,25 @@ export default {
argTypes: {
position: {
options: [
ToastersPosition.TopLeft,
ToastersPosition.TopCenter,
ToastersPosition.TopRight,
ToastersPosition.RightCenter,
ToastersPosition.BottomLeft,
ToastersPosition.BottomCenter,
ToastersPosition.BottomRight,
ToastersPosition.LeftCenter,
'topLeft',
'topCenter',
'topRight',
'rightCenter',
'bottomLeft',
'bottomCenter',
'bottomRight',
'leftCenter',
],
control: { type: 'radio' },
},
},
decorators: [
(Story) => (
<div className="h-80">
<View style={{ minHeight: 500 }}>
<ToasterWrapper>
<Story />
</ToasterWrapper>
</div>
</View>
),
],
} as Meta;
@ -50,7 +49,7 @@ export const Hook: Story = {
id: 'toaster1',
title: 'Text',
message: 'Message',
status: StatusEnum.info,
color: 'base',
})
}>
Open Toaster message
@ -77,7 +76,7 @@ export const OutsideReact: Story = {
id: 'toaster2',
title: 'Text',
message: 'Message',
status: StatusEnum.success,
color: 'positive',
})
}>
Open Toaster message

View file

@ -1,7 +1,6 @@
import { Meta, StoryObj } from '@storybook/react';
import { Typography } from '@procyon/components/Typography';
import { SizeEnum } from '@procyon/types/enums';
type Story = StoryObj<typeof Typography>;
@ -10,7 +9,7 @@ export default {
parameters: {
docs: {
description: {
component: "`import Section from '@procyon/components/Section';`",
component: "`import { Typography } from '@procyon/components/Typography';`",
},
},
},
@ -19,37 +18,48 @@ export default {
export const Default: Story = {
args: {
title: 'Section',
children: 'Content',
},
};
export const WithoutTitle: Story = {
export const H1: Story = {
args: {
children: 'Content',
},
};
export const Medium: Story = {
args: {
title: 'Section',
size: SizeEnum.md,
size: 'h1',
children: 'content',
},
};
export const Large: Story = {
export const H2: Story = {
args: {
title: 'Section',
size: SizeEnum.lg,
size: 'h2',
children: 'content',
},
};
export const ExtraLarge: Story = {
export const H3: Story = {
args: {
title: 'Section',
size: SizeEnum.xl,
size: 'h3',
children: 'content',
},
};
export const H4: Story = {
args: {
size: 'h4',
children: 'content',
},
};
export const H5: Story = {
args: {
size: 'h5',
children: 'content',
},
};
export const Text: Story = {
args: {
size: 'text',
children: 'content',
},
};

View file

@ -4,7 +4,6 @@ import { View } from 'react-native';
import { Button } from '@procyon/components/Button';
import { Dropdown } from '@procyon/components/Dropdown';
import { SizeEnum, StatusEnum } from '@procyon/types/enums';
type Story = StoryObj<typeof Dropdown>;
@ -51,7 +50,7 @@ export const WithoutButtons: Story = {
export const Small: Story = {
args: {
size: SizeEnum.sm,
size: 'sm',
MainButton: <Button size="sm">Main action</Button>,
Buttons: ({ onClose, props }) => {
return (

View file

@ -3,8 +3,8 @@ import { Meta, StoryObj } from '@storybook/react';
import { Text, View } from 'react-native';
import { ListItem, ListItemValue } from '@procyon/components/List';
import { Modals } from '@procyon/components/Modal/components/Modals';
import { ModalProvider } from '@procyon/components/Modal/context';
import { Modals } from '@procyon/components/Modal/Modals';
import { Selectbox } from '@procyon/components/Selectbox';
type Story = StoryObj<typeof Selectbox>;