@mframework/ui 0.0.6-beta6 → 0.1.0-beta.0

package/types/ui/schema.ts

@@ -1,151 +0,0 @@
-import type {
-	BlockColumn,
-	BlockCta,
-	BlockFaq,
-	BlockForm,
-	BlockGallery,
-	BlockHero,
-	BlockHtml,
-	BlockLogocloud,
-	BlockQuote,
-	BlockRichtext,
-	BlockStep,
-	BlockTeam,
-	BlockTestimonial,
-	BlockVideo,
-} from './blocks';
-import type {
-	Globals,
-	Navigation,
-	Redirect,
-	SEO,
-	ProjectsSettings,
-	PageSettings,
-	ChatConfig,
-	Event,
-	Metric,
-} from './meta';
-import type { Page, PageBlock, Category, Form, Post, Team, Testimonial, PagesProjects, PagesBlog } from './content';
-import type { Inbox, HelpArticle, HelpCollection, HelpFeedback } from './help';
-import type { File, User } from './system';
-import type {
-	Conversation,
-	Message,
-	Contact,
-	Organization,
-	OrganizationAddress,
-	OrganizationContact,
-	OsActivity,
-	OsActivityContact,
-	OsDealContact,
-	OsDeal,
-	OsDealStage,
-	OsEmailTemplate,
-	OsExpense,
-	OsInvoiceItem,
-	OsInvoice,
-	OsItem,
-	OsPayment,
-	OsPaymentTerm,
-	OsProjectContact,
-	OsProjectFile,
-	OsProject,
-	OsProjectTemplate,
-	OsProposalApproval,
-	OsProposalBlock,
-	OsProposalContact,
-	OsProposal,
-	OsSettings,
-	OsSubscription,
-	OsTaskFile,
-	OsTask,
-	OsTaxRate,
-} from './os';
-
-/** Directus Schema for SDK */
-export interface Schema {
-	// Routes
-	pages: Page[];
-	pages_blocks: PageBlock[];
-
-	// Content
-	categories: Category[];
-	forms: Form[];
-	posts: Post[];
-	team: Team[];
-	testimonials: Testimonial[];
-	pages_projects: PagesProjects;
-	pages_blog: PagesBlog;
-
-	// Blocks
-	block_columns: BlockColumn[];
-	block_cta: BlockCta[];
-	block_faq: BlockFaq[];
-	block_form: BlockForm[];
-	block_gallery: BlockGallery[];
-	block_hero: BlockHero[];
-	block_html: BlockHtml[];
-	block_logocloud: BlockLogocloud[];
-	block_quote: BlockQuote[];
-	block_richtext: BlockRichtext[];
-	block_steps: BlockStep[];
-	block_team: BlockTeam[];
-	block_testimonial: BlockTestimonial[];
-	block_video: BlockVideo[];
-
-	// OS
-	contacts: Contact[];
-	organizations: Organization[];
-	organization_addresses: OrganizationAddress[];
-	organizations_contacts: OrganizationContact[];
-	os_activities: OsActivity[];
-	os_activity_contacts: OsActivityContact[];
-	os_deal_contacts: OsDealContact[];
-	os_deals: OsDeal[];
-	os_deal_stages: OsDealStage[];
-	os_email_templates: OsEmailTemplate[];
-	os_expenses: OsExpense[];
-	os_invoice_items: OsInvoiceItem[];
-	os_invoices: OsInvoice[];
-	os_items: OsItem[];
-	os_payments: OsPayment[];
-	os_payment_terms: OsPaymentTerm[];
-	os_project_contacts: OsProjectContact[];
-	os_project_files: OsProjectFile[];
-	os_projects: OsProject[];
-	os_project_templates: OsProjectTemplate[];
-	os_proposal_approvals: OsProposalApproval[];
-	os_proposal_blocks: OsProposalBlock[];
-	os_proposal_contacts: OsProposalContact[];
-	os_proposals: OsProposal[];
-	os_settings: OsSettings;
-	os_subscriptions: OsSubscription[];
-	os_task_files: OsTaskFile[];
-	os_tasks: OsTask[];
-	os_tax_rates: OsTaxRate[];
-
-	// Help
-	help_collections: HelpCollection[];
-	help_articles: HelpArticle[];
-	help_feedback: HelpFeedback[];
-	inbox: Inbox[];
-	conversations: Conversation[];
-	messages: Message[];
-
-	// Meta
-	globals: Globals;
-	navigation: Navigation[];
-	redirects: Redirect[];
-	seo: SEO[];
-	projects_settings: ProjectsSettings;
-	page_settings: PageSettings;
-	chat_config: ChatConfig;
-
-	// Data
-	metrics: Metric[];
-	events: Event[];
-
-	// System
-	directus_files: File[];
-	directus_users: User[];
-}

