diff --git a/apps/backgrounds/package.json b/apps/backgrounds/package.json index 31b5272ca8..4d45946b5d 100644 --- a/apps/backgrounds/package.json +++ b/apps/backgrounds/package.json @@ -16,7 +16,7 @@ "@react-three/fiber": "9.1.2", "clsx": "^2.1.1", "motion": "^12.11.0", - "next": "16.1.6", + "next": "16.2.4", "react": "19.2.3", "react-dom": "19.2.3", "shadergradient": "^1.2.14", diff --git a/apps/blog/docusaurus.config.ts b/apps/blog/docusaurus.config.ts index ff9a71ce9f..202a834f76 100644 --- a/apps/blog/docusaurus.config.ts +++ b/apps/blog/docusaurus.config.ts @@ -13,10 +13,12 @@ const config: Config = { organizationName: "gridaco", projectName: "grida", onBrokenLinks: "throw", - onBrokenMarkdownLinks: "warn", markdown: { mermaid: true, + hooks: { + onBrokenMarkdownLinks: "warn", + }, }, themes: ["@docusaurus/theme-mermaid"], diff --git a/apps/blog/package.json b/apps/blog/package.json index 3e12cdbb5f..d0ff6673a3 100644 --- a/apps/blog/package.json +++ b/apps/blog/package.json @@ -16,10 +16,10 @@ "write-translations": "docusaurus write-translations" }, "dependencies": { - "@docusaurus/core": "3.9.2", - "@docusaurus/plugin-sitemap": "3.9.2", - "@docusaurus/preset-classic": "3.9.2", - "@docusaurus/theme-mermaid": "3.9.2", + "@docusaurus/core": "3.10.0", + "@docusaurus/plugin-sitemap": "3.10.0", + "@docusaurus/preset-classic": "3.10.0", + "@docusaurus/theme-mermaid": "3.10.0", "@mdx-js/react": "^3.1.0", "clsx": "^2.1.1", "prism-react-renderer": "^2.4.1", @@ -27,9 +27,9 @@ "react-dom": "19.2.1" }, "devDependencies": { - "@docusaurus/module-type-aliases": "3.9.2", - "@docusaurus/tsconfig": "3.9.2", - "@docusaurus/types": "3.9.2", + "@docusaurus/module-type-aliases": "3.10.0", + "@docusaurus/tsconfig": "3.10.0", + "@docusaurus/types": "3.10.0", "typescript": "^5" }, "browserslist": { diff --git a/apps/docs/manifest.js b/apps/docs/manifest.js index 1a62740e1a..686f82e5ad 100644 --- a/apps/docs/manifest.js +++ b/apps/docs/manifest.js @@ -6,12 +6,16 @@ module.exports = { path: "/docs/getting-started", }, { - title: "Assistant", + title: "With Figma", open: true, routes: [ + { + title: "Assistant", + path: "/docs/with-figma/assistant", + }, { title: "Design Assistant", - path: "/docs/assistant/design-assistant", + path: "/docs/with-figma/assistant/design-assistant", routes: [ { title: "Icons loader", @@ -21,31 +25,31 @@ module.exports = { }, // { // title: "Components View", - // path: "/docs/assistant/components-view", + // path: "/docs/with-figma/assistant/components-view", // }, // { // title: "Code View", - // path: "/docs/assistant/code-view", + // path: "/docs/with-figma/assistant/code-view", // }, // { // title: "Quick look", - // path: "/docs/assistant/quicklook", + // path: "/docs/with-figma/assistant/quicklook", // }, // { // title: "Click to copy", - // path: "/docs/assistant/click-to-copy", + // path: "/docs/with-figma/assistant/click-to-copy", // }, // { // title: "Design Linting", - // path: "/docs/assistant/linter", + // path: "/docs/with-figma/assistant/linter", // }, // { // title: "Preferences", - // path: "/docs/assistant/preferences", + // path: "/docs/with-figma/assistant/preferences", // }, // { // title: "Environment Variables", - // path: "/docs/assistant/environment-variables", + // path: "/docs/with-figma/assistant/environment-variables", // }, ], }, diff --git a/apps/docs/package.json b/apps/docs/package.json index ed175867ca..4d05bf419e 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -18,11 +18,11 @@ "write-translations": "docusaurus write-translations" }, "dependencies": { - "@docusaurus/core": "3.9.2", - "@docusaurus/plugin-client-redirects": "3.9.2", - "@docusaurus/plugin-google-gtag": "3.9.2", - "@docusaurus/plugin-sitemap": "3.9.2", - "@docusaurus/preset-classic": "3.9.2", + "@docusaurus/core": "3.10.0", + "@docusaurus/plugin-client-redirects": "3.10.0", + "@docusaurus/plugin-google-gtag": "3.10.0", + "@docusaurus/plugin-sitemap": "3.10.0", + "@docusaurus/preset-classic": "3.10.0", "@mdx-js/react": "^3.1.0", "clsx": "^2.1.1", "katex": "^0.16.11", @@ -33,9 +33,9 @@ "remark-math": "^6.0.0" }, "devDependencies": { - "@docusaurus/module-type-aliases": "3.9.2", - "@docusaurus/tsconfig": "3.9.2", - "@docusaurus/types": "3.9.2", + "@docusaurus/module-type-aliases": "3.10.0", + "@docusaurus/tsconfig": "3.10.0", + "@docusaurus/types": "3.10.0", "fs-extra": "^10.0.0", "marked": "^4.0.10", "typescript": "^5" diff --git a/apps/docs/scripts/docs-site-gen/copy-docs.js b/apps/docs/scripts/docs-site-gen/copy-docs.js index 27b84588a4..e95fdb4713 100644 --- a/apps/docs/scripts/docs-site-gen/copy-docs.js +++ b/apps/docs/scripts/docs-site-gen/copy-docs.js @@ -15,7 +15,13 @@ function copyAll() { // deletions in the source tree do not leave duplicate routes (e.g. README // vs index) in the build output. fse.emptyDirSync(dest); - fse.copySync(origin, dest, { overwrite: true }); + fse.copySync(origin, dest, { + overwrite: true, + filter: (src) => { + const base = path.basename(src); + return base !== ".DS_Store"; + }, + }); } module.exports = copyAll; diff --git a/apps/docs/sidebars.js b/apps/docs/sidebars.js index 06ae436a31..958c66a946 100644 --- a/apps/docs/sidebars.js +++ b/apps/docs/sidebars.js @@ -174,14 +174,6 @@ const api = [ // }, ]; -const flags = [ - { - type: "autogenerated", - dirName: "flags", - }, - ..._flags_items, -]; - const docs = [ { type: "doc", @@ -189,34 +181,23 @@ const docs = [ }, { type: "category", - label: "Getting Started", + label: "Editor", collapsed: true, items: [ { type: "autogenerated", - dirName: "getting-started", + dirName: "editor", }, ], }, { type: "category", - label: "Concepts", + label: "Forms", collapsed: true, items: [ { type: "autogenerated", - dirName: "concepts", - }, - ], - }, - { - type: "category", - label: "Assistant", - collapsed: true, - items: [ - { - type: "autogenerated", - dirName: "assistant", + dirName: "forms", }, ], }, @@ -239,6 +220,39 @@ const docs = [ }, ], }, + { + type: "category", + label: "With Figma", + collapsed: true, + items: [ + { + type: "autogenerated", + dirName: "with-figma", + }, + ], + }, + { + type: "category", + label: "Design", + collapsed: true, + items: [ + { + type: "autogenerated", + dirName: "design", + }, + ], + }, + { + type: "category", + label: "CLI", + collapsed: true, + items: [ + { + type: "autogenerated", + dirName: "cli", + }, + ], + }, { type: "category", label: "Models", @@ -285,7 +299,6 @@ const wg = [ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { tutorialSidebar: docs, - flagsSidebar: flags, togetherSidebar: together, apiSidebar: api, wgSidebar: wg, diff --git a/apps/viewer/package.json b/apps/viewer/package.json index aebd076093..990fb56b6c 100644 --- a/apps/viewer/package.json +++ b/apps/viewer/package.json @@ -12,7 +12,7 @@ "dependencies": { "@uidotdev/usehooks": "^2.4.1", "lucide-react": "^0.511.0", - "next": "16.1.6", + "next": "16.2.4", "pdfjs-dist": "4.8.69", "react": "19.2.3", "react-dom": "19.2.3", diff --git a/docs/AGENTS.md b/docs/AGENTS.md index 9b548ec643..88d401a68c 100644 --- a/docs/AGENTS.md +++ b/docs/AGENTS.md @@ -12,27 +12,39 @@ This directory is the **source of truth** for documentation content. ## Actively maintained -We **only actively maintain** the following docs areas: +The most actively maintained docs areas are: - `docs/wg/**` — working group docs (design notes, architecture, proposals, WIP) - `docs/reference/**` — reference docs (glossary, specs, stable technical references) +- `docs/editor/**` — editor user and feature docs +- `docs/forms/**` — forms docs +- `docs/platform/**` — platform/product docs +- `docs/with-figma/**` — Figma interoperability, guides, and Assistant product docs +- `docs/design/**` — design-oriented product/reference docs +- `docs/math/**` — supporting technical references ## SEO frontmatter -For docs SEO/frontmatter cleanup, start with the actively maintained areas: -`docs/wg/**` and `docs/reference/**`. Avoid broad repo-wide churn across -older docs sections unless the task explicitly asks for that migration. +For docs SEO/frontmatter cleanup, start with the actively maintained areas +above. Avoid broad repo-wide churn across deprecated, synced, or archived +sections unless the task explicitly asks for that migration. When adding or meaningfully editing an actively maintained doc page, prefer frontmatter with `title`, `description`, and `keywords`. For most `wg/` and `reference/` Markdown pages that do not use MDX/JSX features, also include `format: md` as described below. -## Everything else +## Special Cases + +Some docs trees are intentionally kept, but have different ownership rules: -Other folders under `/docs` are **not actively managed**. +- `docs/cli/**` is deprecated. Keep it unless the task explicitly removes or rewrites deprecated CLI docs. +- `docs/@designto-code/**` is synced from an external source. Do not restructure or rewrite it unless the task explicitly targets that sync source. +- `docs/_history/**` contains archived, code-facing record material. It is not part of the user-facing docs surface; if you archive new docs, move them under `_history/` and mark each page `unlisted: true`. + +## Everything else -- Unless you have a specific task, **avoid editing** content outside `docs/wg/**` and `docs/reference/**`. +- Unless you have a specific task, prefer edits in the actively maintained areas above. - Do not edit generated artifacts under `/apps/docs/docs/**`. ## Universal routing (linking to editor pages) @@ -100,16 +112,19 @@ This prevents all MDX-related parsing issues for the entire file. ## Structure -| directory | name | description | active | -| -------------------------------- | ------------- | ---------------------------------------------------------------------- | ------ | -| [/docs/wg](./wg) | working group | working group documents, architecture documents, todo list, etc | yes | -| [/docs/wg/format](./wg/format) | format | Grida IR spec and CSS/HTML/SVG import mapping trackers | yes | -| [/docs/reference](./reference) | reference | glossary and references (technical documents) | yes | -| [/docs/math](./math) | math | Math reference, used for internal docs referencing | yes | -| [/docs/platform](./platform) | platform | Grida Platform (API/Spec) documents | yes | -| [/docs/editor](./editor) | editor | Grida Editor - User Documentation | yes | -| [/docs/forms](./forms) | forms | Grida Forms - User Documentation | yes | -| [/docs/canvas](./canvas) | canvas | Grida Canvas SDK - User Documentation | no | -| [/docs/cli](./cli) | cli | Grida CLI - User Documentation | yes | -| [/docs/together](./together) | together | Contributing, Support, Community, etc | yes | -| [/docs/with-figma](./with-figma) | with-figma | Grida with Figma - Grida <-> Figma compatibility and user guides | yes | +| directory | name | description | active | +| ---------------------------------------- | -------------- | ---------------------------------------------------------------------- | ------ | +| [/docs/wg](./wg) | working group | working group documents, architecture documents, todo list, etc | yes | +| [/docs/wg/format](./wg/format) | format | Grida IR spec and CSS/HTML/SVG import mapping trackers | yes | +| [/docs/reference](./reference) | reference | glossary and references (technical documents) | yes | +| [/docs/math](./math) | math | Math reference, used for internal docs referencing | yes | +| [/docs/platform](./platform) | platform | Grida Platform (API/Spec) documents | yes | +| [/docs/editor](./editor) | editor | Grida Editor - User Documentation | yes | +| [/docs/forms](./forms) | forms | Grida Forms - User Documentation | yes | +| [/docs/with-figma](./with-figma) | with-figma | Grida with Figma - Grida <-> Figma compatibility and user guides | yes | +| [/docs/design](./design) | design | Design-oriented docs and visual behavior notes | yes | +| [/docs/canvas](./canvas) | canvas | Grida Canvas SDK - User Documentation | no | +| [/docs/cli](./cli) | cli | Deprecated CLI docs kept for compatibility | no | +| [/docs/@designto-code](./@designto-code) | design-to-code | Externally synced reference docs | no | +| [/docs/\_history](./_history) | history | Archived, code-facing record docs not meant for user navigation | no | +| [/docs/together](./together) | together | Contributing, Support, Community, etc | no | diff --git a/docs/flags/assets/--artwork-flag-example-part-name-editing-only.gif b/docs/_history/flags/assets/--artwork-flag-example-part-name-editing-only.gif similarity index 100% rename from docs/flags/assets/--artwork-flag-example-part-name-editing-only.gif rename to docs/_history/flags/assets/--artwork-flag-example-part-name-editing-only.gif diff --git a/docs/flags/assets/--h1-flag-example-part-name-editing-only.gif b/docs/_history/flags/assets/--h1-flag-example-part-name-editing-only.gif similarity index 100% rename from docs/flags/assets/--h1-flag-example-part-name-editing-only.gif rename to docs/_history/flags/assets/--h1-flag-example-part-name-editing-only.gif diff --git a/docs/flags/index.md b/docs/_history/flags/index.md similarity index 90% rename from docs/flags/index.md rename to docs/_history/flags/index.md index 4bb0c6e26c..9a3ed8074c 100644 --- a/docs/flags/index.md +++ b/docs/_history/flags/index.md @@ -1,4 +1,5 @@ --- +unlisted: true id: intro title: "Introduction to Flags" sidebar_position: 1 @@ -30,7 +31,7 @@ Like in the example above, the `--artwork` flag is used to export the group as a ``` -Learn more about [--artwork](../@designto-code/flags/--artwork) +Learn more about [--artwork](../../@designto-code/flags/--artwork) diff --git a/docs/getting-started/01-intro.mdx b/docs/_history/getting-started/01-intro.mdx similarity index 99% rename from docs/getting-started/01-intro.mdx rename to docs/_history/getting-started/01-intro.mdx index 28586cf0ad..f227a3c9c4 100644 --- a/docs/getting-started/01-intro.mdx +++ b/docs/_history/getting-started/01-intro.mdx @@ -1,6 +1,7 @@ --- id: intro title: "Installation" +unlisted: true excerpt: "Convert your design to code to any platforms, learn how to make design work with Grida." --- diff --git a/docs/getting-started/02-clean-design-for-clean-code.mdx b/docs/_history/getting-started/02-clean-design-for-clean-code.mdx similarity index 98% rename from docs/getting-started/02-clean-design-for-clean-code.mdx rename to docs/_history/getting-started/02-clean-design-for-clean-code.mdx index e32f97ce48..645733d13e 100644 --- a/docs/getting-started/02-clean-design-for-clean-code.mdx +++ b/docs/_history/getting-started/02-clean-design-for-clean-code.mdx @@ -1,6 +1,7 @@ --- id: clean-design-for-clean-design title: "Clean Design for Clean Code" +unlisted: true excerpt: "Clean your design, maximize the product quality" --- diff --git a/docs/getting-started/03-configuration.mdx b/docs/_history/getting-started/03-configuration.mdx similarity index 98% rename from docs/getting-started/03-configuration.mdx rename to docs/_history/getting-started/03-configuration.mdx index 98dd259e7f..7693e2410f 100644 --- a/docs/getting-started/03-configuration.mdx +++ b/docs/_history/getting-started/03-configuration.mdx @@ -1,6 +1,7 @@ --- id: configuration title: "Framework & Configuration" +unlisted: true --- # Configuration diff --git a/docs/getting-started/04-integrations.mdx b/docs/_history/getting-started/04-integrations.mdx similarity index 98% rename from docs/getting-started/04-integrations.mdx rename to docs/_history/getting-started/04-integrations.mdx index d67a628fd4..a71ac3b032 100644 --- a/docs/getting-started/04-integrations.mdx +++ b/docs/_history/getting-started/04-integrations.mdx @@ -1,6 +1,7 @@ --- id: integrations title: "Integrations" +unlisted: true --- # Integrations diff --git a/docs/getting-started/05-examples.mdx b/docs/_history/getting-started/05-examples.mdx similarity index 89% rename from docs/getting-started/05-examples.mdx rename to docs/_history/getting-started/05-examples.mdx index 7ade5efa8c..f94b8484a2 100644 --- a/docs/getting-started/05-examples.mdx +++ b/docs/_history/getting-started/05-examples.mdx @@ -1,6 +1,7 @@ --- id: examples title: "Examples" +unlisted: true --- # Examples diff --git a/docs/getting-started/assets/how-to-configure-framework-on-assistant-v2021-11.png b/docs/_history/getting-started/assets/how-to-configure-framework-on-assistant-v2021-11.png similarity index 100% rename from docs/getting-started/assets/how-to-configure-framework-on-assistant-v2021-11.png rename to docs/_history/getting-started/assets/how-to-configure-framework-on-assistant-v2021-11.png diff --git a/docs/getting-started/assets/how-to-run-lints-on-your-design-with-grida-assistant-figma-plugin-15s.gif b/docs/_history/getting-started/assets/how-to-run-lints-on-your-design-with-grida-assistant-figma-plugin-15s.gif similarity index 100% rename from docs/getting-started/assets/how-to-run-lints-on-your-design-with-grida-assistant-figma-plugin-15s.gif rename to docs/_history/getting-started/assets/how-to-run-lints-on-your-design-with-grida-assistant-figma-plugin-15s.gif diff --git a/docs/getting-started/assets/how-to-run-lints-on-your-design-with-grida-assistant-figma-plugin-15s.mov b/docs/_history/getting-started/assets/how-to-run-lints-on-your-design-with-grida-assistant-figma-plugin-15s.mov similarity index 100% rename from docs/getting-started/assets/how-to-run-lints-on-your-design-with-grida-assistant-figma-plugin-15s.mov rename to docs/_history/getting-started/assets/how-to-run-lints-on-your-design-with-grida-assistant-figma-plugin-15s.mov diff --git a/docs/getting-started/translations/ko/01-intro.mdx b/docs/_history/getting-started/translations/ko/01-intro.mdx similarity index 99% rename from docs/getting-started/translations/ko/01-intro.mdx rename to docs/_history/getting-started/translations/ko/01-intro.mdx index e3b9a03fe3..5daeeca5b0 100644 --- a/docs/getting-started/translations/ko/01-intro.mdx +++ b/docs/_history/getting-started/translations/ko/01-intro.mdx @@ -1,6 +1,7 @@ --- id: intro title: "설치" +unlisted: true excerpt: "Convert your design to code to any platforms, learn how to make design work with Grida." --- diff --git a/docs/getting-started/translations/ko/02-clean-design-for-clean-code.mdx b/docs/_history/getting-started/translations/ko/02-clean-design-for-clean-code.mdx similarity index 99% rename from docs/getting-started/translations/ko/02-clean-design-for-clean-code.mdx rename to docs/_history/getting-started/translations/ko/02-clean-design-for-clean-code.mdx index 6581fad7f7..ef9bdb945a 100644 --- a/docs/getting-started/translations/ko/02-clean-design-for-clean-code.mdx +++ b/docs/_history/getting-started/translations/ko/02-clean-design-for-clean-code.mdx @@ -1,6 +1,7 @@ --- id: clean-design-for-clean-design title: "클린 코드를 위한 클린 디자인" +unlisted: true excerpt: "디자인을 완벽하게, 제품의 품질을 올립시다" --- diff --git a/docs/getting-started/translations/ko/03-configuration.mdx b/docs/_history/getting-started/translations/ko/03-configuration.mdx similarity index 98% rename from docs/getting-started/translations/ko/03-configuration.mdx rename to docs/_history/getting-started/translations/ko/03-configuration.mdx index 5b4af7ee5d..1af3d1e5b4 100644 --- a/docs/getting-started/translations/ko/03-configuration.mdx +++ b/docs/_history/getting-started/translations/ko/03-configuration.mdx @@ -1,6 +1,7 @@ --- id: configuration title: "프레임워크 & 설정하기" +unlisted: true --- # 설정 diff --git a/docs/getting-started/translations/ko/04-integrations.mdx b/docs/_history/getting-started/translations/ko/04-integrations.mdx similarity index 98% rename from docs/getting-started/translations/ko/04-integrations.mdx rename to docs/_history/getting-started/translations/ko/04-integrations.mdx index dad64a93dd..e7381adab0 100644 --- a/docs/getting-started/translations/ko/04-integrations.mdx +++ b/docs/_history/getting-started/translations/ko/04-integrations.mdx @@ -1,6 +1,7 @@ --- id: integrations title: "통합 & 연결" +unlisted: true --- # 통합하기 diff --git a/docs/getting-started/translations/ko/05-examples.mdx b/docs/_history/getting-started/translations/ko/05-examples.mdx similarity index 89% rename from docs/getting-started/translations/ko/05-examples.mdx rename to docs/_history/getting-started/translations/ko/05-examples.mdx index dea4c77e25..af7a4d7ba3 100644 --- a/docs/getting-started/translations/ko/05-examples.mdx +++ b/docs/_history/getting-started/translations/ko/05-examples.mdx @@ -1,6 +1,7 @@ --- id: examples title: "예시" +unlisted: true --- # 예시 diff --git a/docs/getting-started/translations/meta.json b/docs/_history/getting-started/translations/meta.json similarity index 100% rename from docs/getting-started/translations/meta.json rename to docs/_history/getting-started/translations/meta.json diff --git a/docs/code/with-css/index.md b/docs/code/with-css/index.md deleted file mode 100644 index 7b7926350f..0000000000 --- a/docs/code/with-css/index.md +++ /dev/null @@ -1 +0,0 @@ -# Quickstart: CSS diff --git a/docs/code/with-emotion-js/index.md b/docs/code/with-emotion-js/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-expo/index.md b/docs/code/with-expo/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-flutter/index.mdx b/docs/code/with-flutter/index.mdx deleted file mode 100644 index 33dab51b5c..0000000000 --- a/docs/code/with-flutter/index.mdx +++ /dev/null @@ -1,17 +0,0 @@ -# Flutter with Grida - -## Techniques - -### Design to code - -### Grida Cloud - CMS for your Flutter app - -## Utilities - VS Code Extension - -**Install `Grida for vscode` for better programming experience** - -_Learn more about Grida VSCode extension_ - -## Utilities - Android studio extension - -> You can have same similar coding experience on Android studio, with Grida InteliJ plugin. Since Jetbrains is not actively supported related to vscode, some updates might take some time. diff --git a/docs/code/with-framer-motion/index.md b/docs/code/with-framer-motion/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-headless-ui/index.md b/docs/code/with-headless-ui/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-html/index.md b/docs/code/with-html/index.md deleted file mode 100644 index 1b839fe656..0000000000 --- a/docs/code/with-html/index.md +++ /dev/null @@ -1 +0,0 @@ -# Quickstart: Html (Vanilla) diff --git a/docs/code/with-jetpack-compose/index.md b/docs/code/with-jetpack-compose/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-lit/index.md b/docs/code/with-lit/index.md deleted file mode 100644 index 5ae0e16a9e..0000000000 --- a/docs/code/with-lit/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Quickstart: Lit - -> Lit is a simple library for building fast, lightweight web components. diff --git a/docs/code/with-mui/index.md b/docs/code/with-mui/index.md deleted file mode 100644 index 1bfbcdd04d..0000000000 --- a/docs/code/with-mui/index.md +++ /dev/null @@ -1 +0,0 @@ -# Quickstart: Material UI for React (`@mui/material`) diff --git a/docs/code/with-nextjs/index.md b/docs/code/with-nextjs/index.md deleted file mode 100644 index dc14a88882..0000000000 --- a/docs/code/with-nextjs/index.md +++ /dev/null @@ -1 +0,0 @@ -# Quick start: Next js diff --git a/docs/code/with-nuxtjs/index.md b/docs/code/with-nuxtjs/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-preact/index.md b/docs/code/with-preact/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-react-native/index.md b/docs/code/with-react-native/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-react/index.mdx b/docs/code/with-react/index.mdx deleted file mode 100644 index 5ef30c5d24..0000000000 --- a/docs/code/with-react/index.mdx +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: "Quickstart: React" -sidebar_position: 1 ---- - -# Quickstart: React diff --git a/docs/code/with-storybook/index.md b/docs/code/with-storybook/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-styled-components/index.md b/docs/code/with-styled-components/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-svelte/index.mdx b/docs/code/with-svelte/index.mdx deleted file mode 100644 index 85df7fcc9e..0000000000 --- a/docs/code/with-svelte/index.mdx +++ /dev/null @@ -1,3 +0,0 @@ -## Svelte platform support - -## Code Styles & Conventions diff --git a/docs/code/with-swiftui/index.md b/docs/code/with-swiftui/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-tailwindcss/index.md b/docs/code/with-tailwindcss/index.md deleted file mode 100644 index 1d3f18e7c1..0000000000 --- a/docs/code/with-tailwindcss/index.md +++ /dev/null @@ -1 +0,0 @@ -# Quickstart: Tailwind css diff --git a/docs/code/with-vanilla-web/index.mdx b/docs/code/with-vanilla-web/index.mdx deleted file mode 100644 index 34304abc75..0000000000 --- a/docs/code/with-vanilla-web/index.mdx +++ /dev/null @@ -1 +0,0 @@ -# Vanilla HTML/CSS support diff --git a/docs/code/with-vue/index.md b/docs/code/with-vue/index.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs/code/with-webcomponents/index.md b/docs/code/with-webcomponents/index.md deleted file mode 100644 index 22fce2de2f..0000000000 --- a/docs/code/with-webcomponents/index.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: "Quickstart: Webcomponents" -sidebar_position: 1 ---- - -# Quickstart: Webcomponents diff --git a/docs/concepts/01-what-is-scene.mdx b/docs/concepts/01-what-is-scene.mdx deleted file mode 100644 index 477811367d..0000000000 --- a/docs/concepts/01-what-is-scene.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: "What is Scene?" ---- - -# What is Scene? - -We have this terminology - "Scene". Scene is a collection of layers, which can be represented as a Screen or a Component. - -**Examples** - -- Text or Shape is **not** a Scene. -- Frame **is** a Scene. (optionally) -- Page or Screen **is** a Scene. (which is Frame) -- A Component **is** a Scene. -- A Variant Set is **not** a Scene. -- A Variant **is** a Scene. -- A Instance is **not** a Scene. - -## What's special about the Scene? - -- Scene is a unit of sharing - - Once a Node or a Layer is registered as a Scene, you can share - - You cannot share a Single Text Node. -- Scene is a root, a absolute positioner reletive to its' children - - When you convert a lyer inside some frame to code, Let's say a Frame, this frame's position will be relative to it's first scene-parent. -- Scene is a unit of processing, This is to prevent recursive generation of code. - -_Now we have a clear understanding among layers, scenes and components, we can move on to the next step._ diff --git a/docs/concepts/02-design-linting.mdx b/docs/concepts/02-design-linting.mdx deleted file mode 100644 index 870a804f58..0000000000 --- a/docs/concepts/02-design-linting.mdx +++ /dev/null @@ -1,5 +0,0 @@ -# Design Lint - -## What is "design lint"? - -### What is lint? diff --git a/docs/concepts/03-layouts/01-laytout-management.mdx b/docs/concepts/03-layouts/01-laytout-management.mdx deleted file mode 100644 index c1d21fda0f..0000000000 --- a/docs/concepts/03-layouts/01-laytout-management.mdx +++ /dev/null @@ -1,53 +0,0 @@ -# Layout Management - -In this document, we'll have few notes about concepts of a Layout, and short principles of how to manage them. - -## Always use Frame - -## `Group` is not a Layout (in most times) - -We oftem misunderstand that group is a representation of a layout. But this is wrong. -Technically, under the hood, A group is a Abstract concepts that locks its children to move and position in a grouped way. - -To be more clear, here is an example. - -- SceneRoot - - Group - - Item 1 - Aligns to Left - - Item 2 - Aligns to Right - - Item 3 - Aligns to Top - -Group does not have a alignment property (not even in your design tool). It only shows the alignment if all its children have the same alignment. -So what really happens when you align a Group, let's say to the left, is that all its children are aligned to the left, relative to Root, not Group. - -This is why we should always use Frame instead of group, otherwise, your layout will break both in your design tool and in your production. - -Also under the same reason, you should avoid using Masks. Yet, [we do support them](../../@designto-code/figma-mask-layer), but the results may differ as your expectations. - - - -## `Frame` is a Layout - -## Advanced Layout composition - -- Column -- Row -- Flex -- Stack -- Positioned -- Aligned -- Complex Cases - -### Autolayout and Concept of `Flex` - -Learn more about this in the [next document](./autolayout) - -### Stack and Alignment - -### Complex Cases - -Above, you have all the support for representing layouts with built-in Figma features, Yet, you might encounter some cases that simply can't-be-done only using Figma. - -**Enter: Flags.** - -[Learn more about flags here](../flags/intro) diff --git a/docs/concepts/03-layouts/02-autolayout.mdx b/docs/concepts/03-layouts/02-autolayout.mdx deleted file mode 100644 index 377c79a570..0000000000 --- a/docs/concepts/03-layouts/02-autolayout.mdx +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: "Layouting with Autolayout" ---- - -# Layouting with Autolayout - -Autolayout is introduced at Nov, 2020 on Figma, which is a powerful tool for building responsive, developer friendly layouts. - -## Known Limitations - -## Tips & Tricks - -### Give autolayout full-power with flags annotation - -### List of autolayout as `Wrap` - -## Col-Row Hierarchy and `z-index` diff --git a/docs/concepts/03-layouts/03-overflow-and-scrolling.mdx b/docs/concepts/03-layouts/03-overflow-and-scrolling.mdx deleted file mode 100644 index 9630d19fca..0000000000 --- a/docs/concepts/03-layouts/03-overflow-and-scrolling.mdx +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: "Overflow & Scrolling Layout" ---- - -# Overflow & Scrolling Layout - -Read the technical blueprint - -- [How to determine if flexbox should have overflow porperty?](../../@designto-code/overflow-layout-scroll) -- [Item overflowing scenarios (static, no-scroll)](../../@designto-code/item-overflow) diff --git a/docs/concepts/03-layouts/04-constraints.mdx b/docs/concepts/03-layouts/04-constraints.mdx deleted file mode 100644 index 143a27557b..0000000000 --- a/docs/concepts/03-layouts/04-constraints.mdx +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: "Constraints / Alignment" ---- - -# Constraints / Alignment diff --git a/docs/concepts/03-layouts/05-best-practice.mdx b/docs/concepts/03-layouts/05-best-practice.mdx deleted file mode 100644 index 7f3ef8c33c..0000000000 --- a/docs/concepts/03-layouts/05-best-practice.mdx +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: "Layouting Best Practice" ---- - -# Layouting Best Practice diff --git a/docs/concepts/03-layouts/_category_.json b/docs/concepts/03-layouts/_category_.json deleted file mode 100644 index 9bc58c1762..0000000000 --- a/docs/concepts/03-layouts/_category_.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "label": "Layouts" -} diff --git a/docs/concepts/04-components/03-component-management.mdx b/docs/concepts/04-components/03-component-management.mdx deleted file mode 100644 index 51a1cb651e..0000000000 --- a/docs/concepts/04-components/03-component-management.mdx +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: "Components Management" ---- - -In this document, we will be covering the basics of how to use the components management system. -This is purely technical, this does not cover the part how to implement components to co-work between designers. diff --git a/docs/concepts/04-components/04-component-base.mdx b/docs/concepts/04-components/04-component-base.mdx deleted file mode 100644 index b0755d3865..0000000000 --- a/docs/concepts/04-components/04-component-base.mdx +++ /dev/null @@ -1,14 +0,0 @@ -# Component Base - -> Component Base or Abstract Component is a base Component that is used for creating variant components. - -## Why do we need this? - -## Always Create Component Base First. - -## Naming Convention - -- (base)ComponentName -- \_\_(base)ComponentName - -In most times, you may not want your Component Base to be shared through library, to prevent this, you can simply add `__` prefix to your "Component Base" Component's Name, altering `"example"` to `"__example"` diff --git a/docs/concepts/04-components/05-component-variant.mdx b/docs/concepts/04-components/05-component-variant.mdx deleted file mode 100644 index e357be498b..0000000000 --- a/docs/concepts/04-components/05-component-variant.mdx +++ /dev/null @@ -1,20 +0,0 @@ -# Variants - -## Variant vs State - -## Built-in States - -Also known as `Pseudo-classes` in CSS, these are built-in states and its names to represent them. - -- `hover` -- `focus` -- `active` -- `visited` -- `disabled` -- `enabled` -- `checked` -- `indeterminate` - -## Custom data - -## Switch vs Boolean diff --git a/docs/concepts/04-components/_category_.json b/docs/concepts/04-components/_category_.json deleted file mode 100644 index 56132c1fca..0000000000 --- a/docs/concepts/04-components/_category_.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "label": "Components" -} diff --git a/docs/concepts/05-widgets/01-intro.mdx b/docs/concepts/05-widgets/01-intro.mdx deleted file mode 100644 index 160f276b6e..0000000000 --- a/docs/concepts/05-widgets/01-intro.mdx +++ /dev/null @@ -1,48 +0,0 @@ -# Widgets - -> A Widget, or also knwon as Built-in Standard Components is a Grida standard for shorthanding the code, and making the result more reliable. - -## Example - Buttons and TextFields are Widget - -## Widget Catalog - -Here are some popular widgets that you will end up using in a daily basis. - -- Icon -- Button -- TextField -- Typography - -## The philosophy behind Widgets - -> "Only use widgets when they are inevidable" - -Behind the scene, the layout is also a widget internally. But you don't want to use untrusted code just for representing the layout. -e.g. - -```tsx -// (1) with Layout also as Widget -import { Stack, TextField, Button } from "@reflect-ui/react"; - -const AllInOne = () => { - return ( - - -