Website Docusaurus config (#157)

* Node v18 + update eslint

* Update prettier + tsconfig

* Minor dep updates

* Some major dep updates

* More major dep updates

* Fix eslint import errors in SDS web

* Upgrade React 17 to 18

* Update GH action to use Node v18

* Updated colors

* SDS v2: typography (#125)

* Updated typography + pxToRem function

* Fix asset path when refreshing sub-pages

* Remove Link + Code from Typography + add descriptions

* Temp file to trigger PR preview

* Replace IBM Plex Sans font (#126)

* Replace icons + optimize logos (#127)

* ThemeSwitch component (#128)

* Replace icons + optimize logos

* New theme switch + SVG cleanup

* Cleanup

* Updated Button component (#131)

* Updated Button component

* Update colors, border radius, padding

* Updated Input component (#132)

* Input update in progress

* Updated Input component

* Updated Link component (#133)

* Updated Icon component

* Use left arrow on the left side

* Update Notification component (#134)

* Update Notification component

* Update icon size

* SDS version 1.0.0-beta.0

* Update logos SVGs + cleanup

* SDS version 1.0.0-beta.1

* Updated Card, Input, and Button components + small tweaks (#135)

* Card component + small tweaks

* Button: add isPill prop

* Input: add isPill prop

* Button: add isExtraPadding prop

* Badge component (#137)

* Updated Checkbox and RadioButton components (#136)

* Updated Checkbox

* Update RadioButton

* Checkbox fieldSize prop

* RadioButton fieldSize prop

* Updated Select component (#138)

* Updated Textarea component (#139)

* Updated Textarea component

* Cleanup

* Minor global CSS updates

* SDS version 1.0.0-beta.2

* Banner component (#140)

* Rename StatusBar to Banner

* Fix typo

* Banner component

* Various small tweaks (#141)

* Checkbox without label

* Make Button label optional

* Add error without message prop to form components

* SDS version 1.0.0-beta.3

* Updated Tooltip + some tweaks (#142)

* Updated Badge

* Floater component + updated Tooltip and CopyText

* Updated Avatar + small tweaks (#143)

* Extra padding for form inputs

* Avatar + AssetIcon components

* Profile component

* Profile copy address

* SDS version 1.0.0-beta.4

* Floater fix + SDS version 1.0.0-beta.5

* Another floater fix + SDS version 1.0.0-beta.6

* Serve stellar-identicon-js locally (#144)

* Floater and tooltip color update and small fix (#145)

* SDS version 1.0.0-beta.7

* Optional title for ProjectLogo and Layout.Header (#147)

* allows for optional title in ProjectLogo and Layout.Header

* turns boolean expression to ternary for optional title and updates props on website details

* SDS version 1.0.0-beta.8

* SDS version 1.0.0-beta.9

* rename classNames prop to addlClassName (#148)

* rename classNames prop to addlClasses

* renames addlClasses to addlClassName

* bumps version tag for sds

* picks out addlClassName from props before spreading onto dom nodes (#149)

* picks out addlClassName from props before spreading onto dom nodes

* updates website props for typography components

* SDS version 1.0.0-beta.11

* Button: update tertiary colors (#150)

* Toggle updated + small tweaks (#151)

* Button: destructive/error/success variants (#152)

* Button: destructive/error/success variants

* Update Button gap

* Updated Card component

* Updated Modal component (#153)

* SDS version 1.0.0-beta.12

* Add new icons (#154)

* SDS version 1.0.0-beta.13

* Input password preset (#155)

* Remove icon added (#156)

* SDS version 1.0.0-beta.14

* Basic Docusaurus setup

* Basic SDS example

* Make docs initial page

* Fix broken link

* Temp rename

* Enable Docusaurus website

---------

Co-authored-by: aristides <[email protected]>
Co-authored-by: Aristides Staffieri <[email protected]>

@stellar/design-system-website/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

@stellar/design-system-website/README.md

@@ -1,3 +1,45 @@
 # Stellar Design System Website
 
-TODO
+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.

@stellar/design-system-website/babel.config.js

@@ -1,22 +1,3 @@
 module.exports = {
-  presets: [
-    "@babel/preset-react",
-    "@babel/preset-typescript",
-    [
-      "@babel/preset-env",
-      {
-        targets: {
-          browsers: "last 2 versions",
-        },
-        modules: false,
-        loose: false,
-      },
-    ],
-  ],
-  plugins: ["transform-class-properties", "react-hot-loader/babel"],
-  env: {
-    test: {
-      plugins: ["transform-es2015-modules-commonjs"],
-    },
-  },
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
 };

@stellar/design-system-website/docs/intro.md

@@ -0,0 +1,64 @@
+---
+slug: /
+sidebar_position: 1
+---
+
+# Intro
+
+```tsx live
+<PreviewBlock>
+  <Button variant="primary" size="md">
+    Test button
+  </Button>
+</PreviewBlock>
+```
+
+Let's discover **Docusaurus in less than 5 minutes**.
+
+## Getting Started
+
+Get started by **creating a new site**.
+
+Or **try Docusaurus immediately** with
+**[docusaurus.new](https://docusaurus.new)**.
+
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related
+    to dependencies.
+
+## Generate a new site
+
+Generate a new Docusaurus site using the **classic template**.
+
+The classic template will automatically be added to your project after you run
+the command:
+
+```bash
+npm init docusaurus@latest my-website classic
+```
+
+You can type this command into Command Prompt, Powershell, Terminal, or any
+other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
+## Start your site
+
+Run the development server:
+
+```bash
+cd my-website
+npm run start
+```
+
+The `cd` command changes the directory you're working with. In order to work
+with your newly created Docusaurus site, you'll need to navigate the terminal
+there.
+
+The `npm run start` command builds your website locally and serves it through a
+development server, ready for you to view at http://localhost:3000/.
+
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads
+automatically** and displays your changes.

@stellar/design-system-website/docs/tutorial-basics/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Tutorial - Basics",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn the most important Docusaurus concepts."
+  }
+}

@stellar/design-system-website/docs/tutorial-basics/congratulations.md

@@ -0,0 +1,30 @@
+---
+sidebar_position: 6
+---
+
+# Congratulations!
+
+You have just learned the **basics of Docusaurus** and made some changes to the
+**initial template**.
+
+Docusaurus has **much more to offer**!
+
+Have **5 more minutes**? Take a look at
+**[versioning](../tutorial-extras/manage-docs-versions.md)** and
+**[i18n](../tutorial-extras/translate-your-site.md)**.
+
+Anything **unclear** or **buggy** in this tutorial?
+[Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
+
+## What's next?
+
+- Read the [official documentation](https://docusaurus.io/)
+- Modify your site configuration with
+  [`docusaurus.config.js`](https://docusaurus.io/docs/api/docusaurus-config)
+- Add navbar and footer items with
+  [`themeConfig`](https://docusaurus.io/docs/api/themes/configuration)
+- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
+- Add a [search bar](https://docusaurus.io/docs/search)
+- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
+- Get involved in the
+  [Docusaurus Community](https://docusaurus.io/community/support)

@stellar/design-system-website/docs/tutorial-basics/create-a-blog-post.md

@@ -0,0 +1,36 @@
+---
+sidebar_position: 3
+---
+
+# Create a Blog Post
+
+Docusaurus creates a **page for each blog post**, but also a **blog index
+page**, a **tag system**, an **RSS** feed...
+
+## Create your first Post
+
+Create a file at `blog/2021-02-28-greetings.md`:
+
+```md title="blog/2021-02-28-greetings.md"
+---
+slug: greetings
+title: Greetings!
+authors:
+  - name: Joel Marcey
+    title: Co-creator of Docusaurus 1
+    url: https://github.com/JoelMarcey
+    image_url: https://github.com/JoelMarcey.png
+  - name: Sébastien Lorber
+    title: Docusaurus maintainer
+    url: https://sebastienlorber.com
+    image_url: https://github.com/slorber.png
+tags: [greetings]
+---
+
+Congratulations, you have made your first post!
+
+Feel free to play around and edit this post as much you like.
+```
+
+A new blog post is now available at
+[http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).

@stellar/design-system-website/docs/tutorial-basics/create-a-document.md

@@ -0,0 +1,58 @@
+---
+sidebar_position: 2
+---
+
+# Create a Document
+
+Documents are **groups of pages** connected through:
+
+- a **sidebar**
+- **previous/next navigation**
+- **versioning**
+
+## Create your first Doc
+
+Create a Markdown file at `docs/hello.md`:
+
+```md title="docs/hello.md"
+# Hello
+
+This is my **first Docusaurus document**!
+```
+
+A new document is now available at
+[http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
+
+## Configure the Sidebar
+
+Docusaurus automatically **creates a sidebar** from the `docs` folder.
+
+Add metadata to customize the sidebar label and position:
+
+```md title="docs/hello.md" {1-4}
+---
+sidebar_label: "Hi!"
+sidebar_position: 3
+---
+
+# Hello
+
+This is my **first Docusaurus document**!
+```
+
+It is also possible to create your sidebar explicitly in `sidebars.js`:
+
+```js title="sidebars.js"
+module.exports = {
+  tutorialSidebar: [
+    "intro",
+    // highlight-next-line
+    "hello",
+    {
+      type: "category",
+      label: "Tutorial",
+      items: ["tutorial-basics/create-a-document"],
+    },
+  ],
+};
+```

@stellar/design-system-website/docs/tutorial-basics/create-a-page.md

@@ -0,0 +1,45 @@
+---
+sidebar_position: 1
+---
+
+# Create a Page
+
+Add **Markdown or React** files to `src/pages` to create a **standalone page**:
+
+- `src/pages/index.js` → `localhost:3000/`
+- `src/pages/foo.md` → `localhost:3000/foo`
+- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
+
+## Create your first React Page
+
+Create a file at `src/pages/my-react-page.js`:
+
+```jsx title="src/pages/my-react-page.js"
+import React from "react";
+import Layout from "@theme/Layout";
+
+export default function MyReactPage() {
+  return (
+    <Layout>
+      <h1>My React page</h1>
+      <p>This is a React page</p>
+    </Layout>
+  );
+}
+```
+
+A new page is now available at
+[http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
+
+## Create your first Markdown Page
+
+Create a file at `src/pages/my-markdown-page.md`:
+
+```mdx title="src/pages/my-markdown-page.md"
+# My Markdown page
+
+This is a Markdown page
+```
+
+A new page is now available at
+[http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).

@stellar/design-system-website/docs/tutorial-basics/deploy-your-site.md

@@ -0,0 +1,35 @@
+---
+sidebar_position: 5
+---
+
+# Deploy your site
+
+Docusaurus is a **static-site-generator** (also called
+**[Jamstack](https://jamstack.org/)**).
+
+It builds your site as simple **static HTML, JavaScript and CSS files**.
+
+## Build your site
+
+Build your site **for production**:
+
+```bash
+npm run build
+```
+
+The static files are generated in the `build` folder.
+
+## Deploy your site
+
+Test your production build locally:
+
+```bash
+npm run serve
+```
+
+The `build` folder is now served at
+[http://localhost:3000/](http://localhost:3000/).
+
+You can now deploy the `build` folder **almost anywhere** easily, **for free**
+or very small cost (read the
+**[Deployment Guide](https://docusaurus.io/docs/deployment)**).