package/types/ui/state.js

@@ -1 +0,0 @@
-export {};

package/types/ui/state.ts

@@ -1,5 +0,0 @@
-export interface FormState {
-  loading: boolean
-  error?: string
-  success?: string
-}

package/types/ui/system/file.js

@@ -1 +0,0 @@
-export {};

package/types/ui/system/file.ts

@@ -1,46 +0,0 @@
-import type { Folder } from './folder.js';
-import type { User } from './user.js';
-
-export interface File {
-	/** Unique identifier for the file. */
-	id: string;
-	/** Where the file is stored. Either `local` for the local filesystem or the name of the storage adapter (for example `s3`). */
-	storage: string;
-	/** Name of the file on disk. By default, Directus uses a random hash for the filename. */
-	filename_disk: string;
-	/** How you want to the file to be named when it's being downloaded. */
-	filename_download: string;
-	/** Title for the file. Is extracted from the filename on upload, but can be edited by the user. */
-	title: string;
-	/** MIME type of the file. */
-	type: string;
-	/** Virtual folder where this file resides in. */
-	folder: string | Folder | null;
-	/** Who uploaded the file. */
-	uploaded_by: string | User;
-	/** When the file was uploaded. */
-	uploaded_on: string;
-	modified_by: string | User | null;
-	modified_on: string;
-	/** Character set of the file. */
-	charset: string | null;
-	/** Size of the file in bytes. */
-	filesize: number;
-	/** Width of the file in pixels. Only applies to images. */
-	width: number | null;
-	/** Height of the file in pixels. Only applies to images. */
-	height: number | null;
-	/** Duration of the file in seconds. Only applies to audio and video. */
-	duration: number | null;
-	/** Where the file was embedded from. */
-	embed: string | null;
-	/** Description for the file. */
-	description: string | null;
-	/** Where the file was created. Is automatically populated based on EXIF data for images. */
-	location: string | null;
-	/** Tags for the file. Is automatically populated based on EXIF data for images. */
-	tags: string[] | null;
-	/** IPTC, EXIF, and ICC metadata extracted from file */
-	metadata: { [key: string]: any } | null;
-	storage_divider: string;
-}

package/types/ui/system/folder.js

@@ -1 +0,0 @@
-export {};

package/types/ui/system/folder.ts

@@ -1,8 +0,0 @@
-export interface Folder {
-	/** Unique identifier for the folder. */
-	id: string;
-	/** Name of the folder. */
-	name: string;
-	/** Unique identifier of the parent folder. This allows for nested folders. */
-	parent: string | Folder | null;
-}

package/types/ui/system/index.js

@@ -1 +0,0 @@
-export {};

package/types/ui/system/index.ts

@@ -1,4 +0,0 @@
-export type * from './file.js';
-export type * from './folder.js';
-export type * from './role.js';
-export type * from './user.js';

package/types/ui/system/role.js

@@ -1 +0,0 @@
-export {};

package/types/ui/system/role.ts

@@ -1,21 +0,0 @@
-import type { User } from './user.js';
-
-export interface Role {
-	/** Unique identifier for the role. */
-	id: string;
-	/** Name of the role. */
-	name: string;
-	/** The role's icon. */
-	icon: string;
-	/** Description of the role. */
-	description: string | null;
-	/** Array of IP addresses that are allowed to connect to the API as a user of this role. */
-	ip_access: string[];
-	/** Whether or not this role enforces the use of 2FA. */
-	enforce_tfa: boolean;
-	/** Admin role. If true, skips all permission checks. */
-	admin_access: boolean;
-	/** The users in the role are allowed to use the app. */
-	app_access: boolean;
-	users: string | User[];
-}

package/types/ui/system/user.js

@@ -1 +0,0 @@
-export {};

package/types/ui/system/user.ts

