Docs

apps/common-app/src/components/Select.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { ScrollView } from 'react-native-gesture-handler';
 import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
 

packages/audiodocs/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    }
+  }
+}

packages/audiodocs/.gitignore

@@ -0,0 +1,29 @@
+# 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*
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.yarn/cache

packages/audiodocs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](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.

packages/audiodocs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

packages/audiodocs/docs/fundamentals/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Fundamentals",
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}

packages/audiodocs/docs/fundamentals/getting-started.mdx

@@ -0,0 +1,98 @@
+---
+slug: /
+sidebar_position: 1
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Getting started
+
+The goal of _Fundamentals_ is to guide You through setup proces of Audio API as well as show base concepts standing behind audio programming using web audio framework to give you the confidence to explore more advanced use cases on your own. This section is packed with interactive examples, code snippets and explanations. Are you ready? Let's make some noise!
+
+## What is React Native Audio API?
+
+React Native Audio API is a powerful high-performant and low-level audio library built by [Software Mansion](https://swmansion.com/).
+RN Audio API is fully compatible\* with [Web Audio specification](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API), making it easy to write audio-intensive applications for iOS, Android and Web with just one codebase.
+
+## Installation
+
+It takes only a few steps to add audio api to Your project:
+
+### Install the package
+
+Install `react-native-audio-api` package from npm:
+
+<Tabs groupId="package-managers">
+  <TabItem value="expo" label="EXPO" default>
+
+    npx expo install react-native-audio-api
+
+  </TabItem>
+  <TabItem value="npm" label="NPM">
+
+    npm install react-native-audio-api
+
+  </TabItem>
+  <TabItem value="yarn" label="YARN">
+
+    yarn add react-native-audio-api
+
+  </TabItem>
+</Tabs>
+
+### Expo development build
+
+When using an [Expo development build](https://docs.expo.dev/develop/development-builds/introduction/), run prebuild to update the native code in the `ios` and `android` directories.
+
+```bash
+npx expo prebuild
+```
+
+### Platform specific setup
+
+#### Android
+
+No additional steps are necessary.
+
+#### iOS
+
+While developing for iOS, make sure to install [pods](https://cocoapods.org) first before running the app:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+#### Web
+
+No additional steps are necessary.
+
+:::caution
+
+`react-native-audio-api` on web, exposes browser built-in Web Audio API, but for compatibility between platforms, its limits available interfaces to APIs that are implemented on iOS and Android.
+
+:::
+
+### Clear Metro bundler cache (recommended)
+
+<Tabs groupId="package-managers">
+  <TabItem value="expo" label="EXPO" default>
+
+    npx expo start -c
+
+  </TabItem>
+  <TabItem value="npm" label="NPM">
+
+    npm start -- --reset-cache
+
+  </TabItem>
+  <TabItem value="yarn" label="YARN">
+
+    yarn start --reset-cache
+
+  </TabItem>
+</Tabs>
+
+## What's next?
+
+In [the next section](/fundamentals/lets-make-some-noise), we will learn how to prepare audio api and how to play some sound!.

packages/audiodocs/docs/fundamentals/lets-make-some-noise.mdx

@@ -0,0 +1,32 @@
+---
+sidebar_position: 2
+---
+
+# Let's make some noise!
+
+In this section, we will guide you through the basic concepts of Audio API. We're going to use core audio components such as `AudioContext` and `AudioBufferSourceNode` to simply play sound from a file, which will help you develop a basic understanding of the library.
+
+## Using audio context
+
+Let's start by bootstrapping a simple application with a play button and creating our first instance of `AudioContext` object.
+
+```jsx
+import { AudioContext } from 'react-native-audio-api';
+
+export default function App() {
+  const handlePlay = () => {
+    const audioContext = new AudioContext();
+  };
+
+  return (
+    <Pressable onPress={handlePlay}>
+      <Text>Play sound!</text>
+    </Pressable>
+  )
+}
+```
+
+`AudioContext` is object that controls both the creation of the nodes, as well as execution of the audio processing, or decoding. In simple words it is our entry to the audio processing world!
+
+
+##

packages/audiodocs/docusaurus.config.js

@@ -0,0 +1,100 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
+const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+const config = {
+  title: 'React Native Audio API',
+  favicon: 'img/favicon.ico',
+
+  // Set the production url of your site here
+  url: 'https://dummy-docs.no.no',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: '/',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
+  organizationName: 'software-mansion-labs', // Usually your GitHub org/user name.
+  projectName: 'react-native-audio-api', // Usually your repo name.
+
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  // Even if you don't use internationalization, you can use this field to set
+  // useful metadata like html lang. For example, if your site is Chinese, you
+  // may want to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  presets: [
+    [
+      'classic',
+      {
+        docs: {
+          routeBasePath: '/',
+          breadcrumbs: false,
+          sidebarCollapsible: false,
+          sidebarPath: require.resolve('./sidebars.js'),
+          editUrl:
+            'https://github.com/software-mansion-labs/react-native-audio-api/edit/main/packages/audiodocs/docs',
+        },
+        blog: false,
+        theme: {
+          customCss: './src/css/custom.css',
+        },
+        googleAnalytics: {
+          trackingID: 'G-4BDHB978P1',
+          anonymizeIP: true,
+        },
+      },
+    ],
+  ],
+
+  markdown: {
+    mermaid: true,
+  },
+
+  themeConfig: {
+    // Replace with your project's social card
+    // image: 'img/docusaurus-social-card.jpg',
+    navbar: {
+      hideOnScroll: true,
+      // logo: {
+      //   // alt: 'react-native-audio-api logo',
+      //   src: 'img/logo.svg',
+      //   srcDark: 'img/logo.svg',
+      // },
+      items: [
+        {
+          type: 'docSidebar',
+          sidebarId: 'tutorialSidebar',
+          position: 'left',
+          label: 'Tutorial',
+        },
+        {
+          'href':
+            'https://github.com/software-mansion-labs/react-native-audio-api',
+          'label': 'GitHub',
+          'position': 'right',
+          'aria-label': 'GitHub repository',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [],
+      copyright: `All trademarks and copyrights belong to their respective owners.`,
+    },
+    prism: {
+      theme: lightCodeTheme,
+      darkTheme: darkCodeTheme,
+    },
+  },
+};
+
+module.exports = config;