chore(viz): setup tailwind for storybook

Author: always-maap

packages/viz/.storybook/main.js

@@ -1,15 +1,8 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
-  ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
-  }
-}
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+};

packages/viz/.storybook/preview.js

@@ -1,9 +1,11 @@
+import '../dist/styles.css';
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

packages/viz/package.json

@@ -10,31 +10,39 @@
     "data structure",
     "collections-typescript"
   ],
+  "resolutions": {
+    "webpack": "^5"
+  },
   "author": "tur1ng <mohammadali.ap.2000@gmail.com>",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/always-maap/TS-Collection/issues"
   },
+  "scripts": {
+    "storybook": "yarn build-tailwind && start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "build-tailwind": "tailwindcss -i ./src/styles.css -o ./dist/styles.css"
+  },
   "homepage": "https://github.com/always-maap/TS-Collection#readme",
   "devDependencies": {
     "@babel/core": "^7.18.9",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-interactions": "^6.5.9",
     "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-postcss": "^3.0.0-alpha.1",
     "@storybook/builder-webpack5": "^6.5.9",
     "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/react": "^6.5.9",
     "@storybook/testing-library": "^0.0.13",
+    "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.5",
-    "config": "*"
+    "config": "*",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.1.6"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
-  },
-  "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
   }
 }

packages/viz/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/viz/src/index.ts

@@ -0,0 +1 @@
+export * from './renderers/Array1D';

packages/viz/src/renderers/Array1D.tsx

@@ -1,3 +1,17 @@
-export default function Array1D() {
-  return <div>Array 1D</div>;
+import { Array1DAction } from '@ts-collection/protocol';
+
+type Props = {
+  initial: number[];
+  actions: Array1DAction[];
+};
+
+export default function Array1D(props: Props) {
+  const { initial, actions } = props;
+  return (
+    <div className="flex">
+      {initial.map((value, index) => {
+        return <div key={index}>{value}</div>;
+      })}
+    </div>
+  );
 }

packages/viz/src/stories/Array1D.stories.tsx

@@ -8,6 +8,6 @@ export default {
   },
 };
 
-const Template = () => <Array1D />;
+const Template = () => <Array1D initial={[1, 2, 3, 4]} actions={[]} />;
 
 export const LoggedOut = Template.bind({});

packages/viz/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/viz/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [`src/**/*.{js,ts,jsx,tsx}`],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};