docs(blade): configure storybook (#391)

Co-authored-by: Chaitanya Deorukhkar <[email protected]>

.eslintignore

@@ -5,7 +5,7 @@ node_modules
 coverage
 
 # build direcotries
-**/docs
+**/storybook-site
 **/build
 packages/blade/components.js
 packages/blade/components.d.ts

.eslintrc.js

@@ -50,6 +50,16 @@ module.exports = {
     },
   },
   overrides: [
+    {
+      files: ['**/*.{md,mdx}'],
+      extends: ['plugin:mdx/recommended'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+        'react/jsx-filename-extension': [1, { extensions: ['.md', '.mdx'] }],
+        'react/display-name': 'off',
+        'react/prop-types': 'off',
+      },
+    },
     {
       files: ['**/*.{ts,tsx}'],
       extends: [

.github/workflows/blade-chromatic.yml

@@ -0,0 +1,31 @@
+name: Blade Chromatic
+
+on: push
+env:
+  GITHUB_ACCESS_TOKEN: ${{ secrets.CI_BOT_TOKEN }}
+
+jobs:
+  chromatic-deployment:
+    name: Chromatic Deployment
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Codebase
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Use Node v14
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - name: Setup Cache & Install Dependencies
+        uses: bahmutov/npm-install@v1
+        with:
+          install-command: yarn --frozen-lockfile
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_ACCESS_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: packages/blade
+          buildScriptName: react:storybook:build
+          exitOnceUploaded: true

.github/workflows/blade-validate.yml

@@ -23,10 +23,10 @@ jobs:
       - name: Lint Source Code
         run: yarn lint
       - name: Run Web Tests
-        run: yarn test:web
+        run: yarn test:react
         working-directory: packages/blade
       - name: Run Native Tests
-        run: yarn test:native
+        run: yarn test:react-native
         working-directory: packages/blade
       - name: Run TypeScript Checks
         run: yarn tsc

.gitignore

@@ -5,7 +5,7 @@ node_modules
 coverage
 
 # build direcotries
-**/docs
+**/storybook-site
 **/build
 packages/blade/components.js
 packages/blade/components.d.ts

.prettierignore

@@ -5,7 +5,7 @@ node_modules
 coverage
 
 # build direcotries
-**/docs
+**/storybook-site
 **/build
 packages/blade/components.js
 packages/blade/tokens.js

README.md

@@ -35,11 +35,11 @@
 - [🤝 How to contribute](#-how-to-contribute)
 - [📝 License](#-license)
 ## 📦 Packages
-Blade right now has 2 packages
+Blade has 2 packages
 ### [`@razorpay/blade`](https://github.com/razorpay/blade/tree/master/packages/blade)
 This package is under **active development**. In this `README` we'll only refer to this version of blade.
 ### [`@razorpay/blade-old`](https://github.com/razorpay/blade/tree/master/packages/blade-old)
-This package is under **maintenance** and it won't have any major releases. It will be soon deprecated once the newer version is released as a stable release. Documentation for this package can be found [here](https://github.com/razorpay/blade/blob/master/packages/blade-old/README.md)
+This package is under **maintenance** and it won't have any major releases. It will be **deprecated** once the newer version (`@razorpay/blade`) is ready for a stable release. Documentation for this package can be found [here](https://github.com/razorpay/blade/blob/master/packages/blade-old/README.md)
 ## 🏁 Getting Started
 ### ⚙️ Installation
 #### ✍🏻 Pre-requisite
@@ -49,11 +49,12 @@ Before using universe just ensure following things
 * You must be running Node version >=14.0.0
 * You must have `yarn` installed
 * Generate a Personal Access Token on GitHub by [visiting this link](https://github.com/settings/tokens/new?scopes=repo,workflow,write:packages,read:repo_hook,write:packages)
-  - From Enable SSO, click `Authorize` button next to Razorpay logo.
+  - If you belong to razorpay organisation then you will need to enable SSO by clicking `Authorize` button next to Razorpay logo.
 * Run `code ~/.bashrc` or `code ~/.zshrc` in your editor and add this line 
   ```
   export GITHUB_ACCESS_TOKEN="<YOUR_TOKEN>"
   ```
+  > Note: Replace `<YOUR_TOKEN>` with your actual GitHub Personal Access Token
 * Run `source ~/.bashrc` or `source ~/.zshrc` based on the file you added your token.
 * Run `code ~/.npmrc` and append the following
 ```bash
@@ -64,7 +65,7 @@ Before using universe just ensure following things
 ```
 #### ⬇️ Add blade to your application
 ```shell
-$ yarn add @razorpay/blade
+yarn add @razorpay/blade
 ```
 #### 🔜 Add blade libraries to your figma project
 
@@ -74,47 +75,47 @@ We have all the examples under `packages/examples` directory. To run any example
 
 1. Setup the example project
     ```shell
-    $ cd packages/examples/<example-name>
-    $ yarn
+    cd packages/examples/<example-name>
+    yarn
     ```
 
 2. Publish the blade package with your changes using [`yalc`](https://www.npmjs.com/package/yalc).
     ```shell
     # run this from packages/blade directory
-    $ npx yalc publish
+    npx yalc publish
     ```
 
 3. Install the updated `blade` package using [`yalc`](https://www.npmjs.com/package/yalc).
     ```shell
     # run this from packages/examples/<example-name> directory
-    $ npx yalc add @razorpay/blade
+    npx yalc add @razorpay/blade
     ```
 
 4. Run the example project and verify the changes
     ```shell
     # this script can vary based on the kind of project so check the example `package.json` to find the relevant script to start the project
-    $ yarn start
+    yarn start
     ```
 
 #### Running Tests
 We use `react-testing-library` for writing tests. If you want to write platform specific tests then suffix the test file with `filename.native.ts` or `filename.web.ts`
 
-* To run the tests for web projects follow the steps below:
+* To run the tests for react web projects follow the steps below:
   ```shell
-  $ cd packages/blade
-  $ yarn test:web
+  cd packages/blade
+  yarn test:react
   ```
-* To run the tests for native projects follow the steps below:
+* To run the tests for react-native projects follow the steps below:
   ```shell
-  $ cd packages/blade
-  $ yarn test:native
+  cd packages/blade
+  yarn test:react-native
   ```
 > To update the snapshots run the test commands with `-u` as suffix
 
 ### 👀 How to use blade?
 #### Tokens
-To start using tokens in your application you can follow below steps:
-1. Wrap you component tree with `BladeProvider` and pass it `paymentTheme` or `bankingTheme` tokens.
+To start using tokens in your application you can follow these steps:
+1. Wrap your App with `BladeProvider` and pass it `paymentTheme` or `bankingTheme` tokens.
 ```jsx
 // App entry point
 import { BladeProvider } from '@razorpay/blade/components';
@@ -132,15 +133,15 @@ function App(): JSX.Element {
 
 export default App;
 ```
-2. You can also pass in optional `colorScheme` prop to the `BladeProvider` mentioning whether you want the `light`, `dark` or `system`'s default color scheme. The default is `light`.
+2. You can also pass an optional `colorScheme` prop to the `BladeProvider` mentioning whether you want the `light`, `dark` or `system`'s default color scheme. The default is `light`.
 ```jsx
 <BladeProvider themeTokens={paymentTheme} colorScheme='dark'>
    <Card/>
 </BladeProvider>
 ```
-3. After you've wrapped your component tree under `BladeProvider`, you can use the `useTheme()` hook to get the access to the current theme context.
+3. After you've wrapped your App with `BladeProvider`, you can use the `useTheme()` hook to get access to the current theme context.
 ```jsx
-import { useTheme } from '@razorpay/blade/components';
+import { useTheme, Theme } from '@razorpay/blade/components';
 
 const Card = (): React.ReactElement => {
   const { theme } = useTheme();

package.json

@@ -41,6 +41,7 @@
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-babel": "5.3.1",
     "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-mdx": "1.16.0",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",

packages/blade-old/README.md

@@ -33,16 +33,16 @@
 ### ⚙️ Installation
 #### ✍🏻 Pre-requisite
 Before you install the package, make sure that you have performed following steps:
-Before using universe just ensure following things
 
 * You must be running Node version >=14.0.0
 * You must have `yarn` installed
 * Generate a Personal Access Token on GitHub by [visiting this link](https://github.com/settings/tokens/new?scopes=repo,workflow,write:packages,read:repo_hook,write:packages)
-  - From Enable SSO, click `Authorize` button next to Razorpay logo.
+  - If you belong to razorpay organisation then you will need to enable SSO by clicking `Authorize` button next to Razorpay logo.
 * Run `code ~/.bashrc` or `code ~/.zshrc` in your editor and add this line 
   ```
   export GITHUB_ACCESS_TOKEN="<YOUR_TOKEN>"
   ```
+  > Note: Replace `<YOUR_TOKEN>` with your actual GitHub Personal Access Token
 * Run `source ~/.bashrc` or `source ~/.zshrc` based on the file you added your token.
 * Run `code ~/.npmrc` and append the following
 ```bash
@@ -53,7 +53,7 @@ Before using universe just ensure following things
 ```
 #### ⬇️ Add blade to your application
 ```bash
-$ yarn add @razorpay/blade-old
+yarn add @razorpay/blade-old
 ```
 
 #### React Native

packages/blade-old/package.json

@@ -20,8 +20,8 @@
   ],
   "scripts": {
     "web": "npm run web:storybook",
-    "web:storybook": "BABEL_ENV=web-development start-storybook -c ./storybook/web -p 9009 -s docs",
-    "web:storybook:build": "BABEL_ENV=web-production build-storybook -c ./storybook/web -o docs",
+    "web:storybook": "BABEL_ENV=web-development start-storybook -c ./storybook/web -p 9009 -s storybook-site",
+    "web:storybook:build": "BABEL_ENV=web-production build-storybook -c ./storybook/web -o storybook-site",
     "build": "tsc && node ./src/scripts/build.js",
     "native:ios": "react-native run-ios",
     "native:android": "react-native run-android",

packages/blade/.babelrc.js

@@ -1,5 +1,24 @@
-module.exports = {
-  env: {
+const configs = {
+  reactNative: {
+    test: {
+      presets: ['@babel/preset-typescript', 'module:metro-react-native-babel-preset'],
+      plugins: [
+        [
+          'module-resolver',
+          {
+            alias: {
+              '@storybook/react': '@storybook/react-native',
+            },
+          },
+        ],
+        [
+          '@babel/plugin-transform-react-jsx',
+          {
+            runtime: 'automatic',
+          },
+        ],
+      ],
+    },
     development: {
       presets: ['@babel/preset-typescript', 'module:metro-react-native-babel-preset'],
       plugins: [
@@ -41,7 +60,9 @@ module.exports = {
         ],
       ],
     },
-    'web-test': {
+  },
+  react: {
+    test: {
       presets: [
         '@babel/preset-env',
         '@babel/preset-typescript',
@@ -66,9 +87,9 @@ module.exports = {
         ],
       ],
     },
-    'web-development': {
+    development: {
       presets: [
-        ['@babel/preset-env', { modules: false }],
+        ['@babel/preset-env', { modules: false, loose: true }],
         '@babel/preset-typescript',
         ['@babel/preset-react', { runtime: 'automatic' }],
       ],
@@ -89,9 +110,10 @@ module.exports = {
             ssr: true,
           },
         ],
+        // ['react-hot-loader/babel', { skipEnvCheck: true }],
       ],
     },
-    'web-production': {
+    production: {
       presets: [
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-typescript',
@@ -118,3 +140,16 @@ module.exports = {
     },
   },
 };
+
+const framework = process.env.FRAMEWORK;
+if (framework === 'REACT') {
+  module.exports = { env: configs.react };
+} else if (framework === 'REACT_NATIVE') {
+  module.exports = { env: configs.reactNative };
+} else {
+  throw new Error(
+    `Blade requires "FRAMEWORK" environment variable to be set. Valid values are "REACT" and "REACT_NATIVE". Instead, received: ${JSON.stringify(
+      framework,
+    )}`,
+  );
+}

packages/blade/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

packages/blade/.gitignore

@@ -0,0 +1,60 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/