Docs/docusaurus initial setup (#13)

* Adds Docasaurus Setup * remove extra files * Adds button docs + hover config to docs * Adds Switch and Card Docs + Some minor fixes * Update package.json * fix booleans * fix netlify issues * change workspace * Update netlify.toml * Update netlify.toml * fixes around turbo * Update netlify.toml * Update netlify.toml * Update netlify.toml * Update docusaurus.config.js * Adds Vanilla Extract Plugin * Delete extra files
antstackio · Jun 28, 2022 · f21b979 · f21b979
1 parent b3a6edd
commit f21b979
Show file tree

Hide file tree

Showing 46 changed files with 9,268 additions and 1,153 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 # Dependency directories
 node_modules/
 .turbo
+.DS_Store
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -1,24 +1,20 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+# Dependencies
+/node_modules
+
+# Production
+/build
 
-node_modules
-dist
-dist-ssr
-*.local
+# Generated files
+.docusaurus
+.cache-loader
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
+# Misc
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};
diff --git a/docs/docs/components/_category_.json b/docs/docs/components/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Components",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "Components Provided by Hover"
+  }
+}
diff --git a/docs/docs/components/button.mdx b/docs/docs/components/button.mdx
@@ -0,0 +1,79 @@
+# Button
+
+### Quick start
+
+Here's a quick start guide to get started with the button component
+
+### Importing Component
+
+```jsx
+import { Button } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Button Default
+
+import "@hover-design/react/dist/style.css";
+import { Button } from "@hover-design/react";
+export const ButtonComponent = ({ variant, children }) => (
+  <Button variant={variant}>{children}</Button>
+);
+
+```jsx
+<div className="App">
+  <Button>Button default</Button>
+</div>
+```
+
+<!-- ![Button](https://i.imgur.com/BeBATSh.jpg) -->
+
+<ButtonComponent>Button Default</ButtonComponent>
+
+##### Button Light
+
+```jsx
+<div className="App">
+  <Button variant="light">Button light</Button>
+</div>
+```
+
+<!-- ![Button](https://i.imgur.com/iGIVhXN.jpg) -->
+
+<ButtonComponent variant="light">Button Light</ButtonComponent>
+
+##### Button Ghost
+
+```jsx
+<div className="App">
+  <Button variant="ghost">Button ghost</Button>
+</div>
+```
+
+<!-- ![Button](https://i.imgur.com/AbrmEdn.jpg) -->
+
+<ButtonComponent variant="ghost">Button Ghost</ButtonComponent>
+
+##### Button Hallow
+
+```jsx
+<div className="App">
+  <Button variant="hallow">Button Hallow</Button>
+</div>
+```
+
+<!-- ![Button](https://i.imgur.com/iPfqa7x.jpg) -->
+
+<ButtonComponent variant="hallow">Button Hallow</ButtonComponent>
+
+### Props Referece
+
+| Attributes |                         Values                          | Optional ? |
+| :--------- | :-----------------------------------------------------: | ---------: |
+| variant    | `default` &#124; `light` &#124; `ghost` &#124; `hallow` |        Yes |
+| padding    |         `small` &#124; `medium` &#124; `large`          |        Yes |
+| fontSize   |         `small` &#124; `medium` &#124; `large`          |        Yes |
+| margin     |         `small` &#124; `medium` &#124; `large`          |        Yes |
+| onClick    |                      `() => void;`                      |        Yes |
+| onHover    |                      `() => void;`                      |        Yes |
+| ref        |             `RefObject<HTMLButtonElement>;`             |        Yes |
diff --git a/docs/docs/components/card.mdx b/docs/docs/components/card.mdx
@@ -0,0 +1,97 @@
+# Card
+
+### Quick start
+
+Here's a quick start guide to get started with the button component
+
+### Importing Component
+
+```jsx
+import { Card } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Card Plain
+
+import "@hover-design/react/dist/style.css";
+import { Card } from "@hover-design/react";
+export const CardComponent = ({ variant, children }) => (
+  <Card variant={variant}>{children}</Card>
+);
+
+```jsx
+<div className="App">
+  <CardComponent variant="plain">
+    <h3>I am a card heading</h3>
+    <p>I am card Content</p>
+  </CardComponent>
+</div>
+```
+
+<!-- ![Button](https://i.imgur.com/BeBATSh.jpg) -->
+
+<CardComponent variant="plain">
+  <h3>I am a card heading</h3>
+  <p>I am card Content</p>
+</CardComponent>
+
+##### Card Outline
+
+```jsx
+<div className="App">
+  <CardComponent variant="outline">
+    <h3>I am a card heading</h3>
+    <p>I am card Content</p>
+  </CardComponent>
+</div>
+```
+
+<!-- ![Button](https://i.imgur.com/iGIVhXN.jpg) -->
+
+<CardComponent variant="outline">
+  <h3>I am a card heading</h3>
+  <p>I am card Content</p>
+</CardComponent>
+
+##### Card Solid
+
+```jsx
+<CardComponent variant="solid">
+  <h3>I am a card heading</h3>
+  <p>I am card Content</p>
+</CardComponent>
+```
+
+<!-- ![Button](https://i.imgur.com/AbrmEdn.jpg) -->
+
+<CardComponent variant="solid">
+  <h3>I am a card heading</h3>
+  <p>I am card Content</p>
+</CardComponent>
+
+##### Card Shadow
+
+```jsx
+<CardComponent variant="shadow">
+  <h3>I am a card heading</h3>
+  <p>I am card Content</p>
+</CardComponent>
+```
+
+<!-- ![Button](https://i.imgur.com/iPfqa7x.jpg) -->
+
+<CardComponent variant="shadow">
+  <h3>I am a card heading</h3>
+  <p>I am card Content</p>
+</CardComponent>
+
+### Props Referece
+
+| Attributes |                         Values                          | Optional ? |
+| :--------- | :-----------------------------------------------------: | ---------: |
+| children   |                       JSX.Element                       |        Yes |
+| padding    | `small` &#124; `medium` &#124; `large` &#124; `default` |        Yes |
+| fontSize   |         `small` &#124; `medium` &#124; `large`          |        Yes |
+| margin     | `small` &#124; `medium` &#124; `large` &#124; `default` |        Yes |
+| variant    | `outline` &#124; `plain` &#124; `solid` &#124; `shadow` |        Yes |
diff --git a/docs/docs/components/switch.mdx b/docs/docs/components/switch.mdx
@@ -0,0 +1,82 @@
+# Switch
+
+### Quick start
+
+Here's a quick start guide to get started with the button component
+
+### Importing Component
+
+```jsx
+import { Switch } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Toggle switch
+
+import "@hover-design/react/dist/style.css";
+import { Switch } from "@hover-design/react";
+import { useState } from "react";
+
+export const SwitchComponent = ({ status, isDisabled = false }) => {
+  const [isSwitchOn, setIsSwitchOn] = useState(status || false);
+  return (
+    <Switch
+      status={isSwitchOn}
+      onChange={() => {
+        setIsSwitchOn((prevState) => !prevState);
+      }}
+      isDisabled={isDisabled}
+    />
+  );
+};
+
+```jsx
+<div className="App">
+  <Switch status="{stateVariable}" onChange="{setStateVariable}" />
+</div>
+```
+
+##### Toggle switch off state
+
+<!-- ![Switch](https://i.imgur.com/jeJP03s.png) -->
+
+<SwitchComponent status={false} />
+
+##### Toggle switch on state
+
+<!-- ![Switch](https://i.imgur.com/vFgYBym.png) -->
+
+<SwitchComponent status={true} />
+
+##### Disabled switch
+
+```jsx
+<div className="App">
+  <Switch
+    status="{stateVariable}"
+    onChange="{setStateVariable}"
+    isDisabled="{true}"
+  />
+</div>
+```
+
+##### Disabled switch off state
+
+<!-- ![Switch](https://i.imgur.com/XNRGr2e.png) -->
+
+<SwitchComponent status={false} isDisabled={true} />
+
+##### Disabled switch on state
+
+<!-- ![Switch](https://i.imgur.com/Ffyalpo.png) -->
+
+<SwitchComponent status={true} isDisabled={true} />
+
+## Props Reference
+
+| Attributes |                     Values                      | Optional ? |
+| :--------- | :---------------------------------------------: | ---------: |
+| status     |                    `boolean`                    |         No |
+| onChange   | `React.Dispatch<React.SetStateAction<boolean>>` |         No |
+| isDisabled |                    `boolean`                    |        Yes |