@4399ywkf/cli 0.0.22 → 1.0.2

package/dist/templates/src/color/neutrals/mauve.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const mauve: ColorScaleItem = {
+  dark: [
+    '#000000',
+    '#1c1b1e',
+    '#252528',
+    '#2f2f32',
+    '#3a393d',
+    '#454448',
+    '#504f53',
+    '#5b5a5f',
+    '#67666a',
+    '#737177',
+    '#7f7d83',
+    '#bbb9bd',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(233, 225, 250, 0.12)',
+    'rgba(231, 231, 250, 0.16)',
+    'rgba(235, 235, 250, 0.2)',
+    'rgba(242, 237, 254, 0.24)',
+    'rgba(238, 234, 248, 0.29)',
+    'rgba(242, 239, 252, 0.33)',
+    'rgba(239, 237, 250, 0.38)',
+    'rgba(245, 243, 252, 0.42)',
+    'rgba(245, 240, 253, 0.47)',
+    'rgba(244, 240, 252, 0.52)',
+    'rgba(253, 250, 255, 0.74)',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#fcf8fb',
+    '#edeaed',
+    '#dfdcdf',
+    '#d1ced2',
+    '#c2c0c4',
+    '#b4b2b7',
+    '#a7a4a9',
+    '#99979c',
+    '#8c8a90',
+    '#7f7d83',
+    '#4a494d',
+    '#111',
+  ],
+  lightA: [
+    'rgba(0, 0, 0, 0.015)',
+    'rgba(155, 22, 122, 0.03)',
+    'rgba(55, 22, 55, 0.09)',
+    'rgba(26, 5, 26, 0.14)',
+    'rgba(25, 10, 30, 0.2)',
+    'rgba(11, 3, 19, 0.25)',
+    'rgba(13, 7, 23, 0.31)',
+    'rgba(11, 2, 16, 0.36)',
+    'rgba(6, 1, 14, 0.41)',
+    'rgba(5, 1, 14, 0.46)',
+    'rgba(4, 0, 12, 0.51)',
+    'rgba(4, 2, 8, 0.72)',
+    'rgba(3, 2, 5, 0.9)',
+  ],
+};
+
+export default mauve;

package/dist/templates/src/color/neutrals/olive.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const olive: ColorScaleItem = {
+  dark: [
+    '#000000',
+    '#1a1c1b',
+    '#232624',
+    '#2d302e',
+    '#383a38',
+    '#424542',
+    '#4d504d',
+    '#585c58',
+    '#646763',
+    '#70736e',
+    '#7c7f79',
+    '#b9bab5',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(236, 255, 245, 0.11)',
+    'rgba(233, 253, 240, 0.15)',
+    'rgba(237, 253, 242, 0.19)',
+    'rgba(243, 252, 243, 0.23)',
+    'rgba(236, 246, 236, 0.28)',
+    'rgba(241, 250, 241, 0.32)',
+    'rgba(238, 249, 238, 0.37)',
+    'rgba(244, 251, 241, 0.41)',
+    'rgba(243, 250, 239, 0.46)',
+    'rgba(248, 254, 242, 0.5)',
+    'rgba(253, 255, 248, 0.73)',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#faf9f4',
+    '#ecebe6',
+    '#ddddd7',
+    '#cfcfc9',
+    '#c0c1bb',
+    '#b2b4ae',
+    '#a4a6a0',
+    '#969993',
+    '#898c86',
+    '#7c7f79',
+    '#484b48',
+    '#111',
+  ],
+  lightA: [
+    'rgba(0, 0, 0, 0.015)',
+    'rgba(155, 135, 35, 0.05)',
+    'rgba(65, 55, 5, 0.1)',
+    'rgba(43, 43, 5, 0.16)',
+    'rgba(37, 37, 10, 0.22)',
+    'rgba(22, 25, 3, 0.27)',
+    'rgba(14, 21, 2, 0.32)',
+    'rgba(16, 21, 5, 0.38)',
+    'rgba(11, 18, 4, 0.43)',
+    'rgba(9, 15, 3, 0.48)',
+    'rgba(8, 13, 2, 0.53)',
+    'rgba(1, 5, 1, 0.72)',
+    'rgba(1, 3, 2, 0.9)',
+  ],
+};
+
+export default olive;