@@ -1,56 +0,0 @@
-import type { Role } from './role.js';
-
-export interface User {
-	/** Unique identifier for the user. */
-	id: string;
-	/** First name of the user. */
-	first_name: string;
-	/** Last name of the user. */
-	last_name: string;
-	/** Unique email address for the user. */
-	email: string;
-	/** Password of the user. */
-	password: string;
-	/** The user's location. */
-	location: string | null;
-	/** The user's title. */
-	title: string | null;
-	/** The user's description. */
-	description: string | null;
-	/** The user's tags. */
-	tags: string[] | null;
-	/** The user's avatar. */
-	avatar: string | File | null;
-	/** The user's language used in Directus. */
-	language: string;
-	/** What theme the user is using. */
-	theme: 'light' | 'dark' | 'auto';
-	/** The 2FA secret string that's used to generate one time passwords. */
-	tfa_secret: string | null;
-	/** Status of the user. */
-	status: 'active' | 'invited' | 'draft' | 'suspended' | 'deleted';
-	/** Unique identifier of the role of this user. */
-	role: string | Role;
-	/** Static token for the user. */
-	token: string | null;
-	last_access: string | null;
-	/** Last page that the user was on. */
-	last_page: string | null;
-	provider: string;
-	external_identifier: string | null;
-	auth_data: { [key: string]: any } | null;
-	github: string | null;
-	linkedin: string | null;
-	start_date: string | null;
-	pronouns: string | null;
-	nickname: string | null;
-	birthday: string | null;
-	personal_email: string | null;
-	classification: string | null;
-	timezone: string | null;
-	phone: string | null;
-	email_notifications: boolean | null;
-	company_info: string;
-	preferences_divider: string;
-	admin_divider: string;
-}

package/types/ui.js

@@ -1 +0,0 @@
-export {};

package/types/ui.ts

@@ -1,23 +0,0 @@
-export interface Image {
-  url: string
-  alt?: string
-  width?: number
-  height?: number
-  [key: string]: any
-}
-
-export interface Product {
-  id: string
-  name?: string
-  price?: number
-  images?: Image[]
-  [key: string]: any
-}
-
-export interface Category {
-  id: string
-  name?: string
-  slug?: string
-  image?: string
-  [key: string]: any
-}

package/utils/color.js

@@ -1,11 +0,0 @@
-function getContrastColor(hexColor) {
-    // Convert hex color to RGB format
-    const red = parseInt(hexColor.slice(1, 3), 16);
-    const green = parseInt(hexColor.slice(3, 5), 16);
-    const blue = parseInt(hexColor.slice(5, 7), 16);
-    // Calculate relative luminance of the color
-    const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
-    // Return black or white depending on the luminance value
-    return luminance > 0.5 ? '#000000' : '#ffffff';
-}
-export { getContrastColor };

package/utils/color.ts

@@ -1,14 +0,0 @@
-function getContrastColor(hexColor: string) {
-	// Convert hex color to RGB format
-	const red = parseInt(hexColor.slice(1, 3), 16);
-	const green = parseInt(hexColor.slice(3, 5), 16);
-	const blue = parseInt(hexColor.slice(5, 7), 16);
-
-	// Calculate relative luminance of the color
-	const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
-
-	// Return black or white depending on the luminance value
-	return luminance > 0.5 ? '#000000' : '#ffffff';
-}
-
-export { getContrastColor };

package/utils/fonts.js

@@ -1,18 +0,0 @@
-export const formatFonts = (families, defaultWeights = [400]) => {
-    const formatted = [];
-    for (const font in families) {
-        const formattedFont = font.replace(/ /g, '+'); // Replace spaces with '+'
-        const weights = families[font];
-        if (weights === true) {
-            for (const weight of defaultWeights) {
-                formatted.push(`${formattedFont}:${weight}`);
-            }
-        }
-        else if (Array.isArray(weights)) {
-            for (const weight of weights) {
-                formatted.push(`${formattedFont}:${weight}`);
-            }
-        }
-    }
-    return formatted;
-};

package/utils/fonts.ts

