Title: feat: add presets and Storybook stories for Code, Facebook, and Instagram loaders

package.json

@@ -46,61 +46,66 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "rm -fr ./dist ./native && rollup -c",
-    "build:docs": "build-storybook -o docs-build",
-    "test": "npm run test:tsc && npm run test:unit",
-    "test:unit": "npm run test:unit:web && npm run test:unit:native",
-    "test:unit:web": "jest -c jest.web.config.js",
-    "test:unit:native": "jest -c jest.native.config.js",
-    "test:watch": "npm run test:unit -- --watch",
-    "test:tsc": "tsc",
-    "test:tsc:watch": "npm run tsc -- --watch",
-    "commit": "git-cz",
-    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
-    "release": "semantic-release"
-  },
+  "dev": "storybook dev -p 6006",
+  "build": "rm -fr ./dist ./native && rollup -c",
+  "build:docs": "build-storybook -o docs-build",
+  "test": "npm run test:tsc && npm run test:unit",
+  "test:unit": "npm run test:unit:web && npm run test:unit:native",
+  "test:unit:web": "jest -c jest.web.config.js",
+  "test:unit:native": "jest -c jest.native.config.js",
+  "test:watch": "npm run test:unit -- --watch",
+  "test:tsc": "tsc",
+  "test:tsc:watch": "npm run tsc -- --watch",
+  "commit": "git-cz",
+  "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+  "release": "semantic-release",
+  "storybook": "storybook dev -p 6006"
+
+}
+,
   "devDependencies": {
-    "@babel/plugin-transform-private-methods": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@babel/runtime": "^7.24.0",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "8.2.0",
-    "@significa/prettier-config": "0.0.9",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/storybook-deployer": "^2.8.6",
-    "@types/jest": "24.0.24",
-    "@types/react": "18.2.64",
-    "@types/react-dom": "18.2.21",
-    "@types/react-test-renderer": "18.0.7",
-    "@typescript-eslint/eslint-plugin": "2.13.0",
-    "awesome-typescript-loader": "5.2.1",
-    "commitizen": "^4.2.1",
-    "cz-conventional-changelog": "3.0.2",
-    "husky": "3.1.0",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "metro-react-native-babel-preset": "^0.77.0",
-    "prettier": "1.19.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": "^0.73.3",
-    "react-native-svg": "15.1.0",
-    "react-syntax-highlighter": "^12.2.1",
-    "react-test-renderer": "18.2.0",
-    "rollup": "1.27.14",
-    "rollup-plugin-copy": "3.1.0",
-    "rollup-plugin-replace": "2.2.0",
-    "rollup-plugin-typescript2": "0.25.3",
-    "rollup-plugin-uglify": "6.0.4",
-    "semantic-release": "^17.4.2",
-    "storybook": "^7.6.17",
-    "ts-jest": "^29.1.2",
-    "tslib": "^2.6.2",
-    "typescript": "5.4.2"
-  },
+  "@babel/plugin-transform-private-methods": "^7.23.3",
+  "@babel/preset-react": "^7.23.3",
+  "@babel/preset-typescript": "^7.23.3",
+  "@babel/runtime": "^7.24.0",
+  "@commitlint/cli": "^11.0.0",
+  "@commitlint/config-conventional": "8.2.0",
+  "@significa/prettier-config": "0.0.9",
+  "@storybook/react": "^7.6.17",
+  "@storybook/react-vite": "^7.6.17",
+  "@storybook/storybook-deployer": "^2.8.6",
+  "@types/jest": "24.0.24",
+  "@types/react": "18.2.64",
+  "@types/react-dom": "18.2.21",
+  "@types/react-test-renderer": "18.0.7",
+  "@typescript-eslint/eslint-plugin": "2.13.0",
+  "awesome-typescript-loader": "5.2.1",
+  "commitizen": "^4.2.1",
+  "cz-conventional-changelog": "3.0.2",
+  "husky": "3.1.0",
+  "jest": "29.7.0",
+  "jest-environment-jsdom": "^29.7.0",
+  "metro-react-native-babel-preset": "^0.77.0",
+  "prettier": "1.19.1",
+  "react": "^18.2.0",
+  "react-dom": "^18.2.0",
+  "react-native": "^0.73.11",
+  "react-native-svg": "15.1.0",
+  "react-syntax-highlighter": "^12.2.1",
+  "react-test-renderer": "18.2.0",
+  "rollup": "1.27.14",
+  "rollup-plugin-copy": "3.1.0",
+  "rollup-plugin-replace": "2.2.0",
+  "rollup-plugin-typescript2": "0.25.3",
+  "rollup-plugin-uglify": "6.0.4",
+  "semantic-release": "^17.4.2",
+  "storybook": "^7.6.17",
+  "ts-jest": "^29.1.2",
+  "tslib": "^2.6.2",
+  "typescript": "5.4.2" , 
+  "vite": "^5.4.19"
+}
+,
   "peerDependencies": {
     "react": ">=16.0.0"
   },

src/presets/Instagram.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+const Instagram = (props: any) => (
+  <ContentLoader
+    speed={2}
+    width={400}
+    height={460}
+    viewBox="0 0 400 460"
+    backgroundColor="#f3f3f3"
+    foregroundColor="#ecebeb"
+    {...props}
+  >
+    <circle cx="30" cy="30" r="30" />
+    <rect x="75" y="13" rx="4" ry="4" width="120" height="13" />
+    <rect x="75" y="37" rx="4" ry="4" width="85" height="10" />
+    <rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
+  </ContentLoader>
+);
+
+export default Instagram;

src/stories/Instagram.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { Instagram, InstagramProps } from '../presets/Instagram'
+
+const meta: Meta<typeof Instagram> = {
+  title: 'Presets/Instagram',
+  component: Instagram,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Instagram>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const Customized: Story = {
+  args: {
+    backgroundColor: '#d9d9d9',
+    foregroundColor: '#bfbfbf',
+    speed: 2,
+    rtl: true,
+    uniqueKey: 'instagram-preset-custom',
+  },
+}