diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 5b2a0168cf..5f0b259559 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -100,6 +100,9 @@ jobs:
run: yarn --immutable
- name: Run build
run: yarn build:docs
+ env:
+ DOCS_EXAMPLES_VUE_PATH: 'https://docs.storefrontui.io/v2-vue'
+ DOCS_EXAMPLES_REACT_PATH: 'https://docs.storefrontui.io/v2-react'
build-release:
name: Build packages for release
@@ -319,6 +322,6 @@ jobs:
env:
GITHUB_PUSH_BEFORE_SHA: ${{ github.event.before }}
GITHUB_PUSH_BASE_SHA: ${{ github.event.base }}
- GITHUB_PULL_BASE_SHA: ${{ github.event.pull_request.base.sha }}
+ GITHUB_PULL_BASE_SHA: ${{ github.event.pull_request.base.sha }}
GITHUB_DEFAULT_BRANCH: ${{ github.event.repository.default_branch }}
GITGUARDIAN_API_KEY: ${{ secrets.GITGUARDIAN_API_KEY }}
diff --git a/.gitignore b/.gitignore
index 98f40503ad..70f086d553 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,6 +34,7 @@ yarn-error.log*
.env.development.local
.env.test.local
.env.production.local
+.env
# turbo and others
.turbo
diff --git a/.vuestorefrontcloud/docs/Dockerfile b/.vuestorefrontcloud/docs/Dockerfile
index 5762e4c8de..b7478f802a 100644
--- a/.vuestorefrontcloud/docs/Dockerfile
+++ b/.vuestorefrontcloud/docs/Dockerfile
@@ -1,12 +1,7 @@
-FROM node:16-alpine AS build
+FROM node:16 AS build
WORKDIR /var/www
-RUN apk add --no-cache yarn
-# needed because of turbo issue
-# see: https://github.com/vercel/turbo/issues/2309#issuecomment-1288660455
-RUN apk add --no-cache libc6-compat
-
ARG VITE_DOCS_BASEPATH
ARG VITE_DOCS_EXAMPLES_REACT_PATH
ARG VITE_DOCS_EXAMPLES_VUE_PATH
@@ -20,10 +15,10 @@ ENV ENVIRONMENT=$ENVIRONMENT
COPY . .
RUN yarn
RUN ENV_NAME=$ENVIRONMENT yarn build:replace-assets-url-with
-RUN yarn build:peer-next
+RUN yarn build:vue
RUN yarn build:docs
-FROM nginx
-COPY --from=build /var/www/apps/docs/components/.vuepress/dist /usr/share/nginx/html/v2
-COPY .vuestorefrontcloud/docs/default.conf /etc/nginx/conf.d/default.conf
+WORKDIR /var/www/apps/docs/components
+
+CMD ["yarn", "serve"]
diff --git a/_templates/component/new/docs_readme.ejs.t b/_templates/component/new/docs_readme.ejs.t
index a0358eef59..baf6125955 100644
--- a/_templates/component/new/docs_readme.ejs.t
+++ b/_templates/component/new/docs_readme.ejs.t
@@ -35,9 +35,9 @@ hideBreadcrumbs: true
## Source code
-
+::vue-only
<<<../../../packages/sfui/frameworks/vue/components/<%= name %>/<%= name %>.vue
-
-
+::
+::react-only
<<<../../../packages/sfui/frameworks/react/components/<%= name %>/<%= name %>.tsx
-
+::
diff --git a/apps/docs/components/.env.example b/apps/docs/components/.env.example
index c1673a86c3..3a4504af98 100644
--- a/apps/docs/components/.env.example
+++ b/apps/docs/components/.env.example
@@ -1,3 +1,2 @@
-VITE_DOCS_BASEPATH=/v2/
-VITE_DOCS_EXAMPLES_REACT_PATH=http://localhost:3002
-VITE_DOCS_EXAMPLES_VUE_PATH=http://localhost:3001
+DOCS_EXAMPLES_VUE_PATH=http://localhost:3001
+DOCS_EXAMPLES_REACT_PATH=http://localhost:3002
\ No newline at end of file
diff --git a/apps/docs/components/.gitignore b/apps/docs/components/.gitignore
deleted file mode 100644
index 51eb69f27e..0000000000
--- a/apps/docs/components/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-dist/
-.env
diff --git a/apps/docs/components/.vuepress/components/ComponentList.vue b/apps/docs/components/.vuepress/components/ComponentList.vue
deleted file mode 100644
index ca3749ef40..0000000000
--- a/apps/docs/components/.vuepress/components/ComponentList.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-
- {{ blockCount(componentName) }} blocks {{ componentDescription(componentName) }} Coming Soon
- All coded components are available in the SFUI
- Figma file.
- Fully accessible UI components, designed to integrate beautifully with Tailwind CSS and React. Fully accessible UI components, designed to integrate beautifully with Tailwind CSS and Vue.
- Fully customizable UI components and design tokens ready for rapid prototyping and creating complex projects.
-
- This integration is currently in an early alpha and not ready for production usage
-
- You shouldn't rely on current APIs as they are subject to change. Any release before first release candidate
- can contain breaking changes. Please use this code with caution.
- Need to change the default behavior?
- By copying over our base component into your project, you can customize any behavior or stylings. Just
- make sure to use your custom component when you copy over our
- {{ componentName.replace('Sf', '') }}
- {{ componentName.replace('Sf', '') }}
- React
- Vue
- Figma
-
-
diff --git a/apps/docs/components/components/content/ComponentList.vue b/apps/docs/components/components/content/ComponentList.vue
new file mode 100644
index 0000000000..29a57688de
--- /dev/null
+++ b/apps/docs/components/components/content/ComponentList.vue
@@ -0,0 +1,17 @@
+
+
+ `, `
`, `
` and `
` are applied out of the box when ```prose``` class is applied to the container.
+
+::showcase{showcase-name="Typography/Headings" style="min-height:400px"}
+
+::vue-only
+<<<../../../../preview/nuxt/pages/showcases/Typography/Headings.vue
+::
+::react-only
+<<<../../../../preview/next/pages/showcases/Typography/Headings.tsx
+::
+
+::
+
+## Leadings
+
+To apply leading text style,```lead``` class must be assigned to the chosen tag.
+
+::showcase{showcase-name="Typography/Leading" style="min-height:200px"}
+
+::vue-only
+<<<../../../../preview/nuxt/pages/showcases/Typography/Leading.vue
+::
+::react-only
+<<<../../../../preview/next/pages/showcases/Typography/Leading.tsx
+::
+
+::
+
+## Paragraph
+
+Simple paragraph styling.
+
+::showcase{showcase-name="Typography/Paragraph" style="min-height:200px"}
+
+::vue-only
+<<<../../../../preview/nuxt/pages/showcases/Typography/Paragraph.vue
+::
+::react-only
+<<<../../../../preview/next/pages/showcases/Typography/Paragraph.tsx
+::
+
+::
+
+## Quote
+
+For quotes, please use `
` tag and `
Full List of CSS Variables
-` HTML elements. It allows you to create an accordion component that expands and collapses content.
The root element of this component is `
` elements are focusable and can be activated by pressing
## Playground
-
` elements are focusable and can be activated by pressing
| Event name | Trigger |
| --------------------- | ---------------------------------- |
| `update:modelValue` | Triggers when click on the summary |
-
-
:::
-::: slot source
-
+#tab-3
## Source code
-
-<<<../../../packages/sfui/frameworks/vue/components/SfAccordionItem/SfAccordionItem.vue
-
-
-<<<../../../packages/sfui/frameworks/react/components/SfAccordionItem/SfAccordionItem.tsx
-
+:partial{content="block-callout"}
+:::vue-only
+<<<../../../../../packages/sfui/frameworks/vue/components/SfAccordionItem/SfAccordionItem.vue
+:::
+:::react-only
+<<<../../../../../packages/sfui/frameworks/react/components/SfAccordionItem/SfAccordionItem.tsx
:::
+
+::
diff --git a/apps/docs/components/components/badge.md b/apps/docs/components/content/_components/badge.md
similarity index 59%
rename from apps/docs/components/components/badge.md
rename to apps/docs/components/content/_components/badge.md
index 2c251dd39f..4d9524853f 100644
--- a/apps/docs/components/components/badge.md
+++ b/apps/docs/components/content/_components/badge.md
@@ -1,11 +1,8 @@
----
-layout: AtomLayout
-hideBreadcrumbs: true
----
-
# Badge
-::: slot usage
+::tabs{:titles='["Usage", "API", "Source Code"]'}
+
+#tab-1
## Examples
@@ -14,12 +11,15 @@ hideBreadcrumbs: true
The badge component must be wrapped with a container that has `class="relative"`. You must provide such a container by yourself, but it gives you the flexibility to put the badge wherever you want. Bagde comes with a "dot" variant, which hides the content. When given content is of type number (or string that could be parsed to number), you can set a maximum limit of that number using `max` prop.