@@ -1,24 +0,0 @@
-type FontFamilies = {
-	[font: string]: boolean | number[];
-};
-
-export const formatFonts = (families: FontFamilies, defaultWeights: number[] = [400]): string[] => {
-	const formatted: string[] = [];
-
-	for (const font in families) {
-		const formattedFont = font.replace(/ /g, '+'); // Replace spaces with '+'
-		const weights = families[font];
-
-		if (weights === true) {
-			for (const weight of defaultWeights) {
-				formatted.push(`${formattedFont}:${weight}`);
-			}
-		} else if (Array.isArray(weights)) {
-			for (const weight of weights) {
-				formatted.push(`${formattedFont}:${weight}`);
-			}
-		}
-	}
-
-	return formatted;
-};

package/utils/formkit.js

@@ -1,59 +0,0 @@
-import { unref } from 'vue';
-function convertBoolean(value) {
-    if (value === 'true' || value === 'false') {
-        return value === 'true';
-    }
-    else {
-        return value;
-    }
-}
-function mapCondition(condition, target) {
-    switch (condition) {
-        case 'is_empty':
-            return `!$get(${target}).value)`;
-        case 'is_filled':
-            return `$get(${target}).value)`;
-        default:
-            return undefined;
-    }
-}
-export function mapConditions(conditions) {
-    // Both $el and $cmp schema nodes can leverage an if property that roughly equates to a v-if in Vue. If the expression assigned to the if property is truthy, the node is rendered, otherwise it is not:
-}
-export function transformSchema(schema) {
-    // Loop through the form schema from Directus
-    // This is required for FormKit to work
-    const items = unref(schema);
-    return items.map((item) => {
-        const { conditions, field, name, children, ...props } = item;
-        // console.log('conditions', conditions);
-        // console.log('mapCondition', mapCondition(conditions[0].condition, field));
-        const cmpSchema = {
-            $cmp: item.$el ? item.$el : 'FormKit',
-            children: children,
-            // if: conditions ? mapCondition(conditions[0].condition, field) : undefined,
-            props: {
-                id: name,
-                ...props,
-            },
-        };
-        // Switch statement to handle item widths
-        switch (item.width) {
-            case '33':
-                cmpSchema.props.outerClass = 'md:col-span-2';
-                break;
-            case '50':
-                cmpSchema.props.outerClass = 'md:col-span-3';
-                break;
-            case '67':
-                cmpSchema.props.outerClass = 'md:col-span-4';
-                break;
-            case '100':
-                cmpSchema.props.outerClass = 'md:col-span-6';
-                break;
-            default:
-                cmpSchema.props.outerClass = 'md:col-span-6';
-        }
-        return cmpSchema;
-    });
-}

package/utils/formkit.ts

@@ -1,75 +0,0 @@
-import { unref } from 'vue';
-
-export interface Condition {
-	field: string;
-	action: 'show' | 'hide';
-	condition: 'is_empty' | 'is_filled' | 'contains' | 'not_contains' | 'equals' | 'not_equal';
-	value: string;
-}
-
-function convertBoolean(value: string) {
-	if (value === 'true' || value === 'false') {
-		return value === 'true';
-	} else {
-		return value;
-	}
-}
-
-function mapCondition(condition: Condition['condition'], target: string) {
-	switch (condition) {
-		case 'is_empty':
-			return `!$get(${target}).value)`;
-		case 'is_filled':
-			return `$get(${target}).value)`;
-		default:
-			return undefined;
-	}
-}
-
-export function mapConditions(conditions: Condition[]) {
-	// Both $el and $cmp schema nodes can leverage an if property that roughly equates to a v-if in Vue. If the expression assigned to the if property is truthy, the node is rendered, otherwise it is not:
-}
-
-export function transformSchema(schema: Array<object>) {
-	// Loop through the form schema from Directus
-	// This is required for FormKit to work
-	const items = unref(schema);
-	return items.map((item: any) => {
-		const { conditions, field, name, children, ...props } = item;
-
-		// console.log('conditions', conditions);
-		// console.log('mapCondition', mapCondition(conditions[0].condition, field));
-
-		const cmpSchema = {
-			$cmp: item.$el ? item.$el : 'FormKit',
-
-			children: children,
-			// if: conditions ? mapCondition(conditions[0].condition, field) : undefined,
-
-			props: {
-				id: name,
-				...props,
-			},
-		};
-
-		// Switch statement to handle item widths
-		switch (item.width) {
-			case '33':
-				cmpSchema.props.outerClass = 'md:col-span-2';
-				break;
-			case '50':
-				cmpSchema.props.outerClass = 'md:col-span-3';
-				break;
-			case '67':
-				cmpSchema.props.outerClass = 'md:col-span-4';
-				break;
-			case '100':
-				cmpSchema.props.outerClass = 'md:col-span-6';
-				break;
-			default:
-				cmpSchema.props.outerClass = 'md:col-span-6';
-		}
-
-		return cmpSchema;
-	});
-}

