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
Some checks failed
forgejo/Procyon/procyon/pipeline/head There was a failure building this commit
This commit is contained in:
parent
44c0123657
commit
f4c849058d
73 changed files with 598 additions and 1260 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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 = {
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export { List, ListProps } from './List';
|
||||
export { ListItem, ListItemProps, ListItemValue } from './ListItem';
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
@ -1 +1 @@
|
|||
export { Modals } from './components/Modals';
|
||||
export { Modals } from './Modals';
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
|
|
|
|||
102
packages/components/src/Table.tsx
Normal file
102
packages/components/src/Table.tsx
Normal 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,
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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>;
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { Table, TableProps } from './components/Table';
|
||||
|
|
@ -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;
|
||||
};
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
148
packages/components/src/Toaster/Toasters.tsx
Normal file
148
packages/components/src/Toaster/Toasters.tsx
Normal 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',
|
||||
};
|
||||
},
|
||||
);
|
||||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export { Toasters } from './components/Toasters';
|
||||
export { Toasters } from './Toasters';
|
||||
|
|
|
|||
|
|
@ -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 {};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
22
packages/hooks/src/useScreenDimensions.ts
Normal file
22
packages/hooks/src/useScreenDimensions.ts
Normal 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 };
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -17,6 +17,8 @@ export const procyonBaseTheme = {
|
|||
md: 16,
|
||||
lg: 22,
|
||||
xl: 26,
|
||||
xxl: 32,
|
||||
xxxl: 38,
|
||||
},
|
||||
breakpoints: {
|
||||
xs: 0,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 /> }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue