Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to theme export #57

Closed
wants to merge 1 commit into from
Closed

Add ability to theme export #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,19 @@
"@emotion/cache": "^11.13.0",
"@emotion/react": "^11.13.0",
"@emotion/weak-memoize": "^0.4.0",
"@types/file-saver": "^2.0.7",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please move devDependencies.

"@vercel/analytics": "^1.3.1",
"@vercel/speed-insights": "^1.0.12",
"@yamada-ui/calendar": "^1.8.2",
"@yamada-ui/carousel": "^2.0.7",
"@yamada-ui/charts": "^1.5.4",
"@yamada-ui/dropzone": "^1.0.46",
"@yamada-ui/fontawesome": "^1.0.42",
"@yamada-ui/lucide": "^1.7.0",
"@yamada-ui/markdown": "^1.0.45",
"@yamada-ui/react": "^1.5.4",
"@yamada-ui/table": "^1.2.5",
"@yamada-ui/calendar": "^1.8.1",
"@yamada-ui/carousel": "^2.0.6",
"@yamada-ui/charts": "^1.5.3",
"@yamada-ui/dropzone": "^1.0.45",
"@yamada-ui/fontawesome": "^1.0.41",
"@yamada-ui/lucide": "^1.6.0",
"@yamada-ui/markdown": "^1.0.44",
"@yamada-ui/react": "^1.5.3",
"@yamada-ui/table": "^1.2.4",
Comment on lines +34 to +42
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please do not change. It is downgrad.

"file-saver": "^2.0.5",
"jszip": "^3.10.1",
"match-sorter": "^6.3.4",
"next": "^14.2.15",
Expand Down
36 changes: 26 additions & 10 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

56 changes: 50 additions & 6 deletions utils/indexeddb.ts
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please do not diable lint rule. You are told that this conditional statement is useless.
It is unnecessary or the type is wrong.

Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import type { ComponentStyle, Theme } from "@yamada-ui/react"
import type { ComponentStyle, DefaultTheme, Theme } from "@yamada-ui/react"
import { toKebabCase } from "@yamada-ui/react"
import { saveAs } from "file-saver"
import JSZip from "jszip"

let db: IDBDatabase

Expand All @@ -11,12 +14,9 @@ export interface SaveThemeData {
id: string
components: SaveComponentThemeData
}
export type SaveComponentThemeData = Partial<DefaultTheme["components"]>

export type SaveComponentThemeData = Partial<{
[T in keyof Theme["components"]]: ComponentStyle<T>
}>

export const openDatabase = (): Promise<IDBDatabase> => {
export const openDatabase = async (): Promise<IDBDatabase> => {
return new Promise((resolve, reject) => {
const request = indexedDB.open(DATA_BASE_NAME, DATA_BASE_VER)

Expand All @@ -40,6 +40,7 @@ export const openDatabase = (): Promise<IDBDatabase> => {
export const getTheme = async (
themeName: string,
): Promise<SaveThemeData | undefined> => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!db) db = await openDatabase()

const transaction = db.transaction([DATA_BASE_STORE], "readonly")
Expand All @@ -59,6 +60,7 @@ export const getThemeForComponent = async (
themeName: string,
componentName: keyof Theme["components"],
): Promise<ComponentStyle | undefined> => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!db) db = await openDatabase()

const transaction = db.transaction([DATA_BASE_STORE], "readonly")
Expand All @@ -75,6 +77,7 @@ export const getThemeForComponent = async (
}

export const saveTheme = async (theme: SaveThemeData): Promise<void> => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!db) db = await openDatabase()

const transaction = db.transaction([DATA_BASE_STORE], "readwrite")
Expand All @@ -92,6 +95,7 @@ export const saveThemeForComponent = async (
componentName: keyof Theme["components"],
theme: ComponentStyle,
): Promise<void> => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!db) db = await openDatabase()

const transaction = db.transaction([DATA_BASE_STORE], "readwrite")
Expand All @@ -111,3 +115,43 @@ export const saveThemeForComponent = async (
request.onerror = () => reject(request.error)
})
}

export const exportThemeAsZip = async (themeName: string): Promise<void> => {
const themeData = await getTheme(themeName)
if (!themeData) {
throw new Error("Theme not found")
}

const zip = new JSZip()

const themeFolder = zip.folder("theme")
if (!themeFolder) {
throw new Error("Failed to create theme folder")
}

const componentsFolder = themeFolder.folder("components")
if (!componentsFolder) {
throw new Error("Failed to create components folder")
}

let imports = ""
let exports = "export const components = {\n"

for (const [componentName, theme] of Object.entries(themeData.components)) {
const fileName = toKebabCase(componentName)
const content = `export const ${componentName} = ${JSON.stringify(theme, null, 2)}`

componentsFolder.file(`${fileName}.ts`, content)

imports += `import { ${componentName} } from './${fileName}'\n`
exports += ` ${componentName},\n`
}

exports += "}"
const indexContent = `${imports}\n${exports}`

componentsFolder.file("index.ts", indexContent)

const content = await zip.generateAsync({ type: "blob" })
saveAs(content, `${themeName}.zip`)
}