package/utils/icons.js

@@ -1,36 +0,0 @@
-export const fileIconMap = {
-    folder: 'material-symbols:folder',
-    // Images
-    'image/jpeg': 'material-symbols:image',
-    'image/png': 'material-symbols:image',
-    'image/gif': 'material-symbols:image',
-    'image/svg+xml': 'material-symbols:image',
-    'image/webp': 'material-symbols:image',
-    // Videos
-    'video/mp4': 'material-symbols:smart-display',
-    'video/quicktime': 'material-symbols:smart-display',
-    // Audio
-    'audio/mp3': 'material-symbols:audio-file',
-    'audio/aac': 'material-symbols:audio-file',
-    'audio/wav': 'material-symbols:audio-file',
-    'audio/ogg': 'material-symbols:audio-file',
-    // Text
-    'text/csv': 'material-symbols:csv',
-    'text/plain': 'material-symbols:text-snippet',
-    // Files
-    'application/pdf': 'material-symbols:picture-as-pdf-sharp',
-    'application/vnd.ms-excel': 'material-symbols:sheets',
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'material-symbols:sheets',
-    'application/msword': 'material-symbols:docs',
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'material-symbols:docs',
-    'application/vnd.ms-powerpoint': 'material-symbols:slides',
-    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'material-symbols:slides',
-};
-export function getFileIcon(filetype) {
-    if (!filetype)
-        return 'material-symbols:attachment';
-    if (typeof filetype === 'string' && !(filetype in fileIconMap)) {
-        return 'material-symbols:attachment';
-    }
-    return fileIconMap[filetype];
-}

package/utils/icons.ts

@@ -1,62 +0,0 @@
-type FileType =
-	| 'folder'
-	| 'image/jpeg'
-	| 'image/png'
-	| 'image/gif'
-	| 'image/svg+xml'
-	| 'image/webp'
-	| 'video/mp4'
-	| 'video/quicktime'
-	| 'audio/mp3'
-	| 'audio/aac'
-	| 'audio/wav'
-	| 'audio/ogg'
-	| 'text/csv'
-	| 'text/plain'
-	| 'application/pdf'
-	| 'application/vnd.ms-excel'
-	| 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-	| 'application/msword'
-	| 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-	| 'application/vnd.ms-powerpoint'
-	| 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
-
-export const fileIconMap: Record<FileType, string> = {
-	folder: 'material-symbols:folder',
-	// Images
-	'image/jpeg': 'material-symbols:image',
-	'image/png': 'material-symbols:image',
-	'image/gif': 'material-symbols:image',
-	'image/svg+xml': 'material-symbols:image',
-	'image/webp': 'material-symbols:image',
-	// Videos
-	'video/mp4': 'material-symbols:smart-display',
-	'video/quicktime': 'material-symbols:smart-display',
-	// Audio
-	'audio/mp3': 'material-symbols:audio-file',
-	'audio/aac': 'material-symbols:audio-file',
-	'audio/wav': 'material-symbols:audio-file',
-	'audio/ogg': 'material-symbols:audio-file',
-	// Text
-	'text/csv': 'material-symbols:csv',
-	'text/plain': 'material-symbols:text-snippet',
-
-	// Files
-	'application/pdf': 'material-symbols:picture-as-pdf-sharp',
-	'application/vnd.ms-excel': 'material-symbols:sheets',
-	'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'material-symbols:sheets',
-	'application/msword': 'material-symbols:docs',
-	'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'material-symbols:docs',
-	'application/vnd.ms-powerpoint': 'material-symbols:slides',
-	'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'material-symbols:slides',
-};
-
-export function getFileIcon(filetype: FileType | string | null | undefined) {
-	if (!filetype) return 'material-symbols:attachment';
-
-	if (typeof filetype === 'string' && !(filetype in fileIconMap)) {
-		return 'material-symbols:attachment';
-	}
-
-	return fileIconMap[filetype as FileType];
-}