Skip to content

Commit

Permalink
feat(devtool): generic slice route and ui improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
andreaSimonePorceddu committed Oct 14, 2021
1 parent a3d15f4 commit dcc13dd
Show file tree
Hide file tree
Showing 24 changed files with 328 additions and 104 deletions.
7 changes: 5 additions & 2 deletions devtool/src/_shared/components/Link/index.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,29 @@
import { useCallback } from 'react';
import { RouteName } from '../../contexts';
import { useRouter } from '../../hooks';
import { RouteState } from '../../contexts/Routing/types';

type Props = React.HTMLProps<HTMLSpanElement> & {
to: RouteName;
state?: RouteState;
onNavigate?: () => void;
};

export const Link: React.FC<Props> = ({
to,
state,
children,
onNavigate,
...props
}) => {
const { navigate } = useRouter();

const onClick = useCallback(() => {
navigate(to);
navigate(to, state);
if (onNavigate) {
onNavigate();
}
}, [navigate, onNavigate, to]);
}, [navigate, onNavigate, to, state]);

return (
<span
Expand Down
2 changes: 1 addition & 1 deletion devtool/src/_shared/components/Route/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const TRANSITION_TIMEOUT = {

export const Route: React.FC<Props> = ({ name, children }) => {
const { route, direction } = useRouter();
const isVisible = name === route;
const isVisible = name === route.name;

const renderChildren = useCallback(
(state: TransitionStatus) => (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import React, { useMemo } from 'react';
import { Color, useTheme } from '@morfeo/react';
import clsx from 'clsx';
import { Card } from '../../../_shared/components';
import { Card } from '../../Card';
import styles from './style.module.css';
import { useRouter } from '../../../hooks/useRouter';
import { RouteName } from '../../../contexts';
import { SliceName } from '../../../contexts/Routing/types';

export const Colors: React.FC = () => {
const theme = useTheme();
const slice = useMemo(() => (theme || {})['colors'] || {}, [theme]);
const { navigate } = useRouter();

const sliceKeys = useMemo(
() =>
Expand All @@ -19,7 +23,11 @@ export const Colors: React.FC = () => {
const section = useMemo(() => {
return sliceKeys.map(key => {
return (
<div key={`colors-${key}`} className={styles.colorContainer}>
<div
key={`colors-${key}`}
className={styles.colorContainer}
onClick={() => navigate(RouteName.SLICE, { slice: SliceName.COLORS, detailKey: key})}
>
<Card copyText={key} style={{ bg: key }} />
<h3
className={clsx('morfeo-typography-h2', styles.colorName)}
Expand All @@ -30,17 +38,7 @@ export const Colors: React.FC = () => {
</div>
);
});
}, [sliceKeys]);
}, [navigate, sliceKeys]);

return (
<div className={styles.page}>
<div className={styles.header}>
<h1 className="morfeo-typography-h1">Colors</h1>
<h2 className={clsx('morfeo-typography-h2', styles.breadcrumb)}>
{'slices > colors'}
</h2>
</div>
<div className={styles.colorsSection}>{section}</div>
</div>
);
return <>{section}</>;
};
13 changes: 13 additions & 0 deletions devtool/src/_shared/components/Slices/Colors/style.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.colorContainer {
display: flex;
align-items: flex-start;
flex-direction: column;
padding: var(--spacings-xs);
}

.colorName {
max-width: 10rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
100 changes: 100 additions & 0 deletions devtool/src/_shared/components/Slices/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import { SliceName } from '../../contexts';
import { Colors } from './Colors/index';

export const slices = {
[SliceName.COLORS]: {
render: <Colors />,
renderDetail: <></>,
displayName: 'colors',
},
[SliceName.RADII]: {
render: <></>,
renderDetail: <></>,
displayName: 'radii',
},
[SliceName.SIZES]: {
render: <></>,
renderDetail: <></>,
displayName: 'sizes',
},
[SliceName.FONTS]: {
render: <></>,
renderDetail: <></>,
displayName: 'fonts',
},
[SliceName.SHADOWS]: {
render: <></>,
renderDetail: <></>,
displayName: 'shadows',
},
[SliceName.BORDERS]: {
render: <></>,
renderDetail: <></>,
displayName: 'borders',
},
[SliceName.SPACINGS]: {
render: <></>,
renderDetail: <></>,
displayName: 'spacings',
},
[SliceName.Z_INDICES]: {
render: <></>,
renderDetail: <></>,
displayName: 'zIndices',
},
[SliceName.FONT_SIZES]: {
render: <></>,
renderDetail: <></>,
displayName: 'fontSizes',
},
[SliceName.GRADIENTS]: {
render: <></>,
renderDetail: <></>,
displayName: 'gradients',
},
[SliceName.OPACITIES]: {
render: <></>,
renderDetail: <></>,
displayName: 'opacities',
},
[SliceName.FONT_WEIGHTS]: {
render: <></>,
renderDetail: <></>,
displayName: 'fontWeights',
},
[SliceName.LINE_HEIGHTS]: {
render: <></>,
renderDetail: <></>,
displayName: 'lineHeights',
},
[SliceName.BREAKPOINTS]: {
render: <></>,
renderDetail: <></>,
displayName: 'breakpoints',
},
[SliceName.TRANSITIONS]: {
render: <></>,
renderDetail: <></>,
displayName: 'transitions',
},
[SliceName.BORDER_WIDTHS]: {
render: <></>,
renderDetail: <></>,
displayName: 'borderWidths',
},
[SliceName.MEDIA_QUERIES]: {
render: <></>,
renderDetail: <></>,
displayName: 'mediaQueries',
},
[SliceName.BORDER_STYLES]: {
render: <></>,
renderDetail: <></>,
displayName: 'borderStyles',
},
[SliceName.LETTER_SPACINGS]: {
render: <></>,
renderDetail: <></>,
displayName: 'letterSpacings',
},
};
1 change: 1 addition & 0 deletions devtool/src/_shared/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ export * from './Card';
export * from './Route';
export * from './Accordion';
export * from './CopyButton';
export * from './Slices';
11 changes: 6 additions & 5 deletions devtool/src/_shared/contexts/Routing/Routing.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import React, { createContext, useState, useMemo } from "react";
import { RouteName, RoutingContextType } from "./types";
import { RouteName, RoutingContextType, RouteType } from './types';
import { routes } from './routes';

export const routingContext = createContext<RoutingContextType>({
index: RouteName.HOME,
current: RouteName.HOME,
index: routes.index.name,
current: routes.index,
} as RoutingContextType);

const { Provider } = routingContext;

export const RoutingProvider: React.FC = ({ children }) => {
const [current, setCurrent] = useState(RouteName.HOME);
const [history, setHistory] = useState<RouteName[]>([]);
const [current, setCurrent] = useState<RouteType>(routes.index);
const [history, setHistory] = useState<RouteType[]>([]);

const value = useMemo(
() => ({ index: RouteName.HOME, current, history, setCurrent, setHistory }),
Expand Down
10 changes: 10 additions & 0 deletions devtool/src/_shared/contexts/Routing/routes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { RouteName } from './types';

export const routes = {
[RouteName.HOME]: {
name: RouteName.HOME,
},
[RouteName.SLICE]: {
name: RouteName.SLICE,
},
}
41 changes: 37 additions & 4 deletions devtool/src/_shared/contexts/Routing/types.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,48 @@ import React from "react";

export enum RouteName {
HOME = "index",
SLICE = "slice"
}

export enum SliceName {
COLORS = "colors",
RADII = "radii",
SIZES = "sizes",
FONTS = "fonts",
SHADOWS = "shadows",
BORDERS = "borders",
SPACINGS = "spacings",
Z_INDICES = "zIndices",
FONT_SIZES = "fontSizes",
GRADIENTS = "gradients",
OPACITIES = "opacities",
FONT_WEIGHTS = "fontWeights",
LINE_HEIGHTS = "lineHeights",
BREAKPOINTS = "breakpoints",
TRANSITIONS = "transitions",
BORDER_WIDTHS = "borderWidths",
MEDIA_QUERIES = "mediaQueries",
BORDER_STYLES = "borderStyles",
LETTER_SPACINGS = "letterSpacings",
}

export type RouteState = {
slice: SliceName,
detailKey?: string
}

export type RouteType = {
name: RouteName,
state?: RouteState,
parentRoute?: RouteName
}

export type RoutingDirection = "right" | "left";

export type RoutingContextType = {
index: RouteName;
current: RouteName;
history: RouteName[];
setCurrent: React.Dispatch<React.SetStateAction<RouteName>>;
setHistory: React.Dispatch<React.SetStateAction<RouteName[]>>;
current: RouteType;
history: RouteType[];
setCurrent: React.Dispatch<React.SetStateAction<RouteType>>;
setHistory: React.Dispatch<React.SetStateAction<RouteType[]>>;
};
12 changes: 10 additions & 2 deletions devtool/src/_shared/css/dark-components.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
color: var(--colors-inverted-text-color);
border: var(--border-widths-none) var(--border-styles-none);
cursor: pointer;
outline: none;
font-size: var(--font-sizes-m);
font-weight: var(--font-weights-bold);
padding-top: var(--spacings-xs);
Expand All @@ -50,23 +51,29 @@
padding-bottom: var(--spacings-xs);
background-color: var(--colors-primary);
}
[data-morfeo-theme="dark"] .morfeo-button-round {
[data-morfeo-theme="dark"] .morfeo-button-side {
color: var(--colors-inverted-text-color);
border: var(--border-widths-none) var(--border-styles-none);
cursor: pointer;
outline: none;
font-size: var(--font-sizes-m);
font-weight: var(--font-weights-bold);
padding-top: var(--spacings-none);
padding-left: var(--spacings-none);
border-radius: var(--radii-round);
border-radius: var(--radii-xs);
padding-right: var(--spacings-none);
padding-bottom: var(--spacings-none);
background-color: var(--colors-primary);
border-top-left-radius: var(--radii-none);
border-top-right-radius: var(--radii-round);
border-bottom-left-radius: var(--radii-none);
border-bottom-right-radius: var(--radii-round);
}
[data-morfeo-theme="dark"] .morfeo-button-error {
color: var(--colors-error);
border: var(--border-widths-none) var(--border-styles-none);
cursor: pointer;
outline: none;
font-size: var(--font-sizes-m);
font-weight: var(--font-weights-bold);
padding-top: var(--spacings-xs);
Expand All @@ -80,6 +87,7 @@
color: var(--colors-inverted-text-color);
border: var(--border-widths-none) var(--border-styles-none);
cursor: pointer;
outline: none;
font-size: var(--font-sizes-m);
font-weight: var(--font-weights-bold);
padding-top: var(--spacings-xs);
Expand Down
12 changes: 10 additions & 2 deletions devtool/src/_shared/css/light-components.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
color: var(--colors-inverted-text-color);
border: var(--border-widths-none) var(--border-styles-none);
cursor: pointer;
outline: none;
font-size: var(--font-sizes-m);
font-weight: var(--font-weights-bold);
padding-top: var(--spacings-xs);
Expand All @@ -50,23 +51,29 @@
padding-bottom: var(--spacings-xs);
background-color: var(--colors-primary);
}
[data-morfeo-theme="light"] .morfeo-button-round {
[data-morfeo-theme="light"] .morfeo-button-side {
color: var(--colors-inverted-text-color);
border: var(--border-widths-none) var(--border-styles-none);
cursor: pointer;
outline: none;
font-size: var(--font-sizes-m);
font-weight: var(--font-weights-bold);
padding-top: var(--spacings-none);
padding-left: var(--spacings-none);
border-radius: var(--radii-round);
border-radius: var(--radii-xs);
padding-right: var(--spacings-none);
padding-bottom: var(--spacings-none);
background-color: var(--colors-primary);
border-top-left-radius: var(--radii-none);
border-top-right-radius: var(--radii-round);
border-bottom-left-radius: var(--radii-none);
border-bottom-right-radius: var(--radii-round);
}
[data-morfeo-theme="light"] .morfeo-button-error {
color: var(--colors-error);
border: var(--border-widths-none) var(--border-styles-none);
cursor: pointer;
outline: none;
font-size: var(--font-sizes-m);
font-weight: var(--font-weights-bold);
padding-top: var(--spacings-xs);
Expand All @@ -80,6 +87,7 @@
color: var(--colors-inverted-text-color);
border: var(--border-widths-none) var(--border-styles-none);
cursor: pointer;
outline: none;
font-size: var(--font-sizes-m);
font-weight: var(--font-weights-bold);
padding-top: var(--spacings-xs);
Expand Down
Loading

0 comments on commit dcc13dd

Please sign in to comment.