Initial commit: Crypto trader application

This commit is contained in:
2025-12-25 20:20:40 -05:00
commit 07a04c1bb8
47895 changed files with 2042266 additions and 0 deletions
+63
View File
@@ -0,0 +1,63 @@
import { CSSObject } from '@mui/styled-engine';
export interface ApplyStyles<K extends string> {
(key: K, styles: CSSObject): CSSObject;
}
/**
* A universal utility to style components with multiple color modes. Always use it from the theme object.
* It works with:
* - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
* - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
* - Zero-runtime engine
*
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
*
* ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
*
* 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
*
* @example
* 1. using with `styled`:
* ```jsx
* const Component = styled('div')(({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]);
* ```
*
* @example
* 2. using with `sx` prop:
* ```jsx
* <Box sx={theme => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]}
* />
* ```
*
* @example
* 3. theming a component:
* ```jsx
* extendTheme({
* components: {
* MuiButton: {
* styleOverrides: {
* root: ({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ],
* },
* }
* }
* })
*```
*/
export default function applyStyles<K extends string>(key: K, styles: CSSObject): CSSObject;
+80
View File
@@ -0,0 +1,80 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = applyStyles;
/**
* A universal utility to style components with multiple color modes. Always use it from the theme object.
* It works with:
* - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
* - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
* - Zero-runtime engine
*
* Tips: Use an array over object spread and place `theme.applyStyles()` last.
*
* ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
*
* 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
*
* @example
* 1. using with `styled`:
* ```jsx
* const Component = styled('div')(({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]);
* ```
*
* @example
* 2. using with `sx` prop:
* ```jsx
* <Box sx={theme => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ]}
* />
* ```
*
* @example
* 3. theming a component:
* ```jsx
* extendTheme({
* components: {
* MuiButton: {
* styleOverrides: {
* root: ({ theme }) => [
* { background: '#e5e5e5' },
* theme.applyStyles('dark', {
* background: '#1c1c1c',
* color: '#fff',
* }),
* ],
* },
* }
* }
* })
*```
*/
function applyStyles(key, styles) {
// @ts-expect-error this is 'any' type
const theme = this;
if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
// If CssVarsProvider is used as a provider,
// returns '* :where([data-mui-color-scheme="light|dark"]) &'
const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
return {
[selector]: styles
};
}
if (theme.palette.mode === key) {
return styles;
}
return {};
}
+85
View File
@@ -0,0 +1,85 @@
import { OverridableStringUnion } from '@mui/types';
export interface BreakpointOverrides {}
export type Breakpoint = OverridableStringUnion<
'xs' | 'sm' | 'md' | 'lg' | 'xl',
BreakpointOverrides
>;
export const keys: Breakpoint[];
// Keep in sync with docs/src/pages/customization/breakpoints/breakpoints.md
// #default-branch-switch
export interface Breakpoints {
keys: Breakpoint[];
/**
* Each breakpoint (a key) matches with a fixed screen width (a value).
* @default {
* // extra-small
* xs: 0,
* // small
* sm: 600,
* // medium
* md: 900,
* // large
* lg: 1200,
* // extra-large
* xl: 1536,
* }
*/
values: { [key in Breakpoint]: number };
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
*/
up: (key: Breakpoint | number) => string;
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
*/
down: (key: Breakpoint | number) => string;
/**
* @param start - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
* the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
*/
between: (start: Breakpoint | number, end: Breakpoint | number) => string;
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
* @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
* the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
* @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
*/
only: (key: Breakpoint) => string;
/**
* @param key - A breakpoint key (`xs`, `sm`, etc.).
* @returns A media query string ready to be used with most styling solutions, which matches screen widths stopping at
* the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive).
*/
not: (key: Breakpoint) => string;
/**
* The unit used for the breakpoint's values.
* @default 'px'
*/
unit?: string | undefined;
}
export interface BreakpointsOptions extends Partial<Breakpoints> {
/**
* The increment divided by 100 used to implement exclusive breakpoints.
* For example, `step: 5` means that `down(500)` will result in `'(max-width: 499.95px)'`.
* @default 5
*/
step?: number | undefined;
/**
* The unit used for the breakpoint's values.
* @default 'px'
*/
unit?: string | undefined;
}
export default function createBreakpoints(options: BreakpointsOptions): Breakpoints;
+90
View File
@@ -0,0 +1,90 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.breakpointKeys = void 0;
exports.default = createBreakpoints;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
const _excluded = ["values", "unit", "step"];
// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
const breakpointKeys = exports.breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
const sortBreakpointsValues = values => {
const breakpointsAsArray = Object.keys(values).map(key => ({
key,
val: values[key]
})) || [];
// Sort in ascending order
breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
return breakpointsAsArray.reduce((acc, obj) => {
return (0, _extends2.default)({}, acc, {
[obj.key]: obj.val
});
}, {});
};
// Keep in mind that @media is inclusive by the CSS specification.
function createBreakpoints(breakpoints) {
const {
// The breakpoint **start** at this value.
// For instance with the first breakpoint xs: [xs, sm).
values = {
xs: 0,
// phone
sm: 600,
// tablet
md: 900,
// small laptop
lg: 1200,
// desktop
xl: 1536 // large screen
},
unit = 'px',
step = 5
} = breakpoints,
other = (0, _objectWithoutPropertiesLoose2.default)(breakpoints, _excluded);
const sortedValues = sortBreakpointsValues(values);
const keys = Object.keys(sortedValues);
function up(key) {
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (min-width:${value}${unit})`;
}
function down(key) {
const value = typeof values[key] === 'number' ? values[key] : key;
return `@media (max-width:${value - step / 100}${unit})`;
}
function between(start, end) {
const endIndex = keys.indexOf(end);
return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
}
function only(key) {
if (keys.indexOf(key) + 1 < keys.length) {
return between(key, keys[keys.indexOf(key) + 1]);
}
return up(key);
}
function not(key) {
// handle first and last key separately, for better readability
const keyIndex = keys.indexOf(key);
if (keyIndex === 0) {
return up(keys[1]);
}
if (keyIndex === keys.length - 1) {
return down(keys[keyIndex]);
}
return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
}
return (0, _extends2.default)({
keys,
values: sortedValues,
up,
down,
between,
only,
not,
unit
}, other);
}
+10
View File
@@ -0,0 +1,10 @@
export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
export type SpacingArgument = number | string;
export interface Spacing {
(): string;
(value: SpacingArgument): string;
(topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
(top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
(top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
}
export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
+37
View File
@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = createSpacing;
var _spacing = require("../spacing");
// The different signatures imply different meaning for their arguments that can't be expressed structurally.
// We express the difference with variable names.
function createSpacing(spacingInput = 8) {
// Already transformed.
if (spacingInput.mui) {
return spacingInput;
}
// Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
// Smaller components, such as icons, can align to a 4dp grid.
// https://m2.material.io/design/layout/understanding-layout.html
const transform = (0, _spacing.createUnarySpacing)({
spacing: spacingInput
});
const spacing = (...argsInput) => {
if (process.env.NODE_ENV !== 'production') {
if (!(argsInput.length <= 4)) {
console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
}
}
const args = argsInput.length === 0 ? [1] : argsInput;
return args.map(argument => {
const output = transform(argument);
return typeof output === 'number' ? `${output}px` : output;
}).join(' ');
};
spacing.mui = true;
return spacing;
}
+50
View File
@@ -0,0 +1,50 @@
import { CSSObject } from '@mui/styled-engine';
import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
import { Shape, ShapeOptions } from './shape';
import { Spacing, SpacingOptions } from './createSpacing';
import { SxConfig, SxProps } from '../styleFunctionSx';
import { ApplyStyles } from './applyStyles';
export { Breakpoint, BreakpointOverrides } from './createBreakpoints';
export type Direction = 'ltr' | 'rtl';
export interface ThemeOptions {
shape?: ShapeOptions;
breakpoints?: BreakpointsOptions;
direction?: Direction;
mixins?: unknown;
palette?: Record<string, any>;
shadows?: unknown;
spacing?: SpacingOptions;
transitions?: unknown;
components?: Record<string, any>;
typography?: unknown;
zIndex?: Record<string, number>;
unstable_sxConfig?: SxConfig;
}
export interface Theme {
shape: Shape;
breakpoints: Breakpoints;
direction: Direction;
palette: Record<string, any> & { mode: 'light' | 'dark' };
shadows?: unknown;
spacing: Spacing;
transitions?: unknown;
components?: Record<string, any>;
mixins?: unknown;
typography?: unknown;
zIndex?: unknown;
applyStyles: ApplyStyles<'light' | 'dark'>;
unstable_sxConfig: SxConfig;
unstable_sx: (props: SxProps<Theme>) => CSSObject;
}
/**
* Generate a theme base on the options received.
* @param options Takes an incomplete theme object and adds the missing parts.
* @param args Deep merge the arguments with the about to be returned theme.
* @returns A complete, ready-to-use theme object.
*/
export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme;
+50
View File
@@ -0,0 +1,50 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
var _shape = _interopRequireDefault(require("./shape"));
var _createSpacing = _interopRequireDefault(require("./createSpacing"));
var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
var _defaultSxConfig = _interopRequireDefault(require("../styleFunctionSx/defaultSxConfig"));
var _applyStyles = _interopRequireDefault(require("./applyStyles"));
const _excluded = ["breakpoints", "palette", "spacing", "shape"];
function createTheme(options = {}, ...args) {
const {
breakpoints: breakpointsInput = {},
palette: paletteInput = {},
spacing: spacingInput,
shape: shapeInput = {}
} = options,
other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
const breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
const spacing = (0, _createSpacing.default)(spacingInput);
let muiTheme = (0, _deepmerge.default)({
breakpoints,
direction: 'ltr',
components: {},
// Inject component definitions.
palette: (0, _extends2.default)({
mode: 'light'
}, paletteInput),
spacing,
shape: (0, _extends2.default)({}, _shape.default, shapeInput)
}, other);
muiTheme.applyStyles = _applyStyles.default;
muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _defaultSxConfig.default, other == null ? void 0 : other.unstable_sxConfig);
muiTheme.unstable_sx = function sx(props) {
return (0, _styleFunctionSx.default)({
sx: props,
theme: this
});
};
return muiTheme;
}
var _default = exports.default = createTheme;
+4
View File
@@ -0,0 +1,4 @@
export { default } from './createTheme';
export * from './createTheme';
export { default as unstable_applyStyles } from './applyStyles';
export * from './applyStyles';
+27
View File
@@ -0,0 +1,27 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function () {
return _createTheme.default;
}
});
Object.defineProperty(exports, "private_createBreakpoints", {
enumerable: true,
get: function () {
return _createBreakpoints.default;
}
});
Object.defineProperty(exports, "unstable_applyStyles", {
enumerable: true,
get: function () {
return _applyStyles.default;
}
});
var _createTheme = _interopRequireDefault(require("./createTheme"));
var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
var _applyStyles = _interopRequireDefault(require("./applyStyles"));
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"module": "../esm/createTheme/index.js",
"main": "./index.js",
"types": "./index.d.ts"
}
+9
View File
@@ -0,0 +1,9 @@
export interface Shape {
borderRadius: number;
}
export type ShapeOptions = Partial<Shape>;
declare const shape: Shape;
export default shape;
+10
View File
@@ -0,0 +1,10 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
const shape = {
borderRadius: 4
};
var _default = exports.default = shape;