🎉 feat: Standalone storybook (#118)

* 🚧 feat:init storybook

* 🚧 feat: removing onboarding and chromatic package

* 🚧 feat: adding tailwindcss

* 🚧 feat: remove generated app files

* 🚧 feat: Adding prettier

* 🔥 feat: Removing generated stories

* 🚧 feat: Adding tailwind to storybook

* 🚧 feat: Adding components

* 🚧 feat: moving tailwind dependencies to dev

* 🎉 feat: Standalone storybook

* 🎨 feat: format

starters/next/components/ui/CTA/CTA.tsx

@@ -50,7 +50,7 @@ export const CTA = ({
               href && (
                 <Button
                   key={index}
-                  variant={variant || index === 1 ? 'outline' : 'default'}
+                  variant={index === 1 ? 'outline' : variant || 'default'}
                   asChild
                   {...actionProps}
                 >

starters/remix/app/components/ui/CTA/CTA.tsx

@@ -50,7 +50,7 @@ export const CTA = ({
               href && (
                 <Button
                   key={index}
-                  variant={variant || index === 1 ? 'outline' : 'default'}
+                  variant={index === 1 ? 'outline' : variant || 'default'}
                   asChild
                   {...actionProps}
                 >

starters/storybook/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log

starters/storybook/.prettierignore

@@ -0,0 +1 @@
+app/components/ui/**/*.mdx

starters/storybook/.storybook/main.ts

@@ -0,0 +1,37 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
+
+import { join, dirname } from 'path'
+import { mergeConfig } from 'vite'
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  stories: ['../app/**/*.mdx', '../app/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  staticDirs: ['../app/components/ui/static'],
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      plugins: [tsconfigPaths()],
+      resolve: {
+        alias: {
+          '~': '/app',
+        },
+      },
+    })
+  },
+}
+export default config

starters/storybook/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react'
+
+import '../app/tailwind.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

starters/storybook/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

starters/storybook/app/components/ui/Accordion/Accordion.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '~/components/ui'
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+  args: {
+    type: 'single',
+    collapsible: true,
+    children: [
+      <AccordionItem key="item-1" value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>,
+      <AccordionItem key="item-2" value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other
+          componentsaesthetic.
+        </AccordionContent>
+      </AccordionItem>,
+      <AccordionItem key="item-3" value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>,
+    ],
+  },
+  argTypes: {
+    type: { control: 'radio', options: ['single', 'multiple'] },
+    collapsible: { control: 'boolean' },
+    children: { control: 'object' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Accordion>
+
+export const Default: Story = {}
+
+export const SingleType: Story = {
+  args: {
+    type: 'single',
+    collapsible: true,
+  },
+}
+
+export const MultipleType: Story = {
+  args: {
+    type: 'multiple',
+  },
+}
+
+export const NonCollapsible: Story = {
+  args: {
+    type: 'single',
+    collapsible: false,
+  },
+}
+
+export const CustomContent: Story = {
+  args: {
+    type: 'single',
+    collapsible: true,
+    children: [
+      <AccordionItem key="item-1" value="item-1">
+        <AccordionTrigger>What is React?</AccordionTrigger>
+        <AccordionContent>
+          React is a JavaScript library for building user interfaces. It allows
+          you to create reusable UI components and manage the state of your
+          application efficiently.
+        </AccordionContent>
+      </AccordionItem>,
+      <AccordionItem key="item-2" value="item-2">
+        <AccordionTrigger>What are React Hooks?</AccordionTrigger>
+        <AccordionContent>
+          React Hooks are functions that let you use state and other React
+          features in functional components. They were introduced in React 16.8
+          and include hooks like useState, useEffect, useContext, and more.
+        </AccordionContent>
+      </AccordionItem>,
+    ],
+  },
+}

starters/storybook/app/components/ui/Accordion/Accordion.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+
+import { cn } from '~/components/ui/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

starters/storybook/app/components/ui/Accordion/index.ts

@@ -0,0 +1,6 @@
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from './Accordion'

starters/storybook/app/components/ui/Article/Article.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Article } from '~/components/ui'
+
+const meta: Meta<typeof Article> = {
+  title: 'Components/Article',
+  component: Article,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  args: {
+    title: 'How designers estimate the impact of UX?',
+    summary: 'Designers wear many hats, the first one being a moderator.',
+    content: `
+      <p>Designers aren't purely focused on aesthetics — their role encompasses broader business aspects and technology, while carefully evaluating those by estimating the return on investment for each solution.</p>
+      <p>In short, designers ensure that the end value of the specific solution, or product as a whole, brings gains to the client's business as expected and a significant return against the initial investment.</p>
+      <h3>Core Areas of Focus</h3>
+      <p>At intive, our designers maintain this awareness by developing across three core areas:</p>
+      <ul>
+        <li>Business</li>
+        <li>Technology</li>
+        <li>User-centric design practices</li>
+      </ul>
+      <p>For each vertical, they keep ROI in mind, taking care to estimate and realize the impact of UX on the client's budget, goals, and wider technical framework.</p>
+    `,
+    image: {
+      src: '/placeholders/drupal-decoupled/landscape-large.png',
+      alt: 'A cartoon character on a beach with an ice cream',
+    },
+    tags: ['UX', 'Design', 'Business'],
+    publishDate: 1667260800,
+    author: {
+      avatar: {
+        src: '/placeholders/doc-tahedroid/avatar.png',
+        alt: 'Doc Tahedroid',
+      },
+      name: 'Doc Tahedroid',
+    },
+  },
+  argTypes: {
+    title: { control: 'text' },
+    summary: { control: 'text' },
+    content: { control: 'text' },
+    image: { control: 'object' },
+    tags: { control: 'object' },
+    publishDate: { control: 'date' },
+    author: { control: 'object' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Article>
+
+export const Default: Story = {}
+
+export const WithoutSummary: Story = {
+  args: {
+    summary: undefined,
+  },
+}
+
+export const WithoutTags: Story = {
+  args: {
+    tags: undefined,
+  },
+}
+
+export const LongTitle: Story = {
+  args: {
+    title:
+      'This is a very long title that should wrap to multiple lines in the article component',
+  },
+}
+
+export const ShortContent: Story = {
+  args: {
+    content: '<p>This is a short article content.</p>',
+  },
+}
+
+export const DifferentDate: Story = {
+  args: {
+    publishDate: 1684108800,
+  },
+}