diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml new file mode 100644 index 0000000..c0c0d56 --- /dev/null +++ b/.github/workflows/pages.yml @@ -0,0 +1,62 @@ +# Simple workflow for deploying static content to GitHub Pages +name: Deploy to GitHub Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["staging"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Use Node.js v18.14.0 + uses: actions/setup-node@v3 + with: + node-version: "18.14" + + - uses: actions/cache@v3 + with: + path: | + **/node_modules + key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} + + - name: Install Dependencies + run: yarn --frozen-lockfile + + - run: yarn run generate + - run: yarn build-storybook + + - name: Setup Pages + uses: actions/configure-pages@v3 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v2 + with: + path: "./storybook-static" + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v2 \ No newline at end of file diff --git a/.gitignore b/.gitignore index 97cc0ec..8bc54b7 100644 --- a/.gitignore +++ b/.gitignore @@ -14,4 +14,6 @@ lib .env *env. -node_modules/ \ No newline at end of file +node_modules/ + +storybook-static \ No newline at end of file diff --git a/.storybook/assets/akamai-logo.png b/.storybook/assets/akamai-logo.png new file mode 100644 index 0000000..156771e Binary files /dev/null and b/.storybook/assets/akamai-logo.png differ diff --git a/.storybook/global.css b/.storybook/global.css new file mode 100644 index 0000000..5a0f9af --- /dev/null +++ b/.storybook/global.css @@ -0,0 +1,11 @@ +a { + color: #0196d6; +} + +#page-layout { + padding: 2rem 8rem; + + @media screen and (max-width: 768px) { + padding: 2rem 1rem; + } +} diff --git a/.storybook/main.ts b/.storybook/main.ts index 8db57ae..6046e0e 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -2,21 +2,24 @@ import type { StorybookConfig } from "@storybook/react-vite"; const config: StorybookConfig = { stories: [ - "../stories/**/*.mdx", - "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)", + "../src/stories/**/*.stories.@(ts|tsx)", ], + + staticDirs: ['../public'], + addons: [ "@storybook/addon-links", "@storybook/addon-essentials", - "@storybook/addon-onboarding", - "@storybook/addon-interactions", + "@storybook/addon-interactions" ], + framework: { name: "@storybook/react-vite", options: {}, }, - docs: { - autodocs: "tag", - }, + + typescript: { + reactDocgen: "react-docgen-typescript" + } }; export default config; diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html new file mode 100644 index 0000000..63e9380 --- /dev/null +++ b/.storybook/manager-head.html @@ -0,0 +1,59 @@ + +
Coming soon
+Here you can find our design guidelines, component documentation, and resources for building apps with Akamai's design system.
++ Our principles are based on the following core concepts: +
Our design guidelines are a set of best practices and recommendations for creating a consistent and accessible user experience. They cover everything from color and typography to layout and iconography.
+Coming soon
+Coming soon
+Coming soon
+{colorObject}
+ > + ); + })} + > +); diff --git a/stories/utils.ts b/src/stories/utils.ts similarity index 100% rename from stories/utils.ts rename to src/stories/utils.ts diff --git a/stories/ColorSwatch.stories.ts b/stories/ColorSwatch.stories.ts deleted file mode 100644 index a0440f8..0000000 --- a/stories/ColorSwatch.stories.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { ColorSwatch } from './ColorSwatch.tsx'; - -const meta = { - title: 'Example/ColorSwatch', - component: ColorSwatch, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], - argTypes: { - color: { control: 'color' }, - shape: { control: 'radio', options: ['circle', 'square'] }, - elevation: { - control: { - type: 'select', - }, - options: ['none', '0 2px 6px 0 rgba(58,59,63,0.18)', '0 16px 32px 0 rgba(58,59,63,0.18), 0 4px 8px 0 rgba(58,59,63,0.08)'], - }, - }, -} satisfies Meta