package/dist/templates/src/color/neutrals/sage.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const sage: ColorScaleItem = {
+  dark: [
+    '#000000',
+    '#1a1b1c',
+    '#232526',
+    '#2d2f30',
+    '#383a3a',
+    '#424545',
+    '#4d5050',
+    '#585c5c',
+    '#636766',
+    '#6e7371',
+    '#797f7c',
+    '#b5bab6',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(236, 246, 255, 0.11)',
+    'rgba(233, 246, 253, 0.15)',
+    'rgba(237, 248, 253, 0.19)',
+    'rgba(243, 252, 252, 0.23)',
+    'rgba(236, 246, 246, 0.28)',
+    'rgba(241, 250, 250, 0.32)',
+    'rgba(238, 249, 249, 0.37)',
+    'rgba(241, 251, 248, 0.41)',
+    'rgba(239, 250, 246, 0.46)',
+    'rgba(242, 254, 248, 0.5)',
+    'rgba(248, 255, 250, 0.73)',
+    'rgba(255, 255, 255, 1)',
+  ],
+  light: [
+    '#ffffff',
+    '#f5faf4',
+    '#e7ece6',
+    '#d7ddd7',
+    '#c9cfc9',
+    '#bbc1bc',
+    '#aeb4b0',
+    '#a0a6a2',
+    '#939996',
+    '#868c89',
+    '#797f7c',
+    '#484b4b',
+    '#111111',
+  ],
+  lightA: [
+    'rgba(0, 0, 0, 0.015)',
+    'rgba(55, 155, 35, 0.05)',
+    'rgba(15, 65, 5, 0.1)',
+    'rgba(5, 43, 5, 0.16)',
+    'rgba(10, 37, 10, 0.22)',
+    'rgba(3, 25, 6, 0.27)',
+    'rgba(2, 21, 9, 0.32)',
+    'rgba(5, 21, 10, 0.38)',
+    'rgba(4, 18, 11, 0.43)',
+    'rgba(3, 15, 9, 0.48)',
+    'rgba(2, 13, 7, 0.53)',
+    'rgba(1, 5, 5, 0.72)',
+    'rgba(1, 2, 3, 0.9)',
+  ],
+};
+
+export default sage;

package/dist/templates/src/color/neutrals/sand.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const sand: ColorScaleItem = {
+  dark: [
+    '#000000',
+    '#1c1c18',
+    '#262521',
+    '#30302b',
+    '#3a3a35',
+    '#45453f',
+    '#505049',
+    '#5c5b54',
+    '#67675f',
+    '#73726a',
+    '#7f7e76',
+    '#bcbab2',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(255, 255, 218, 0.11)',
+    'rgba(253, 247, 220, 0.15)',
+    'rgba(253, 253, 226, 0.19)',
+    'rgba(252, 252, 230, 0.23)',
+    'rgba(246, 246, 225, 0.28)',
+    'rgba(250, 250, 228, 0.32)',
+    'rgba(249, 246, 227, 0.37)',
+    'rgba(251, 251, 232, 0.41)',
+    'rgba(250, 248, 230, 0.46)',
+    'rgba(254, 252, 236, 0.5)',
+    'rgba(254, 251, 241, 0.74)',
+    'rgba(255, 252, 245, 0.99)',
+  ],
+  light: [
+    '#ffffff',
+    '#fcf9f3',
+    '#edebe4',
+    '#dfddd5',
+    '#d1cfc7',
+    '#c3c1b9',
+    '#b5b3ab',
+    '#a7a69d',
+    '#999890',
+    '#8c8b83',
+    '#7f7e76',
+    '#4b4a44',
+    '#111',
+  ],
+  lightA: [
+    'rgba(0, 0, 0, 0.015)',
+    'rgba(195, 135, 15, 0.05)',
+    'rgba(91, 73, 10, 0.11)',
+    'rgba(67, 55, 8, 0.17)',
+    'rgba(46, 37, 0, 0.22)',
+    'rgba(41, 34, 5, 0.28)',
+    'rgba(31, 25, 0, 0.33)',
+    'rgba(29, 27, 4, 0.39)',
+    'rgba(23, 21, 3, 0.44)',
+    'rgba(20, 18, 2, 0.49)',
+    'rgba(18, 16, 1, 0.54)',
+    'rgba(12, 10, 2, 0.74)',
+    'rgba(6, 6, 1, 0.91)',
+  ],
+};
+
+export default sand;

package/dist/templates/src/color/neutrals/slate.ts

@@ -0,0 +1,66 @@
+import { ColorScaleItem } from '../types';
+
+const slate: ColorScaleItem = {
+  dark: [
+    '#000000',
+    '#1b1c1d',
+    '#242527',
+    '#2e2f32',
+    '#383a3c',
+    '#434547',
+    '#4e5052',
+    '#595b5e',
+    '#64676a',
+    '#707276',
+    '#7b7e82',
+    '#b8babc',
+    '#ffffff',
+  ],
+  darkA: [
+    'rgba(255, 255, 255, 0.02)',
+    'rgba(225, 233, 242, 0.12)',
+    'rgba(225, 231, 244, 0.16)',
+    'rgba(230, 235, 250, 0.2)',
+    'rgba(233, 242, 250, 0.24)',
+    'rgba(239, 246, 254, 0.28)',
+    'rgba(236, 242, 248, 0.33)',
+    'rgba(241, 246, 254, 0.37)',
+    'rgba(238, 245, 252, 0.42)',
+    'rgba(238, 243, 251, 0.47)',
+    'rgba(241, 247, 255, 0.51)',
+    'rgba(249, 251, 254, 0.74)',
+    '#ffffff',
+  ],
+  light: [
+    '#ffffff',
+    '#f9f9fa',
+    '#ebebec',
+    '#dcddde',
+    '#cecfd0',
+    '#bfc1c3',
+    '#b1b3b5',
+    '#a4a6a8',
+    '#96989b',
+    '#898b8e',
+    '#7b7e82',
+    '#484a4d',
+    '#111',
+  ],
+  lightA: [
+    'rgba(0, 0, 0, 0.015)',
+    'rgba(55, 55, 88, 0.03)',
+    'rgba(5, 5, 17, 0.08)',
+    'rgba(5, 12, 19, 0.14)',
+    'rgba(10, 15, 20, 0.2)',
+    'rgba(9, 17, 24, 0.26)',
+    'rgba(3, 10, 16, 0.31)',
+    'rgba(2, 8, 13, 0.36)',
+    'rgba(5, 10, 17, 0.42)',
+    'rgba(4, 8, 15, 0.47)',
+    'rgba(1, 7, 15, 0.52)',
+    'rgba(1, 4, 8, 0.72)',
+    'rgba(2, 3, 4, 0.9)',
+  ],
+};
+
+export default slate;

