feat: docs

.changeset/clever-dodos-check.md

@@ -0,0 +1,7 @@
+---
+"@solidjs-material/configuration": patch
+"@solidjs-material/core": patch
+"@solidjs-material/docs": patch
+---
+
+Add new docs

.changeset/hungry-lobsters-watch.md

@@ -3,4 +3,4 @@
 "@solidjs-material/core": patch
 ---
 
-Fix some tyle inconsistances
+Fix some style inconsistances

.github/workflows/ci.yml

@@ -0,0 +1,50 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, synchronize]
+
+env:
+  PNPM_CACHE_FOLDER: .pnpm-store
+
+jobs:
+  build:
+    name: Build and Test
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
+
+      - name: setup caching
+        uses: actions/cache@v2
+        with:
+          path: ${{ env.PNPM_CACHE_FOLDER }}
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      - name: setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7.x.x
+
+      - name: setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: "pnpm"
+
+      - name: setup pnpm config
+        run: pnpm config set store-dir $PNPM_CACHE_FOLDER
+
+      - name: install dependencies
+        run: pnpm i
+
+      - name: build
+        run: pnpm build

.github/workflows/deploy.yml

@@ -0,0 +1,36 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout repository
+        uses: actions/checkout@v3
+
+      - name: install and build
+        uses: withastro/action@v0
+        with:
+          path: ./apps/docs
+
+  deploy:
+    name: Deploy
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: deploy
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/release.yml

@@ -2,8 +2,7 @@ name: Release
 
 on:
   push:
-    branches:
-      - main
+    branches: [main]
 
 env:
   PNPM_CACHE_FOLDER: .pnpm-store

.gitignore

@@ -1,7 +1,27 @@
-.DS_Store
+# ci
 .pnpm-store
 
+# turbo
 .turbo
 
-node_modules
-dist
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# build output
+dist/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.prettierrc.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  printWidth: 120,
+  trailingComma: "all",
+  plugins: [require.resolve("prettier-plugin-packagejson"), require.resolve("prettier-plugin-astro")],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};

.vscode/settings.json

@@ -3,8 +3,11 @@
   "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]],
 
   "eslint.workingDirectories": ["packages/*", "apps/*"],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "astro"],
 
   "editor.codeActionsOnSave": {
     "source.fixAll": true
-  }
+  },
+
+  "prettier.documentSelectors": ["**/*.astro", "**/*.mdx"]
 }

packages/docs/.eslintrc.cjs → apps/docs/.eslintrc.cjs

@@ -4,6 +4,6 @@ const { resolve } = require("path");
 require("@rushstack/eslint-patch/modern-module-resolution");
 
 module.exports = {
-  extends: [require.resolve("@solidjs-material/configuration/eslint.solid.cjs")],
+  extends: [require.resolve("@solidjs-material/configuration/eslint.astro.cjs")],
   parserOptions: { project: resolve(__dirname, "tsconfig.json") },
 };

apps/docs/astro.config.mjs

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-unresolved, import/no-extraneous-dependencies */
+import mdx from "@astrojs/mdx";
+import solid from "@astrojs/solid-js";
+import tailwind from "@astrojs/tailwind";
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  site: "https://solid-material.dev",
+  markdown: {
+    shikiConfig: { theme: "css-variables" },
+  },
+  integrations: [solid(), tailwind(), mdx()],
+});

apps/docs/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@solidjs-material/docs",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "astro": "astro",
+    "build": "astro build",
+    "dev": "astro dev",
+    "lint": "eslint \"src/**/*.{ts,tsx,astro}\" --fix",
+    "preview": "astro preview",
+    "start": "astro dev"
+  },
+  "dependencies": {
+    "@fontsource/poppins": "^4.5.10",
+    "@solidjs-material/core": "workspace:^0.0.7",
+    "solid-icons": "^1.0.4",
+    "solid-js": "^1.4.3",
+    "tailwindcss": "^3.0.24"
+  },
+  "devDependencies": {
+    "@astrojs/mdx": "^0.15.1",
+    "@astrojs/solid-js": "^2.0.0",
+    "@astrojs/tailwind": "^3.0.0",
+    "@solidjs-material/configuration": "workspace:^0.0.4",
+    "@solidjs-material/tailwind": "workspace:^0.0.5",
+    "@tailwindcss/typography": "^0.5.9",
+    "astro": "^2.0.2"
+  }
+}

