diff --git a/storybook/.expo-shared/assets.json b/storybook/.expo-shared/assets.json new file mode 100644 index 0000000..1e6decf --- /dev/null +++ b/storybook/.expo-shared/assets.json @@ -0,0 +1,4 @@ +{ + "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, + "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true +} diff --git a/storybook/.gitignore b/storybook/.gitignore new file mode 100644 index 0000000..e1ca742 --- /dev/null +++ b/storybook/.gitignore @@ -0,0 +1,18 @@ +node_modules/ +.expo/ +dist/ +npm-debug.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision +*.orig.* +web-build/ +lib + +# macOS +.DS_Store + +#build +storybook-static/ \ No newline at end of file diff --git a/storybook/.npmignore b/storybook/.npmignore new file mode 100644 index 0000000..19f1364 --- /dev/null +++ b/storybook/.npmignore @@ -0,0 +1,19 @@ +# Dotfiles +.babelrc +.eslintignore +.eslintrc.json +.gitattributes +_config.yml +.editorconfig + +# Documents +CONTRIBUTING.md +ISSUE_TEMPLATE.txt +img + +# Test cases +__tests__ +dist/__tests__ + +# Example +storybook-static/ diff --git a/storybook/.nvmrc b/storybook/.nvmrc new file mode 100644 index 0000000..59f4a2f --- /dev/null +++ b/storybook/.nvmrc @@ -0,0 +1 @@ +v18.13.0 \ No newline at end of file diff --git a/storybook/.ondevice/Storybook.tsx b/storybook/.ondevice/Storybook.tsx new file mode 100644 index 0000000..c412515 --- /dev/null +++ b/storybook/.ondevice/Storybook.tsx @@ -0,0 +1,6 @@ +import { getStorybookUI } from '@storybook/react-native'; +import './doctools'; +import './storybook.requires'; + +const StorybookUIRoot = getStorybookUI({}); +export default StorybookUIRoot; diff --git a/storybook/.ondevice/doctools.js b/storybook/.ondevice/doctools.js new file mode 100644 index 0000000..d5bc213 --- /dev/null +++ b/storybook/.ondevice/doctools.js @@ -0,0 +1,10 @@ +import { extractArgTypes } from '@storybook/react/dist/modern/client/docs/extractArgTypes'; +import { addArgTypesEnhancer, addParameters } from '@storybook/react-native'; +import { enhanceArgTypes } from '@storybook/docs-tools'; + +addArgTypesEnhancer(enhanceArgTypes); +addParameters({ + docs: { + extractArgTypes, + }, +}); diff --git a/storybook/.ondevice/main.js b/storybook/.ondevice/main.js new file mode 100644 index 0000000..502fb53 --- /dev/null +++ b/storybook/.ondevice/main.js @@ -0,0 +1,9 @@ +module.exports = { + stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'], + addons: [ + '@storybook/addon-ondevice-notes', + '@storybook/addon-ondevice-controls', + '@storybook/addon-ondevice-backgrounds', + '@storybook/addon-ondevice-actions', + ], +}; diff --git a/storybook/.ondevice/preview.js b/storybook/.ondevice/preview.js new file mode 100644 index 0000000..ad57544 --- /dev/null +++ b/storybook/.ondevice/preview.js @@ -0,0 +1,20 @@ +import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; + +export const decorators = [withBackgrounds]; + +export const parameters = { + backgrounds: { + default: 'plain', + values: [ + { name: 'plain', value: 'white' }, + { name: 'warm', value: 'hotpink' }, + { name: 'cool', value: 'deepskyblue' }, + ], + }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +}; diff --git a/storybook/.ondevice/storybook.requires.js b/storybook/.ondevice/storybook.requires.js new file mode 100644 index 0000000..9a114d6 --- /dev/null +++ b/storybook/.ondevice/storybook.requires.js @@ -0,0 +1,85 @@ +/* do not change this file, it is auto generated by storybook. */ + +import { + configure, + addDecorator, + addParameters, + addArgsEnhancer, + clearDecorators, +} from '@storybook/react-native'; + +import '@storybook/addon-ondevice-notes/register'; +import '@storybook/addon-ondevice-controls/register'; +import '@storybook/addon-ondevice-backgrounds/register'; +import '@storybook/addon-ondevice-actions/register'; + +import { argsEnhancers } from '@storybook/addon-actions/dist/modern/preset/addArgs'; + +import { decorators, parameters } from './preview'; + +if (decorators) { + if (__DEV__) { + // stops the warning from showing on every HMR + require('react-native').LogBox.ignoreLogs([ + '`clearDecorators` is deprecated and will be removed in Storybook 7.0', + ]); + } + // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185 + clearDecorators(); + decorators.forEach((decorator) => addDecorator(decorator)); +} + +if (parameters) { + addParameters(parameters); +} + +try { + argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer)); +} catch {} + +const getStories = () => { + return [ + require('../components/Button/Button.stories.tsx'), + require('../components/Text/Text.stories.tsx'), + require('../components/Radio/Radio.stories.tsx'), + require('../components/Alert/Alert.stories.tsx'), + require('../components/Avatar/Avatar.stories.tsx'), + require('../components/Badge/Badge.stories.tsx'), + require('../components/Divider/Divider.stories.tsx'), + require('../components/Box/Box.stories.tsx'), + require('../components/Center/Center.stories.tsx'), + require('../components/Checkbox/Checkbox.stories.tsx'), + require('../components/FormControl/FormControl.stories.tsx'), + require('../components/Heading/Heading.stories.tsx'), + require('../components/HStack/HStack.stories.tsx'), + require('../components/Actionsheet/Actionsheet.stories.tsx'), + require('../components/Toast/Toast.stories.tsx'), + require('../components/UtilityProps/UtilityProps.stories.tsx'), + // require('../components/Icon/Icon.stories.tsx'), + + // require('../components/Icon/Icon.stories.tsx'), + // require('../components/Pressable/Pressable.stories.tsx'), + // require('../components/FormControl/FormControl.stories.tsx'), + // require('../components/Icons/Icons.stories.tsx'), + // require('../components/Avatar/Avatar.stories.tsx'), + // require('../components/Button/Button.stories.tsx'), + // require('../components/Center/Center.stories.tsx'), + // require('../components/Switch/Switch.stories.tsx'), + // require('../components/Checkbox/Checkbox.stories.tsx'), + // require('../components/Heading/Heading.stories.tsx'), + // require('../components/HStack/HStack.stories.tsx'), + // require('../components/Image/Image.stories.tsx'), + // require('../components/Input/Input.stories.tsx'), + // require('../components/Image/Image.stories.tsx'), + // require('../components/Modal/Modal.stories.tsx'), + // require('../components/Slider/Slider.stories.tsx'), + // require('../components/Badge/Badge.stories.tsx'), + // require('../components/Divider/Divider.stories.tsx'), + // require('../components/AlertDialog/AlertDialog.stories.tsx'), + // require('../components/Fab/Fab.stories.tsx'), + // require('../components/IconButton/IconButton.stories.tsx'), + // require('../components/Progress/Progress.stories.tsx'), + ]; +}; + +configure(getStories, module, false); diff --git a/storybook/.storybook/main.js b/storybook/.storybook/main.js new file mode 100644 index 0000000..87efc64 --- /dev/null +++ b/storybook/.storybook/main.js @@ -0,0 +1,39 @@ +const path = require('path'); + +console.log(path.resolve('../../', 'node_modules/@dank-style/react')); +module.exports = { + stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + 'storybook-dark-mode', + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-react-native-web', + '@storybook/addon-docs', + ], + framework: '@storybook/react', + typescript: { + reactDocgen: 'none', + }, + + staticDirs: ['../public'], + webpackFinal: async (config, { configType }) => { + // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' + // You can change the configuration based on that. + // 'PRODUCTION' is used when building the static version of storybook. + + // Make whatever fine-grained changes you need + // config.module.rules.push({ + // test: /\.scss$/, + // use: ['style-loader', 'css-loader', 'sass-loader'], + // include: path.resolve(__dirname, '../'), + // }); + + config.module.rules.push({ + test: /\.(js|ts|tsx)$/, + use: 'babel-loader', + }); + + // Return the altered config + return config; + }, +}; diff --git a/storybook/.storybook/preview-head.html b/storybook/.storybook/preview-head.html new file mode 100644 index 0000000..e69de29 diff --git a/storybook/.storybook/preview.js b/storybook/.storybook/preview.js new file mode 100644 index 0000000..d6bc756 --- /dev/null +++ b/storybook/.storybook/preview.js @@ -0,0 +1,12 @@ +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + docs: { + // inlineStories: false, + }, +}; diff --git a/storybook/.storybook/theme.js b/storybook/.storybook/theme.js new file mode 100644 index 0000000..e04e681 --- /dev/null +++ b/storybook/.storybook/theme.js @@ -0,0 +1,40 @@ +// .storybook/YourTheme.js + +import { create } from '@storybook/theming'; + +export default create({ + base: 'light', + + colorPrimary: 'hotpink', + colorSecondary: 'deepskyblue', + + // UI + appBg: 'white', + appContentBg: 'silver', + appBorderColor: 'grey', + appBorderRadius: 4, + + // Typography + fontBase: '"Open Sans", sans-serif', + fontCode: 'monospace', + + // Text colors + textColor: 'black', + textInverseColor: 'rgba(255,255,255,0.9)', + + // Toolbar default and active colors + barTextColor: 'silver', + barSelectedColor: 'black', + barBg: 'hotpink', + + // Form colors + inputBg: 'white', + inputBorder: 'silver', + inputTextColor: 'black', + inputBorderRadius: 4, + + brandTitle: 'My custom storybook', + brandUrl: 'https://example.com', + brandImage: 'https://place-hold.it/350x150', + brandTarget: '_self', +}); diff --git a/storybook/App.tsx b/storybook/App.tsx new file mode 100644 index 0000000..0d7ab29 --- /dev/null +++ b/storybook/App.tsx @@ -0,0 +1,2 @@ +import StorybookUIRoot from './.ondevice/Storybook'; +export { StorybookUIRoot as default }; diff --git a/storybook/CHANGELOG.md b/storybook/CHANGELOG.md new file mode 100644 index 0000000..4b717d0 --- /dev/null +++ b/storybook/CHANGELOG.md @@ -0,0 +1,7 @@ +# @gluestack/ui + +## 0.1.0 + +### Patch Changes + +- Added accessible styled awesome ui components diff --git a/storybook/README.md b/storybook/README.md new file mode 100644 index 0000000..f392819 --- /dev/null +++ b/storybook/README.md @@ -0,0 +1,35 @@ +![image](https://user-images.githubusercontent.com/3481514/145904252-92e3dc1e-591f-410f-88a1-b4250f4ba6f2.png) + +# getting started + +``` +expo init --template expo-template-storybook AwesomeStorybook +``` + +# Ondevice + +``` +yarn start +``` + +If you add new stories on the native (ondevice version) you either need to have the watcher running or run the stories loader + +To update the stories one time + +``` +yarn update-stories +``` + +To watch the stories files + +``` +yarn storybook-watcher +``` + +Note that this is only necessary for when you add or remove a story file. + +# Web + +``` +yarn storybook +``` diff --git a/storybook/app.json b/storybook/app.json new file mode 100644 index 0000000..24ee219 --- /dev/null +++ b/storybook/app.json @@ -0,0 +1,31 @@ +{ + "expo": { + "name": "injector-example-native", + "slug": "injector-example-native", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/icon.png", + "userInterfaceStyle": "light", + "splash": { + "image": "./assets/splash.png", + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "updates": { + "fallbackToCacheTimeout": 0 + }, + "assetBundlePatterns": ["**/*"], + "ios": { + "supportsTablet": true + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/adaptive-icon.png", + "backgroundColor": "#FFFFFF" + } + }, + "web": { + "favicon": "./assets/favicon.png" + } + } +} diff --git a/storybook/assets/adaptive-icon.png b/storybook/assets/adaptive-icon.png new file mode 100644 index 0000000..03d6f6b Binary files /dev/null and b/storybook/assets/adaptive-icon.png differ diff --git a/storybook/assets/favicon.png b/storybook/assets/favicon.png new file mode 100644 index 0000000..e75f697 Binary files /dev/null and b/storybook/assets/favicon.png differ diff --git a/storybook/assets/icon.png b/storybook/assets/icon.png new file mode 100644 index 0000000..a0b1526 Binary files /dev/null and b/storybook/assets/icon.png differ diff --git a/storybook/assets/splash.png b/storybook/assets/splash.png new file mode 100644 index 0000000..0e89705 Binary files /dev/null and b/storybook/assets/splash.png differ diff --git a/storybook/babel.config.js b/storybook/babel.config.js new file mode 100644 index 0000000..b1e74b7 --- /dev/null +++ b/storybook/babel.config.js @@ -0,0 +1,24 @@ +const path = require("path"); + +module.exports = function (api) { + api.cache(true); + return { + presets: ["babel-preset-expo"], + plugins: [ + process.env.NODE_ENV !== "production" + ? [ + "module-resolver", + { + alias: { + // For development, we want to alias the library to the source + // ["@gluestack/ui-creator"]: path.join( + // __dirname, + // "../creator/src" + // ), + }, + }, + ] + : ["babel-plugin-react-docgen-typescript", { exclude: "node_modules" }], + ], + }; +}; diff --git a/storybook/index.js b/storybook/index.js new file mode 100644 index 0000000..1d6e981 --- /dev/null +++ b/storybook/index.js @@ -0,0 +1,8 @@ +import { registerRootComponent } from 'expo'; + +import App from './App'; + +// registerRootComponent calls AppRegistry.registerComponent('main', () => App); +// It also ensures that whether you load the app in Expo Go or in a native build, +// the environment is set up appropriately +registerRootComponent(App); diff --git a/storybook/metro.config.js b/storybook/metro.config.js new file mode 100644 index 0000000..2b8a5b2 --- /dev/null +++ b/storybook/metro.config.js @@ -0,0 +1,24 @@ +// Learn more https://docs.expo.io/guides/customizing-metro +const { getDefaultConfig } = require('expo/metro-config'); +const path = require('path'); +const findWorkspaceRoot = require('find-yarn-workspace-root'); + +// Find the workspace root, this can be replaced with `find-yarn-workspace-root` +// const workspaceRoot = path.resolve(__dirname, "../../"); + +const workspaceRoot = findWorkspaceRoot(__dirname); +const projectRoot = __dirname; + +const config = getDefaultConfig(projectRoot); + +// 1. Watch all files within the monorepo +config.watchFolders = [workspaceRoot]; +// 2. Let Metro know where to resolve packages, and in what order +config.resolver.nodeModulesPaths = [ + path.resolve(projectRoot, 'node_modules'), + path.resolve(workspaceRoot, 'node_modules'), +]; +// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths` +// config.resolver.disableHierarchicalLookup = true; + +module.exports = config; diff --git a/storybook/package.json b/storybook/package.json new file mode 100644 index 0000000..1913c35 --- /dev/null +++ b/storybook/package.json @@ -0,0 +1,85 @@ +{ + "name": "@gluestack/ui-storybook", + "private": false, + "version": "0.1.0", + "main": "index.js", + "module": "lib/module/index", + "types": "lib/typescript/index.d.ts", + "license": "MIT", + "author": "Mayank Pagar", + "scripts": { + "start": "expo start", + "android": "expo start --android", + "ios": "expo start --ios", + "web": "expo start --web", + "eject": "expo eject", + "update-stories": "sb-rn-get-stories --config-path .ondevice", + "prestart": "yarn update-stories", + "storybook-watcher": "sb-rn-watcher --config-path .ondevice", + "storybook": "export SET NODE_OPTIONS=--openssl-legacy-provider && start-storybook", + "build-storybook": "build-storybook", + "build": "bob build", + "prepare": "bob build", + "release": "release-it" + }, + "dependencies": { + "@dank-style/react": "0.1.12", + "@gluestack/ui-creator": "^0.1.0-alpha.10", + "@react-native-async-storage/async-storage": "~1.17.3", + "@react-native-community/datetimepicker": "6.5.2", + "@react-native-community/slider": "4.2.4", + "expo": "^47.0.0", + "expo-linear-gradient": "~12.0.1", + "expo-status-bar": "~1.4.2", + "fs": "^0.0.1-security", + "prism-react-renderer": "^1.3.5", + "react-native-safe-area-context": "^4.4.1", + "react-native-svg": "^13.6.0", + "react-native-web": "^0.18.10", + "uuidv4": "^6.2.13" + }, + "devDependencies": { + "@babel/core": "^7.19.3", + "@storybook/addon-actions": "^6.5.14", + "@storybook/addon-controls": "^6.5.14", + "@storybook/addon-docs": "^6.5.15", + "@storybook/addon-essentials": "^6.5.14", + "@storybook/addon-links": "^6.5.14", + "@storybook/addon-ondevice-actions": "next", + "@storybook/addon-ondevice-backgrounds": "next", + "@storybook/addon-ondevice-controls": "next", + "@storybook/addon-ondevice-notes": "next", + "@storybook/addon-react-native-web": "^0.0.19", + "@storybook/client-api": "^6.5.15", + "@storybook/react": "^6.5.14", + "@storybook/react-native": "next", + "@types/react": "~18.0.24", + "@types/react-native": "~0.70.6", + "babel-loader": "^8.2.3", + "babel-plugin-react-docgen-typescript": "^1.5.1", + "babel-plugin-react-native-web": "^0.18.10", + "find-yarn-workspace-root": "^2.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-native-builder-bob": "^0.20.3", + "storybook-dark-mode": "^2.0.4", + "typescript": "4.2.2" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*", + "react-native": "*", + "react-native-web": "*" + }, + "react-native-builder-bob": { + "source": "src", + "output": "lib", + "targets": [ + "commonjs", + [ + "module" + ], + "typescript" + ] + } +} diff --git a/storybook/public/assets/PostgresCliReference.png b/storybook/public/assets/PostgresCliReference.png new file mode 100644 index 0000000..fead0be Binary files /dev/null and b/storybook/public/assets/PostgresCliReference.png differ diff --git a/storybook/public/assets/postgresScreenshot.png b/storybook/public/assets/postgresScreenshot.png new file mode 100644 index 0000000..6391cba Binary files /dev/null and b/storybook/public/assets/postgresScreenshot.png differ diff --git a/storybook/router.js b/storybook/router.js new file mode 100644 index 0000000..ea97c5f --- /dev/null +++ b/storybook/router.js @@ -0,0 +1,19 @@ +/** + * This file is treated as the upstream in the nginx configuration. + * + * path: The path to match on + * proxy: The proxy configuration + * proxy.path: The path to match on the proxied configuration + * size_in_mb: The maximum size of the request body in megabytes, default is 50 mb + * + * @returns {Array} Array of locations + */ +module.exports = () => [ + { + path: '/storybook', + proxy: { + path: '/', + }, + size_in_mb: '50', + }, +]; diff --git a/storybook/src/PluginDocs/PostgresPlugin/CLI Reference/index.stories.mdx b/storybook/src/PluginDocs/PostgresPlugin/CLI Reference/index.stories.mdx new file mode 100644 index 0000000..bbc48d5 --- /dev/null +++ b/storybook/src/PluginDocs/PostgresPlugin/CLI Reference/index.stories.mdx @@ -0,0 +1,70 @@ +import { Canvas, Meta, Story } from "@storybook/addon-docs"; + + + +# CLI Reference + +## + +
+ + + + +* There is list of certain commands which are available in this plugin. + Below is a little description of those commands. + +
+ +*
+ + postgres + + +
+ + * This command will show the list of available commands with postgres instance. + + In order to run this command with your **Gluestack App**, you need to run the below + command: + +
+ + ``` + node glue postgres + ``` + +
+ + * In order show the list of installed **postgres instance** you need to run the following + command: + +
+ + ``` + node glue postgres list + ``` + +
+ + * Inorder to change **configuration** of your **postgres instance** you need to run the + following command: + +
+ + ``` + node glue postgres config + ``` + +
+ + After that it will ask for the configuration and you just need to provide it with it. + + Your console output will be something like this: + + + +
+ +
+ diff --git a/storybook/src/PluginDocs/PostgresPlugin/GettingStarted/index.stories.mdx b/storybook/src/PluginDocs/PostgresPlugin/GettingStarted/index.stories.mdx new file mode 100644 index 0000000..a41106f --- /dev/null +++ b/storybook/src/PluginDocs/PostgresPlugin/GettingStarted/index.stories.mdx @@ -0,0 +1,11 @@ +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# Getting Started + +## + +
+ +This plugin will help you in installing **Postgres** into your application. \ No newline at end of file diff --git a/storybook/src/PluginDocs/PostgresPlugin/Goals/index.stories.mdx b/storybook/src/PluginDocs/PostgresPlugin/Goals/index.stories.mdx new file mode 100644 index 0000000..6f65f1a --- /dev/null +++ b/storybook/src/PluginDocs/PostgresPlugin/Goals/index.stories.mdx @@ -0,0 +1,27 @@ +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# Goals + +## + +
+ +* Install **postgres instance** into your **Gluestack Application**. + +
+ +* Run **postgres instance** through **Backend-Engine Plugin Instance**. + +
+ +* **Postgres instance** will act as your database for the application. + We can interact with it by installing other plugins like **Glue Plugin + Graphql** which depends upon this plugin in order to interact with + data. + +
+ + + diff --git a/storybook/src/PluginDocs/PostgresPlugin/HowItWorks/index.stories.mdx b/storybook/src/PluginDocs/PostgresPlugin/HowItWorks/index.stories.mdx new file mode 100644 index 0000000..cd59886 --- /dev/null +++ b/storybook/src/PluginDocs/PostgresPlugin/HowItWorks/index.stories.mdx @@ -0,0 +1,82 @@ +import { Canvas, Meta, Story } from "@storybook/addon-docs"; + + + + +# How it works + +## + +
+ +* ## Working + +
+ + * **Postgres Plugin Instance** image will be running inside a docker container which + is managed by your **Backend-Engine** plugin. + + +
+ + + * Behind the scene what is happening is, when you have installed the postgres plugin and + configured it, your **Glue Backend-Engine Plugin** adds **postgres** image inside its docker file + and from there it runs the postgres image. + + +
+ + + * Your directory stucture for the **postgres plugin instance** will be something + like this: +
+ + ``` + 📦databases + ┗ 📂postgres + ┗ 📜README.md + ``` +
+
+ + + * In order to start running this plugin you need to run the following command: + +
+ + ```bash + $ node glue develop:up + ``` + +
+ + This command will start running the docker container of all the instances + and plugin you have created. Here, in this case it will start running + your **postgres plugin instance** container, with the help of your **Backend-Engine + plugin instance**. + +
+
+ +* ## Instructions to start development with this plugin + +
+ + * In order to interact with **postgres plugin database**, you can install another + plugin named **Glue Plugin Graphql** which injects **Hasura Engine** which is + connected with your postgres database. + + + + + + + + + + + + + + diff --git a/storybook/src/PluginDocs/PostgresPlugin/HowToInstall/index.stories.mdx b/storybook/src/PluginDocs/PostgresPlugin/HowToInstall/index.stories.mdx new file mode 100644 index 0000000..0209c7d --- /dev/null +++ b/storybook/src/PluginDocs/PostgresPlugin/HowToInstall/index.stories.mdx @@ -0,0 +1,53 @@ +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + + +# How to install + + + +
+ +* First go to your local terminal and type this command in order to install this plugin + +
+ + ```bash + $ node glue add postgres + ``` + +
+ +* For example, In my case I wanted to install **postgres plugin instance** with my instance + name as **“postgres”**, then I will follow this pattern to install postgres plugin instance in + my app: + +
+ + ```bash + $ node glue add postgres postgres + ``` + + Here my instance name is **postgres**. + +
+ +* Now, after installing the dependency it will ask you for **database name, database username, + database password**. In my case I have provided it with default configuration. + + Option will be something like this: + + + + + +
+ +* If the plugin is installed successfully then you can go and see that inside **backend** + folder there is folder named “**database**” and inside that **database** folder, there + is a new folder which is named after your instance i.e. **postgres** is created. + + Overall directory path for the **postgres plugin instance** will be something like this: + + **backend/databases/postgres** diff --git a/storybook/src/PluginDocs/PostgresPlugin/Requirements/index.stories.mdx b/storybook/src/PluginDocs/PostgresPlugin/Requirements/index.stories.mdx new file mode 100644 index 0000000..9b483f1 --- /dev/null +++ b/storybook/src/PluginDocs/PostgresPlugin/Requirements/index.stories.mdx @@ -0,0 +1,21 @@ +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# Requirements + +## + +
+ +* Backend-Engine Plugin Instance + +
+ + + ```bash + $ node glue add backend-engine engine + ``` + +
+ diff --git a/storybook/tsconfig.json b/storybook/tsconfig.json new file mode 100644 index 0000000..cad198f --- /dev/null +++ b/storybook/tsconfig.json @@ -0,0 +1,34 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@gluestack/ui-creator": ["../creator/src/index"], + "@gluestack/popper": ["../popper/src/index"], + "@gluestack/ui": ["../ui/src/index"] + }, + "emitDeclarationOnly": true, + "noEmit": false, + "declaration": true, + "allowUnreachableCode": false, + "allowUnusedLabels": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "importsNotUsedAsValues": "error", + "forceConsistentCasingInFileNames": true, + "jsx": "react", + "lib": ["esnext", "dom"], + "module": "esnext", + "moduleResolution": "node", + "noFallthroughCasesInSwitch": true, + "noImplicitReturns": true, + "noImplicitUseStrict": false, + "noStrictGenericChecks": false, + "noUnusedLocals": false, + "noUnusedParameters": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "strict": true, + "target": "esnext" + }, + "exclude": ["lib", "node_modules"] +} diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js new file mode 100644 index 0000000..ffead12 --- /dev/null +++ b/storybook/webpack.config.js @@ -0,0 +1,49 @@ +const path = require('path'); +const createExpoWebpackConfigAsync = require('@expo/webpack-config'); +const { resolver } = require('./metro.config'); +const findWorkspaceRoot = require('find-yarn-workspace-root'); + +// Find the workspace root, this can be replaced with `find-yarn-workspace-root` +// const workspaceRoot = path.resolve(__dirname, "../../.."); + +const workspaceRoot = findWorkspaceRoot(__dirname); + +const node_modules = path.join(workspaceRoot, 'node_modules'); +const root = path.resolve(__dirname, '../..'); + +module.exports = async function (env, argv) { + const config = await createExpoWebpackConfigAsync(env, argv); + + config.module.rules.push({ + test: /\.(js|ts|tsx)$/, + include: [path.resolve(root, 'src')], + use: 'babel-loader', + }); + + config.module.rules.push({ + test: /\.(png|jpe?g|gif)$/i, + use: [ + { + loader: 'file-loader', + }, + ], + }); + + // We need to make sure that only one version is loaded for peerDependencies + // So we alias them to the versions in example's node_modules + Object.assign(config.resolve.alias, { + ...resolver.extraNodeModules, + 'react-native-web': path.join(node_modules, 'react-native-web'), + }); + + // Maybe you want to turn off compression in dev mode. + if (config.mode === 'development') { + config.devServer.compress = false; + } + // Or prevent minimizing the bundle when you build. + if (config.mode === 'production') { + config.optimization.minimize = false; + } + + return config; +};