chore: add tailwind preset and storybook

[bigint]

• chore: add tailwind preset and storybook
• chore: add tailwind preset and storybook
• chore: mvp storybook
• chore: add package.json scripts

What does this PR do?

🤖 Generated by Copilot at 6de59f2

This pull request adds the Storybook app as a new feature to the lenster repository, and fixes some import and configuration issues in the web app and the ui package. The Storybook app is a tool for developing and testing UI components, and it uses the ui package as a dependency. The web app is the main platform for the lenster users, and it also uses the ui package as a dependency. The ui package is a library that provides reusable UI components for the web app and the Storybook app. The pull request adds and modifies several files in the apps/storybook, apps/web, and packages/ui folders to set up and configure the Storybook app, and to improve the code quality and consistency of the web app and the ui package.

Related issues

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Enhancement (non-breaking small changes to existing functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Explanation of the changes

🤖 Generated by Copilot at 6de59f2

• Add a new Storybook app to the repository, which is a tool for developing and testing UI components (link, link, link, link, link, link, link, link, link, link)
• Configure the ESLint rules, TypeScript compiler options, PostCSS plugins, and Tailwind CSS framework for the Storybook app, extending the base settings from the ui and tsconfig packages (link, link, link, link)
• Configure the main settings, global parameters, and decorators for the Storybook app, using the Next.js framework and the docs and controls addons (link, link)
• Import the Tailwind CSS classes for the Storybook app, using the style.css file (link)
• Define the name, version, license, scripts, dependencies, and devDependencies for the Storybook app, using the package.json file (link)
• Create stories for the Button component from the ui package, using the Button.stories.tsx file (link)
• Create a documentation page for the Storybook app, using the Introduction.mdx file (link)
• Fix the import order and paths of the UI components from the ui package, which is a library that provides reusable UI components for the web app and the Storybook app (link, link, link, link, link, link, link)
  • Group and sort the UI components alphabetically in the FeedEventFilters, Mod, MediaFilter, and ModAction components, which are UI elements that allow users to filter and manage the events, publications, and media in the platform (link, link, link, link)
  • Import the Alert component from the root index file instead of the subfolder in the DeletePublication and GlobalAlerts components, which are UI elements that display global alerts for deleting and reporting publications (link, link)
  • Import the UI components from the src subfolder instead of the root folder in the ui package, which exports the UI components from the src subfolder, where they are defined and implemented (link)
• Simplify the Tailwind CSS configuration for the web app, which is a utility-first CSS framework that provides ready-made styles and components (link)
  • Reuse the base configuration from the ui package instead of duplicating the settings and extending the colors in the tailwind.config.js file for the web app (link)
• Remove the unnecessary inclusion of the src/styles/index.css file in the TypeScript compiler options for the web app, which is a tool that uses TypeScript to type-check and transpile the code (link)
  • Delete the src/styles/index.css file from the include array in the tsconfig.json file for the web app, as it is handled by the Next.js framework and the PostCSS tool (link)
• Add the scripts and devDependencies for the ui package, which are commands and packages that can be executed to perform tasks such as type-checking and linting (link, link)
  • Add the type-check and lint scripts to the package.json file for the ui package, using the TypeScript and ESLint tools (link)
  • Add the ESLint, TypeScript, and tsconfig packages to the devDependencies object in the package.json file for the ui package, using the same versions as the other packages in the repository (link)

Emoji

📚🎨🛠️

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
prerender	✅ Ready (Inspect)	Visit Preview	Apr 11, 2023 10:41am

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
web	⬜️ Ignored (Inspect)		Apr 11, 2023 10:41am

[socket-security]

New dependency changes detected. Learn more about Socket for GitHub ↗︎

---

🚨 Potential security issues found in this pull request. To accept the risk, merge this PR and you will not be notified again.

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore esbuild@0.16.17
• @SocketSecurity ignore esbuild@0.16.3
• @SocketSecurity ignore esbuild@0.17.16

📜 Install scripts

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Package	Script field	Source
esbuild@0.16.17 (added)	postinstall	package.json via storybook-addon-turbo-build@1.1.0, apps/storybook/package.json via storybook-addon-turbo-build@1.1.0
esbuild@0.16.3 (added)	postinstall	package.json via wrangler@2.15.0, packages/workers/curated-profiles/package.json via wrangler@2.15.0, packages/workers/freshdesk/package.json via wrangler@2.15.0, packages/workers/metadata/package.json via wrangler@2.15.0, packages/workers/prerender/package.json via wrangler@2.15.0, packages/workers/sts-generator/package.json via wrangler@2.15.0
esbuild@0.17.16 (added)	postinstall	package.json via @storybook/addon-essentials@7.0.2, @storybook/addon-interactions@7.0.2, @storybook/blocks@7.0.2, @storybook/nextjs@7.0.2, @storybook/react@7.0.2, storybook@7.0.2, wrangler@2.15.0, apps/storybook/package.json via @storybook/addon-essentials@7.0.2, @storybook/addon-interactions@7.0.2, @storybook/blocks@7.0.2, @storybook/nextjs@7.0.2, @storybook/react@7.0.2, storybook@7.0.2, packages/workers/curated-profiles/package.json via wrangler@2.15.0, packages/workers/freshdesk/package.json via wrangler@2.15.0, packages/workers/metadata/package.json via wrangler@2.15.0, packages/workers/prerender/package.json via wrangler@2.15.0, packages/workers/sts-generator/package.json via wrangler@2.15.0

Pull request alert summary

Issue	Status
Install scripts	⚠️ 3 issues
Native code	✅ 0 issues
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

---

📊 Modified Dependency Overview:

➕ Added Package	Capability Access	+/- Transitive Count	Publisher
ui@0.2.4	None	+1
storybook-addon-turbo-build@1.1.0	network, shell, environment	+62	pocka
@storybook/addon-styling@0.3.2	network	+82	shaunlloyd
storybook@7.0.2	None	+432	shilman
@storybook/addon-essentials@7.0.2	None	+186	shilman
@storybook/testing-library@0.0.14-next.2	None	+86	yannbf
eslint-plugin-storybook@0.6.11	None	+8	yannbf
postcss-loader@7.2.4	eval	+2	evilebottnawi
@storybook/addon-links@7.0.2	network	+22	shilman
@storybook/nextjs@7.0.2	filesystem, environment	+412	shilman
@storybook/addon-interactions@7.0.2	None	+54	shilman
@storybook/blocks@7.0.2	eval	+52	shilman
@storybook/react@7.0.2	None	+64	shilman