apps/docs/src/components/examples/button.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@solidjs-material/core";
+import { AiOutlineHeart } from "solid-icons/ai";
+
+export function BasicExample() {
+  return (
+    <>
+      <Button>Save</Button>
+      <Button variant="tonal">Save</Button>
+      <Button variant="outlined">Save</Button>
+      <Button variant="text">Save</Button>
+    </>
+  );
+}
+
+export function IconsExample() {
+  return (
+    <>
+      <Button startIcon={() => <AiOutlineHeart />}>Save</Button>
+      <Button endIcon={() => <AiOutlineHeart />}>Save</Button>
+    </>
+  );
+}
+
+export function DisabledExample() {
+  return (
+    <>
+      <Button isDisabled>Save</Button>
+      <Button variant="tonal" isDisabled>
+        Save
+      </Button>
+      <Button variant="outlined" isDisabled>
+        Save
+      </Button>
+      <Button variant="text" isDisabled>
+        Save
+      </Button>
+    </>
+  );
+}

apps/docs/src/components/examples/card.tsx

@@ -0,0 +1,24 @@
+import { Button, Card } from "@solidjs-material/core";
+
+export function BasicExample() {
+  return (
+    <>
+      <Card class="p-5">Some content</Card>
+      <Card variant="outlined" class="p-5">
+        Some content
+      </Card>
+    </>
+  );
+}
+
+export function CompositionExample() {
+  return (
+    <Card class="p-5">
+      Some content
+      <div class="mt-2 flex items-center gap-x-2 text-right">
+        <Button variant="text">Cancel</Button>
+        <Button variant="outlined">Cool</Button>
+      </div>
+    </Card>
+  );
+}

apps/docs/src/components/examples/checkbox.tsx

@@ -0,0 +1,39 @@
+import { Checkbox } from "@solidjs-material/core";
+import { AiOutlineCheck, AiOutlineMinus } from "solid-icons/ai";
+
+export function BasicExample() {
+  return (
+    <Checkbox label="Accept terms" checkIcon={() => <AiOutlineCheck />} indeterminateIcon={() => <AiOutlineMinus />} />
+  );
+}
+
+export function IndeterminateExample() {
+  return (
+    <Checkbox
+      label="Accept terms"
+      checkIcon={() => <AiOutlineCheck />}
+      indeterminateIcon={() => <AiOutlineMinus />}
+      isIndeterminate
+    />
+  );
+}
+
+export function DisabledExample() {
+  return (
+    <>
+      <Checkbox
+        label="Accept terms"
+        checkIcon={() => <AiOutlineCheck />}
+        indeterminateIcon={() => <AiOutlineMinus />}
+        isDisabled
+      />
+      <Checkbox
+        label="Accept terms"
+        checkIcon={() => <AiOutlineCheck />}
+        indeterminateIcon={() => <AiOutlineMinus />}
+        defaultIsChecked
+        isDisabled
+      />
+    </>
+  );
+}

apps/docs/src/components/examples/divider.tsx

@@ -0,0 +1,13 @@
+import { Divider } from "@solidjs-material/core";
+
+export function BasicExample() {
+  return <Divider />;
+}
+
+export function VerticalExample() {
+  return (
+    <div class="h-10">
+      <Divider orientation="vertical" />
+    </div>
+  );
+}

apps/docs/src/components/examples/fab.tsx

@@ -0,0 +1,26 @@
+import { FAB } from "@solidjs-material/core";
+import { AiOutlinePlus } from "solid-icons/ai";
+
+export function BasicExample() {
+  return (
+    <>
+      <FAB icon={<AiOutlinePlus />} />
+      <FAB icon={<AiOutlinePlus />} variant="secondary" />
+      <FAB icon={<AiOutlinePlus />} variant="tertiary" />
+    </>
+  );
+}
+
+export function SizeExample() {
+  return (
+    <>
+      <FAB icon={<AiOutlinePlus />} size="small" />
+      <FAB icon={<AiOutlinePlus />} size="medium" />
+      <FAB icon={<AiOutlinePlus />} size="large" />
+    </>
+  );
+}
+
+export function ExtendedExample() {
+  return <FAB icon={<AiOutlinePlus />}>Add</FAB>;
+}