-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from timDeHof/feat/add_animations
feat(timeline): enhance timeline component with new features and UI i…
- Loading branch information
Showing
25 changed files
with
19,315 additions
and
3,369 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,6 @@ | ||
| { | ||
| "extends": "next/core-web-vitals" | ||
| } | ||
| "extends": [ | ||
| "next/core-web-vitals", | ||
| "plugin:storybook/recommended" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| # Workflow name | ||
| name: Build and Publish Storybook to GitHub Pages | ||
|
|
||
| on: | ||
| # Event for the workflow to run on | ||
| push: | ||
| branches: | ||
| - 'main' # Replace with the branch you want to deploy from | ||
|
|
||
| permissions: | ||
| contents: read | ||
| pages: write | ||
| id-token: write | ||
|
|
||
| # List of jobs | ||
| jobs: | ||
| deploy: | ||
| runs-on: ubuntu-latest | ||
| # Job steps | ||
| steps: | ||
| # Manual Checkout | ||
| - uses: actions/checkout@v4 | ||
| with: | ||
| fetch-depth: 0 | ||
| # Set up Node | ||
| - uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '20' | ||
| #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow | ||
| - uses: bitovi/[email protected] | ||
| with: | ||
| install_command: yarn install # default: npm ci | ||
| build_command: yarn build-storybook # default: npm run build-storybook | ||
| path: storybook-static # default: dist/storybook | ||
| checkout: false # default: true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import type { StorybookConfig } from "@storybook/nextjs"; | ||
|
|
||
| const config: StorybookConfig = { | ||
| stories: [ | ||
| "../src/**/*.mdx", | ||
| "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)", | ||
| ], | ||
| addons: [ | ||
| "@storybook/addon-links", | ||
| "@storybook/addon-essentials", | ||
| "@storybook/addon-onboarding", | ||
| "@storybook/addon-interactions", | ||
| "@storybook/addon-themes", | ||
| "@storybook/addon-a11y", | ||
| "@storybook/addon-coverage", | ||
| { | ||
| name: '@storybook/addon-styling-webpack', | ||
| options: { | ||
| postCss: true, | ||
| }, | ||
| }, | ||
| ], | ||
| framework: { | ||
| name: "@storybook/nextjs", | ||
| options: {}, | ||
| }, | ||
| docs: { | ||
| autodocs: "tag", | ||
| }, | ||
| staticDirs: ['../public'], | ||
| }; | ||
|
|
||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| <meta name="description" content="Components for my shadcntimeline project" key="desc" /> | ||
| <meta name="robots" content="noindex" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import type { Preview } from "@storybook/react"; | ||
| import '../src/app/globals.css'; | ||
|
|
||
| import { withThemeByClassName } from "@storybook/addon-themes"; | ||
|
|
||
| const preview: Preview = { | ||
| parameters: { | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i, | ||
| }, | ||
| }, | ||
| }, | ||
|
|
||
| decorators: [withThemeByClassName({ | ||
| themes: { | ||
| // nameOfTheme: 'classNameForTheme', | ||
| light: '', | ||
| dark: 'dark', | ||
| }, | ||
| defaultTheme: 'light', | ||
| })] | ||
| }; | ||
|
|
||
| export default preview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import React from "react"; | ||
| import type { Preview } from "@storybook/react"; | ||
| import "../src/app/globals.css"; | ||
| import { ThemeProvider } from "../src/components/providers/theme-provider"; | ||
|
|
||
| const preview: Preview = { | ||
| parameters: { | ||
| actions: { argTypesRegex: "^on[A-Z].*" }, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i, | ||
| }, | ||
| }, | ||
| backgrounds: { | ||
| disable: true, | ||
| }, | ||
| layout: 'fullscreen', | ||
| docs: { | ||
| story: { | ||
| inline: true, | ||
| }, | ||
| container: ({ children, context }) => ( | ||
| <ThemeProvider | ||
| attribute="class" | ||
| defaultTheme="dark" | ||
| enableSystem | ||
| disableTransitionOnChange | ||
| > | ||
| <div className="dark min-h-screen bg-background text-foreground"> | ||
| {children} | ||
| </div> | ||
| </ThemeProvider> | ||
| ), | ||
| }, | ||
| }, | ||
| decorators: [ | ||
| (Story) => ( | ||
| <ThemeProvider | ||
| attribute="class" | ||
| defaultTheme="dark" | ||
| enableSystem | ||
| disableTransitionOnChange | ||
| > | ||
| <div className="dark min-h-screen bg-background"> | ||
| <div className="container mx-auto max-w-2xl py-10"> | ||
| <Story /> | ||
| </div> | ||
| </div> | ||
| </ThemeProvider> | ||
| ), | ||
| ], | ||
| }; | ||
|
|
||
| export default preview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,131 @@ | ||
| <div align="center"> | ||
|
|
||
| # shadcn-timeline | ||
| # Shadcn Timeline Component | ||
|
|
||
| Customizable and re-usable timeline component for you to use in your projects. | ||
| A beautiful, accessible, and customizable timeline component built with React and Tailwind CSS. | ||
|
|
||
| Built on top of shadcn. | ||
| ## Demo & Documentation | ||
|
|
||
| <a href='#Preview'>Preview</a> <a href='#Usage'>Usage</a> <a href='#Installation'>Installation</a> <a href='#Tech Stack'>Tech Stack</a> | ||
| </div> | ||
| 🔗 [View Storybook Documentation](https://shadcn-timeline.vercel.app) | ||
|
|
||
| ## Preview | ||
| ## Features | ||
|
|
||
|  | ||
| - 🎨 Customizable appearance with different sizes and colors | ||
| - ♿️ Fully accessible with ARIA attributes | ||
| - 🔄 Loading and error states | ||
| - 🎭 Smooth animations with Framer Motion | ||
| - 📱 Responsive design | ||
| - 🎯 TypeScript support | ||
| - 🌐 SSR Compatible | ||
| - 📚 Full Storybook documentation and examples | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| # Clone the repository | ||
| git clone https://github.com/timDeHof/shadcn-timeline.git | ||
|
|
||
| # Install dependencies | ||
| npm install | ||
|
|
||
| # Run Storybook locally | ||
| npm run storybook | ||
| ``` | ||
|
|
||
| ## Usage | ||
| You can use the source code and copy paste components into your NextJS projects. | ||
| These components in particular: | ||
|
|
||
| ```tsx | ||
| import { Timeline, TimelineItem } from '@/components/timeline' | ||
| import { Check } from 'lucide-react' | ||
|
|
||
| export default function Example() { | ||
| return ( | ||
| <Timeline> | ||
| <TimelineItem | ||
| date={new Date("2024-01-01")} | ||
| title="Feature Released" | ||
| description="New timeline component is now available" | ||
| icon={<Check />} | ||
| status="completed" | ||
| /> | ||
| <TimelineItem | ||
| date={new Date("2024-01-02")} | ||
| title="In Progress" | ||
| description="Working on documentation" | ||
| status="in-progress" | ||
| /> | ||
| <TimelineItem | ||
| date={new Date("2024-01-03")} | ||
| title="Upcoming" | ||
| description="Planning future updates" | ||
| status="pending" | ||
| /> | ||
| </Timeline> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| ### Timeline | ||
|
|
||
| | Prop | Type | Default | Description | | ||
| |----------|--------------------|---------|-----------------------| | ||
| | size | 'sm' \| 'md' \| 'lg' | 'md' | Size of the timeline | | ||
| | iconsize | 'sm' \| 'md' \| 'lg' | 'md' | Size of icons | | ||
|
|
||
| ### TimelineItem | ||
|
|
||
| | Prop | Type | Default | Description | | ||
| |----------------|---------------------------------------------|-------------|----------------------------| | ||
| | date | Date \| string \| number | - | Date of the event | | ||
| | title | string | - | Title of the event | | ||
| | description | string | - | Description of the event | | ||
| | icon | ReactNode | - | Custom icon | | ||
| | iconColor | 'primary' \| 'secondary' \| 'muted' \| 'accent' | 'primary' | Color theme of the icon | | ||
| | status | 'completed' \| 'in-progress' \| 'pending' | 'completed' | Current status | | ||
| | loading | boolean | false | Show loading state | | ||
| | error | string | - | Show error state | | ||
|
|
||
| ### TimelineTime | ||
|
|
||
| | Prop | Type | Default | Description | | ||
| |----------------|----------------------------------------|-------------|----------------------------| | ||
| | date | Date \| string \| number | - | Date to display | | ||
| | format | string \| Intl.DateTimeFormatOptions | - | Date formatting options | | ||
| | className | string | - | Additional CSS classes | | ||
|
|
||
| ## Server-Side Rendering | ||
|
|
||
| The component is fully SSR compatible and handles hydration properly. Date formatting is handled on the client side to prevent hydration mismatches. | ||
|
|
||
| ## License | ||
|
|
||
| MIT | ||
|
|
||
| ## Contributing | ||
|
|
||
| Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. | ||
|
|
||
| ## Development | ||
|
|
||
| To run Storybook locally: | ||
|
|
||
| ```bash | ||
| /src/app/components/timeline/timeline-layout.tsx & timeline.tsx | ||
| npm run storybook | ||
| ``` | ||
|
|
||
| ## Installation | ||
| If you'd like to spin up a local environment similar to the **demo**, follow these instructions: | ||
|
|
||
| 1. Clone the repository to a directory on your pc via command prompt: | ||
| ```bash | ||
| git clone https://github.com/timDeHof/shadcn-timeline.git | ||
| ``` | ||
| 2. Open the folder: | ||
| ```bash | ||
| cd shadcn-timeline | ||
| ``` | ||
| 3. Install dependencies: | ||
| ```bash | ||
| npm install | ||
| ``` | ||
| 4. Start the development server: | ||
| ```bash | ||
| npm run dev | ||
| ``` | ||
| 5. Go to [localhost](http://localhost:3000) and start playing around! | ||
|
|
||
| ## Tech stack | ||
| [NextJS](https://nextjs.org/) - React Framework for the web | ||
|
|
||
| [TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework | ||
|
|
||
| [shadcn-ui](https://ui.shadcn.com/) - UI component built using Radix UI and Tailwind CSS | ||
| This will start Storybook on http://localhost:6006 | ||
|
|
||
| ## Testing | ||
|
|
||
| Run the test suite: | ||
|
|
||
| ```bash | ||
| # Run tests | ||
| npm run test | ||
|
|
||
| # Run Storybook tests | ||
| npm run test-storybook | ||
|
|
||
| # Run Storybook tests with coverage | ||
| npm run test-storybook:coverage | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| module.exports = { | ||
| testEnvironment: "jsdom", | ||
| transform: { | ||
| "^.+\\.(ts|tsx)$": [ | ||
| "babel-jest", | ||
| { | ||
| presets: [ | ||
| "@babel/preset-env", | ||
| "@babel/preset-react", | ||
| "@babel/preset-typescript", | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| moduleNameMapper: { | ||
| "^@/(.*)$": "<rootDir>/src/$1", | ||
| }, | ||
| setupFilesAfterEnv: ["<rootDir>/jest.setup.js"], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| require("@testing-library/jest-dom"); |
Oops, something went wrong.