package/dist/templates/src/color/types.ts

@@ -0,0 +1,21 @@
+type colorStep = [
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+];
+export interface ColorScaleItem {
+  dark: colorStep;
+  darkA: colorStep;
+  light: colorStep;
+  lightA: colorStep;
+}

package/dist/templates/src/components/ConfigProvider/index.md

@@ -0,0 +1,63 @@
+---
+nav: Components
+group: Theme
+title: ConfigProvider
+---
+
+ConfigProvider is a context provider component that allows you to configure global settings for other components in the library, such as CDN settings for external resources.
+
+## Default
+
+The `proxy` provides two CDN resolution addresses, `aliyun` and `unpkg`, with `aliyun` as the default. This can be configured through the `cdn` attribute of `ConfigProvider`.
+
+<code src="./demos/index.tsx" nopadding></code>
+
+## Custom CDN
+
+At the same time, it provides custom CDN configuration, set `proxy` to `custom` and configure through the `customCdnFn` attribute.
+
+```ts
+import { ConfigProvider, Logo } from '@lobehub/ui';
+
+export default () => {
+  return (
+    <ConfigProvider config={{
+        proxy: 'custom',
+        customCdnFn: (e: {pkg:string, version:string, path:string}) => `https://yourcdn/${pkg}/${version}/${path}`
+    }}>
+      <Logo />
+    </ConfigProvider>
+  );
+};
+```
+
+## APIs
+
+### ConfigProvider
+
+| Property | Description          | Type        | Default |
+| -------- | -------------------- | ----------- | ------- |
+| config   | Configuration object | `Config`    | -       |
+| children | Child components     | `ReactNode` | -       |
+
+### Config
+
+| Property       | Description                                                    | Type                                            | Default |
+| -------------- | -------------------------------------------------------------- | ----------------------------------------------- | ------- |
+| proxy          | CDN proxy to use for external resources                        | `'jsdelivr' \| 'unpkg' \| 'aliyun' \| 'custom'` | -       |
+| customCdnFn    | Custom function for generating CDN URLs when proxy is 'custom' | `CdnFn`                                         | -       |
+| aAs            | Custom component to use for rendering anchor tags              | `ElementType`                                   | -       |
+| imgAs          | Custom component to use for rendering image tags               | `ElementType`                                   | -       |
+| imgUnoptimized | Whether to disable image optimization                          | `boolean`                                       | -       |
+
+### CdnFn
+
+```ts
+type CdnFn = ({ pkg, version, path }: CdnApi) => string;
+
+interface CdnApi {
+  pkg: string;
+  version: string;
+  path: string;
+}
+```

package/dist/templates/src/components/ConfigProvider/index.tsx

@@ -0,0 +1,42 @@
+import React, {
+  type ElementType,
+  type ReactNode,
+  createContext,
+  memo,
+  use,
+} from 'react';
+
+import { type CDN, type CdnApi, genCdnUrl } from '@/utils/genCdnUrl';
+
+export interface Config {
+  aAs?: ElementType;
+  customCdnFn?: CdnFn;
+  imgAs?: ElementType;
+  imgUnoptimized?: boolean;
+  proxy?: CDN | 'custom';
+}
+
+export const ConfigContext = createContext<Config | null>(null);
+
+const ConfigProvider = memo<{ children: ReactNode; config: Config }>(
+  ({ children, config }) => {
+    return <ConfigContext value={config}>{children}</ConfigContext>;
+  },
+);
+
+// useCdnFn
+export type CdnFn = ({ pkg, version, path }: CdnApi) => string;
+
+const cdnFallback: CdnFn = ({ pkg, version, path }) =>
+  genCdnUrl({ path, pkg, proxy: 'aliyun', version });
+
+export const useCdnFn = (): CdnFn => {
+  const config = use(ConfigContext);
+  if (!config) return cdnFallback;
+  if (config?.proxy !== 'custom')
+    return ({ pkg, version, path }) =>
+      genCdnUrl({ path, pkg, proxy: config.proxy as any, version });
+  return config?.customCdnFn || cdnFallback;
+};
+
+export default ConfigProvider;