-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
extract License Terms List to separate component
- Loading branch information
1 parent
5c30350
commit ce7af79
Showing
12 changed files
with
259 additions
and
141 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
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
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
115 changes: 115 additions & 0 deletions
115
packages/storykit/src/components/LicenseTerms/LicenseTerms.tsx
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,115 @@ | ||
| import { POLICY_TYPE, PolicyType } from "@/lib/types" | ||
| import { cn } from "@/lib/utils" | ||
| import { cva } from "class-variance-authority" | ||
| import { CircleCheck, CircleMinus } from "lucide-react" | ||
|
|
||
| import "../../global.css" | ||
| import "./styles.css" | ||
|
|
||
| const CANS = { | ||
| REMIX: "Remix this work", | ||
| INCLUDE: "Include this work in their own work(s)", | ||
| CREDIT: "Credit you appropriately", | ||
| DISTRIBUTE: "Distribute their remix anywhere", | ||
| PURCHASE_RIGHTS: "Purchase the right to use your creation (for a price you set) and register it into Story Protocol", | ||
| CREATOR_CREDIT: "Credit you as the creator", | ||
| PUBLISH: "Display / publish the work in any medium", | ||
| } | ||
|
|
||
| const ShowCans = ({ type }: { type: string }) => { | ||
| switch (type) { | ||
| case POLICY_TYPE.NON_COMMERCIAL_SOCIAL_REMIXING: | ||
| return [CANS.REMIX, CANS.INCLUDE, CANS.CREDIT, CANS.DISTRIBUTE] | ||
| break | ||
| case POLICY_TYPE.COMMERCIAL_USE: | ||
| return [CANS.PURCHASE_RIGHTS, CANS.CREATOR_CREDIT, CANS.PUBLISH] | ||
| break | ||
| case POLICY_TYPE.COMMERCIAL_REMIX: | ||
| return [CANS.REMIX, CANS.INCLUDE, CANS.CREDIT, CANS.DISTRIBUTE] | ||
| break | ||
| case POLICY_TYPE.OPEN_DOMAIN: | ||
| return [CANS.REMIX, CANS.INCLUDE, CANS.DISTRIBUTE, CANS.PUBLISH] | ||
| break | ||
| default: | ||
| return [] | ||
| break | ||
| } | ||
| } | ||
|
|
||
| const CANNOTS = { | ||
| RESELL: "Resell your original work", | ||
| COMMERCIALIZE: "Commercialize the remix", | ||
| CLAIM_AS_ORIGINAL: "Claim credit for the remix (as original work)", | ||
| CLAIM: "Claim your work as their own", | ||
| REMIX: "Create remixes of the commercial use.", | ||
| } | ||
|
|
||
| const ShowCannots = ({ type }: { type: string }) => { | ||
| switch (type) { | ||
| case POLICY_TYPE.NON_COMMERCIAL_SOCIAL_REMIXING: | ||
| return [CANNOTS.RESELL, CANNOTS.COMMERCIALIZE, CANNOTS.CLAIM_AS_ORIGINAL] | ||
| break | ||
| case POLICY_TYPE.COMMERCIAL_USE: | ||
| return [CANNOTS.CLAIM, CANNOTS.REMIX, CANNOTS.RESELL] | ||
| break | ||
| case POLICY_TYPE.COMMERCIAL_REMIX: | ||
| return [CANNOTS.RESELL, CANNOTS.COMMERCIALIZE, CANNOTS.CLAIM_AS_ORIGINAL] | ||
| break | ||
| case POLICY_TYPE.OPEN_DOMAIN: | ||
| return [CANNOTS.RESELL, CANNOTS.COMMERCIALIZE, CANNOTS.CLAIM_AS_ORIGINAL, CANNOTS.CLAIM] | ||
| break | ||
| default: | ||
| return [CANNOTS.RESELL, CANNOTS.CLAIM, CANNOTS.REMIX] | ||
| break | ||
| } | ||
| } | ||
|
|
||
| const policiesStyles = cva("", { | ||
| variants: { | ||
| size: { | ||
| small: "skLicenseTerms--small", | ||
| medium: "skLicenseTerms--medium", | ||
| large: "skLicenseTerms--large", | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| export type LicenseTermsProps = { | ||
| size?: "small" | "medium" | "large" | ||
| type: PolicyType | ||
| } | ||
|
|
||
| function LicenseTerms({ size = "medium", type }: LicenseTermsProps) { | ||
| const iconWidth = size === "small" ? 16 : size === "medium" ? 20 : 24 | ||
|
|
||
| return ( | ||
| <div className={cn("skLicenseTerms", policiesStyles({ size }))}> | ||
| <div className="skLicenseTerms__properties"> | ||
| {ShowCans({ type }).length ? ( | ||
| <> | ||
| <div className="skLicenseTerms__item-list-title">Others Can</div> | ||
| <div className="skLicenseTerms__list"> | ||
| {ShowCans({ type }).map((can, index) => ( | ||
| <div key={index} className="skLicenseTerms__property skLicenseTerms__property--can"> | ||
| <CircleCheck width={iconWidth} /> | ||
| <span>{can}</span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </> | ||
| ) : null} | ||
| <div className="skLicenseTerms__item-list-title">Others Cannot</div> | ||
| <div className="skLicenseTerms__list"> | ||
| {ShowCannots({ type }).map((can, index) => ( | ||
| <div key={index} className="skLicenseTerms__property skLicenseTerms__property--cannot"> | ||
| <CircleMinus width={iconWidth} /> | ||
| <span>{can}</span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default LicenseTerms |
30 changes: 30 additions & 0 deletions
30
packages/storykit/src/components/LicenseTerms/__docs__/LicenseTerms.mdx
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,30 @@ | ||
| import { Canvas, Controls, Meta } from "@storybook/blocks" | ||
|
|
||
| import * as LicenseTermsStory from "./LicenseTerms.stories" | ||
|
|
||
| <Meta of={LicenseTermsStory} /> | ||
|
|
||
| # LicenseTerms | ||
|
|
||
| Displays the License Terms cans and cannots for specified license type. | ||
|
|
||
| #### Example | ||
|
|
||
| <Canvas of={LicenseTermsStory.Select} /> | ||
|
|
||
| <Controls /> | ||
|
|
||
| ## Usage | ||
|
|
||
| ```ts | ||
|
|
||
| import { LicenseTerms, POLICY_TYPE } from "@storyprotocol/storykit" | ||
|
|
||
| const ExamplePage = () => { | ||
| return ( | ||
| <LicenseTerms type={POLICY_TYPE.NON_COMMERCIAL_SOCIAL_REMIXING} /> | ||
| ); | ||
| }; | ||
|
|
||
| export default ExamplePage; | ||
| ``` |
29 changes: 29 additions & 0 deletions
29
packages/storykit/src/components/LicenseTerms/__docs__/LicenseTerms.stories.tsx
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,29 @@ | ||
| import { POLICY_TYPE, PolicyType } from "@/index" | ||
| import type { Meta, StoryObj } from "@storybook/react" | ||
|
|
||
| import Example from "../LicenseTerms" | ||
|
|
||
| const meta = { | ||
| title: "UI/LicenseTerms", | ||
| component: Example, | ||
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| argTypes: { | ||
| type: { | ||
| options: Object.values(POLICY_TYPE), | ||
| }, | ||
| }, | ||
| args: {}, | ||
| } satisfies Meta<typeof Example> | ||
|
|
||
| export default meta | ||
| type Story = StoryObj<typeof meta> | ||
|
|
||
| export const Select: Story = { | ||
| argTypes: {}, | ||
| args: { | ||
| size: "medium", | ||
| type: POLICY_TYPE.COMMERCIAL_REMIX as PolicyType, | ||
| }, | ||
| } |
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 @@ | ||
| export { default as LicenseTerms } from "./LicenseTerms" |
Oops, something went wrong.